/* ── Reset & Base ─────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* ── Tokyo Night base palette ─────────────────────────────── */
    --bg: #1a1b26;
    --bg2: #24283b;
    --bg3: #2f3348;
    --bg-deeper: #0a0a0f;                       /* avatar/meeting canvas backdrop */
    --fg: #c0caf5;
    --fg2: #a9b1d6;
    --accent: #7aa2f7;
    --accent2: #bb9af7;
    --green: #9ece6a;
    --red: #f7768e;
    --orange: #ff9e64;
    --border: #3b4261;
    --radius: 8px;
    --sidebar-w: 260px;
    --font: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ── Soft semantic overlays (palette colors at low alpha) ── */
    --red-soft:        rgba(247, 118, 142, 0.15);
    --red-tint:        rgba(247, 118, 142, 0.18);
    --accent-soft:     rgba(122, 162, 247, 0.08);
    --accent-tint:     rgba(122, 162, 247, 0.16);
    --accent-ring:     rgba(122, 162, 247, 0.20);
    --accent2-pale:    rgba(187, 154, 247, 0.10);
    --accent2-soft:    rgba(187, 154, 247, 0.12);
    --accent2-tint:    rgba(187, 154, 247, 0.20);
    --accent2-ring:    rgba(187, 154, 247, 0.25);
    --green-soft:      rgba(158, 206, 106, 0.15);
    --green-tint:      rgba(158, 206, 106, 0.20);
    --orange-soft:     rgba(255, 158, 100, 0.06);
    --orange-tint:     rgba(255, 158, 100, 0.10);

    /* ── Surface tints (white-on-dark highlights) ─────────────── */
    --surface-soft:    rgba(255, 255, 255, 0.03);
    --surface-softer:  rgba(255, 255, 255, 0.02);

    /* ── Modal scrims ─────────────────────────────────────────── */
    --overlay:         rgba(0, 0, 0, 0.60);
    --overlay-strong:  rgba(0, 0, 0, 0.55);
    --overlay-tinted:  rgba(6, 8, 14, 0.82);    /* meeting-live tinted scrim */

    /* ── Shadows (consolidated to 4 levels) ───────────────────── */
    --shadow-sm:       0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-md:       0 16px 50px rgba(0, 0, 0, 0.50);
    --shadow-lg:       0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-modal:    0 10px 48px rgba(0, 0, 0, 0.70);
    --shadow-glow:     0 8px 28px rgba(0, 0, 0, 0.70);
    /* Canvas shadow — for meeting-room and avatar-mode pixel canvases.
       Two layers: outer glow to lift it off the stage + thin border ring. */
    --shadow-canvas:   0 0 40px rgba(0, 0, 0, 0.80), 0 0 0 2px var(--border);

    /* ── Stage backdrop ───────────────────────────────────────── */
    /* Shared radial gradient behind both meeting-room and avatar-mode
       canvases. Warm purple core fading to --bg-deeper edge. */
    --stage-gradient: radial-gradient(ellipse at center, #1a1520 0%, var(--bg-deeper) 60%);

    /* ── Code/markdown sub-palette ────────────────────────────── */
    /* Deliberate GitHub-flavored colors used in chat-output rendering
       (thinking blocks, output links, preview/mobile-confirm cards).
       Distinct from the Tokyo Night chrome on purpose — they signal
       "AI output content" vs "Pingo UI". Do not use outside chat output. */
    --code-bg:               #161b22;
    --code-text:             #c9d1d9;
    --code-text-dim:         #8b949e;
    --code-border:           #30363d;
    --code-blue:             #58a6ff;
    --code-blue-hover:       #79c0ff;
    --code-blue-emph:        #388bfd;
    --code-purple:           #6e40c9;
    --code-purple-soft:      rgba(110, 64, 201, 0.10);
    --code-amber:            #d29922;
    --code-yellow:           #f1c40f;
    --code-yellow-pale:      #ffe566;
    --code-yellow-paler:     #fff8b3;
    --code-green:            #2da44e;
    --code-green-hover:      #2c974b;
    --code-gray:             rgba(110, 118, 129, 0.20);
    --code-gray-strong:      rgba(110, 118, 129, 0.35);
    --code-yellow-bg-soft:   rgba(241, 196, 15, 0.10);
    --code-yellow-bg:        rgba(241, 196, 15, 0.15);
    --code-yellow-bg-hover:  rgba(241, 196, 15, 0.25);
    --code-yellow-tag:       rgba(241, 196, 15, 0.12);
    --code-yellow-divider:   rgba(241, 196, 15, 0.18);
    --code-yellow-border:    rgba(241, 196, 15, 0.45);
    --code-yellow-border-strong: rgba(241, 196, 15, 0.50);
    --code-yellow-ring:      rgba(241, 196, 15, 0.08);
    --code-blue-bg:          rgba(56, 139, 253, 0.10);
    --code-blue-bg-soft:     rgba(56, 139, 253, 0.08);
    --code-blue-border:      rgba(56, 139, 253, 0.45);
    --code-green-soft:       rgba(45, 164, 78, 0.06);
    --code-green-bg:         rgba(45, 164, 78, 0.15);

    /* ── Typography ───────────────────────────────────────────── */
    /* Sizes in rem (1rem = 16px browser default) — respects user zoom (WCAG 1.4.4).
       Pingo's UI is information-dense; the scale is intentionally finer-grained
       than a typical 5-step scale. Use semantic names, not value names. */
    --text-2xs:    0.625rem;    /* 10px — micro: timestamps, status, hints */
    --text-xs:     0.6875rem;   /* 11px — tiny: small labels, info text   */
    --text-sm:     0.75rem;     /* 12px — small: secondary text, metadata */
    --text-base:   0.8125rem;   /* 13px — default UI body                  */
    --text-md:     0.875rem;    /* 14px — body: inputs, buttons, larger UI */
    --text-lg:     0.9375rem;   /* 15px — chat messages, panel headers     */
    --text-xl:     1rem;        /* 16px — section headings (h2/h3)         */
    --text-2xl:    1.125rem;    /* 18px — panel titles                     */
    --text-3xl:    1.25rem;     /* 20px — page titles (sidebar h1)         */
    --text-display: 1.75rem;    /* 28px — hero (auth h1, stat numbers)     */
    --text-hero:    3.5rem;     /* 56px — empty-state icons, ceremonial    */

    /* Weights — only 3 levels in use. Replace `bold` keyword with --font-bold. */
    --font-regular:  400;
    --font-semibold: 600;
    --font-bold:     700;

    /* Line-heights — 5 levels. Tight for display, snug for dense UI labels,
       normal for body, relaxed for chat / long-form. */
    --leading-none:    1;
    --leading-tight:   1.2;
    --leading-snug:    1.4;
    --leading-normal:  1.5;
    --leading-relaxed: 1.65;

    /* Letter-spacing — used on uppercase section labels.
       Pingo's monospace stack already has wide native tracking, so values are subtle. */
    --tracking-wide:  0.5px;
    --tracking-wider: 1px;

    /* ── Spacing scale ────────────────────────────────────────── */
    /* 4px base, 6 levels — covers ~95% of layout needs.
       Tight grouping = space-1/2; component padding = space-3/4;
       between sections = space-5; hero/auth surround = space-6.
       In-between values (6/10/14px) survive on small chrome where they
       are intentional optical adjustments — migrate opportunistically. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;

    /* ── Radius scale ─────────────────────────────────────────── */
    /* --radius (8px) above is the default; these are smaller siblings
       for tags, micro chips, and inline pills. No larger radius — Pingo
       is friendly-but-not-pillowy. */
    --radius-xs: 3px;
    --radius-sm: 4px;

    /* ── z-index scale ────────────────────────────────────────── */
    /* Semantic layering — replaces seven ad-hoc values (10/100/200/500/8500/9000/9999).
       Each tier exists because something must reliably stack above the tier below it:
       raised < modal < popover < fullscreen < modal-prime < popover-prime < toast.
       "prime" = the emphatic meeting-live system that floats above ordinary modals. */
    --z-raised:          10;
    --z-modal:           100;
    --z-popover:         200;
    --z-fullscreen:      500;
    --z-modal-prime:     800;
    --z-popover-prime:   900;
    --z-toast:          1000;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--fg);
    min-height: 100vh;
    font-size: var(--text-md);
    line-height: var(--leading-normal);
}

