/* ── Reset & Base ─────────────────────────────────────────────────── */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --primary: #4a7c9b;
    --primary-dark: #3a6281;
    --primary-light: #e8f1f7;
    --bg: #f7f9fb;
    --bg-white: #ffffff;
    --text: #2c3e50;
    --text-light: #6b7c8d;
    --border: #dce4ec;
    --sidebar-bg: #1e2a38;
    --sidebar-text: #c8d6e0;
    --sidebar-hover: #2a3a4d;
    --sidebar-active: #34495e;
    --error: #c0392b;
    --shadow: 0 1px 3px rgba(0,0,0,0.08);
    --radius: 10px;
    --transition: 0.2s ease;
    --mobile-header-h: 52px;
    --mobile-nav-h: 62px;
}

html {
    height: 100%;
    height: -webkit-fill-available;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* On chat pages, match body bg to the room artwork so the area
   behind the keyboard (and around the Dynamic Island) blends
   seamlessly instead of showing white bands. */
body.chat-page {
    background: #8b7355;  /* dominant color from bg-scribe-room.png */
    background-image: url('/static/images/bg-scribe-room.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* ── Auth Pages ──────────────────────────────────────────────────── */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    background-image: url('/static/images/bg-scribe-room.png');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow-y: auto;
    position: relative;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
             env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* Darken the background so the auth card is easy to read */
.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.45);
    z-index: 0;
}

.auth-container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    padding: 20px 16px;
}

.auth-card {
    /* Liquid glass card */
    background: rgba(255, 252, 248, 0.26);
    backdrop-filter: blur(28px) saturate(1.7);
    -webkit-backdrop-filter: blur(28px) saturate(1.7);
    border: 1px solid rgba(255,255,255,0.45);
    border-radius: 28px;
    padding: 36px 28px 28px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.65),
        0 8px 40px rgba(0,0,0,0.22),
        0 2px 8px rgba(0,0,0,0.10);
}

.auth-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    color: rgba(255,255,255,0.9);
}

.auth-title {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 8px rgba(0,0,0,0.25);
    margin-bottom: 4px;
}

.auth-subtitle {
    text-align: center;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    margin-bottom: 28px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.01em;
}

.form-group input {
    padding: 13px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 16px; /* 16px prevents iOS auto-zoom */
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    background: var(--bg-white);
    color: var(--text);
    -webkit-appearance: none;
    appearance: none;
}

/* Glass overrides ONLY inside auth pages */
.auth-page .form-group input {
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255,255,255,0.95);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}

.auth-page .form-group input::placeholder { color: rgba(255,255,255,0.45); }

.form-group input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 155, 0.14);
}

.auth-page .form-group input:focus {
    border-color: rgba(255,255,255,0.65);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 0 0 3px rgba(255,255,255,0.15);
}

.error-msg {
    color: var(--error);
    font-size: 13px;
    text-align: center;
    padding: 10px 12px;
    background: #fdf0ef;
    border-radius: var(--radius);
    border: 1px solid rgba(192,57,43,0.15);
}

.btn-primary {
    padding: 14px;
    background: rgba(74, 124, 155, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: white;
    border: 1px solid rgba(120,180,220,0.4);
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), transform 0.1s, box-shadow 0.1s;
    touch-action: manipulation;
    margin-top: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 4px 16px rgba(0,0,0,0.18);
}

.btn-primary:hover  { background: rgba(58, 98, 129, 0.85); }
.btn-primary:active { transform: scale(0.98); box-shadow: none; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.auth-link {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
}

.auth-link a {
    color: rgba(180, 220, 255, 0.9);
    text-decoration: none;
    font-weight: 600;
}

.auth-link a:hover { text-decoration: underline; }

/* Forgot password link */
.auth-forgot-link {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}

.auth-forgot-link a {
    color: rgba(180, 220, 255, 0.7);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s;
}

.auth-forgot-link a:hover { color: rgba(180, 220, 255, 1); text-decoration: underline; }

/* Forgot password section */
.forgot-section {
    margin-top: 4px;
}

.forgot-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 16px 0;
}

