/* NicheChat — Widget */
#nichechat-widget-root * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

#nichechat-widget-root {
    position: fixed;
    z-index: 999999;
    bottom: 24px;
}
#nichechat-widget-root.pos-bottom-right { right: 24px; }
#nichechat-widget-root.pos-bottom-left  { left:  24px; }

/* Launcher bubble.
   Closed state is deliberately transparent: the launcher icon is the
   three-circle NicheChat brand mark (see iconChat() below), which carries
   its own fixed colors — a solid circle behind it just clashed. Open state
   keeps a solid, colored circle: the close (X) icon is drawn with
   fill="currentColor" (white — see iconClose()) and needs a real backdrop
   or it disappears against a light page background. */
#nichechat-launcher {
    width: 64px; height: 64px; border-radius: 50%;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; border: none; outline: none;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
    /* Drives iconClose()'s fill="currentColor". Follows the configured
       text-on-primary choice, since the open launcher's backdrop IS primary. */
    color: var(--nichechat-on-primary, #fff);
    animation: nichechat-launcher-pulse 2.8s ease-in-out infinite;
}
#nichechat-launcher:hover        { transform: scale(1.08); animation-play-state: paused; }
#nichechat-launcher svg          { transition: opacity .2s; }
#nichechat-launcher .icon-close  { display: none; }

/* The glow is DERIVED from the configured primary, not a second colour.
   --nichechat-primary-rgb is set from JS beside --nichechat-primary (see
   hexToRgbTriplet() in nichechat-widget.js). These two rules used to hardcode
   rgba(37,99,235,…) — the default primary in decimal — so a client who chose a
   red primary got a red button with a blue halo. The var() fallback keeps this
   stylesheet valid on its own and reproduces the old blue exactly; it is
   unreachable in practice, since the JS that sets the variable is also what
   creates this element. */
#nichechat-widget-root.open #nichechat-launcher {
    background: var(--nichechat-primary, #2563eb);
    box-shadow: 0 4px 14px rgba(var(--nichechat-primary-rgb, 37, 99, 235), .4);
    animation: none;   /* stop pulsing once it's acting as the close button */
}
#nichechat-widget-root.open #nichechat-launcher:hover {
    box-shadow: 0 6px 20px rgba(var(--nichechat-primary-rgb, 37, 99, 235), .5);
}

#nichechat-widget-root.open #nichechat-launcher .icon-chat  { display: none; }
#nichechat-widget-root.open #nichechat-launcher .icon-close { display: block; }

/* Subtle — a small breathing scale, not a bounce or a spin. Disabled below
   for anyone who has asked their OS for reduced motion. */
@keyframes nichechat-launcher-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
    #nichechat-launcher { animation: none; }
}

/* Chat window */
#nichechat-window {
    position: absolute;
    bottom: 68px;
    width: 360px;
    max-height: 520px;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 48px rgba(0,0,0,.18);
    display: flex; flex-direction: column;
    transform: scale(.85) translateY(16px);
    transform-origin: bottom right;
    opacity: 0; pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
    overflow: hidden;
}
.pos-bottom-right #nichechat-window { right: 0; }
.pos-bottom-left  #nichechat-window { left: 0; transform-origin: bottom left; }

#nichechat-widget-root.open #nichechat-window {
    transform: scale(1) translateY(0);
    opacity: 1; pointer-events: all;
}

/* Header */
#nichechat-header {
    padding: 16px 18px;
    background: var(--nichechat-primary, #2563eb);
    /* Inherited by the title, the status line, and iconBot()'s
       fill="currentColor" in the default avatar. */
    color: var(--nichechat-on-primary, #fff);
    display: flex; align-items: center; gap: 12px;
    flex-shrink: 0;
}
/* A scrim of the FOREGROUND colour, not always white: on a pale primary the
   foreground flips to black, and a white scrim there is invisible. */
#nichechat-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: rgba(var(--nichechat-on-primary-rgb, 255, 255, 255), .2); }

/* ── Theme bleed: why these repeat `color` and use !important ──────────────────
   The header sets `color` on itself, but INHERITANCE LOSES TO ANY DECLARATION
   THAT MATCHES THE ELEMENT — regardless of specificity. A WordPress theme's
   plain `h3 { color: #1a3d6d }` (specificity 0,0,1) therefore beat the header's
   inherited value, because an inherited value only applies when nothing else
   matches. That is what was observed on a live client site: the chat title was
   taking the theme's heading colour, NOT anything the widget set. The widget
   never declared a colour on the title at all.

   So the colour is declared on the elements themselves, and `!important` is
   used deliberately.

   THIS IS A STOPGAP, and it is worth being blunt about its limit: !important
   beats an ordinary theme rule and LOSES to a theme that also uses !important
   — which many themes do, particularly for headings and form controls. It
   raises the bar; it does not settle the question. The real fix is to stop
   sharing a cascade with the page at all (Shadow DOM or an iframe), which is
   scoped and costed separately, not attempted here.

   line-height and text-transform are pinned for the same reason: a theme
   setting either on h3 silently changes the header's height or shouts the
   title in capitals, which reads as "slightly wrong" rather than "broken" and
   so would not get reported. */
#nichechat-header-text h3 {
    margin: 0; font-size: 15px; font-weight: 600;
    color: var(--nichechat-on-primary, #fff) !important;
    line-height: 1.3 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}
#nichechat-header-text p  {
    margin: 0; font-size: 12px; opacity: .85;
    color: var(--nichechat-on-primary, #fff) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}
.nichechat-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; display: inline-block; margin-right: 4px; }

/* Messages */
#nichechat-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    scroll-behavior: smooth;
}
#nichechat-messages::-webkit-scrollbar { width: 4px; }
#nichechat-messages::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