.hidden { display: none !important; }
.page { min-height: 100vh; }

button {
    padding: 6px 14px;
    background: var(--bg3);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-base);
    cursor: pointer;
}
button:hover { border-color: var(--accent); color: var(--accent); }
.btn-secondary { background: transparent; }
.btn-primary { background: var(--accent); color: var(--bg); border: none; font-weight: var(--font-semibold); }
.btn-primary:hover { opacity: 0.9; color: var(--bg); }
.btn-sm { padding: 3px 8px; font-size: var(--text-xs); }
.btn-danger { color: var(--red); border-color: var(--red); }
.btn-danger:hover { background: var(--red-soft); }

/* ── Auth Page ───────────────────────────────────── */
/* Centered on page via flex (no viewport-unit margins) — the card breathes
   around its content, with clear rhythm groups: brand → form → switch. */
#page-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5) var(--space-4);
}
.auth-container {
    width: 100%;
    max-width: 380px;
    padding: var(--space-6) var(--space-6) var(--space-5);
    background: var(--bg2);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.auth-brand {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-2);
}
.auth-brand h1 {
    color: var(--accent);
    font-size: var(--text-display);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-wide);
}
.auth-tagline {
    font-size: var(--text-sm);
    color: var(--fg2);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.75;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.auth-form h2 {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--fg);
    font-weight: var(--font-semibold);
}
.auth-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.auth-container input, .input-field {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-md);
    outline: none;
    transition: border-color 0.15s;
}
.auth-container input:focus, .input-field:focus { border-color: var(--accent); }
.auth-container button {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    cursor: pointer;
    margin-top: var(--space-1);
}
.auth-container button:hover { opacity: 0.9; }
.auth-switch {
    font-size: var(--text-base);
    color: var(--fg2);
    text-align: center;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
}
.auth-switch a { color: var(--accent); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
.error-msg { padding: var(--space-2) var(--space-3); background: var(--red-soft); color: var(--red); border-radius: var(--radius); font-size: var(--text-base); text-align: center; }

/* ── Main Layout: Sidebar + Content ──────────────── */
.main-layout {
    display: flex;
    height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────── */
.sidebar {
    width: var(--sidebar-w);
    min-width: var(--sidebar-w);
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sidebar-header {
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
}
.sidebar-header h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); color: var(--accent); }

.sidebar-create-row {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) var(--space-3) 0;
}
.sidebar-btn-primary {
    flex: 2;
    padding: 10px var(--space-3);
    background: var(--accent);
    color: var(--bg);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    cursor: pointer;
    text-align: center;
}
.sidebar-btn-primary:hover { opacity: 0.9; color: var(--bg); }
/* Secondary create button — meeting accent, outlined, narrower.
   Weight imbalance signals "对话" is the dominant action. */
.sidebar-btn-secondary {
    flex: 1;
    padding: 10px var(--space-2);
    background: transparent;
    color: var(--accent2);
    border: 1px solid var(--accent2);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    text-align: center;
    transition: background 0.15s;
}
.sidebar-btn-secondary:hover {
    background: var(--accent2-soft);
    color: var(--accent2);
}
.tree-item-meeting .tree-icon { color: var(--accent2); }
.tree-item-meeting.active { background: var(--accent2-soft); }

.sidebar-section { padding: var(--space-4) 0 0; flex: 1; overflow-y: auto; }
/* Section titles read as headers for their groups — tighter type,
   generous top space between sections creates clear visual grouping. */
.sidebar-section-title {
    padding: var(--space-1) var(--space-3);
    margin: 0 var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    border-left: 2px solid currentColor;
    line-height: var(--leading-snug);
}
.sidebar-section-title-chat { color: var(--accent); border-left-color: var(--accent); }
.sidebar-section-title-meeting {
    color: var(--accent2);
    border-left-color: var(--accent2);
    margin-top: var(--space-5);
}

.sidebar-tree { padding: 0 8px; }
.tree-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius);
    cursor: pointer;
    font-size: var(--text-base);
    gap: var(--space-2);
    margin-bottom: 2px;
    position: relative;
}
.tree-item:hover { background: var(--bg3); }
.tree-item.active { background: var(--bg3); color: var(--accent); }
.tree-icon { font-size: var(--text-md); width: 18px; text-align: center; }
.tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* (tree-del retired, replaced by tree-more context menu) */
.tree-more {
    display: none;
    background: none;
    border: none;
    color: var(--fg2);
    font-size: var(--text-xl);
    padding: 0 4px;
    cursor: pointer;
    line-height: var(--leading-none);
}
.tree-item:hover .tree-more { display: block; }
.tree-more:hover { color: var(--accent); }