.forgot-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 6px;
}

.forgot-desc {
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    margin-bottom: 18px;
}

/* Success variant of error-msg */
.success-msg {
    color: #48bb78 !important;
    background: rgba(72, 187, 120, 0.12) !important;
    border-color: rgba(72, 187, 120, 0.25) !important;
}

/* ── Chat Page Layout ────────────────────────────────────────────── */

.chat-page {
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    position: relative;
    background: transparent;  /* body carries the room bg; this avoids white gaps */
}

/* ── Sidebar — frosted glass ─────────────────────────────────────── */

.sidebar {
    width: 272px;
    min-width: 272px;
    /* Liquid-glass effect: semi-transparent dark tint + heavy blur */
    background: rgba(12, 20, 30, 0.72);
    backdrop-filter: blur(28px) saturate(1.6);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,0.10);
    z-index: 100;
    flex-shrink: 0;
}

.sidebar-header {
    padding: 20px 14px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.app-name {
    color: #ecf0f1;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.btn-new-chat {
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    color: var(--sidebar-text);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    touch-action: manipulation;
}

.btn-new-chat:hover { background: var(--sidebar-hover); border-color: rgba(255,255,255,0.22); }
.btn-new-chat:active { background: var(--sidebar-active); }

.chat-list {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    -webkit-overflow-scrolling: touch;
}

.chat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sidebar-text);
    font-size: 13.5px;
    transition: background var(--transition);
    margin-bottom: 2px;
    min-height: 44px; /* minimum touch target */
    touch-action: manipulation;
}

.chat-item:hover { background: var(--sidebar-hover); }
.chat-item.active { background: var(--sidebar-active); color: #ffffff; }

.chat-item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6px;
}

.chat-item-delete {
    opacity: 0;
    background: none;
    border: none;
    color: var(--sidebar-text);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 17px;
    border-radius: 4px;
    transition: all var(--transition);
    flex-shrink: 0;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
}

.chat-item:hover .chat-item-delete { opacity: 0.65; }
.chat-item-delete:hover { opacity: 1 !important; background: rgba(192,57,43,0.3); color: #e74c3c; }

/* Always show delete on touch devices */
@media (hover: none) {
    .chat-item-delete { opacity: 0.5; }
}

.sidebar-footer {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 9px;
    overflow: hidden;
}

.sidebar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.username-display {
    color: var(--sidebar-text);
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-about {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 6px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
    touch-action: manipulation;
}

.btn-about:hover { color: #fff; background: rgba(255,255,255,0.08); }

.btn-logout {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: all var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    flex-shrink: 0;
    touch-action: manipulation;
}

.btn-logout:hover { color: #e74c3c; background: rgba(231,76,60,0.12); }

/* ── Sidebar backdrop ────────────────────────────────────────────── */

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 98;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sidebar-backdrop.visible { display: block; }

/* ── Floating hamburger button (no bar — icon floats over background) */

.floating-menu-btn {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: 14px;
    z-index: 98;
    background: rgba(15, 20, 30, 0.42);
    backdrop-filter: blur(14px) saturate(1.5);
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 13px;
    color: rgba(255,255,255,0.95);
    cursor: pointer;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
    transition: background var(--transition), transform 0.12s;
    box-shadow: 0 2px 14px rgba(0,0,0,0.28);
}

.floating-menu-btn:active {
    background: rgba(255,255,255,0.15);
    transform: scale(0.92);
}

/* ── Main Chat Area ──────────────────────────────────────────────── */

.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    overflow: hidden;
    /* Background now lives on body.chat-page so it extends behind
       the keyboard and Dynamic Island. chat-main stays transparent. */
    background: transparent;
}

/* ── Welcome screen ──────────────────────────────────────────────── */

.welcome-screen {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    /* Transparent — lets chat-main's landscape background show through
       so welcome and chat views share the same background seamlessly */
    background: transparent;
}

/* ── Speech bubble ───────────────────────────────────────────────── */

.welcome-bubble {
    position: relative;
    z-index: 1;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    border: 1px solid rgba(255,255,255,0.65);
    border-radius: 24px;
    padding: 16px 26px;
    font-size: 17px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    max-width: 290px;
    line-height: 1.45;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        0 6px 28px rgba(0,0,0,0.13);
    /* Staggered rise: bubble appears first, then character */
    animation: scribe-rise 0.75s cubic-bezier(0.34, 1.15, 0.64, 1) 0.15s both;
    /* Gap below for the tail */
    margin-bottom: 28px;
}

/* Tail pointing down toward the character */
.welcome-bubble::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 18px solid rgba(255,255,255,0.82);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.08));
}

