/* ─── Self-hosted fonts (offline-first PWA) ─── */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/lora.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/lora-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/dmmono-400.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/dmmono-500.woff2') format('woff2');
}

/* ─── CSS Variables — authoritative soft-paper token set (Memory Gateway aesthetic) ─── */
:root {
    /* Claude-inspired palette: neutral UI, clay reserved for tiny brand moments */
    --accent: #4D4C48;
    --accent-light: #141413;
    --accent-dim: rgba(20, 20, 19, 0.07);
    --brand-accent: #D97757;
    --brand-accent-dim: rgba(217, 119, 87, 0.12);
    --control-fill: #141413;
    --control-on-fill: #FAF9F5;

    /* warm parchment surface ladder */
    --bg: #F7F6F2;
    --bg2: #EFEEE9;
    --bg3: #E8E6DC;
    --surface: #FAF9F5;
    --surface2: #EFEEE9;

    /* warm ink hierarchy */
    --text: #141413;
    --text2: #3D3D3A;
    --text3: #73726C;

    --border: #D8D6CE;
    --shadow: rgba(20, 20, 19, 0.08);

    /* shared by chat long-press, composer tools, model picker and conversation settings */
    --chat-float-surface: color-mix(in srgb, var(--surface) 58%, transparent);
    --chat-float-active: color-mix(in srgb, var(--accent) 9%, transparent);
    --chat-float-field: color-mix(in srgb, var(--surface) 42%, transparent);
    --chat-float-blur: blur(18px) saturate(108%);
    --chat-float-radius: 22px;

    /* chat bubbles — 信笺留白式: AI 透明直排纸上, 用户气泡纸色描边 */
    --bubble-user: var(--surface2);
    --bubble-user-text: var(--text);
    --bubble-ai: transparent;
    --bubble-ai-text: var(--text);

    --nav-h: 56px;
    --bottom-h: 64px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    /* paper/card alias layer (formerly a separate :root generation) */
    --paper: var(--bg);
    --paper-deep: var(--bg2);
    --card: var(--surface);
    --card-soft: var(--surface2);
    --line-soft: var(--border);
    --shadow-soft: none;
    --shadow-card: none;
    --radius-card: 12px;
    --radius-bubble: 16px;

    /* type */
    --font-display: 'Lora', 'Noto Serif SC', Georgia, 'Songti SC', serif;
    --font-body: 'Lora', 'Noto Serif SC', Georgia, 'Songti SC', serif;
    --font-mono: 'DM Mono', 'Courier New', monospace;

    --transition: 160ms ease;

    /* 字体大小（运行时由 JS 控制） */
    --font-size: 14px;
}

[data-theme="dark"] {
    /* light neutral controls; clay remains a small brand detail */
    --accent: #D0CEC5;
    --accent-light: #FAF9F5;
    --accent-dim: rgba(232, 230, 220, 0.10);
    --brand-accent: #E28B6E;
    --brand-accent-dim: rgba(226, 139, 110, 0.14);
    --control-fill: #E8E6DC;
    --control-on-fill: #141413;

    /* warm charcoal surfaces */
    --bg: #1F1E1D;
    --bg2: #292826;
    --bg3: #343330;
    --surface: #252422;
    --surface2: #2E2D2A;

    /* parchment ink on charcoal */
    --text: #EEECE4;
    --text2: #C2C0B6;
    --text3: #8E8C85;

    --border: rgba(232, 230, 220, 0.13);
    --shadow: rgba(0, 0, 0, 0.35);

    /* chat bubbles — 信笺留白式 (dark): AI 透明直排, 用户气泡表面色描边 */
    --bubble-user: var(--surface2);
    --bubble-user-text: var(--text);
    --bubble-ai: transparent;
    --bubble-ai-text: var(--text);

    /* paper/card alias layer */
    --paper: var(--bg);
    --paper-deep: var(--bg2);
    --card: var(--surface);
    --card-soft: var(--surface2);
    --line-soft: var(--border);
    --shadow-soft: none;
    --shadow-card: none;
}

/* ─── Reset ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
}

body:not(.app-ready) #app,
body:not(.app-ready) .sidebar-overlay,
body:not(.app-ready) .clawd,
body:not(.app-ready) .music-mini-player,
body:not(.app-ready) #effect-layer {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.startup-loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 28px;
    overflow: hidden;
    color: var(--accent);
    background: var(--bg);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s ease, background .2s ease;
}

.startup-loader-mark {
    width: var(--entry-poke-size, 62px);
    height: var(--entry-poke-size, 62px);
    display: grid;
    place-items: center;
    transform-origin: center;
    animation: startupMarkBreathe 1.65s ease-in-out infinite;
}

.startup-loader-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 7px 16px color-mix(in srgb, var(--shadow) 45%, transparent));
    transition: opacity .16s ease;
}

.startup-loader-mark img.is-ready {
    opacity: 1;
}

.startup-ecg {
    width: min(232px, 62vw);
    height: 36px;
    overflow: visible;
}

.startup-ecg path {
    vector-effect: non-scaling-stroke;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.6;
}

.startup-ecg-base {
    stroke: color-mix(in srgb, var(--accent) 18%, transparent);
}

.startup-ecg-flow {
    stroke: var(--accent);
    stroke-dasharray: 52 208;
    stroke-dashoffset: 52;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 38%, transparent));
    animation: startupEcgFlow 1.45s linear infinite;
}

.startup-loader.finishing .startup-loader-mark {
    animation: startupMarkFinish .38s cubic-bezier(.2, 1.45, .4, 1) both;
}

.startup-loader.finishing .startup-ecg {
    opacity: 0;
    transform: scaleX(.86);
    transition: opacity .2s ease, transform .28s ease;
}

body.app-ready #app,
body.app-ready .sidebar-overlay,
body.app-ready .clawd,
body.app-ready .music-mini-player,
body.app-ready #effect-layer {
    transition: opacity .3s ease;
}

body.app-ready .startup-loader {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@keyframes startupMarkBreathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.035); }
}

@keyframes startupMarkFinish {
    0% { transform: scale(1); }
    55% { transform: scale(.9); }
    100% { transform: scale(1.08); }
}

@keyframes startupEcgFlow {
    to { stroke-dashoffset: -208; }
}

@media (prefers-reduced-motion: reduce) {
    .startup-loader-mark,
    .startup-ecg-flow {
        animation: none;
    }

    .startup-ecg-flow {
        opacity: .72;
    }
}

button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
input,
textarea {
    font-family: inherit;
    outline: none;
    border: none;
    background: none;
}
ul,
li {
    list-style: none;
}

/* ─── App Shell ─── */
#app {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
    max-height: none;
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}

body.chat-keyboard-open #app {
    top: var(--app-top, 0px);
    bottom: auto;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
}

/* ─── Pages ─── */
.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Keep the outgoing page visible until its fade finishes. */
    transition: opacity .22s ease, visibility 0s linear .22s;
}
.page.active {
    z-index: 10;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
    .page { transition: none; }
}

/* ─── Top Nav ─── */
.topbar {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
    position: relative;
    padding-top: env(safe-area-inset-top, 0px);
}
.topbar-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.topbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 20px;
    transition: background var(--transition);
    flex-shrink: 0;
}
.topbar-btn:active {
    background: var(--accent-dim);
}
.topbar-right {
    margin-left: auto;
}

/* ─── Scrollable Content ─── */
.scroll-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.scroll-area::-webkit-scrollbar {
    display: none;
}

/* ════════════════════════════════
   PAGE 1 — CONVERSATION LIST
════════════════════════════════ */

.search-bar {
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg2);
    border-radius: var(--radius-lg);
    padding: 8px 14px;
}
.search-inner svg {
    color: var(--text3);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.search-inner input {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    background: transparent;
}
.search-inner input::placeholder {
    color: var(--text3);
}

.conv-list {
    padding: 6px 0;
}

/* ─── 对话项侧滑 ─── */
.conv-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.conv-item-content {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    background: var(--bg);
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.conv-item.pinned .conv-item-content {
    background: var(--bg2);
}
.conv-item-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    z-index: 0;
}
.conv-action-btn {
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: opacity 0.15s;
    user-select: none;
    padding: 0 4px;
    text-align: center;
}
.conv-action-btn:active {
    opacity: 0.7;
}
.conv-action-pin {
    background: var(--accent);
}
.conv-action-archive {
    background: #6A9FB5;
}
.conv-action-move {
    background: #7E6AA8;
}

.conv-pin-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    top: 14px;
    right: 12px;
    flex-shrink: 0;
}

.conv-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
}
.conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conv-info {
    flex: 1;
    min-width: 0;
}
.conv-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.conv-preview {
    font-size: 13px;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time {
    font-size: 11px;
    color: var(--text3);
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 2px;
}

.conv-divider {
    height: 1px;
    background: var(--border);
    margin: 0 16px 0 76px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 32px;
    gap: 12px;
}
.empty-state svg {
    color: var(--text3);
    opacity: 0.4;
    width: 48px;
    height: 48px;
}
.empty-state p {
    color: var(--text3);
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
}

#empty-state.conversation-empty {
    min-height: min(58vh, 520px);
    justify-content: center;
    padding: 40px 28px 72px;
    gap: 0;
}
.conversation-empty-logo-button {
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    animation: conversation-empty-arrive 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.conversation-empty-logo {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(91, 55, 38, 0.10));
    pointer-events: none;
}
.conversation-empty-logo-button:active {
    transform: scale(0.88) rotate(-7deg);
}
.conversation-empty-logo-button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.conversation-empty-logo-button.is-poked {
    animation: conversation-empty-poke 0.46s cubic-bezier(0.2, 0.9, 0.25, 1);
}
#empty-state .conversation-empty-greeting {
    max-width: 300px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.35;
}
#empty-state .conversation-empty-hint {
    margin-top: 9px;
    color: var(--text3);
    font-size: 13px;
    line-height: 1.5;
}
#empty-state.search-empty .conversation-empty-logo-button {
    width: 56px;
    height: 56px;
    margin-bottom: 10px;
}
#empty-state.search-empty .conversation-empty-logo {
    width: 46px;
    height: 46px;
    opacity: 0.55;
    filter: none;
}
@keyframes conversation-empty-arrive {
    from { opacity: 0; transform: scale(0.88) rotate(-5deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes conversation-empty-poke {
    0% { transform: scale(1) rotate(0); }
    32% { transform: scale(0.78, 0.9) rotate(-10deg); }
    68% { transform: scale(1.08, 0.96) rotate(7deg); }
    100% { transform: scale(1) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .conversation-empty-logo-button,
    .conversation-empty-logo-button.is-poked { animation: none; }
}

/* ─── 侧边栏 ─── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--bg);
    z-index: 51;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px var(--shadow);
}
.sidebar-overlay.open .sidebar {
    transform: translateX(0);
}

.sidebar-header {
    padding: 60px 20px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}
.sidebar-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.sidebar-subtitle {
    font-size: 12px;
    color: var(--text3);
    margin-top: 4px;
}

.sidebar-dock-toggle {
    display: none;
}
.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 16px 20px 8px;
    flex-shrink: 0;
}
.sidebar-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}
.sidebar-list::-webkit-scrollbar {
    display: none;
}
.sidebar-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
.sidebar-main::-webkit-scrollbar {
    display: none;
}
.sidebar-list.compact {
    flex: 0 0 auto;
    overflow: hidden;
    padding-bottom: 4px;
}
.sidebar-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.sidebar-section-toggle span:last-child {
    font-size: 13px;
    transition: transform var(--transition);
}
.sidebar-section-toggle.open span:last-child {
    transform: rotate(90deg);
}
.sidebar-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-collapse.open {
    max-height: 360px;
}
#sidebar-archive-collapse.open {
    max-height: none;
    overflow: visible;
}
.sidebar-assistant-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
}
.sidebar-current-body {
    flex: 1;
    min-width: 0;
}
.sidebar-current-label {
    font-size: 11px;
    color: var(--text3);
}
.sidebar-current-name {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-mini-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-user-card {
    margin: 10px 14px 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg2);
    cursor: pointer;
}
.sidebar-user-card:active {
    opacity: 0.75;
}
.sidebar-user-meta {
    flex: 1;
    min-width: 0;
}
.sidebar-user-title {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-subtitle {
    font-size: 11px;
    color: var(--text3);
    margin-top: 2px;
}
.sidebar-conv-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.sidebar-conv-item:active {
    background: var(--bg2);
}
.sidebar-conv-name {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-conv-unarchive {
    font-size: 11px;
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-conv-unarchive:active {
    background: var(--accent-dim);
}
.sidebar-conv-item.active {
    background: var(--accent-dim);
}
.sidebar-empty {
    padding: 32px 20px;
    font-size: 13px;
    color: var(--text3);
    text-align: center;
}

/* ════════════════════════════════
   PAGE 2 — CHAT
════════════════════════════════ */

#page-wordcards>.topbar,
#page-chat>.topbar {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}
#page-chat.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}
#page-wordcards>.topbar>*,
#page-chat>.topbar>* {
    pointer-events: auto;
}
#page-wordcards>.topbar .topbar-title,
#page-chat>.topbar .topbar-title {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 8px;
    font-size: 15px;
    color: var(--text2);
    max-width: 34%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-model-btn {
    max-width: 112px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--accent);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: none;
}
.chat-model-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-model-btn svg {
    flex-shrink: 0;
}
	        .model-sheet-scroll {
	            max-height: none;
	            flex: 1;
	            overflow-y: auto;
	            -webkit-overflow-scrolling: touch;
	            padding-right: 2px;
	        }
.model-sheet-scroll::-webkit-scrollbar {
    display: none;
}
.model-provider-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 8px;
}
.model-provider-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}
.model-provider-head span:last-child {
    color: var(--text3);
    font-size: 12px;
}
.model-provider-models {
    display: none;
    border-top: 1px solid var(--border);
    padding: 6px;
    max-height: min(46vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.model-provider-models::-webkit-scrollbar {
    display: none;
}
.model-provider-group.open .model-provider-models {
    display: block;
}
.model-option-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-align: left;
}
.model-option-row.active {
    background: var(--accent-dim);
    color: var(--accent);
}
.model-option-row small {
    color: var(--text3);
    font-size: 11px;
}
.provider-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    background: var(--surface);
    margin-bottom: 10px;
}
.provider-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.provider-card-head .edit-sheet-input {
    min-width: 0;
}
.provider-model-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.provider-action-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.tiny-btn {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    color: var(--accent);
    font-size: 12px;
    flex-shrink: 0;
}
.tiny-btn.danger {
    color: #D94040;
}
.memory-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.memory-item {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text2);
    white-space: pre-wrap;
    word-break: break-word;
}
.assistant-memory-manager {
    margin-top: 12px;
}
.assistant-memory-manager-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}
.assistant-memory-add {
    padding: 6px 10px;
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-deep) 62%, transparent);
    color: var(--accent);
    font-size: 12px;
}
.assistant-memory-add:active {
    transform: scale(0.96);
}
.assistant-memory-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 8px 10px 12px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--card-soft) 88%, transparent);
    box-shadow: 0 3px 12px rgba(74, 45, 28, 0.045);
}
.assistant-memory-content {
    flex: 1;
    min-width: 0;
    color: var(--text2);
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.assistant-memory-actions {
    display: flex;
    flex-shrink: 0;
    gap: 2px;
}
.assistant-memory-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: var(--text3);
    font-size: 16px;
    line-height: 1;
}
.assistant-memory-icon:active {
    background: var(--accent-dim);
    color: var(--accent);
}
.assistant-memory-icon.danger {
    color: #B84C42;
}
.assistant-memory-empty {
    padding: 22px 10px;
    color: var(--text3);
    font-size: 12px;
    text-align: center;
}
#modal-memory-entry {
    z-index: 120;
}
#modal-memory-entry .memory-entry-sheet {
    width: min(480px, 100%);
    max-height: min(420px, 72dvh);
}
#modal-memory-entry .edit-sheet-content {
    flex: 0 0 auto;
    min-height: 156px;
    overflow: visible;
}
#modal-memory-entry .memory-entry-input {
    display: block;
    flex: none;
    width: 100%;
    height: 156px;
    min-height: 156px;
    max-height: 220px;
    resize: none;
}
#modal-memory-entry .edit-sheet-actions {
    margin-top: 16px;
}
.mention-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 11px;
    margin-right: 4px;
}

.typing-status {
    display: none;
    font-size: 12px;
    color: var(--text3);
    padding: 0 4px;
    animation: typingPulse 1.5s ease infinite;
    margin-left: 4px;
}
.typing-status.active {
    display: inline;
}
.reply-notice {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    width: min(440px, calc(100vw - 24px));
    transform: translate(-50%, -16px);
    opacity: 0;
    z-index: 320;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px var(--shadow);
    transition: opacity 0.18s ease, transform 0.18s ease;
    text-align: left;
}
.reply-notice.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.reply-notice-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.reply-notice-time {
    font-size: 11px;
    color: var(--text3);
}
.reply-notice-text {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text2);
}
@keyframes typingPulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(var(--nav-h) + 12px + env(safe-area-inset-top, 0px));
    transition: padding-bottom 0.2s ease;
    position: relative;
    z-index: 1;
}
.chat-messages::-webkit-scrollbar {
    display: none;
}

.date-stamp {
    text-align: center;
    font-size: 11px;
    color: var(--text3);
    padding: 8px 0;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.msg-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 100%;
}
.msg-row.user {
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
    align-self: flex-end;
}
.msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: calc(100% - 80px);
}
.msg-row.user .msg-body {
    align-items: flex-end;
}

.bubble {
    padding: 8px 12px;
    border-radius: var(--radius-bubble);
    font-size: var(--font-size, 14px);
    line-height: 1.55;
    word-break: break-word;
    position: relative;
}
.msg-row.ai .bubble {
    background: var(--bubble-ai);
    color: var(--bubble-ai-text);
    border-radius: var(--radius-bubble);
    box-shadow: none;
}
.msg-row.user .bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border: 1px solid var(--border);
    border-radius: var(--radius-bubble);
    box-shadow: none;
}
.msg-row.ai .action-line {
    margin: 6px 0;
    padding-left: 10px;
    font-size: 0.92em;
    line-height: 1.6;
    font-style: italic;
    color: var(--text3);
    opacity: 0.78;
    border-left: 2px solid var(--line-soft);
    word-break: break-word;
    max-width: 100%;
}

.bubble-time {
    font-size: calc(var(--font-size, 14px) - 4px);
    color: var(--text3);
    padding: 0 4px;
    align-self: flex-end;
}
.msg-row.user .bubble-time {
    align-self: flex-end;
}

/* ─── Thinking trace: inline expansion with a single conversation scroll ─── */
.thinking-trace {
    max-width: 100%;
    margin-bottom: 5px;
}

.thinking-trace-trigger {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 10px;
    color: var(--text3);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    line-height: 1;
    text-align: left;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.thinking-trace-trigger:hover,
.thinking-trace-trigger:focus-visible {
    color: var(--text2);
    background: var(--bg3);
}

.thinking-trace-trigger:active {
    transform: scale(.97);
}

.thinking-trace-icon {
    position: relative;
    width: 14px;
    height: 14px;
    flex: none;
    background: color-mix(in srgb, var(--accent) 18%, var(--bg3));
    border-radius: 50%;
}

.thinking-trace-icon::before {
    content: '';
    position: absolute;
    right: -2px;
    bottom: -1px;
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--accent) 12%, var(--bg3));
    border-radius: 50%;
}

.thinking-trace-label {
    min-width: 0;
    color: inherit;
    font-weight: 500;
}

.thinking-trace-meta {
    opacity: .68;
    font-variant-numeric: tabular-nums;
}

.thinking-trace-chevron {
    width: 12px;
    height: 12px;
    margin-left: 1px;
    opacity: .56;
    transition: transform var(--transition);
}

.thinking-trace.expanded .thinking-trace-chevron {
    transform: rotate(90deg);
}

.thinking-trace {
    width: fit-content;
    overflow: hidden;
    border-radius: 15px;
    transition: width .34s cubic-bezier(.22, 1, .36, 1), background var(--transition);
}

.thinking-trace.expanded {
    width: min(72vw, 560px);
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
}

.thinking-trace.expanded .thinking-trace-trigger {
    background: transparent;
    border-color: transparent;
}

.thinking-trace-detail {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    opacity: 0;
    transition: grid-template-rows .34s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}

.thinking-trace.expanded .thinking-trace-detail {
    grid-template-rows: 1fr;
    opacity: 1;
}

.thinking-trace-content {
    min-height: 0;
    overflow: hidden;
    color: var(--text2);
    font-size: 12px;
    line-height: 1.78;
    white-space: pre-wrap;
    word-break: break-word;
    touch-action: pan-y;
}

.thinking-trace.expanded .thinking-trace-content {
    overflow: visible;
    padding: 8px 12px 13px;
    user-select: text;
    cursor: text;
}

.thinking-live-spinner {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--text3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.thinking-live-label {
    font-weight: 500;
}
.thinking-live-timer {
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}


/* ─── Markdown 渲染样式 ─── */
.bubble.markdown-body h1,
.bubble.markdown-body h2,
.bubble.markdown-body h3 {
    font-family: var(--font-display);
    margin: 8px 0 4px;
    line-height: 1.35;
}
.bubble.markdown-body h1 {
    font-size: 17px;
}
.bubble.markdown-body h2 {
    font-size: 15px;
}
.bubble.markdown-body h3 {
    font-size: 14px;
}
.bubble.markdown-body p {
    margin: 4px 0;
}
.bubble.markdown-body ul,
.bubble.markdown-body ol {
    padding-left: 18px;
    margin: 4px 0;
}
.bubble.markdown-body li {
    margin: 2px 0;
    list-style: revert;
}
.bubble.markdown-body code {
    background: var(--bg2);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 12px;
}
.bubble.markdown-body pre {
    background: var(--bg2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    overflow-x: auto;
    margin: 6px 0;
    position: relative;
}
.bubble.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}
.bubble.markdown-body blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    margin: 6px 0;
    color: var(--text2);
}
.bubble.markdown-body a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-dim);
}
.bubble.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}
.bubble.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    margin: 6px 0;
}
.bubble.markdown-body th,
.bubble.markdown-body td {
    border: 1px solid var(--border);
    padding: 5px 8px;
    text-align: left;
}
.bubble.markdown-body th {
    background: var(--bg2);
    font-weight: 600;
}
.bubble.markdown-body img {
    max-width: 100%;
    border-radius: var(--radius-sm);
}

#page-chat #chat-messages .msg-row.sticker-segment-row .bubble.sticker-bubble {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    max-width: 160px;
}

#page-chat #chat-messages .msg-row.sticker-segment-row .bubble.sticker-bubble::after {
    display: none;
}

#page-chat .bubble.sticker-bubble .message-sticker {
    display: block;
    max-width: 120px;
    max-height: 160px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

.code-copy-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text3);
    background: var(--surface);
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.bubble.markdown-body pre:hover .code-copy-btn {
    opacity: 1;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 12px 14px;
}
.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text3);
    animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes typingBounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.staged-area {
    padding: 8px 12px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
}
.staged-bubble {
    align-self: flex-end;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 80%;
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 8px;
}
.staged-remove {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.message-files {
    display: grid;
    gap: 6px;
    min-width: min(260px, 66vw);
    margin-top: 7px;
}

.message-file {
    width: 100%;
    min-height: 48px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 11px;
}

.message-file-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--accent);
    background: var(--accent-dim);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 500;
    letter-spacing: -.02em;
}

.message-file-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.message-file-copy strong {
    overflow: hidden;
    color: var(--text2);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-file-copy small {
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.3;
}

.staged-file {
    width: min(100%, 320px);
    align-self: flex-end;
    background: var(--surface2);
}

.staged-file .staged-remove {
    position: static;
    color: var(--text3);
    background: color-mix(in srgb, var(--text3) 12%, transparent);
}

.staged-file .staged-remove:active {
    color: var(--accent);
    background: var(--accent-dim);
}

.attach-panel {
    max-height: 0;
    overflow: hidden;
    background: var(--bg);
    border-top: 1px solid var(--border);
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.attach-panel.open {
    max-height: 340px;
}

.attach-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 14px 16px;
}
.attach-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
}
.attach-menu-item:active {
    background: var(--bg2);
}
.attach-menu-item.disabled {
    opacity: 0.35;
    pointer-events: none;
}
.attach-menu-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.attach-menu-label {
    font-size: 11px;
    color: var(--text2);
    font-weight: 500;
}

.attach-sticker-view {
    display: none;
    flex-direction: column;
    height: 240px;
}
.attach-sticker-view.active {
    display: flex;
}
.attach-sticker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex-shrink: 0;
}
.attach-sticker-back {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: background var(--transition);
}
.attach-sticker-back:active {
    background: var(--accent-dim);
}
.attach-sticker-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.attach-sticker-grid {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: max-content;
    gap: 10px 6px;
    padding: 4px 12px 12px;
    align-content: start;
}
.attach-sticker-grid::-webkit-scrollbar {
    display: none;
}

.attach-sticker-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    min-width: 0;
    padding: 5px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg2);
    transition: transform 0.15s ease;
    position: relative;
}
.attach-sticker-item:active {
    transform: scale(0.92);
}
.attach-sticker-item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    flex: none;
    object-fit: contain;
}
.attach-sticker-item-label {
    display: block;
    width: 100%;
    font-size: 10px;
    line-height: 1.4;
    color: var(--text2);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attach-sticker-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text3);
}
.attach-sticker-grid:empty {
    display: none;
}

.input-plus {
    transition: background var(--transition), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.input-plus.active {
    transform: rotate(45deg);
    background: var(--accent-dim);
    color: var(--accent);
}

/* 权威定义: 居中纸感胶囊, 收敛自历史三代覆盖 */
.input-bar {
    width: min(820px, calc(100% - 24px));
    margin: 0 auto calc(12px + var(--safe-bottom));
    padding: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: flex-end;
    gap: 7px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 4;
    box-shadow: none;
}
.group-reply-targets {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-wrap: nowrap;
    overflow-x: auto;
    flex-shrink: 0;
}
.group-reply-targets.active {
    display: flex;
}
.group-reply-target-label {
    color: var(--text3);
    font-size: 12px;
    flex: 0 0 auto;
}
.group-reply-target-chip {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 10px;
    background: var(--bg2);
    color: var(--text2);
    border: 1px solid var(--border);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.group-reply-target-chip.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
}
.input-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    font-size: 20px;
    flex-shrink: 0;
    transition: background var(--transition);
    align-self: flex-end;
}
.input-plus:active {
    background: var(--accent-dim);
    color: var(--accent);
}

.input-wrap {
    flex: 1;
    background: transparent;
    border-radius: var(--radius-lg);
    border: 0;
    transition: border-color var(--transition);
    padding: 8px 10px;
    display: flex;
    align-items: flex-end;
    box-shadow: none;
}
.input-wrap:focus-within {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}
.input-wrap textarea {
    width: 100%;
    resize: none;
    font-size: var(--font-size, 14px);
    line-height: 1.5;
    color: var(--text);
    max-height: 120px;
    overflow-y: auto;
    background: transparent;
}
.input-wrap textarea::placeholder {
    color: var(--text3);
}
.input-wrap textarea::-webkit-scrollbar {
    display: none;
}

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    align-self: flex-end;
    transition: opacity var(--transition), transform var(--transition);
    opacity: 0.4;
    pointer-events: none;
}
.send-btn.ready {
    opacity: 1;
    pointer-events: auto;
}
.send-btn:active {
    transform: scale(0.92);
}
.send-btn svg {
    width: 16px;
    height: 16px;
}

/* ════════════════════════════════
   PAGE 3 — SETTINGS
════════════════════════════════ */

.settings-list {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-section {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 4px var(--shadow);
}
.settings-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 14px 16px 6px;
}
.settings-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
}
.settings-row:first-of-type {
    border-top: none;
}
.settings-row:active {
    background: var(--bg2);
}
.settings-row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.settings-row-label {
    flex: 1;
    font-size: 15px;
    color: var(--text);
}
.settings-row-value {
    font-size: 14px;
    color: var(--text3);
}
.settings-chevron {
    color: var(--text3);
}

.toggle {
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--bg3);
    position: relative;
    transition: background var(--transition);
    flex-shrink: 0;
}
.toggle.on {
    background: var(--accent);
}
.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition);
}
.toggle.on::after {
    transform: translateX(18px);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
	        .modal-sheet {
	            width: 100%;
	            max-width: 480px;
	            max-height: min(88vh, 720px);
	            margin: 0 auto;
	            background: var(--surface);
	            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	            padding: 24px 20px calc(24px + var(--safe-bottom));
	            transform: translateY(100%);
	            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	            display: flex;
	            flex-direction: column;
	            overflow: hidden;
	        }
.modal-overlay.show .modal-sheet {
    transform: translateY(0);
}

/* ─── NetEase account sheet ─── */
.music-login-sheet {
    max-width: 420px;
    gap: 0;
}
.music-login-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
}
.music-login-head span {
    color: var(--text3);
    font-size: 11px;
}
.music-login-head h2 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 650;
    margin: 3px 0 0;
}
.music-login-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--text2);
    display: grid;
    place-items: center;
}
.music-login-close svg {
    width: 17px;
    height: 17px;
}
.music-login-view {
    min-height: 285px;
}
.music-login-view[hidden] {
    display: none;
}
.music-login-account {
    min-height: 180px;
    align-content: center;
    gap: 22px;
}
.music-account-card {
    display: grid;
    justify-items: center;
    gap: 10px;
}
.music-account-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--text3);
    background: var(--bg2);
    border-radius: 50%;
    font-size: 22px;
}
.music-account-avatar img { width: 100%; height: 100%; object-fit: cover; }
.music-account-card strong { font-size: 14px; font-weight: 650; }
.music-login-qr-wrap {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin: 2px 0 18px;
}
.music-login-qr {
    width: 184px;
    aspect-ratio: 1;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(38, 31, 26, .08);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.music-login-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.music-login-note {
    color: #aaa39d;
    font-size: 13px;
    line-height: 1.55;
    text-align: center;
}
.music-login-status {
    min-height: 20px;
    color: var(--text2);
    font-size: 13px;
}
.music-login-status[data-state="scanned"] {
    color: #c45c3c;
}
.music-login-status[data-state="success"] {
    color: #398256;
}
.music-login-primary {
    background: #d85b3f;
}
.music-login-primary:disabled {
    opacity: .55;
}
.music-import-view {
    display: grid;
    gap: 12px;
    padding-bottom: 8px;
}
.music-search-form {
    display: grid;
    gap: 7px;
}
.music-search-form > label {
    color: var(--text3);
    font-size: 11px;
    font-weight: 650;
}
.music-search-form > div {
    position: relative;
}
.music-search-form .modal-input {
    width: 100%;
    padding-right: 46px;
}
.music-search-form button {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text2);
    background: var(--bg2);
    border: 0;
    border-radius: 10px;
}
.music-search-form button svg { width: 17px; height: 17px; }
.music-search-results {
    min-height: 76px;
    max-height: min(310px, 42vh);
    display: grid;
    align-content: start;
    gap: 4px;
    overflow-y: auto;
}
.music-search-empty {
    min-height: 76px;
    display: grid;
    place-items: center;
    color: var(--text3);
    font-size: 12px;
}
.music-search-result {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 7px;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 13px;
    text-align: left;
}
.music-search-result:active { background: var(--bg2); transform: scale(.99); }
.music-search-result-cover {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--text3);
    background: var(--bg2);
    border-radius: 10px;
}
.music-search-result-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-search-result-copy { min-width: 0; display: grid; gap: 3px; }
.music-search-result-copy strong,
.music-search-result-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-search-result-copy strong { font-size: 13px; font-weight: 650; }
.music-search-result-copy small { color: var(--text3); font-size: 11px; }
.music-search-result > em { color: var(--text3); font-size: 16px; font-style: normal; }
.music-search-login {
    justify-self: center;
    padding: 5px 8px;
    color: var(--text3);
    background: transparent;
    border: 0;
    font-size: 11px;
}
.music-local-import {
    padding-top: 5px;
    border-top: 1px solid var(--border);
}
.music-local-import summary {
    padding: 7px 2px 11px;
    color: var(--text3);
    cursor: pointer;
    font-size: 11px;
    list-style: none;
    text-align: center;
}
.music-local-import summary::-webkit-details-marker { display: none; }
.music-local-import[open] { display: grid; gap: 10px; }
.music-import-picker { width: 100%; }
.music-import-status {
    min-height: 18px;
    overflow: hidden;
    color: var(--text3);
    font-size: 12px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-login-fallback {
    margin-top: 15px;
    color: var(--text3);
    font-size: 12px;
}
.music-login-fallback summary {
    cursor: pointer;
    list-style: none;
    padding: 8px 2px;
    text-align: center;
}
.music-login-fallback summary::-webkit-details-marker {
    display: none;
}
.music-login-fallback p {
    line-height: 1.55;
    margin: 8px 0 10px;
}
.music-login-fallback .modal-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}
.music-login-profile {
    display: grid;
    justify-items: center;
    margin: 18px 0 34px;
}
.music-login-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--bg2);
    box-shadow: 0 10px 28px rgba(38, 31, 26, .1);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    overflow: hidden;
}
.music-login-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.music-login-profile > span {
    color: #398256;
    font-size: 12px;
    margin-bottom: 4px;
}
.music-login-profile strong {
    color: var(--text);
    font-size: 18px;
}
.modal-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg3);
    margin: 0 auto 20px;
}
	        .modal-title {
	            font-family: var(--font-display);
	            font-size: 18px;
	            font-weight: 600;
	            color: var(--text);
	            margin-bottom: 16px;
	            flex-shrink: 0;
	        }
.modal-input {
    width: 100%;
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text);
    transition: border-color var(--transition);
    margin-bottom: 12px;
}
.modal-input:focus {
    border-color: var(--accent);
}
.modal-input::placeholder {
    color: var(--text3);
}
.modal-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: opacity var(--transition);
}
.modal-btn:active {
    opacity: 0.85;
}

.format-picker {
    display: flex;
    width: 100%;
    background: var(--bg2);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 3px;
}
.format-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: 13px;
    font-weight: 500;
    color: var(--text3);
    transition: background var(--transition), color var(--transition);
}
.format-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px var(--shadow);
}

.settings-field-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
    border-top: 1px solid var(--border);
}
.field-label {
    font-size: 13px;
    color: var(--text2);
    flex-shrink: 0;
    width: 72px;
}
.field-input {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    transition: border-color var(--transition);
}
.field-input:focus {
    border-color: var(--accent);
}
.field-input::placeholder {
    color: var(--text3);
}
.field-textarea {
    width: 100%;
    font-size: 13px;
    color: var(--text);
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.5;
    transition: border-color var(--transition);
}
.field-textarea:focus {
    border-color: var(--accent);
}
.field-textarea::placeholder {
    color: var(--text3);
}

.save-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: opacity var(--transition);
    margin-top: 4px;
}
.save-btn:active {
    opacity: 0.85;
}

.ctx-menu {
    position: fixed;
    z-index: 95;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px var(--shadow), 0 0 0 1px var(--border);
    min-width: 140px;
    overflow: hidden;
    transform-origin: top center;
    animation: ctxPop 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
@keyframes ctxPop {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.ctx-menu-item {
    padding: 12px 18px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s;
}
.ctx-menu-item:last-child {
    border-bottom: none;
}
.ctx-menu-item:active {
    background: var(--bg2);
}
.ctx-menu-item.danger {
    color: #D94040;
}
.ctx-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 94;
}

.tool-log-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.tool-log {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 4px 14px;
    border-radius: 12px;
    user-select: none;
}
.tool-log-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--text3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.tool-log-icon {
    font-size: 13px;
}
@keyframes toolLogFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tool-log-row {
    animation: toolLogFade 0.2s ease;
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.bubble {
    animation: bubbleIn 0.18s ease-out;
}

#page-wordcards .chat-messages,
#page-chat .chat-messages {
    background: transparent;
    transition: background var(--transition);
}

.edit-section-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    background: var(--bg2);
    flex-shrink: 0;
}