/* Context menu */
.ctx-menu {
    position: fixed;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 0;
    z-index: var(--z-popover);
    min-width: 100px;
    box-shadow: var(--shadow-sm);
}
.ctx-item {
    padding: 6px 14px;
    font-size: var(--text-sm);
    cursor: pointer;
    color: var(--fg);
}
.ctx-item:hover { background: var(--bg3); }
.ctx-danger { color: var(--red); }
.ctx-danger:hover { background: var(--red-soft); }

.sidebar-empty { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--fg2); }

.sidebar-divider { height: 1px; background: var(--border); margin: 8px 12px; }

.sidebar-nav { padding: 0 8px; }
.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--fg2);
    text-decoration: none;
    font-size: var(--text-base);
    gap: var(--space-2);
    margin-bottom: 2px;
}
.sidebar-nav-item:hover { background: var(--bg3); color: var(--fg); }
.sidebar-nav-item.active { background: var(--bg3); color: var(--accent); }
.nav-icon { font-size: var(--text-md); width: 18px; text-align: center; }

.sidebar-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--fg2);
}

/* ── Content Area ────────────────────────────────── */
.content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Welcome — three-beat rhythm: tight brand → generous gap → loose hint list.
   Asymmetric left-aligned hints so it reads like a menu, not a billboard. */
.welcome-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
    color: var(--fg2);
}
.welcome-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
}
.welcome-mark {
    font-size: var(--text-hero);
    line-height: var(--leading-none);
    color: var(--accent);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
}
.welcome-tagline {
    font-size: var(--text-sm);
    color: var(--fg2);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    opacity: 0.7;
}
.welcome-hints {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: 100%;
    max-width: 380px;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--border);
}
.welcome-hints li {
    display: grid;
    grid-template-columns: 28px 52px 1fr;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    transition: background 0.15s;
}
.welcome-hints li:hover { background: var(--surface-soft); }
.welcome-hint-icon {
    font-size: var(--text-lg);
    text-align: center;
    opacity: 0.85;
}
.welcome-hint-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--accent);
    font-weight: var(--font-bold);
}
.welcome-hint-text {
    font-size: var(--text-base);
    color: var(--fg2);
    line-height: var(--leading-snug);
}

/* ── Sidebar Files Section ───────────────────────── */
.sidebar-files {
    padding: 0 var(--space-2);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}
.sidebar-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-1) var(--space-1);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--space-1);
}
.sidebar-files-actions { display: flex; gap: var(--space-1); }

.drop-zone-sm, .drop-zone-lg {
    margin: 4px 0 6px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface-softer);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drop-zone-sm { padding: 10px; }
.drop-zone-lg { padding: 22px 10px; min-height: 64px; }
.drop-zone-sm:hover, .drop-zone-sm.drop-active,
.drop-zone-lg:hover, .drop-zone-lg.drop-active {
    border-color: var(--accent);
    background: var(--accent-soft);
}