/* ── Welcome character ───────────────────────────────────────────── */

.welcome-scribe-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    animation: scribe-rise 0.9s cubic-bezier(0.34, 1.15, 0.64, 1) 0.35s both;
}

.welcome-scribe-img {
    height: 340px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,0.22));
}

/* ── Button wrap ─────────────────────────────────────────────────── */

.welcome-text-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 24px 0;
    animation: scribe-rise 0.9s cubic-bezier(0.34, 1.15, 0.64, 1) 0.55s both;
}

.btn-welcome-start {
    margin-top: 18px;
    padding: 15px 36px;
    background: linear-gradient(135deg, #c9a55a 0%, #e8c97a 50%, #c9a55a 100%);
    color: #3a2800;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
    touch-action: manipulation;
    box-shadow: 0 4px 20px rgba(201, 165, 90, 0.45), 0 1px 3px rgba(0,0,0,0.4);
}

.btn-welcome-start:active { transform: scale(0.96); box-shadow: 0 2px 10px rgba(201,165,90,0.3); }

@keyframes scribe-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* ── Scribe companion: persistent foreground layer during chat ───── */

.chat-scribe-bg {
    position: absolute;
    bottom: 82px;          /* clears the floating input bar */
    left: -12px;
    z-index: 3;            /* default: floats ABOVE message bubbles */
    pointer-events: none;
    transition: opacity 0.6s ease, z-index 0s;
}

/* User is scrolling — scribe fades out behind the bubbles */
.chat-scribe-bg.submerged {
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease, z-index 0s;   /* fade out quickly */
}

/* When .submerged is removed, fade back in gently (the default transition: 0.6s handles it) */

/* ── State-specific scribe animations ────────────────────────────── */

/* idle — gentle breath */
.scribe-stage-img.idle {
    animation: scribe-breathe 4s ease-in-out infinite;
}
@keyframes scribe-breathe {
    0%, 100% { transform: translateY(0);   }
    50%      { transform: translateY(-4px); }
}

/* listening — user is typing: lean forward attentively */
.scribe-stage-img.listening {
    animation: scribe-lean 1.4s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 10px rgba(201, 165, 90, 0.35));
}
@keyframes scribe-lean {
    from { transform: rotate(-1deg) translateY(0);    }
    to   { transform: rotate(1.5deg) translateY(-3px); }
}

.scribe-stage-img {
    height: 240px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: opacity 0.25s ease;
    mask-image: radial-gradient(ellipse 85% 90% at 42% 58%, black 42%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 85% 90% at 42% 58%, black 42%, transparent 100%);
}

/* State-specific scribe animations */
.scribe-stage-img.thinking {
    animation: scribe-bob 2s ease-in-out infinite;
    filter: drop-shadow(0 0 14px rgba(74, 124, 155, 0.4));
}

.scribe-stage-img.answering {
    animation: scribe-glow 1.2s ease-in-out 2;
}

.scribe-stage-img.pushback {
    animation: scribe-shake 0.5s ease-in-out 1;
}

.scribe-stage-img.fading {
    opacity: 0;
}

@keyframes scribe-bob {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    25%       { transform: translateY(-8px) rotate(-1deg); }
    75%       { transform: translateY(-4px) rotate(0.5deg); }
}

