/* =========================================  
 NORTON ANTIVIRUS — chatbot.css  
 Professional Chat Widget Styles  
 ========================================= */

/* ── FAB BUTTON ── */  
#nortonChatWidget {  
 position: fixed;  
 bottom: 28px;  
 right: 28px;  
 z-index: 9000;  
 font-family: 'Inter', sans-serif;  
}

.nc-fab {  
 width: 60px; height: 60px;  
 border-radius: 50%;  
 background: linear-gradient(135deg, #FFC300, #FFE04B);  
 border: none; cursor: pointer;  
 box-shadow: 0 8px 28px rgba(255,195,0,0.45), 0 2px 8px rgba(0,0,0,0.3);  
 display: flex; align-items: center; justify-content: center;  
 position: relative; z-index: 10;  
 transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s;  
 animation: nc-fab-pulse 3s ease infinite;  
}  
.nc-fab:hover {  
 transform: scale(1.1);  
 box-shadow: 0 12px 36px rgba(255,195,0,0.55);  
}  
@keyframes nc-fab-pulse {  
 0%,100%{ box-shadow: 0 8px 28px rgba(255,195,0,0.45); }  
 50%{ box-shadow: 0 8px 40px rgba(255,195,0,0.7), 0 0 0 8px rgba(255,195,0,0.12); }  
}  
.nc-fab-icon { font-size: 24px; color: #000; position: absolute; transition: all 0.3s; }  
.nc-open-icon { opacity: 0; transform: rotate(-90deg) scale(0.7); }  
.nc-closed-icon { opacity: 1; transform: rotate(0) scale(1); }  
#nortonChatWidget.nc-open .nc-open-icon { opacity: 1; transform: rotate(0) scale(1); }  
#nortonChatWidget.nc-open .nc-closed-icon { opacity: 0; transform: rotate(90deg) scale(0.7); }  
#nortonChatWidget.nc-open .nc-fab { animation: none; }

.nc-badge {  
 position: absolute; top: -4px; right: -4px;  
 width: 22px; height: 22px; border-radius: 50%;  
 background: #ff4444; color: #fff;  
 font-size: 11px; font-weight: 800;  
 display: flex; align-items: center; justify-content: center;  
 border: 2px solid #0d1117;  
 animation: nc-badge-bounce 0.5s cubic-bezier(0.34,1.56,0.64,1);  
}  
@keyframes nc-badge-bounce { from{transform:scale(0)} to{transform:scale(1)} }

/* ── PANEL ── */  
.nc-panel {  
 position: absolute;  
 bottom: 74px; right: 0;  
 width: 380px;  
 background: #111827;  
 border: 1px solid rgba(255,195,0,0.2);  
 border-radius: 18px;  
 overflow: hidden;  
 display: flex; flex-direction: column;  
 max-height: 580px;  
 box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);  
 transform: scale(0.8) translateY(30px);  
 transform-origin: bottom right;  
 opacity: 0; pointer-events: none;  
 transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;  
}  
#nortonChatWidget.nc-open .nc-panel {  
 transform: scale(1) translateY(0);  
 opacity: 1; pointer-events: all;  
}