.upload-progress { font-size: var(--text-xs); color: var(--fg); }
.upload-progress > div:first-child { margin-bottom: var(--space-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-bar { height: 6px; background: var(--bg3); border-radius: var(--radius-xs); overflow: hidden; margin-bottom: 2px; }
.progress-fill { height: 100%; background: var(--accent); border-radius: var(--radius-xs); width: 0; transition: width 0.15s; }
.progress-pct { text-align: right; font-size: var(--text-2xs); color: var(--fg2); }
.drop-zone-sm .drop-zone-inner,
.drop-zone-lg .drop-zone-inner {
    font-size: var(--text-sm);
    color: var(--fg2);
}
.drop-zone-lg .drop-zone-inner { font-size: var(--text-base); }

.sidebar-file-list { max-height: 300px; overflow-y: auto; }
.sidebar-file-list .file-item { padding: 4px 6px; font-size: var(--text-sm); gap: 6px; }
.sidebar-file-list .file-size { width: 50px; font-size: var(--text-2xs); }
.sidebar-file-list .file-time { display: none; }
.sidebar-file-list .file-actions button { padding: 1px 4px; font-size: var(--text-2xs); }

/* ── Chat Panel (full right side) ────────────────── */
.chat-panel-header {
    padding: 10px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.chat-panel-header h2 { font-size: var(--text-lg); cursor: pointer; }
.chat-panel-header h2:hover { color: var(--accent); }

/* 开会按钮 */
.btn-meeting {
    padding: 5px 12px;
    background: var(--bg3);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    flex-shrink: 0;
}
.btn-meeting:hover {
    background: var(--accent);
    color: var(--bg);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.chat-msg {
    max-width: 80%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-msg.user { align-self: flex-end; background: var(--accent); color: var(--bg); }
.chat-msg.assistant { align-self: flex-start; background: var(--bg2); border: 1px solid var(--border); }
.chat-msg.system { align-self: center; background: transparent; color: var(--fg2); font-size: var(--text-base); }

.chat-input-row {
    display: flex;
    padding: var(--space-3);
    gap: var(--space-2);
    border-top: 1px solid var(--border);
    background: var(--bg2);
}
.chat-input-row textarea {
    flex: 1;
    padding: 10px 14px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    resize: none;
    outline: none;
    max-height: 140px;
}
.chat-input-row textarea:focus { border-color: var(--accent); }
#btn-send { background: var(--accent); color: var(--bg); border: none; font-weight: var(--font-semibold); min-width: 60px; }

/* Model selector */
.model-select {
    padding: 6px 8px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg2);
    font-family: var(--font);
    font-size: var(--text-xs);
    outline: none;
    cursor: pointer;
}
.model-select:focus { border-color: var(--accent); }

/* Chat entry (groups thinking + response + usage) */
.chat-entry { align-self: flex-start; max-width: 85%; margin-bottom: var(--space-1); }

/* Live status — orange pulsing animation */
.live-status { font-size: var(--text-sm); color: var(--code-amber); padding: 6px 0; font-weight: var(--font-semibold); }
.live-status.running { animation: pulse 1.5s infinite; }
.live-status.done { color: var(--green); animation: none; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Thinking block */
.thinking-wrap {
    border-radius: var(--radius);
    background: var(--code-bg);
    border-left: 2px solid var(--code-purple);
    margin-bottom: 6px;
    overflow: hidden;
}
.thinking-label {
    padding: 6px 10px;
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    color: var(--code-purple);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.thinking-label:hover { background: var(--code-purple-soft); }
.toggle-arrow { font-size: var(--text-2xs); transition: transform 0.2s; }
.thinking-wrap.open .toggle-arrow { transform: rotate(90deg); }
.thinking-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
}
.thinking-wrap.open .thinking-body { max-height: 400px; overflow-y: auto; }
.thinking-text {
    padding: 4px 10px 8px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: var(--text-xs);
    color: var(--code-text-dim);
    line-height: var(--leading-normal);
}

/* Response label */
.response-label { font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--green); padding: 4px 0 2px; }

/* Token usage line */
.chat-usage {
    font-size: var(--text-2xs);
    color: var(--fg2);
    padding: 4px 0;
    opacity: 0.7;
}

/* Output download links in chat */
.chat-output-link {
    color: var(--code-blue);
    text-decoration: underline;
    cursor: pointer;
    font-family: var(--font);
}
.chat-output-link:hover { color: var(--code-blue-hover); }

/* 手机端确认卡 — 蓝色调，区别于网页预览黄卡 */
.mobile-confirm-card {
    background: var(--code-blue-bg);
    border: 1px solid var(--code-blue-border);
    border-left: 4px solid var(--code-blue-emph);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 10px 0 4px;
    font-size: var(--text-base);
    box-shadow: 0 0 0 1px var(--code-blue-bg-soft);
}
.mobile-confirm-title {
    color: var(--code-blue);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    margin-bottom: 6px;
}
.mobile-confirm-summary {
    color: var(--code-text);
    font-size: var(--text-sm);
    margin-bottom: 10px;
    padding: var(--space-1) var(--space-2);
    background: var(--code-blue-bg-soft);
    border-radius: var(--radius-xs);
}
.mobile-confirm-buttons {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.mobile-confirm-buttons button {
    flex: 1 1 auto;
    min-width: 140px;
    padding: 8px 14px;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}
.mobile-confirm-buttons .btn-mobile-yes {
    background: var(--code-green);
    color: var(--bg);
    border-color: var(--code-green);
}
.mobile-confirm-buttons .btn-mobile-yes:hover:not(:disabled) {
    background: var(--code-green-hover);
    border-color: var(--code-green-hover);
}
.mobile-confirm-buttons .btn-mobile-no {
    background: var(--code-gray);
    color: var(--code-text);
    border-color: var(--code-border);
}
.mobile-confirm-buttons .btn-mobile-no:hover:not(:disabled) {
    background: var(--code-gray-strong);
}
.mobile-confirm-buttons button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mobile-confirm-card.answered {
    border-left-color: var(--code-green);
    background: var(--code-green-soft);
}
.mobile-confirm-done {
    margin-top: var(--space-2);
    color: var(--code-green);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

/* 用户已通过按钮做出的选择消息 — 紧凑样式 */
.chat-msg.user.user-mobile-choice {
    background: var(--code-green-bg);
    border-left: 3px solid var(--code-green);
    color: var(--code-green);
    font-size: var(--text-sm);
    padding: 4px 10px;
    font-style: italic;
}

/* 网页预览黄色提醒卡（一卡可包多个页面） */
.preview-card {
    background: var(--code-yellow-bg-soft);
    border: 1px solid var(--code-yellow-border);
    border-left: 4px solid var(--code-yellow);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 12px 0 4px;
    font-size: var(--text-base);
    box-shadow: 0 0 0 1px var(--code-yellow-ring);
}
.preview-card-title {
    color: var(--code-yellow);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}
.preview-card-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 0;
    border-top: 1px dashed var(--code-yellow-divider);
}
.preview-card-row:first-of-type { border-top: none; padding-top: 2px; }
.preview-card-name {
    flex: 0 0 auto;
    color: var(--code-yellow);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    background: var(--code-yellow-tag);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.preview-card-link {
    flex: 1 1 auto;
    color: var(--code-yellow-pale);
    text-decoration: underline;
    word-break: break-all;
    font-family: var(--font);
    font-size: var(--text-sm);
    min-width: 0;
}
.preview-card-link:hover { color: var(--code-yellow-paler); }
.preview-card-copy {
    flex: 0 0 auto;
    background: var(--code-yellow-bg);
    border: 1px solid var(--code-yellow-border-strong);
    color: var(--code-yellow);
    padding: 1px 8px;
    font-size: var(--text-xs);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.preview-card-copy:hover { background: var(--code-yellow-bg-hover); }

/* Output section in sidebar */
.sidebar-output-header {
    padding: 8px 12px 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--fg2);
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
}
.file-download-link {
    color: var(--code-blue);
    text-decoration: underline;
    cursor: pointer;
}
.file-download-link:hover { color: var(--code-blue-hover); }

.file-toolbar { display: flex; gap: var(--space-1); }

.breadcrumb {
    padding: 6px 12px;
    font-size: var(--text-xs);
    color: var(--fg2);
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
}
.breadcrumb a { color: var(--accent); text-decoration: none; cursor: pointer; }
.breadcrumb a:hover { text-decoration: underline; }

.file-list { flex: 1; overflow-y: auto; }
.file-item {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    font-size: var(--text-sm);
    gap: var(--space-2);
}
.file-item:hover { background: var(--bg3); }
.file-icon { width: 18px; text-align: center; font-size: var(--text-base); }
.file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { color: var(--fg2); font-size: var(--text-xs); width: 60px; text-align: right; }
.file-time { color: var(--fg2); font-size: var(--text-xs); width: 120px; text-align: right; }
.file-actions { display: flex; gap: 3px; }
.file-actions button { padding: 1px 5px; font-size: var(--text-2xs); }
.btn-file-del { color: var(--red); }

/* ── Panel Pages (Account / Billing / Contact) ──── */
.panel-page-header {
    padding: var(--space-4) var(--space-5);
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
}
.panel-page-header h2 { font-size: var(--text-xl); }
.panel-page-body { padding: var(--space-5); overflow-y: auto; flex: 1; }

.info-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
}
.info-row:last-child { border-bottom: none; }
.info-label { color: var(--fg2); }

.info-sub { color: var(--fg2); font-size: var(--text-sm); }
.info-accent { color: var(--accent); }

/* ── Usage Bar ───────────────────────────────────── */
.usage-item { margin-bottom: var(--space-3); }
.usage-label { font-size: var(--text-sm); color: var(--fg2); margin-bottom: var(--space-1); display: flex; justify-content: space-between; }
.usage-bar { height: 8px; background: var(--bg3); border-radius: var(--radius-sm); overflow: hidden; }
.usage-fill { height: 100%; border-radius: var(--radius-sm); background: var(--accent); transition: width 0.3s; }
.usage-fill.warn { background: var(--orange); }
.usage-fill.danger { background: var(--red); }

/* ── Badges ──────────────────────────────────────── */
.badge { padding: 2px 8px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-semibold); }
.badge-free { background: var(--bg3); color: var(--fg2); }
.badge-pro { background: var(--accent2-tint); color: var(--accent2); }
.status-on { color: var(--green); }
.status-off { color: var(--red); }

/* ── Modal ───────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}
.modal-content {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-5);
    width: 400px;
    max-width: 90vw;
}
.modal-content h3 { margin-bottom: var(--space-4); font-size: var(--text-xl); }
.modal-content input {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-md);
    outline: none;
}
.modal-content input:focus { border-color: var(--accent); }
.modal-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.modal-actions button { min-width: 80px; }

/* ── Pingo Modal / Toast (替代 alert/confirm/prompt) ── */
.pingo-modal-root {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-toast);
}

/* Overlay (confirm / prompt) */
.pingo-modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.18s ease-out;
}
.pingo-modal-overlay.show { opacity: 1; }

.pingo-modal-box {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 22px 24px 18px;
    width: 360px;
    max-width: 90vw;
    box-shadow: var(--shadow-lg);
    transform: translateY(-8px) scale(0.96);
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1.2);
}
.pingo-modal-overlay.show .pingo-modal-box {
    transform: translateY(0) scale(1);
}
.pingo-modal-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--fg);
    margin-bottom: var(--space-3);
}
.pingo-modal-label {
    font-size: var(--text-sm);
    color: var(--fg2);
    margin: 6px 0 6px;
}
.pingo-modal-body {
    font-size: var(--text-md);
    color: var(--fg);
    line-height: var(--leading-normal);
    margin-bottom: 18px;
    word-break: break-word;
}
.pingo-modal-input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-md);
    outline: none;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.pingo-modal-input:focus {
    border-color: var(--accent);
}
textarea.pingo-modal-input {
    resize: vertical;
    min-height: 70px;
}
.pingo-modal-actions {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
    margin-top: var(--space-1);
}
.pingo-modal-btn {
    min-width: 78px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: var(--text-base);
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--fg);
    transition: background 0.15s, border-color 0.15s;
}
.pingo-modal-btn:hover {
    background: var(--bg2);
    border-color: var(--accent);
}
.pingo-modal-btn-ok {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
    font-weight: var(--font-semibold);
}
.pingo-modal-btn-ok:hover {
    background: var(--accent);
    border-color: var(--accent);
    opacity: 0.9;
}

