/* Sisters Grasp — King's Personal Messenger */

:root {
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #1c2333;
    --text-primary: #e6edf3;
    --text-secondary: #8b949e;
    --accent: #9D4EDD;
    --accent-glow: rgba(157, 78, 221, 0.3);
    --sister-soria: #9D4EDD;
    --sister-jakarta: #FF6BAA;
    --sister-juno: #4ECDC4;
    --sister-zila: #FFD93D;
    --sister-king: #FF3B30;
    --king-bubble: #2d333b;
    --sister-bubble: #1a1f2e;
    --border-color: #30363d;
    --danger: #f85149;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    /* iOS: `100%` resolves to the LAYOUT viewport, which does NOT shrink when
       the keyboard opens -- so Safari shoves the whole webview up to reveal the
       composer and the messages slide over the status bar (King 2026-09-22).
       `dvh` tracks the visible area; `--app-h` is the exact measurement from
       the visualViewport listener in grasp.js. Last valid declaration wins, so
       an older browser still gets the 100% fallback. */
    height: 100%;
    height: 100dvh;
    height: var(--app-h, 100dvh);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    -webkit-text-size-adjust: 100%;
}

#grasp-app {
    display: flex;
    /* --kb-h is the on-screen keyboard, subtracted ONLY when the browser
       refuses to report it. Measured on King's phone 2026-09-23: in iOS
       standalone (home-screen) mode the keyboard does NOT resize the page
       and visualViewport.height stays at the full 797px, so every
       dvh/visualViewport approach is a no-op there and his composer sat at
       y=702 under the keyboard. In a normal Safari tab the viewport DOES
       shrink, so grasp.js leaves --kb-h at 0 and this subtracts nothing. */
    height: 100%;
    height: 100dvh;
    height: calc(var(--app-h, 100dvh) - var(--kb-h, 0px));
    width: 100%;
    transition: height .18s ease-out;
}

/* ── Thread List Panel ── */

#thread-list {
    width: 100%;
    max-width: 380px;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.thread-header h1 {
    font-size: 20px;
    font-weight: 700;
    background: linear-gradient(135deg, var(--sister-soria), var(--sister-jakarta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.back-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 20px;
    padding: 4px 8px;
}

.current-user-badge {
    font-size: 13px;
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(157, 78, 221, 0.15);
    border: 1px solid rgba(157, 78, 221, 0.3);
    font-weight: 500;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Don't let the crowded header flex-row collapse this to a clipped sliver
       (it was shrinking to just the first letter). Keep it fully visible. */
    flex-shrink: 0;
    min-width: max-content;
}

#threads {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.thread-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}

.thread-item:hover, .thread-item.active {
    background: var(--bg-secondary);
}

.thread-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    text-transform: uppercase;
}

.thread-avatar.soria { background: var(--sister-soria); }
.thread-avatar.jakarta { background: var(--sister-jakarta); }
.thread-avatar.juno { background: var(--sister-juno); }
.thread-avatar.zila { background: var(--sister-zila); }
.thread-avatar.king { background: var(--sister-king); }

.thread-info {
    flex: 1;
    min-width: 0;
}

.thread-name {
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 2px;
}

.thread-preview {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.thread-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.thread-time {
    font-size: 11px;
    color: var(--text-secondary);
}

.unread-badge {
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
}

.unread-badge.hidden { display: none; }

/* ── Chat View Panel ── */

#chat-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
}

.chat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.back-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 22px;
    cursor: pointer;
    padding: 4px 8px;
}

.chat-header-info { flex: 1; }

.sister-name {
    font-weight: 700;
    font-size: 16px;
    text-transform: capitalize;
}

.sister-status {
    font-size: 12px;
    color: var(--text-secondary);
}

/* ── Messages ── */

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

.msg {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 15px;
    line-height: 1.45;
    word-wrap: break-word;
    position: relative;
}

.msg.king {
    align-self: flex-end;
    background: var(--king-bubble);
    border-bottom-right-radius: 4px;
}

.msg.sister {
    align-self: flex-start;
    background: var(--sister-bubble);
    border-bottom-left-radius: 4px;
    border-left: 3px solid var(--accent);
}