/* ── HEADER ── */  
.nc-header {  
 background: linear-gradient(135deg, #1c2128, #21262d);  
 padding: 14px 16px;  
 display: flex; align-items: center; justify-content: space-between;  
 border-bottom: 1px solid rgba(255,195,0,0.15);  
 flex-shrink: 0;  
}  
.nc-header-left { display: flex; align-items: center; gap: 10px; }  
.nc-header-av {  
 width: 40px; height: 40px; border-radius: 50%;  
 background: linear-gradient(135deg, #FFC300, #FFE04B);  
 display: flex; align-items: center; justify-content: center;  
 font-size: 18px; flex-shrink: 0;  
 box-shadow: 0 2px 8px rgba(255,195,0,0.4);  
}  
.nc-header-info strong { display: block; color: #fff; font-size: 14px; font-weight: 700; }  
.nc-header-info span { font-size: 11px; color: #8b949e; display: flex; align-items: center; gap: 5px; }  
.nc-online-dot { color: #00d084; font-size: 8px; animation: nc-blink 1.5s ease infinite; }  
@keyframes nc-blink { 0%,100%{opacity:1} 50%{opacity:0.3} }  
.nc-header-actions { display: flex; gap: 4px; }  
.nc-header-actions button {  
 width: 30px; height: 30px; border-radius: 8px;  
 background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);  
 color: #8b949e; font-size: 13px; cursor: pointer;  
 display: flex; align-items: center; justify-content: center;  
 transition: all 0.2s;  
}  
.nc-header-actions button:hover { background: rgba(255,195,0,0.1); color: #FFC300; border-color: rgba(255,195,0,0.2); }

/* ── SUBHEADER ── */  
.nc-subheader {  
 background: rgba(255,195,0,0.06);  
 border-bottom: 1px solid rgba(255,195,0,0.1);  
 padding: 7px 14px;  
 display: flex; align-items: center; gap: 7px;  
 font-size: 11px; color: #8b949e; flex-shrink: 0;  
}  
.nc-subheader i { color: #FFC300; }  
.nc-live-badge {  
 margin-left: auto;  
 background: rgba(0,208,132,0.15); border: 1px solid rgba(0,208,132,0.3);  
 color: #00d084; font-size: 9px; font-weight: 800;  
 padding: 2px 7px; border-radius: 20px; letter-spacing: 1px;  
}

/* ── MESSAGES ── */  
.nc-messages {  
 flex: 1; overflow-y: auto;  
 padding: 14px 12px;  
 display: flex; flex-direction: column; gap: 12px;  
 scroll-behavior: smooth;  
}  
.nc-messages::-webkit-scrollbar { width: 4px; }  
.nc-messages::-webkit-scrollbar-track { background: transparent; }  
.nc-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ── MESSAGE ROW ── */  
.nc-msg {  
 display: flex; align-items: flex-end; gap: 8px;  
 opacity: 0; transform: translateY(12px);  
 transition: opacity 0.35s ease, transform 0.35s ease;  
}  
.nc-msg.nc-visible { opacity: 1; transform: translateY(0); }  
.nc-msg.nc-bot { justify-content: flex-start; }  
.nc-msg.nc-user { justify-content: flex-end; }  
.nc-avatar {  
 width: 30px; height: 30px; border-radius: 50%;  
 background: linear-gradient(135deg, #FFC300, #FFE04B);  
 display: flex; align-items: center; justify-content: center;  
 font-size: 14px; flex-shrink: 0;  
}  
.nc-user-av { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); }  
.nc-bubble-wrap { display: flex; flex-direction: column; max-width: 78%; }  
.nc-name { font-size: 10px; color: #8b949e; margin-bottom: 3px; font-weight: 600; padding-left: 2px; }  
.nc-bubble {  
 padding: 10px 13px;  
 border-radius: 14px;  
 font-size: 13px; line-height: 1.6;  
 word-break: break-word;  
}  
.nc-bubble-bot {  
 background: #1c2128;  
 border: 1px solid rgba(255,255,255,0.06);  
 color: #c9d1d9;  
 border-radius: 14px 14px 14px 4px;  
}  
.nc-bubble-user {  
 background: linear-gradient(135deg, #FFC300, #FFE04B);  
 color: #000; font-weight: 500;  
 border-radius: 14px 14px 4px 14px;  
}  
.nc-time {  
 font-size: 10px; color: #8b949e;  
 margin-top: 3px; padding: 0 2px;  
}  
.nc-msg.nc-user .nc-time { text-align: right; }

/* ── TYPING INDICATOR ── */  
.nc-typing-bubble {  
 display: flex; align-items: center; gap: 4px;  
 padding: 12px 16px; width: fit-content;  
}  
.nc-dot {  
 width: 7px; height: 7px; border-radius: 50%;  
 background: #FFC300; opacity: 0.6;  
 animation: nc-typing 1.2s ease infinite;  
}  
.nc-dot:nth-child(2) { animation-delay: 0.2s; }  
.nc-dot:nth-child(3) { animation-delay: 0.4s; }  
@keyframes nc-typing {  
 0%,80%,100%{ transform: translateY(0); opacity:0.4; }  
 40%{ transform: translateY(-6px); opacity:1; }  
}

/* ── QUICK REPLIES ── */  
.nc-quick-wrap {  
 display: flex; flex-wrap: wrap; gap: 6px;  
 margin-top: 8px; padding-left: 2px;  
}  
.nc-quick-btn {  
 background: rgba(255,195,0,0.08);  
 border: 1px solid rgba(255,195,0,0.25);  
 color: #FFC300; border-radius: 20px;  
 padding: 5px 12px; font-size: 12px; font-weight: 600;  
 cursor: pointer; transition: all 0.2s;  
 font-family: 'Inter', sans-serif;  
 white-space: nowrap;  
}  
.nc-quick-btn:hover { background: rgba(255,195,0,0.18); border-color: #FFC300; }

/* ── DIVIDER (agent joined) ── */  
.nc-divider {  
 text-align: center; margin: 6px 0;  
 font-size: 11px; color: #8b949e;  
 display: flex; align-items: center; gap: 8px;  
}  
.nc-divider::before, .nc-divider::after {  
 content:''; flex:1; height:1px; background:rgba(255,255,255,0.06);  
}

/* ── POPULAR TOPICS ── */  
.nc-topics {  
 padding: 0 12px 10px;  
 border-top: 1px solid rgba(255,255,255,0.05);  
 flex-shrink: 0;  
}  
.nc-topics-label {  
 font-size: 10px; text-transform: uppercase; letter-spacing: 1px;  
 color: #8b949e; padding: 8px 0 6px; font-weight: 700;  
}  
.nc-topics-grid {  
 display: grid; grid-template-columns: 1fr 1fr; gap: 6px;  
}  
.nc-topics-grid button {  
 background: rgba(255,255,255,0.04);  
 border: 1px solid rgba(255,255,255,0.07);  
 border-radius: 8px; padding: 8px 10px;  
 color: #c9d1d9; font-size: 12px; font-weight: 500;  
 cursor: pointer; transition: all 0.2s;  
 display: flex; align-items: center; gap: 7px;  
 font-family: 'Inter', sans-serif; text-align: left;  
}  
.nc-topics-grid button:hover {  
 background: rgba(255,195,0,0.07);  
 border-color: rgba(255,195,0,0.2); color: #FFC300;  
}  
.nc-topics-grid button i { color: #FFC300; font-size: 13px; flex-shrink: 0; }

/* ── INPUT AREA ── */  
.nc-input-area {  
 padding: 10px 12px 12px;  
 border-top: 1px solid rgba(255,255,255,0.06);  
 background: #0d1117;  
 flex-shrink: 0;  
}  
.nc-input-wrap {  
 display: flex; align-items: center; gap: 8px;  
 background: rgba(255,255,255,0.05);  
 border: 1px solid rgba(255,255,255,0.1);  
 border-radius: 12px; padding: 8px 10px;  
 transition: border-color 0.2s;  
}  
.nc-input-wrap:focus-within {  
 border-color: rgba(255,195,0,0.4);  
 background: rgba(255,195,0,0.04);  
}  
#ncInput {  
 flex: 1; background: none; border: none; outline: none;  
 color: #fff; font-size: 13px; font-family: 'Inter', sans-serif;  
 min-width: 0;  
}  
#ncInput::placeholder { color: #8b949e; }  
.nc-send-btn {  
 width: 34px; height: 34px; border-radius: 10px;  
 background: linear-gradient(135deg, #FFC300, #FFE04B);  
 border: none; color: #000; font-size: 13px;  
 cursor: pointer; flex-shrink: 0; transition: all 0.2s;  
 display: flex; align-items: center; justify-content: center;  
}  
.nc-send-btn:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(255,195,0,0.4); }  
.nc-powered {  
 text-align: center; margin-top: 6px;  
 font-size: 10px; color: rgba(255,255,255,0.2);  
 display: flex; align-items: center; justify-content: center; gap: 5px;  
}  
.nc-powered i { color: rgba(255,195,0,0.3); }  
.nc-powered a { color: rgba(255,195,0,0.4); text-decoration: none; }  
.nc-powered a:hover { color: #FFC300; }

/* ── RESPONSIVE ── */  
@media(max-width: 440px) {  
 #nortonChatWidget { right: 16px; bottom: 16px; }  
 .nc-panel { width: calc(100vw - 32px); bottom: 70px; right: 0; max-height: 70vh; }  
 .nc-topics-grid { grid-template-columns: 1fr; }  
}