/* Toast: 屏幕中央偏上的浮动消息 */
.pingo-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateY(-10px);
    min-width: 220px;
    max-width: 80vw;
    padding: 14px 22px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--fg);
    font-size: var(--text-md);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    opacity: 0;
    transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
.pingo-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}
.pingo-toast-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: var(--text-md);
    color: var(--bg);
}
.pingo-toast-msg {
    flex: 1;
    line-height: var(--leading-snug);
    word-break: break-word;
}
.pingo-toast-info    .pingo-toast-icon { background: var(--accent); }
.pingo-toast-success .pingo-toast-icon { background: var(--green); }
.pingo-toast-warn    .pingo-toast-icon { background: var(--orange); }
.pingo-toast-error   .pingo-toast-icon { background: var(--red); }
.pingo-toast-info    { border-color: var(--accent); }
.pingo-toast-success { border-color: var(--green); }
.pingo-toast-warn    { border-color: var(--orange); }
.pingo-toast-error   { border-color: var(--red); }

/* ── Topbar (Admin) ──────────────────────────────── */
.topbar {
    display: flex;
    align-items: center;
    padding: var(--space-3) var(--space-5);
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    gap: var(--space-4);
}
.topbar h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); color: var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-base); color: var(--fg2); }

/* ── Admin Panel ─────────────────────────────────── */
.admin-main { padding: var(--space-5); max-width: 1400px; margin: 0 auto; }
.stat-cards { display: flex; gap: var(--space-4); margin-bottom: var(--space-5); }
.stat-card { flex: 1; padding: 20px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; }
.stat-num { font-size: var(--text-display); line-height: var(--leading-tight); font-weight: var(--font-bold); color: var(--accent); }
.stat-label { font-size: var(--text-sm); color: var(--fg2); margin-top: var(--space-1); }

.admin-content { display: grid; grid-template-columns: 1fr 400px; gap: var(--space-4); }
.admin-user-list { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); overflow-x: auto; }
.admin-user-list h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }

.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.admin-table th { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--border); color: var(--fg2); font-size: var(--text-sm); }
.admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); }
.admin-table tr:hover td { background: var(--bg3); }
.admin-table .row-disabled td { opacity: 0.5; }
.user-link { color: var(--accent); text-decoration: none; font-weight: var(--font-semibold); }
.user-link:hover { text-decoration: underline; }

.admin-detail { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); max-height: calc(100vh - 160px); overflow-y: auto; }
.detail-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.detail-header h3 { font-size: var(--text-xl); }
.detail-info { margin-bottom: var(--space-4); }
.detail-info .info-sub { margin-bottom: 6px; }
.detail-projects { display: flex; flex-direction: column; gap: var(--space-2); }
.admin-project-card { padding: 10px 12px; background: var(--bg3); border-radius: var(--radius); display: flex; align-items: center; gap: var(--space-3); }
.admin-project-info { flex: 1; }
.admin-project-info strong { font-size: var(--text-base); display: block; }
.admin-project-info .info-sub { font-size: var(--text-xs); }
.admin-project-meta { font-size: var(--text-xs); color: var(--fg2); display: flex; gap: var(--space-3); }
.admin-project-actions { flex-shrink: 0; }

/* ── Admin Control Cards ─────────────────────────── */
.admin-control-card {
    background: var(--bg3);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: var(--space-3);
}
.admin-control-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
}
.admin-control-row:last-child { margin-bottom: 0; }
.admin-control-label { font-size: var(--text-sm); color: var(--fg2); min-width: 70px; }
.admin-control-value { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--fg); }
.admin-control-input-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.admin-control-input {
    width: 90px;
    padding: 5px 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-base);
    outline: none;
}
.admin-control-input:focus { border-color: var(--accent); }
.admin-input-prefix, .admin-input-suffix {
    font-size: var(--text-sm);
    color: var(--fg2);
}
.admin-control-msg {
    font-size: var(--text-xs);
    margin-top: 6px;
    min-height: 14px;
}
.admin-control-hint {
    font-size: var(--text-2xs);
    color: var(--fg2);
    opacity: 0.7;
    margin-top: var(--space-1);
}