#assistant-section-nav,
#conv-section-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.edit-section-tab {
    min-width: 0;
    padding: 8px 6px;
    border-radius: calc(var(--radius-md) - 2px);
    color: var(--text3);
    font-size: 13px;
    font-weight: 500;
    transition: background var(--transition), color var(--transition), box-shadow var(--transition);
}

.edit-section-tab.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px var(--shadow);
}

.edit-sheet-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.edit-sheet-content::-webkit-scrollbar {
    display: none;
}

.assistant-edit-content,
.conv-edit-content {
    flex: 1;
}

.assistant-edit-section,
.conv-edit-section {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.assistant-edit-section.active,
.conv-edit-section.active {
    display: flex;
}

.assistant-temperature-card {
    padding: 13px 14px 11px;
    background: color-mix(in srgb, var(--surface2) 58%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 12px;
}

.assistant-temperature-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 44px;
    align-items: center;
    gap: 10px;
}

.assistant-temperature-head > div {
    min-width: 0;
}

.assistant-temperature-head strong,
.assistant-temperature-head small {
    display: block;
}

.assistant-temperature-head strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 500;
}

.assistant-temperature-head small {
    margin-top: 3px;
    color: var(--text3);
    font-size: 9px;
    line-height: 1.4;
}

.assistant-temperature-head output {
    color: var(--text2);
    font-family: var(--font-mono);
    font-size: 9px;
    white-space: nowrap;
}

.assistant-temperature-control {
    margin-top: 12px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: var(--text3);
    font-size: 8px;
    transition: opacity var(--transition);
}

.assistant-temperature-control.disabled {
    opacity: .36;
}

.assistant-temperature-control input {
    width: 100%;
    accent-color: var(--brand-accent);
}

.assistant-temperature-card > p {
    margin-top: 8px;
    color: var(--text3);
    font-size: 8px;
    line-height: 1.5;
}

.settings-page-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(868px, calc(100% - 32px));
    margin: 10px auto 0;
}

.settings-edit-section {
    display: none;
    flex-direction: column;
    gap: 12px;
}

.settings-edit-section.active {
    display: flex;
}

.settings-page-actions {
    width: min(868px, calc(100% - 32px));
    margin: 0 auto;
    padding: 8px 0 10px;
    flex-shrink: 0;
}

.settings-page-actions .save-btn {
    margin: 0;
}

.edit-sheet-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-sheet-label {
    font-size: 12px;
    color: var(--text2);
    font-weight: 500;
}

.edit-sheet-input,
.edit-sheet-textarea {
    width: 100%;
    background: var(--bg2);
    color: var(--text);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    padding: 11px 12px;
    font-size: 14px;
    transition: border-color var(--transition);
}

.conv-proactive-card {
    padding: 13px 14px;
    background: color-mix(in srgb, var(--surface2) 58%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 12px;
}

.conv-proactive-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.conv-proactive-switch strong,
.conv-proactive-switch small {
    display: block;
}

.conv-proactive-switch strong {
    font-size: 13px;
    color: var(--text);
}

.conv-proactive-switch small,
.conv-proactive-options p {
    margin-top: 3px;
    color: var(--text3);
    font-size: 10px;
    line-height: 1.45;
}

.conv-proactive-switch input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex: 0 0 auto;
}

.conv-proactive-options {
    display: none;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.conv-proactive-card.enabled .conv-proactive-options {
    display: grid;
}

.conv-proactive-options > label {
    color: var(--text2);
    font-size: 11px;
}

.conv-proactive-minutes {
    display: flex;
    align-items: center;
    gap: 8px;
}

.conv-proactive-minutes input {
    max-width: 110px;
}

.conv-proactive-minutes span {
    color: var(--text2);
    font-size: 12px;
}

.sidebar-recent-kind.proactive {
    color: var(--accent);
    background: var(--accent-dim);
}

.edit-sheet-input:focus,
.edit-sheet-textarea:focus {
    border-color: var(--accent);
}

.edit-sheet-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

.edit-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    flex-shrink: 0;
}

.assistant-edit-actions,
.conv-edit-actions {
    margin-top: 12px;
}

.assistant-delete-btn,
.conv-delete-btn {
    margin-top: 10px;
}

.edit-sheet-actions .modal-btn {
    flex: 1;
}

.modal-btn.secondary {
    background: var(--bg2);
    color: var(--text2);
}

.modal-btn.danger {
    background: transparent;
    color: #D94040;
    border: 1.5px solid #D94040;
}

.conv-icon-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.conv-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-preview {
    width: 100%;
    height: 92px;
    border-radius: var(--radius-md);
    background: var(--bg2);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.gallery-edit-preview {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--bg2);
}

.tools-board {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 24px;
}
.tools-board::-webkit-scrollbar {
    display: none;
}
.tools-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 8px 4px 10px;
}
.tool-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}
.tool-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.tool-card-info {
    flex: 1;
    min-width: 0;
}
.tool-card-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}
.tool-card-desc {
    font-size: 12px;
    color: var(--text3);
    margin-top: 2px;
}
.tool-card-funcs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.tool-func-tag {
    font-size: 10px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 7px;
    border-radius: 6px;
}
.tool-card-meta {
    font-size: 11px;
    color: var(--text3);
    margin-top: 4px;
}
.tool-card-manage {
    font-size: 11px;
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--accent-dim);
    cursor: pointer;
    transition: background 0.12s;
}
.tool-card-manage:active {
    background: var(--bg3);
}

.voice-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-dim);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    cursor: pointer;
    margin: 4px 0;
    transition: background 0.15s ease;
    max-width: 200px;
}
.voice-msg:active {
    opacity: 0.8;
}
.voice-msg-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.voice-msg-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    flex: 1;
}
.voice-msg-bars span {
    width: 3px;
    background: var(--accent);
    border-radius: 1.5px;
    transition: height 0.12s ease;
}
.voice-msg.playing .voice-msg-bars span {
    animation: vWave 0.6s ease-in-out infinite alternate;
}
.voice-msg.playing .voice-msg-bars span:nth-child(2n) {
    animation-delay: 0.15s;
}
.voice-msg.playing .voice-msg-bars span:nth-child(3n) {
    animation-delay: 0.3s;
}
@keyframes vWave {
    0% {
        height: 4px;
    }
    100% {
        height: 18px;
    }
}
.voice-msg-dur {
    font-size: 11px;
    color: var(--text3);
    flex-shrink: 0;
}

.load-more-btn {
    text-align: center;
    font-size: 12px;
    color: var(--accent);
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.load-more-btn:active {
    opacity: 0.6;
}

.tickle-row {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}
.tickle-text {
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}
@keyframes headShake {
    0% {
        transform: rotate(0);
    }
    15% {
        transform: rotate(-12deg) scale(1.1);
    }
    30% {
        transform: rotate(10deg) scale(1.15);
    }
    45% {
        transform: rotate(-8deg) scale(1.1);
    }
    60% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(0);
    }
}
.msg-avatar.shaking {
    animation: headShake 0.6s ease;
}

.chat-search-bar {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 6;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    pointer-events: none;
    box-shadow: 0 5px 16px rgba(26, 19, 16, 0.06);
}
.chat-search-bar.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.chat-search-bar input {
    min-width: 0;
    font-size: 14px;
    color: var(--text);
    background: var(--bg2);
    border-radius: var(--radius-md);
    padding: 9px 11px;
    border: 1.5px solid transparent;
    transition: border-color var(--transition);
}
.chat-search-bar input:focus {
    border-color: var(--accent);
}
.chat-search-bar input::placeholder {
    color: var(--text3);
}
.chat-search-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--text3);
    white-space: nowrap;
    min-width: 94px;
    justify-content: flex-end;
}
.chat-search-nav button {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.chat-search-nav button:active {
    background: var(--accent-dim);
}
.chat-search-close {
    width: 40px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    font-size: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-search-close:active {
    background: var(--bg2);
}
@media (max-width: 360px) {
    .chat-search-bar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .chat-search-nav {
        grid-column: 1 / -1;
        justify-content: space-between;
        min-width: 0;
    }
}

/* ─── Composer-first home and Clawd navigation ─── */
#page-list > .topbar {
    display: none;
}

#page-list > .scroll-area {
    padding: max(38px, calc(env(safe-area-inset-top, 0px) + 24px)) 0 110px;
    scroll-padding-bottom: 110px;
}

.home-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 13px;
    padding: 2vh 24px 22px;
    text-align: center;
}

.home-intro .conversation-empty-logo-button {
    width: var(--entry-poke-size, 62px);
    height: var(--entry-poke-size, 62px);
    margin: 0;
}

.home-intro .conversation-empty-logo {
    width: calc(var(--entry-poke-size, 62px) * .94);
    height: calc(var(--entry-poke-size, 62px) * .94);
}

.home-greeting {
    min-height: 32px;
    color: var(--text);
    font-family: var(--greeting-font, var(--font-display));
    font-size: var(--greeting-font-size, 27px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

:root,
[data-greeting-font="interface"] {
    --greeting-font: var(--font-display);
}

[data-greeting-font="rounded"] {
    --greeting-font: ui-rounded, "SF Pro Rounded", "PingFang SC", system-ui, sans-serif;
}

[data-greeting-font="serif"] {
    --greeting-font: "Songti SC", "STSong", Georgia, serif;
}

[data-greeting-font="kai"] {
    --greeting-font: "Kaiti SC", "STKaiti", KaiTi, cursive;
}

[data-greeting-font="custom"] {
    --greeting-font: "CustomUserFont", var(--font-display);
}

.home-composer {
    position: relative;
    width: calc(100% - 32px);
    min-height: 116px;
    margin: 0 16px 28px;
    padding: 17px 52px 48px 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--border) 86%, var(--text3));
    border-radius: 20px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 46%, transparent),
                0 1px 0 rgba(255, 255, 255, .68) inset;
    transition: opacity .22s ease, transform .22s ease, box-shadow var(--transition);
}

.home-composer:focus-within {
    box-shadow: 0 13px 34px color-mix(in srgb, var(--shadow) 58%, transparent),
                0 1px 0 rgba(255, 255, 255, .72) inset;
}

.home-composer.sending {
    opacity: 0;
    transform: translateY(-8px) scale(.985);
    pointer-events: none;
}

#home-message-input {
    display: block;
    width: 100%;
    min-height: 48px;
    max-height: 150px;
    resize: none;
    overflow-y: auto;
    color: var(--text);
    font-size: 16px;
    line-height: 1.55;
}

#home-message-input::placeholder {
    color: var(--text3);
}

.home-image-preview {
    display: flex;
    gap: 8px;
    margin: 0 0 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.home-image-preview[hidden] { display: none; }
.home-image-preview::-webkit-scrollbar { display: none; }

.home-image-item {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
}

.home-image-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.home-image-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: #fff;
    background: rgba(24, 24, 24, .72);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
}

.home-attach-btn {
    position: absolute;
    left: 13px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--text2);
    border-radius: 50%;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.home-attach-btn:active {
    color: var(--text);
    background: var(--surface2);
    transform: scale(.92);
}

.home-send-btn {
    position: absolute;
    right: 13px;
    bottom: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--surface);
    background: var(--text3);
    border-radius: 50%;
    opacity: .36;
    transform: scale(.92);
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition), background var(--transition);
}

.home-send-btn.ready {
    color: var(--surface);
    background: var(--text);
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.home-send-btn.ready:active {
    transform: scale(.92);
}

#page-list .conv-list {
    padding: 0 12px 24px;
}

#page-list .conversation-empty {
    min-height: 0;
    padding: 8px 24px 28px;
}

#page-list .conversation-empty-hint {
    color: var(--text3);
    font-size: 13px;
}

.clawd {
    --clawd-direction: 1;
    position: fixed;
    z-index: 70;
    width: 62px;
    height: 50px;
    transition: top 1.1s ease, left .14s linear, right .24s ease, bottom .24s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.clawd *,
.clawd-character {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.clawd.keyboard-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.clawd.docked {
    top: auto !important;
    left: auto !important;
    right: max(14px, calc((100vw - 480px) / 2 + 14px));
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
}

.clawd.drag-positioned {
    top: var(--clawd-y) !important;
    left: var(--clawd-x) !important;
    right: auto;
    bottom: auto;
}

.clawd.dragging {
    transition: none;
    cursor: grabbing;
}

.clawd-character {
    position: absolute;
    inset: 0;
    width: 62px;
    height: 50px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    filter: drop-shadow(0 3px 4px rgba(57, 31, 20, .16));
    transition: transform .18s ease, filter .18s ease;
    cursor: grab;
}

.clawd-character:active {
    transform: scale(.9);
}

.clawd.edge-tucked[data-edge="left"] .clawd-character {
    clip-path: inset(0 0 0 min(50%, calc(100% - 24px)));
}

.clawd.edge-tucked[data-edge="right"] .clawd-character {
    clip-path: inset(0 min(50%, calc(100% - 24px)) 0 0);
}

body.clawd-edge-left .sidebar-swipe-edge {
    clip-path: polygon(0 0, 100% 0, 100% var(--clawd-edge-top), 0 var(--clawd-edge-top), 0 var(--clawd-edge-bottom), 100% var(--clawd-edge-bottom), 100% 100%, 0 100%);
}

body.clawd-edge-left .sidebar-dock-toggle {
    --pet-top: calc(var(--clawd-edge-top) - 50vh + 24px);
    --pet-bottom: calc(var(--clawd-edge-bottom) - 50vh + 24px);
    clip-path: polygon(0 0, 100% 0, 100% var(--pet-top), 0 var(--pet-top), 0 var(--pet-bottom), 100% var(--pet-bottom), 100% 100%, 0 100%);
}

.clawd-theme-toggle {
    position: absolute;
    top: -54px;
    left: 9px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--bg3);
    background: var(--bg);
    color: var(--text);
    box-shadow: 0 4px 16px rgba(48, 38, 31, .16);
    cursor: pointer;
}

.clawd-theme-toggle[hidden] { display: none; }
.clawd-theme-toggle svg { grid-area: 1 / 1; width: 20px; height: 20px; }
.clawd-theme-sun { display: none; }
[data-theme="dark"] .clawd-theme-moon { display: none; }
[data-theme="dark"] .clawd-theme-sun { display: block; }
.clawd-theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.clawd-svg {
    width: 58px;
    height: 46px;
    transform: scaleX(var(--clawd-direction));
    transform-origin: center;
    overflow: visible;
}

.clawd-companion {
    display: none;
}

html:not([data-floating-companion]) .clawd-companion-crab,
html[data-floating-companion="crab"] .clawd-companion-crab,
html[data-floating-companion="dog"] .clawd-companion-dog {
    display: inline;
}

.clawd-body > rect,
.clawd-hand,
.clawd-leg {
    fill: #DD775B;
}

.clawd-eyes rect {
    fill: #17110F;
}

.clawd-dog-fur {
    fill: #C58A5C;
}

.clawd-dog-dark {
    fill: #A96943;
}

.clawd-dog-muzzle {
    fill: #E6C39D;
}

.clawd-dog-feature {
    fill: #31241E;
}

.clawd-dog-bell {
    fill: #E2AA3A;
}

.clawd-leg,
.clawd-dog-leg {
    transform-box: fill-box;
    transform-origin: top center;
    transition: transform .12s ease;
}

.clawd-svg.step-alt .clawd-leg-1,
.clawd-svg.step-alt .clawd-leg-3 {
    transform: rotate(7deg) scaleY(.9);
}

.clawd-svg.step-alt .clawd-leg-2,
.clawd-svg.step-alt .clawd-leg-4 {
    transform: rotate(-7deg) scaleY(1.08);
}

.clawd-svg.step-alt .clawd-dog-leg-1,
.clawd-svg.step-alt .clawd-dog-leg-3 {
    transform: translateY(3px) scaleY(.88);
}

.clawd-svg.step-alt .clawd-dog-leg-2,
.clawd-svg.step-alt .clawd-dog-leg-4 {
    transform: translateY(-2px) scaleY(1.08);
}

.clawd-svg.step-alt .clawd-dog-tail {
    transform: translateY(-2px) rotate(-5deg);
}

.clawd-stage,
.clawd-body,
.clawd-hand,
.clawd-companion-dog,
.clawd-dog-body,
.clawd-dog-head,
.clawd-dog-tail,
.clawd-flag,
.clawd-flag-cloth,
.clawd-dog-mouth-flag,
.clawd-dog-mouth-flag-cloth,
.clawd-dumbbell,
.clawd-confetti rect {
    transform-box: fill-box;
    transform-origin: center;
}

.clawd-dog-tail {
    transform-origin: right center;
}

.clawd-flag,
.clawd-dog-mouth-flag,
.clawd-dumbbell,
.clawd-confetti {
    opacity: 0;
    pointer-events: none;
}

.clawd-flag-pole,
.clawd-dog-mouth-flag-pole,
.clawd-dumbbell rect {
    fill: #332925;
}

.clawd-flag-cloth rect {
    fill: #1A4C81;
}

.clawd-dog-mouth-flag-cloth path {
    fill: #1A4C81;
}

.clawd-confetti rect:nth-child(3n + 1) { fill: #E5A84B; }
.clawd-confetti rect:nth-child(3n + 2) { fill: #6E9A8B; }
.clawd-confetti rect:nth-child(3n) { fill: #C5524F; }

.clawd.performing {
    transition: none;
}

.clawd.activity-jump .clawd-stage {
    animation: clawdJump 1.55s cubic-bezier(.3, .75, .3, 1);
}

.clawd.activity-jump .clawd-hand {
    animation: clawdJumpHands 1.55s ease;
}

.clawd.activity-flag .clawd-body {
    animation: clawdFlagBody 2.9s ease-in-out;
}

.clawd.activity-flag .clawd-hand-right {
    animation: clawdFlagHand 2.9s ease-in-out;
}

.clawd.activity-flag .clawd-flag {
    animation: clawdPropAppear 2.9s linear;
}

.clawd.activity-flag .clawd-flag-cloth {
    transform-origin: left center;
    animation: clawdFlagWave .3s steps(2, end) 9;
}

.clawd.activity-gym .clawd-body {
    animation: clawdGymBody 3.5s ease-in-out;
}

.clawd.activity-gym .clawd-hand {
    animation: clawdGymHands 3.5s ease-in-out;
}

.clawd.activity-gym .clawd-dumbbell {
    animation: clawdDumbbell 3.5s ease-in-out;
}

.clawd.activity-confetti .clawd-stage {
    animation: clawdStomp .95s steps(4, end) 2;
}

.clawd.activity-confetti .clawd-confetti {
    opacity: 1;
}

.clawd.activity-confetti .clawd-confetti rect {
    animation: clawdConfetti 1.65s cubic-bezier(.2, .75, .35, 1) var(--delay) both;
}

.clawd.activity-dog-wag .clawd-dog-body {
    animation: clawdDogHappyBody 2.25s steps(2, end);
}

.clawd.activity-dog-wag .clawd-dog-head {
    transform-origin: left bottom;
    animation: clawdDogHappyHead 2.25s steps(2, end);
}

.clawd.activity-dog-wag .clawd-dog-tail {
    animation: clawdDogHappyTail .18s steps(2, end) 12;
}

.clawd.activity-dog-sit .clawd-dog-body {
    animation: clawdDogSitBody 2.75s ease-in-out;
}

.clawd.activity-dog-sit .clawd-dog-head {
    transform-origin: left bottom;
    animation: clawdDogSitHead 2.75s ease-in-out;
}

.clawd.activity-dog-sit .clawd-dog-leg-1,
.clawd.activity-dog-sit .clawd-dog-leg-2 {
    animation: clawdDogSitBackLeg 2.75s ease-in-out;
}

.clawd.activity-dog-sit .clawd-dog-tail {
    animation: clawdDogSitTail 2.75s ease-in-out;
}

.clawd.activity-dog-stretch .clawd-dog-body {
    animation: clawdDogStretchBody 2.55s ease-in-out;
}

.clawd.activity-dog-stretch .clawd-dog-head {
    transform-origin: left bottom;
    animation: clawdDogStretchHead 2.55s ease-in-out;
}

.clawd.activity-dog-stretch .clawd-dog-leg-3,
.clawd.activity-dog-stretch .clawd-dog-leg-4 {
    animation: clawdDogStretchFrontLeg 2.55s ease-in-out;
}

.clawd.activity-dog-stretch .clawd-dog-tail {
    animation: clawdDogStretchTail .24s steps(2, end) 9;
}

.clawd.activity-dog-spin .clawd-companion-dog {
    animation: clawdDogSpin 1.85s cubic-bezier(.4, 0, .2, 1);
}

.clawd.activity-dog-spin .clawd-dog-tail {
    animation: clawdDogHappyTail .16s steps(2, end) 11;
}

.clawd.activity-dog-flag .clawd-stage {
    animation: clawdDogFlagRun .24s steps(2, end) 13;
}

.clawd.activity-dog-flag .clawd-dog-tail {
    animation: clawdDogHappyTail .16s steps(2, end) 18;
}

.clawd.activity-dog-flag .clawd-dog-mouth-flag {
    animation: clawdDogFlagCarry 3.05s linear;
}

.clawd.activity-dog-flag .clawd-dog-mouth-flag-cloth {
    transform-origin: left center;
    animation: clawdFlagWave .24s steps(2, end) 12;
}

@keyframes clawdDogHappyBody {
    0%, 100% { transform: translateY(0) scale(1); }
    12%, 38%, 64% { transform: translateY(3px) scale(1.02, .95); }
    24%, 50%, 76% { transform: translateY(-5px) scale(.98, 1.04); }
    86% { transform: translateY(2px) scale(1.01, .97); }
}

@keyframes clawdDogHappyHead {
    0%, 100% { transform: rotate(0) translateY(0); }
    12%, 38%, 64% { transform: rotate(5deg) translateY(2px); }
    24%, 50%, 76% { transform: rotate(-6deg) translateY(-4px); }
    86% { transform: rotate(3deg) translateY(1px); }
}

@keyframes clawdDogHappyTail {
    0%, 100% { transform: rotate(-16deg) translateY(-3px); }
    50% { transform: rotate(17deg) translateY(3px); }
}

@keyframes clawdDogSitBody {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    16%, 82% { transform: translate(-3px, 4px) rotate(-3deg); }
    28%, 70% { transform: translate(-5px, 7px) rotate(-5deg); }
}

@keyframes clawdDogSitHead {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    16%, 82% { transform: translate(-5px, 3px) rotate(-5deg); }
    28%, 70% { transform: translate(-8px, 5px) rotate(-9deg); }
    48% { transform: translate(-7px, 2px) rotate(-13deg); }
}

@keyframes clawdDogSitBackLeg {
    0%, 100% { transform: rotate(0) scaleY(1); }
    20%, 78% { transform: rotate(50deg) scaleY(.82); }
    30%, 68% { transform: rotate(68deg) scaleY(.72); }
}

@keyframes clawdDogSitTail {
    0%, 100% { transform: rotate(0) translate(0, 0); }
    20%, 78% { transform: rotate(14deg) translate(-1px, 5px); }
    30%, 68% { transform: rotate(25deg) translate(-2px, 8px); }
    46% { transform: rotate(19deg) translate(-2px, 7px); }
}

@keyframes clawdDogStretchBody {
    0%, 100% { transform: translate(0, 0) scale(1); }
    16%, 82% { transform: translate(-2px, 1px) scaleX(1.03); }
    28%, 70% { transform: translate(-5px, -1px) scale(1.1, .96); }
}

@keyframes clawdDogStretchHead {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    16%, 82% { transform: translate(4px, 6px) rotate(4deg); }
    28%, 70% { transform: translate(7px, 12px) rotate(9deg); }
    48% { transform: translate(8px, 14px) rotate(7deg); }
}

@keyframes clawdDogStretchFrontLeg {
    0%, 100% { transform: translateY(0) scaleY(1); }
    22%, 76% { transform: translateY(2px) scaleY(1.08); }
    32%, 66% { transform: translateY(3px) scaleY(1.16); }
}

@keyframes clawdDogStretchTail {
    0%, 100% { transform: rotate(-12deg) translateY(-2px); }
    50% { transform: rotate(10deg) translateY(2px); }
}

@keyframes clawdDogSpin {
    0%, 100% { transform: translateX(0) scaleX(1); }
    12% { transform: translate(7px, -3px) scaleX(.58); }
    28% { transform: translate(11px, 1px) scaleX(-1); }
    46% { transform: translate(3px, -5px) scaleX(-.55); }
    62% { transform: translate(-9px, 1px) scaleX(-1); }
    80% { transform: translate(-6px, -3px) scaleX(.55); }
}

@keyframes clawdDogFlagRun {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

@keyframes clawdDogFlagCarry {
    0%, 5%, 95%, 100% { opacity: 0; transform: translateX(7px); }
    10%, 90% { opacity: 1; transform: translateX(0); }
}

@keyframes clawdJump {
    0%, 100% { transform: translateY(0) scale(1); }
    12% { transform: translateY(7px) scale(1.04, .88); }
    34% { transform: translateY(-42px) rotate(-3deg); }
    56% { transform: translateY(-28px) rotate(2deg); }
    72% { transform: translateY(3px) scale(1.06, .9); }
    82% { transform: translateY(-7px) scale(.98, 1.04); }
}

@keyframes clawdJumpHands {
    0%, 12%, 100% { transform: translateY(0); }
    34%, 56% { transform: translateY(-7px); }
    72% { transform: translateY(5px); }
}

@keyframes clawdFlagBody {
    0%, 100% { transform: translateX(0) rotate(0); }
    18%, 44%, 70% { transform: translateX(-3px) rotate(-2deg); }
    30%, 57%, 84% { transform: translateX(3px) rotate(2deg); }
}

@keyframes clawdFlagHand {
    0%, 100% { transform: translate(0, 0); }
    12%, 90% { transform: translate(-2px, -12px); }
    30%, 57%, 84% { transform: translate(-6px, -15px); }
    18%, 44%, 70% { transform: translate(2px, -10px); }
}

@keyframes clawdFlagWave {
    0%, 100% { transform: skewY(0) scaleX(1); }
    50% { transform: skewY(8deg) scaleX(.82); }
}

@keyframes clawdGymBody {
    0%, 100% { transform: translateY(0) scaleY(1); }
    10%, 90% { transform: translateY(7px) scaleY(.9); }
    28%, 46%, 64%, 80% { transform: translateY(1px) scaleY(1); }
    37%, 55%, 72% { transform: translateY(5px) scaleY(.94); }
}

@keyframes clawdGymHands {
    0%, 100% { transform: translateY(0); }
    10%, 90% { transform: translateY(4px); }
    28%, 80% { transform: translateY(-14px); }
    37%, 72% { transform: translateY(-31px); }
    46%, 64% { transform: translateY(-40px); }
}

@keyframes clawdDumbbell {
    0%, 4%, 96%, 100% { opacity: 0; transform: translateY(52px); }
    8%, 90% { opacity: 1; transform: translateY(48px); }
    28%, 80% { opacity: 1; transform: translateY(30px); }
    37%, 72% { opacity: 1; transform: translateY(13px); }
    46%, 64% { opacity: 1; transform: translateY(3px); }
}

@keyframes clawdStomp {
    0%, 100% { transform: rotate(0) translateY(0); }
    25% { transform: rotate(-5deg) translate(-2px, -5px); }
    50% { transform: rotate(0) translateY(2px); }
    75% { transform: rotate(5deg) translate(2px, -5px); }
}

@keyframes clawdConfetti {
    0% { opacity: 0; transform: translate(0, 0) rotate(0); }
    12% { opacity: 1; }
    72% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(220deg); }
}

@keyframes clawdPropAppear {
    0%, 5%, 95%, 100% { opacity: 0; }
    10%, 90% { opacity: 1; }
}

.clawd-menu {
    position: absolute;
    right: 0;
    bottom: 56px;
    min-width: 126px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 6px;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 32px color-mix(in srgb, var(--shadow) 68%, transparent);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px) scale(.94);
    transform-origin: right bottom;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.clawd.menu-open .clawd-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.clawd.menu-left .clawd-menu {
    right: auto;
    left: 0;
    transform-origin: left bottom;
}

.clawd.menu-below .clawd-menu {
    top: 56px;
    bottom: auto;
    transform-origin: right top;
}

.clawd.menu-left.menu-below .clawd-menu {
    transform-origin: left top;
}

.clawd-menu button {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    color: var(--text2);
    border-radius: 9px;
    font-size: 13px;
    text-align: left;
}

.clawd-menu button:active {
    background: var(--surface2);
    transform: none;
}

.clawd-menu svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    color: #DD775B;
}

.clawd-bubble {
    position: absolute;
    left: 50%;
    bottom: 55px;
    max-width: 180px;
    padding: 7px 10px;
    color: var(--text2);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 5px 18px color-mix(in srgb, var(--shadow) 48%, transparent);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 5px) scale(.94);
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.clawd-bubble.show {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
}

.clawd.bounce .clawd-character {
    animation: clawdBounce .36s ease;
}

.clawd.awaiting-reply:not(.performing) .clawd-character {
    animation: clawdAnxiousPace .9s ease-in-out infinite;
}

.clawd.awaiting-reply:not(.performing) .clawd-body {
    animation: clawdAnxiousBob .24s steps(2, end) infinite;
}

.clawd.awaiting-reply:not(.performing) .clawd-dog-body,
.clawd.awaiting-reply:not(.performing) .clawd-dog-head {
    animation: clawdAnxiousBob .24s steps(2, end) infinite;
}

.clawd.awaiting-reply:not(.performing) .clawd-dog-tail {
    animation: clawdDogTail .18s steps(2, end) infinite;
}

.clawd.awaiting-reply:not(.performing) .clawd-leg-1,
.clawd.awaiting-reply:not(.performing) .clawd-leg-3 {
    animation: clawdAnxiousLegA .18s steps(2, end) infinite;
}

.clawd.awaiting-reply:not(.performing) .clawd-leg-2,
.clawd.awaiting-reply:not(.performing) .clawd-leg-4,
.clawd.awaiting-reply:not(.performing) .clawd-dog-leg-1,
.clawd.awaiting-reply:not(.performing) .clawd-dog-leg-3 {
    animation: clawdAnxiousLegB .18s steps(2, end) infinite;
}

.clawd.awaiting-reply:not(.performing) .clawd-dog-leg-2,
.clawd.awaiting-reply:not(.performing) .clawd-dog-leg-4 {
    animation: clawdAnxiousLegA .18s steps(2, end) infinite;
}

.clawd.dragging .clawd-character {
    cursor: grabbing;
    animation: clawdStruggle var(--clawd-struggle-speed, .16s) steps(2, end) infinite;
}

.clawd.dragging .clawd-hand-left {
    animation: clawdStruggleClawLeft var(--clawd-struggle-speed, .2s) steps(2, end) infinite;
}

.clawd.dragging .clawd-hand-right {
    animation: clawdStruggleClawRight var(--clawd-struggle-speed, .17s) steps(2, end) infinite;
}

.clawd.dragging .clawd-leg-1,
.clawd.dragging .clawd-leg-3 {
    animation: clawdStruggleLegA var(--clawd-struggle-speed, .12s) steps(2, end) infinite;
}

.clawd.dragging .clawd-leg-2,
.clawd.dragging .clawd-leg-4,
.clawd.dragging .clawd-dog-leg-1,
.clawd.dragging .clawd-dog-leg-3 {
    animation: clawdStruggleLegB var(--clawd-struggle-speed, .12s) steps(2, end) infinite;
}

.clawd.dragging .clawd-dog-leg-2,
.clawd.dragging .clawd-dog-leg-4 {
    animation: clawdStruggleLegA var(--clawd-struggle-speed, .12s) steps(2, end) infinite;
}

.clawd.dragging .clawd-dog-tail {
    animation: clawdDogTail var(--clawd-struggle-speed, .14s) steps(2, end) infinite;
}

.clawd.dragging .clawd-eyes {
    animation: clawdStruggleEyes var(--clawd-struggle-speed, .13s) steps(2, end) infinite;
}

.clawd.sprinting:not(.performing) .clawd-character {
    animation: clawdSprintBob .24s steps(2, end) infinite;
}

@keyframes clawdBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    45% { transform: translateY(-10px) scale(1.04, .96); }
}

@keyframes clawdAnxiousPace {
    0%, 100% { transform: translateX(0); }
    22% { transform: translateX(-68px); }
    44% { transform: translateX(-14px); }
    68% { transform: translateX(-82px); }
    84% { transform: translateX(-38px); }
}

@keyframes clawdAnxiousBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes clawdAnxiousLegA {
    0%, 100% { transform: rotate(10deg) scaleY(.88); }
    50% { transform: rotate(-8deg) scaleY(1.1); }
}

@keyframes clawdAnxiousLegB {
    0%, 100% { transform: rotate(-8deg) scaleY(1.1); }
    50% { transform: rotate(10deg) scaleY(.88); }
}

@keyframes clawdDogTail {
    0%, 100% { transform: rotate(-7deg) translateY(-2px); }
    50% { transform: rotate(7deg) translateY(2px); }
}

@keyframes clawdStruggle {
    0%, 100% { transform: rotate(-4deg) translateY(-2px); }
    50% { transform: rotate(4deg) translateY(2px); }
}

@keyframes clawdStruggleClawLeft {
    0%, 100% { transform: translate(-3px, -8px) rotate(-10deg); }
    50% { transform: translate(2px, 5px) rotate(8deg); }
}

@keyframes clawdStruggleClawRight {
    0%, 100% { transform: translate(3px, 5px) rotate(8deg); }
    50% { transform: translate(-2px, -9px) rotate(-10deg); }
}

@keyframes clawdStruggleLegA {
    0%, 100% { transform: rotate(18deg) scaleY(.72); }
    50% { transform: rotate(-14deg) scaleY(1.18); }
}

@keyframes clawdStruggleLegB {
    0%, 100% { transform: rotate(-14deg) scaleY(1.18); }
    50% { transform: rotate(18deg) scaleY(.72); }
}

@keyframes clawdStruggleEyes {
    0%, 100% { transform: translateX(-2px); }
    50% { transform: translateX(2px); }
}

@keyframes clawdSprintBob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-4px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .clawd,
    .clawd-character,
    .clawd-stage,
    .clawd-body,
    .clawd-hand,
    .clawd-companion-dog,
    .clawd-leg,
    .clawd-dog-body,
    .clawd-dog-head,
    .clawd-dog-tail,
    .clawd-dog-leg,
    .clawd-eyes,
    .clawd-flag,
    .clawd-flag-cloth,
    .clawd-dog-mouth-flag,
    .clawd-dog-mouth-flag-cloth,
    .clawd-dumbbell,
    .clawd-confetti rect,
    .home-composer {
        transition-duration: .01ms !important;
        animation: none !important;
    }
}

/* ─── Mood calendar ─── */
.settings-page-nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

#page-tools .tools-board {
    min-height: 0;
    width: min(760px, 100%);
    padding: 22px max(20px, env(safe-area-inset-left, 0px)) calc(34px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-right, 0px));
}

#page-mood {
    --mood-user: #c96f53;
    --mood-user-wash: color-mix(in srgb, var(--mood-user) 13%, var(--surface));
    --mood-assistant: #718477;
    --mood-assistant-wash: color-mix(in srgb, var(--mood-assistant) 15%, var(--surface));
    background:
        radial-gradient(circle at 9% 14%, color-mix(in srgb, var(--mood-user) 5%, transparent), transparent 27%),
        radial-gradient(circle at 92% 42%, color-mix(in srgb, var(--mood-assistant) 5%, transparent), transparent 29%),
        var(--bg);
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

#page-mood::-webkit-scrollbar {
    display: none;
}

[data-theme="dark"] #page-mood {
    --mood-user: #dc8a6f;
    --mood-assistant: #91a697;
}

#page-mood .mood-topbar {
    position: sticky;
    top: 0;
    z-index: 4;
}

.mood-board {
    min-height: calc(100dvh - 52px - env(safe-area-inset-top, 0px));
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 29px 21px 58px;
}

.mood-board::-webkit-scrollbar,
.mood-entry-list::-webkit-scrollbar {
    display: none;
}

.mood-board-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin: 0 2px 23px;
}

.mood-board-kicker {
    margin-bottom: 7px;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.4;
    letter-spacing: .13em;
}

