/**
 * ConversaAI Pro — fullscreen chat styles.
 *
 * Layout: fixed header on top, scrollable messages, sticky input bar.
 * Uses dvh/svh to survive mobile keyboard appearance.
 */

/* Override theme defaults for fullscreen chat page. */
body.conversaai-fullscreen-active {
    margin: 0;
    padding: 0;
    overflow: hidden;
    /* `dvh` shrinks when the on-screen keyboard appears; survive iOS Safari. */
    height: 100dvh;
    height: 100svh;
    background: #fff;
}

/* Hide third-party floating chat widgets (WhatsApp, Messenger, Crisp, Tawk, etc.)
   that other plugins/themes inject via wp_footer. wp_footer() must run for OUR
   chat to render, but other plugins ride the same hook — hide the common ones. */
body.conversaai-fullscreen-active [class*="whatsapp" i],
body.conversaai-fullscreen-active [id*="whatsapp" i],
body.conversaai-fullscreen-active [class*="wpcf-" i],
body.conversaai-fullscreen-active [id*="wpcf-" i],
body.conversaai-fullscreen-active .joinchat,
body.conversaai-fullscreen-active .joinchat__button,
body.conversaai-fullscreen-active .wa-chat-box,
body.conversaai-fullscreen-active .wa_chat_btn,
body.conversaai-fullscreen-active .bbn_wcm_w_w_btn,
body.conversaai-fullscreen-active .ti-widget,
body.conversaai-fullscreen-active .crisp-client,
body.conversaai-fullscreen-active #crisp-chatbox,
body.conversaai-fullscreen-active #tawkchat-container,
body.conversaai-fullscreen-active .tawk-min-container,
body.conversaai-fullscreen-active .intercom-launcher,
body.conversaai-fullscreen-active .intercom-lightweight-app,
body.conversaai-fullscreen-active [class*="messenger" i][class*="chat" i],
body.conversaai-fullscreen-active .fb-customerchat,
body.conversaai-fullscreen-active .fb_dialog,
body.conversaai-fullscreen-active .fb_customer_chat_bounce_in_v2 {
    display: none !important;
    visibility: hidden !important;
}