/* ── Billing Dashboard ───────────────────────────── */
.billing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.billing-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    text-align: center;
}
.billing-card-balance {
    border-color: var(--accent);
    background: linear-gradient(135deg, var(--bg2), var(--accent-soft));
}
.billing-card-label {
    font-size: var(--text-sm);
    color: var(--fg2);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.billing-card-value {
    font-size: var(--text-display);
    font-weight: var(--font-bold);
    color: var(--fg);
    line-height: var(--leading-tight);
}
.billing-card-balance .billing-card-value { color: var(--accent); }
.billing-card-sub {
    font-size: var(--text-xs);
    color: var(--fg2);
    margin-top: 6px;
}
.billing-chart-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.billing-chart-section h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-3);
    color: var(--fg2);
}
.billing-chart-section canvas {
    width: 100%;
    border-radius: var(--radius);
}
.billing-invoices-section { margin-top: var(--space-2); }
.billing-invoices-section h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-3);
    color: var(--fg2);
}
.billing-price-section {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.billing-price-section h3 {
    font-size: var(--text-md);
    margin-bottom: var(--space-3);
    color: var(--fg2);
}

@media (max-width: 768px) {
    .billing-cards { grid-template-columns: 1fr; }
}

/* ── Scrollbar ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-xs); }
::-webkit-scrollbar-thumb:hover { background: var(--fg2); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 768px) {
    .main-layout { flex-direction: column; }
    .sidebar { width: 100%; min-width: auto; height: auto; max-height: 40vh; }
    .files-side { width: 100%; min-width: auto; border-left: none; border-top: 1px solid var(--border); }
    .admin-content { grid-template-columns: 1fr; }
}

/* ── 小人模式 / Avatar Mode ─────────────────────── */
/* 覆盖右侧内容区，保留左侧 sidebar 可见 */
#avatar-mode {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: var(--sidebar-w);
    z-index: var(--z-fullscreen);
    background: var(--bg-deeper);
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    #avatar-mode { left: 0; }
}

/* ── 会议室 canvas（panel-meeting-room） ─────────── */
#panel-meeting-room {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.meeting-room-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    gap: var(--space-3);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.meeting-room-toolbar-left,
.meeting-room-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.meeting-room-icon {
    font-size: var(--text-2xl);
}
.meeting-picker {
    padding: 5px 10px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-sm);
    outline: none;
    min-width: 160px;
    cursor: pointer;
}
.meeting-picker:focus { border-color: var(--accent2); }
.meeting-scene-picker {
    min-width: 150px;
    background: linear-gradient(180deg, var(--bg3), var(--bg2));
    border-color: var(--accent2-tint, var(--border));
}
.meeting-scene-picker:hover { border-color: var(--accent2); }

.meeting-room-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stage-gradient);
}
#meeting-room-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    box-shadow: var(--shadow-canvas);
    border-radius: var(--radius-sm);
}
.meeting-room-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--fg2);
    /* --bg-deeper at 70% alpha — lets the stage gradient show through
       while dimming it enough that the empty-state text reads clearly. */
    background: rgba(10, 10, 15, 0.70);
    pointer-events: none;
}
.meeting-room-empty-icon { font-size: var(--text-hero); line-height: var(--leading-none); margin-bottom: var(--space-4); opacity: 0.85; }
.meeting-room-empty-title { font-size: var(--text-xl); line-height: var(--leading-tight); color: var(--fg); margin-bottom: var(--space-1); }
.meeting-room-empty-sub { font-size: var(--text-sm); line-height: var(--leading-snug); }

#meeting-room-canvas { cursor: pointer; }
#meeting-room-canvas.cursor-move { cursor: crosshair; }

/* ── 会议室 agent 右键浮动菜单 ─────────── */
.meeting-ctx-menu {
    position: fixed;
    z-index: var(--z-popover-prime);
    min-width: 180px;
    background: var(--bg2);
    border: 1px solid var(--accent2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow), 0 0 0 1px var(--accent2-tint);
    padding: 4px 0;
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--fg);
    user-select: none;
    backdrop-filter: blur(6px);
}
.meeting-ctx-header {
    padding: 8px 14px 6px;
    border-bottom: 1px solid var(--border);
    color: var(--accent2);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.meeting-ctx-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    color: var(--fg);
    border: none;
    padding: 8px 14px;
    font-size: var(--text-sm);
    font-family: var(--font);
    cursor: pointer;
    border-radius: 0;
}
.meeting-ctx-item:hover {
    background: var(--accent-tint);
    color: var(--accent);
}
.meeting-ctx-item.meeting-ctx-danger { color: var(--red); }
.meeting-ctx-item.meeting-ctx-danger:hover { background: var(--red-tint); color: var(--red); }
.meeting-ctx-item.meeting-ctx-dim { color: var(--fg2); }
.meeting-ctx-sep {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* ── 单聊弹窗 ─────────── */
.agent-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}
.agent-chat-header h3 { margin: 0; }
.btn-icon {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg2);
    padding: 2px 10px;
    border-radius: var(--radius);
    font-size: var(--text-2xl);
    line-height: var(--leading-none);
    cursor: pointer;
}
.btn-icon:hover { color: var(--red); border-color: var(--red); }
.agent-chat-log {
    height: 420px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}