.nichechat-msg { display: flex; gap: 8px; max-width: 85%; }
.nichechat-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.nichechat-msg.bot  { align-self: flex-start; }

.nichechat-bubble {
    padding: 10px 14px; border-radius: 16px;
    font-size: 14px; line-height: 1.5; word-break: break-word;
}
.nichechat-msg.bot  .nichechat-bubble { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; }
.nichechat-msg.user .nichechat-bubble {
    background: var(--nichechat-primary, #2563eb);
    color: var(--nichechat-on-primary, #fff); border-bottom-right-radius: 4px;
}

/* Typing indicator */
.nichechat-typing .nichechat-bubble { padding: 12px 16px; }
.nichechat-dots { display: flex; gap: 4px; }
.nichechat-dots span {
    width: 7px; height: 7px; border-radius: 50%;
    background: #94a3b8; animation: bounce 1.2s infinite;
}
.nichechat-dots span:nth-child(2) { animation-delay: .2s; }
.nichechat-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

/* Input area */
#nichechat-input-area {
    padding: 12px 14px;
    border-top: 1px solid #e2e8f0;
    display: flex; gap: 8px; align-items: flex-end;
    flex-shrink: 0;
}
#nichechat-input {
    flex: 1; border: 1px solid #e2e8f0; border-radius: 12px;
    padding: 10px 14px; font-size: 14px; resize: none;
    max-height: 120px; line-height: 1.4; outline: none;
    transition: border-color .15s;
    font-family: inherit;
}
#nichechat-input:focus { border-color: var(--nichechat-primary, #2563eb); }
#nichechat-send {
    flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px;
    background: var(--nichechat-primary, #2563eb);
    border: none; cursor: pointer; color: var(--nichechat-on-primary, #fff);
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .1s;
}
#nichechat-send:hover:not(:disabled)   { filter: brightness(1.1); }
#nichechat-send:active:not(:disabled)  { transform: scale(.94); }
#nichechat-send:disabled { opacity: .5; cursor: not-allowed; }

/* Footer branding */
#nichechat-footer {
    text-align: center; padding: 6px;
    font-size: 11px; color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    #nichechat-window { width: calc(100vw - 32px); }
    #nichechat-widget-root.pos-bottom-right { right: 16px; bottom: 16px; }
    #nichechat-widget-root.pos-bottom-left  { left:  16px; bottom: 16px; }
}

/* ── Lead capture form ──────────────────────────────────────────────────── */
.nichechat-lead-form {
    padding: 14px 16px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}
.nichechat-lead-intro {
    font-size: 13px;
    color: #334155;
    margin: 0 0 10px;
    font-weight: 500;
}
.nichechat-lead-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}
.nichechat-lead-form input {
    width: 100%;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    outline: none;
    margin-bottom: 8px;
    font-family: inherit;
    background: #fff;
    transition: border-color .15s;
}
.nichechat-lead-form input:focus { border-color: var(--nichechat-primary, #2563eb); }
.nichechat-lead-row input { margin-bottom: 0; }
.nichechat-lead-actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}
.nichechat-lead-btn-primary {
    flex: 1;
    background: var(--nichechat-primary, #2563eb);
    color: var(--nichechat-on-primary, #fff);
    border: none;
    border-radius: 8px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: filter .15s;
}
.nichechat-lead-btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.nichechat-lead-btn-primary:disabled { opacity: .6; cursor: not-allowed; }
.nichechat-lead-btn-skip {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 12px;
    color: #94a3b8;
    cursor: pointer;
}