@keyframes scribe-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(255, 200, 80, 0.3)); }
    50%       { filter: drop-shadow(0 0 28px rgba(255, 200, 80, 0.7)); }
}

@keyframes scribe-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}

/* ── Scribe status bar (above input during thinking/answering) ─────── */

.scribe-status-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-top: 1px solid rgba(220, 228, 236, 0.7);
    background: rgba(247, 249, 251, 0.88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    z-index: 3;
    animation: status-slide-up 0.3s cubic-bezier(0.34, 1.2, 0.64, 1) both;
}

@keyframes status-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.scribe-status-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1e2a38;
    transition: opacity 0.2s ease;
}

.scribe-status-img.fading { opacity: 0; }

.scribe-status-label {
    font-size: 13.5px;
    color: var(--text-light);
    font-style: italic;
    flex: 1;
}

/* Status bar state tints */
.scribe-status-bar.thinking {
    background: #f0f5fa;
    border-top-color: rgba(74, 124, 155, 0.2);
}
.scribe-status-bar.thinking .scribe-status-label {
    color: var(--primary-dark);
}
.scribe-status-bar.answering {
    background: #f5f9f0;
    border-top-color: rgba(76, 140, 60, 0.2);
}
.scribe-status-bar.answering .scribe-status-label {
    color: #3a6e28;
}
.scribe-status-bar.pushback {
    background: #fdf8f0;
    border-top-color: rgba(180, 120, 40, 0.2);
}
.scribe-status-bar.pushback .scribe-status-label {
    color: #8a5a20;
}

/* ── Messages ────────────────────────────────────────────────────── */

.messages-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 0 8px;
    position: relative;
    z-index: 2;            /* sits between background (1) and scribe foreground (3) */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 2;          /* float above the background scribe layer */
    background: transparent;
}

.messages {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 20px;
}

.message {
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
    border-radius: 20px;
    padding: 13px 16px;
    /* Shared glass base */
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    /* Inner highlight on top edge (glass refraction) */
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 4px 24px rgba(0,0,0,0.13),
        0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease;
}

/* ── User message — cool blue-tinted glass ── */
.message.user {
    background: rgba(74, 124, 155, 0.22);
    border: 1px solid rgba(120, 180, 220, 0.35);
}

/* ── Assistant message — warm white glass ── */
.message.assistant {
    background: rgba(255, 252, 245, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.42);
}

.message-avatar {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
    /* Glass pill avatar */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 4px rgba(0,0,0,0.15);
}

.message.user .message-avatar {
    background: rgba(74, 124, 155, 0.65);
    border: 1px solid rgba(120, 180, 220, 0.5);
    color: white;
}

.message.assistant .message-avatar {
    background: rgba(255, 255, 255, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: var(--primary-dark);
}

.message-content { flex: 1; min-width: 0; }

.message-role {
    font-size: 11.5px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.message.user .message-role    { color: rgba(74, 124, 155, 0.85); }
.message.assistant .message-role { color: rgba(90, 70, 40, 0.65); }

.message-text {
    font-size: 15px;
    line-height: 1.75;
    /* Rich dark text stays readable on any glass */
    color: rgba(28, 36, 46, 0.95);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

/* ── Copy response button ──────────────────────────────────────── */

.copy-msg-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 5px 10px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    color: rgba(60, 70, 80, 0.6);
    cursor: pointer;
    font-size: 11px;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    touch-action: manipulation;
}

.copy-msg-btn:hover {
    background: rgba(0, 0, 0, 0.10);
    color: rgba(40, 50, 60, 0.85);
}

.copy-msg-btn:active {
    transform: scale(0.93);
}

.copy-msg-btn.copied {
    color: #2d8a56;
    background: rgba(45, 138, 86, 0.10);
    border-color: rgba(45, 138, 86, 0.2);
}

/* ── Download PDF button ─────────────────────────────────────── */

.download-pdf-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    margin-left: 6px;
    padding: 5px 12px;
    background: rgba(74, 124, 155, 0.10);
    border: 1px solid rgba(74, 124, 155, 0.25);
    border-radius: 8px;
    color: rgba(74, 124, 155, 0.85);
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    touch-action: manipulation;
}

.download-pdf-btn:hover {
    background: rgba(74, 124, 155, 0.18);
    color: rgba(45, 75, 100, 0.95);
}

.download-pdf-btn:active {
    transform: scale(0.93);
}

.download-pdf-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ── Follow-up suggestion chips ───────────────────────────────── */

.followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 20px 10px;
    max-width: 760px;
    margin: 0 auto;
    animation: chips-fade-in 0.35s ease both;
}

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