.mood-board-intro h1 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 27px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -.025em;
}

.mood-board-subtitle {
    margin-top: 7px;
    color: var(--text2);
    font-size: 11px;
    line-height: 1.55;
}

.mood-legend {
    flex: 0 0 auto;
    display: grid;
    gap: 7px;
    padding-bottom: 3px;
}

.mood-legend span {
    max-width: 100px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text3);
    font-size: 9px;
}

.mood-legend i {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    background: var(--mood-user);
    border-radius: 50%;
    opacity: .74;
}

.mood-legend .is-assistant i {
    background: var(--mood-assistant);
}

.mood-legend b {
    min-width: 0;
    overflow: hidden;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mood-calendar-paper {
    padding: 15px 0 14px;
    border-top: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.mood-weekdays,
.mood-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    column-gap: 4px;
}

.mood-weekdays {
    margin-bottom: 8px;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1;
    text-align: center;
    opacity: .78;
}

.mood-calendar {
    row-gap: 2px;
}

.mood-day,
.mood-day-spacer {
    min-width: 0;
    min-height: 57px;
}

.mood-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 4px 1px 2px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 12px;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.mood-day:active {
    background: color-mix(in srgb, var(--surface2) 54%, transparent);
    transform: scale(.96);
}

.mood-day-number {
    width: 23px;
    height: 18px;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1;
    border-radius: 999px;
    transition: color var(--transition), background var(--transition);
}

.mood-day-pair {
    position: relative;
    width: min(39px, 100%);
    height: 28px;
    flex: 0 0 auto;
    transition: transform var(--transition);
}

.mood-day:not(.has-mood) .mood-day-pair::after {
    content: '';
    position: absolute;
    top: 13px;
    left: 50%;
    width: 7px;
    height: 1px;
    background: color-mix(in srgb, var(--text3) 24%, transparent);
    transform: translateX(-50%);
}

.mood-day-person {
    position: absolute;
    top: 2px;
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    font-size: 14px;
    line-height: 1;
    border: 1px solid color-mix(in srgb, var(--surface) 72%, transparent);
    border-radius: 50%;
    opacity: 0;
}

.mood-day-person.filled {
    opacity: 1;
}

.mood-day-user {
    left: 0;
    z-index: 1;
    background: var(--mood-user-wash);
    transform: rotate(-4deg);
}

.mood-day-assistant {
    right: 0;
    z-index: 2;
    background: var(--mood-assistant-wash);
    transform: rotate(4deg);
}

.mood-day.has-mood .mood-day-pair {
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--shadow) 45%, transparent));
}

.mood-day.today .mood-day-number {
    color: var(--mood-user);
    background: var(--mood-user-wash);
    font-weight: 500;
}

.mood-day.selected {
    background: color-mix(in srgb, var(--surface) 48%, transparent);
}

.mood-day.selected .mood-day-pair {
    transform: translateY(-1px) scale(.92);
}

.mood-day.selected .mood-day-person.filled {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 26%, transparent);
}

.mood-calendar-hint {
    margin: 14px 0 0;
    color: var(--text3);
    font-size: 9px;
    line-height: 1.4;
    text-align: center;
}

.mood-editor {
    --mood-user: #c96f53;
    --mood-user-wash: color-mix(in srgb, var(--mood-user) 13%, var(--surface));
    --mood-assistant: #718477;
    --mood-assistant-wash: color-mix(in srgb, var(--mood-assistant) 15%, var(--surface));
    position: fixed;
    inset: 0;
    z-index: 1200;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

[data-theme="dark"] .mood-editor {
    --mood-user: #dc8a6f;
    --mood-assistant: #91a697;
}

.mood-editor.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.mood-editor-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(22, 18, 15, 0.2);
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.mood-editor-sheet {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: 9px 22px calc(17px + env(safe-area-inset-bottom, 0px));
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--mood-user) 4%, transparent), transparent 24%),
        var(--surface);
    border: 0;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -14px 48px rgba(24, 17, 12, .1);
    transform: translateY(24px);
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
    max-height: min(88dvh, 720px);
    overflow-y: auto;
    scrollbar-width: none;
}

.mood-editor-sheet::-webkit-scrollbar {
    display: none;
}

.mood-editor.open .mood-editor-sheet {
    transform: translateY(0);
}

.mood-editor-handle {
    width: 34px;
    height: 3px;
    margin: 0 auto 12px;
    display: block;
    background: color-mix(in srgb, var(--text3) 28%, transparent);
    border-radius: 999px;
}

.mood-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
}

.mood-editor-head > div {
    min-width: 0;
}

.mood-editor-head p {
    margin-bottom: 3px;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: .08em;
}

.mood-editor-date {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 21px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -.015em;
}

.mood-editor-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    border-radius: 50%;
}

.mood-side-switch {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-top: 17px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.mood-side-switch button {
    position: relative;
    max-width: 46%;
    height: 37px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text3);
    font-size: 11px;
    border-radius: 0;
    transition: color var(--transition);
}

.mood-side-switch button i {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: var(--mood-user);
    border-radius: 50%;
    opacity: .38;
    transition: opacity var(--transition), transform var(--transition);
}

.mood-side-switch button[data-mood-editor-side="assistant"] i {
    background: var(--mood-assistant);
}

.mood-side-switch button span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mood-side-switch button::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: currentColor;
    opacity: 0;
    transform: scaleX(.4);
    transition: opacity var(--transition), transform var(--transition);
}

.mood-side-switch button.active {
    color: var(--text);
    background: transparent;
    box-shadow: none;
}

.mood-side-switch button.active i,
.mood-side-switch button.active::after {
    opacity: .86;
    transform: scale(1);
}

.mood-entry-section {
    padding: 17px 0 5px;
}

.mood-entry-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text3);
    font-size: 9px;
}

.mood-entry-label small {
    font-family: var(--font-mono);
    font-size: 8px;
}

.mood-quick-picks {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-top: 10px;
}

.mood-quick-picks button {
    aspect-ratio: 1;
    min-width: 0;
    font-size: 20px;
    background: transparent;
    border: 0;
    border-radius: 50%;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.mood-quick-picks button.selected {
    background: var(--mood-user-wash);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mood-user) 21%, transparent);
    transform: scale(.9) rotate(-3deg);
}

.mood-editor[data-mood-side="assistant"] .mood-quick-picks button.selected {
    background: var(--mood-assistant-wash);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mood-assistant) 25%, transparent);
    transform: scale(.9) rotate(3deg);
}

.mood-custom-pick {
    min-height: 38px;
    margin-top: 9px;
    padding: 0 2px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    color: var(--text3);
    border-top: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 48%, transparent);
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.mood-custom-pick > span {
    font-size: 9px;
    white-space: nowrap;
}

.mood-custom-pick input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0;
    color: var(--text);
    font-size: 19px;
    line-height: 1;
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
}

.mood-custom-pick input::placeholder {
    color: color-mix(in srgb, var(--text3) 70%, transparent);
    font-family: var(--font-body);
    font-size: 10px;
}

.mood-custom-pick small {
    font-size: 8px;
    white-space: nowrap;
}

.mood-custom-pick:focus-within,
.mood-custom-pick.selected {
    color: var(--text2);
    border-color: color-mix(in srgb, var(--mood-user) 30%, var(--border));
}

.mood-custom-pick.selected {
    padding-inline: 8px;
    background: var(--mood-user-wash);
    border-color: transparent;
    border-radius: 10px;
}

.mood-editor[data-mood-side="assistant"] .mood-custom-pick:focus-within,
.mood-editor[data-mood-side="assistant"] .mood-custom-pick.selected {
    border-color: color-mix(in srgb, var(--mood-assistant) 34%, var(--border));
}

.mood-editor[data-mood-side="assistant"] .mood-custom-pick.selected {
    background: var(--mood-assistant-wash);
    border-color: transparent;
}

.mood-note-input {
    width: 100%;
    min-height: 80px;
    margin-top: 10px;
    padding: 4px 2px 6px;
    resize: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 28px;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 27px,
        color-mix(in srgb, var(--border) 58%, transparent) 28px
    );
    border: 0;
    border-radius: 0;
    outline: none;
}

.mood-note-input::placeholder {
    color: color-mix(in srgb, var(--text3) 72%, transparent);
    font-style: italic;
}

.mood-entry-list {
    display: grid;
    max-height: 176px;
    margin-top: 7px;
    overflow-y: auto;
    scrollbar-width: none;
}

.mood-entry-empty {
    min-height: 89px;
    padding: 15px 4px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-size: 11px;
    text-align: center;
}

.mood-entry-empty i {
    position: relative;
    width: 34px;
    height: 1px;
    margin-bottom: 11px;
    background: color-mix(in srgb, var(--text3) 28%, transparent);
}

.mood-entry-empty i::after {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 5px;
    height: 5px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--text3) 35%, transparent);
    border-radius: 50%;
    transform: translateX(-50%);
}

.mood-entry-empty small {
    margin-top: 4px;
    color: color-mix(in srgb, var(--text3) 70%, transparent);
    font-size: 9px;
}

.mood-entry-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    align-items: start;
    gap: 10px;
    padding: 12px 0;
    background: transparent;
    border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    border-radius: 0;
}

.mood-entry-emoji {
    font-size: 21px;
    line-height: 1.25;
    text-align: center;
}

.mood-entry-copy {
    min-width: 0;
}

.mood-entry-note {
    color: var(--text);
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.mood-entry-note.is-quiet {
    color: var(--text3);
    font-style: italic;
}

.mood-entry-time {
    margin-top: 3px;
    color: var(--text3);
    font-size: 10px;
}

.mood-entry-delete {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: var(--text3);
    border-radius: 50%;
}

.mood-entry-delete:active {
    color: #d94040;
    background: rgba(217, 64, 64, .1);
}

.mood-compose {
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
}

.mood-compose-question {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.4;
}

.mood-compose-foot {
    min-height: 39px;
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mood-compose-foot > span {
    color: var(--text3);
    font-size: 8px;
}

.mood-add-button {
    width: auto;
    min-width: 116px;
    height: 37px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--control-on-fill);
    font-size: 10px;
    font-weight: 500;
    background: var(--control-fill);
    border-radius: 999px;
    transition: opacity var(--transition), transform var(--transition);
}

.mood-add-button svg {
    width: 14px;
    height: 14px;
}

.mood-add-button:disabled {
    opacity: .44;
}

.entry-poke-setting {
    gap: 10px;
}

.entry-poke-preview {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.entry-poke-preview img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 5px 9px rgba(91, 55, 38, .09));
}

.entry-poke-setting .modal-btn {
    width: auto;
    min-width: 54px;
    padding: 0 10px;
}

.entry-poke-reset {
    min-width: 40px;
    color: var(--text3);
    font-size: 12px;
}

.entry-poke-reset:disabled {
    opacity: .35;
}

@media (max-width: 390px) {
    .settings-page-nav {
        width: calc(100% - 16px);
    }

    .settings-page-nav .edit-section-tab {
        padding-inline: 4px;
        font-size: 11px;
    }

    .mood-board {
        width: 100%;
        padding: 24px 15px 54px;
    }

    .mood-board-intro {
        align-items: flex-start;
        gap: 12px;
        margin-inline: 1px;
    }

    .mood-board-intro h1 {
        font-size: 25px;
    }

    .mood-board-subtitle {
        max-width: 225px;
    }

    .mood-legend {
        padding-top: 20px;
    }

    .mood-weekdays,
    .mood-calendar {
        column-gap: 2px;
    }

    .mood-day,
    .mood-day-spacer {
        min-height: 54px;
    }

    .mood-editor-sheet {
        padding-inline: 18px;
    }
}

.search-highlight {
    background: rgba(218, 119, 86, 0.3);
    border-radius: 2px;
}
.search-highlight.active {
    background: rgba(218, 119, 86, 0.6);
}

/* ─── 语音气泡 ─── */
.voice-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: opacity 0.12s;
    min-width: 140px;
    max-width: 220px;
    position: relative;
}
.msg-row.ai .voice-bubble {
    background: var(--bubble-ai);
    color: var(--bubble-ai-text);
    border-bottom-left-radius: var(--radius-sm);
    box-shadow: 0 1px 3px var(--shadow);
}
.msg-row.user .voice-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border-bottom-right-radius: var(--radius-sm);
}
.voice-bubble:active {
    opacity: 0.8;
}

.voice-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.voice-play-btn:active {
    transform: scale(0.9);
}
.msg-row.user .voice-play-btn {
    background: rgba(26, 19, 16, 0.18);
    color: var(--bubble-user-text);
}

.voice-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
}
.voice-wave-bar {
    width: 3px;
    border-radius: 1.5px;
    background: currentColor;
    opacity: 0.4;
    transition: height 0.1s ease;
}
.voice-bubble.playing .voice-wave-bar {
    animation: vBar 0.5s ease-in-out infinite alternate;
    opacity: 0.8;
}
.voice-bubble.playing .voice-wave-bar:nth-child(2n) {
    animation-delay: 0.1s;
}
.voice-bubble.playing .voice-wave-bar:nth-child(3n) {
    animation-delay: 0.2s;
}
.voice-bubble.playing .voice-wave-bar:nth-child(5n) {
    animation-delay: 0.3s;
}
@keyframes vBar {
    0% {
        height: 4px;
    }
    100% {
        height: 20px;
    }
}

.voice-duration {
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 24px;
    text-align: right;
}

.voice-transcript {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text2);
    padding: 6px 14px 10px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    opacity: 0.8;
}
.message-translation {
    width: min(100%, 420px);
    margin-top: 7px;
    border: 0;
    border-left: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    background: transparent;
    color: var(--text2);
    padding: 3px 2px 3px 9px;
    font: inherit;
    font-size: 12px;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
}
.message-translation-label {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--text3);
    font-size: 10px;
    line-height: 1.3;
}
.message-translation-label svg {
    width: 11px;
    height: 11px;
    transform: rotate(90deg);
    transition: transform .16s ease;
}
.message-translation-text {
    display: block;
    margin-top: 3px;
    white-space: pre-wrap;
}
.message-translation.collapsed .message-translation-label svg {
    transform: rotate(0);
}
.message-translation.collapsed .message-translation-text {
    display: none;
}

.voice-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: var(--text3);
}
.msg-row.ai .voice-loading {
    background: var(--bubble-ai);
    border-bottom-left-radius: var(--radius-sm);
    box-shadow: 0 1px 3px var(--shadow);
}

/* ─── 引用 ─── */
.quote-preview {
    background: var(--bg2);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 6px 10px;
    margin: 0 12px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.4;
}
.quote-preview-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quote-preview-close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
}
.quote-preview-close:active {
    background: var(--bg3);
}

/* 气泡内引用块 */
.bubble-quote {
    background: var(--bg2);
    border-left: 2px solid var(--accent);
    border-radius: 0 4px 4px 0;
    padding: 4px 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text3);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-row.user .bubble-quote {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.75);
}

/* ─── 特效 ─── */
#effect-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}
.effect-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    user-select: none;
}
@keyframes roseFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.6);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(10px) rotate(10deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) rotate(720deg) scale(0.4);
        opacity: 0;
    }
}
@keyframes cutePopup {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
@keyframes heartRain {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(15px) rotate(15deg) scale(1);
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 80px)) rotate(1080deg) scale(0.3);
        opacity: 0;
    }
}
.bomb-shake {
    animation: bombShake 0.5s ease;
}
@keyframes bombShake {
    0%,
    100% {
        transform: translate(0);
    }
    10% {
        transform: translate(-8px, 4px);
    }
    20% {
        transform: translate(6px, -6px);
    }
    30% {
        transform: translate(-4px, 8px);
    }
    40% {
        transform: translate(2px, -4px);
    }
    50% {
        transform: translate(-6px, 2px);
    }
    60% {
        transform: translate(4px, -2px);
    }
    70% {
        transform: translate(-2px, 6px);
    }
    80% {
        transform: translate(3px, -3px);
    }
    90% {
        transform: translate(-4px, 2px);
    }
}
.bomb-flash {
    position: fixed;
    inset: 0;
    background: rgba(255, 200, 150, 0.6);
    z-index: 998;
    pointer-events: none;
    animation: bombFlash 0.6s ease forwards;
}
@keyframes bombFlash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ─── 红包 ─── */
.red-packet {
    width: 180px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    user-select: none;
    animation: bubbleIn 0.18s ease-out;
}
.red-packet:active {
    transform: scale(0.96);
}
.red-packet.pending {
    background: linear-gradient(135deg, #E84040 0%, #C03030 100%);
    color: white;
}
.red-packet.claimed {
    background: var(--bg3);
    color: var(--text3);
    cursor: default;
    opacity: 0.75;
}
.red-packet-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}
.red-packet-icon {
    font-size: 28px;
}
.red-packet-info {
    flex: 1;
}
.red-packet-amount {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
}
.red-packet-label {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}
.red-packet-footer {
    font-size: 11px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0.7;
}
.red-packet.claimed .red-packet-footer {
    border-top-color: var(--border);
}

.rp-action-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.rp-action-text {
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}

.silence-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.silence-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}
.silence-icon {
    font-size: 13px;
}
.effect-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.effect-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}

/* ─── 转盘结果 ─── */
.wheel-result-row {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.wheel-result {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 12px 24px;
    box-shadow: 0 2px 12px var(--shadow);
    animation: wheelPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wheel-result-emoji {
    font-size: 28px;
    animation: wheelSpin 0.6s ease-out;
}
@keyframes wheelSpin {
    0% {
        transform: rotate(0deg) scale(0.5);
        opacity: 0;
    }
    60% {
        transform: rotate(720deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: rotate(1080deg) scale(1);
    }
}
@keyframes wheelPop {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.wheel-result-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-display);
}
.wheel-result-label {
    font-size: 11px;
    color: var(--text3);
}

/* ════════════════════════════════
   Paper Journal Visual Refresh
   Token definitions consolidated into the authoritative :root at top of file.
════════════════════════════════ */

body,
.page {
    background: var(--bg);
}
[data-theme="dark"] body,
[data-theme="dark"] .page {
    background: var(--bg);
}
#app {
    background: var(--bg);
}
button,
.conv-item-content,
.settings-row,
.model-option-row,
.attach-menu-item,
.sidebar-conv-item {
    -webkit-tap-highlight-color: transparent;
}
button:active,
.conv-item-content:active,
.settings-row:active,
.model-option-row:active,
.attach-menu-item:active {
    transform: translateY(1px);
}

.topbar {
    margin: 8px 10px 0;
    width: calc(100% - 20px);
    height: calc(var(--nav-h) - 6px);
    padding: env(safe-area-inset-top, 0px) 10px 0;
    background: var(--card);
    background: color-mix(in srgb, var(--card) 86%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.topbar-title {
    font-size: 18px;
    letter-spacing: 0;
    color: var(--text);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .topbar-title {
    text-shadow: none;
}
.topbar-btn,
.sidebar-mini-btn,
.chat-search-nav button,
.chat-search-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-soft) 88%, transparent);
    border: 1px solid var(--line-soft);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(74, 45, 28, 0.055);
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.topbar-btn:active,
.sidebar-mini-btn:active,
.chat-search-nav button:active,
.chat-search-close:active {
    background: var(--accent-dim);
    box-shadow: none;
}
#page-wordcards>.topbar,
#page-chat>.topbar {
    margin-top: 8px;
    left: 10px;
    right: 10px;
    width: auto;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: none;
    padding-left: 8px;
    padding-right: 8px;
}
#page-wordcards>.topbar .topbar-title,
#page-chat>.topbar .topbar-title {
    color: var(--text2);
    font-size: 15px;
}
.chat-model-btn {
    background: var(--card);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    border-color: var(--line-soft);
    box-shadow: none;
    border-radius: 999px;
}

:is(#page-settings, #page-assistant-settings) > .topbar .topbar-btn {
    visibility: hidden;
    pointer-events: none;
}
.search-bar {
    padding: 14px 16px 8px;
    background: transparent;
    border-bottom: none;
}
.search-inner,
.chat-search-bar input {
    background: color-mix(in srgb, var(--card) 86%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(74, 45, 28, 0.055) inset, 0 1px 0 rgba(255,255,255,0.55);
}
.search-inner {
    padding: 10px 14px;
}
.conv-list {
    padding: 8px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.conv-item {
    --swipe-action-opacity: 0.08;
    --swipe-btn-opacity: 0.28;
    --swipe-saturation: 0.45;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: transparent;
}
.conv-item-content {
    padding: 12px 12px;
    gap: 12px;
    background: #FFF9F0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
[data-theme="dark"] .conv-item-content {
    background: #30241E;
}
.conv-item-content:active {
    background: #F8EBDD;
}
[data-theme="dark"] .conv-item-content:active {
    background: #392A23;
}
.conv-item.pinned .conv-item-content {
    background: linear-gradient(135deg, #FFF1E6, #FFF9F0);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line-soft));
}
[data-theme="dark"] .conv-item.pinned .conv-item-content {
    background: linear-gradient(135deg, #3A2A22, #30241E);
}
.conv-item-actions {
    opacity: var(--swipe-action-opacity);
    transition: opacity 0.16s ease;
}
.conv-action-btn {
    color: #FFF8F0;
    font-weight: 600;
    opacity: var(--swipe-btn-opacity);
    transition: opacity 0.16s ease, filter 0.16s ease;
    filter: saturate(var(--swipe-saturation));
}
.conv-action-pin {
    background: #C97354;
}
.conv-action-archive {
    background: #8C9A8A;
}
.conv-action-move {
    background: #9B8372;
}
.conv-divider {
    display: none;
}
.conv-avatar,
.msg-avatar,
.conv-icon-preview {
    background: linear-gradient(145deg, rgba(255,255,255,0.36), var(--accent-dim));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line-soft));
    box-shadow: 0 5px 14px rgba(74, 45, 28, 0.10);
}
.conv-avatar {
    width: 50px;
    height: 50px;
}
.conv-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}
.conv-preview,
.conv-time {
    color: var(--text3);
}
.conv-pin-badge {
    width: 4px;
    height: 30px;
    top: 50%;
    left: 0;
    right: auto;
    transform: translateY(-50%);
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 72%, var(--paper-deep));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.26), 0 4px 10px rgba(147, 78, 54, 0.16);
}
.conv-pin-badge::after {
    content: none;
}

.sidebar-overlay {
    background: rgba(36, 25, 19, 0.28);
    backdrop-filter: blur(3px);
}
.sidebar {
    background: var(--bg);
    border-right: 1px solid var(--line-soft);
    box-shadow: 12px 0 34px rgba(74, 45, 28, 0.16);
}
.sidebar-header {
    border-bottom-color: var(--line-soft);
}
.sidebar-user-card,
.tool-card {
    background: var(--card);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
}
.sidebar-conv-item {
    margin: 2px 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
}
.sidebar-conv-item.active,
.sidebar-conv-item:active {
    background: var(--accent-dim);
}

.chat-messages {
    padding: 22px 12px;
    padding-top: calc(var(--nav-h) + 26px + env(safe-area-inset-top, 0px));
    gap: 9px;
    background: transparent;
    position: relative;
    z-index: 1;
}
.date-stamp,
.tickle-text,
.rp-action-text,
.silence-box {
    background: color-mix(in srgb, var(--card-soft) 86%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 4px 12px;
    box-shadow: 0 2px 8px rgba(74, 45, 28, 0.04);
}
.msg-row {
    gap: 9px;
    margin: 1px 0;
    align-items: flex-end;
}
.msg-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.msg-body {
    gap: 4px;
    max-width: min(78%, calc(100% - 76px));
}
.bubble,
.voice-bubble,
.voice-loading {
    border-radius: var(--radius-lg);
    line-height: 1.62;
}
.msg-row.ai .bubble,
.msg-row.ai .voice-bubble,
.msg-row.ai .voice-loading {
    background: var(--bubble-ai);
    color: var(--bubble-ai-text);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.msg-row.user .bubble,
.msg-row.user .voice-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.bubble-time {
    color: color-mix(in srgb, var(--text3) 88%, transparent);
    padding: 0 7px;
}
.mention-chip {
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 999px;
    padding: 2px 8px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
}
.bubble.markdown-body p {
    margin: 6px 0;
}
.bubble.markdown-body ul,
.bubble.markdown-body ol {
    margin: 6px 0;
    padding-left: 20px;
}
.bubble.markdown-body li {
    margin: 3px 0;
}
.bubble.markdown-body code {
    background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    padding: 1px 6px;
}
.bubble.markdown-body pre {
    background: color-mix(in srgb, var(--paper-deep) 78%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px 13px;
}
.bubble.markdown-body blockquote,
.bubble-quote,
.quote-preview {
    background: color-mix(in srgb, var(--paper-deep) 54%, transparent);
    border-left-color: var(--accent);
    border-radius: 10px;
}
.quote-preview {
    margin: 0 12px 8px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-soft);
}
.thinking-trace-trigger,
.tool-log {
    background: color-mix(in srgb, var(--card-soft) 90%, transparent);
    border: 1px solid var(--line-soft);
    color: var(--text2);
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(74, 45, 28, 0.055);
}
.thinking-trace-icon {
    background: var(--accent-dim);
    color: var(--accent);
}
.tool-log-row {
    padding: 5px 0;
}
.tool-log {
    padding: 5px 13px;
}

.attach-panel,
.staged-area,
.group-reply-targets {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-top: 1px solid var(--line-soft);
}
#page-wordcards .bubble,
#page-wordcards .chat-model-btn,
#page-wordcards .input-wrap,
#page-wordcards .input-bar,
#page-chat .bubble,
#page-chat .chat-model-btn,
#page-chat .input-wrap,
#page-chat .input-bar {
    box-shadow: none;
}
#page-chat *,
#page-chat *::before,
#page-chat *::after {
    box-shadow: none;
}
#page-wordcards>.topbar,
#page-chat>.topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.input-plus {
    background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
    border: 1px solid var(--line-soft);
}
.input-plus:active {
    transform: translateY(1px) scale(0.98);
}
.group-reply-targets {
    padding: 8px 12px 6px;
}
.group-reply-target-chip,
.staged-bubble,
.attach-menu-icon,
.attach-menu-item {
    border: 1px solid var(--line-soft);
    box-shadow: 0 2px 8px rgba(74, 45, 28, 0.045);
}
.group-reply-target-chip.active {
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.attach-menu {
    padding: 16px;
}
.attach-menu-item {
    background: color-mix(in srgb, var(--card-soft) 78%, transparent);
}

.settings-list,
.tools-board {
    padding: 18px 14px 28px;
}
.settings-section {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.settings-section-title {
    padding: 15px 16px 7px;
    letter-spacing: 0.6px;
    color: var(--text3);
}
.settings-row,
.settings-field-row {
    border-top-color: var(--line-soft);
}
.settings-row:active {
    background: color-mix(in srgb, var(--paper-deep) 46%, transparent);
}
.settings-row-icon {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.36);
}
.field-input,
.field-textarea,
.edit-sheet-input,
.edit-sheet-textarea,
.modal-input {
    background: color-mix(in srgb, var(--paper-deep) 62%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    box-shadow: inset 0 1px 5px rgba(74, 45, 28, 0.04);
}
.field-input:focus,
.field-textarea:focus,
.edit-sheet-input:focus,
.edit-sheet-textarea:focus,
.modal-input:focus {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line-soft));
    box-shadow: 0 0 0 3px var(--accent-dim), inset 0 1px 5px rgba(74, 45, 28, 0.035);
}
.toggle {
    background: color-mix(in srgb, var(--paper-deep) 80%, transparent);
    border: 1px solid var(--line-soft);
    box-shadow: inset 0 1px 5px rgba(74, 45, 28, 0.08);
}
.toggle.on {
    background: color-mix(in srgb, var(--accent) 88%, var(--paper-deep));
}

.modal-overlay {
    background: rgba(44, 31, 23, 0.30);
    backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal-overlay {
    background: rgba(11, 7, 5, 0.48);
}
.modal-sheet {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), var(--card)),
        var(--card);
    border: 1px solid var(--line-soft);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -14px 40px rgba(74, 45, 28, 0.16);
}
.modal-handle {
    width: 42px;
    height: 5px;
    background: color-mix(in srgb, var(--text3) 34%, transparent);
}
.modal-title {
    letter-spacing: 0;
}
.modal-btn,
.save-btn {
    border-radius: 16px;
    background: linear-gradient(180deg, var(--accent-light), var(--accent));
    box-shadow: 0 8px 18px rgba(147, 78, 54, 0.16);
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.modal-btn:active,
.save-btn:active {
    opacity: 1;
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(147, 78, 54, 0.12);
}
.modal-btn.secondary {
    background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
    color: var(--text2);
    border: 1px solid var(--line-soft);
    box-shadow: 0 3px 10px rgba(74, 45, 28, 0.06);
}
.modal-btn.danger {
    background: color-mix(in srgb, #D94040 8%, transparent);
    color: #B84C42;
    border: 1px solid rgba(184, 76, 66, 0.38);
    box-shadow: none;
}
[data-theme="dark"] .modal-btn.danger {
    color: #E39A90;
    border-color: rgba(227, 154, 144, 0.34);
}
.format-picker,
.edit-section-nav,
.model-provider-group,
.provider-card,
.memory-item {
    background: color-mix(in srgb, var(--card-soft) 88%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: 0 3px 12px rgba(74, 45, 28, 0.045);
}
.format-btn.active,
.edit-section-tab.active,
.model-option-row.active {
    background: var(--card);
    color: var(--accent);
    box-shadow: 0 3px 10px rgba(74, 45, 28, 0.08);
}
.model-provider-head,
.model-option-row {
    border-bottom-color: var(--line-soft);
}
.tiny-btn {
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--paper-deep) 62%, transparent);
}
.tiny-btn.danger {
    background: rgba(217, 64, 64, 0.08);
}
.ctx-menu {
    background: var(--card);
    border: 1px solid var(--line-soft);
    box-shadow: 0 14px 36px rgba(74, 45, 28, 0.18);
    border-radius: var(--radius-card);
}
.ctx-menu-item {
    border-bottom-color: var(--line-soft);
}

.sidebar-gallery-card {
    width: calc(100% - 32px);
    margin: 0 16px 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-align: left;
}
.sidebar-gallery-card:active {
    transform: translateY(1px);
}
.sidebar-gallery-frame {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.22)),
        var(--paper-deep);
    border: 3px solid color-mix(in srgb, var(--card) 88%, white);
    box-shadow: 0 0 0 1px var(--line-soft), 0 5px 14px rgba(74,45,28,0.10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    padding: 4px;
}
.sidebar-gallery-frame span {
    border-radius: 5px;
    background: var(--accent-dim);
}
.sidebar-gallery-frame span:nth-child(2) {
    background: rgba(140, 154, 138, 0.22);
}
.sidebar-gallery-frame span:nth-child(3) {
    background: rgba(155, 131, 114, 0.20);
}
.sidebar-gallery-frame span:nth-child(4) {
    background: rgba(232, 161, 127, 0.26);
}

/* Flat controls */
button,
button::before,
button::after,
.topbar,
.topbar-btn,
.sidebar-mini-btn,
.chat-search-nav button,
.chat-search-close,
.chat-model-btn,
.conv-action-btn,
.input-plus,
.send-btn,
.group-reply-target-chip,
.attach-menu-icon,
.attach-menu-item,
.staged-bubble,
.modal-btn,
.save-btn,
.format-btn,
.format-btn.active,
.model-option-row,
.model-option-row.active,
.toggle,
.toggle::after,
.tool-card-manage,
.tiny-btn,
.load-more-btn,
.voice-play-btn,
.code-copy-btn {
    box-shadow: none;
    text-shadow: none;
}
button:active,
.topbar-btn:active,
.sidebar-mini-btn:active,
.chat-search-nav button:active,
.chat-search-close:active,
.conv-action-btn:active,
.input-plus:active,
.send-btn:active,
.modal-btn:active,
.save-btn:active,
.format-btn:active,
.model-option-row:active,
.attach-menu-item:active,
.group-reply-target-chip:active,
.tool-card-manage:active,
.tiny-btn:active,
.load-more-btn:active,
.voice-play-btn:active,
.code-copy-btn:active {
    transform: none;
    box-shadow: none;
}
.send-btn,
.modal-btn,
.save-btn {
    background: var(--accent);
}
.modal-btn.secondary,
.input-plus,
.format-btn.active,
.model-option-row.active {
    background: color-mix(in srgb, var(--accent-dim) 70%, transparent);
}
.toggle,
.toggle::after,
.field-input:focus,
.field-textarea:focus,
.edit-sheet-input:focus,
.edit-sheet-textarea:focus,
.modal-input:focus {
    box-shadow: none;
}

/* ════════════════════════════════
   Calm Product Visual System
   Token definitions consolidated into the authoritative :root at top of file.
════════════════════════════════ */

html,
body,
.page,
#app,
[data-theme="dark"] body,
[data-theme="dark"] .page {
    background: var(--bg);
    background-image: none;
}
body {
    font-family: var(--font-body);
    letter-spacing: 0;
}
* {
    text-shadow: none;
}
#app {
    max-width: none;
    width: 100%;
}

.topbar,
#page-wordcards>.topbar,

.topbar,
#page-chat>.topbar {
    margin: 0;
    width: 100%;
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
#page-wordcards>.topbar,
#page-chat>.topbar {
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}
#page-wordcards>.topbar>*,
#page-chat>.topbar>* {
    pointer-events: auto;
}
.topbar-title,
.modal-title,
.bubble.markdown-body h1,
.bubble.markdown-body h2,
.bubble.markdown-body h3 {
    font-family: var(--font-body);
    letter-spacing: 0;
}
.topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
#page-wordcards>.topbar .topbar-title,
#page-chat>.topbar .topbar-title {
    position: static;
    transform: none;
    margin-left: 4px;
    margin-right: auto;
    max-width: min(44vw, 260px);
    color: var(--text);
    font-size: 14px;
    text-align: left;
}
.topbar-btn,
.sidebar-mini-btn,
.chat-search-nav button,
.chat-search-close {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    color: var(--text2);
    box-shadow: none;
}
.topbar-btn:active,
.sidebar-mini-btn:active,
.chat-search-nav button:active,
.chat-search-close:active {
    background: var(--bg2);
}
.chat-model-btn {
    height: 32px;
    max-width: 130px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 500;
}

.search-bar {
    padding: 12px 14px 8px;
    background: var(--bg);
    border-bottom: 0;
}
.search-inner,
.chat-search-bar input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}
.search-inner {
    padding: 9px 12px;
}
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 14px;
}
.conv-item {
    border-radius: 10px;
}
.conv-item-content {
    padding: 10px 10px;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}
.conv-item-content:active,
.conv-item.pinned .conv-item-content {
    background: var(--bg2);
}
.conv-avatar,
.msg-avatar,
.conv-icon-preview {
    background: var(--bg2);
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--text2);
    font-family: var(--font-body);
}
.conv-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}
.conv-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}
.conv-preview {
    font-size: 12px;
}
.conv-time {
    font-size: 11px;
}
.conv-pin-badge {
    width: 6px;
    height: 6px;
    top: 12px;
    right: 10px;
    left: auto;
    transform: none;
    background: var(--accent);
    box-shadow: none;
}
.conv-action-pin,
.conv-action-archive,
.conv-action-move {
    background: #6F7671;
}

