/* ═══════════════════════════════════════════════════════════════════════════
   NextSource Live Chat  ·  v5.0  ·  2026 Edition
   Brand: #6EC3BF (teal) · #FFE143 (yellow)
   All critical rules use !important to beat ANY website override.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Hard reset — every element inside the widget starts clean */
#nschat-root,
#nschat-root * {
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    text-align: left !important;
    list-style: none !important;
}
#nschat-root a { text-decoration: none !important; color: inherit !important; }
#nschat-root img { max-width: 100% !important; height: auto !important; }

/* ── Design tokens ───────────────────────────────────────────────────────── */
#nschat-root {
    --t:    #6EC3BF;
    --td:   #4aa8a4;
    --tdd:  #2e8a86;
    --y:    #FFE143;
    --yd:   #c9a000;
    --yb:   #fff3b0;
    --dk:   #0d1c1c;
    --tx:   #1a2e2e;
    --mu:   #527272;
    --bdr:  #d8ecea;
    --bg:   #f4fafa;
    --wh:   #ffffff;
    --sh:   0 24px 64px rgba(14,31,31,.18), 0 4px 16px rgba(0,0,0,.08);
    --r:    22px;
    --ri:   14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   TOGGLE BUTTON
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-btn {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 2147483646 !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 0 20px 0 6px !important;
    height: 52px !important;
    border-radius: 50px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--dk) !important;
    background: var(--y) !important;
    box-shadow: 0 6px 24px rgba(255,225,67,.55), 0 2px 8px rgba(0,0,0,.1) !important;
    transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease !important;
    white-space: nowrap !important;
    letter-spacing: -.01em !important;
}
.nschat-btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 10px 32px rgba(255,225,67,.7), 0 3px 8px rgba(0,0,0,.12) !important;
}
.nschat-btn:active { transform: scale(.97) !important; }

.nschat-btn-icon {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: var(--dk) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    transition: transform .2s !important;
    line-height: 1 !important;
}
.nschat-btn:hover .nschat-btn-icon { transform: rotate(-8deg) !important; }