.msg.sister.soria { border-left-color: var(--sister-soria); }
.msg.sister.jakarta { border-left-color: var(--sister-jakarta); }
.msg.sister.king { border-left-color: var(--sister-king); }
.msg.sister.juno { border-left-color: var(--sister-juno); }
.msg.sister.zila { border-left-color: var(--sister-zila); }

.msg-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 4px;
}

.msg.sister .msg-meta { justify-content: flex-start; }

.msg-time {
    font-size: 10px;
    color: var(--text-secondary);
}

.msg-delete {
    background: none;
    border: none;
    color: var(--text-secondary);
    opacity: 0.55;
    cursor: pointer;
    font-size: 18px;
    padding: 0 6px;
    line-height: 1;
    transition: opacity 0.15s, color 0.15s;
}

.msg:hover .msg-delete,
.msg-delete:focus {
    opacity: 1;
    color: var(--text-secondary);
}

.clear-thread-btn {
    background: none;
    border: 1px solid rgba(239,68,68,0.4);
    color: #fca5a5;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 8px;
}
.clear-thread-btn:hover { background: rgba(239,68,68,0.15); }

.attach-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    margin: 0 12px 6px 12px;
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}
.attach-preview button {
    background: none;
    border: none;
    color: #f87171;
    font-size: 18px;
    cursor: pointer;
}

.msg-attach {
    margin-top: 6px;
}
.msg-attach-name,
.msg-attach-size {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 4px;
}
.msg-attach-link {
    display: inline-block;
    padding: 8px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}
.msg-attach-link:hover { background: rgba(255,255,255,0.1); }

/* Login state machine — username / PIN pad / set / change / reset */
.login-stage { display: block; }
.login-stage.hidden { display: none; }

.pin-display {
    display: block;
    width: 80%;
    margin: 10px auto;
    text-align: center;
    font-size: 22px;
    letter-spacing: 8px;
    padding: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    color: #fff;
}

.pinpad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px auto 12px;
    max-width: 260px;
}
.pinpad button {
    padding: 18px 0;
    font-size: 22px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}
.pinpad button:active { background: rgba(168,85,247,0.25); }
.pinpad button.pin-fn {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.3);
    color: #fca5a5;
}

.login-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    text-align: center;
}
.login-hint a { color: #c084fc; text-decoration: none; }
.login-hint a:hover { text-decoration: underline; }

/* Locked feature buttons */
.feature-locked {
    position: relative;
    opacity: 0.5;
    cursor: not-allowed !important;
}
.feature-locked::after {
    content: "🔒";
    position: absolute;
    top: -4px;
    right: -4px;
    font-size: 12px;
    background: #1a1a2e;
    border-radius: 50%;
    padding: 2px 3px;
}

.msg-delete:hover {
    color: var(--danger) !important;
}

.msg-audio {
    margin-top: 6px;
}

.msg-audio button {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
}

.msg-audio button:hover {
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

/* ── Typing Indicator ── */

.typing-indicator {
    padding: 8px 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.typing-indicator.hidden { display: none; }

.typing-dots span {
    animation: typingBounce 1.4s infinite ease-in-out;
    display: inline-block;
    font-weight: bold;
    font-size: 18px;
}

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

@keyframes typingBounce {
    0%, 80%, 100% { opacity: 0.3; }
    40% { opacity: 1; }
}

/* ── Send Form ── */

.send-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px 6px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    align-items: center;
}

.send-hint {
    padding: 0 18px 8px;
    font-size: 12px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    text-align: left;
    user-select: none;
    letter-spacing: 0.2px;
}

#msg-input {
    /* Own full-width row on top of the action buttons so the whole message is
       visible while typing; grows taller as you type up to max-height. */
    flex: 1 1 100%;
    order: -1;
    width: 100%;
    box-sizing: border-box;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 18px;
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 16px;
    outline: none;
    font-family: inherit;
    line-height: 1.45;
    resize: none;
    overflow-y: auto;
    min-height: 58px;
    max-height: 320px;
}

#msg-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

#send-btn {
    background: var(--accent);
    border: none;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    margin-left: auto;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

#send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Login Screen ── */

#login-screen {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
}

#login-screen.hidden { display: none; }

.login-box {
    text-align: center;
    padding: 40px 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    width: 320px;
    max-width: 90vw;
}

