/* =============================================================================
   NP Chat Widget — v4.5.4
   Static styles only. Dynamic values (brand colour, position, animation
   duration, footer visibility) are injected via wp_add_inline_style()
   in widget/widget.php and override the :root defaults below.
   ============================================================================= */


/* -----------------------------------------------------------------------------
   CSS Custom Properties
   --np-brand   : primary colour — FAB, header, send button, user bubbles, footer
   --np-anim    : open/close animation duration
   Overridden at runtime by wp_add_inline_style with values from admin settings.
   ----------------------------------------------------------------------------- */
:root {
    --np-brand: #111827;
    --np-anim: 0.3s;
}


/* -----------------------------------------------------------------------------
   FAB (Floating Action Button)
   The circular button fixed to the corner of the viewport that opens the chat.
   Position (left/right) is overridden by wp_add_inline_style.
   ----------------------------------------------------------------------------- */
#np-fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: var(--np-brand);
    border: none;
    cursor: pointer;
    z-index: 99999;                              /* above everything on the page */
    box-shadow: 0 4px 20px rgba(0,0,0,.32);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s;
    padding: 0;
}

/* Subtle scale-up on hover */
#np-fab:hover { transform: scale(1.08); }

/* Avatar image inside the FAB */
#np-fab-img {
    width: 47px;
    height: 47px;
    border-radius: 50%;
    object-fit: cover;
}


/* -----------------------------------------------------------------------------
   Chat Window
   The main panel — hidden by default (opacity:0, scale(.88), pointer-events:none).
   Revealed by adding .np-open. .np-no-anim skips the transition when restoring
   a previous session so it doesn't animate in on page load.
   Position, transform-origin, and animation duration overridden by inline style.
   ----------------------------------------------------------------------------- */
#np-win {
    position: fixed;
    bottom: 88px;                               /* sits above the FAB */
    right: 20px;
    width: 370px;
    max-height: calc(100vh - 108px);               /* always 20px gap at top (mirrors right: 20px) */
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    z-index: 99998;                             /* just below the FAB */
    overflow: hidden;
    background: #fff;
    transform-origin: bottom right;             /* scale from the FAB corner */
    /* visibility delays to 0s on open (immediate) and var(--np-anim) on close (after fade) */
    transition: opacity var(--np-anim) ease, transform var(--np-anim) ease, visibility 0s var(--np-anim);
    opacity: 0;
    transform: scale(.88);
    pointer-events: none;                       /* not interactive when closed */
    visibility: hidden;                         /* hard gate — prevents flash on page load */
}

/* Open state — added by JS openChat() */
#np-win.np-open {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
    visibility: visible;
    transition: opacity var(--np-anim) ease, transform var(--np-anim) ease, visibility 0s;
}

/* Skip animation when restoring session — added alongside .np-open */
#np-win.np-no-anim {
    transition: none !important;
    opacity: 1 !important;
    transform: scale(1) !important;
    visibility: visible !important;
}


/* -----------------------------------------------------------------------------
   Header Bar
   Contains: avatar, bot name, online dot, language toggle, clear button.
   Background colour is --np-brand.
   ----------------------------------------------------------------------------- */
#np-head {
    background: var(--np-brand);
    padding: 13px 14px;
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;                             /* never compress vertically */
}

/* Avatar shown in the header (same image as FAB) */
#np-head-logo {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,.25);    /* subtle ring against brand bg */
    flex-shrink: 0;
}

/* Bot name — truncates with ellipsis if too long */
.np-hn {
    color: #f9fafb;
    font-weight: 700;
    font-size: 15px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "Online" status indicator dot */
.np-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;                        /* green */
    flex-shrink: 0;
}

/* Isolation: neutralise any theme button styles (e.g. global button[type="button"] rules
   from Divi / LiteSpeed-combined CSS) that leak into the chat window.
   !important is required because Divi injects its form button styles with !important
   via the customiser stylesheet, which loads after the plugin CSS and cannot be
   out-specificed without !important. The specific per-button ID rules below
   override this reset for the properties they need. */
#np-win button {
    padding: 0 !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    font-size: inherit !important;
    font-weight: normal !important;
    line-height: normal !important;
    border-radius: 0 !important;
    transition: none !important;
    color: inherit !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Language toggle button (shows the next language code, e.g. "FI" or "EN") */
#np-win #np-lang-btn {
    background: rgba(255,255,255,.15) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    color: #f9fafb !important;
    font-size: 12px !important;
    border-radius: 6px !important;
    padding: 3px 8px !important;
    cursor: pointer;
    flex-shrink: 0;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
#np-win #np-lang-btn:hover { background: rgba(255,255,255,.25) !important; }

/* Clear/reset conversation button (↺ symbol) */
#np-win #np-clear-btn {
    background: none !important;
    border: none !important;
    color: #f9fafb !important;
    font-size: 18px !important;
    cursor: pointer;
    opacity: .65;
    padding: 2px 4px !important;
    line-height: 1 !important;
    flex-shrink: 0;
}
#np-win #np-clear-btn:hover { opacity: 1; color: #9ca3af !important; }

/* Minimise / close button (×) — identical style to clear button */
#np-win #np-close-btn {
    background: none !important;
    border: none !important;
    color: #f9fafb !important;
    font-size: 18px !important;
    cursor: pointer;
    opacity: .65;
    padding: 2px 4px !important;
    line-height: 1 !important;
    flex-shrink: 0;
}
#np-win #np-close-btn:hover { opacity: 1; color: #9ca3af !important; }


/* -----------------------------------------------------------------------------
   Message List
   Scrollable area that holds all chat bubbles. Light grey background to
   visually separate it from the white input row.
   ----------------------------------------------------------------------------- */
#np-msgs {
    flex: 1;                                    /* fills all available space */
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f9fafb;
}


