/* ============================================================
   Nova — Ijisho Support Assistant widget
   Robot chrome stays on-brand (white/indigo). The Matrix-style
   green terminal is scoped ONLY to .nova-terminal, per design
   direction: "the rest of the site stays clean and professional."
   ============================================================ */

:root {
    --nova-blue: #4F46E5;
    --nova-blue-dark: #3730A3;
    --nova-blue-soft: #EEF2FF;
    --nova-term-bg: #05070A;
    --nova-term-green: #35F27A;
    --nova-term-green-dim: #1E8A47;
}

/* Backdrop — dims whatever is on the page behind Nova on mobile, so
   nothing back there (a bright hero slide, page content, anything) can
   visually clash with the widget through the gap around it. */
.nova-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(5, 7, 10, 0.6);
    z-index: 9997;
}

/* Launcher button, bottom-right */
.nova-launcher {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(160deg, #FFFFFF 0%, #EEF2FF 100%);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.28);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9998;
    transition: transform .15s ease, box-shadow .15s ease;
}
.nova-launcher:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(79,70,229,.36); }
.nova-launcher svg { width: 38px; height: 38px; }
.nova-launcher .nova-dot {
    position: absolute; top: 6px; right: 6px; width: 10px; height: 10px;
    border-radius: 50%; background: #16A34A; border: 2px solid #fff;
}

/* Chat panel */
.nova-panel {
    position: fixed;
    right: 22px;
    bottom: 96px;
    width: 372px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 140px);
    background: var(--surface-card);
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    font-family: inherit;
}
.nova-panel.open { display: flex; }

.nova-head {
    background: linear-gradient(135deg, var(--nova-blue) 0%, var(--nova-blue-dark) 100%);
    color: #fff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.nova-head .nova-avatar {
    width: 38px; height: 38px; border-radius: 50%; background: #fff;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.nova-head .nova-avatar svg { width: 24px; height: 24px; }
.nova-head-text { line-height: 1.2; flex: 1; }
.nova-head-text b { display: block; font-size: 0.95rem; }
.nova-head-text span { font-size: 0.75rem; opacity: 0.85; }
.nova-close { background: rgba(255,255,255,.15); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; }

.nova-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
}

.nova-bubble {
    background: var(--nova-blue-soft);
    color: var(--ink);
    padding: 10px 13px;
    border-radius: 12px 12px 12px 2px;
    font-size: 0.86rem;
    max-width: 88%;
    align-self: flex-start;
    overflow-wrap: break-word;
    word-break: break-word;
}
.nova-bubble.user {
    background: var(--nova-blue);
    color: #fff;
    border-radius: 12px 12px 2px 12px;
    align-self: flex-end;
}
.nova-bubble.staff {
    background: #FEF3C7;
    color: #78350F;
    border: 1px solid #FCD34D;
    border-radius: 12px 12px 12px 2px;
    align-self: flex-start;
}
.nova-bubble.staff b { color: #92400E; }
.nova-bubble.system {
    align-self: center;
    background: #F1F5F9;
    color: #64748B;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 10px;
    max-width: none;
}

/* The Matrix-style terminal — this is the ONLY green surface */
.nova-terminal {
    background: var(--nova-term-bg);
    border-radius: 10px;
    padding: 12px 14px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--nova-term-green);
    box-shadow: inset 0 0 18px rgba(53, 242, 122, 0.08);
    max-width: 92%;
    align-self: flex-start;
    white-space: pre-wrap;
    word-break: break-word;
}
.nova-terminal .nova-activity-line { color: var(--nova-term-green-dim); display: block; }
.nova-terminal .nova-activity-line.done { color: var(--nova-term-green); }
.nova-cursor { display: inline-block; width: 7px; height: 1em; background: var(--nova-term-green); vertical-align: text-bottom; animation: nova-blink 0.9s steps(1) infinite; }
@keyframes nova-blink { 50% { opacity: 0; } }

.nova-tutorial-title { color: #fff; font-weight: 700; text-shadow: 0 0 8px rgba(53,242,122,.5); }

.nova-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.nova-actions .btn { font-size: 0.78rem; padding: 7px 12px; }

.nova-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; }
.nova-chip {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    font-size: 0.76rem;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.nova-chip:hover { border-color: var(--nova-blue); color: var(--nova-blue); }

.nova-input-row {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--border);
    background: #fff;
}
.nova-input-row input {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 0.85rem;
}
.nova-input-row button {
    background: var(--nova-blue);
    color: #fff;
    border: none;
    border-radius: 10px;
    width: 40px;
    cursor: pointer;
}

/* Screenshot attach button -- only meaningful once a human has joined,
   since the bot flow has no one to look at an image */