.sidebar-overlay {
    background: rgba(32, 33, 31, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sidebar {
    width: min(292px, 86vw);
    background: var(--surface2);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 28px rgba(32, 33, 31, 0.10);
}
.sidebar-header {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 14px 12px;
    border-bottom: 0;
}
.sidebar-title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 650;
}
.sidebar-subtitle {
    display: none;
}
.sidebar-main {
    padding: 4px 8px 12px;
}
.sidebar-section-title,
.sidebar-section-toggle {
    padding: 12px 8px 6px;
    color: var(--text3);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}
.sidebar-conv-item,
.sidebar-user-card,
.sidebar-gallery-card,
.sidebar-assistant-current {
    margin: 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
}
.sidebar-conv-item.active,
.sidebar-conv-item:active,
.sidebar-user-card:active,
.sidebar-gallery-card:active {
    background: var(--bg3);
}
.sidebar-gallery-frame {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    box-shadow: none;
}
.sidebar-user-title,
.sidebar-current-name,
.sidebar-conv-name {
    font-weight: 500;
}

#page-wordcards,
#page-chat {
    background: var(--bg);
}
#chat-bg-layer {
    display: block;
    overflow: hidden;
}
#chat-bg-layer > div {
    transition: opacity var(--transition);
}
.chat-messages {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 18px 18px;
    gap: 12px;
    background: transparent;
}
.date-stamp,
.tickle-text,
.rp-action-text,
.silence-box {
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text3);
    padding: 8px 0;
}
.msg-row {
    gap: 10px;
    margin: 0;
    align-items: flex-start;
}
.msg-row.user {
    justify-content: flex-end;
    padding-left: clamp(36px, 18vw, 160px);
}
.msg-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    margin-top: 2px;
}
.msg-body {
    max-width: min(78%, 620px);
    gap: 3px;
    min-width: 0;
}
.msg-row.ai .msg-body {
    max-width: min(86%, 680px);
}
.msg-row.user .msg-body {
    max-width: min(72%, 560px);
}
.bubble,
.voice-bubble,
.voice-loading {
    padding: 8px 11px;
    border-radius: 14px;
    line-height: 1.62;
    box-shadow: none;
}
.msg-row.ai .bubble,
.msg-row.ai .voice-bubble,
.msg-row.ai .voice-loading {
    background: transparent;
    border: 0;
    color: var(--bubble-ai-text);
    padding-left: 0;
    padding-right: 0;
}
.msg-row.user .bubble,
.msg-row.user .voice-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
    width: fit-content;
    max-width: 100%;
}
.bubble-time {
    font-size: 11px;
    color: var(--text3);
    padding: 0 2px;
}
.msg-row.ai .bubble-time {
    padding-left: 0;
}
.thinking-trace-trigger,
.tool-log {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 999px;
    box-shadow: none;
}
#page-chat .thinking-trace {
    max-width: min(72vw, 560px);
}
#page-chat .thinking-trace * {
    max-width: none;
}
#page-chat .thinking-trace:not(.expanded) .thinking-trace-trigger {
    max-width: min(72vw, 560px);
}
#page-chat .thinking-trace:not(.expanded) .thinking-trace-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#page-chat .thinking-trace-meta,
#page-chat .thinking-trace-chevron {
    flex: none;
}
.thinking-trace-icon::before {
    display: block;
}
@media (prefers-reduced-motion: reduce) {
    .thinking-trace-trigger,
    .thinking-trace,
    .thinking-trace-detail {
        transition-duration: .01ms;
    }
    .thinking-live-spinner {
        animation: none;
    }
}
.bubble.markdown-body code,
.bubble.markdown-body pre {
    background: var(--surface2);
    border: 1px solid var(--border);
}
.bubble.markdown-body blockquote,
.bubble-quote,
.quote-preview {
    background: var(--surface2);
    border-color: var(--border);
    border-left: 3px solid var(--accent);
}

.input-plus {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--text2);
}
.input-plus:active {
    background: var(--bg2);
}
.attach-panel,
.staged-area,
.group-reply-targets {
    max-width: 820px;
    width: min(820px, calc(100% - 24px));
    margin-left: auto;
    margin-right: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
}
.attach-menu-item,
.attach-menu-icon,
.group-reply-target-chip,
.staged-bubble {
    background: var(--surface2);
    border: 1px solid var(--border);
    box-shadow: none;
}

.settings-list,
.tools-board {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 16px 28px;
}
.settings-section,
.provider-card,
.model-provider-group,
.format-picker,
.tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}
.settings-section {
    overflow: hidden;
}
.settings-row-icon,
.tool-card-icon {
    background: var(--surface2) !important;
    border: 1px solid var(--border);
    box-shadow: none;
}
.field-input,
.field-textarea,
.edit-sheet-input,
.edit-sheet-textarea,
.modal-input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
}
.field-input:focus,
.field-textarea:focus,
.edit-sheet-input:focus,
.edit-sheet-textarea:focus,
.modal-input:focus {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.modal-overlay {
    background: rgba(32, 33, 31, 0.24);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.modal-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgba(32, 33, 31, 0.12);
}
.modal-btn,
.save-btn {
    width: auto;
    min-width: 84px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
    font-size: 14px;
}
.save-btn {
    width: 100%;
}
.modal-btn.secondary,
.tiny-btn,
.tool-card-manage {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    box-shadow: none;
}
.modal-btn.danger,
.tiny-btn.danger {
    background: transparent;
    border-color: rgba(190, 72, 72, 0.24);
    color: #B34D4D;
}
.toggle {
    background: var(--bg3);
    border: 0;
    box-shadow: none;
}
.toggle.on {
    background: var(--accent);
}

#page-wordcards > :not(#chat-bg-layer):not(.topbar),
#page-chat > :not(#chat-bg-layer):not(.topbar) {
    position: relative;
    z-index: 1;
}
#page-wordcards > .topbar,
#page-chat > .topbar {
    position: absolute;
    z-index: 6;
}
#page-chat .chat-search-bar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: calc(100% - 24px);
    margin: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px) auto 0;
    box-sizing: border-box;
    padding: 8px;
    display: none;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    gap: 6px;
    align-items: center;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(32, 33, 31, 0.10);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    transform: none;
    z-index: 7;
    flex-shrink: 0;
}
#page-chat .chat-search-bar.open {
    display: grid;
}
#page-chat.search-open .chat-messages {
    padding-top: 12px;
    scroll-padding-top: 12px;
}
#page-chat .chat-search-bar input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 14px;
}
#page-chat .chat-search-bar input:focus {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-dim);
}
#page-chat .chat-search-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--text3);
    font-size: 12px;
    white-space: nowrap;
}
#page-chat #chat-search-count {
    min-width: 42px;
    text-align: right;
    color: var(--text3);
}
#page-chat .chat-search-nav button,
#page-chat .chat-search-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--text2);
    box-shadow: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-chat .chat-search-nav button:disabled {
    color: color-mix(in srgb, var(--text3) 55%, transparent);
    opacity: 0.5;
    pointer-events: none;
}
#page-chat .chat-search-nav button:active,
#page-chat .chat-search-close:active {
    background: var(--bg2);
}
#page-chat .search-highlight {
    background: color-mix(in srgb, #ffd84d 55%, transparent);
    border-radius: 3px;
    box-shadow: 0 0 0 1px color-mix(in srgb, #ffd84d 42%, transparent);
    color: inherit;
}
#page-chat .search-highlight.active {
    background: color-mix(in srgb, #ff9f43 72%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, #ff9f43 34%, transparent);
}
#page-wordcards .chat-messages,
#page-chat .chat-messages {
    z-index: 1;
}
#page-chat .quote-preview,
#page-chat .staged-area,
#page-chat .group-reply-targets {
    z-index: 4;
}
#page-chat .attach-panel {
    position: relative;
    z-index: 5;
    overflow: hidden;
}
#page-chat .attach-panel.open {
    overflow: visible;
}
#page-wordcards .input-bar,
#page-chat .input-bar {
    position: relative;
    z-index: 6;
}
#page-chat.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
#page-wordcards .chat-messages,
.chat-messages,
#page-chat .chat-messages,
.chat-messages {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#page-wordcards .input-bar,
.input-bar,
#page-chat .input-bar,
.input-bar {
    flex: 0 0 auto;
    margin: 0 auto;
    padding-bottom: calc(7px + var(--safe-bottom));
}
#page-chat .attach-panel,
#page-chat .staged-area,
#page-chat .group-reply-targets {
    flex: 0 0 auto;
}
#page-wordcards .msg-row.user,
#page-chat .msg-row.user {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-left: 0;
}
#page-wordcards .msg-row.user .msg-body,
#page-chat .msg-row.user .msg-body {
    align-items: flex-end;
}
#page-wordcards .msg-row.user .bubble,
#page-wordcards .msg-row.user .voice-bubble,
#page-chat .msg-row.user .bubble,
#page-chat .msg-row.user .voice-bubble {
    margin-left: auto;
}

@media (min-width: 900px) {
    #app {
        left: 300px;
        width: calc(100% - 300px);
        transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
            width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar-overlay {
        width: 300px;
        right: auto;
        opacity: 1;
        pointer-events: none;
        background: transparent;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .sidebar {
        width: 300px;
        transform: none;
        box-shadow: none;
        pointer-events: auto;
    }
    #btn-sidebar {
        visibility: hidden;
        pointer-events: none;
    }
    .sidebar-dock-toggle {
        position: absolute;
        top: 50%;
        right: -32px;
        z-index: 2;
        width: 32px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        transform: translateY(-50%);
        border: 0;
        border-radius: 6px;
        color: var(--text3);
        background: transparent;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .sidebar-dock-toggle svg {
        width: 18px;
        height: 18px;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .sidebar-dock-toggle:hover,
    .sidebar-dock-toggle:active {
        color: var(--text);
        background: transparent;
    }
    body.sidebar-collapsed #app {
        left: 0;
        width: 100%;
    }
    body.sidebar-collapsed .sidebar-overlay {
        width: 0;
        overflow: visible;
    }
    body.sidebar-collapsed .sidebar {
        transform: translateX(-100%);
        box-shadow: none;
    }
    body.sidebar-collapsed .sidebar-title,
    body.sidebar-collapsed .sidebar-main,
    body.sidebar-collapsed #sidebar-user-profile {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
    body.sidebar-collapsed .sidebar-dock-toggle svg {
        transform: rotate(180deg);
    }
    .page {
        max-width: none;
    }
    .chat-messages {
        padding-left: 28px;
        padding-right: 28px;
    }
    .msg-body {
        max-width: min(68%, 650px);
    }
    .msg-row.ai .msg-body {
        max-width: min(76%, 700px);
    }
    .msg-row.user .msg-body {
        max-width: min(64%, 580px);
    }
}

@media (max-width: 390px) {
    .topbar {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    #page-wordcards>.topbar,
    #page-chat>.topbar {
        left: 0;
        right: 0;
        width: 100%;
    }
    .conv-list {
        padding-left: 8px;
        padding-right: 8px;
    }
    .chat-messages {
        padding-left: 14px;
        padding-right: 14px;
    }
    .msg-body {
        max-width: min(78%, calc(100% - 56px));
    }
    .msg-row.ai .msg-body {
        max-width: min(84%, calc(100% - 52px));
    }
    .msg-row.user {
        padding-left: 42px;
    }
    .msg-row.user .msg-body {
        max-width: min(76%, calc(100% - 54px));
    }
    #page-wordcards .msg-row.user,
    #page-chat .msg-row.user {
        padding-left: 0;
    }
    .input-bar {
        width: calc(100% - 20px);
        gap: 7px;
    }
    .chat-model-btn {
        max-width: 96px;
    }
    #page-chat .chat-search-bar {
        width: calc(100% - 16px);
        grid-template-columns: minmax(0, 1fr) 34px;
        margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
    }
    #page-chat.search-open .chat-messages {
        padding-top: 10px;
        scroll-padding-top: 10px;
    }
    #page-chat .chat-search-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-end;
        padding-top: 2px;
    }
    #page-chat .chat-search-close {
        grid-column: 2;
        grid-row: 1;
    }
}

#page-chat #chat-messages::before {
    content: '';
    display: block;
    margin-top: auto;
    flex: 0 0 auto;
}
#chat-date-stamp:empty {
    display: none;
}
#input-bar,
#attach-panel {
    transform: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   iMESSAGE GLASS CHAT — adapted for this frontend
   ═══════════════════════════════════════════════════════════════ */

/* 气泡形态保留 (双实心+尾巴), 颜色重定向到纸感令牌 —— 自动随亮/暗模式 */
#page-wordcards,
#page-chat {
    --im-glass: var(--surface);
    --im-glass-border: var(--border);
    --im-glass-shadow: none;
    --im-user: var(--accent);
    --im-user-text: #fff;
    --im-ai: var(--surface);
    --im-ai-text: var(--text);
    --im-meta: var(--text3);
    --im-line: var(--border);
}

/* The chat top bar intentionally keeps the frontend's original compact layout. */

#page-chat .date-stamp {
    margin: 10px 0 12px;
    padding: 0 !important;
    color: var(--im-meta) !important;
    font-size: 11px !important;
    font-weight: 500;
    letter-spacing: 0;
}

#page-chat .date-stamp:not(:empty)::before {
    content: "iMessage · ";
}

/* Bubble grouping */
#page-wordcards .msg-row,
#page-chat .msg-row {
    align-items: flex-end !important;
    gap: 8px !important;
    margin: 0 !important;
}

#page-wordcards .msg-row + .msg-row,
#page-chat .msg-row + .msg-row {
    margin-top: 4px !important;
}

#page-wordcards .msg-row.ai + .msg-row.user,
#page-wordcards .msg-row.user + .msg-row.ai,
#page-chat .msg-row.ai + .msg-row.user,
#page-chat .msg-row.user + .msg-row.ai {
    margin-top: 15px !important;
}

#page-wordcards .msg-row.user,
#page-chat .msg-row.user {
    padding-left: 44px !important;
}

#page-wordcards .msg-row.ai,
#page-chat .msg-row.ai {
    padding-right: 44px !important;
}

#page-wordcards .msg-avatar,
#page-chat .msg-avatar {
    width: var(--chat-avatar-size, 30px) !important;
    height: var(--chat-avatar-size, 30px) !important;
    margin: 0 !important;
    align-self: flex-end !important;
    border: 1px solid var(--border);
    box-shadow: none;
}

html[data-chat-avatar-mode="end"] #page-wordcards .msg-row.ai:has(+ .msg-row.ai) .msg-avatar,
html[data-chat-avatar-mode="end"] #page-wordcards .msg-row.user:has(+ .msg-row.user) .msg-avatar,
html[data-chat-avatar-mode="start"] #page-wordcards .msg-row.ai + .msg-row.ai .msg-avatar,
html[data-chat-avatar-mode="start"] #page-wordcards .msg-row.user + .msg-row.user .msg-avatar,

html[data-chat-avatar-mode="end"] #page-chat .msg-row.ai:has(+ .msg-row.ai) .msg-avatar,
html[data-chat-avatar-mode="end"] #page-chat .msg-row.user:has(+ .msg-row.user) .msg-avatar,
html[data-chat-avatar-mode="start"] #page-chat .msg-row.ai + .msg-row.ai .msg-avatar,
html[data-chat-avatar-mode="start"] #page-chat .msg-row.user + .msg-row.user .msg-avatar {
    visibility: hidden !important;
    opacity: 0 !important;
}

html[data-chat-avatar-mode="none"] #page-wordcards .msg-row .msg-avatar,

html[data-chat-avatar-mode="none"] #page-chat .msg-row .msg-avatar {
    display: none !important;
}

html[data-chat-avatar-mode="none"] #page-wordcards .msg-row,

html[data-chat-avatar-mode="none"] #page-chat .msg-row {
    gap: 0 !important;
}

/* A reasoning trace belongs to the following assistant reply; it is not another
   spoken bubble and therefore must never receive its own avatar. Keep it aligned
   with assistant content while avatar display is enabled. */
#page-chat .thinking-segment-row {
    padding-left: calc(var(--chat-avatar-size, 30px) + 8px);
}

html[data-chat-avatar-mode="none"] #page-chat .thinking-segment-row {
    padding-left: 0;
}

html[data-chat-avatar-mode="start"] #page-wordcards .thinking-segment-row + .msg-row.ai .msg-avatar,

html[data-chat-avatar-mode="start"] #page-chat .thinking-segment-row + .msg-row.ai .msg-avatar {
    visibility: visible !important;
    opacity: 1 !important;
}

#page-wordcards .msg-body,
#page-wordcards .msg-row.ai .msg-body,
#page-wordcards .msg-row.user .msg-body,
#page-chat .msg-body,
#page-chat .msg-row.ai .msg-body,
#page-chat .msg-row.user .msg-body {
    max-width: min(82%, 620px) !important;
    gap: 3px !important;
}

#page-wordcards .bubble,
#page-wordcards .voice-bubble,
#page-wordcards .voice-loading,
#page-chat .bubble,
#page-chat .voice-bubble,
#page-chat .voice-loading {
    position: relative;
    width: fit-content;
    max-width: 100%;
    padding: 8px 14px !important;
    border: 0 !important;
    border-radius: 22px !important;
    box-shadow: none !important;
    line-height: 1.58 !important;
    overflow-wrap: anywhere;
}

#page-wordcards .msg-row.user .bubble,
#page-wordcards .msg-row.user .voice-bubble,
#page-chat .msg-row.user .bubble,
#page-chat .msg-row.user .voice-bubble {
    background: var(--im-user) !important;
    color: var(--im-user-text) !important;
}

#page-wordcards .msg-row.ai .bubble,
#page-wordcards .msg-row.ai .voice-bubble,
#page-wordcards .msg-row.ai .voice-loading,
#page-chat .msg-row.ai .bubble,
#page-chat .msg-row.ai .voice-bubble,
#page-chat .msg-row.ai .voice-loading {
    padding-left: 15px !important;
    padding-right: 15px !important;
    background: var(--im-ai) !important;
    color: var(--im-ai-text) !important;
}

/* Tails only appear at the end of a consecutive run. */
#page-wordcards .msg-row.user:not(:has(+ .msg-row.user)) .bubble:last-of-type::after,
#page-wordcards .msg-row.user:not(:has(+ .msg-row.user)) .voice-bubble:last-of-type::after,
#page-chat .msg-row.user:not(:has(+ .msg-row.user)) .bubble:last-of-type::after,
#page-chat .msg-row.user:not(:has(+ .msg-row.user)) .voice-bubble:last-of-type::after {
    content: "";
    position: absolute;
    right: -5px;
    bottom: 0;
    width: 14px;
    height: 15px;
    background: var(--im-user);
    clip-path: polygon(0 0, 0 100%, 100% 100%);
    border-bottom-right-radius: 8px;
    pointer-events: none;
}

#page-wordcards .msg-row.ai:not(:has(+ .msg-row.ai)) .bubble:last-of-type::after,
#page-wordcards .msg-row.ai:not(:has(+ .msg-row.ai)) .voice-bubble:last-of-type::after,
#page-chat .msg-row.ai:not(:has(+ .msg-row.ai)) .bubble:last-of-type::after,
#page-chat .msg-row.ai:not(:has(+ .msg-row.ai)) .voice-bubble:last-of-type::after {
    content: "";
    position: absolute;
    left: -5px;
    bottom: 0;
    width: 14px;
    height: 15px;
    background: var(--im-ai);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
    border-bottom-left-radius: 8px;
    pointer-events: none;
}

#page-chat .bubble-time {
    padding: 0 5px !important;
    color: var(--im-meta) !important;
    font-size: 10px !important;
    line-height: 14px;
}

/* Stable, responsive quote treatment—no hard-coded cross-screen offsets. */
#page-chat .bubble-quote,
#page-wordcards .bubble-quote {
    max-width: min(250px, 62vw);
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    overflow: hidden;
    white-space: normal;
    border: 0 !important;
    outline: 0 !important;
    box-shadow:none !important;
    border-radius: 14px !important;
    background: color-mix(in srgb,var(--text) 12%,var(--bg)) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    line-height: 1.5;
}

#page-chat .msg-row.user .bubble-quote,
#page-wordcards .msg-row.user .bubble-quote {
    background: color-mix(in srgb,var(--text) 12%,var(--bg)) !important;
    color: var(--text) !important;
}
.bubble-quote-header { display:flex; align-items:center; gap:12px; margin-bottom:3px; }
.bubble-quote-speaker { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:650; }
.bubble-quote-header svg { width:18px; height:18px; flex:0 0 18px; color:var(--text3); }
.bubble-quote-header .bubble-quote-jump { display:flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; padding:0; border:0; border-radius:6px; background:transparent; color:inherit; cursor:pointer; }
.bubble-quote-jump:focus-visible { outline:2px solid var(--text3); outline-offset:2px; }
.quote-location-focus .bubble { box-shadow:0 0 0 2px var(--text3); }
.bubble-quote-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; white-space:pre-wrap; }

/* Composer overlay: one structural layer, no separator. */
#page-wordcards .chat-messages,
#page-chat .chat-messages {
    min-height: 0;
    padding-bottom: calc(var(--chat-compose-height, 76px) + 18px) !important;
    scroll-padding-bottom: calc(var(--chat-compose-height, 76px) + 18px);
    overscroll-behavior-y: contain;
}

#page-chat .chat-compose-stack {
    position: absolute !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5 !important;
    display: flex;
    flex-direction: column;
    background: transparent;
    pointer-events: none;
}



#page-chat .chat-compose-stack > * {
    pointer-events: auto;
}

#page-wordcards .input-bar,
#page-chat .input-bar {
    position: relative !important;
    width: min(820px, 100%) !important;
    min-height: 58px;
    margin: 0 auto !important;
    padding: 8px max(10px, var(--safe-right)) calc(8px + var(--safe-bottom)) max(10px, var(--safe-left)) !important;
    gap: 8px !important;
    align-items: flex-end !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#page-chat .input-plus {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
    border-radius: 50% !important;
    color: var(--text2) !important;
}

#page-chat .input-plus.active {
    transform: rotate(45deg) !important;
}

#page-wordcards .input-wrap,
#page-chat .input-wrap {
    min-height: 42px !important;
    padding: 9px 46px 9px 16px !important;
    background: var(--im-glass) !important;
    border: 1px solid var(--im-glass-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--im-glass-shadow) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#page-wordcards .input-wrap:focus-within,
#page-chat .input-wrap:focus-within {
    border-color: var(--accent) !important;
    background: var(--im-glass) !important;
    box-shadow: none !important;
}

#page-wordcards .input-wrap textarea,
#page-chat .input-wrap textarea {
    color: var(--text) !important;
    font-family: var(--font-body);
    font-size: max(16px, var(--font-size, 14px));
    line-height: 1.5;
    max-height: min(132px, 28dvh);
    overscroll-behavior-y: contain;
}

#page-wordcards .input-wrap textarea::placeholder,
#page-chat .input-wrap textarea::placeholder {
    color: var(--im-meta) !important;
    opacity: 1 !important;
}

#page-wordcards .send-btn,
#page-chat .send-btn {
    position: absolute !important;
    right: max(16px, calc(var(--safe-right) + 6px)) !important;
    bottom: calc(14px + var(--safe-bottom)) !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    border-radius: 50% !important;
    background: var(--accent) !important;
    color: #fff !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    opacity: .32 !important;
    z-index: 2;
}

#page-wordcards .send-btn.ready,
#page-chat .send-btn.ready {
    opacity: 1 !important;
}

#page-wordcards .send-btn:active,
#page-chat .send-btn:active {
    transform: scale(.92) !important;
}

#page-wordcards .send-btn svg,
#page-chat .send-btn svg {
    width: 14px !important;
    height: 14px !important;
}

#page-chat .attach-panel,
#page-chat .staged-area,
#page-chat .group-reply-targets,
#page-chat .quote-preview,
#page-wordcards .quote-preview {
    width: min(800px, calc(100% - 20px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#page-chat .attach-panel:not(.open) {
    background: transparent !important;
    border-color: transparent !important;
}

#page-chat .attach-menu-icon {
    background: var(--surface2) !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-md) !important;
}

#page-chat .red-packet {
    border-radius: var(--radius-lg) !important;
    background: var(--surface2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    box-shadow: none;
}

#page-chat .red-packet.claimed {
    opacity: .72;
}

#page-chat .red-packet-footer {
    border-top-color: var(--border) !important;
}

@media (max-width: 390px) {
    #page-wordcards .chat-messages,
    #page-chat .chat-messages { padding-left: 10px !important; padding-right: 10px !important; }
    #page-wordcards .msg-row.user,
    #page-chat .msg-row.user { padding-left: 28px !important; }
    #page-wordcards .msg-row.ai,
    #page-chat .msg-row.ai { padding-right: 28px !important; }
    #page-wordcards .msg-body,
    #page-wordcards .msg-row.ai .msg-body,
    #page-wordcards .msg-row.user .msg-body,
    #page-chat .msg-body,
    #page-chat .msg-row.ai .msg-body,
    #page-chat .msg-row.user .msg-body { max-width: min(82%, calc(100% - 40px)) !important; }
}

/* Final composer cleanup: remove every possible horizontal separator. */
#page-chat .chat-compose-stack::before,
#page-chat .chat-compose-stack::after {
    content: none !important;
    display: none !important;
}

#page-chat .chat-compose-stack > .attach-panel,
#page-chat .chat-compose-stack > .staged-area,
#page-chat .chat-compose-stack > .group-reply-targets,
#page-chat .chat-compose-stack > .quote-preview,
#page-wordcards #wordcards-reply-preview {
    border-top: 0 !important;
    box-shadow: none !important;
}

#page-chat .attach-panel:not(.open) {
    border: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

/* iOS 26 Messages-inspired conversation header. */
#page-wordcards,
#page-chat {
    --nav-h: 90px;
}

body.chat-keyboard-open #page-wordcards,

body.chat-keyboard-open #page-chat {
    --safe-bottom: 0px;
}

#page-wordcards > .topbar,
#page-chat > .topbar {
    height: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) !important;
    padding: env(safe-area-inset-top, 0px) 10px 0 !important;
    display: block !important;
    background: var(--bg) !important;
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--bg) 98%, transparent) 0,
        color-mix(in srgb, var(--bg) 92%, transparent) calc(env(safe-area-inset-top, 0px) + 4px),
        color-mix(in srgb, var(--bg) 38%, transparent) calc(env(safe-area-inset-top, 0px) + 36px),
        color-mix(in srgb, var(--bg) 16%, transparent) calc(env(safe-area-inset-top, 0px) + 64px),
        transparent calc(env(safe-area-inset-top, 0px) + 96px)
    ) !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#page-wordcards .chat-topbar-leading,
#page-wordcards .chat-topbar-actions,
#page-chat .chat-topbar-leading,
#page-chat .chat-topbar-actions {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 18px);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 7px;
}

#page-wordcards .chat-topbar-leading,
#page-chat .chat-topbar-leading {
    left: 10px;
}

#page-wordcards .chat-topbar-actions,
#page-chat .chat-topbar-actions {
    right: 10px;
}

#page-wordcards .topbar-btn,
#page-wordcards .chat-model-btn,
#page-chat .topbar-btn,
#page-chat .chat-model-btn {
    height: 40px !important;
    min-width: 40px;
    background: var(--im-glass) !important;
    border: 1px solid var(--im-glass-border) !important;
    box-shadow: var(--im-glass-shadow) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
}

#page-wordcards .topbar-btn,
#page-chat .topbar-btn {
    width: 40px !important;
    border-radius: 50% !important;
}

#page-wordcards .topbar-btn:active,
#page-wordcards .chat-model-btn:active,
#page-wordcards .chat-identity-btn:active,
#page-chat .topbar-btn:active,
#page-chat .chat-model-btn:active,
#page-chat .chat-identity-btn:active {
    transform: scale(.94);
    background: rgba(255, 255, 255, .78) !important;
}

#page-wordcards .chat-identity-btn,
#page-chat .chat-identity-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 4px);
    left: 50%;
    z-index: 3;
    width: min(168px, 42vw);
    height: 82px;
    padding: 4px 12px 5px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: transform 150ms ease, opacity 150ms ease;
}

#page-wordcards .chat-identity-btn:active,
#page-chat .chat-identity-btn:active {
    transform: translateX(-50%) scale(.96);
    background: transparent !important;
    opacity: .72;
}

[data-theme="dark"] #page-wordcards .chat-identity-btn,
[data-theme="dark"] #page-chat .chat-identity-btn {
    background: transparent;
    box-shadow: none;
}

[data-theme="dark"] #page-wordcards .topbar-btn:active,
[data-theme="dark"] #page-wordcards .chat-model-btn:active,
[data-theme="dark"] #page-wordcards .chat-identity-btn:active,
[data-theme="dark"] #page-chat .topbar-btn:active,
[data-theme="dark"] #page-chat .chat-model-btn:active,
[data-theme="dark"] #page-chat .chat-identity-btn:active {
    background: rgba(72, 72, 74, .82) !important;
}

[data-theme="dark"] #page-wordcards .chat-identity-btn:active,
[data-theme="dark"] #page-chat .chat-identity-btn:active {
    background: transparent !important;
}

#page-wordcards .chat-header-avatar,
#page-chat .chat-header-avatar {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--surface2);
    border: 1px solid rgba(255, 255, 255, .72);
    box-shadow: 0 2px 8px rgba(28, 28, 30, .12);
    color: var(--text2);
    font-size: 17px;
    font-weight: 600;
}

#page-wordcards .chat-header-avatar.is-group,
#page-chat .chat-header-avatar.is-group {
    position: relative;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}

#page-wordcards .chat-header-avatar-part,
#page-chat .chat-header-avatar-part {
    position: absolute;
    width: 33px;
    height: 33px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--surface2);
    border: 1.5px solid var(--bg);
    font-size: 11px;
}

#page-wordcards .chat-header-avatar-part-1,
#page-chat .chat-header-avatar-part-1 { left: 1px; top: 0; }
#page-wordcards .chat-header-avatar-part-2,
#page-chat .chat-header-avatar-part-2 { right: 1px; top: 0; }
#page-wordcards .chat-header-avatar-part-3,
#page-chat .chat-header-avatar-part-3 { left: 9px; bottom: -1px; }

#page-wordcards .chat-identity-meta,
#page-chat .chat-identity-meta {
    min-width: 0;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    color: var(--text2);
}

#page-wordcards > .topbar .chat-identity-meta .topbar-title,
#page-chat > .topbar .chat-identity-meta .topbar-title {
    min-width: 0;
    max-width: 124px;
    margin: 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text2) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 14px;
    text-align: center;
}

#page-wordcards .chat-identity-chevron,
#page-chat .chat-identity-chevron {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    color: var(--im-meta);
}

#page-chat .typing-status {
    margin: 0;
    padding: 0;
    font-size: 10px;
    line-height: 14px;
}

#page-wordcards .chat-model-btn,
#page-chat .chat-model-btn {
    max-width: 112px;
    border-radius: 20px !important;
}

#page-chat .chat-search-bar {
    margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
}

@media (max-width: 430px) {
    #page-wordcards .chat-identity-btn,
    #page-chat .chat-identity-btn {
        width: min(148px, 39vw);
    }

    #page-wordcards .chat-model-btn,

    #page-chat .chat-model-btn {
        width: 40px;
        max-width: 40px;
        padding: 0 !important;
        justify-content: center;
    }

    #page-wordcards .chat-model-btn span,

    #page-chat .chat-model-btn span {
        display: none;
    }
}

@media (max-width: 360px) {
    #page-wordcards .chat-identity-btn,
    #page-chat .chat-identity-btn {
        width: 132px;
    }

    #page-wordcards .chat-topbar-actions,

    #page-chat .chat-topbar-actions {
        gap: 5px;
    }
}

/* ─── Shared listening ─── */
#page-music {
    background: var(--bg);
}

.music-board {
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(112px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
}

.music-board::-webkit-scrollbar { display: none; }

.music-head {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.music-head > div { min-width: 0; text-align: center; }
.music-head span,
.music-section-head span {
    display: block;
    color: var(--text3);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
}

.music-head h1 {
    margin-top: 3px;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
}

.music-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: var(--text2);
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    border: 1px solid var(--border);
    border-radius: 50%;
    box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow) 45%, transparent);
}

.music-icon-btn:active { transform: scale(.94); }
.music-icon-btn svg { width: 19px; height: 19px; }

.music-mini {
    position: fixed;
    z-index: 68;
    left: max(14px, calc((100vw - 480px) / 2 + 14px));
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: min(270px, calc(100vw - 100px));
    height: 58px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 18px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 52%, transparent);
    backdrop-filter: blur(22px) saturate(1.15);
    -webkit-backdrop-filter: blur(22px) saturate(1.15);
    transition: box-shadow .18s ease, opacity .18s ease;
}

.music-mini[hidden] { display: none; }
.music-mini.dragging {
    opacity: .92;
    box-shadow: 0 18px 38px color-mix(in srgb, var(--shadow) 62%, transparent);
}
.music-mini-main {
    min-width: 0;
    flex: 1;
    height: 46px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.music-mini-cover {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--text3);
    background: var(--bg2);
    border-radius: 12px;
    font-family: var(--font-display);
    font-size: 20px;
}
.music-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-mini.playing .music-mini-cover img { animation: musicMiniPulse 2.4s ease-in-out infinite; }
.music-mini-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.music-mini-copy strong,
.music-mini-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-mini-copy strong { font-size: 13px; font-weight: 680; }
.music-mini-copy small { color: var(--text3); font-size: 11px; }
.music-mini.waiting .music-mini-copy small { color: var(--accent); }
.music-mini-play {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text);
    background: color-mix(in srgb, var(--bg2) 84%, transparent);
    border: 0;
    border-radius: 50%;
}
.music-mini-play:active { transform: scale(.92); }
.music-mini-play svg { width: 19px; height: 19px; fill: currentColor; }
.music-mini-pause-icon,
.music-mini.playing .music-mini-play-icon { display: none; }
.music-mini.playing .music-mini-pause-icon { display: block; }
.music-mini-close {
    width: 28px;
    height: 40px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text3);
    background: transparent;
    border: 0;
}
.music-mini-close:active { transform: scale(.9); }
.music-mini-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@keyframes musicMiniPulse { 50% { transform: scale(1.035); } }