/* -----------------------------------------------------------------------------
   Message Rows
   Each message is a flex row: [avatar] [bubble] for bot,
   [bubble] reversed for user (no avatar on the right).
   ----------------------------------------------------------------------------- */
.np-msg {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 100%;
}

/* User messages — reversed so bubble sits on the right */
.np-msg.np-user { flex-direction: row-reverse; }


/* -----------------------------------------------------------------------------
   Chat Bubbles
   Shared base styles. Bot and user variants override background, text colour,
   and the one flat border-radius corner to indicate message direction.
   ----------------------------------------------------------------------------- */
.np-bubble {
    padding: 10px 13px;
    font-size: 14px;
    line-height: 1.52;
    max-width: 80%;
    word-break: break-word;
}

/* Paragraph spacing inside bubbles — processHtml() wraps content in <p> tags */
.np-bubble p { margin: 0 0 6px; }
.np-bubble p:last-child { margin-bottom: 0; }

/* Bot bubble — white with border, flat bottom-left corner points toward avatar */
.np-bot-bub {
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #111827;
    border-radius: 16px 16px 16px 4px;
}

/* User bubble — brand colour, flat bottom-right corner */
.np-usr-bub {
    background: var(--np-brand);
    color: #f9fafb;
    border-radius: 16px 16px 4px 16px;
}

/* Links inherit the bubble's text colour so they're readable on both backgrounds */
.np-bot-bub a, .np-usr-bub a { color: inherit; text-decoration: underline; }

/* Bot avatar thumbnail shown to the left of each bot bubble */
.np-av {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   Typing Indicator
   Three bouncing dots shown while waiting for an API response.
   Rendered inside a bot bubble by showTyping() and removed by hideTyping().
   ----------------------------------------------------------------------------- */
.np-typing-dots {
    display: flex;
    gap: 5px;
    padding: 12px 14px;
    align-items: center;
}

.np-typing-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #9ca3af;
    animation: npDot 1.2s infinite;
}

/* Stagger delays so dots animate in sequence */
.np-typing-dots span:nth-child(2) { animation-delay: .2s; }
.np-typing-dots span:nth-child(3) { animation-delay: .4s; }

@keyframes npDot {
    0%,80%,100% { transform: scale(.7) }
    40%         { transform: scale(1)  }
}


/* -----------------------------------------------------------------------------
   Input Row
   Fixed strip at the bottom of the window containing the textarea and
   send button. Never compresses regardless of message list length.
   ----------------------------------------------------------------------------- */
#np-inp-row {
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
}

/* Auto-growing textarea — height is managed by the JS input handler (max 120px) */
#np-inp {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 14px;
    resize: none;
    max-height: 120px;
    outline: none;
    font-family: inherit;
    line-height: 1.45;
    overflow-y: auto;
}
#np-inp:focus { border-color: var(--np-brand); }

/* Send button — square, brand colour, houses the SVG paper-plane icon */
#np-win #np-send {
    background: var(--np-brand) !important;
    border: none !important;
    border-radius: 8px !important;
    width: 38px !important;
    height: 38px !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0;
    padding: 0 !important;
}
#np-win #np-send:hover { filter: brightness(.85); }


/* -----------------------------------------------------------------------------
   Footer Bar
   "Chatbot by Nörtti paikalle" branding strip below the input row.
   Visibility is controlled via wp_add_inline_style: hidden installs
   display:none here when the admin toggle is off.
   ----------------------------------------------------------------------------- */
#np-ftr {
    background: var(--np-brand);
    padding: 5px 12px;
    text-align: center;
    flex-shrink: 0;
}
#np-ftr a { color: rgba(249,250,251,.65); font-size: 11px; text-decoration: none; }
#np-ftr a:hover { color: #f9fafb; }


/* -----------------------------------------------------------------------------
   Mobile Overrides (≤ 600px)
   On small screens the window goes full-width and docks to the bottom edge.
   Top corners remain rounded; bottom corners are removed.

   Note: npFixMobile() in np-chat.js also applies hard pixel values via inline
   styles to bypass themes that set overflow:hidden on <body>/<html>, which
   breaks position:fixed on iOS Safari. These CSS rules act as a fallback and
   handle browsers where the JS fix isn't needed.
   ----------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* FAB: 15% larger — 58px → 67px */
    #np-fab {
        width: 67px;
        height: 67px;
    }
    #np-fab-img {
        width: 54px;
        height: 54px;
    }

    #np-win {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        /* FAB bottom:20px + FAB height:67px + gap:10px = 97px */
        bottom: 97px !important;
        width: auto !important;
        max-width: none !important;
        border-radius: 18px !important;
        max-height: calc(100vh - 117px);        /* 97px bottom + 20px top clearance */
        box-sizing: border-box;
        transform-origin: bottom center !important;
    }

    /* iOS Safari auto-zoom fix (font-size ≥ 16px) is applied via wp_add_inline_style
       in widget.php so it lands in a <style> tag and bypasses LiteSpeed CSS combining. */

    /* Page blur overlay — shown behind the chat window when open on mobile.
       Pure CSS: triggered by #np-win.np-open via the ~ sibling selector.
       Blur amount is set by --np-blur (0px = none, injected by wp_add_inline_style).
       When --np-blur is 0px the overlay has no visual effect so it stays hidden.
       Tapping the overlay calls closeChat() via a JS click listener. */
    #np-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99997;                          /* below #np-win (99998) and #np-fab (99999) */
        backdrop-filter: blur(4px);           /* overridden by wp_add_inline_style with the admin setting */
        -webkit-backdrop-filter: blur(4px);
        background: rgba(0,0,0,.25);
    }
    #np-win.np-open ~ #np-overlay {
        display: block;
    }
}