.conversaai-root {
    --c-header-h: 56px;
    --c-input-h: 64px;

    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    height: 100svh;
    /* Updated dynamically by JS using window.visualViewport for accurate keyboard handling. */
    background: #fff;
    color: var(--c-text, #333);
    font-family: var(--c-font, inherit);
}

.conversaai-root *,
.conversaai-root *::before,
.conversaai-root *::after {
    box-sizing: border-box;
}

/* ─── Header (always visible, never hidden by keyboard) ─── */
.conversaai-header {
    flex: 0 0 var(--c-header-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background: var(--c-primary, #4c66ef);
    color: var(--c-title, #fff);
    border-bottom: 1px solid rgba(0,0,0,0.08);
    z-index: 2;
    position: relative;
}

.conversaai-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--c-title, #fff);
    text-align: center;
    flex: 1 1 auto;
    /* Keep the title visually centered even with the restart button on the right. */
}

.conversaai-restart {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.20);
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    color: var(--c-title, #fff);
    cursor: pointer;
    transition: background .15s, transform .15s, border-color .15s;
    padding: 0;
    z-index: 3;
}

.conversaai-restart:hover {
    background: rgba(255,255,255,0.32);
    border-color: rgba(255,255,255,0.55);
}

.conversaai-restart:active {
    transform: translateY(-50%) scale(0.92);
}

.conversaai-restart[hidden] {
    display: none !important;
}

/* ─── Language picker ─── */
.conversaai-lang-picker {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    gap: 24px;
}

.conversaai-lang-prompt {
    margin: 0;
    font-size: 18px;
    color: #555;
    text-align: center;
}

.conversaai-lang-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    width: 100%;
    max-width: 480px;
}

.conversaai-lang-btn {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 22px 16px;
    background: #fff;
    border: 2px solid #e2e6f5;
    border-radius: 14px;
    color: var(--c-text, #333);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, transform .1s, box-shadow .15s;
}

.conversaai-lang-btn:hover {
    border-color: var(--c-primary, #4c66ef);
    box-shadow: 0 4px 14px rgba(76,102,239,0.15);
}

.conversaai-lang-btn:active {
    transform: scale(0.98);
}

.conversaai-flag {
    font-size: 36px;
    line-height: 1;
}

/* Shown only when the configured language list is empty — a graceful nudge
   to the admin rather than a silently broken picker. */
.conversaai-lang-empty-notice {
    max-width: 360px;
    margin: 0 auto;
    padding: 16px 20px;
    background: #fff;
    border: 1px dashed #d0d5e0;
    border-radius: 10px;
    color: #555;
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

/* ─── Chat area ─── */
.conversaai-chat {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0; /* allow children to scroll */
    background: #fafbfd;
}

.conversaai-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversaai-message {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: var(--c-radius, 14px);
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-size: 15px;
    animation: c-fade-in .18s ease-out;
    /* Critical: keep bubbles at their natural content size. Without this, the
       flex column shrinks bubbles to fit the container which clips audio
       players, images and YouTube embeds. The messages container is the only
       thing that should ever scroll. */
    flex-shrink: 0;
}

@keyframes c-fade-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.conversaai-message.user {
    align-self: flex-end;
    background: var(--c-user-bg, #e1ebff);
    color: var(--c-text, #333);
    border-bottom-right-radius: 4px;
}

.conversaai-message.bot {
    align-self: flex-start;
    background: var(--c-bot-bg, #f0f4ff);
    color: var(--c-text, #333);
    border-bottom-left-radius: 4px;
}

/* ─── Bubbles that contain audio — give them the full 80% width so the audio
       player has comfortable room. Without this, the bubble shrinks to fit just
       the audio's intrinsic size and looks cramped. ─────────────────────────── */
.conversaai-message.voice-message,
.conversaai-message.welcome-message {
    width: 80%;
    max-width: 80%;
}

/* Welcome bubble — distinct from regular voice answers, with a subtle tint
   of the theme primary color. Modern browsers get `color-mix`; older ones
   fall back to a fixed light-lavender swatch. */
.conversaai-message.welcome-message {
    background: #eef2ff;
    border-left: 3px solid var(--c-primary, #4c66ef);
    padding-left: 12px;
}
@supports (background: color-mix(in srgb, red 10%, white)) {
    .conversaai-message.welcome-message {
        background: color-mix(in srgb, var(--c-primary, #4c66ef) 10%, #ffffff);
    }
}

/* ─── Voice answer (audio bubble) ───────────────────────────────────────── */
.conversaai-voice {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.conversaai-voice-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c-primary, #4c66ef);
    letter-spacing: 0.2px;
    opacity: 0.85;
}

.conversaai-voice-icon {
    font-size: 14px;
}

.conversaai-message audio {
    /* The visible audio player is the custom .conversaai-player below.
       The underlying <audio> element is left in the DOM for playback
       but hidden visually. */
    display: none;
}

/* ─── Custom voice player (WhatsApp-style) ─────────────────────────────── */
.conversaai-player {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px 0;
}

.conversaai-player-btn {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: var(--c-primary, #4c66ef);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background .15s, transform .08s, box-shadow .15s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.10);
}

.conversaai-player-btn:hover { filter: brightness(1.08); }
.conversaai-player-btn:active { transform: scale(0.93); }
.conversaai-player-btn svg { display: block; }

.conversaai-player-track {
    flex: 1 1 auto;
    position: relative;
    height: 6px;
    background: rgba(0,0,0,0.08);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    touch-action: none;
}

.conversaai-player-bar {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: var(--c-primary, #4c66ef);
    border-radius: 3px;
    transition: width .08s linear;
}

.conversaai-player-thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 12px; height: 12px;
    background: var(--c-primary, #4c66ef);
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    transition: left .08s linear;
}

.conversaai-player-time {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: #666;
    min-width: 70px;
    text-align: right;
    letter-spacing: 0.3px;
}

.conversaai-voice-error {
    font-size: 13px;
    color: #b32d2e;
    font-style: italic;
}

/* ─── Image inside a bot bubble ────────────────────────────────────────── */
.conversaai-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 8px;
    border-radius: 10px;
    object-fit: cover;
}

/* When the image is the only child of the bubble, drop the top spacing. */
.conversaai-message > .conversaai-image:first-child {
    margin-top: 0;
}

/* ─── YouTube embed inside a bot bubble ────────────────────────────────── */
.conversaai-youtube {
    position: relative;
    margin-top: 8px;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
}
/* Fallback for browsers that don't support aspect-ratio. */
@supports not (aspect-ratio: 16 / 9) {
    .conversaai-youtube { padding-bottom: 56.25%; height: 0; }
    .conversaai-youtube iframe { position: absolute; top: 0; left: 0; }
}
.conversaai-youtube iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Click-to-load placeholder: hqdefault.jpg as background + red YouTube play
   button overlay. Tap swaps the thumbnail for a real iframe (autoplay). */
.conversaai-yt-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    background-color: #1a1a1a;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter .15s;
}

/* Thumb couldn't be fetched (deleted/private video). Subtle dark gradient
   instead of a flat black square — the play button still reads as intentional. */
.conversaai-yt-thumb-fallback {
    background-image: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
}
.conversaai-yt-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 50%, rgba(0,0,0,0.45) 100%);
    pointer-events: none;
}
.conversaai-yt-thumb:hover { filter: brightness(1.08); }
.conversaai-yt-thumb:active { filter: brightness(0.92); }
.conversaai-yt-play {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    transition: transform .15s;
}
.conversaai-yt-thumb:hover .conversaai-yt-play { transform: scale(1.06); }
.conversaai-message > .conversaai-youtube:first-child {
    margin-top: 0;
}

/* ─── Sub-question stack (inline under voice answer, vertical layout) ────── */
/* Pills expand to their natural total height. The bubble grows accordingly
   and the messages container is what scrolls — never the bubble or sub-row. */
.conversaai-sub-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
}

.conversaai-sub-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 1.5px solid var(--c-primary, #4c66ef);
    border-radius: 12px;
    color: var(--c-primary, #4c66ef);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    line-height: 1.35;
    transition: background .12s, color .12s, transform .08s, box-shadow .12s;
    font-family: inherit;
}

.conversaai-sub-pill:hover {
    background: var(--c-primary, #4c66ef);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}

.conversaai-sub-pill:active {
    transform: scale(0.99);
}

.conversaai-sub-pill-icon {
    flex: 0 0 auto;
    font-size: 14px;
    line-height: 1;
}

.conversaai-sub-pill-text {
    flex: 1 1 auto;
    /* Long questions wrap onto multiple lines instead of being clipped. */
    overflow-wrap: anywhere;
}

/* When the audio bubble has only the voice wrap (no preceding text), drop the
   extra top spacing the message would otherwise leave for the missing text. */
.conversaai-message > .conversaai-voice:first-child {
    margin-top: 0;
}

.conversaai-typing {
    display: inline-block;
}

.conversaai-typing span {
    display: inline-block;
    width: 6px; height: 6px;
    margin-right: 3px;
    border-radius: 50%;
    background: #999;
    animation: c-blink 1.2s infinite both;
}

.conversaai-typing span:nth-child(2) { animation-delay: .2s; }
.conversaai-typing span:nth-child(3) { animation-delay: .4s; }

@keyframes c-blink {
    0%, 80%, 100% { opacity: .25; }
    40%           { opacity: 1; }
}

/* ─── Suggestion chips list (scrollable) ─── */
.conversaai-suggestions-wrap {
    flex: 0 0 auto;
    background: #fff;
    border-top: 1px solid #ececec;
}

.conversaai-suggestions-label {
    padding: 8px 16px 4px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888;
    font-weight: 600;
}

.conversaai-suggestions {
    /* Fixed pixel max-height so the bottom list stays a predictable size when
       the mobile keyboard shrinks `vh` units. Roughly 3 suggestion rows visible. */
    max-height: calc(3 * 52px + 2 * 6px + 4px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    scrollbar-width: thin;
}
.conversaai-suggestions::-webkit-scrollbar { width: 4px; }
.conversaai-suggestions::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.18);
    border-radius: 2px;
}

.conversaai-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    background: #fff;
    border: 1px solid #d8dff0;
    border-radius: 12px;
    color: var(--c-text, #333);
    font-size: 14.5px;
    line-height: 1.35;
    cursor: pointer;
    transition: background .12s, border-color .12s, transform .08s, box-shadow .12s;
    font-family: inherit;
}

.conversaai-suggestion:hover {
    background: #f4f7ff;
    border-color: var(--c-primary, #4c66ef);
    box-shadow: 0 2px 6px rgba(76,102,239,0.08);
}

.conversaai-suggestion:active {
    background: #eaf0ff;
    transform: scale(0.99);
}

.conversaai-suggestion-icon {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--c-primary, #4c66ef);
    color: #fff;
    font-size: 12px;
}

.conversaai-suggestion-text {
    flex: 1 1 auto;
    min-width: 0;
}

.conversaai-suggestion-arrow {
    flex: 0 0 auto;
    color: #b8c0d6;
    font-size: 16px;
    transition: transform .15s, color .15s;
}

.conversaai-suggestion:hover .conversaai-suggestion-arrow {
    color: var(--c-primary, #4c66ef);
    transform: translateX(2px);
}

/* ─── Input bar (sticks to bottom, stays above keyboard) ─── */
.conversaai-input-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fff;
    border-top: 1px solid #ececec;
    /* Safe-area for iPhone home indicator. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

.conversaai-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #d6dbe8;
    border-radius: 24px;
    background: #f6f7fb;
    color: var(--c-text, #333);
    /* iOS auto-zoom on focus is suppressed when the input font is >= 16px. */
    font-size: 16px;
    outline: none;
    transition: border-color .12s, background .12s;
}

.conversaai-input:focus {
    border-color: var(--c-primary, #4c66ef);
    background: #fff;
}

.conversaai-send {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: var(--c-primary, #4c66ef);
    color: #fff;
    cursor: pointer;
    transition: opacity .12s, transform .1s;
}

.conversaai-send:hover { opacity: .92; }
.conversaai-send:active { transform: scale(0.95); }
.conversaai-send:disabled { opacity: .5; cursor: not-allowed; }

/* ─── Responsive tweaks ─── */
@media (max-width: 480px) {
    .conversaai-root { --c-header-h: 50px; }
    .conversaai-title { font-size: 16px; }
    .conversaai-message { max-width: 88%; font-size: 14.5px; }
    .conversaai-lang-btn { padding: 18px 12px; }
    .conversaai-flag { font-size: 30px; }
}