.music-lyric-float {
    position: fixed;
    z-index: 71;
    left: 50%;
    bottom: calc(82px + env(safe-area-inset-bottom));
    width: min(430px, calc(100vw - 24px));
    max-height: min(270px, 48dvh);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 20px;
    box-shadow: 0 16px 42px color-mix(in srgb, var(--shadow) 60%, transparent);
    backdrop-filter: blur(24px) saturate(1.16);
    -webkit-backdrop-filter: blur(24px) saturate(1.16);
    transform: translateX(-50%);
}
.music-lyric-float[hidden] { display: none; }
.music-lyric-float-head {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.music-lyric-float-track {
    min-width: 0;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    text-align: left;
}
.music-lyric-float-cover {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--text3);
    background: var(--bg2);
    border-radius: 11px;
}
.music-lyric-float-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-lyric-float-track > span:last-child { min-width: 0; display: grid; gap: 2px; }
.music-lyric-float-track strong { overflow: hidden; font-size: 12px; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; }
.music-lyric-float-track small { display: flex; gap: 7px; overflow: hidden; color: var(--text3); font-size: 10px; }
.music-lyric-float-track small > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-lyric-float-track time { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.music-lyric-float-play,
.music-lyric-float-close {
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 50%;
}
.music-lyric-float-play { width: 36px; height: 36px; background: var(--bg2); }
.music-lyric-float-close { width: 28px; height: 36px; color: var(--text3); }
.music-lyric-float-play svg { width: 17px; height: 17px; fill: currentColor; }
.music-lyric-float-close svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.music-lyric-float-pause-icon,
.music-lyric-float.playing .music-lyric-float-play-icon { display: none; }
.music-lyric-float.playing .music-lyric-float-pause-icon { display: block; }
.music-lyric-float-lines {
    min-height: 92px;
    overflow-y: auto;
    padding: 35px 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.music-lyric-float-lines::-webkit-scrollbar { display: none; }
.music-lyric-float-state {
    min-height: 34px;
    display: grid;
    place-items: center;
    color: var(--text3);
    font-size: 11px;
    font-weight: 500;
}
.music-lyric-float-line {
    width: 100%;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
    align-items: start;
    padding: 6px 8px;
    color: var(--text3);
    background: transparent;
    border: 0;
    border-radius: 10px;
    text-align: left;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.music-lyric-float-line time { padding-top: 2px; font-size: 9px; font-variant-numeric: tabular-nums; opacity: .72; }
.music-lyric-float-line span { min-width: 0; display: grid; gap: 2px; }
.music-lyric-float-line b { font-size: 12px; font-weight: 560; line-height: 1.45; }
.music-lyric-float-line small { font-size: 10px; line-height: 1.35; opacity: .72; }
.music-lyric-float-line.active { color: var(--text); transform: scale(1.015); }
.music-lyric-float-line.selected { color: var(--accent); background: var(--accent-dim); }
.music-lyric-float-line.active.selected { color: var(--accent); }
.music-lyric-float-actions {
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 9px 8px 13px;
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}
.music-lyric-float-actions[hidden] { display: none; }
.music-lyric-float-actions span { color: var(--text3); font-size: 10px; }
.music-lyric-float-actions button {
    padding: 7px 12px;
    color: var(--accent-contrast, #fff);
    background: var(--accent);
    border: 0;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 650;
}

body.chat-keyboard-open .music-lyric-float {
    bottom: calc(72px + env(safe-area-inset-bottom));
    max-height: min(225px, 44dvh);
}

.music-together {
    position: relative;
    min-height: 154px;
    display: grid;
    grid-template-columns: 78px 78px;
    align-items: start;
    justify-content: center;
    gap: 24px;
    margin: 0 auto -14px;
    padding: 0 2px;
}

.music-person {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.music-avatar {
    width: 74px;
    height: 74px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: var(--text2);
    background: var(--surface);
    border: 5px solid color-mix(in srgb, var(--surface) 88%, var(--bg2));
    border-radius: 50%;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow) 38%, transparent);
    font-family: var(--font-display);
    font-size: 21px;
}

.music-avatar img { width: 100%; height: 100%; object-fit: cover; }
.music-person strong {
    width: 100%;
    overflow: hidden;
    color: var(--text2);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-together-copy {
    position: absolute;
    z-index: 2;
    top: 108px;
    right: 0;
    left: 0;
    padding: 0 16px;
    text-align: center;
}

.music-together-copy span,
.music-together-copy strong { display: inline; color: var(--text3); font-size: 11px; font-weight: 500; }
.music-together-copy strong::before { content: ' · '; }

.music-wire {
    position: absolute;
    z-index: 1;
    top: 45px;
    width: 92px;
    height: 91px;
    border-bottom: 2px solid color-mix(in srgb, var(--text3) 38%, transparent);
}

.music-wire::before {
    content: '';
    position: absolute;
    top: -4px;
    width: 11px;
    height: 7px;
    background: var(--text2);
    border-radius: 7px;
}

.music-wire-left {
    left: calc(50% - 105px);
    border-left: 2px solid color-mix(in srgb, var(--text3) 38%, transparent);
    border-bottom-left-radius: 54px;
}
.music-wire-left::before { left: -6px; transform: rotate(12deg); }
.music-wire-right {
    right: calc(50% - 105px);
    border-right: 2px solid color-mix(in srgb, var(--text3) 38%, transparent);
    border-bottom-right-radius: 54px;
}
.music-wire-right::before { right: -6px; transform: rotate(-12deg); }

.music-stage {
    position: relative;
    z-index: 2;
    padding: 18px 14px 16px;
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 18px;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow) 47%, transparent),
                0 1px 0 rgba(255, 255, 255, .7) inset;
}

.music-player-visual {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(126px, .82fr);
    align-items: center;
    gap: 8px;
}

.music-cover-deck {
    position: relative;
    height: 232px;
    margin: 0 -12px 8px;
    perspective: 700px;
    touch-action: pan-y;
}

.music-cover-card {
    position: absolute;
    top: 34px;
    left: 50%;
    width: 166px;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: 12px;
    color: #292621;
    background: #E8E5DF;
    border: 6px solid rgba(255, 255, 255, .78);
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(34, 30, 27, .12);
    text-align: left;
    transform-origin: 50% 100%;
    transition: opacity .24s ease, transform .24s ease;
}

.music-cover-card span { color: rgba(30, 27, 24, .45); font-family: var(--font-display); font-size: 23px; }
.music-cover-card b { overflow: hidden; font-size: 11px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.music-cover-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-cover-card.has-cover b { display: none; }
.music-cover-left {
    z-index: 2;
    background: #D8D1C7;
    opacity: .24;
    transform: translateX(-118%) rotate(-4deg) scale(.82);
}
.music-cover-far-left {
    z-index: 1;
    background: #C9C8C3;
    opacity: .08;
    transform: translateX(-159%) rotate(-7deg) scale(.72);
}
.music-cover-current {
    z-index: 4;
    top: 12px;
    width: min(44vw, 208px);
    background: #F1EEE8;
    border-color: rgba(255, 255, 255, .9);
    border-radius: 15px;
    box-shadow: 0 20px 42px rgba(34, 30, 27, .2), 0 3px 10px rgba(34, 30, 27, .1);
    transform: translateX(-62%);
    cursor: pointer;
}
.music-cover-current span { font-size: 42px; }
.music-cover-current b { font-size: 13px; }
.music-cover-right {
    z-index: 2;
    background: #D3D7D4;
    opacity: .24;
    transform: translateX(69%) rotate(4deg) scale(.82);
}
.music-cover-far-right {
    z-index: 1;
    background: #C5C3BF;
    opacity: .08;
    transform: translateX(110%) rotate(7deg) scale(.72);
}

.music-vinyl {
    position: absolute;
    z-index: 3;
    top: 25px;
    left: 50%;
    width: min(39vw, 182px);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, #d8d4ce 0 7%, #f1eee9 7.5% 12%, transparent 12.5%),
        repeating-radial-gradient(circle at center, rgba(255,255,255,.12) 0 1px, rgba(27,25,24,.08) 2px 4px),
        #6f6c68;
    box-shadow: 12px 18px 32px rgba(34, 30, 27, .18);
    transform: translateX(-2%);
    transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}
.music-vinyl i {
    position: absolute;
    inset: 42%;
    border-radius: 50%;
    background: #f5f2ed;
    box-shadow: 0 0 0 8px rgba(235, 230, 222, .55);
}
.music-cover-deck.switching-next .music-vinyl { animation: none !important; transform: translateX(4%) rotate(12deg); }
.music-cover-deck.switching-previous .music-vinyl { animation: none !important; transform: translateX(-8%) rotate(-12deg); }

.music-lyrics {
    height: 196px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    padding: 8px 5px 8px 14px;
    text-align: center;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    scrollbar-width: none;
}
.music-lyrics::-webkit-scrollbar { display: none; }
.music-lyrics[hidden] { display: none; }
.music-player-visual.lyrics-open { grid-template-columns: 1fr; }
.music-player-visual.lyrics-open .music-cover-deck { display: none; }
.music-player-visual.lyrics-open .music-lyrics {
    height: 232px;
    padding: 18px 12px;
    justify-content: flex-start;
    overflow-y: auto;
}
.music-lyric-line {
    flex: 0 0 auto;
    width: 100%;
    padding: 7px 6px;
    opacity: .38;
    transition: opacity .2s ease, transform .2s ease;
}
.music-lyric-line b,
.music-lyric-line small {
    display: block;
    overflow: hidden;
    font-family: var(--font-display);
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-lyric-line b { font-size: 14px; font-weight: 560; }
.music-lyric-line small { margin-top: 3px; color: var(--text3); font-size: 11px; }
.music-lyric-line.active { opacity: 1; transform: scale(1.025); }
.music-lyric-line.active b { font-weight: 720; }
.music-lyrics-state { margin: auto; }
.music-lyrics span,
.music-lyrics strong {
    display: block;
    overflow: hidden;
    color: var(--text3);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.music-lyrics span:first-child,
.music-lyrics span:last-child { opacity: .34; }
.music-lyrics strong {
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    transform: scale(1.02);
}

.music-cover-deck.switching-next .music-cover-current {
    animation: music-cover-next .43s cubic-bezier(.32, .72, 0, 1);
}
.music-cover-deck.switching-previous .music-cover-current {
    animation: music-cover-previous .43s cubic-bezier(.32, .72, 0, 1);
}

@keyframes music-cover-next {
    0% { opacity: 1; transform: translateX(-62%) scale(1); }
    40% { opacity: 0; transform: translateX(-116%) rotate(-4deg) scale(.82); }
    41% { opacity: 0; transform: translateX(18%) rotate(4deg) scale(.82); }
    100% { opacity: 1; transform: translateX(-62%) scale(1); }
}

@keyframes music-cover-previous {
    0% { opacity: 1; transform: translateX(-62%) scale(1); }
    40% { opacity: 0; transform: translateX(18%) rotate(4deg) scale(.82); }
    41% { opacity: 0; transform: translateX(-116%) rotate(-4deg) scale(.82); }
    100% { opacity: 1; transform: translateX(-62%) scale(1); }
}

#page-music.music-playing .music-vinyl { animation: music-vinyl-spin 12s linear infinite; }
@keyframes music-vinyl-spin {
    from { transform: translateX(-2%) rotate(0); }
    to { transform: translateX(-2%) rotate(360deg); }
}

.music-track-copy { min-width: 0; padding: 3px 14px 0; text-align: center; }
.music-track-copy h2 { overflow: hidden; font-size: 18px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.music-track-copy p { margin-top: 4px; overflow: hidden; color: var(--text3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.music-track-copy blockquote {
    min-height: 20px;
    margin-top: 12px;
    overflow: hidden;
    color: var(--text2);
    font-family: var(--font-display);
    font-size: 13px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.music-progress {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--text3);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}
.music-progress > span:last-child { text-align: right; }
.music-progress-track { position: relative; height: 18px; display: flex; align-items: center; }
.music-progress-track::before { content: ''; width: 100%; height: 4px; background: var(--bg3); border-radius: 3px; transition: height .16s ease; }
.music-progress-track i { position: absolute; left: 0; width: 0; height: 4px; background: var(--text); border-radius: 3px; pointer-events: none; transition: height .16s ease; }
.music-progress-track i::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    width: 12px;
    height: 12px;
    background: var(--text);
    border-radius: 50%;
    opacity: 0;
    transform: translateY(-50%) scale(.6);
    transition: opacity .16s ease, transform .16s ease;
}
.music-progress-track input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    touch-action: none;
}
.music-progress-track.seeking::before,
.music-progress-track.seeking i { height: 7px; }
.music-progress-track.seeking i::after { opacity: 1; transform: translateY(-50%) scale(1); }

.music-controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 8px; }
.music-control { width: 40px; height: 40px; display: grid; place-items: center; color: var(--text); border-radius: 50%; }
.music-control:active { background: var(--surface2); transform: scale(.92); }
.music-control svg { width: 23px; height: 23px; fill: currentColor; }
.music-control.music-play { width: 62px; height: 62px; color: var(--surface); background: var(--text); box-shadow: 0 12px 24px color-mix(in srgb, var(--shadow) 50%, transparent); }
.music-control.music-play svg { width: 27px; height: 27px; }
.music-pause-icon { display: none; }
.music-play.playing .music-play-icon { display: none; }
.music-play.playing .music-pause-icon { display: block; }

.music-library { margin-top: 25px; }
.music-section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 4px 12px; }
.music-section-head h2 { margin-top: 3px; font-family: var(--font-display); font-size: 23px; font-weight: 600; }
.music-section-head button { padding: 7px 11px; color: var(--text2); background: var(--surface); border: 1px solid var(--border); border-radius: 15px; font-size: 11px; }
.music-icon-btn.connected,
#music-login-cta { transition: color .2s ease, border-color .2s ease; }
.music-icon-btn.connected { color: #d85b3f; border-color: rgba(216, 91, 63, .28); }
.music-playlists { overflow: hidden; background: color-mix(in srgb, var(--surface) 92%, var(--bg)); border: 1px solid var(--border); border-radius: 14px; }
.music-playlist {
    position: relative;
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    text-align: left;
}
.music-playlist:not(:last-child)::after { content: ''; position: absolute; right: 0; bottom: 0; left: 71px; height: 1px; background: var(--border); }
.music-playlist:active { background: var(--surface2); }
.music-playlist-cover { width: 46px; height: 46px; display: grid; place-items: center; color: var(--text2); background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-display); font-size: 17px; }
.music-playlist-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-playlist > span:nth-child(2) { min-width: 0; }
.music-playlist strong,
.music-playlist small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-playlist strong { font-size: 14px; font-weight: 650; }
.music-playlist small { margin-top: 4px; color: var(--text3); font-size: 11px; }
.music-playlist em { color: var(--text3); font-size: 20px; font-style: normal; text-align: right; }
.music-playlist-loading { pointer-events: none; }
.music-playlist-loading .music-playlist-cover,
.music-playlist-loading strong,
.music-playlist-loading small {
    color: transparent;
    background: var(--bg2);
    border-radius: 6px;
    animation: music-loading-pulse 1.2s ease-in-out infinite alternate;
}
.music-playlist-loading strong { width: 54%; }
.music-playlist-loading small { width: 38%; }
@keyframes music-loading-pulse { to { opacity: .45; } }

#page-music-playlist { background: var(--bg); }
.music-playlist-page {
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(110px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
}
.music-playlist-page::-webkit-scrollbar { display: none; }
.music-playlist-page-head {
    grid-template-columns: 38px minmax(0, 1fr) auto;
    margin-bottom: 18px;
}
.music-library-select {
    min-width: 38px;
    height: 38px;
    padding: 0 2px;
    color: var(--text2);
    font-size: 13px;
    font-weight: 620;
}
.music-library-select[hidden] { display: none; }
.music-playlist-hero {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    align-items: end;
    gap: 17px;
    padding: 8px 4px 24px;
}
.music-playlist-hero-cover {
    width: 118px;
    aspect-ratio: 1;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--text3);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 13px 28px color-mix(in srgb, var(--shadow) 45%, transparent);
    font-family: var(--font-display);
    font-size: 30px;
}
.music-playlist-hero-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-playlist-hero-copy { min-width: 0; padding-bottom: 3px; }
.music-playlist-hero-copy h2 {
    display: -webkit-box;
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 650;
    line-height: 1.24;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.music-playlist-hero-copy p { margin-top: 8px; color: var(--text3); font-size: 12px; }
.music-track-list {
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    border: 1px solid var(--border);
    border-radius: 14px;
}
.music-track-item {
    position: relative;
    overflow: hidden;
    background: #c94d43;
    touch-action: pan-y;
}
.music-track-item:not(:last-child)::after {
    content: '';
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 71px;
    height: 1px;
    background: var(--border);
    pointer-events: none;
}
.music-track-delete {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 76px;
    color: #fff;
    font-size: 13px;
    font-weight: 650;
}
.music-track-row {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 68px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    text-align: left;
    transform: translateX(0);
    transition: transform .2s cubic-bezier(.2, .78, .25, 1), background var(--transition);
    will-change: transform;
}
.music-track-row:active { background: var(--surface2); }
.music-track-item.swiped .music-track-row { transform: translateX(-76px); }
.music-track-item.selecting { background: color-mix(in srgb, var(--surface) 92%, var(--bg)); }
.music-track-item.selecting .music-track-delete { display: none; }
.music-track-item.selected .music-track-row { background: var(--surface2); }
.music-track-row-cover {
    width: 46px;
    height: 46px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--text3);
    background: var(--bg2);
    border-radius: 7px;
    font-size: 15px;
}
.music-track-row-cover img { width: 100%; height: 100%; object-fit: cover; }
.music-track-row-copy { min-width: 0; }
.music-track-row-copy strong,
.music-track-row-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-track-row-copy strong { font-size: 14px; font-weight: 620; }
.music-track-row-copy small { margin-top: 4px; color: var(--text3); font-size: 11px; }
.music-track-row-index { color: var(--text3); font-size: 11px; font-style: normal; font-variant-numeric: tabular-nums; text-align: right; }
.music-track-select-dot {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    justify-self: end;
    color: transparent;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    font-size: 12px;
    font-style: normal;
}
.music-track-item.selected .music-track-select-dot {
    color: var(--surface);
    background: var(--text);
    border-color: var(--text);
}
.music-library-actions {
    position: sticky;
    z-index: 5;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    min-height: 54px;
    display: grid;
    grid-template-columns: minmax(52px, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 9px 8px 14px;
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 58%, transparent);
    backdrop-filter: blur(18px);
}
.music-library-actions[hidden] { display: none; }
.music-library-actions > span { color: var(--text3); font-size: 12px; }
.music-library-actions button {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    color: var(--text2);
    border-radius: 8px;
}
.music-library-actions button:disabled { opacity: .32; }
.music-library-actions button.danger { color: #b8453d; }
.music-library-actions svg { width: 17px; height: 17px; }
.music-library-actions b { font-size: 12px; font-weight: 650; }
.music-edit-count { margin-top: 3px; color: var(--text3); font-size: 12px; }
.music-edit-view {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.music-edit-cover {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
}
.music-edit-cover[hidden] { display: none; }
.music-edit-cover-preview {
    width: 72px;
    height: 72px;
    overflow: hidden;
    display: grid;
    place-items: center;
    color: var(--text3);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 9px;
    font-size: 20px;
}
.music-edit-cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.music-edit-cover-actions { display: flex; align-items: center; gap: 8px; }
.music-edit-cover-actions button {
    min-width: 58px;
    min-height: 36px;
    padding: 0 12px;
    color: var(--text2);
    background: var(--bg2);
    border-radius: 8px;
    font-size: 13px;
}
.music-edit-cover-actions button:disabled { opacity: .35; }
.music-edit-lyric {
    min-height: 146px;
    max-height: 34vh;
    padding-top: 12px;
    line-height: 1.55;
    resize: none;
}
.music-track-list-state { padding: 52px 18px; color: var(--text3); font-size: 13px; text-align: center; }

@media (max-width: 370px) {
    .music-board { padding-right: 12px; padding-left: 12px; }
    .music-together { grid-template-columns: 70px 70px; gap: 20px; }
    .music-avatar { width: 66px; height: 66px; }
    .music-wire-left { left: calc(50% - 94px); }
    .music-wire-right { right: calc(50% - 94px); }
    .music-player-visual { grid-template-columns: 1fr; }
    .music-cover-deck { height: 218px; margin-bottom: 0; }
    .music-cover-card { width: 146px; }
    .music-cover-current { width: min(58vw, 202px); }
    .music-vinyl { width: min(51vw, 174px); }
    .music-lyrics { height: 76px; gap: 0; padding: 0 12px 4px; }
    .music-lyrics span { display: none; }
    .music-lyrics strong { font-size: 15px; }
    .music-player-visual.lyrics-open .music-lyrics { height: 218px; padding: 14px 8px; }
    .music-player-visual.lyrics-open .music-lyric-line { display: block; }
    .music-controls { gap: 22px; }
}

@media (min-width: 371px) and (max-width: 520px) {
    .music-player-visual { grid-template-columns: 1fr; }
    .music-cover-deck { height: 238px; margin-bottom: 0; }
    .music-cover-current { width: min(58vw, 218px); }
    .music-vinyl { width: min(51vw, 188px); }
    .music-lyrics { height: 78px; gap: 0; padding: 0 14px 5px; }
    .music-lyrics span { display: none; }
    .music-player-visual.lyrics-open .music-lyrics { height: 238px; padding: 15px 10px; }
    .music-player-visual.lyrics-open .music-lyric-line { display: block; }
}

/* iMessage-style vertical app drawer anchored to the chat composer. */
#page-chat #attach-panel {
    --attach-wheel-height: clamp(204px, calc(100dvh - 164px), 340px);
    position: absolute !important;
    left: max(12px, calc((100% - min(820px, 100%)) / 2 + 10px)) !important;
    right: auto !important;
    bottom: calc(58px + var(--safe-bottom)) !important;
    width: min(260px, calc(100% - 24px)) !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: var(--attach-wheel-height) !important;
    margin: 0 !important;
    overflow: visible !important;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.92) !important;
    transform-origin: 22px calc(100% + 8px);
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 14%, transparent) !important;
    -webkit-backdrop-filter: blur(22px) saturate(118%) !important;
    backdrop-filter: blur(22px) saturate(118%) !important;
    transition:
        opacity .16s ease,
        visibility 0s linear .2s,
        transform .2s ease !important;
}

#page-chat #attach-panel.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1) !important;
    animation: attach-dock-pop .46s both;
    transition-delay: 0s !important;
}

#page-chat #attach-panel::after {
    content: "";
    position: absolute;
    left: 16px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 3px 0;
    transform: rotate(45deg);
}

#page-chat #attach-menu {
    display: block;
    width: 100%;
    height: var(--attach-wheel-height);
    max-height: var(--attach-wheel-height);
    padding: 0 8px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y mandatory;
    scroll-padding-block: calc((var(--attach-wheel-height) - 54px) / 2);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text3) 36%, transparent) transparent;
    -webkit-overflow-scrolling: touch;
}

#page-chat #attach-menu::before,
#page-chat #attach-menu::after {
    content: "";
    display: block;
    height: calc((var(--attach-wheel-height) - 54px) / 2);
    pointer-events: none;
}

#page-chat #attach-menu::-webkit-scrollbar {
    width: 4px;
}

#page-chat #attach-menu::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text3) 36%, transparent);
    border-radius: 999px;
}

#page-chat #attach-menu .attach-menu-item {
    --attach-item-opacity: .2;
    --attach-item-saturation: .42;
    --attach-item-scale: .94;
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 8px 9px !important;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    color: var(--text);
    text-align: left;
    background: transparent !important;
    border: 0 !important;
    border-radius: 13px !important;
    opacity: var(--attach-item-opacity);
    filter: saturate(var(--attach-item-saturation));
    transform: scale(var(--attach-item-scale));
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    transition: background .16s ease, opacity .16s ease, filter .16s ease, transform .16s ease;
}

#page-chat #attach-menu .attach-menu-item.wheel-active {
    background: color-mix(in srgb, var(--surface2) 68%, transparent) !important;
}

#page-chat #attach-menu .attach-menu-item:active,
#page-chat #attach-menu .attach-menu-item:focus-visible {
    background: var(--accent-dim) !important;
}

#page-chat #attach-menu .attach-menu-item:active {
    transform: scale(.975) !important;
}

#page-chat #attach-menu .attach-menu-item:focus-visible {
    outline: 1px solid color-mix(in srgb, var(--accent) 56%, transparent);
    outline-offset: -1px;
}

#page-chat #attach-menu .attach-menu-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: var(--surface2) !important;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent) !important;
    border-radius: 10px !important;
    font-size: 17px;
}

#page-chat #attach-menu .attach-menu-icon svg {
    width: 19px;
    height: 19px;
}

#page-chat #attach-menu .attach-menu-glyph {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1;
}

#page-chat #attach-menu .attach-menu-label {
    display: block;
    color: var(--text2);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
}

#page-chat #attach-menu .attach-menu-branch-arrow {
    margin-left: auto;
    padding-right: 2px;
    color: var(--text3);
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
    transition: transform .18s ease, color .18s ease;
}

#page-chat #attach-panel.effects-open .attach-effects-trigger {
    background: color-mix(in srgb, var(--accent-dim) 58%, var(--surface2)) !important;
}

#page-chat #attach-panel.effects-open .attach-menu-branch-arrow {
    color: var(--accent);
    transform: translateX(2px);
}

#page-chat #attach-effects-view {
    position: absolute;
    z-index: 2;
    left: calc(100% + 9px);
    top: 50%;
    width: 148px;
    padding: 7px;
    display: grid;
    gap: 3px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transform: translate(-9px, -50%) scale(.94);
    transform-origin: left center;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    border: 1px solid var(--border);
    border-radius: 19px;
    box-shadow: 0 13px 32px color-mix(in srgb, var(--text) 12%, transparent) !important;
    -webkit-backdrop-filter: blur(20px) saturate(116%);
    backdrop-filter: blur(20px) saturate(116%);
    transition: opacity .16s ease, visibility 0s linear .18s, transform .2s cubic-bezier(.22, 1, .36, 1);
}

#page-chat #attach-effects-view::before {
    content: "";
    position: absolute;
    left: -6px;
    top: calc(50% - 6px);
    width: 11px;
    height: 11px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    border-radius: 0 0 0 3px;
    transform: rotate(45deg);
}

#page-chat #attach-panel.effects-open #attach-effects-view {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
    transition-delay: 0s;
}

#page-chat .attach-effect-item {
    position: relative;
    z-index: 1;
    min-height: 43px;
    padding: 6px 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 12px;
    text-align: left;
    transition: background .14s ease, color .14s ease, transform .14s ease;
}

#page-chat .attach-effect-item > span {
    width: 26px;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 19px;
    text-align: center;
}

#page-chat .attach-effect-item > strong {
    font-size: 12px;
    font-weight: 500;
}

#page-chat .attach-effect-item:hover,
#page-chat .attach-effect-item:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--surface2) 72%, transparent);
}

#page-chat .attach-effect-item:active {
    color: var(--text);
    background: var(--accent-dim);
    transform: scale(.975);
}

@media (max-width: 520px) {
    #page-chat #attach-panel.effects-open {
        width: min(230px, calc(100vw - 164px)) !important;
    }

    #page-chat #attach-effects-view {
        width: 132px;
    }

    #page-chat #attach-panel.effects-open #attach-menu .attach-menu-item {
        gap: 8px;
        padding-inline: 7px !important;
    }

    #page-chat #attach-panel.effects-open #attach-menu .attach-menu-icon {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    #page-chat #attach-panel.effects-open #attach-menu .attach-menu-label {
        font-size: 12px;
    }
}

#page-chat #attach-panel.sticker-open {
    width: min(360px, calc(100% - 24px)) !important;
    overflow: hidden !important;
    transform-origin: 22px 100%;
}

#page-chat #attach-panel.sticker-open::after {
    display: none;
}

#page-chat #attach-panel.sticker-open .attach-sticker-view {
    height: min(280px, 42vh);
    background: transparent;
}

#page-chat #btn-attach svg {
    transition: transform .38s cubic-bezier(.18, 1.4, .38, 1);
}

#page-chat #btn-attach.active {
    color: var(--accent);
    background: var(--accent-dim) !important;
}

#page-chat #btn-attach.active svg {
    transform: rotate(45deg) scale(1.04);
}

@keyframes attach-dock-pop {
    0% { opacity: 0; transform: translateY(10px) scale(.92); }
    65% { opacity: 1; transform: translateY(-1px) scale(1.012); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

#page-wordcards.opening-conversation .msg-row,
#page-wordcards.opening-conversation .bubble,
#page-wordcards.opening-conversation .thinking-trace,
#page-wordcards.opening-conversation .message-translation,
#page-chat.opening-conversation .msg-row,
#page-chat.opening-conversation .bubble,
#page-chat.opening-conversation .thinking-trace,
#page-chat.opening-conversation .message-translation {
    animation: none !important;
}

/* Model picker grows from the top-bar trigger instead of rising from the bottom. */
#modal-chat-model {
    display: block;
    background: rgba(20, 20, 22, .12);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

#modal-chat-model .modal-sheet {
    position: absolute;
    top: var(--model-picker-top, calc(54px + env(safe-area-inset-top, 0px)));
    right: var(--model-picker-right, 12px);
    bottom: auto;
    width: min(360px, calc(100vw - 24px));
    max-width: none;
    max-height: min(70dvh, calc(100dvh - var(--model-picker-top, 62px) - 14px));
    margin: 0;
    padding: 12px;
    border: 1px solid rgba(60, 60, 67, .14);
    border-radius: 20px;
    background: rgba(248, 248, 250, .94);
    box-shadow: 0 16px 42px rgba(28, 28, 30, .16);
    -webkit-backdrop-filter: blur(24px) saturate(145%);
    backdrop-filter: blur(24px) saturate(145%);
    opacity: 0;
    transform: translateY(-9px) scale(.76);
    transform-origin: calc(100% - 28px) -10px;
    transition:
        opacity .16s ease,
        transform .22s cubic-bezier(.22, 1, .36, 1);
}

#modal-chat-model.show .modal-sheet {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: model-picker-pop .46s cubic-bezier(.18, 1.42, .38, 1) both;
}

[data-theme="dark"] #modal-chat-model {
    background: rgba(0, 0, 0, .20);
}

[data-theme="dark"] #modal-chat-model .modal-sheet {
    background: rgba(39, 40, 43, .95);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.model-picker-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 8px 8px;
}

#modal-chat-model .modal-title {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text2);
}

.model-picker-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(118, 118, 128, .10);
    color: var(--text2);
    font-size: 20px;
    line-height: 1;
}

.model-picker-close:active {
    transform: scale(.86);
    background: rgba(118, 118, 128, .18);
}

#modal-chat-model .model-sheet-scroll {
    gap: 6px;
    padding: 0;
    overscroll-behavior-y: contain;
}

#modal-chat-model .model-provider-group {
    margin: 0;
    border-color: rgba(60, 60, 67, .10);
    border-radius: 13px;
    background: rgba(255, 255, 255, .50);
}

[data-theme="dark"] #modal-chat-model .model-provider-group {
    border-color: rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .055);
}

#modal-chat-model.show .model-provider-group {
    animation: model-group-arrive .32s cubic-bezier(.22, 1, .36, 1) both;
    animation-delay: calc(var(--model-group-index, 0) * 28ms + 60ms);
}

#modal-chat-model .model-provider-head {
    min-height: 42px;
    padding: 9px 11px;
}

#modal-chat-model .model-option-row {
    border-radius: 9px;
}

@keyframes model-picker-pop {
    0% { opacity: 0; transform: translateY(-10px) scale(.72); }
    58% { opacity: 1; transform: translateY(2px) scale(1.035); }
    78% { transform: translateY(-1px) scale(.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes model-group-arrive {
    from { opacity: 0; transform: translateY(-5px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    #modal-chat-model.show .modal-sheet,
    #modal-chat-model.show .model-provider-group {
        animation: none;
    }
}

/* Conversation settings expand from the centered chat identity. */
#modal-conv-settings {
    display: grid;
    place-items: center;
    padding:
        max(12px, env(safe-area-inset-top, 0px))
        12px
        max(12px, env(safe-area-inset-bottom, 0px));
    background: rgba(20, 20, 22, .14);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#modal-conv-settings .modal-sheet {
    width: min(520px, 100%);
    max-width: none;
    max-height: min(78dvh, 680px);
    margin: 0;
    padding: 14px;
    border: 1px solid rgba(60, 60, 67, .14);
    border-radius: 22px;
    background: rgba(248, 248, 250, .95);
    box-shadow: 0 20px 54px rgba(28, 28, 30, .18);
    -webkit-backdrop-filter: blur(26px) saturate(145%);
    backdrop-filter: blur(26px) saturate(145%);
    opacity: 0;
    transform: translateY(-16px) scale(.76);
    transform-origin: 50% 0;
    transition:
        opacity .16s ease,
        transform .24s cubic-bezier(.22, 1, .36, 1);
}

#modal-conv-settings.show .modal-sheet {
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: conv-settings-pop .48s cubic-bezier(.18, 1.42, .38, 1) both;
}

[data-theme="dark"] #modal-conv-settings {
    background: rgba(0, 0, 0, .22);
}

[data-theme="dark"] #modal-conv-settings .modal-sheet {
    background: rgba(39, 40, 43, .96);
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 22px 58px rgba(0, 0, 0, .38);
}

.conv-settings-head {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 2px 8px 8px;
}

#modal-conv-settings .modal-title {
    margin: 0;
    color: var(--text2);
    font-size: 13px;
    font-weight: 600;
}

.conv-settings-close {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(118, 118, 128, .10);
    color: var(--text2);
    font-size: 20px;
    line-height: 1;
}

.conv-settings-close:active {
    transform: scale(.86);
    background: rgba(118, 118, 128, .18);
}

#modal-conv-settings #conv-section-nav {
    width: min(310px, 100%);
    margin: 0 auto 14px;
    padding: 3px;
    border-radius: 10px;
}

#modal-conv-settings .conv-edit-content {
    gap: 10px;
    padding: 0 2px;
}

#modal-conv-settings .conv-edit-section {
    gap: 12px;
}

.conv-icon-stage {
    position: relative;
    width: 112px;
    height: 112px;
    margin: 4px auto 6px;
}

.conv-icon-copy {
    margin: 0 auto 12px;
    display: grid;
    gap: 3px;
    text-align: center;
}

.conv-icon-copy strong {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.conv-icon-copy span {
    color: var(--text3);
    font-size: 11px;
}

#modal-conv-settings .conv-icon-preview {
    width: 104px;
    height: 104px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 50%;
    background: var(--surface2);
    box-shadow: 0 12px 30px rgba(28, 28, 30, .12);
    color: var(--text2);
    font-size: 32px;
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), opacity .18s ease;
}

#modal-conv-settings .conv-icon-preview:active {
    transform: scale(.93);
    opacity: .82;
}

#modal-conv-settings .conv-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.conv-icon-clear {
    position: absolute;
    right: 0;
    bottom: 5px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--surface) 88%, transparent);
    background: color-mix(in srgb, var(--surface2) 88%, transparent);
    color: var(--text3);
    font-size: 17px;
    line-height: 1;
    opacity: .72;
}

.conv-icon-clear:disabled {
    opacity: 0;
    pointer-events: none;
}

.conv-icon-clear:active {
    transform: scale(.86);
}

.conv-compact-fields {
    width: min(390px, 100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 94px;
    gap: 9px;
}

.conv-compact-field {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.conv-compact-field label {
    padding-left: 3px;
    color: var(--text3);
    font-size: 11px;
    font-weight: 500;
}

.conv-compact-field .edit-sheet-input {
    min-width: 0;
    height: 42px;
    padding: 9px 11px;
}

.conv-context-field input {
    text-align: center;
}

.conv-background-actions {
    display: flex;
    justify-content: flex-end;
    gap: 7px;
}

.conv-background-actions .modal-btn {
    min-width: 62px;
    padding: 7px 10px;
    font-size: 12px;
}

.conv-css-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto 30px;
    gap: 6px;
    align-items: center;
}

.conv-css-actions .edit-sheet-input {
    min-width: 0;
}

.conv-css-actions .modal-btn {
    min-width: 52px;
    height: 38px;
    padding: 0 9px;
    font-size: 12px;
}

.conv-css-delete {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #D94040;
    font-size: 18px;
    opacity: .76;
}

.conv-css-delete:disabled {
    opacity: .22;
}

#modal-conv-settings #conv-css-input {
    min-height: 150px;
}

#modal-custom-css .modal-sheet {
    max-height: min(88dvh, 820px);
}

#modal-custom-css .edit-sheet-content {
    overflow-y: auto;
    overscroll-behavior: contain;
}

#modal-custom-css #custom-css-input {
    min-height: 210px;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.65;
    tab-size: 2;
}

.custom-css-reference {
    margin: 2px 16px 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.custom-css-reference-head {
    margin-bottom: 9px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
}

.custom-css-reference-head strong,
.custom-css-reference-head span {
    display: block;
}

.custom-css-reference-head strong {
    color: var(--text);
    font-size: 12px;
    font-weight: 620;
}

.custom-css-reference-head span,
.custom-css-reference > p {
    color: var(--text3);
    font-size: 10px;
    line-height: 1.5;
}

.custom-css-reference pre {
    position: relative;
    max-height: 330px;
    margin: 0;
    padding: 14px 13px 16px;
    overflow: auto;
    color: var(--text2);
    background: color-mix(in srgb, var(--bg2) 78%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 12px;
    font-family: "DM Mono", ui-monospace, monospace;
    font-size: 10px;
    line-height: 1.65;
    white-space: pre;
    -webkit-overflow-scrolling: touch;
}

.custom-css-reference pre code {
    color: inherit;
    font: inherit;
}

.custom-css-reference-copy {
    position: sticky;
    top: 0;
    left: 100%;
    z-index: 1;
    min-width: 66px;
    height: 28px;
    margin-bottom: -28px;
    padding: 0 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.custom-css-reference-copy:active {
    background: var(--accent-dim);
}

.custom-css-reference > p {
    margin: 8px 2px 0;
}

.custom-css-reference > p code {
    color: var(--text2);
    font-family: "DM Mono", ui-monospace, monospace;
}

#modal-conv-settings .conv-edit-actions {
    margin-top: 10px;
}

#modal-conv-settings .conv-edit-actions .modal-btn {
    width: 100%;
}

#modal-conv-settings .conv-delete-btn {
    align-self: center;
    margin-top: 8px;
    padding: 5px 9px;
    color: color-mix(in srgb, #D94040 78%, var(--text3));
    font-size: 11px;
    opacity: .68;
}

#modal-conv-settings .conv-delete-btn:active {
    opacity: 1;
}