.login-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--sister-soria), var(--sister-jakarta));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

#login-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#pin-input {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 14px 16px;
    color: var(--text-primary);
    font-size: 18px;
    text-align: center;
    letter-spacing: 4px;
    outline: none;
}

#pin-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

#login-btn {
    background: var(--accent);
    border: none;
    color: #fff;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

#login-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.login-error {
    margin-top: 12px;
    color: var(--danger);
    font-size: 14px;
}

.login-error.hidden { display: none; }

.hidden { display: none !important; }

/* ── Empty State ── */

.empty-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 15px;
    text-align: center;
    padding: 40px;
}

/* ── Mobile Layout ── */

@media (max-width: 700px) {
    #thread-list {
        max-width: none;
        border-right: none;
    }

    #chat-view {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        /* THIS is the element that owns the phone layout -- it is pinned to
           the VIEWPORT, not to #grasp-app, so every height fix applied to
           html / body / #grasp-app missed it entirely and King's composer
           stayed buried under the keyboard for two days. --kb-h lifts the
           bottom edge clear of the keyboard; it is 0 unless grasp.js has
           proven the viewport refuses to shrink on its own. */
        /* NOT `bottom`. This element is position:fixed, so `bottom: 0` means
           the bottom of the 797px LAYOUT viewport -- which is behind the
           keyboard. His phone reported vvHeight 417 with the composer still
           sitting at y=702 for exactly this reason. An explicit height off
           the top edge is the only anchor that tracks what he can SEE.
           --app-h is the real visible height, whether the browser reported
           the keyboard or grasp.js had to infer it. */
        bottom: auto;
        height: var(--app-h, 100dvh);
        z-index: 100;
        transform: translateX(100%);
        transition: transform 0.25s ease, height 0.18s ease-out;
    }

    #chat-view.open {
        transform: translateX(0);
    }

    .back-btn {
        display: block;
    }

    .msg {
        max-width: 85%;
    }
}

/* ── Scrollbar ── */

.messages::-webkit-scrollbar, #threads::-webkit-scrollbar {
    width: 6px;
}

.messages::-webkit-scrollbar-track, #threads::-webkit-scrollbar-track {
    background: transparent;
}

.messages::-webkit-scrollbar-thumb, #threads::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

/* ── Safe area for notched phones ── */

@supports (padding: env(safe-area-inset-top)) {
    .thread-header, .chat-header {
        padding-top: calc(12px + env(safe-area-inset-top));
    }
    .send-hint {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }
}

/* Thinking block */
.msg-thinking {
    margin-bottom: 6px;
    font-size: 0.8em;
    color: var(--text-secondary);
    border: 1px solid rgba(157, 78, 221, 0.2);
    border-radius: 6px;
    padding: 4px 8px;
    background: rgba(157, 78, 221, 0.05);
}
.msg-thinking summary {
    cursor: pointer;
    color: var(--accent);
    font-style: italic;
}
.msg-thinking .thinking-text {
    margin-top: 6px;
    white-space: pre-wrap;
    line-height: 1.4;
    opacity: 0.8;
}

/* ── 📍 location status line (grasp-location.js) — says what Soria holds ── */
.loc-status {
    padding: 4px 16px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}
.loc-status.ok { color: #34c759; }
.loc-status.bad { color: #ff453a; }
.loc-status.hidden { display: none; }
/* the 📍 is a colour emoji — CSS colour cannot tint it — so state is a dot beside it */
#grasp-loc-btn { position: relative; }
#grasp-loc-btn.loc-on::after, #grasp-loc-btn.loc-pending::after {
    content: ""; position: absolute; right: 2px; top: 4px;
    width: 9px; height: 9px; border-radius: 50%; background: #34c759;
    box-shadow: 0 0 0 2px var(--bg-secondary);
}
#grasp-loc-btn.loc-pending::after { background: #ffd60a; }

/* 2026-10-01: five round header buttons (🔊 🎤 🌍 🖥️ 📺) squeezed into 28 px ovals on a
   390 px phone once the mini-screen button landed. Smaller circles stay circles. */
@media (max-width: 440px) {
    .chat-header button:not(.back-btn):not(.clear-thread-btn) {
        width: 34px !important; height: 34px !important; font-size: 15px !important; flex: none;
    }
}