.agent-chat-placeholder {
    color: var(--fg2);
    font-style: italic;
    text-align: center;
    padding: 16px 8px;
}
.agent-chat-msg {
    margin-bottom: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg2);
    border-left: 2px solid var(--accent);
    white-space: pre-wrap;
    word-break: break-word;
}
.agent-chat-msg.from-user {
    border-left-color: var(--accent2);
}
.agent-chat-msg-author {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    color: var(--accent2);
    margin-bottom: var(--space-1);
    display: flex;
    justify-content: space-between;
}
.agent-chat-msg-time { color: var(--fg2); font-weight: var(--font-regular); }
.agent-chat-thinking-label {
    font-size: var(--text-2xs);
    color: var(--orange);
    margin-top: var(--space-1);
    cursor: pointer;
    user-select: none;
}
.agent-chat-thinking {
    font-size: var(--text-xs);
    color: var(--fg2);
    font-style: italic;
    background: var(--orange-soft);
    border-left: 2px solid var(--orange);
    padding: 6px 8px;
    margin-top: var(--space-1);
    white-space: pre-wrap;
    max-height: 180px;
    overflow-y: auto;
}
.agent-chat-status {
    color: var(--accent);
    font-size: var(--text-xs);
    font-style: italic;
    margin-top: var(--space-1);
}
.agent-chat-status.done { color: var(--green); }
.agent-chat-status.error { color: var(--red); }
.agent-chat-usage {
    font-size: var(--text-2xs);
    color: var(--fg2);
    margin-top: var(--space-1);
    opacity: 0.8;
}
.agent-chat-input-bar {
    display: flex;
    gap: var(--space-2);
}
.agent-chat-input-bar input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    outline: none;
}
.agent-chat-input-bar input:focus { border-color: var(--accent2); }
.agent-chat-input-bar button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── 多人会议面板 ───────────────────── */
#modal-meeting-live {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-prime);
    background: var(--overlay-tinted);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.mtlive-box {
    width: min(1400px, 96vw);
    height: min(880px, 92vh);
    background: var(--bg);
    border: 1px solid var(--accent2);
    border-radius: var(--radius);
    box-shadow: var(--shadow-modal), 0 0 0 1px var(--accent2-ring);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.mtlive-header {
    padding: 10px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.mtlive-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--text-md);
    color: var(--fg);
}
.mtlive-icon { font-size: var(--text-3xl); }
.mtlive-top {
    font-size: var(--text-xs);
    color: var(--fg2);
}
.mtlive-top::before { content: "👑 "; }
.mtlive-badge {
    font-size: var(--text-2xs);
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
}
.mtlive-badge-active {
    background: var(--green-tint);
    color: var(--green);
    border: 1px solid var(--green);
    animation: mtlive-pulse 1.5s infinite;
}
@keyframes mtlive-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
.mtlive-header-btns {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.mtlive-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1px;
    background: var(--border);
    overflow: hidden;
    min-height: 0;
}
.mtlive-agents-wrap,
.mtlive-log-wrap {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}
.mtlive-section-title {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--accent2);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    flex-shrink: 0;
}
.mtlive-agents {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-3);
}
.mtlive-agent-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: var(--text-sm);
}
.mtlive-agent-card.status-working {
    border-left-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent-ring);
}
.mtlive-agent-card.status-working .mtlive-agent-icon { animation: mtlive-pulse 1s infinite; }
.mtlive-agent-card.status-done { border-left-color: var(--green); }
.mtlive-agent-card.status-stopped { border-left-color: var(--red); }
.mtlive-agent-card.status-idle { border-left-color: var(--fg2); opacity: 0.85; }
.mtlive-agent-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
}
.mtlive-agent-icon { font-size: var(--text-md); }
.mtlive-agent-name { font-weight: var(--font-bold); color: var(--fg); }
.mtlive-agent-role { font-size: var(--text-2xs); color: var(--accent2); background: var(--accent2-soft); padding: 1px 6px; border-radius: var(--radius-xs); }
.mtlive-agent-status { font-size: var(--text-2xs); color: var(--fg2); margin-left: auto; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.mtlive-agent-stop {
    font-size: var(--text-2xs);
    padding: 2px 8px;
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--radius-xs);
    cursor: pointer;
}
.mtlive-agent-stop:hover { background: var(--red-soft); }
.mtlive-agent-task {
    font-size: var(--text-xs);
    color: var(--fg2);
    padding: var(--space-1) var(--space-2);
    background: var(--bg);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    border-left: 2px solid var(--fg2);
}
.mtlive-agent-task-label { font-weight: var(--font-bold); color: var(--accent); margin-right: var(--space-1); }
.mtlive-agent-section-label {
    font-size: var(--text-2xs);
    font-weight: var(--font-bold);
    margin-top: 6px;
    margin-bottom: 2px;
}
.mtlive-agent-think-label { color: var(--orange); cursor: pointer; user-select: none; }
.mtlive-agent-resp-label { color: var(--green); }
.mtlive-agent-think {
    font-size: var(--text-xs);
    color: var(--fg2);
    font-style: italic;
    background: var(--orange-soft);
    border-left: 2px solid var(--orange);
    padding: 6px 8px;
    white-space: pre-wrap;
    max-height: 160px;
    overflow-y: auto;
}
.mtlive-agent-resp {
    font-size: var(--text-sm);
    color: var(--fg);
    padding: 6px 8px;
    background: var(--bg);
    border-left: 2px solid var(--green);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
}
.mtlive-agent-usage {
    font-size: var(--text-2xs);
    color: var(--fg2);
    margin-top: var(--space-1);
    opacity: 0.75;
}
.mtlive-agent-waiting {
    font-size: var(--text-xs);
    color: var(--accent);
    font-style: italic;
    padding: 4px 0;
}
.mtlive-log {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.mtlive-log-entry {
    margin-bottom: var(--space-1);
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    word-break: break-word;
}
.mtlive-log-entry.log-user { background: var(--accent2-pale); border-left: 2px solid var(--accent2); padding-left: var(--space-2); }
.mtlive-log-entry.log-thinking { color: var(--fg2); font-style: italic; }
.mtlive-log-entry.log-response { color: var(--fg); }
.mtlive-log-entry.log-system { color: var(--fg2); font-size: var(--text-2xs); }
.mtlive-log-entry.log-notify { background: var(--orange-tint); color: var(--orange); border-left: 2px solid var(--orange); padding-left: var(--space-2); }
.mtlive-log-ts { color: var(--fg2); font-size: var(--text-2xs); margin-right: var(--space-1); }
.mtlive-log-agent { color: var(--accent2); font-weight: var(--font-bold); margin-right: var(--space-1); }
.mtlive-log-empty { color: var(--fg2); font-style: italic; text-align: center; padding: 20px; }

.mtlive-footer {
    padding: 10px 14px;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-shrink: 0;
}
.mtlive-target {
    padding: 6px 10px;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-xs);
    min-width: 180px;
    cursor: pointer;
    outline: none;
}
.mtlive-target:focus { border-color: var(--accent2); }
#mtlive-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    outline: none;
}
#mtlive-input:focus { border-color: var(--accent2); }