@keyframes conv-settings-pop {
    0% { opacity: 0; transform: translateY(-18px) scale(.72); }
    58% { opacity: 1; transform: translateY(2px) scale(1.028); }
    80% { transform: translateY(-1px) scale(.992); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
    #modal-conv-settings .modal-sheet {
        max-height: min(82dvh, 680px);
    }

    .conv-icon-stage {
        width: 100px;
        height: 100px;
        margin-bottom: 8px;
    }

    #modal-conv-settings .conv-icon-preview {
        width: 92px;
        height: 92px;
    }

    .conv-css-actions {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .conv-css-delete {
        grid-column: 3;
        grid-row: 2;
        justify-self: end;
        margin-top: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #modal-conv-settings.show .modal-sheet {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-chat #attach-panel,
    #page-chat #attach-panel.open,
    #page-chat #attach-menu .attach-menu-item,
    #page-chat #attach-effects-view,
    #page-chat .attach-effect-item,
    #page-chat #btn-attach svg {
        animation: none !important;
        transition-duration: .01ms !important;
    }

    #page-chat #attach-panel.open {
        opacity: 1;
        transform: none !important;
    }

    #page-chat #attach-panel.effects-open #attach-effects-view {
        transform: translate(0, -50%) scale(1) !important;
    }
}
/* ─── Quiet journal sidebar ─── */
.sidebar {
    width: min(86vw, 304px);
    background: color-mix(in srgb, var(--bg) 97%, var(--accent) 3%);
    border-right: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    box-shadow: 14px 0 38px rgba(28, 26, 22, 0.14);
}

.sidebar-header {
    min-height: 96px;
    padding: calc(26px + env(safe-area-inset-top, 0px)) 18px 15px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.sidebar-brand {
    min-width: 0;
}

.sidebar-title {
    font-family: Georgia, "Songti SC", "STSong", serif;
    font-size: 25px;
    font-weight: 500;
    line-height: 1;
    color: var(--text);
}

.sidebar-date {
    min-height: 16px;
    margin-top: 8px;
    color: var(--text3);
    font-size: 11px;
    line-height: 1.4;
}

.sidebar-close,
.sidebar-section-action,
.sidebar-mini-btn {
    display: grid;
    place-items: center;
    color: var(--text3);
    background: transparent;
    border: 0;
}

.sidebar-close {
    width: 32px;
    height: 32px;
    margin: 0 -6px -5px 0;
}

.sidebar-close svg,
.sidebar-section-action svg,
.sidebar-mini-btn svg,
.sidebar-user-chevron {
    width: 16px;
    height: 16px;
}

.sidebar-main {
    padding: 7px 12px 12px;
}

.sidebar-section {
    padding: 8px 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
}

.sidebar-assistant-section {
    padding-top: 3px;
    border-top: 0;
}

.sidebar-section-heading {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
}

.sidebar-section-name {
    color: var(--text2);
    font-size: 12px;
    font-weight: 550;
    letter-spacing: 0;
    text-transform: none;
}

.sidebar-section-count {
    margin-left: 4px;
    color: var(--text3);
    font-size: 10px;
    font-weight: 400;
    transform: none !important;
    transition: none !important;
}

.sidebar-section-toggle {
    min-width: 0;
    flex: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text2);
    text-align: left;
    letter-spacing: 0;
    text-transform: none;
}

.sidebar-section-toggle > svg {
    width: 14px;
    height: 14px;
    color: var(--text3);
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.sidebar-section-toggle.open > svg {
    transform: rotate(90deg);
}

.sidebar-section-action {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    transition: color 150ms ease, background 150ms ease;
}

.sidebar-section-action:active,
.sidebar-section-action:hover,
.sidebar-mini-btn:active,
.sidebar-mini-btn:hover,
.sidebar-close:active,
.sidebar-close:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

.sidebar-assistant-current {
    min-height: 58px;
    margin: 1px 2px 4px;
    padding: 9px 8px;
    gap: 10px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.sidebar-assistant-current .conv-avatar {
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
    box-shadow: none;
}

.sidebar-current-name {
    font-family: Georgia, "Songti SC", "STSong", serif;
    font-size: 15px;
    font-weight: 500;
}

.sidebar-current-note {
    margin-top: 3px;
    color: var(--text3);
    font-size: 10px;
}

.sidebar-mini-btn {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
}

.sidebar-assistant-toggle svg {
    transition: transform 220ms cubic-bezier(.22, 1, .36, 1);
}

.sidebar-assistant-toggle[aria-expanded="true"] svg {
    transform: rotate(90deg);
}

.sidebar-collapse {
    transition: max-height 260ms cubic-bezier(.22, 1, .36, 1), opacity 180ms ease;
    opacity: 0;
}

.sidebar-collapse.open {
    opacity: 1;
}

.sidebar-list.compact {
    padding: 2px 0 4px;
}

.sidebar-conv-item {
    min-height: 46px;
    margin: 1px 2px;
    padding: 7px 8px;
    gap: 10px;
    border-radius: 6px;
    background: transparent;
}

.sidebar-conv-item:hover,
.sidebar-conv-item:active,
.sidebar-conv-item.active {
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.sidebar-conv-item.active {
    box-shadow: inset 2px 0 0 color-mix(in srgb, var(--accent) 70%, var(--text));
}

.sidebar-conv-name {
    color: var(--text2);
    font-size: 13px;
}

.sidebar-empty {
    padding: 10px 8px !important;
    color: var(--text3);
    font-size: 11px;
}

.sidebar-archive-search {
    height: 34px;
    margin: 5px 2px 4px;
    padding: 0 10px;
    gap: 7px;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 6px;
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
}

.sidebar-archive-search > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    color: var(--text3);
}

.sidebar-archive-search input {
    min-width: 0;
    font-size: 12px;
}

.sidebar-archive-search input::-webkit-search-cancel-button {
    cursor: pointer;
    opacity: .55;
}

.sidebar-archive-item {
    position: relative;
    min-height: 58px;
    margin: 2px;
    padding: 9px 8px 9px 12px;
    gap: 8px;
    border: 1px solid transparent;
    overflow: hidden;
}

.sidebar-archive-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 42%, var(--border));
    opacity: .68;
}

.sidebar-archive-item:hover,
.sidebar-archive-item:active,
.sidebar-archive-item.active {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--bg2) 68%, transparent);
}

.sidebar-archive-copy {
    min-width: 0;
    flex: 1;
}

.sidebar-archive-item .sidebar-conv-name {
    font-weight: 550;
    line-height: 1.35;
}

.sidebar-archive-preview {
    margin-top: 3px;
    color: var(--text3);
    font-size: 10px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-archive-item .sidebar-conv-unarchive {
    min-width: 50px;
    height: 28px;
    padding: 0 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 999px;
    color: var(--text3);
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    font-size: 10px;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.sidebar-archive-item .sidebar-conv-unarchive svg {
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
}

.sidebar-archive-item .sidebar-conv-unarchive:hover,
.sidebar-archive-item .sidebar-conv-unarchive:active {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
    background: var(--accent-dim);
}

.sidebar-archive-empty {
    margin: 2px;
    padding: 18px 8px !important;
    border: 1px dashed color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 6px;
}

#sidebar-user-profile {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.sidebar-user-card {
    min-height: 62px;
    margin: 0;
    padding: 10px 18px;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sidebar-user-card:hover,
.sidebar-user-card:active {
    background: color-mix(in srgb, var(--text) 5%, transparent);
}

.sidebar-user-title {
    font-size: 13px;
    font-weight: 550;
}

.sidebar-user-subtitle {
    margin-top: 2px;
    font-size: 10px;
}

.sidebar-user-chevron {
    flex: 0 0 16px;
    color: var(--text3);
}

@media (min-width: 900px) {
    .sidebar {
        width: 300px;
        box-shadow: none;
    }

    .sidebar-close {
        display: none;
    }

    .sidebar-header {
        padding-top: 26px;
    }
}

@media (max-width: 899px) {
    #page-list > .topbar {
        position: absolute;
        z-index: 12;
        top: 0;
        left: 0;
        width: 100%;
        height: calc(54px + env(safe-area-inset-top, 0px));
        display: flex;
        padding: env(safe-area-inset-top, 0px) 12px 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        pointer-events: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #page-list > .topbar #btn-sidebar {
        visibility: visible;
        pointer-events: auto;
        width: 40px;
        height: 40px;
        margin-left: -6px;
        border-radius: 6px;
        color: var(--text2);
        background: transparent;
        border: 0;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    #page-list > .topbar #btn-sidebar svg {
        width: 22px;
        height: 22px;
    }

    #page-list > .topbar #btn-sidebar:active {
        color: var(--accent);
        background: transparent;
    }

    #page-list > .topbar #btn-theme,
    #page-list > .topbar #btn-new-conv {
        display: none;
    }
}

/* ─── Unified quiet settings ─── */
:is(#page-settings, #page-assistant-settings) {
    background: var(--bg);
}

:is(#page-settings, #page-assistant-settings) > .topbar {
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    box-shadow: none;
}

:is(#page-settings, #page-assistant-settings) > .topbar .topbar-btn {
    visibility: visible;
    pointer-events: auto;
    color: var(--text2);
    background: transparent;
    border: 0;
}

:is(#page-settings, #page-assistant-settings) > .topbar .topbar-title {
    font-family: Georgia, "Songti SC", "STSong", serif;
    font-size: 18px;
    font-weight: 500;
}

:is(#page-settings, #page-assistant-settings) .settings-page-nav {
    width: 100%;
    height: 44px;
    margin: 0;
    padding: 0 14px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    border-radius: 0;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-page-nav .edit-section-tab {
    position: relative;
    min-width: 0;
    padding: 0 3px;
    border-radius: 0;
    color: var(--text3);
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 500;
}

:is(#page-settings, #page-assistant-settings) .settings-page-nav .edit-section-tab::after {
    content: "";
    position: absolute;
    right: 24%;
    bottom: -1px;
    left: 24%;
    height: 1px;
    background: transparent;
}

:is(#page-settings, #page-assistant-settings) .settings-page-nav .edit-section-tab.active {
    color: var(--text);
    background: transparent;
    box-shadow: none;
}

:is(#page-settings, #page-assistant-settings) .settings-page-nav .edit-section-tab.active::after {
    background: var(--accent);
}

:is(#page-settings, #page-assistant-settings) > .scroll-area {
    background: var(--bg);
    scroll-padding-bottom: 88px;
}

:is(#page-settings, #page-assistant-settings) .settings-list,
:is(#page-settings, #page-assistant-settings) .tools-board {
    width: min(760px, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 22px 20px 34px;
}

:is(#page-settings, #page-assistant-settings) .settings-edit-section {
    gap: 26px;
}

:is(#page-settings, #page-assistant-settings) .settings-section {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

:is(#page-settings, #page-assistant-settings) .settings-edit-section > .settings-section + .settings-section {
    padding-top: 24px;
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-section-title {
    padding: 0 2px 9px;
    color: var(--text2);
    font-family: Georgia, "Songti SC", "STSong", serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

:is(#page-settings, #page-assistant-settings) .settings-row,
:is(#page-settings, #page-assistant-settings) .settings-field-row {
    min-height: 52px;
    padding: 10px 2px;
    gap: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 58%, transparent);
    background: transparent;
}

:is(#page-settings, #page-assistant-settings) .settings-section-title + .settings-row,
:is(#page-settings, #page-assistant-settings) .settings-section-title + .settings-field-row {
    border-top-color: color-mix(in srgb, var(--border) 78%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-row:active {
    background: color-mix(in srgb, var(--text) 4%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-row-icon {
    display: none;
}

:is(#page-settings, #page-assistant-settings) .settings-row-label {
    color: var(--text);
    font-size: 14px;
    font-weight: 450;
}

:is(#page-settings, #page-assistant-settings) .settings-row-value,
:is(#page-settings, #page-assistant-settings) .settings-chevron {
    color: var(--text3);
    font-size: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-row-actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
}

:is(#page-settings, #page-assistant-settings) .settings-inline-button {
    min-height: 30px;
    padding: 5px 10px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, var(--bg));
    color: var(--text2);
    font: inherit;
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}

:is(#page-settings, #page-assistant-settings) .settings-inline-button:active {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--accent);
}

.user-message-time-sheet {
    gap: 0;
}

.user-message-time-note {
    margin: 8px 0 20px;
    color: var(--text3);
    font-size: 13px;
    line-height: 1.65;
}

.user-message-time-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
}

.user-message-time-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text3);
    font-size: 13px;
}

.user-message-time-input-wrap .modal-input {
    width: 92px;
    margin: 0;
    text-align: right;
}

.user-message-time-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 20px;
}

.user-message-time-actions .modal-btn {
    margin: 0;
}

:is(#page-settings, #page-assistant-settings) .settings-chevron {
    width: 15px;
    height: 15px;
}

:is(#page-settings, #page-assistant-settings) .field-label {
    width: 92px;
    color: var(--text2);
    font-size: 12px;
}

:is(#page-settings, #page-assistant-settings) .field-input,
:is(#page-settings, #page-assistant-settings) .field-textarea,
:is(#page-settings, #page-assistant-settings) .edit-sheet-input,
:is(#page-settings, #page-assistant-settings) .edit-sheet-textarea {
    min-width: 0;
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 6px;
    box-shadow: none;
    font-size: 13px;
}

:is(#page-settings, #page-assistant-settings) .field-input {
    min-height: 36px;
    padding: 7px 10px;
}

:is(#page-settings, #page-assistant-settings) .field-input:focus,
:is(#page-settings, #page-assistant-settings) .field-textarea:focus,
:is(#page-settings, #page-assistant-settings) .edit-sheet-input:focus,
:is(#page-settings, #page-assistant-settings) .edit-sheet-textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 10%, transparent);
}

:is(#page-settings, #page-assistant-settings) .format-picker {
    min-height: 36px;
    padding: 3px;
    gap: 2px;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
}

:is(#page-settings, #page-assistant-settings) .format-btn {
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 5px;
    color: var(--text3);
    font-size: 12px;
}

:is(#page-settings, #page-assistant-settings) .format-btn.active {
    color: var(--text);
    background: var(--bg);
    box-shadow: 0 1px 3px rgba(32, 33, 31, 0.08);
}

:is(#page-settings, #page-assistant-settings) .toggle {
    width: 38px;
    height: 22px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text3) 24%, transparent);
    box-shadow: none;
}

:is(#page-settings, #page-assistant-settings) .toggle::after {
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    box-shadow: 0 1px 2px rgba(32, 33, 31, 0.16);
}

:is(#page-settings, #page-assistant-settings) .toggle.on {
    background: var(--accent);
}

:is(#page-settings, #page-assistant-settings) .toggle.on::after {
    transform: translateX(16px);
}

:is(#page-settings, #page-assistant-settings) input[type="range"] {
    accent-color: var(--accent);
}

:is(#page-settings, #page-assistant-settings) #btn-model-presets {
    min-height: 30px;
    padding: 5px 9px !important;
    color: var(--text2) !important;
    background: transparent !important;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 6px !important;
    font-size: 12px !important;
}

:is(#page-settings, #page-assistant-settings) .fontsize-btn {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 50% !important;
    background: transparent !important;
    color: var(--text2) !important;
}

:is(#page-settings, #page-assistant-settings) .modal-btn.secondary {
    min-width: 0;
    min-height: 34px;
    padding: 6px 10px;
    border-color: color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 6px;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-page-actions {
    width: 100%;
    margin: 0;
    padding: 9px max(18px, calc((100% - 720px) / 2));
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

:is(#page-settings, #page-assistant-settings) .settings-page-actions .save-btn {
    width: auto;
    min-width: 104px;
    min-height: 38px;
    margin: 0;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
    font-size: 13px;
}

:is(#page-settings, #page-assistant-settings) #save-hint {
    order: -1;
}

:is(#page-settings, #page-assistant-settings) #btn-clear-cache {
    width: auto;
    min-width: 0;
    margin: 20px 0 0 auto !important;
    padding: 7px 0;
    color: #B44C4C !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    box-shadow: none;
    font-size: 12px;
}

@media (max-width: 520px) {
    :is(#page-settings, #page-assistant-settings) .settings-list,
    :is(#page-settings, #page-assistant-settings) .tools-board {
        padding: 18px 16px 28px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-page-nav {
        padding-inline: 8px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-page-nav .edit-section-tab {
        padding-inline: 2px;
        font-size: 11px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-page-actions {
        padding: 9px 16px max(9px, env(safe-area-inset-bottom, 0px));
    }
}

/* ─── Selective message copy ─── */
.copy-selection-overlay {
    position: fixed;
    inset: 0;
    z-index: 130;
    padding: 18px;
    display: grid;
    place-items: center;
    background: rgba(28, 24, 21, .34);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.copy-selection-sheet {
    width: min(520px, 100%);
    max-height: min(72dvh, 620px);
    padding: 16px;
    display: grid;
    grid-template-rows: auto minmax(150px, 1fr) auto;
    gap: 13px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface);
    box-shadow: 0 22px 60px rgba(28, 24, 21, .22);
}

.copy-selection-head,
.copy-selection-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.copy-selection-count {
    margin-right: auto;
}

.copy-selection-buttons {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-selection-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.copy-selection-head strong {
    color: var(--text);
    font-size: 15px;
    font-weight: 650;
}

.copy-selection-head span,
.copy-selection-count {
    color: var(--text3);
    font-size: 11px;
}

.copy-selection-close {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    color: var(--text3);
    background: var(--bg2);
    font-size: 20px;
    line-height: 1;
}

.copy-selection-text {
    width: 100%;
    min-height: 150px;
    max-height: 48dvh;
    padding: 13px 14px;
    resize: none;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    color: var(--text);
    background: var(--bg2);
    font: inherit;
    font-size: 14px;
    line-height: 1.65;
    white-space: pre-wrap;
    -webkit-user-select: text;
    user-select: text;
}

.copy-selection-text:focus {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.copy-selection-all,
.copy-selection-confirm {
    min-width: 80px;
    height: 36px;
    padding: 0 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.copy-selection-all {
    color: var(--text2);
    background: transparent;
    border: 1px solid var(--border);
}

.copy-selection-all:active {
    color: var(--text);
    background: var(--bg2);
}

.copy-selection-confirm {
    color: var(--control-on-fill);
    background: var(--control-fill);
}

.copy-selection-all:disabled,
.copy-selection-confirm:disabled {
    opacity: .38;
}

@media (max-width: 520px) {
    .copy-selection-overlay {
        padding: 0;
        place-items: end stretch;
    }

    .copy-selection-sheet {
        width: 100%;
        max-height: min(78dvh, 620px);
        padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
    }
}

@media (max-width: 350px) {
    .copy-selection-actions {
        align-items: flex-end;
        flex-direction: column;
    }

    .copy-selection-buttons {
        width: 100%;
    }

    .copy-selection-buttons button {
        flex: 1;
    }
}

/* ─── Unified correspondence palette ───
   Chat, conversation settings and the model picker share the same paper,
   warm ink and rust-red accent. The treatment stays flat and typographic:
   no paper texture, ruled lines or ornamental skeuomorphism. */
#page-wordcards,
#page-chat {
    background-color: var(--bg);
    background-image: linear-gradient(
        180deg,
        color-mix(in srgb, var(--surface) 26%, var(--bg)) 0%,
        var(--bg) 38%,
        color-mix(in srgb, var(--bg2) 24%, var(--bg)) 100%
    );
}

#page-wordcards .topbar-btn:active,
#page-wordcards .chat-model-btn:active,
#page-chat .topbar-btn:active,
#page-chat .chat-model-btn:active {
    background: var(--accent-dim) !important;
}

#page-wordcards .chat-header-avatar,
#page-wordcards .chat-header-avatar-part,
#page-chat .chat-header-avatar,
#page-chat .chat-header-avatar-part {
    border-color: color-mix(in srgb, var(--border) 78%, var(--surface));
    box-shadow: 0 3px 10px color-mix(in srgb, var(--text) 9%, transparent);
}

#page-wordcards .input-plus,
#page-wordcards .input-wrap,
#page-wordcards .topbar-btn,
#page-wordcards .chat-model-btn,
#page-chat .input-plus,
#page-chat .input-wrap,
#page-chat .topbar-btn,
#page-chat .chat-model-btn {
    background-color: color-mix(in srgb, var(--surface) 92%, var(--bg)) !important;
    border-color: color-mix(in srgb, var(--border) 86%, transparent) !important;
}

#modal-conv-settings,
#modal-chat-model {
    background: color-mix(in srgb, var(--text) 18%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

#modal-conv-settings .modal-sheet,
#modal-chat-model .modal-sheet,
[data-theme="dark"] #modal-conv-settings .modal-sheet,
[data-theme="dark"] #modal-chat-model .modal-sheet {
    background: color-mix(in srgb, var(--surface) 96%, var(--bg));
    border-color: var(--border);
    box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 18%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

#modal-conv-settings .modal-title,
#modal-chat-model .modal-title {
    color: var(--text);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .01em;
}

#modal-conv-settings .conv-settings-close,
#modal-chat-model .model-picker-close {
    background: var(--bg2);
    border: 1px solid var(--border);
    color: var(--text2);
}

#modal-conv-settings .conv-settings-close:active,
#modal-chat-model .model-picker-close:active {
    background: var(--accent-dim);
    color: var(--accent);
}

#modal-conv-settings #conv-section-nav {
    background: var(--bg2);
    border: 1px solid var(--border);
    box-shadow: none;
}

#modal-conv-settings #conv-section-nav .edit-section-tab {
    border: 1px solid transparent;
    color: var(--text3);
}

#modal-conv-settings #conv-section-nav .edit-section-tab.active {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
    color: var(--accent);
    box-shadow: none;
}

#modal-conv-settings .edit-sheet-input,
#modal-conv-settings .edit-sheet-textarea,
#modal-conv-settings .bg-preview {
    background-color: var(--bg2);
    border-color: var(--border);
    color: var(--text);
    box-shadow: none;
}

#modal-conv-settings .edit-sheet-input:focus,
#modal-conv-settings .edit-sheet-textarea:focus {
    border-color: color-mix(in srgb, var(--accent) 56%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-dim);
}

#modal-conv-settings .conv-icon-preview {
    background: var(--bg2);
    border-color: color-mix(in srgb, var(--accent) 24%, var(--border));
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text) 10%, transparent);
}

#modal-conv-settings .modal-btn,
#modal-conv-settings .conv-edit-actions .modal-btn {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
    box-shadow: none;
}

#modal-conv-settings .modal-btn.secondary {
    background: var(--bg2);
    border-color: var(--border);
    color: var(--text2);
}

#modal-conv-settings .modal-btn.secondary:active {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
    color: var(--accent);
}

#modal-chat-model .model-provider-group,
[data-theme="dark"] #modal-chat-model .model-provider-group {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: none;
}

#modal-chat-model .model-provider-head {
    color: var(--text);
}

#modal-chat-model .model-provider-group.open .model-provider-head {
    color: var(--accent);
}

#modal-chat-model .model-provider-models {
    background: color-mix(in srgb, var(--bg2) 62%, var(--surface));
    border-top-color: var(--border);
}

#modal-chat-model .model-option-row {
    color: var(--text);
    border: 1px solid transparent;
}

#modal-chat-model .model-option-row.active {
    background: var(--accent-dim);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
    color: var(--accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

#modal-chat-model .model-option-row.active small {
    color: color-mix(in srgb, var(--accent) 64%, var(--text2));
}

/* ─── Settings information architecture ─── */
:is(#page-settings, #page-assistant-settings) .settings-edit-section {
    gap: 20px;
}

