/* =============================================================================
   NP Chat Widget — v4.4.12
   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;
}

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

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

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


/* -----------------------------------------------------------------------------
   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-send {
    background: var(--np-brand);
    border: none;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}
#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) {
    #np-win {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 18px 18px 0 0;          /* flat bottom, rounded top */
        max-height: 85vh;                       /* leave room to see the page behind */
        box-sizing: border-box;
        transform-origin: bottom center !important;
    }
}