.nschat-btn .nschat-dot {
    width: 8px !important; height: 8px !important;
    background: var(--t) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 0 3px rgba(110,195,191,.25) !important;
    animation: ns-pulse 2.2s infinite !important;
}
.nschat-btn .nschat-dot.offline { background: #94a3b8 !important; box-shadow: none !important; animation: none !important; }

@keyframes ns-pulse {
    0%,100% { transform: scale(1);   box-shadow: 0 0 0 0   rgba(110,195,191,.4); }
    50%      { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(110,195,191,0);  }
}
.nschat-btn-pulse { animation: ns-btn-bounce .6s ease 3 !important; }
@keyframes ns-btn-bounce {
    0%,100% { transform: translateY(0); }
    40%      { transform: translateY(-6px); }
}

/* ══════════════════════════════════════════════════════════════════════════
   WINDOW
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-window {
    position: fixed !important;
    bottom: 90px !important;
    right: 24px !important;
    width: 375px !important;
    max-height: min(660px, calc(100vh - 110px)) !important;
    background: var(--wh) !important;
    border-radius: var(--r) !important;
    box-shadow: var(--sh) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 2147483645 !important;
    overflow: hidden !important;
    transition: opacity .28s ease, transform .28s cubic-bezier(.34,1.56,.64,1) !important;
    transform-origin: bottom right !important;
    border: 1px solid rgba(110,195,191,.2) !important;
}
.nschat-window.hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(.9) translateY(16px) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-header {
    background: linear-gradient(135deg, #1d6f6b 0%, var(--t) 100%) !important;
    color: var(--wh) !important;
    padding: 14px 16px 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 64px !important;
}
.nschat-header::before {
    content: '' !important;
    position: absolute !important;
    bottom: -22px !important; right: -22px !important;
    width: 80px !important; height: 80px !important;
    background: var(--y) !important;
    border-radius: 50% !important;
    opacity: .18 !important;
    pointer-events: none !important;
}
.nschat-header::after {
    content: '' !important;
    position: absolute !important;
    top: -28px !important; left: 38% !important;
    width: 60px !important; height: 60px !important;
    background: rgba(255,255,255,.08) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

.nschat-header-left { display: flex !important; align-items: center !important; gap: 10px !important; z-index: 1 !important; position: relative !important; }

.nschat-header-title {
    font-weight: 700 !important;
    font-size: 14.5px !important;
    letter-spacing: -.01em !important;
    color: var(--wh) !important;
    display: block !important;
}
.nschat-header-sub {
    font-size: 11.5px !important;
    color: rgba(255,255,255,.78) !important;
    margin-top: 1px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.nschat-header-sub::before {
    content: '' !important;
    width: 6px !important; height: 6px !important;
    background: var(--y) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    animation: ns-pulse 2.2s infinite !important;
}

.nschat-close {
    z-index: 1 !important;
    position: relative !important;
    background: rgba(255,255,255,.15) !important;
    color: var(--wh) !important;
    width: 30px !important; height: 30px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .15s, transform .15s !important;
    flex-shrink: 0 !important;
}
.nschat-close:hover { background: rgba(255,255,255,.28) !important; transform: rotate(90deg) !important; }

.nschat-agent-avatar {
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.22) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--wh) !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255,255,255,.4) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   BODY
   ══════════════════════════════════════════════════════════════════════════ */
#nschat-body {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--bdr) transparent !important;
    background: var(--wh) !important;
    display: flex !important;
    flex-direction: column !important;
}
#nschat-body::-webkit-scrollbar { width: 4px !important; }
#nschat-body::-webkit-scrollbar-thumb { background: var(--bdr) !important; border-radius: 4px !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PRECHAT HERO
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-prechat-hero {
    background: linear-gradient(135deg, #1d6f6b 0%, var(--t) 100%) !important;
    padding: 26px 22px 30px !important;
    color: var(--wh) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}
.nschat-prechat-hero::before {
    content: '' !important;
    position: absolute !important;
    bottom: -36px !important; right: -24px !important;
    width: 120px !important; height: 120px !important;
    background: var(--y) !important;
    border-radius: 50% !important;
    opacity: .14 !important;
    pointer-events: none !important;
}
.nschat-prechat-hero::after {
    content: '' !important;
    position: absolute !important;
    top: -24px !important; left: -16px !important;
    width: 80px !important; height: 80px !important;
    background: rgba(255,255,255,.07) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* NS icon in hero */
.ns-hero-icon {
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,.18) !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    margin-bottom: 14px !important;
    position: relative !important;
    z-index: 1 !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.ns-hero-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.03em !important;
    line-height: 1.22 !important;
    color: var(--wh) !important;
    margin-bottom: 7px !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
}
.ns-hero-title::after {
    content: '' !important;
    display: block !important;
    width: 28px !important;
    height: 3px !important;
    background: var(--y) !important;
    border-radius: 3px !important;
    margin-top: 9px !important;
}

.ns-hero-sub {
    font-size: 12.5px !important;
    color: rgba(255,255,255,.80) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    position: relative !important;
    z-index: 1 !important;
    display: block !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRECHAT FORM
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-prechat {
    padding: 20px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 13px !important;
    background: var(--wh) !important;
    flex: 1 !important;
}

.nschat-prechat label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--mu) !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    margin-bottom: 5px !important;
    display: block !important;
}