.nova-attach-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-muted);
    border-radius: 10px;
    cursor: pointer;
    flex-shrink: 0;
}
.nova-attach-btn:hover { color: var(--nova-blue); border-color: var(--nova-blue); }
.nova-panel.nova-live .nova-attach-btn { display: flex; }
.nova-panel.nova-live .nova-attach-btn:hover { color: #F59E0B; border-color: #F59E0B; }

.nova-bubble img.nova-attachment {
    display: block;
    max-width: 100%;
    max-height: 220px;
    border-radius: 8px;
    cursor: zoom-in;
}
.nova-bubble.has-image { padding: 4px; }
.nova-bubble a { color: inherit; text-decoration: underline; word-break: break-all; }

/* "Talk to a real person" pill -- hidden until the visitor starts typing */
.nova-live-offer {
    display: none;
    padding: 0 14px 8px;
}
.nova-live-offer.show { display: flex; }
.nova-live-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.nova-live-btn:hover { background: #FDE68A; }

/* Live-session status bar: pulsing dot + elapsed timer */
.nova-live-bar {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #FFF7ED;
    border-top: 1px solid #FED7AA;
    border-bottom: 1px solid #FED7AA;
    font-size: 0.78rem;
    color: #9A3412;
    font-weight: 600;
}
.nova-live-bar.show { display: flex; }
.nova-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #F97316;
    animation: nova-pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes nova-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.nova-live-timer {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    background: #FFEDD5;
    padding: 2px 9px;
    border-radius: 10px;
}

/* Once a human has been called in, the whole widget shifts from Nova's
   indigo to an amber "live" palette so it's visually obvious this is no
   longer the bot. */
.nova-panel.nova-live .nova-head {
    background: linear-gradient(135deg, #F59E0B, #B45309);
}
.nova-panel.nova-live .nova-input-row button {
    background: #F59E0B;
}

.nova-typing-indicator {
    display: none;
    padding: 4px 14px;
    font-size: 0.72rem;
    font-style: italic;
    color: #B45309;
}
.nova-typing-indicator.show { display: block; }

.nova-reply-preview {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: #F1F5F9;
    border-top: 1px solid var(--border);
    font-size: 0.76rem;
    color: #475569;
}
.nova-reply-preview.show { display: flex; }
.nova-reply-preview span:first-child { flex: 1; }
#novaReplyPreviewText { font-style: italic; }
.nova-reply-preview button {
    background: none;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.nova-attach-preview {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #F8FAFC;
    border-top: 1px solid var(--border);
}
.nova-attach-preview.show { display: flex; }
.nova-attach-preview img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; }
.nova-attach-preview span { font-size: 0.76rem; color: #64748B; flex: 1; }
.nova-attach-preview button {
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: #64748B;
    cursor: pointer;
    padding: 3px 9px;
    font-size: 0.74rem;
}

.live-msg-quote {
    font-size: 0.72rem;
    opacity: 0.75;
    border-left: 2px solid currentColor;
    padding: 2px 8px;
    margin-bottom: 4px;
}

/* Robot idle animation on the launcher */
@keyframes nova-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
.nova-launcher svg { animation: nova-float 3s ease-in-out infinite; }

@media (max-width: 480px) {
    /* Fullscreen takeover instead of a floating card. This sidesteps the
       keyboard-resize problem entirely: there's no fixed height fighting
       the on-screen keyboard, so the header and input stay put and only
       the message list (.nova-body, flex:1) gives up space to the keyboard. */
    .nova-panel {
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        margin-left: 0;
        border-radius: 0;
        border: none;
        z-index: 9999;
    }
    .nova-launcher { right: 14px; bottom: 14px; width: 54px; height: 54px; }
    .nova-launcher svg { width: 32px; height: 32px; }
    .nova-head {
        padding: 14px 14px;
        /* Push below the notch/status bar so the close button is reachable */
        padding-top: calc(14px + env(safe-area-inset-top));
        flex-shrink: 0;
    }
    .nova-body { padding: 10px; gap: 10px; flex: 1 1 auto; min-height: 0; }
    .nova-bubble, .nova-terminal { font-size: 0.8rem; }
    .nova-suggestions { padding: 0 10px 8px; flex-shrink: 0; }
    .nova-live-offer { flex-shrink: 0; padding: 0 10px 8px; }
    .nova-live-bar { flex-shrink: 0; }
    .nova-chip { font-size: 0.72rem; padding: 5px 9px; }
    .nova-input-row {
        flex-shrink: 0;
        /* Clear the home-indicator area on notched phones */
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }
    /* Below 16px, iOS/Android auto-zoom the whole page when this input is
       focused (to make small text legible) — that's what was making Nova
       look "too big" the moment you tapped in to type. 16px stops it. */
    .nova-input-row input { font-size: 16px; }
    /* Fullscreen panel already covers everything, so the dimmed backdrop
       is redundant on mobile — keep it off to avoid a stray dark flash. */
    .nova-backdrop.open { display: none; }
    /* Prevent the page behind from scrolling while Nova is fullscreen */
    body.nova-open { overflow: hidden; height: 100%; }
}