.followup-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(74, 124, 155, 0.22);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border: 1px solid rgba(120, 180, 220, 0.30);
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.1s;
    touch-action: manipulation;
    text-align: left;
}

.followup-chip:hover {
    background: rgba(74, 124, 155, 0.35);
    border-color: rgba(120, 180, 220, 0.50);
}

.followup-chip:active {
    transform: scale(0.96);
}

/* Markdown */
.message-text p { margin-bottom: 10px; }
.message-text p:last-child { margin-bottom: 0; }
.message-text strong { font-weight: 700; }
.message-text em { font-style: italic; }
.message-text ul, .message-text ol { margin: 8px 0; padding-left: 22px; }
.message-text li { margin-bottom: 5px; }
.message-text h2 { font-size: 17px; margin: 14px 0 6px; color: var(--primary-dark); }
.message-text h3 { font-size: 15px; margin: 12px 0 4px; color: var(--primary-dark); }
.message-text h4 { font-size: 14px; margin: 10px 0 4px; color: var(--text); }

.message-text blockquote {
    border-left: 3px solid var(--primary);
    padding: 6px 14px;
    margin: 10px 0;
    color: var(--text-light);
    background: var(--primary-light);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-style: italic;
}

.message-text code {
    background: #f0f2f5;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 13px;
    font-family: "SF Mono", "Fira Code", monospace;
}

.message-text pre {
    background: #1e2a38;
    color: #ecf0f1;
    padding: 14px 16px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 10px 0;
    -webkit-overflow-scrolling: touch;
}

.message-text pre code { background: none; padding: 0; color: inherit; font-size: 13px; }

/* ── Typing indicator ────────────────────────────────────────────── */

.typing-indicator {
    display: inline-flex;
    gap: 4px;
    padding: 6px 0;
    align-items: center;
}

.typing-indicator span {
    width: 6px;
    height: 6px;
    background: var(--text-light);
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
    30% { transform: translateY(-5px); opacity: 1; }
}

/* ── Input Bar ───────────────────────────────────────────────────── */

.input-bar {
    /* No background panel — the message-form floats directly on the background */
    padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border-top: none;
    flex-shrink: 0;
    margin-top: auto;   /* always pins to the bottom of chat-main */
    position: relative;
    z-index: 3;
}