:is(#page-settings, #page-assistant-settings) .settings-section {
    padding: 18px;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 82%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    border-radius: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-edit-section > .settings-section + .settings-section {
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-section-title {
    padding: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 650;
    line-height: 1.35;
}

:is(#page-settings, #page-assistant-settings) .settings-section-note,
:is(#page-settings, #page-assistant-settings) .settings-row-description {
    margin-top: 3px;
    color: var(--text3);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.45;
}

:is(#page-settings, #page-assistant-settings) .settings-row-label {
    font-size: 14px;
    font-weight: 560;
}

:is(#page-settings, #page-assistant-settings) .settings-field-row,
:is(#page-settings, #page-assistant-settings) .settings-row {
    padding: 11px 0;
}

:is(#page-settings, #page-assistant-settings) .settings-section-title + .settings-row,
:is(#page-settings, #page-assistant-settings) .settings-section-title + .settings-field-row {
    margin-top: 9px;
}

:is(#page-settings, #page-assistant-settings) .settings-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 13px;
}

:is(#page-settings, #page-assistant-settings) .settings-add-button,
:is(#page-settings, #page-assistant-settings) .settings-provider-edit,
:is(#page-settings, #page-assistant-settings) .settings-text-button {
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
}

:is(#page-settings, #page-assistant-settings) .settings-add-button {
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 7px;
    background: var(--accent-dim);
}

:is(#page-settings, #page-assistant-settings) .settings-provider-list {
    display: grid;
    gap: 8px;
}

:is(#page-settings, #page-assistant-settings) .settings-provider {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--bg);
}

:is(#page-settings, #page-assistant-settings) .settings-provider-head {
    width: 100%;
    min-height: 52px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    text-align: left;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-head > span:first-child,
:is(#page-settings, #page-assistant-settings) .settings-provider-model > span:first-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-head strong {
    overflow: hidden;
    font-size: 13px;
    font-weight: 620;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-head small,
:is(#page-settings, #page-assistant-settings) .settings-provider-model small {
    overflow: hidden;
    color: var(--text3);
    font-size: 10px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-chevron {
    color: var(--text3);
    font-size: 19px;
    transition: transform var(--transition), color var(--transition);
}

:is(#page-settings, #page-assistant-settings) .settings-provider.open .settings-provider-chevron {
    color: var(--accent);
    transform: rotate(90deg);
}

:is(#page-settings, #page-assistant-settings) .settings-provider-body {
    display: none;
    padding: 5px 8px 9px;
    border-top: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg2) 46%, var(--bg));
}

:is(#page-settings, #page-assistant-settings) .settings-provider.open .settings-provider-body {
    display: block;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-model {
    width: 100%;
    min-height: 44px;
    padding: 7px 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 7px;
    color: var(--text2);
    text-align: left;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-model strong {
    font-size: 12px;
    font-weight: 520;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-model.active {
    background: var(--accent-dim);
    color: var(--accent);
}

:is(#page-settings, #page-assistant-settings) .settings-provider-model.active small,
:is(#page-settings, #page-assistant-settings) .settings-model-check {
    color: var(--accent);
}

:is(#page-settings, #page-assistant-settings) .settings-provider-edit {
    margin: 8px 8px 1px auto;
    display: block;
    padding: 5px 2px;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-empty {
    padding: 14px 8px;
    color: var(--text3);
    font-size: 12px;
    text-align: center;
}

:is(#page-settings, #page-assistant-settings) .settings-provider-empty.standalone {
    border: 1px dashed var(--border);
    border-radius: 8px;
}

:is(#page-settings, #page-assistant-settings) .settings-single-control {
    margin-top: 9px;
    padding-bottom: 0;
    border: 0;
}

:is(#page-settings, #page-assistant-settings) .settings-single-control .field-input {
    max-width: 360px;
}

:is(#page-settings, #page-assistant-settings) .appearance-section {
    padding: 18px;
}

:is(#page-settings, #page-assistant-settings) .settings-chat-preview {
    position: relative;
    min-height: 196px;
    margin-top: 13px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 10px;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 42%, var(--bg)), var(--bg));
}

:is(#page-settings, #page-assistant-settings) .settings-chat-preview-image,
:is(#page-settings, #page-assistant-settings) .settings-chat-preview-tint {
    position: absolute;
    inset: 0;
}

:is(#page-settings, #page-assistant-settings) .settings-chat-preview-image {
    background-position: center;
    background-size: cover;
}

:is(#page-settings, #page-assistant-settings) .settings-chat-preview-thread {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 196px;
    padding: 18px clamp(18px, 6vw, 52px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

:is(#page-settings, #page-assistant-settings) .settings-preview-message {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

:is(#page-settings, #page-assistant-settings) .settings-preview-message.user {
    justify-content: flex-end;
}

:is(#page-settings, #page-assistant-settings) .settings-preview-message.assistant + .settings-preview-message.user {
    margin-top: 9px;
}

:is(#page-settings, #page-assistant-settings) .settings-chat-preview[data-avatar-mode="end"] .settings-preview-message.assistant:has(+ .settings-preview-message.assistant) .settings-preview-avatar,
:is(#page-settings, #page-assistant-settings) .settings-chat-preview[data-avatar-mode="end"] .settings-preview-message.user:has(+ .settings-preview-message.user) .settings-preview-avatar,
:is(#page-settings, #page-assistant-settings) .settings-chat-preview[data-avatar-mode="start"] .settings-preview-message.assistant + .settings-preview-message.assistant .settings-preview-avatar,
:is(#page-settings, #page-assistant-settings) .settings-chat-preview[data-avatar-mode="start"] .settings-preview-message.user + .settings-preview-message.user .settings-preview-avatar {
    visibility: hidden;
    opacity: 0;
}

:is(#page-settings, #page-assistant-settings) .settings-chat-preview[data-avatar-mode="none"] .settings-preview-avatar {
    display: none;
}

:is(#page-settings, #page-assistant-settings) .settings-preview-avatar {
    width: var(--chat-avatar-size, 30px);
    height: var(--chat-avatar-size, 30px);
    flex: 0 0 var(--chat-avatar-size, 30px);
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text2);
    font-size: 10px;
}

:is(#page-settings, #page-assistant-settings) .settings-preview-bubble {
    max-width: 70%;
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    color: var(--text);
    font-size: 11px;
}

:is(#page-settings, #page-assistant-settings) .settings-preview-message.user .settings-preview-bubble {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

:is(#page-settings, #page-assistant-settings) .settings-media-actions,
:is(#page-settings, #page-assistant-settings) .entry-poke-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

:is(#page-settings, #page-assistant-settings) .settings-media-actions {
    margin-top: 10px;
}

:is(#page-settings, #page-assistant-settings) .settings-media-actions .modal-btn.secondary,
:is(#page-settings, #page-assistant-settings) .entry-poke-actions .modal-btn.secondary {
    min-height: 31px;
    padding: 5px 10px;
    background: var(--bg2);
}

:is(#page-settings, #page-assistant-settings) .settings-text-button:disabled {
    color: var(--text3);
    opacity: .45;
}

:is(#page-settings, #page-assistant-settings) .settings-section-note {
    margin-top: 6px;
    color: var(--text3);
    font-size: 11px;
    line-height: 1.5;
}

:is(#page-settings, #page-assistant-settings) .settings-companion-picker {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option {
    min-width: 0;
    min-height: 78px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text2);
    text-align: left;
    background: color-mix(in srgb, var(--bg2) 56%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 9px;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--bg2) 84%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option:active {
    transform: scale(.985);
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option.active {
    color: var(--text);
    background: color-mix(in srgb, var(--accent-dim) 46%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

:is(#page-settings, #page-assistant-settings) .settings-companion-art {
    width: 54px;
    height: 48px;
    flex: 0 0 54px;
    display: grid;
    place-items: center;
}

:is(#page-settings, #page-assistant-settings) .settings-companion-art svg {
    width: 50px;
    height: 42px;
    overflow: visible;
    filter: drop-shadow(0 2px 2px color-mix(in srgb, var(--shadow) 36%, transparent));
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option > span:last-child {
    min-width: 0;
    display: grid;
    gap: 3px;
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option strong {
    font-size: 12px;
    font-weight: 600;
}

:is(#page-settings, #page-assistant-settings) .settings-companion-option small {
    overflow: hidden;
    color: var(--text3);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#page-settings, #page-assistant-settings) .settings-range-row {
    min-height: 46px;
    display: grid;
    grid-template-columns: 82px minmax(80px, 1fr) 44px;
    align-items: center;
    gap: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-avatar-mode-row {
    min-height: 52px;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

:is(#page-settings, #page-assistant-settings) .settings-avatar-mode-row > span {
    color: var(--text2);
    font-size: 12px;
    font-weight: 520;
}

:is(#page-settings, #page-assistant-settings) .settings-avatar-mode-picker {
    min-width: 0;
    padding: 3px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2px;
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
    border-radius: 7px;
}

:is(#page-settings, #page-assistant-settings) .settings-avatar-mode-picker button {
    min-width: 0;
    min-height: 28px;
    padding: 4px 2px;
    color: var(--text3);
    border-radius: 5px;
    font-size: 10px;
    white-space: nowrap;
}

:is(#page-settings, #page-assistant-settings) .settings-avatar-mode-picker button.active {
    color: var(--text);
    background: var(--bg);
}

:is(#page-settings, #page-assistant-settings) .settings-range-row.is-disabled {
    opacity: .42;
}

:is(#page-settings, #page-assistant-settings) .settings-media-actions + .settings-range-row,
:is(#page-settings, #page-assistant-settings) .greeting-layout + .settings-range-row {
    margin-top: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-range-row label {
    color: var(--text2);
    font-size: 12px;
    font-weight: 520;
}

:is(#page-settings, #page-assistant-settings) .settings-range-row output {
    color: var(--text3);
    font-size: 11px;
    text-align: right;
}

:is(#page-settings, #page-assistant-settings) .greeting-layout {
    margin-top: 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    gap: clamp(18px, 5vw, 48px);
}

:is(#page-settings, #page-assistant-settings) .greeting-controls {
    min-width: 0;
    display: grid;
    justify-items: start;
    gap: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-compact-field {
    display: grid;
    gap: 5px;
}

:is(#page-settings, #page-assistant-settings) .settings-compact-field > span {
    color: var(--text3);
    font-size: 10px;
    font-weight: 500;
}

:is(#page-settings, #page-assistant-settings) .settings-compact-field select {
    width: 138px;
    min-height: 32px;
    padding: 5px 28px 5px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg2);
    color: var(--text2);
    font-family: var(--font-body);
    font-size: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-compact-field input {
    width: 138px;
    min-height: 32px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: 0;
    background: var(--bg2);
    color: var(--text2);
    font-family: var(--font-body);
    font-size: 12px;
}

:is(#page-settings, #page-assistant-settings) .settings-compact-field input:focus,
:is(#page-settings, #page-assistant-settings) .custom-greeting-composer input:focus,
:is(#page-settings, #page-assistant-settings) .custom-greeting-composer select:focus {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-settings {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-heading strong {
    color: var(--text2);
    font-size: 12px;
    font-weight: 560;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-heading span,
:is(#page-settings, #page-assistant-settings) .custom-greeting-empty {
    color: var(--text3);
    font-size: 10px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-composer {
    margin-top: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 82px 52px;
    gap: 7px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-composer input,
:is(#page-settings, #page-assistant-settings) .custom-greeting-composer select,
:is(#page-settings, #page-assistant-settings) .custom-greeting-composer button {
    min-width: 0;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: var(--font-body);
    font-size: 11px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-composer input,
:is(#page-settings, #page-assistant-settings) .custom-greeting-composer select {
    padding: 6px 9px;
    outline: 0;
    background: var(--bg2);
    color: var(--text2);
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-composer button {
    color: var(--control-on-fill);
    background: var(--control-fill);
    border-color: transparent;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-list {
    margin-top: 9px;
    display: grid;
    gap: 5px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-empty {
    margin: 3px 0 0;
    line-height: 1.5;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-item {
    min-height: 34px;
    padding: 6px 7px 6px 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto 26px;
    align-items: center;
    gap: 8px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--bg2) 62%, transparent);
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-item span {
    overflow: hidden;
    color: var(--text2);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-item small {
    color: var(--text3);
    font-size: 9px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-item button {
    width: 26px;
    height: 26px;
    color: var(--text3);
    border-radius: 6px;
    font-size: 16px;
}

:is(#page-settings, #page-assistant-settings) .custom-greeting-item button:hover,
:is(#page-settings, #page-assistant-settings) .custom-greeting-item button:active {
    color: #D94040;
    background: color-mix(in srgb, #D94040 8%, transparent);
}

:is(#page-settings, #page-assistant-settings) .greeting-type-preview {
    max-width: 330px;
    margin-top: 6px;
    color: var(--text);
    font-family: var(--greeting-font, var(--font-display));
    font-size: 24px;
    line-height: 1.25;
}

:is(#page-settings, #page-assistant-settings) .greeting-poke-column {
    display: grid;
    justify-items: center;
    gap: 9px;
}

:is(#page-settings, #page-assistant-settings) .entry-poke-preview {
    width: 124px;
    height: 124px;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: color-mix(in srgb, var(--bg2) 68%, transparent);
}

:is(#page-settings, #page-assistant-settings) .entry-poke-preview img {
    width: min(var(--entry-poke-size, 62px), 112px);
    height: min(var(--entry-poke-size, 62px), 112px);
    object-fit: contain;
}

:is(#page-settings, #page-assistant-settings) .entry-poke-actions {
    justify-content: center;
}

:is(#page-settings, #page-assistant-settings) .font-settings-section .settings-row:first-of-type {
    margin-top: 8px;
}

:is(#page-settings, #page-assistant-settings) .fontsize-controls {
    display: flex;
    align-items: center;
    gap: 7px;
}

:is(#page-settings, #page-assistant-settings) .fontsize-controls .fontsize-btn {
    width: 30px !important;
    height: 30px !important;
    display: grid;
    place-items: center;
    border: 1px solid var(--border);
    border-radius: 50% !important;
    background: var(--bg2) !important;
    color: var(--text2) !important;
    font-size: 17px;
}

:is(#page-settings, #page-assistant-settings) .fontsize-controls #fontsize-value {
    min-width: 28px;
    color: var(--text);
    font-size: 14px;
    font-weight: 620;
    text-align: center;
}

#modal-model-presets .provider-card {
    padding: 0;
    border: 0;
    background: transparent;
}

#modal-model-presets .provider-connection-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px;
    gap: 10px;
}

#modal-model-presets .provider-connection-grid label {
    min-width: 0;
    display: grid;
    gap: 5px;
}

#modal-model-presets .provider-connection-grid label.wide {
    grid-column: 1 / -1;
}

#modal-model-presets .provider-connection-grid label > span,
#modal-model-presets .provider-model-heading {
    color: var(--text3);
    font-size: 10px;
    font-weight: 550;
}

#modal-model-presets .provider-model-heading {
    margin-top: 16px;
    padding-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
}

#modal-model-presets .provider-model-list {
    display: grid;
    gap: 6px;
    padding-top: 8px;
}

#modal-model-presets .provider-model-row {
    grid-template-columns: minmax(90px, .8fr) minmax(120px, 1.2fr) 30px;
}

#modal-model-presets .provider-model-row .tiny-btn {
    width: 30px;
    height: 30px;
    padding: 0;
    align-self: center;
}

#modal-model-presets .provider-action-row {
    justify-content: space-between;
}

@media (max-width: 520px) {
    :is(#page-settings, #page-assistant-settings) .settings-section,
    :is(#page-settings, #page-assistant-settings) .appearance-section {
        padding: 15px;
    }

    :is(#page-settings, #page-assistant-settings) .greeting-layout {
        grid-template-columns: minmax(0, 1fr) 132px;
        gap: 14px;
    }

    :is(#page-settings, #page-assistant-settings) .entry-poke-preview {
        width: 112px;
        height: 112px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-compact-field select {
        width: 118px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-compact-field input {
        width: 118px;
    }

    :is(#page-settings, #page-assistant-settings) .custom-greeting-composer {
        grid-template-columns: minmax(0, 1fr) 76px;
    }

    :is(#page-settings, #page-assistant-settings) .custom-greeting-composer button {
        grid-column: 1 / -1;
    }

    :is(#page-settings, #page-assistant-settings) .settings-companion-option {
        padding-inline: 9px;
        gap: 8px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-companion-art {
        width: 44px;
        flex-basis: 44px;
    }

    :is(#page-settings, #page-assistant-settings) .settings-companion-art svg {
        width: 43px;
    }

    #modal-model-presets .provider-model-row {
        grid-template-columns: 1fr 30px;
    }

    #modal-model-presets .provider-model-id {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    #modal-model-presets .provider-model-delete {
        grid-column: 2;
        grid-row: 1;
    }
}

/* ─── Sidebar conversation history ─── */
#sidebar-recent-collapse.open {
    max-height: none;
    overflow: visible;
}

.sidebar-recent-item {
    min-height: 58px;
    padding: 0 4px 0 10px;
    gap: 2px;
    border: 1px solid transparent;
}

.sidebar-recent-item:hover,
.sidebar-recent-item:active,
.sidebar-recent-item.active {
    border-color: color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--bg2) 68%, transparent);
}

.sidebar-recent-open {
    min-width: 0;
    min-height: 56px;
    flex: 1;
    padding: 8px 2px;
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-align: left;
}

.sidebar-recent-copy {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.sidebar-recent-title-line {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}

.sidebar-recent-title-line .sidebar-conv-name {
    min-width: 0;
    flex: 0 1 auto;
    font-weight: 550;
    line-height: 1.3;
}

.sidebar-recent-pin {
    color: var(--accent);
    font-size: 18px;
    line-height: 8px;
}

.sidebar-recent-preview {
    overflow: hidden;
    color: var(--text3);
    font-size: 10px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-recent-time {
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 3px;
    color: var(--text3);
    font-size: 9px;
    white-space: nowrap;
}

.sidebar-recent-more {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--text3);
    background: transparent;
    transition: color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.sidebar-recent-more svg {
    width: 16px;
    height: 16px;
}

.sidebar-recent-more:hover,
.sidebar-recent-more:active {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 7%, transparent);
}

.sidebar-recent-empty {
    margin: 2px;
    padding: 16px 8px !important;
    border: 1px dashed color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
    .sidebar-recent-more {
        opacity: .35;
    }

    .sidebar-recent-item:hover .sidebar-recent-more,
    .sidebar-recent-more:focus-visible {
        opacity: 1;
    }
}

/* ─── Grouped home greeting and seamless first-message handoff ─── */
#page-list > .scroll-area {
    display: flex;
    align-items: stretch;
    padding: 0 0 max(12px, env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.home-start {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(26px, 4vh, 38px);
    padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 0 clamp(84px, 14vh, 152px);
}

.home-intro {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    gap: 11px;
    padding: 0 24px;
    transform: none;
    transition: opacity .18s ease, transform .24s ease;
}

.home-intro .conversation-empty-logo-button {
    margin-inline: auto;
}

.home-greeting {
    max-width: min(560px, calc(100vw - 48px));
    margin-inline: auto;
}

.home-composer {
    z-index: 1;
    flex: 0 0 auto;
    width: min(680px, calc(100% - 32px));
    margin: 0;
}

/* On touch screens the visual viewport becomes the keyboard-sized app shell.
   Split that smaller space between the greeting and the bottom composer so
   the mark stays visible without overlapping a growing composer. */
@media (hover: none) and (pointer: coarse) {
    body.chat-keyboard-open #page-list.active .home-start {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        justify-items: center;
        gap: 12px;
        padding: 8px 0 max(8px, env(safe-area-inset-bottom, 0px));
    }

    body.chat-keyboard-open #page-list.active .home-intro {
        position: relative;
        top: auto;
        left: auto;
        align-self: center;
        opacity: 1;
        transform: scale(.9);
        transform-origin: center;
        pointer-events: auto;
    }
}

body.home-conversation-entering #home-start {
    pointer-events: none;
}

body.home-conversation-entering .home-intro {
    opacity: 0;
    transform: translateY(-10px) scale(.985);
    transition: opacity .2s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

body.home-conversation-entering #page-list,
body.home-conversation-entering #page-chat {
    transition-property: opacity, transform;
    transition-duration: .34s;
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
}

body.home-conversation-entering #page-list.behind {
    opacity: 0;
    transform: translateY(-8px) scale(.992);
}

body.home-conversation-entering #page-chat {
    opacity: 0;
    transform: translateY(10px) scale(.996);
}

body.home-conversation-entering #page-chat.active {
    opacity: 1;
    transform: none;
}

.home-composer-transition-ghost {
    position: fixed !important;
    z-index: 120;
    margin: 0 !important;
    pointer-events: none !important;
    transform-origin: center;
    will-change: left, top, width, height, opacity, border-radius;
}

#page-chat .input-bar.home-entry-target {
    opacity: 0;
    transform: translateY(8px) scale(.99);
}

#page-chat .input-bar.home-entry-target.revealed {
    opacity: 1;
    transform: none;
    transition: opacity .18s ease .12s, transform .28s cubic-bezier(.22, 1, .36, 1) .08s;
}

@media (max-height: 560px) {
    .home-start {
        gap: 18px;
        padding-bottom: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.home-conversation-entering .home-intro,
    body.home-conversation-entering #page-list,
    body.home-conversation-entering #page-chat,
    #page-chat .input-bar.home-entry-target.revealed {
        transition-duration: .01ms;
        transition-delay: 0s;
    }

    .home-composer-transition-ghost {
        display: none;
    }
}

/* Unified chat action capsule and outline-free interaction dock. */
#page-wordcards .chat-topbar-actions,
#page-chat .chat-topbar-actions {
    gap: 0;
    height: 40px;
    padding: 0;
    overflow: hidden;
    background: color-mix(in srgb, var(--surface) 74%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 999px;
    -webkit-backdrop-filter: blur(20px) saturate(135%);
    backdrop-filter: blur(20px) saturate(135%);
}

#page-chat .chat-topbar-actions > .chat-model-btn,
#page-chat .chat-topbar-actions > #btn-chat-search {
    height: 38px !important;
    min-width: 38px;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

#page-wordcards .chat-topbar-actions > .chat-model-btn,
#page-chat .chat-topbar-actions > .chat-model-btn {
    padding-inline: 10px;
}

#page-chat .chat-topbar-actions > #btn-chat-search {
    width: 40px !important;
}

#page-wordcards .chat-topbar-actions > button:active,
#page-chat .chat-topbar-actions > button:active {
    background: var(--accent-dim) !important;
    transform: none !important;
}

#page-chat .chat-topbar-actions.model-hidden > #btn-chat-search {
    width: 38px !important;
}

#page-chat #btn-attach {
    color: var(--text2) !important;
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

#page-chat #btn-attach.active {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
}

#page-chat #btn-attach.active svg {
    transform: rotate(45deg) scale(1.04);
}

#page-chat #attach-panel {
    background: var(--chat-float-surface) !important;
    border: 0 !important;
    border-radius: var(--chat-float-radius) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: var(--chat-float-blur) !important;
    backdrop-filter: var(--chat-float-blur) !important;
}

#page-chat #attach-panel::after {
    display: none !important;
}

#page-chat #attach-menu {
    scrollbar-width: none;
}

#page-chat #attach-menu::-webkit-scrollbar {
    display: none;
}

#page-chat #attach-menu .attach-menu-item.wheel-active {
    background: var(--chat-float-active) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#page-chat #attach-menu .attach-menu-icon {
    background: transparent !important;
    border-color: transparent !important;
}

#page-chat #attach-menu .attach-menu-item.wheel-active .attach-menu-icon,
#page-chat #attach-panel.effects-open .attach-effects-trigger .attach-menu-icon {
    background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

#page-chat #attach-panel.effects-open .attach-effects-trigger {
    background: color-mix(in srgb, var(--accent) 9%, transparent) !important;
}

#page-chat #attach-effects-view {
    background: color-mix(in srgb, var(--surface) 62%, transparent);
    border: 0;
    box-shadow: none !important;
    -webkit-backdrop-filter: blur(14px) saturate(112%);
    backdrop-filter: blur(14px) saturate(112%);
}

#page-chat #attach-effects-view::before {
    display: none;
}

#page-chat #attach-panel.sticker-open {
    background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent) !important;
    border-radius: 22px !important;
    -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
    backdrop-filter: blur(18px) saturate(112%) !important;
}

@media (max-width: 430px) {
    #page-wordcards .chat-topbar-actions > .chat-model-btn,
    #page-chat .chat-topbar-actions > .chat-model-btn {
        width: 40px;
        max-width: 40px;
        padding: 0 !important;
    }
}

/* ─── Mood month jump picker ─── */
#page-mood .mood-month-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 10px;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 999px;
    transform: translateX(-50%);
    transition: color var(--transition), background var(--transition);
}

#page-mood .mood-month-trigger:active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    transform: translateX(-50%) translateY(1px);
}

#page-mood .mood-month-trigger svg {
    color: var(--text3);
    transition: transform 160ms ease;
}

#page-mood .mood-month-trigger[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.mood-month-picker {
    position: fixed;
    inset: 0;
    z-index: 1100;
}

.mood-month-picker[hidden] {
    display: none;
}

.mood-month-picker-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 13, 11, 0.16);
    border: 0;
    border-radius: 0;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.mood-month-picker-sheet {
    position: absolute;
    top: calc(62px + env(safe-area-inset-top, 0px));
    left: 50%;
    width: min(380px, calc(100% - 24px));
    max-height: calc(100dvh - 78px - env(safe-area-inset-top, 0px));
    padding: 20px;
    overflow-y: auto;
    color: var(--text);
    background:
        linear-gradient(125deg, color-mix(in srgb, var(--mood-user) 4%, transparent), transparent 38%),
        color-mix(in srgb, var(--surface) 96%, transparent);
    border: 0;
    border-radius: 24px;
    box-shadow: 0 20px 54px rgba(24, 17, 12, 0.12);
    transform: translateX(-50%);
    -webkit-backdrop-filter: blur(22px) saturate(120%);
    backdrop-filter: blur(22px) saturate(120%);
}

.mood-month-picker-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.mood-month-picker-head h2 {
    margin: 0;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.35;
}

.mood-month-picker-head p {
    margin: 3px 0 0;
    color: var(--text3);
    font-size: 9px;
}

.mood-month-picker-close,
.mood-year-control > button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
    border-radius: 50%;
}

.mood-month-picker-close {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.mood-year-control {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.mood-year-control > button {
    width: 36px;
    height: 36px;
}

.mood-year-field {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 3px;
    min-width: 0;
}

.mood-year-field input {
    width: 5ch;
    padding: 2px 0;
    color: var(--text);
    font: 650 22px/1.2 var(--font-body);
    text-align: right;
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    outline: none;
    appearance: textfield;
}

.mood-year-field input:focus {
    border-bottom-color: color-mix(in srgb, var(--accent) 54%, transparent);
}

.mood-year-field input::-webkit-inner-spin-button,
.mood-year-field input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

.mood-year-field span {
    color: var(--text3);
    font-size: 12px;
}

.mood-recorded-years {
    display: flex;
    gap: 6px;
    margin: 14px -2px 0;
    padding: 0 2px 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.mood-recorded-years[hidden] {
    display: none;
}

.mood-recorded-years::-webkit-scrollbar {
    display: none;
}

.mood-recorded-years button {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    color: var(--text3);
    font-size: 11px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--border) 62%, transparent);
    border-radius: 999px;
}

.mood-recorded-years button.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--mood-user) 24%, transparent);
}

.mood-month-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.mood-month-grid button {
    position: relative;
    min-width: 0;
    height: 43px;
    color: var(--text2);
    font-size: 13px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 56%, transparent);
    border-radius: 0;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.mood-month-grid button.has-entries::after {
    content: '';
    position: absolute;
    right: 7px;
    bottom: 8px;
    width: 4px;
    height: 4px;
    background: var(--mood-user);
    border-radius: 50%;
}

.mood-month-grid button.active {
    color: var(--text);
    font-weight: 500;
    background: color-mix(in srgb, var(--mood-user) 6%, transparent);
    border-color: color-mix(in srgb, var(--mood-user) 45%, transparent);
}

.mood-month-grid button:active {
    transform: scale(0.97);
}

.mood-month-picker-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 15px;
    padding-top: 13px;
    color: var(--text3);
    font-size: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
}

.mood-month-picker-foot > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mood-month-picker-foot i {
    width: 5px;
    height: 5px;
    background: var(--mood-user);
    border-radius: 50%;
}

.mood-month-picker-foot button {
    height: 30px;
    padding: 0 11px;
    color: var(--mood-user);
    font-size: 11px;
    background: color-mix(in srgb, var(--mood-user) 8%, transparent);
    border: 0;
    border-radius: 999px;
}

@media (max-width: 360px) {
    .mood-month-picker-sheet {
        padding: 16px 14px;
    }

    .mood-month-grid {
        gap: 6px;
    }
}

/* Frosted message action menu — mirrors the composer multifunction panel. */
.ctx-menu.ctx-menu-message {
    min-width: 166px;
    max-width: calc(100vw - 16px);
    padding: 7px;
    color: var(--text);
    background: var(--chat-float-surface);
    border: 0;
    border-radius: var(--chat-float-radius);
    box-shadow: none;
    -webkit-backdrop-filter: var(--chat-float-blur);
    backdrop-filter: var(--chat-float-blur);
}

.ctx-menu-message .ctx-menu-item {
    min-height: 44px;
    padding: 8px 10px;
    gap: 10px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 13px;
    font-size: 13px;
    font-weight: 500;
    transition: color .14s ease, background .14s ease, transform .14s ease;
}

.ctx-menu-message .ctx-menu-item:hover,
.ctx-menu-message .ctx-menu-item:active {
    color: var(--text);
    background: var(--chat-float-active);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.ctx-menu-message .ctx-menu-item:active {
    transform: scale(.975);
}

.ctx-menu-message .ctx-menu-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    color: var(--accent);
    background: transparent;
    border: 0;
    border-radius: 10px;
}

.ctx-menu-message .ctx-menu-icon svg {
    width: 19px;
    height: 19px;
}

.ctx-menu-message .ctx-menu-label {
    line-height: 1.2;
}

.ctx-menu-message .ctx-menu-item.danger,
.ctx-menu-message .ctx-menu-item.danger .ctx-menu-icon {
    color: #C65A52;
}

@media (prefers-reduced-motion: reduce) {
    .ctx-menu.ctx-menu-message,
    .ctx-menu-message .ctx-menu-item {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}

/* ─── Unified frosted chat panels ───
   These two richer panels use the same action-surface language as the
   message menu and composer drawer, while keeping form fields legible. */
#modal-chat-model,
#modal-conv-settings,
[data-theme="dark"] #modal-chat-model,
[data-theme="dark"] #modal-conv-settings {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

#modal-chat-model .modal-sheet,
#modal-conv-settings .modal-sheet,
[data-theme="dark"] #modal-chat-model .modal-sheet,
[data-theme="dark"] #modal-conv-settings .modal-sheet {
    background: var(--chat-float-surface);
    border: 0;
    border-radius: var(--chat-float-radius);
    box-shadow: none;
    -webkit-backdrop-filter: var(--chat-float-blur);
    backdrop-filter: var(--chat-float-blur);
}

#modal-chat-model.show .modal-sheet,
#modal-conv-settings.show .modal-sheet {
    animation: chat-float-arrive .28s cubic-bezier(.22, 1, .36, 1) both;
}

#modal-chat-model.show .model-provider-group {
    animation: none;
}

#modal-chat-model .model-picker-head,
#modal-conv-settings .conv-settings-head {
    min-height: 42px;
    padding: 1px 3px 7px 10px;
}

#modal-chat-model .modal-title,
#modal-conv-settings .modal-title {
    color: var(--text2);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
}

#modal-chat-model .model-picker-close,
#modal-conv-settings .conv-settings-close {
    color: var(--text3);
    background: transparent;
    border: 0;
}

#modal-chat-model .model-picker-close:hover,
#modal-chat-model .model-picker-close:active,
#modal-conv-settings .conv-settings-close:hover,
#modal-conv-settings .conv-settings-close:active {
    color: var(--accent);
    background: var(--chat-float-active);
}

#modal-chat-model .modal-sheet {
    width: min(340px, calc(100vw - 16px));
    padding: 7px;
}

#modal-chat-model .model-sheet-scroll {
    gap: 3px;
}

#modal-chat-model .model-provider-group,
[data-theme="dark"] #modal-chat-model .model-provider-group {
    margin: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 15px;
    box-shadow: none;
}

#modal-chat-model .model-provider-head {
    min-height: 48px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 10px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 13px;
    text-align: left;
    transition: color .14s ease, background .14s ease, transform .14s ease;
}

#modal-chat-model .model-provider-group.open .model-provider-head,
#modal-chat-model .model-provider-head:hover,
#modal-chat-model .model-provider-head:active {
    color: var(--text);
    background: var(--chat-float-active);
}

#modal-chat-model .model-provider-head:active,
#modal-chat-model .model-option-row:active {
    transform: scale(.975);
}

#modal-chat-model .model-provider-icon,
#modal-chat-model .model-option-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    align-self: center;
    color: var(--accent);
    background: transparent;
    border: 0;
    border-radius: 10px;
}

#modal-chat-model .model-provider-icon svg {
    width: 19px;
    height: 19px;
}

#modal-chat-model .model-option-icon {
    color: var(--brand-accent);
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 1;
}

#modal-chat-model .model-provider-copy,
#modal-chat-model .model-option-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#modal-chat-model .model-provider-copy strong,
#modal-chat-model .model-option-copy strong {
    overflow: hidden;
    color: inherit;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#modal-chat-model .model-provider-copy small,
#modal-chat-model .model-option-copy small {
    overflow: hidden;
    color: var(--text3);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#modal-chat-model .model-provider-chevron,
#modal-chat-model .model-option-check {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    align-self: center;
    color: var(--text3);
}

#modal-chat-model .model-provider-chevron svg,
#modal-chat-model .model-option-check svg {
    width: 15px;
    height: 15px;
}

#modal-chat-model .model-provider-chevron {
    transition: color .16s ease, transform .2s ease;
}

#modal-chat-model .model-provider-group.open .model-provider-chevron {
    color: var(--accent);
    transform: rotate(90deg);
}

#modal-chat-model .model-provider-models {
    max-height: min(46vh, 360px);
    padding: 2px 0 5px;
    background: transparent;
    border: 0;
}

#modal-chat-model .model-option-row {
    min-height: 48px;
    padding: 7px 9px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 20px;
    gap: 10px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 13px;
    transition: color .14s ease, background .14s ease, transform .14s ease;
}

#modal-chat-model .model-option-row:hover,
#modal-chat-model .model-option-row:active,
#modal-chat-model .model-option-row.active {
    color: var(--text);
    background: var(--chat-float-active);
    border: 0;
    box-shadow: none;
}

#modal-chat-model .model-option-row.active .model-option-copy small {
    color: color-mix(in srgb, var(--accent) 64%, var(--text2));
}

#modal-chat-model .model-option-check {
    color: var(--accent);
    opacity: 0;
}

#modal-chat-model .model-option-row.active .model-option-check {
    opacity: 1;
}

#modal-conv-settings .modal-sheet {
    width: min(460px, calc(100vw - 16px));
    padding: 8px 10px 11px;
}

#modal-conv-settings #conv-section-nav {
    width: min(300px, 100%);
    margin-bottom: 12px;
    padding: 0;
    gap: 4px;
    background: transparent;
    border: 0;
    border-radius: 15px;
    box-shadow: none;
}

#modal-conv-settings #conv-section-nav .edit-section-tab {
    min-height: 40px;
    padding: 7px 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--text3);
    background: transparent;
    border: 0;
    border-radius: 13px;
    box-shadow: none;
}

#modal-conv-settings #conv-section-nav .edit-section-tab:hover,
#modal-conv-settings #conv-section-nav .edit-section-tab:active,
#modal-conv-settings #conv-section-nav .edit-section-tab.active {
    color: var(--accent);
    background: var(--chat-float-active);
    border: 0;
    box-shadow: none;
}

#modal-conv-settings .conv-section-icon {
    width: 17px;
    height: 17px;
}

#modal-conv-settings .conv-edit-content {
    padding: 0 4px;
}

#modal-conv-settings .conv-icon-stage {
    width: 88px;
    height: 88px;
    margin: 2px auto 3px;
}

#modal-conv-settings .conv-icon-preview {
    width: 80px;
    height: 80px;
    color: var(--accent);
    background: var(--chat-float-active);
    border: 0;
    box-shadow: none;
    font-size: 26px;
}

#modal-conv-settings .conv-icon-clear {
    right: 0;
    bottom: 3px;
    color: var(--text3);
    background: var(--chat-float-surface);
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#modal-conv-settings .conv-icon-copy {
    margin-bottom: 9px;
}

#modal-conv-settings .edit-sheet-input,
#modal-conv-settings .edit-sheet-textarea,
#modal-conv-settings .bg-preview {
    color: var(--text);
    background: var(--chat-float-field);
    border: 1px solid color-mix(in srgb, var(--border) 46%, transparent);
    box-shadow: none;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

#modal-conv-settings .edit-sheet-input:focus,
#modal-conv-settings .edit-sheet-textarea:focus {
    background: color-mix(in srgb, var(--surface) 54%, transparent);
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 7%, transparent);
}

#modal-conv-settings .modal-btn,
#modal-conv-settings .conv-edit-actions .modal-btn,
#modal-conv-settings .modal-btn.secondary {
    min-height: 40px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 13px;
    box-shadow: none;
}

#modal-conv-settings .modal-btn:hover,
#modal-conv-settings .modal-btn:active,
#modal-conv-settings .modal-btn.secondary:hover,
#modal-conv-settings .modal-btn.secondary:active {
    color: var(--accent);
    background: var(--chat-float-active);
    border: 0;
}

#modal-conv-settings .conv-edit-actions {
    margin-top: 8px;
}

#modal-conv-settings .conv-edit-actions .modal-btn {
    color: var(--accent);
    background: var(--chat-float-active);
    font-weight: 600;
}

#modal-conv-settings .conv-delete-btn {
    margin-top: 4px;
    border-radius: 10px;
}

#modal-conv-settings .conv-delete-btn:hover,
#modal-conv-settings .conv-delete-btn:active {
    background: color-mix(in srgb, #C65A52 9%, transparent);
}

@keyframes chat-float-arrive {
    from { opacity: 0; transform: translateY(8px) scale(.94); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 420px) {
    #modal-conv-settings .modal-sheet {
        max-height: min(84dvh, 680px);
    }

    #modal-conv-settings .conv-icon-stage {
        width: 80px;
        height: 80px;
        margin-bottom: 3px;
    }

    #modal-conv-settings .conv-icon-preview {
        width: 72px;
        height: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #modal-chat-model.show .modal-sheet,
    #modal-conv-settings.show .modal-sheet {
        animation: none;
    }
}

/* ─── Unified frosted chat search ─── */
#page-chat .chat-search-bar {
    width: min(620px, calc(100% - 16px));
    margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
    padding: 7px;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    gap: 5px;
    color: var(--text2);
    background: var(--chat-float-surface);
    border: 0;
    border-radius: var(--chat-float-radius);
    box-shadow: none;
    -webkit-backdrop-filter: var(--chat-float-blur);
    backdrop-filter: var(--chat-float-blur);
}

#page-chat .chat-search-bar.open {
    animation: chat-float-arrive .24s cubic-bezier(.22, 1, .36, 1) both;
}

#page-chat .chat-search-field {
    min-width: 0;
    min-height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text3);
    background: var(--chat-float-field);
    border: 1px solid transparent;
    border-radius: 14px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    transition: color .14s ease, background .14s ease, border-color .14s ease;
}

#page-chat .chat-search-field:focus-within {
    color: var(--accent);
    background: color-mix(in srgb, var(--surface) 54%, transparent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

#page-chat .chat-search-field-icon {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

#page-chat .chat-search-bar input,
#page-chat .chat-search-bar input:focus {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

#page-chat .chat-search-bar input::-webkit-search-cancel-button {
    display: none;
}

#page-chat .chat-search-nav {
    min-width: 0;
    gap: 2px;
}

#page-chat #chat-search-count {
    min-width: 38px;
    padding: 0 4px;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 10px;
    text-align: center;
}

#page-chat .chat-search-nav button,
#page-chat .chat-search-close {
    width: 34px;
    height: 34px;
    color: var(--text2);
    background: transparent;
    border: 0;
    border-radius: 11px;
    box-shadow: none;
    transition: color .14s ease, background .14s ease, transform .14s ease;
}

#page-chat .chat-search-nav button svg,
#page-chat .chat-search-close svg {
    width: 18px;
    height: 18px;
}

#page-chat .chat-search-nav button:hover,
#page-chat .chat-search-nav button:active,
#page-chat .chat-search-close:hover,
#page-chat .chat-search-close:active {
    color: var(--accent);
    background: var(--chat-float-active);
}

#page-chat .chat-search-nav button:active,
#page-chat .chat-search-close:active {
    transform: scale(.94);
}

#page-chat .chat-search-nav button:disabled {
    color: var(--text3);
    background: transparent;
    opacity: .28;
}

#page-chat .search-highlight,
#page-chat .search-highlight.active {
    color: inherit;
    border-radius: 3px;
}

#page-chat .search-highlight {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--accent) 42%, transparent);
}

#page-chat .search-highlight.active {
    background: color-mix(in srgb, var(--accent) 32%, transparent);
    box-shadow: inset 0 -2px 0 var(--accent);
}

@media (max-width: 430px) {
    #page-chat .chat-search-bar {
        width: calc(100% - 16px);
        grid-template-columns: minmax(0, 1fr) auto 34px;
    }

    #page-chat .chat-search-nav {
        grid-column: auto;
        grid-row: auto;
        padding-top: 0;
    }

    #page-chat .chat-search-close {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 350px) {
    #page-chat #chat-search-count {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .chat-search-bar.open {
        animation: none;
    }
}

/* Claude keeps functional controls monochrome and saves clay for small marks. */
#page-wordcards .send-btn,
#page-chat .send-btn {
    color: var(--control-on-fill) !important;
    background: var(--control-fill) !important;
    border-color: transparent !important;
}

.home-send-btn.ready,
.modal-btn:not(.secondary):not(.danger),
.save-btn {
    color: var(--control-on-fill);
    background: var(--control-fill);
}

/* ─── Home room: a second, swipe-revealed space for local chat keepsakes ─── */
#page-list > .scroll-area {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    scroll-padding: 0;
    scroll-snap-type: y mandatory;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
}

.home-start,
.home-room {
    min-height: 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.home-start {
    height: 100%;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

.home-room {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: hidden;
    padding: max(30px, calc(env(safe-area-inset-top, 0px) + 18px)) 18px max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px));
    color: var(--text);
    background:
        radial-gradient(ellipse at 82% 13%, color-mix(in srgb, #F3DAB8 38%, transparent) 0%, transparent 34%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 54%, var(--bg)) 0 76%, var(--bg2) 76% 100%);
}

.home-room::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 76% 0 auto;
    height: 1px;
    background: color-mix(in srgb, var(--border) 74%, transparent);
    box-shadow: 0 12px 24px color-mix(in srgb, var(--shadow) 28%, transparent);
}

.home-room::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -10%;
    bottom: -20%;
    width: 58%;
    height: 56%;
    opacity: .32;
    background: linear-gradient(125deg, transparent 44%, color-mix(in srgb, var(--text) 7%, transparent) 45% 46%, transparent 47%);
    transform: skewX(-10deg);
    pointer-events: none;
}

.home-room-window {
    position: absolute;
    z-index: -1;
    top: max(56px, calc(env(safe-area-inset-top, 0px) + 44px));
    right: max(28px, calc((100% - 680px) / 2 + 20px));
    width: 116px;
    height: 140px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5px;
    padding: 8px;
    opacity: .76;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 2px;
    box-shadow:
        0 16px 38px color-mix(in srgb, #D9BC91 18%, transparent),
        0 1px 0 color-mix(in srgb, white 72%, transparent) inset;
    transform: rotate(.35deg);
}

.home-room-window span {
    min-width: 0;
    background:
        linear-gradient(145deg, color-mix(in srgb, #E9D7BA 68%, var(--surface)), color-mix(in srgb, #DCE2DE 42%, var(--surface)));
    border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}

.home-room-header,
.home-word-wall,
.home-room-shelf {
    width: min(680px, 100%);
    margin-inline: auto;
}

.home-room-header {
    position: relative;
    z-index: 1;
    min-height: 137px;
    padding: 0 148px 12px 2px;
}

.home-room-back {
    min-height: 28px;
    margin: 0 0 16px -7px;
    padding: 3px 7px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text3);
    font-size: 11px;
    letter-spacing: .02em;
    border-radius: 999px;
    transition: color var(--transition), background var(--transition);
}

.home-room-back:hover,
.home-room-back:active {
    color: var(--text);
    background: color-mix(in srgb, var(--text) 6%, transparent);
}

.home-room-back svg {
    width: 15px;
    height: 15px;
}

.home-room-kicker,
.home-room-label {
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.home-room-header h1 {
    margin-top: 5px;
    font-family: var(--font-display);
    font-size: clamp(27px, 6vw, 38px);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -.025em;
}

.home-room-subtitle {
    margin-top: 7px;
    color: var(--text2);
    font-size: 12px;
    line-height: 1.55;
}

.home-word-wall {
    position: relative;
    z-index: 1;
    min-height: 304px;
    padding: 17px 18px 20px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface) 69%, transparent), color-mix(in srgb, var(--bg2) 56%, transparent));
    border: 7px solid color-mix(in srgb, var(--border) 56%, var(--surface));
    border-radius: 5px;
    box-shadow:
        0 13px 28px color-mix(in srgb, var(--shadow) 28%, transparent),
        0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent),
        0 1px 0 color-mix(in srgb, white 56%, transparent) inset;
    transform: rotate(-.15deg);
}

.home-word-wall-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.home-word-wall-heading h2 {
    margin-top: 2px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
}

.home-word-scopes {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    background: color-mix(in srgb, var(--bg2) 62%, transparent);
    border-radius: 999px;
}

.home-word-scopes button {
    min-width: 38px;
    height: 27px;
    padding-inline: 9px;
    color: var(--text3);
    font-size: 10px;
    border-radius: 999px;
    transition: color var(--transition), background var(--transition), box-shadow var(--transition);
}

.home-word-scopes button.active,
.home-word-scopes button[aria-selected="true"] {
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 1px 5px color-mix(in srgb, var(--shadow) 42%, transparent);
}

.home-word-notes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 13px 10px;
    align-items: start;
}

.home-word-note {
    position: relative;
    min-width: 0;
    min-height: 82px;
    padding: 15px 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    background: color-mix(in srgb, #F5EDDC 72%, var(--surface));
    border: 1px solid color-mix(in srgb, #B9A98E 26%, transparent);
    border-radius: 2px;
    box-shadow: 0 5px 11px color-mix(in srgb, var(--shadow) 42%, transparent);
    transform: rotate(var(--note-tilt));
    animation: home-note-settle .34s cubic-bezier(.22, 1, .36, 1) var(--note-delay) both;
}

.home-word-note::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    background: color-mix(in srgb, var(--text3) 52%, transparent);
    border-radius: 50%;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 65%, transparent);
    transform: translateX(-50%);
}