/* ── 会议项目面板（panel-meeting） ────────────────── */
.meeting-panel-header {
    padding: 10px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-shrink: 0;
}
.meeting-panel-header h2 {
    font-size: var(--text-lg);
    color: var(--accent2);
}
.meeting-header-btns {
    display: flex;
    gap: var(--space-2);
}
.btn-meeting-action {
    padding: 5px 12px;
    background: var(--bg3);
    color: var(--fg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    cursor: pointer;
}
.btn-meeting-action:hover { border-color: var(--accent); color: var(--accent); }
.btn-meeting-primary {
    background: var(--green);
    color: var(--bg);
    border-color: var(--green);
    font-weight: var(--font-semibold);
}
.btn-meeting-primary:hover {
    background: var(--green);
    color: var(--bg);
    opacity: 0.9;
    border-color: var(--green);
}

.meeting-body {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}
.meeting-agents-wrap {
    flex: 2;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--border);
    min-width: 0;
}
.meeting-log-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 240px;
    overflow: hidden;
}
.meeting-section-title {
    font-size: var(--text-xs);
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    font-weight: var(--font-semibold);
    padding: 0 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 10px;
}
.meeting-log-wrap .meeting-section-title {
    padding: 10px 16px;
    margin-bottom: 0;
}
.meeting-log-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
}
.meeting-empty {
    color: var(--fg2);
    font-size: var(--text-sm);
    padding: var(--space-4);
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    margin: 8px 0;
}

/* Agent 卡片 */
.meeting-agents-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
}
.agent-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--fg2);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.agent-card-manager  { border-left-color: var(--accent2); }
.agent-card-coder    { border-left-color: var(--accent); }
.agent-card-reviewer { border-left-color: var(--orange); }
.agent-card-analyst  { border-left-color: var(--green); }
.agent-card-researcher { border-left-color: var(--green); }
.agent-card-custom   { border-left-color: var(--fg2); }

.agent-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 6px;
}
.agent-card-icon { font-size: var(--text-xl); }
.agent-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--fg);
}
.agent-preset-tag {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg3);
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.agent-badge {
    font-size: var(--text-2xs);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-bold);
    letter-spacing: var(--tracking-wide);
}
.agent-badge-top {
    background: var(--green-soft);
    color: var(--green);
    border: 1px solid var(--green);
}
.agent-del {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--fg2);
    border-radius: var(--radius-sm);
    width: 22px;
    height: 22px;
    line-height: var(--leading-none);
    cursor: pointer;
    font-size: var(--text-md);
    padding: 0;
}
.agent-del:hover {
    border-color: var(--red);
    color: var(--red);
}
.agent-role-text {
    font-size: var(--text-xs);
    color: var(--fg2);
    margin-bottom: 6px;
    line-height: var(--leading-snug);
}
.agent-role-muted { font-style: italic; opacity: 0.7; }
.agent-manages {
    font-size: var(--text-xs);
    color: var(--fg2);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
}
.agent-tag {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 1px 6px;
    font-size: var(--text-2xs);
    color: var(--accent);
}

/* 会议日志条目 */
.meeting-log-entry {
    margin-bottom: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
}
.meeting-log-entry:last-child { border-bottom: none; }
.meeting-log-ts { color: var(--fg2); font-size: var(--text-2xs); opacity: 0.7; }
.meeting-log-icon { font-size: var(--text-xs); }
.meeting-log-who { color: var(--accent); font-weight: var(--font-semibold); font-size: var(--text-xs); }
.meeting-log-content { color: var(--fg); flex: 1 1 100%; font-size: var(--text-xs); }
.meeting-log-system .meeting-log-content { color: var(--fg2); font-style: italic; }
.meeting-log-notify .meeting-log-content { color: var(--orange); }

/* 设置职责弹窗（hierarchy editor） */
.modal-content-wide {
    width: min(640px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
}
.modal-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--fg2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin: 8px 0 4px;
}
.modal-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-base);
    outline: none;
}
.modal-hint {
    font-size: var(--text-sm);
    color: var(--fg2);
    margin-bottom: var(--space-3);
}
.hierarchy-editor {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.hier-row {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
}
.hier-row-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    flex-wrap: wrap;
}
.hier-row-head strong {
    color: var(--fg);
    font-size: var(--text-base);
    min-width: 60px;
}
.hier-preset {
    padding: var(--space-1) var(--space-2);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg2);
    font-family: var(--font);
    font-size: var(--text-xs);
}
.hier-role {
    flex: 1;
    min-width: 140px;
    padding: var(--space-1) var(--space-2);
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--fg);
    font-family: var(--font);
    font-size: var(--text-xs);
    outline: none;
}
.hier-role:focus { border-color: var(--accent); }
.hier-manages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
}
.hier-manages-label {
    color: var(--fg2);
    margin-right: var(--space-1);
}
.hier-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    color: var(--fg);
    font-size: var(--text-xs);
    padding: 2px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.hier-check input { accent-color: var(--accent); }
.hier-notifies { margin-top: 6px; }
.hier-notifies .hier-manages-label { color: var(--orange); }
.hier-notifies .hier-check input { accent-color: var(--orange); }
.avatar-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    gap: var(--space-3);
    flex-shrink: 0;
}
.avatar-toolbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.avatar-mode-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--accent);
}
.avatar-project-name {
    font-size: var(--text-base);
    color: var(--fg2);
    padding: 2px 8px;
    background: var(--bg3);
    border-radius: var(--radius);
}
.avatar-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.avatar-hint {
    font-size: var(--text-xs);
    color: var(--fg2);
    opacity: 0.7;
}
.btn-avatar-exit {
    padding: 5px 12px;
    background: transparent;
    color: var(--red);
    border: 1px solid var(--red);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: var(--text-sm);
    cursor: pointer;
}
.btn-avatar-exit:hover {
    background: var(--red-soft);
    color: var(--red);
}

.avatar-stage {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stage-gradient);
}
#avatar-canvas {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    cursor: pointer;
    box-shadow: var(--shadow-canvas);
    border-radius: var(--radius-sm);
}

/* 小人模式内的终端面板（聊天面板的临时容器）*/
.avatar-terminal {
    position: absolute;
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: min(540px, 50vw);
    background: var(--bg2);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    box-shadow: var(--shadow-glow), 0 0 0 1px var(--accent-ring);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: var(--z-raised);
}
.avatar-terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--accent);
    flex-shrink: 0;
}
.btn-term-close {
    padding: 0 8px;
    background: transparent;
    color: var(--fg2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: var(--text-md);
    cursor: pointer;
    line-height: var(--leading-snug);
}
.btn-term-close:hover { color: var(--accent); border-color: var(--accent); }

#avatar-terminal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 聊天面板移入终端时的样式覆盖 */
#panel-chat.in-avatar-terminal {
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
}
#panel-chat.in-avatar-terminal .chat-panel-header {
    display: none; /* 终端有自己的标题栏 */
}

@media (max-width: 768px) {
    .avatar-terminal {
        top: auto;
        right: 8px;
        left: 8px;
        bottom: 8px;
        width: auto;
        height: 50vh;
    }
    .avatar-hint { display: none; }
}