.message-form {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    /* Liquid glass input box */
    background: rgba(255, 252, 245, 0.32);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 18px;
    padding: 9px 9px 9px 16px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 4px 20px rgba(0,0,0,0.14),
        0 1px 4px rgba(0,0,0,0.08);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.message-form:focus-within {
    border-color: rgba(74, 124, 155, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 0 0 3px rgba(74, 124, 155, 0.18),
        0 4px 20px rgba(0,0,0,0.14);
}

.message-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px; /* 16px prevents iOS auto-zoom */
    line-height: 1.5;
    resize: none;
    max-height: 140px;
    font-family: inherit;
    color: var(--text);
    background: transparent;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}

.message-input::placeholder { color: var(--text-light); }

.btn-send {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background var(--transition), transform 0.1s;
    flex-shrink: 0;
    touch-action: manipulation;
}

.btn-send:hover { background: var(--primary-dark); }
.btn-send:active { transform: scale(0.93); }
.btn-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Scrollbar styling (desktop) ─────────────────────────────────── */

.chat-list::-webkit-scrollbar,
.messages-container::-webkit-scrollbar { width: 5px; }

.chat-list::-webkit-scrollbar-track,
.messages-container::-webkit-scrollbar-track { background: transparent; }

.chat-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
.messages-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ── Mobile bottom nav ───────────────────────────────────────────── */

.mobile-nav {
    display: none; /* shown via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom, 0px));
    background: var(--sidebar-bg);
    border-top: 1px solid rgba(255,255,255,0.07);
    align-items: flex-start;
    justify-content: space-around;
    padding-top: 4px;
    z-index: 150;
}

.mobile-nav-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--sidebar-text);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 4px;
    min-height: 54px;
    touch-action: manipulation;
    transition: color var(--transition);
    letter-spacing: 0.01em;
}

.mobile-nav-btn:active { opacity: 0.7; }

.mobile-nav-center {
    flex: 1;
    position: relative;
    align-items: center;
    color: white;
}

.mobile-nav-fab {
    width: 46px;
    height: 46px;
    background: var(--primary);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 3px 12px rgba(74, 124, 155, 0.45);
    transition: background var(--transition), transform 0.1s;
    margin-bottom: 1px;
}

.mobile-nav-center:active .mobile-nav-fab {
    background: var(--primary-dark);
    transform: scale(0.93);
}

/* ── Mobile Responsive ───────────────────────────────────────────── */

@media (max-width: 768px) {

    /* Sidebar becomes full-height overlay */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 99;
        width: 82vw;
        max-width: 310px;
        padding-top: env(safe-area-inset-top, 0px);
    }

    .sidebar.open { transform: translateX(0); }

    /* No header bar — chat fills the whole screen edge to edge */
    .chat-main {
        width: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* Adjust messages padding */
    .messages { padding: 0 14px; }

    /* Input bar stays transparent on mobile too */
    .input-bar {
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        background: transparent;
        border-top: none;
    }

    /* Message bubble tweaks on mobile */
    .message { margin-bottom: 10px; padding: 11px 14px; }
    .message-text { font-size: 15px; }

    /* Welcome screen adjustments for mobile */
    .welcome-scribe-img { height: 260px; }
    .welcome-bubble { font-size: 16px; padding: 14px 22px; max-width: 270px; }
    .btn-welcome-start { font-size: 15px; padding: 14px 28px; }
    .welcome-text-wrap { padding-top: 16px; }

    /* Scribe background: bigger on mobile, clear the input bar + safe area */
    .chat-scribe-bg { left: -16px; bottom: calc(82px + env(safe-area-inset-bottom, 0px)); }
    .scribe-stage-img { height: 220px; }

    /* When viewport shrinks (keyboard open), keep layout tight */
    .chat-page {
        will-change: height, transform;
        transition: height 0.1s ease;
    }

    /* Welcome screen: scrollable when keyboard squishes viewport */
    .welcome-text-wrap {
        overflow-y: auto;
        max-height: 100%;
    }

    /* Status bar adjustments */
    .scribe-status-bar { padding: 7px 12px; gap: 8px; }
    .scribe-status-img { width: 34px; height: 34px; }
    .scribe-status-label { font-size: 13px; }

    /* Chat items: bigger touch target */
    .chat-item { padding: 13px 12px; min-height: 48px; }

    /* Always-visible delete button on touch */
    .chat-item-delete { opacity: 0.45 !important; }

    /* Auth card on mobile */
    .auth-card { padding: 28px 20px 24px; }
    .auth-title { font-size: 24px; }
}

/* Extra small screens */
@media (max-width: 380px) {
    .messages { padding: 0 10px; }
}

/* ── About / Contact Modal ───────────────────────────────────────── */

.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 200;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    overflow-y: auto;
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    background: var(--bg-white);
    border-radius: 18px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    animation: modal-in 0.22s cubic-bezier(0.34, 1.36, 0.64, 1);
}

@keyframes modal-in {
    from { opacity: 0; transform: scale(0.93) translateY(10px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);     }
}

/* Header */
.modal-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px 22px 18px;
    background: linear-gradient(135deg, var(--sidebar-bg) 0%, #2c3e50 100%);
    color: white;
}

.modal-logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #a8c8e0;
}

.modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #ecf0f1;
    line-height: 1.2;
}

.modal-subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin-top: 2px;
}

.modal-close {
    margin-left: auto;
    background: rgba(255,255,255,0.1);
    border: none;
    color: rgba(255,255,255,0.6);
    cursor: pointer;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition);
    touch-action: manipulation;
}

.modal-close:hover { background: rgba(255,255,255,0.2); color: white; }

/* About blurb */
.modal-about {
    padding: 20px 22px 0;
}

.modal-about p {
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.65;
}

.modal-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.modal-badge {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--primary-dark);
    background: var(--primary-light);
    border: 1px solid rgba(74,124,155,0.18);
    border-radius: 20px;
    padding: 4px 11px;
    letter-spacing: 0.01em;
}

.modal-divider {
    height: 1px;
    background: var(--border);
    margin: 20px 22px;
}

/* Contact section label */
.modal-contact-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 22px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.modal-contact-header svg {
    color: var(--primary);
    flex-shrink: 0;
}

/* Contact form */
.contact-form {
    padding: 0 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.contact-form .form-group input,
.contact-textarea {
    padding: 13px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: 15px;
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
    outline: none;
    background: var(--bg);
    color: var(--text);
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.contact-form .form-group input:focus,
.contact-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(74, 124, 155, 0.13);
    background: var(--bg-white);
}

.contact-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.55;
}

.contact-status {
    font-size: 13.5px;
    padding: 11px 14px;
    border-radius: var(--radius);
    line-height: 1.5;
}

.contact-error   { background: #fdf0ef; color: var(--error); border: 1px solid rgba(192,57,43,0.18); }
.contact-success { background: #edf7ed; color: #276a27;       border: 1px solid rgba(39,106,39,0.18); }

.contact-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 15px;
    margin-top: 2px;
}

/* Mobile adjustments for the modal */
@media (max-width: 540px) {
    .modal-overlay { padding: 0; align-items: flex-end; }
    .modal-card {
        border-radius: 20px 20px 0 0;
        max-height: 92dvh;
        overflow-y: auto;
        animation: modal-in-mobile 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
    @keyframes modal-in-mobile {
        from { transform: translateY(100%); }
        to   { transform: translateY(0);    }
    }
    .contact-form-row { grid-template-columns: 1fr; }
    .modal-header { padding: 18px 18px 16px; }
    .modal-about,
    .modal-contact-header,
    .contact-form { padding-left: 18px; padding-right: 18px; }
    .modal-divider { margin-left: 18px; margin-right: 18px; }
}

/* ── Cooldown Overlay ───────────────────────────────────────────── */

.cooldown-overlay {
    display: none;           /* toggled to flex by JS */
    position: fixed;
    inset: 0;
    z-index: 300;            /* above everything including modals */
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 20, 0.72);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    padding: 24px;
    animation: cooldown-fade-in 0.4s ease both;
}

@keyframes cooldown-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cooldown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 340px;
    gap: 18px;
    animation: cooldown-rise 0.5s cubic-bezier(0.34, 1.15, 0.64, 1) 0.1s both;
}

@keyframes cooldown-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.cooldown-img {
    width: 200px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.35));
}

.cooldown-msg {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 500;
    max-width: 300px;
}

.cooldown-timer {
    font-size: 28px;
    font-weight: 700;
    color: rgba(201, 165, 90, 0.95);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 2px 12px rgba(201, 165, 90, 0.3);
}

@media (max-width: 768px) {
    .cooldown-img { width: 160px; }
    .cooldown-msg { font-size: 15px; }
    .cooldown-timer { font-size: 24px; }
}

/* ── Streaming cursor (typing indicator) ─────────────────── */
.streaming-cursor {
    display: inline-block;
    width: 2px;
    height: 1em;
    background: rgba(255, 255, 255, 0.7);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: cursor-blink 0.8s steps(2) infinite;
}

@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}