.home-word-note-tone-1 {
    background: color-mix(in srgb, #EEE9DA 70%, var(--surface));
}

.home-word-note-tone-2 {
    background: color-mix(in srgb, #E8E9E2 68%, var(--surface));
}

.home-word-note-tone-3 {
    background: color-mix(in srgb, #F0E4D7 64%, var(--surface));
}

.home-word-note strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(13px, 2.8vw, 17px);
    font-weight: 500;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-word-note span {
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.2;
}

.home-word-empty {
    grid-column: 1 / -1;
    min-height: 180px;
    display: grid;
    place-items: center;
    color: var(--text3);
    font-size: 12px;
    text-align: center;
}

.home-room-shelf {
    position: relative;
    z-index: 1;
    min-height: 107px;
    margin-top: 12px;
    padding: 0 26px 13px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    gap: 22px;
}

.home-room-shelf::after {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 7px;
    left: 10px;
    height: 7px;
    background: color-mix(in srgb, #8D765D 36%, var(--border));
    border-radius: 2px;
    box-shadow: 0 7px 12px color-mix(in srgb, var(--shadow) 42%, transparent);
}

.home-room-object {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: min(112px, 100%);
    height: 74px;
    padding: 8px 8px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--text);
}

.home-room-object strong {
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 500;
    line-height: 1;
}

.home-room-object span {
    color: var(--text3);
    font-size: 9px;
    white-space: nowrap;
}

.home-room-object-frame {
    width: 92px;
    height: 70px;
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 7px solid color-mix(in srgb, #A58A6A 38%, var(--border));
    border-radius: 2px;
    box-shadow: 0 4px 8px color-mix(in srgb, var(--shadow) 38%, transparent);
    transform: rotate(-1.8deg);
}

.home-room-object-books {
    height: 63px;
    margin-bottom: 2px;
    background: color-mix(in srgb, #CBC8B9 58%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: 3px 8px 3px 3px;
    box-shadow:
        0 7px 0 -1px color-mix(in srgb, #AAB0A8 52%, var(--surface)),
        0 14px 0 -2px color-mix(in srgb, #BDAA91 48%, var(--surface)),
        0 18px 9px -7px color-mix(in srgb, var(--shadow) 52%, transparent);
    transform: rotate(.6deg);
}

.home-room-object-calendar {
    width: 82px;
    height: 70px;
    background: color-mix(in srgb, var(--surface) 91%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
    border-top: 10px solid color-mix(in srgb, #9B9487 48%, var(--border));
    border-radius: 3px;
    box-shadow: 0 4px 9px color-mix(in srgb, var(--shadow) 36%, transparent);
    transform: rotate(1.2deg);
}

body.home-room-visible .clawd {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
}

.clawd.in-home-room {
    transition: top .34s cubic-bezier(.22, 1, .36, 1), left .34s cubic-bezier(.22, 1, .36, 1), right .24s ease, bottom .24s ease;
}

[data-theme="dark"] .home-room {
    background:
        radial-gradient(ellipse at 82% 13%, color-mix(in srgb, #B88A62 12%, transparent) 0%, transparent 36%),
        linear-gradient(180deg, color-mix(in srgb, var(--surface) 72%, var(--bg)) 0 76%, var(--bg2) 76% 100%);
}

[data-theme="dark"] .home-room-window span {
    background: linear-gradient(145deg, #48433B, #333A38);
}

[data-theme="dark"] .home-word-note,
[data-theme="dark"] .home-word-note-tone-1,
[data-theme="dark"] .home-word-note-tone-2,
[data-theme="dark"] .home-word-note-tone-3 {
    background: color-mix(in srgb, #D2C2A7 13%, var(--surface));
    border-color: color-mix(in srgb, #D2C2A7 18%, transparent);
}

[data-theme="dark"] .home-room-object-frame,
[data-theme="dark"] .home-room-object-calendar {
    background: color-mix(in srgb, #D2C2A7 10%, var(--surface));
}

[data-theme="dark"] .home-room-object-books {
    background: color-mix(in srgb, #B8B5A6 15%, var(--surface));
    box-shadow:
        0 7px 0 -1px color-mix(in srgb, #8F9990 18%, var(--surface)),
        0 14px 0 -2px color-mix(in srgb, #B59A79 18%, var(--surface)),
        0 18px 9px -7px color-mix(in srgb, var(--shadow) 52%, transparent);
}

@keyframes home-note-settle {
    from { opacity: 0; transform: translateY(8px) rotate(calc(var(--note-tilt) - 1deg)); }
    to { opacity: 1; transform: translateY(0) rotate(var(--note-tilt)); }
}

@media (max-width: 560px) {
    .home-room {
        padding-inline: 12px;
    }

    .home-room-header {
        min-height: 125px;
        padding-right: 112px;
    }

    .home-room-window {
        right: 18px;
        width: 92px;
        height: 112px;
        opacity: .6;
    }

    .home-word-wall {
        min-height: 314px;
        padding: 15px 12px 18px;
        border-width: 6px;
    }

    .home-word-notes {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 11px 6px;
    }

    .home-word-note {
        min-height: 86px;
        padding-inline: 4px;
    }

    .home-room-shelf {
        gap: 10px;
        padding-inline: 12px;
    }
}

@media (max-width: 390px) {
    .home-room-header {
        padding-right: 91px;
    }

    .home-room-window {
        right: 12px;
        width: 76px;
        height: 100px;
    }

    .home-room-subtitle {
        max-width: 220px;
    }

    .home-word-wall-heading {
        align-items: flex-start;
        margin-bottom: 13px;
    }

    .home-word-scopes button {
        min-width: 34px;
        padding-inline: 7px;
    }

    .home-word-notes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-word-note {
        min-height: 58px;
    }

    .home-word-note:nth-child(n + 9) {
        display: none;
    }
}

@media (max-height: 690px) and (min-width: 391px) {
    .home-room {
        padding-top: max(18px, env(safe-area-inset-top, 0px));
    }

    .home-room-header {
        min-height: 112px;
    }

    .home-room-back {
        margin-bottom: 8px;
    }

    .home-word-wall {
        min-height: 278px;
    }

    .home-word-note {
        min-height: 70px;
    }

    .home-room-shelf {
        min-height: 92px;
    }
}

/* ─── Direct, swipeable sidebar with permanent recent conversations ─── */
.sidebar-swipe-edge {
    display: none;
}

.sidebar-main {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-assistant-section,
.sidebar-archive-section {
    flex: 0 0 auto;
}

.sidebar-recent-section {
    min-height: 132px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-recent-section > .sidebar-section-heading {
    flex: 0 0 auto;
    justify-content: space-between;
}

#sidebar-recent-list {
    min-height: 0;
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 2px 0 8px;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

#sidebar-recent-list::-webkit-scrollbar {
    display: none;
}

#sidebar-assistant-collapse.open {
    max-height: min(22vh, 180px);
    overflow-y: auto;
}

#sidebar-archive-collapse.open {
    max-height: min(40vh, 340px);
    overflow-y: auto;
}

.sidebar-recent-kind {
    flex: 0 0 auto;
    padding: 1px 5px;
    color: var(--text3);
    font-size: 8px;
    font-weight: 500;
    line-height: 1.5;
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border-radius: 5px;
}

@media (max-width: 899px) {
    .sidebar-swipe-edge {
        position: fixed;
        z-index: 49;
        top: 0;
        bottom: 0;
        left: 0;
        width: 24px;
        display: block;
        touch-action: none;
    }

    .sidebar-overlay.open .sidebar {
        touch-action: pan-y;
    }

    .sidebar-overlay.sidebar-dragging {
        opacity: 1;
        pointer-events: auto;
        transition: none;
    }

    .sidebar-overlay.sidebar-dragging .sidebar {
        transition: none;
        will-change: transform;
    }

    body.sidebar-swipe-active {
        cursor: grabbing;
        user-select: none;
        -webkit-user-select: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar-overlay,
    .sidebar {
        transition-duration: .01ms;
    }
}

@media (hover: none) and (pointer: coarse) {
    body.chat-keyboard-open #page-list > .scroll-area {
        overflow-y: hidden;
        scroll-snap-type: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-list > .scroll-area {
        scroll-behavior: auto;
    }

    .home-word-note {
        animation: none;
    }
}

/* The room follows the same quiet, flat language as the rest of Merle. */
.home-room,
[data-theme="dark"] .home-room {
    --room-light-wash: transparent;
    display: flex;
    overflow: visible;
    padding: max(46px, calc(env(safe-area-inset-top, 0px) + 36px)) 24px max(32px, calc(env(safe-area-inset-bottom, 0px) + 24px));
    background: radial-gradient(circle at calc(50% + 245px) 185px, var(--room-light-wash), transparent 250px), var(--bg);
    transition: background .5s ease;
}

.home-room.is-light-on {
    --room-light-wash: color-mix(in srgb, var(--brand-accent) 8%, transparent);
}

.home-room::before,
.home-room::after,
.home-room-window {
    display: none;
}

.home-room-content {
    width: min(680px, 100%);
    min-height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.home-room-heading {
    position: relative;
    min-height: 112px;
    padding: 0 104px 18px 0;
}

.home-room-return {
    width: 32px;
    height: 32px;
    margin: 0 0 13px -7px;
    display: grid;
    place-items: center;
    color: var(--text3);
    border-radius: 50%;
    transition: color var(--transition), background var(--transition);
}

.home-room-return:hover,
.home-room-return:active {
    color: var(--text);
    background: var(--accent-dim);
}

.home-room-return svg {
    width: 15px;
    height: 15px;
}

.home-room-heading h1 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(27px, 5vw, 34px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -.025em;
}

.home-room-light {
    position: absolute;
    top: 0;
    right: 2px;
    width: 76px;
    height: 94px;
    overflow: hidden;
    color: var(--text3);
    background:
        linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat,
        linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat,
        color-mix(in srgb, var(--surface) 28%, transparent);
    border: 1px solid var(--border);
    border-radius: 5px;
    transition: background .35s ease, border-color .35s ease, transform var(--transition);
}

.home-room-light:active {
    transform: scale(.97);
}

.home-room-light span {
    position: absolute;
    top: 12px;
    left: 11px;
    width: 8px;
    height: 8px;
    background: var(--text3);
    border-radius: 50%;
    opacity: .3;
    transition: opacity .35s ease, background .35s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}

.home-room.is-light-on .home-room-light {
    background:
        linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat,
        linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat,
        color-mix(in srgb, var(--brand-accent) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--brand-accent) 25%, var(--border));
}

.home-room.is-light-on .home-room-light span {
    background: var(--brand-accent);
    opacity: .72;
    transform: translate(42px, 52px);
}

.home-room-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 28px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--border);
}

.home-room-stat {
    min-width: 0;
    padding: 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-right: 1px solid var(--border);
}

.home-room-stat:first-child {
    padding-left: 0;
}

.home-room-stat:last-child {
    padding-right: 0;
    border-right: 0;
}

.home-room-stat strong {
    color: var(--text2);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
}

.home-room-stat span {
    overflow: hidden;
    color: var(--text3);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}






.home-room-echo-entry {
    width: 100%;
    min-height: 60px;
    margin: 0 0 22px;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 12px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 54%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 20%, var(--border));
    border-radius: 14px;
    text-align: left;
    transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition);
}

.home-room-echo-entry:hover,
.home-room-echo-entry:active {
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border-color: color-mix(in srgb, var(--brand-accent) 38%, var(--border));
}

.home-room-echo-entry:active {
    transform: scale(.985);
}

.home-room-echo-entry-mark {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--text2);
    background: color-mix(in srgb, var(--brand-accent) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--brand-accent) 22%, var(--border));
    border-radius: 50%;
}

.home-room-echo-entry-mark svg {
    width: 20px;
    height: 20px;
}

.home-room-echo-entry-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.home-room-echo-entry-copy strong {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
}

.home-room-echo-entry-copy small {
    overflow: hidden;
    color: var(--text3);
    font-size: 9px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-room-echo-entry-arrow {
    width: 17px;
    height: 17px;
    color: var(--text3);
}

.home-room-favorites {
    min-width: 0;
    margin: 0 0 22px;
}

.home-room-favorites > header {
    min-height: 28px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
}

.home-room-favorites h2 {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
}

.home-room-favorites > header span {
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 9px;
}

.home-room-favorite-list {
    max-height: 174px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.home-room-favorite {
    padding: 11px 2px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
}

.home-room-favorite:last-child {
    border-bottom: 0;
}

.home-room-favorite > p {
    color: var(--text2);
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.home-room-favorite footer {
    min-width: 0;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.home-room-favorite footer span {
    min-width: 0;
    overflow: hidden;
    color: var(--text3);
    font-size: 8px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.home-room-favorite footer button {
    width: 26px;
    height: 26px;
    margin: -4px -4px -4px auto;
    flex: 0 0 26px;
    display: grid;
    place-items: center;
    color: var(--text3);
    border-radius: 50%;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}

.home-room-favorite footer button:hover,
.home-room-favorite footer button:active {
    color: #C65A52;
    background: color-mix(in srgb, #C65A52 8%, transparent);
}

.home-room-favorite footer button:active {
    transform: scale(.9);
}

.home-room-favorite footer svg {
    width: 15px;
    height: 15px;
}

.home-room-favorite-empty {
    min-height: 52px;
    display: flex;
    align-items: center;
    color: var(--text3);
    font-size: 10px;
}





























.home-room-echo[hidden] {
    display: none;
}

.home-room-echo {
    width: min(680px, 100%);
    min-width: 0;
    min-height: 0;
    margin: 0 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    flex: 1;
    color: var(--text);
    animation: homeRoomEchoIn .28s cubic-bezier(.22, 1, .36, 1) both;
}

.home-room-echo-messages {
    min-height: 0;
    padding: 26px 2px 22px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}

.home-room-echo-messages::-webkit-scrollbar {
    display: none;
}

.home-room-echo-empty {
    min-height: 100%;
    padding: 24px;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 13px;
    color: var(--text3);
    text-align: center;
}

.home-room-echo-empty[hidden] {
    display: none;
}

.home-room-echo-empty svg {
    width: 42px;
    height: 42px;
    opacity: .34;
}

.home-room-echo-empty p {
    max-width: 260px;
    font-family: var(--font-display);
    font-size: 13px;
    line-height: 1.65;
}

.home-room-echo-row {
    display: flex;
    margin-top: 7px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}

.home-room-echo-row.visible {
    opacity: 1;
    transform: translateY(0);
}

.home-room-echo-row.user {
    justify-content: flex-end;
    margin-top: 18px;
}

.home-room-echo-bubble {
    width: fit-content;
    max-width: min(82%, 520px);
    padding: 9px 13px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 76%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 17px;
    font-size: 13px;
    line-height: 1.58;
    text-align: left;
    overflow-wrap: anywhere;
}

.home-room-echo-row.assistant .home-room-echo-bubble {
    border-bottom-left-radius: 6px;
}

.home-room-echo-row.user .home-room-echo-bubble {
    color: var(--control-on-fill);
    background: var(--control-fill);
    border-color: transparent;
    border-bottom-right-radius: 6px;
}

.home-room-echo-row.assistant .home-room-echo-bubble > span {
    display: block;
}

.home-room-echo-row.assistant .home-room-echo-bubble small {
    display: block;
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.4;
    opacity: 0;
    transition: max-height .2s ease, margin .2s ease, opacity .2s ease;
}

.home-room-echo-row.assistant.source-open .home-room-echo-bubble small {
    max-height: 28px;
    margin-top: 5px;
    opacity: 1;
}

.home-room-echo-composer {
    width: 100%;
    min-height: 46px;
    padding: 4px 5px 4px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: end;
    gap: 7px;
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 23px;
}

.home-room-echo-composer textarea {
    width: 100%;
    min-height: 36px;
    max-height: 96px;
    padding: 8px 0 7px;
    resize: none;
    color: var(--text);
    background: transparent;
    border: 0;
    outline: none;
    font: 13px/1.5 var(--font-body);
}

.home-room-echo-composer textarea::placeholder {
    color: var(--text3);
}

.home-room-echo-composer button {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    color: var(--control-on-fill);
    background: var(--control-fill);
    border-radius: 50%;
    transition: opacity var(--transition), transform var(--transition);
}

.home-room-echo-composer button:disabled {
    opacity: .28;
}

.home-room-echo-composer button:not(:disabled):active {
    transform: scale(.92);
}

.home-room-echo-composer button svg {
    width: 15px;
    height: 15px;
}

body.home-room-echo-visible .clawd {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Word cards share the conversation header, bubbles and composer above. */
#page-wordcards { color: var(--text); background: var(--bg); }
#page-wordcards .home-room-echo { width: 100%; margin: 0; }
.wordcards-view[hidden] { display: none !important; }
#page-wordcards .home-room-echo-row { margin: 0; }
#page-wordcards .bubble { text-align: left; white-space: pre-wrap; }
#page-wordcards .bubble small { display: none; color: var(--text3); font-size: 10px; margin-top: 8px; }
#page-wordcards .source-open .bubble small { display: block; }
#wordcards-title { font-size: 10px; color: var(--text3); }
#page-wordcards .chat-identity-btn { pointer-events: none; }
#page-wordcards .chat-topbar-actions > .chat-model-btn { width: auto; padding: 0 12px; font-size: 11px; }
#page-wordcards .wordcards-library { width: min(820px, 100%); padding: calc(var(--nav-h) + var(--safe-top) + 12px) 16px max(16px, var(--safe-bottom)); }
.wordcards-library-heading, .wordcards-batch, .wordcards-card-select { display: flex; align-items: center; gap: 10px; }
.wordcards-library-heading { justify-content: space-between; }
.wordcards-library-heading button, .wordcards-library-tools button, .wordcards-batch button { font-size: 12px; color: var(--text); min-height: 32px; padding: 4px 8px; border-radius: 8px; background: var(--surface2); }
.wordcards-library-tools { flex-wrap: wrap; }
.wordcards-library-tools select, .wordcards-library-tools > input, .wordcards-batch select { min-width: 0; flex: 1; min-height: 34px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--bg); font-size: 16px; }
.wordcards-help { font-size: 12px; color: var(--text3); line-height: 1.6; }
.wordcards-batch { flex-wrap: wrap; font-size: 12px; }
.wordcards-batch select { flex: 0 1 130px; font-size: 13px; }
.wordcards-card-select { color: var(--text3); font-size: 11px; cursor: pointer; }
.wordcards-card.is-disabled { border-style: dashed; }
#page-wordcards button:disabled { opacity: .35; }
#page-wordcards input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: middle; }
#page-wordcards .wordcards-grid { align-content: start; }
#page-wordcards .wordcards-library { overflow-y: auto; }
#page-wordcards .wordcards-grid { overflow: visible; flex: 0 0 auto; }

.wordcards-library {
    width: min(820px, 100%);
    min-height: 0;
    margin: 0 auto;
    padding: 16px 0 max(18px, var(--safe-bottom));
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 14px;
}

.wordcards-library-tools {
    display: flex;
    align-items: center;
    gap: 9px;
}

.wordcards-search {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.wordcards-search svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    color: var(--text3);
}

.wordcards-search input {
    min-width: 0;
    width: 100%;
    color: var(--text);
}

.wordcards-draw {
    min-height: 40px;
    padding: 0 14px;
    color: var(--control-on-fill);
    background: var(--control-fill);
    border-radius: 12px;
    font-size: 11px;
}

.wordcards-draw:disabled {
    opacity: .3;
}

.wordcards-grid {
    min-height: 0;
    padding-right: 2px;
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    scrollbar-width: none;
}

.wordcards-grid::-webkit-scrollbar {
    display: none;
}

.wordcards-card {
    min-width: 0;
    min-height: 132px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.wordcards-card > p {
    color: var(--text);
    font-family: var(--font-display);
    font-size: 14px;
    line-height: 1.62;
    overflow-wrap: anywhere;
}

.wordcards-card footer {
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.wordcards-card footer span {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    color: var(--text3);
    font-family: var(--font-mono);
    font-size: 8px;
    line-height: 1.45;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wordcards-card footer button {
    flex: 0 0 auto;
    padding: 5px 8px;
    color: var(--text2);
    background: var(--bg2);
    border-radius: 8px;
    font-size: 9px;
}

.wordcards-library-empty {
    grid-column: 1 / -1;
    min-height: 180px;
    padding: 24px;
    display: grid;
    place-items: center;
    color: var(--text3);
    font-size: 12px;
    line-height: 1.7;
    text-align: center;
}

body.chat-keyboard-open #page-wordcards .wordcards-summary {
    display: none;
}

@media (max-width: 520px) {
    .wordcards-grid {
        grid-template-columns: 1fr;
    }

    .wordcards-card {
        min-height: 112px;
    }
}

@keyframes homeRoomEchoIn {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 560px) {
    .home-room,
    [data-theme="dark"] .home-room {
        padding: max(44px, calc(env(safe-area-inset-top, 0px) + 34px)) 20px max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
    }

    .home-room-heading {
        min-height: 108px;
        padding: 0 90px 16px 0;
    }

    .home-room-return {
        margin-bottom: 12px;
    }

    .home-room-stats {
        margin-top: 24px;
        padding-top: 12px;
    }

    .home-room-stat {
        padding-inline: 8px;
        gap: 4px;
    }




    .home-room-echo-messages {
        padding-top: 18px;
    }
}

@media (max-width: 350px) {
    .home-room,
    [data-theme="dark"] .home-room {
        padding-inline: 16px;
    }




}

@media (max-height: 690px) and (min-width: 391px) {
    .home-room,
    [data-theme="dark"] .home-room {
        padding-top: max(32px, calc(env(safe-area-inset-top, 0px) + 24px));
    }

    .home-room-return {
        margin-bottom: 10px;
    }

    .home-room-heading {
        padding-bottom: 14px;
    }

    .home-room-stats {
        margin-top: 20px;
        padding-top: 10px;
    }

    .home-room-favorite-list {
        max-height: 116px;
    }


}

@media (prefers-reduced-motion: reduce) {
    .home-room-echo,
    .home-room-echo-row {
        animation: none;
        transition-duration: .01ms;
    }
}

/* ─── In-conversation user questions ─── */
#page-chat .ask-user-input-row {
    align-items: flex-end !important;
    padding-right: 20px !important;
}

#page-wordcards .ask-user-input-row .msg-body,
#page-chat .ask-user-input-row .msg-body {
    width: min(560px, calc(100vw - 82px));
    max-width: min(86%, 560px) !important;
}

.ask-user-input-card {
    width: 100%;
    overflow: hidden;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 94%, var(--paper-deep));
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 18px;
}

.ask-user-input-card > header {
    padding: 13px 14px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--accent-dim) 52%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 12%, var(--border));
}

.ask-user-input-card > header > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ask-user-input-card > header strong {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 650;
}

.ask-user-input-card > header small {
    color: var(--text3);
    font-size: 10px;
    line-height: 1.35;
}

.ask-user-input-mark {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--accent);
    background: color-mix(in srgb, var(--surface) 82%, var(--accent-dim));
    border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 14px;
}

.ask-user-input-form {
    padding: 4px 14px 13px;
}

.ask-user-input-question {
    min-width: 0;
    margin: 0;
    padding: 14px 0 13px;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
}

.ask-user-input-question legend {
    padding: 3px 7px;
    color: var(--accent);
    background: var(--accent-dim);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .04em;
}

.ask-user-input-question > p {
    margin: 8px 1px 10px;
    font-size: 13px;
    font-weight: 560;
    line-height: 1.55;
}

.ask-user-input-options {
    display: grid;
    gap: 7px;
}

.ask-user-input-option {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text2);
    background: color-mix(in srgb, var(--bg2) 72%, transparent);
    border: 1px solid var(--border);
    border-radius: 11px;
    text-align: left;
    transition: border-color var(--transition), background var(--transition), transform var(--transition);
}

.ask-user-input-option:active {
    transform: scale(.985);
}

.ask-user-input-option.selected {
    color: var(--text);
    background: color-mix(in srgb, var(--accent-dim) 72%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
}

.ask-user-input-option > span:last-child {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ask-user-input-option strong {
    font-size: 12px;
    font-weight: 620;
}

.ask-user-input-option small {
    color: var(--text3);
    font-size: 10px;
    line-height: 1.35;
}

.ask-user-input-choice {
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    flex: none;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--text3) 58%, var(--border));
    border-radius: 50%;
    font-size: 9px;
}

.ask-user-input-option.selected .ask-user-input-choice {
    background: color-mix(in srgb, var(--accent-dim) 80%, var(--surface));
    border-color: var(--accent);
}

.ask-user-input-custom {
    margin-top: 8px;
    display: grid;
    gap: 5px;
}

.ask-user-input-custom > span {
    color: var(--text3);
    font-size: 9px;
}

.ask-user-input-custom input {
    width: 100%;
    height: 39px;
    padding: 0 11px;
    color: var(--text);
    background: color-mix(in srgb, var(--surface) 70%, var(--bg2));
    border: 1px solid var(--border);
    border-radius: 10px;
    outline: none;
    font-size: 12px;
}

.ask-user-input-custom input:focus {
    border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
}

.ask-user-input-question.needs-answer {
    margin-inline: -7px;
    padding-inline: 7px;
    background: color-mix(in srgb, #D95D54 5%, transparent);
    border-radius: 10px;
}

.ask-user-input-error {
    min-height: 15px;
    margin: 7px 0 0;
    color: #B84C42;
    font-size: 10px;
}

.ask-user-input-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ask-user-input-actions > span {
    color: var(--text3);
    font-size: 9px;
    line-height: 1.35;
}

.ask-user-input-actions > div {
    display: flex;
    align-items: center;
    gap: 7px;
    flex: none;
}

.ask-user-input-skip,
.ask-user-input-submit {
    min-height: 34px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 620;
}

.ask-user-input-skip {
    color: var(--text3);
}

.ask-user-input-submit {
    color: var(--accent-contrast, #fff);
    background: var(--accent);
}

.ask-user-input-settled {
    padding: 10px 14px 13px;
    display: grid;
    gap: 8px;
}

.ask-user-input-settled > div {
    display: grid;
    gap: 2px;
}

.ask-user-input-settled small {
    color: var(--text3);
    font-size: 9px;
}

.ask-user-input-settled span {
    color: var(--text2);
    font-size: 12px;
    line-height: 1.45;
}

.ask-user-input-notice {
    padding: 13px 14px 14px;
    color: var(--text3);
    font-size: 11px;
    line-height: 1.45;
}

@media (max-width: 390px) {
    #page-chat .ask-user-input-row {
        padding-right: 6px !important;
    }

    #page-wordcards .ask-user-input-row .msg-body,

    #page-chat .ask-user-input-row .msg-body {
        width: calc(100vw - 66px);
        max-width: calc(100% - 38px) !important;
    }

    .ask-user-input-actions {
        align-items: flex-end;
    }

    .ask-user-input-actions > span {
        max-width: 96px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ask-user-input-option {
        transition-duration: .01ms;
    }
}

/* Active questions live in a light bottom sheet; only a quiet recap stays in chat. */
#page-chat .ask-user-input-dock {
    width: min(680px, 100%);
    margin: 0 auto;
    padding: 0 10px 2px;
    pointer-events: none;
}

#page-chat .ask-user-input-dock[hidden] {
    display: none;
}

body.ask-user-input-open .clawd {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#page-chat .ask-user-input-dock .ask-user-input-sheet {
    max-height: min(58dvh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(24px) scale(.985);
    transform-origin: center bottom;
    transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1);
}

#page-chat .ask-user-input-dock.open .ask-user-input-sheet {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#page-chat .ask-user-input-dock.closing .ask-user-input-sheet {
    opacity: 0;
    transform: translateY(14px) scale(.99);
}

#page-chat .ask-user-input-sheet {
    background: color-mix(in srgb, var(--surface) 97%, var(--bg));
    border: 1px solid var(--border);
    border-radius: 17px;
}

#page-chat .ask-user-input-grabber {
    width: 30px;
    height: 3px;
    margin: 7px auto 0;
    background: color-mix(in srgb, var(--text3) 30%, transparent);
    border-radius: 999px;
}

#page-chat .ask-user-input-sheet > header {
    padding: 10px 16px 5px;
    display: grid;
    gap: 2px;
    background: transparent;
    border: 0;
}

#page-chat .ask-user-input-sheet > header strong {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 620;
}

#page-chat .ask-user-input-sheet > header small {
    color: var(--text3);
    font-size: 10px;
}

#page-chat .ask-user-input-sheet .ask-user-input-form {
    padding: 0 16px 12px;
}

#page-chat .ask-user-input-sheet .ask-user-input-question {
    padding: 12px 0 10px;
    border: 0;
}

#page-chat .ask-user-input-sheet .ask-user-input-question + .ask-user-input-question {
    border-top: 1px solid var(--line-soft);
}

#page-chat .ask-user-input-sheet .ask-user-input-question legend {
    padding: 0;
    color: var(--text3);
    background: transparent;
    border-radius: 0;
    font-size: 9px;
    font-weight: 560;
}

#page-chat .ask-user-input-sheet .ask-user-input-question > p {
    margin: 5px 0 9px;
    font-size: 13px;
    font-weight: 590;
    line-height: 1.45;
}

#page-chat .ask-user-input-sheet .ask-user-input-options {
    gap: 5px;
}

#page-chat .ask-user-input-sheet .ask-user-input-option {
    min-height: 40px;
    padding: 7px 9px;
    gap: 8px;
    background: transparent;
    border-color: color-mix(in srgb, var(--border) 78%, transparent);
    border-radius: 10px;
}

#page-chat .ask-user-input-sheet .ask-user-input-option.selected {
    background: color-mix(in srgb, var(--accent-dim) 58%, transparent);
    border-color: color-mix(in srgb, var(--accent) 46%, var(--border));
}

#page-chat .ask-user-input-sheet .ask-user-input-option strong {
    font-size: 12px;
    font-weight: 560;
}

#page-chat .ask-user-input-sheet .ask-user-input-option small {
    font-size: 9px;
}

#page-chat .ask-user-input-sheet .ask-user-input-choice {
    width: 16px;
    height: 16px;
}

#page-chat .ask-user-input-sheet .ask-user-input-custom {
    margin-top: 6px;
}

#page-chat .ask-user-input-sheet .ask-user-input-custom > span {
    display: none;
}

#page-chat .ask-user-input-sheet .ask-user-input-custom input {
    height: 36px;
    padding-inline: 10px;
    background: transparent;
    border-color: color-mix(in srgb, var(--border) 78%, transparent);
    font-size: 11px;
}

#page-chat .ask-user-input-sheet .ask-user-input-error {
    min-height: 0;
    margin: 0;
}

#page-chat .ask-user-input-sheet .ask-user-input-error:not(:empty) {
    margin: 5px 0;
}

#page-chat .ask-user-input-sheet .ask-user-input-actions {
    padding-top: 7px;
    border-top: 1px solid var(--line-soft);
}

#page-chat .ask-user-input-sheet .ask-user-input-actions > span {
    font-size: 9px;
}

#page-chat .ask-user-input-sheet .ask-user-input-skip,
#page-chat .ask-user-input-sheet .ask-user-input-submit {
    min-height: 31px;
    padding: 5px 10px;
    font-size: 10px;
}

#page-chat .ask-user-input-recap-row {
    padding-right: 44px !important;
}

#page-wordcards .ask-user-input-recap-row .msg-body,
#page-chat .ask-user-input-recap-row .msg-body {
    max-width: min(78%, 620px) !important;
}

#page-chat .ask-user-input-recap {
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--text3);
    font-size: 10px;
    line-height: 1.4;
}

#page-chat .ask-user-input-recap > span {
    color: var(--accent);
}

#page-chat .ask-user-input-recap small {
    white-space: nowrap;
}

#page-chat .ask-user-input-recap strong {
    overflow: hidden;
    color: var(--text2);
    font-size: 10px;
    font-weight: 520;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 390px) {
    #page-chat .ask-user-input-dock {
        padding-inline: 8px;
    }

    #page-chat .ask-user-input-sheet {
        max-height: min(62dvh, 500px);
        border-radius: 15px;
    }

    #page-chat .ask-user-input-recap-row {
        padding-right: 28px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-chat .ask-user-input-dock .ask-user-input-sheet {
        transition-duration: .01ms;
    }
}


/* ─── iOS standalone: edge-to-edge canvas, safe interactive chrome ─── */
html,
body {
    min-height: 100%;
    background-color: var(--bg);
    overscroll-behavior: none;
}

/* Installed iOS PWAs paint beneath the translucent status bar. The page
   backgrounds stay full-bleed; only controls receive safe-area padding. */
@media (display-mode: standalone), (display-mode: fullscreen) {
    :root {
        /* Full installed viewport; keyboard measurements override this inline. */
        --app-height: 100lvh;
    }

    html,
    body {
        height: 100lvh;
        min-height: 100lvh;
    }

    #app,
    .sidebar-overlay,
    .sidebar,
    .startup-loader,
    .copy-selection-overlay,
    .ctx-menu-backdrop,
    #effect-layer {
        /* Installed iOS can report a short fixed/dvh viewport (812px) while
           lvh covers the full screen (874px). Keep safe areas inside it. */
        bottom: auto;
        height: 100lvh;
    }

    .modal-overlay {
        top: var(--app-top, 0px);
        bottom: auto;
        height: var(--app-height);
    }

    #app {
        width: 100%;
        max-width: none;
    }
}

.page > .topbar {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
}

#page-list > .topbar {
    padding-left: max(12px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
}

#page-wordcards .chat-topbar-leading,
#page-chat .chat-topbar-leading {
    left: max(10px, var(--safe-left));
}

#page-wordcards .chat-topbar-actions,
#page-chat .chat-topbar-actions {
    right: max(10px, var(--safe-right));
}

.sidebar {
    width: min(calc(292px + var(--safe-left)), 100vw);
}

.sidebar-header {
    padding-left: calc(14px + var(--safe-left));
}

.sidebar-main {
    padding-left: calc(12px + var(--safe-left));
}

#sidebar-user-profile {
    padding-left: var(--safe-left);
}

@media (orientation: landscape) and (max-height: 500px) {
    .modal-sheet,
    .edit-sheet {
        margin-left: var(--safe-left);
        margin-right: var(--safe-right);
    }
}

#page-wordcards .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The library action stays readable at phone widths. */
#page-wordcards .chat-topbar-actions > .chat-model-btn {
    width: auto !important;
    max-width: none;
    padding: 0 12px !important;
    white-space: nowrap;
}
#page-wordcards .chat-identity-meta { gap: 5px; }
#page-wordcards .chat-messages {
    padding-top: calc(var(--nav-h) + var(--safe-top) + 18px);
    padding-bottom: 18px !important;
    scroll-padding-bottom: 18px;
}
#home-room-echo-messages:has(.msg-row)::before { content: ''; margin-top: auto; flex: 0 0 auto; }
#wordcards-category { flex: 1 1 120px; width: 0; }
#wordcards-delete-category, #wordcards-rename { flex: 0 0 auto; }

#wordcards-typing[hidden] { display: none !important; }
.wordcards-typing-dots { display: inline-flex; align-items: center; gap: 5px; height: 22px; }
.wordcards-typing-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text3); animation: wordCardsTyping 1.2s ease-in-out infinite; }
.wordcards-typing-dots i:nth-child(2) { animation-delay: .16s; }
.wordcards-typing-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes wordCardsTyping { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .wordcards-typing-dots i { animation: none; opacity: .65; } }

/* Voice protocol bubbles synthesize only through the explicit play control. */
.voice-bubble { cursor: default; }
.voice-play-btn, .voice-transcript-toggle { cursor: pointer; }
.voice-play-btn:disabled { cursor: wait; opacity: .6; }
.voice-play-btn:focus-visible, .voice-transcript-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.voice-transcript-toggle { flex-shrink: 0; font-size: 10px; padding: 6px 2px; color: inherit; opacity: .65; }
.voice-wave { min-width: 0; }

/* Assistant chats are an app inside the phone desktop. */
#page-list > .topbar { display: flex; }
#page-list > .topbar .ai-app-exit { display: grid; place-items: center; margin-left: auto; pointer-events: auto; width: 40px; height: 40px; }
.ai-app-exit svg { width: 20px; height: 20px; }
body:not(.assistant-chat-active) .sidebar-overlay,
body:not(.assistant-chat-active) .sidebar-swipe-edge { display: none !important; }
@media (min-width: 900px) {
    body:not(.assistant-chat-active) #app { left: 0; width: 100%; }
}
#page-notes { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
#page-notes::-webkit-scrollbar { display: none; }
#page-notes .creative-space { min-height: 100%; }
#page-notes .creative-space-header { top: 0; padding-top: env(safe-area-inset-top, 0px); }

/* Page navigation is independent of the assistant messenger's round controls. */
.app-page-back {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--page-back-ink, var(--text2));
    cursor: pointer;
    transition: color var(--transition), background var(--transition);
}
.app-page-back svg { width: 20px; height: 20px; }
.app-page-back:active { background: var(--page-back-active, var(--bg2)); }
.app-page-back:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
#page-wordcards { --page-back-ink: var(--text); --page-back-active: var(--surface2); }
#page-mood { --page-back-ink: var(--text); --page-back-active: var(--accent-dim); }
#page-wardrobe { --page-back-ink: var(--wardrobe-accent); --page-back-active: var(--accent-dim); }
#page-music, #page-music-playlist { --page-back-ink: var(--text); --page-back-active: var(--surface2); }

/* Connection details stay available without filling everyday tool cards. */
.tools-advanced > summary {
    padding:16px 4px;
    font-size:13px;
    color:var(--text3);
    cursor:pointer;
}