.nschat-prechat input:not([type="file"]) {
    display: block !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border: 1.5px solid var(--bdr) !important;
    border-radius: var(--ri) !important;
    font-size: 14px !important;
    transition: border-color .15s, box-shadow .15s !important;
    color: var(--tx) !important;
    background: var(--bg) !important;
    font-weight: 500 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.nschat-prechat input:focus {
    border-color: var(--t) !important;
    box-shadow: 0 0 0 3px rgba(110,195,191,.18) !important;
    background: var(--wh) !important;
}
.nschat-prechat input::placeholder { color: #a8c4c4 !important; font-weight: 400 !important; }

.nschat-start-btn {
    display: block !important;
    width: 100% !important;
    padding: 13px 20px !important;
    background: var(--y) !important;
    color: var(--dk) !important;
    border-radius: var(--ri) !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: transform .15s, box-shadow .15s, background .15s !important;
    box-shadow: 0 4px 16px rgba(255,225,67,.4) !important;
    letter-spacing: -.01em !important;
    margin-top: 2px !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.nschat-start-btn:hover  { background: #ffd200 !important; transform: translateY(-2px) !important; box-shadow: 0 7px 22px rgba(255,210,0,.5) !important; }
.nschat-start-btn:active { transform: scale(.98) !important; }
.nschat-start-btn:disabled { opacity: .55 !important; cursor: not-allowed !important; transform: none !important; }

.nschat-err { color: #dc2626 !important; font-size: 12px !important; margin-top: -4px !important; font-weight: 500 !important; display: block !important; }

/* History link */
.nschat-history-link { text-align: center !important; }
.nschat-history-link button {
    background: none !important;
    color: var(--tdd) !important;
    font-size: 12.5px !important;
    cursor: pointer !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    transition: background .15s, color .15s !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    letter-spacing: -.01em !important;
}
.nschat-history-link button:hover { background: rgba(110,195,191,.1) !important; color: var(--td) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   MESSAGES
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 14px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    background: var(--bg) !important;
    min-height: 0 !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--bdr) transparent !important;
}
.nschat-messages::-webkit-scrollbar { width: 3px !important; }
.nschat-messages::-webkit-scrollbar-thumb { background: var(--bdr) !important; border-radius: 3px !important; }

.nschat-msg-visitor, .nschat-msg-agent, .nschat-msg-system { display: flex !important; }
.nschat-msg-visitor { justify-content: flex-end !important; }
.nschat-msg-agent   { justify-content: flex-start !important; }
.nschat-msg-system  { justify-content: center !important; }

.nschat-bubble {
    max-width: 76% !important;
    padding: 9px 13px !important;
    border-radius: 16px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    word-break: break-word !important;
    display: inline-block !important;
}
.nschat-msg-visitor .nschat-bubble {
    background: var(--t) !important;
    color: var(--wh) !important;
    border-bottom-right-radius: 4px !important;
    box-shadow: 0 2px 10px rgba(110,195,191,.35) !important;
}
.nschat-msg-agent .nschat-bubble {
    background: var(--wh) !important;
    color: var(--tx) !important;
    border: 1px solid var(--bdr) !important;
    border-bottom-left-radius: 4px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
}
.nschat-msg-system .nschat-bubble {
    background: transparent !important;
    color: var(--mu) !important;
    font-size: 11px !important;
    font-style: italic !important;
    padding: 4px 10px !important;
}
.nschat-msg-time {
    font-size: 10px !important;
    opacity: .5 !important;
    margin-top: 3px !important;
    display: block !important;
}
.nschat-msg-agent + .nschat-msg-visitor,
.nschat-msg-visitor + .nschat-msg-agent { margin-top: 6px !important; }

.nschat-msg-agent-wrap { display: flex !important; align-items: flex-end !important; gap: 7px !important; }
.nschat-msg-avatar {
    width: 26px !important; height: 26px !important;
    border-radius: 50% !important;
    background: var(--t) !important;
    color: var(--wh) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 5px rgba(110,195,191,.35) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   INPUT BAR
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-input-bar {
    padding: 10px 12px 12px !important;
    border-top: 1px solid var(--bdr) !important;
    display: flex !important;
    gap: 7px !important;
    align-items: center !important;
    background: var(--wh) !important;
    flex-shrink: 0 !important;
}
.nschat-input-bar input[type="text"],
.nschat-input-bar input:not([type]) {
    flex: 1 !important;
    padding: 9px 15px !important;
    border: 1.5px solid var(--bdr) !important;
    border-radius: 24px !important;
    font-size: 13.5px !important;
    transition: border-color .15s, box-shadow .15s !important;
    background: var(--bg) !important;
    color: var(--tx) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    display: block !important;
    width: auto !important;
}
/* File input must stay hidden — do NOT target [type=file] with display overrides */
.nschat-input-bar input[type="file"] { display: none !important; }
.nschat-input-bar input:focus {
    border-color: var(--t) !important;
    box-shadow: 0 0 0 3px rgba(110,195,191,.15) !important;
    background: var(--wh) !important;
}
.nschat-input-bar input::placeholder { color: #a8c4c4 !important; }

.nschat-send-btn {
    background: var(--t) !important;
    color: var(--wh) !important;
    width: 38px !important; height: 38px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(110,195,191,.4) !important;
    transition: background .15s, transform .12s !important;
    line-height: 1 !important;
}
.nschat-send-btn:hover  { background: var(--td) !important; transform: scale(1.08) !important; }
.nschat-send-btn:active { transform: scale(.93) !important; }

.nschat-attach-btn {
    background: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    font-size: 18px !important;
    padding: 4px !important;
    flex-shrink: 0 !important;
    transition: color .15s !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
}
.nschat-attach-btn:hover { color: var(--t) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   WAITING
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-waiting {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 36px 24px !important;
    background: var(--bg) !important;
    text-align: center !important;
    color: var(--mu) !important;
    font-size: 13.5px !important;
}
.nschat-spinner {
    width: 38px !important; height: 38px !important;
    border: 3px solid var(--bdr) !important;
    border-top-color: var(--t) !important;
    border-radius: 50% !important;
    animation: ns-spin .7s linear infinite !important;
}
@keyframes ns-spin { to { transform: rotate(360deg); } }

/* ══════════════════════════════════════════════════════════════════════════
   SATISFACTION / CLOSED NOTE
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-closed-note {
    background: var(--wh) !important;
    border-top: 1px solid var(--bdr) !important;
    padding: 22px 22px 24px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}
.nschat-closed-note-label {
    font-size: 13px !important;
    color: var(--mu) !important;
    margin-bottom: 14px !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Stars */
#nschat-stars {
    display: flex !important;
    gap: 4px !important;
    justify-content: center !important;
    margin: 0 !important;
}
#nschat-stars span {
    cursor: pointer !important;
    font-size: 30px !important;
    transition: transform .12s, color .12s !important;
    display: inline-block !important;
    color: #d4d4d4 !important;
    line-height: 1 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}
#nschat-stars span.star-active { color: var(--yd) !important; }
#nschat-stars span:hover       { transform: scale(1.25) !important; }

.nschat-stars-thanks {
    font-size: 12px !important;
    color: #166534 !important;
    margin-top: 10px !important;
    display: block !important;
    font-weight: 500 !important;
    animation: ns-fadein .25s ease !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   TYPING
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-typing-bar {
    padding: 7px 14px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 12px !important;
    color: var(--mu) !important;
    background: var(--bg) !important;
    border-top: 1px solid var(--bdr) !important;
    flex-shrink: 0 !important;
}
.nschat-typing-dots { display:flex !important; gap:3px !important; align-items:center !important; }
.nschat-typing-dots span {
    width: 5px !important; height: 5px !important;
    background: var(--t) !important;
    border-radius: 50% !important;
    opacity: .6 !important;
    animation: ns-typebounce 1.1s infinite !important;
}
.nschat-typing-dots span:nth-child(2) { animation-delay:.22s !important; }
.nschat-typing-dots span:nth-child(3) { animation-delay:.44s !important; }
@keyframes ns-typebounce {
    0%,80%,100% { transform:translateY(0);    opacity:.6; }
    40%          { transform:translateY(-5px); opacity:1; }
}

/* ══════════════════════════════════════════════════════════════════════════
   QUICK REPLIES
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-quick-replies { display:flex !important; flex-wrap:wrap !important; gap:6px !important; margin-top:8px !important; }
.nschat-qr-btn {
    background: var(--wh) !important;
    color: var(--tdd) !important;
    border: 1.5px solid rgba(110,195,191,.45) !important;
    border-radius: 20px !important;
    padding: 6px 13px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background .15s, border-color .15s, transform .1s !important;
    box-shadow: 0 1px 4px rgba(110,195,191,.12) !important;
}
.nschat-qr-btn:hover { background: rgba(110,195,191,.12) !important; border-color: var(--t) !important; transform: translateY(-1px) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   APPOINTMENT
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-appt-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 8px !important;
    background: var(--y) !important;
    color: var(--dk) !important;
    border-radius: 10px !important;
    padding: 7px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    transition: background .15s, transform .1s !important;
    box-shadow: 0 2px 8px rgba(255,225,67,.35) !important;
    cursor: pointer !important;
}
.nschat-appt-btn:hover { background: #ffd200 !important; transform: translateY(-1px) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   ALERT BANNER
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-alert-banner {
    background: var(--t) !important;
    color: var(--wh) !important;
    text-align: center !important;
    padding: 8px 14px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    animation: ns-fadein .25s ease !important;
    margin: 0 0 4px !important;
    box-shadow: 0 2px 8px rgba(110,195,191,.3) !important;
}
@keyframes ns-fadein {
    from { opacity:0; transform:translateY(4px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   ATTACHMENTS
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-attachment-img {
    max-width: 200px !important; max-height: 160px !important;
    border-radius: 10px !important;
    display: block !important;
    cursor: pointer !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.1) !important;
}
.nschat-attachment-link {
    color: var(--tdd) !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 10px !important;
    background: rgba(110,195,191,.1) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(110,195,191,.25) !important;
    transition: background .15s !important;
}
.nschat-attachment-link:hover { background: rgba(110,195,191,.2) !important; }

/* ══════════════════════════════════════════════════════════════════════════
   OFFLINE FORM
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-offline {
    padding: 20px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    overflow-y: auto !important;
    background: var(--wh) !important;
    flex: 1 !important;
}
.nschat-offline input:not([type="file"]),
.nschat-offline textarea {
    display: block !important;
    width: 100% !important;
    padding: 11px 14px !important;
    border: 1.5px solid var(--bdr) !important;
    border-radius: var(--ri) !important;
    font-size: 14px !important;
    background: var(--bg) !important;
    color: var(--tx) !important;
    transition: border-color .15s, box-shadow .15s !important;
    font-family: inherit !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.nschat-offline textarea { resize: vertical !important; min-height: 75px !important; }
.nschat-offline input:focus,
.nschat-offline textarea:focus {
    border-color: var(--t) !important;
    box-shadow: 0 0 0 3px rgba(110,195,191,.2) !important;
    background: var(--wh) !important;
}
.nschat-offline input::placeholder,
.nschat-offline textarea::placeholder { color: #a8c4c4 !important; }

.nschat-win-footer {
    position: absolute !important; bottom:0 !important; left:0 !important; right:0 !important;
    padding: 10px 20px 20px !important;
    border-top: 1px solid var(--bdr) !important;
    background: var(--wh) !important;
    border-radius: 0 0 var(--r) var(--r) !important;
    z-index: 1 !important;
}
.nschat-offline-footer { display:none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   HISTORY LIST
   ══════════════════════════════════════════════════════════════════════════ */
.nschat-history {
    padding: 14px 16px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    background: var(--bg) !important;
    flex: 1 !important;
}
.nschat-history-title {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: var(--mu) !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    padding: 0 2px !important;
    margin-bottom: 2px !important;
    display: block !important;
}
.nschat-history-item {
    background: var(--wh) !important;
    border: 1px solid var(--bdr) !important;
    border-radius: 14px !important;
    padding: 12px 15px !important;
    cursor: pointer !important;
    transition: border-color .15s, box-shadow .15s, transform .12s !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}
.nschat-history-item:hover {
    border-color: var(--t) !important;
    box-shadow: 0 4px 14px rgba(110,195,191,.22) !important;
    transform: translateY(-1px) !important;
}
.nschat-history-item-top { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.nschat-history-item-date  { font-size: 11px !important;  color: var(--mu) !important; }
.nschat-history-item-agent { font-size: 12px !important;  color: var(--tx) !important; }
.nschat-history-item-msgs  { font-size: 11.5px !important; color: var(--mu) !important; }

.nschat-history-status {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
}
.nschat-history-status.closed { background: rgba(110,195,191,.15) !important; color: var(--tdd) !important; }
.nschat-history-status.missed { background: #fff4ec !important; color: #c2410c !important; }

.nschat-hist-back {
    background: none !important;
    color: var(--tdd) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 11px 16px 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: opacity .15s !important;
    flex-shrink: 0 !important;
    border-bottom: 1px solid var(--bdr) !important;
    background: var(--wh) !important;
    width: 100% !important;
}
.nschat-hist-back:hover { opacity: .7 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   PROACTIVE POPUP
   ══════════════════════════════════════════════════════════════════════════ */
@keyframes nschat-popup-in {
    from { opacity:0; transform:translateY(14px) scale(.95); }
    to   { opacity:1; transform:translateY(0)    scale(1); }
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .nschat-window {
        width: calc(100vw - 16px) !important;
        right: 8px !important;
        bottom: 84px !important;
        border-radius: 16px !important;
    }
    .nschat-btn { right: 12px !important; bottom: 14px !important; }
}