/* ── Design Tokens ───────────────────────────────────────────────────────
Philosophy:
- Skeleton = neutral grayscale. Works for any brand color.
- Brand (--color-accent-primary) is ONLY used for accents: active rail,
primary button background, focus ring, logo. Never for large fills
or text bodies — so any brand color (red/yellow/green/pink/purple)
looks tasteful without re-tuning.
- Light is the base (:root). Dark overrides via [data-theme="dark"].
- Theme.init() sets data-theme on following system preference
by default (see theme.js).
─────────────────────────────────────────────────────────────────────── */
:root {
/* ── Unified surface (light) ─────────────────────────────────────
Design stance: ONE white canvas. Separation is done by 1px
borders, NOT by color shifts. This gives a calm, clean look
and works with any brand color.
*/
--color-bg-primary: #ffffff; /* sidebar, status bar, all shell */
--color-bg-secondary: #ffffff; /* main content, chat */
--color-bg-tertiary: #ffffff; /* cards — rely on border, not fill */
--color-bg-hover: #f3f4f6; /* hover state (only on interactive rows) */
--color-bg-input: #ffffff;
--color-bg-card: #ffffff;
--color-bg-overlay: rgba(15, 18, 28, 0.42); /* modal scrim */
/* Borders — hairlines, no heavy lines */
--color-border-primary: #e4e6ea; /* default dividers */
--color-border-secondary: #eef0f3; /* softer inner dividers */
--color-border-strong: #d1d5db; /* hover / active outline */
/* Text — 4-tier hierarchy */
--color-text-primary: #1f2328; /* titles, important content */
--color-text-secondary: #4b5260; /* body text */
--color-text-tertiary: #6b7280; /* captions, meta */
--color-text-muted: #9ca3af; /* placeholders, disabled */
--color-text-inverse: #ffffff; /* text on accent bg */
/* Brand accent — overridden at runtime via brand.js from brand.yml.
Must remain readable on white. Default is a calm neutral indigo. */
--color-accent-primary: #4f46e5;
--color-accent-hover: #4338ca;
/* 10% tint of accent for soft fills — safe for any hue because it's tiny */
--color-accent-soft: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
/* Semantic (fixed, not brand-driven) */
--color-success: #10b981;
--color-success-bg: #ecfdf5;
--color-success-border: #a7f3d0;
--color-error: #ef4444;
--color-error-bg: #fef2f2;
--color-error-border: #fecaca;
--color-warning: #f59e0b;
--color-warning-bg: #fffbeb;
--color-warning-border: #fcd34d;
--color-info: #0ea5e9;
--color-secondary: #10b981;
--color-accent-alt: #f59e0b;
/* Primary button — inherits brand accent, white text */
--color-button-primary: var(--color-accent-primary);
--color-button-primary-hover: var(--color-accent-hover);
--color-button-primary-text: #ffffff;
/* Radii (unified) */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-pill: 999px;
/* Shadows — soft, layered */
--shadow-xs: 0 1px 2px rgba(15, 18, 28, 0.04);
--shadow-sm: 0 1px 3px rgba(15, 18, 28, 0.06), 0 1px 2px rgba(15, 18, 28, 0.04);
--shadow-md: 0 4px 12px rgba(15, 18, 28, 0.08), 0 2px 4px rgba(15, 18, 28, 0.04);
--shadow-lg: 0 12px 28px rgba(15, 18, 28, 0.12), 0 4px 8px rgba(15, 18, 28, 0.06);
/* Layout — shared dimensions */
--footer-height: 3.5rem;
/* Transitions — unified timing */
--transition-fast: 120ms ease;
--transition-base: 160ms ease;
--transition-slow: 240ms ease;
}
/* ── Dark theme ──────────────────────────────────────────────────────
Same 3-layer structure, just dark neutrals. Brand accent stays as-is
(any readable color on white is usually readable on #1a1a1d too). */
[data-theme="dark"] {
/* Same philosophy: ONE dark canvas, separated by borders */
--color-bg-primary: #16181d;
--color-bg-secondary: #16181d;
--color-bg-tertiary: #16181d;
--color-bg-hover: #22262f;
--color-bg-input: #16181d;
--color-bg-card: #16181d;
--color-bg-overlay: rgba(0, 0, 0, 0.56);
--color-border-primary: #2a2f3a;
--color-border-secondary: #22262f;
--color-border-strong: #3a3f4a;
--color-text-primary: #e6e8ec;
--color-text-secondary: #b4b9c4;
--color-text-tertiary: #878c97;
--color-text-muted: #5c616c;
--color-text-inverse: #ffffff;
/* Brand accent is inherited. Keep the hover slightly darker than primary
to preserve the interactive relationship regardless of hue. */
--color-accent-primary: #818cf8;
--color-accent-hover: #6366f1;
--color-accent-soft: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
--color-success: #34d399;
--color-success-bg: #0d2a22;
--color-success-border: #1a4033;
--color-error: #f87171;
--color-error-bg: #2d1818;
--color-error-border: #4d2020;
--color-warning: #fbbf24;
--color-warning-bg: #2d1f00;
--color-warning-border: #4d3200;
--color-info: #38bdf8;
--color-secondary: #34d399;
--color-accent-alt: #fbbf24;
--color-button-primary: var(--color-accent-primary);
--color-button-primary-hover: var(--color-accent-hover);
--color-button-primary-text: #ffffff;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.32), 0 1px 2px rgba(0, 0, 0, 0.24);
--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.38), 0 2px 4px rgba(0, 0, 0, 0.22);
--shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.48), 0 4px 8px rgba(0, 0, 0, 0.32);
}
[data-theme="cyber"] {
/* ── Cyber Zen Theme (Aurora Obsidian) ──
Design stance: Cosmic Obsidian Canvas with Thin Aurora Neon Accent & Glassmorphic Shadows.
High-contrast text for comfortable, relaxed reading. High-tech vibe for AI + Product + Growth professionals.
*/
--color-bg-primary: #06090f; /* Sidebar / Status bar / Outermost container */
--color-bg-secondary: #0a0e17; /* Chat background - Slate-950/Cosmic dark */
--color-bg-tertiary: #111625; /* Message boxes, cards, floating panes */
--color-bg-hover: #1b233a; /* Interactive item hover state */
--color-bg-input: #0d111d; /* Chat text input box */
--color-bg-card: #111625; /* Secondary card background */
--color-bg-overlay: rgba(3, 7, 18, 0.78); /* Scrim overlay */
/* Borders: Aurora-infused thin lines, slate-800 based */
--color-border-primary: #1e293b; /* Main dividers */
--color-border-secondary: #161f30; /* Delicate inner separators */
--color-border-strong: #00f5d4; /* Focus/Highlight mint teal */
/* Text: Optimized for contrast and readability, warm/neutral slate palette */
--color-text-primary: #f8fafc; /* White slate for crisp headings */
--color-text-secondary: #cbd5e1; /* Calm slate for reading comfort, reduces fatigue */
--color-text-tertiary: #94a3b8; /* Soft slate for captions / metadata */
--color-text-muted: #64748b; /* Placeholder / inactive text */
--color-text-inverse: #030712; /* Dark contrast text on neon highlights */
/* Brand accent: Hyper-tech Mint Teal with Aurora Purple hover */
--color-accent-primary: #00f5d4; /* Cyber mint */
--color-accent-hover: #00e0c2;
--color-accent-soft: rgba(0, 245, 212, 0.12); /* Translucent soft mint backdrop */
/* Semantic Cyber Theme Colors */
--color-success: #00f5d4;
--color-success-bg: #042f2c;
--color-success-border: #00f5d4;
--color-error: #ff0055;
--color-error-bg: #2d0013;
--color-error-border: #ff0055;
--color-warning: #f59e0b;
--color-warning-bg: #2d1f00;
--color-warning-border: #f59e0b;
--color-info: #a855f7; /* Aurora Purple */
--color-secondary: #a855f7;
--color-accent-alt: #ff0055;
/* Button overrides */
--color-button-primary: var(--color-accent-primary);
--color-button-primary-hover: var(--color-accent-hover);
--color-button-primary-text: #030712; /* Dark text on mint */
/* High contrast shadows with violet/teal glow */
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 245, 212, 0.05);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.7), 0 2px 8px rgba(168, 85, 247, 0.08);
--shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.8), 0 4px 16px rgba(0, 245, 212, 0.08);
}
/* ── Font Size Presets ────────────────────────────────────────────────────
Controlled via html[data-font-size]: small / medium / large.
Mechanism: change root font-size, which 1rem inherits from. Every CSS
rule using `rem` (instead of px) — fonts, paddings, button heights,
gaps — scales proportionally. Layout adapts to font, no overflow.
px is reserved for hairlines, shadows, and viewport-pinned elements.
─────────────────────────────────────────────────────────────────────── */
html { font-size: 16px; }
[data-font-size="small"] { font-size: 14px; }
[data-font-size="large"] { font-size: 18px; }
/* ── Reset & Base ────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: var(--color-bg-primary);
color: var(--color-text-primary);
height: 100vh;
height: 100dvh;
display: flex;
overflow: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}
#app { display: flex; flex-direction: column; width: 100%; height: 100vh; height: 100dvh; }
/* ── Offline Banner ───────────────────────────────────────────────────── */
#offline-banner {
position: fixed;
top: 0.75rem;
left: 50%;
transform: translateX(-50%);
z-index: 9999;
padding: 0.375rem 1rem;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
background: var(--color-warning-bg);
color: var(--color-warning);
border: 1px solid var(--color-warning-border);
}
/* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
#content-row {
display: flex;
flex: 1;
overflow: hidden;
}
/* ── Top Header ───────────────────────────────────────────────────────── */
#top-header {
height: 3rem;
min-height: 3rem;
background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border-primary);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 1rem;
transition: background-color var(--transition-base), border-color var(--transition-base);
flex-shrink: 0;
position: relative;
z-index: 10;
}
#header-left {
display: flex;
align-items: center;
gap: 0.625rem;
}
.sidebar-toggle-btn {
width: 1.875rem;
height: 1.875rem;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-tertiary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.sidebar-toggle-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.sidebar-toggle-btn:active {
background: var(--color-bg-hover);
}
/* Header brand area: logo image + brand name */
#header-brand {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
#header-brand-copy {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.0625rem;
}
.header-logo {
font-weight: 600;
font-size: 0.875rem;
color: var(--color-text-primary);
letter-spacing: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 11.25rem;
}
.header-logo--wordmark {
max-width: none;
overflow: visible;
text-overflow: clip;
}
.header-tagline {
font-size: 0.6875rem;
color: var(--color-text-secondary);
line-height: 1.15;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 13rem;
}
.nokno-wordmark {
display: inline-flex;
align-items: baseline;
gap: 0.02em;
font-size: 1rem;
font-weight: 800;
line-height: 1;
}
.nokno-wordmark__letter {
color: var(--color-text-primary);
}
.nokno-wordmark__letter--accent {
color: var(--color-accent-primary);
font-size: 1.35em;
font-weight: 900;
line-height: 0.9;
text-shadow: 0 0 18px color-mix(in srgb, var(--color-accent-primary) 26%, transparent);
}
/* When a logo image is present, slightly dim the text to act as a subtitle */
#header-brand.has-logo .header-logo {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-secondary);
letter-spacing: 0;
}
.header-logo-img {
height: 1.375rem;
max-width: 6.875rem;
object-fit: contain;
display: block;
flex-shrink: 0;
border-radius: var(--radius-xs);
}
/* Subtle divider between logo image and brand name text */
#header-brand.has-logo .header-logo-divider {
display: block;
width: 1px;
height: 0.875rem;
background: var(--color-border-primary);
flex-shrink: 0;
}
#header-brand .header-logo-divider {
display: none;
}
/* Owner badge — small pill next to the logo, visible only for creator-tier
licenses (toggled by Brand.applyOwnerBadge based on userLicensed flag).
Uses the brand theme color so it adapts when a custom --color-accent-primary
is applied by Brand._applyHeaderLogo. */
.header-owner-badge {
display: inline-flex;
align-items: center;
height: 1.125rem;
padding: 0 0.4375rem;
margin-left: 2px;
border: none;
border-radius: 9px;
background: var(--color-accent-primary);
color: #fff;
font-size: 0.625rem;
font-weight: 700;
letter-spacing: 0.5px;
line-height: 1;
cursor: pointer;
flex-shrink: 0;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.header-owner-badge:hover {
opacity: 0.88;
transform: translateY(-1px);
}
#header-right {
display: flex;
align-items: center;
gap: 0.375rem;
}
.theme-toggle-btn {
width: 1.875rem;
height: 1.875rem;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: var(--color-text-tertiary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--transition-fast), color var(--transition-fast);
}
.theme-toggle-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.theme-toggle-btn:active {
background: var(--color-bg-hover);
}
/* ── Content Row (Sidebar + Main) ───────────────────────────────────────── */
#app > aside,
#app > main {
flex-shrink: 0;
}
/* ── Icon Styles ─────────────────────────────────────────────────────────── */
.icon-sm {
width: 1rem;
height: 1rem;
stroke-width: 2;
}
.icon-md {
width: 1.25rem;
height: 1.25rem;
stroke-width: 2;
}
.icon-lg {
width: 1.5rem;
height: 1.5rem;
stroke-width: 2;
}
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
/* The sidebar sits on the outer frame (bg-primary) so it's visibly a layer
BEHIND the chat surface (bg-secondary). Subtle right border separates them. */
#sidebar {
width: 15rem;
min-width: 15rem;
background: var(--color-bg-primary);
border-right: 1px solid var(--color-border-primary);
display: flex;
flex-direction: column;
transition: margin-left var(--transition-slow), background-color var(--transition-base);
height: 100%;
flex-shrink: 0;
margin-left: 0;
}
#sidebar.hidden {
margin-left: -15rem;
}
#sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 0.75rem;
border-bottom: 1px solid var(--color-border-primary);
}
.logo { font-weight: 700; font-size: 1rem; color: var(--color-accent-primary); }
#btn-new-session {
background: var(--color-button-primary);
color: var(--color-button-primary-text);
border: none;
border-radius: var(--radius-sm);
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color var(--transition-fast);
}
#btn-new-session:hover {
background: var(--color-button-primary-hover);
}
/* ── Sidebar combined list ───────────────────────────────────────────────── */
#sidebar-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
min-height: 0;
padding-bottom: 0.625rem;
}
#session-list { padding: 0.375rem 0.5rem 0.5rem; min-height: 6.75rem; }
/* ── Sidebar divider (Section Labels) ───────────────────────────────────── */
.sidebar-divider {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0.875rem 0.25rem 0.875rem;
font-size: 0.625rem;
font-weight: 600;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 0.25rem;
position: sticky;
top: 0;
background: var(--color-bg-secondary);
z-index: 10;
}
.sidebar-divider:first-child {
margin-top: 0;
}
.sidebar-divider span {
flex: 1;
white-space: nowrap;
}
/* ── Split button [+ ▾] ─────────────────────────────────────────────────── */
.btn-split-wrap {
position: relative;
display: flex;
align-items: center;
border-radius: 5px;
overflow: visible;
}
.btn-split-main {
height: 1.375rem;
padding: 0 0.5rem;
border: none;
border-radius: 5px 0 0 5px;
background: var(--color-accent-primary);
color: #fff;
font-size: 0.6875rem;
font-weight: 500;
white-space: nowrap;
line-height: 1;
cursor: pointer;
transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn-split-main:hover {
background: var(--color-button-primary-hover);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.btn-split-arrow {
height: 1.375rem;
padding: 0 0.25rem;
border: none;
border-left: 1px solid rgba(255,255,255,0.3);
border-radius: 0 5px 5px 0;
background: var(--color-accent-primary);
color: #fff;
font-size: 0.625rem;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.btn-split-arrow:hover {
background: var(--color-button-primary-hover);
}
/* ── Dropdown menu ───────────────────────────────────────────────────────── */
.new-session-dropdown {
position: absolute;
top: calc(100% + 0.25rem);
right: 0;
min-width: 11.25rem;
background: var(--color-bg-card);
border: 1px solid var(--color-border-primary);
border-radius: 7px;
box-shadow: var(--shadow-md);
z-index: 200;
padding: 0.25rem 0;
overflow: hidden;
}
.new-session-dropdown[hidden] { display: none; }
.dropdown-item {
padding: 0.25rem 0.625rem;
font-size: 0.6875rem;
color: var(--color-text-secondary);
cursor: pointer;
white-space: nowrap;
transition: all 0.12s;
display: flex;
align-items: center;
}
.dropdown-item:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
}
/* ── Session source badge ────────────────────────────────────────────────── */
/* Design: compact neutral chips — the visual weight is carried by the
running-state dot, not by badge colors. Each badge tells you ONE fact:
how the session was created (cron/channel/setup) or what agent runs
inside it (coding). All share the same size/shape; they differ only
in subtle hue so they don't compete with each other.
Critical: all colors are neutrals — no hue bleeds onto the brand accent. */
.session-badge {
display: inline-block;
font-size: 0.5625rem;
font-weight: 600;
line-height: 1;
padding: 2px 0.3125rem;
border-radius: var(--radius-xs);
margin-left: 0.3125rem;
vertical-align: middle;
letter-spacing: 0.2px;
background: var(--color-bg-tertiary);
color: var(--color-text-tertiary);
border: 1px solid var(--color-border-secondary);
}
/* Source: cron — soft brand tint (this is the one "live" badge; it says
"a timer is wired up to this session"). Stays subtle. */
.session-badge--cron {
background: var(--color-accent-soft);
color: var(--color-accent-primary);
border-color: transparent;
}
/* Source: channel — neutral amber tint (communication channel). */
.session-badge--channel {
background: color-mix(in srgb, #10b981 10%, transparent);
color: #10b981;
border-color: transparent;
}
/* Source: setup — muted neutral (rarely visible in normal use). */
.session-badge--setup {
background: var(--color-bg-tertiary);
color: var(--color-text-muted);
opacity: 0.8;
}
/* Agent profile: coding — subtle neutral, distinguishes it from the
source badges above without shouting. */
.session-badge--coding {
background: color-mix(in srgb, #f59e0b 10%, transparent);
color: #f59e0b;
border-color: transparent;
}
/* ── Sidebar divider actions group ───────────────────────────────────────── */
.sidebar-divider-actions {
display: flex;
align-items: center;
gap: 0.25rem;
}
/* ── Magnifier / icon-sm button ──────────────────────────────────────────── */
.btn-icon-sm {
display: flex;
align-items: center;
justify-content: center;
width: 1.375rem;
height: 1.375rem;
padding: 0;
border: none;
border-radius: 5px;
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.btn-icon-sm:hover,
.btn-icon-sm.active {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.btn-icon-sm.active {
color: var(--color-accent-primary);
}
/* ── Session search panel ────────────────────────────────────────────────── */
.session-search-panel {
overflow: hidden;
max-height: 0;
opacity: 0;
transition: max-height 0.18s ease, opacity 0.15s ease;
padding: 0 0.625rem;
}
.session-search-panel.search-panel--open {
max-height: 6.25rem;
opacity: 1;
padding: 0.375rem 0.625rem 0.375rem;
}
/* Card container — one unified bordered box */
.search-panel-card {
border: 1px solid var(--color-border-primary);
border-radius: 8px;
background: var(--color-bg-secondary);
overflow: hidden;
}
/* ── Input row ── */
.search-input-row {
display: flex;
align-items: center;
padding: 0 0.5rem;
height: 2rem;
gap: 0.3125rem;
}
.search-icon {
flex-shrink: 0;
font-size: 0.75rem;
line-height: 1;
opacity: 0.5;
}
.search-input {
flex: 1;
min-width: 0;
padding: 0;
font-size: 0.75rem;
border: none;
background: transparent;
color: var(--color-text-primary);
outline: none;
}
.search-input::placeholder {
color: var(--color-text-muted);
}
/* Inline clear button (✕) — shown only when input has value */
.btn-search-q-clear {
flex-shrink: 0;
width: 1rem;
height: 1rem;
padding: 0;
font-size: 0.625rem;
line-height: 1rem;
text-align: center;
border: none;
border-radius: 50%;
background: var(--color-text-muted, rgba(0,0,0,0.25));
color: var(--color-bg-primary, #fff);
cursor: pointer;
opacity: 0.6;
transition: opacity 0.12s;
}
.btn-search-q-clear:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.btn-search-q-clear:hover { opacity: 1; }
/* ── Filter row — separated by a top border ── */
.search-filter-row {
display: flex;
align-items: center;
gap: 0;
height: 1.625rem;
border-top: 1px solid var(--color-border-primary);
padding: 0 0.375rem;
}
/* type select: slightly narrower */
.search-select {
flex: 0 0 5rem;
min-width: 0;
padding: 0 2px 0 0.25rem;
height: 100%;
font-size: 0.6875rem;
border: none;
border-right: 1px solid var(--color-border-primary);
background: transparent;
color: var(--color-text-secondary);
outline: none;
cursor: pointer;
}
/* date wrapper: half width, position:relative for the icon overlay */
.search-date-wrap {
flex: 1;
min-width: 0;
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.search-date-wrap::after {
content: "📅";
position: absolute;
right: 0.25rem;
font-size: 0.6875rem;
pointer-events: none;
opacity: 0.5;
}
/* date trigger button */
.search-date {
flex: 1;
min-width: 0;
padding: 0 1.25rem 0 0.25rem;
height: 100%;
font-size: 0.6875rem;
border: none;
background: transparent;
color: var(--color-text-secondary);
outline: none;
cursor: pointer;
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Active filter highlight */
.search-select[data-active="true"],
.search-date[data-active="true"] {
color: var(--color-accent-primary);
font-weight: 500;
}
/* ── DatePicker popup ─────────────────────────────────────────────────────── */
.dp-popup {
position: fixed;
z-index: 9999;
background: var(--color-bg-primary, #fff);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
padding: 0.625rem;
width: 14.375rem;
font-size: 0.75rem;
color: var(--color-text-primary);
user-select: none;
}
.dp-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.dp-title {
font-weight: 600;
font-size: 0.8125rem;
}
.dp-nav {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
color: var(--color-text-secondary);
padding: 2px 0.375rem;
border-radius: 4px;
line-height: 1;
}
.dp-nav:hover { background: var(--color-bg-hover); }
.dp-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.dp-dow {
text-align: center;
font-size: 0.625rem;
color: var(--color-text-muted);
padding: 0.1875rem 0;
font-weight: 500;
}
.dp-day {
background: none;
border: none;
cursor: pointer;
border-radius: 6px;
padding: 0.25rem 2px;
text-align: center;
color: var(--color-text-primary);
font-size: 0.75rem;
line-height: 1.4;
}
.dp-day:hover { background: var(--color-bg-hover); }
.dp-day--today {
color: var(--color-accent-primary);
font-weight: 700;
}
.dp-day--selected {
background: var(--color-accent-primary);
color: var(--color-text-inverse) !important;
font-weight: 600;
}
.dp-day--selected:hover { background: var(--color-accent-primary); opacity: 0.88; }
.dp-footer {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
padding-top: 0.5rem;
border-top: 1px solid var(--color-border-primary);
}
.dp-btn-clear,
.dp-btn-today {
background: none;
border: none;
cursor: pointer;
font-size: 0.6875rem;
color: var(--color-accent-primary);
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.dp-btn-clear:hover,
.dp-btn-today:hover { background: var(--color-bg-hover); }
/* 清除筛选 — small ✕ icon button */
.btn-search-clear-all {
flex-shrink: 0;
margin-left: 0.25rem;
width: 0.875rem;
height: 0.875rem;
padding: 0;
font-size: 0.5625rem;
line-height: 0.875rem;
text-align: center;
border: none;
border-radius: 50%;
background: var(--color-text-muted, rgba(0,0,0,0.2));
color: var(--color-bg-primary, #fff);
cursor: pointer;
opacity: 0.55;
transition: opacity 0.12s;
}
.btn-search-clear-all:not([hidden]) { display: flex; align-items: center; justify-content: center; }
.btn-search-clear-all:hover { opacity: 1; }
/* ── Load-more link ───────────────────────────────────────────────────────── */
.btn-load-more-sessions {
display: block;
width: 100%;
margin: 0.375rem 0 0.25rem;
padding: 0.1875rem 0;
background: transparent;
border: none;
color: var(--color-text-muted);
font-size: 0.6875rem;
cursor: pointer;
text-align: center;
transition: color 0.15s;
}
.btn-load-more-sessions:hover {
color: var(--color-accent-primary);
}
.btn-load-more-sessions:disabled {
cursor: default;
opacity: 0.5;
}
/* Legacy .btn-new-inline — kept for compat, can be removed after cleanup */
.btn-new-inline {
display: none;
}
/* ── Session empty placeholder ───────────────────────────────────────────── */
.session-empty {
margin: 0;
padding: 2rem 0.75rem;
font-size: 0.75rem;
color: var(--color-text-muted);
text-align: center;
}
/* ── Session List ────────────────────────────────────────────────────────── */
.session-item {
position: relative;
display: flex;
align-items: center;
gap: 0.4375rem;
padding: 0.375rem 0.625rem 0.3125rem 0.8125rem;
border-radius: var(--radius-sm);
cursor: pointer;
margin-bottom: 1px;
border: 1px solid transparent;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
/* Two-row text block next to dot */
.session-body {
flex: 1;
min-width: 0;
}
/* Default: secondary text color for icons/text */
.session-item .session-name {
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 0.25rem;
color: var(--color-text-secondary);
font-weight: 500;
transition: color var(--transition-fast), font-weight var(--transition-fast);
}
.session-item .session-name .session-name__text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.session-item .session-name .session-badge {
flex-shrink: 0;
}
/* Hover: subtle neutral background overlay (no brand color — any hue safe) */
.session-item:hover {
background: var(--color-bg-hover);
}
/* Active: soft brand tint (10% of brand color) + bold text + left rail.
Using color-mix makes this safe for any theme_color injected via brand.yml. */
.session-item.active {
background: var(--color-accent-soft);
}
.session-item.active .session-name {
color: var(--color-text-primary);
font-weight: 600;
}
/* Left indicator bar (0.1875rem) — brand color, the ONE place it shows up big */
.session-item.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.1875rem;
height: 60%;
background: var(--color-accent-primary);
border-radius: 0 2px 2px 0;
}
/* Actions button (⋯) on session list items — visible only on hover */
.session-actions-btn {
flex-shrink: 0;
display: none;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
background: transparent;
border: none;
border-radius: 4px;
color: var(--color-text-muted);
cursor: pointer;
padding: 0;
transition: background .15s, color .15s;
align-self: center;
}
.session-item:hover .session-actions-btn { display: flex; }
.session-actions-btn:hover {
background: var(--color-border-primary);
color: var(--color-text-primary);
}
/* Pin icon in session name */
.session-pin-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
opacity: 0.6;
margin-left: 2px;
color: var(--color-text-tertiary);
}
.session-item.active .session-pin-icon {
opacity: 1;
color: var(--color-accent-primary);
}
/* Actions menu dropdown */
.session-actions-menu {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04);
padding: 0.25rem;
min-width: 10rem;
z-index: 1000;
animation: fadeIn 0.15s ease;
}
[data-theme="dark"] .session-actions-menu {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}
.session-actions-menu-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.625rem;
border-radius: 5px;
cursor: pointer;
color: var(--color-text-primary);
font-size: 0.8125rem;
line-height: 1.4;
transition: background .12s ease, color .12s ease;
user-select: none;
}
.session-actions-menu-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 0.875rem;
height: 0.875rem;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.session-actions-menu-label {
flex: 1;
min-width: 0;
}
.session-actions-menu-item:hover {
background: var(--color-bg-hover);
}
.session-actions-menu-item:hover .session-actions-menu-icon {
color: var(--color-text-primary);
}
.session-actions-menu-item--danger .session-actions-menu-icon {
color: var(--color-text-secondary);
}
.session-actions-menu-item--danger {
margin-top: 0.3125rem;
position: relative;
}
.session-actions-menu-item--danger::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: -0.1875rem;
height: 1px;
background: var(--color-border-secondary);
pointer-events: none;
}
.session-actions-menu-item--danger:hover {
background: var(--color-error-bg);
color: var(--color-error);
}
.session-actions-menu-item--danger:hover .session-actions-menu-icon {
color: var(--color-error);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-0.25rem); }
to { opacity: 1; transform: translateY(0); }
}
/* Delete button on session list items — visible only on hover */
.session-delete-btn {
flex-shrink: 0;
display: none;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
background: transparent;
border: none;
border-radius: 3px;
color: var(--color-text-muted);
font-size: 0.875rem;
line-height: 1;
cursor: pointer;
padding: 0;
margin-top: -0.1875rem;
transition: background .15s, color .15s;
}
.session-item:hover .session-delete-btn { display: flex; }
.session-delete-btn:hover { background: var(--color-error-bg); color: var(--color-error); }
.session-rename-input {
width: 100%;
background: var(--color-bg-input, var(--color-bg-secondary));
border: 1px solid var(--color-border-focus, var(--color-accent));
border-radius: 3px;
color: var(--color-text-primary);
font-size: 0.8125rem;
padding: 0 0.25rem;
outline: none;
box-sizing: border-box;
}
.session-name {
font-size: 0.75rem;
white-space: nowrap;
}
/* While renaming, lift overflow so the input is fully visible */
.session-name.renaming {
overflow: visible;
white-space: normal;
flex: 1;
}
/* Meta: second row — tasks + cost */
.session-meta {
display: block;
font-size: 0.625rem;
color: var(--color-text-muted);
white-space: nowrap;
opacity: 0.7;
margin-top: 1px;
}
.session-dot {
flex-shrink: 0;
display: inline-block;
width: 0.375rem;
height: 0.375rem;
border-radius: 50%;
margin-right: 0.25rem;
vertical-align: middle;
position: relative;
top: -1px;
}
/* Idle state no longer renders a dot at all — rule kept for safety / future use */
.dot-idle { background: var(--color-text-secondary); opacity: 0.4; }
.dot-running { background: var(--color-success); opacity: 1; animation: pulse 1s infinite; }
.dot-error { background: var(--color-error); opacity: 1; }
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: .4; }
}
/* ── Task items in sidebar ───────────────────────────────────────────────── */
#task-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
.task-empty-hint {
font-size: 0.6875rem;
color: var(--color-text-tertiary);
text-align: center;
padding: 0.625rem 0.5rem;
line-height: 1.6;
}
.task-item {
position: relative;
border-radius: 6px;
border: 1px solid transparent;
transition: background .2s ease;
margin: 0 0.5rem 0.25rem;
}
/* Default: secondary text color */
.task-item .task-name,
.task-item .task-icon {
color: var(--color-text-secondary);
transition: color .2s ease, font-weight .2s ease;
}
/* Hover: subtle background */
.task-item:hover {
background: var(--color-bg-hover);
}
/* Active: primary color, bold text, left indicator */
.task-item.active {
background: var(--color-accent-soft);
}
.task-item.active .task-name,
.task-item.active .task-icon {
color: var(--color-accent-primary);
font-weight: 700;
}
/* Left indicator bar (0.1875rem) for active state */
.task-item.active::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 0.1875rem;
height: 60%;
background: var(--color-accent-primary);
border-radius: 0 2px 2px 0;
}
.task-row {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.625rem 0.75rem 0.625rem 0.75rem;
cursor: pointer;
border-radius: 6px;
transition: background 0.2s ease;
}
.task-icon {
width: 1.0625rem;
height: 1.0625rem;
flex-shrink: 0;
stroke-width: 2;
}
.task-info { flex: 1; min-width: 0; }
.task-name {
display: block;
font-size: 0.8125rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-cron {
display: block;
font-size: 0.6875rem;
color: var(--color-warning);
font-family: monospace;
margin-top: 2px;
}
.task-actions { display: flex; gap: 0.25rem; flex-shrink: 0; }
.task-item .task-btn-run, .task-item .task-btn-del {
border: none;
border-radius: 4px;
width: 1.5rem;
height: 1.5rem;
font-size: 0.6875rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .15s;
}
.task-item:hover .task-btn-run,
.task-item:hover .task-btn-del { opacity: 1; }
.task-item.active .task-btn-run,
.task-item.active .task-btn-del { opacity: 1; }
/* ── Task detail panel (Scheduled Tasks list view) ───────────────────────── */
#task-detail-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
#task-detail-body {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 2rem 2rem 1.5rem;
gap: 1.25rem;
}
/* ── Task Page Header ───────────────────────────────────────────────────── */
.task-page-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-shrink: 0;
position: relative;
}
.task-page-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.5px;
}
.task-page-subtitle {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
.btn-create-task {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1rem;
background: var(--color-button-primary);
color: #fff;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-create-task:hover {
background: var(--color-button-primary-hover);
transform: translateY(-1px);
}
.btn-create-task:active {
transform: translateY(0);
}
/* ── Task list table ─────────────────────────────────────────────────────── */
#task-list-table {
flex: 1;
overflow: auto;
display: flex;
flex-direction: column;
gap: 0;
}
.task-table-empty {
color: var(--color-text-secondary);
font-size: 0.8125rem;
text-align: center;
padding: 2.5rem 1.25rem;
}
.task-table-empty p {
margin: 0 0 1rem;
}
.task-create-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 1.125rem;
background: var(--color-button-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.8125rem;
cursor: pointer;
transition: background 0.15s;
}
.task-create-btn:hover {
background: var(--color-button-primary-hover);
}
.task-table-header,
.task-table-row {
display: grid;
grid-template-columns: 11.25rem 8.75rem 1fr minmax(12.5rem, auto);
align-items: center;
gap: 0.75rem;
padding: 0.625rem 0.875rem;
min-width: 37.5rem;
}
.task-table-header {
background: var(--color-bg-secondary);
border-radius: 6px 6px 0 0;
border: 1px solid var(--color-border-primary);
border-bottom: none;
font-size: 0.6875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--color-text-secondary);
flex-shrink: 0;
}
.task-table-row {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-top: none;
transition: background .12s;
}
.task-table-row:last-child {
border-radius: 0 0 6px 6px;
}
.task-table-row:hover { background: var(--color-bg-secondary); }
.task-col { min-width: 0; }
.task-col-name {
display: flex;
align-items: center;
gap: 0.5rem;
min-width: 0;
}
.task-name-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.task-name-text {
font-weight: 600;
font-size: 0.8125rem;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mobile-only schedule shown inside name col — hidden on desktop */
.task-name-sched {
display: none;
}
.task-col-schedule {
font-size: 0.75rem;
font-family: monospace;
color: var(--color-warning);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sched-manual {
color: var(--color-text-secondary);
font-style: italic;
font-family: inherit;
}
/* Paused task visual treatment: dim the schedule cron text and prepend
a small "Paused" pill so users can see at a glance which tasks are off. */
.sched-paused-badge {
display: inline-block;
padding: 1px 0.5rem;
margin-right: 0.375rem;
border-radius: 10px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
color: var(--color-text-secondary);
font-size: 0.6875rem;
font-family: inherit;
font-weight: 500;
letter-spacing: 0.02em;
vertical-align: middle;
}
.sched-paused-cron {
color: var(--color-text-tertiary, var(--color-text-secondary));
text-decoration: line-through;
opacity: 0.6;
}
/* Dim the whole row when paused (except the resume button, which stays clear). */
.task-table-row.task-row-paused .task-col-name .task-name-text,
.task-table-row.task-row-paused .task-col-content {
opacity: 0.6;
}
.task-table-row.task-row-paused .task-col-name .task-name-icon {
opacity: 0.5;
}
/* Pause/resume toggle button. Inherits from .task-btn base — no extra style needed. */
.task-btn-resume { color: var(--color-accent-primary); }
.task-col-content {
font-size: 0.75rem;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-col-actions {
display: flex;
gap: 0.375rem;
justify-content: flex-end;
flex-shrink: 0;
overflow: visible;
}
.task-btn {
display: inline-flex;
align-items: center;
gap: 0.25rem;
border: none;
border-radius: 5px;
padding: 0.3125rem 0.75rem;
font-size: 0.75rem;
cursor: pointer;
white-space: nowrap;
transition: background .12s, transform 0.1s ease;
}
.task-btn:hover {
transform: translateY(-1px);
}
.task-btn:active {
transform: translateY(0);
}
.task-btn-run { background: var(--color-accent-primary); color: #fff; }
.task-btn-run:hover { background: var(--color-accent-hover); }
.task-btn-edit { background: var(--color-border-primary); color: var(--color-text-primary); }
.task-btn-edit:hover { background: var(--color-bg-hover); }
.task-btn-del { background: var(--color-error-bg); color: var(--color-error); }
.task-btn-del:hover { background: var(--color-error); color: #fff; }
.empty-hint {
color: var(--color-text-secondary);
font-size: 0.75rem;
text-align: center;
padding: 1.25rem 0.5rem;
}
/* ── Main area ───────────────────────────────────────────────────────────── */
/* Main content is the raised surface — one layer above sidebar (bg-primary).
Subtle elevation without shadow, relying only on 1-2% brightness diff. */
#main {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
width: 100%;
background: var(--color-bg-secondary);
transition: background-color var(--transition-base);
}
.centered {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
color: var(--color-text-secondary);
text-align: center;
}
.welcome-icon { font-size: 3rem; }
.centered h2 { color: var(--color-text-primary); font-size: 1.375rem; }
.centered p {
max-width: 560px;
margin: 0;
line-height: 1.6;
}
.welcome-prompts,
.chat-empty-prompts {
display: grid;
gap: 8px;
width: min(520px, calc(100vw - 48px));
}
.welcome-prompt-btn,
.chat-empty-prompt-btn {
appearance: none;
width: 100%;
border: 1px solid var(--color-border-primary);
border-radius: var(--radius-md);
background: var(--color-bg-card);
color: var(--color-text-primary);
padding: 10px 12px;
font: inherit;
font-size: 14px;
line-height: 1.45;
text-align: left;
cursor: pointer;
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.welcome-prompt-btn:hover,
.chat-empty-prompt-btn:hover {
background: var(--color-bg-hover);
border-color: var(--color-border-strong);
}
.welcome-support {
color: var(--color-text-tertiary);
font-size: 13px;
}
#btn-welcome-new {
background: var(--color-button-primary);
color: var(--color-button-primary-text);
border: none;
border-radius: var(--radius-sm);
padding: 0.5rem 1.25rem;
font-size: 0.875rem;
cursor: pointer;
transition: background-color var(--transition-fast);
}
#btn-welcome-new:hover { background: var(--color-button-primary-hover); }
/* ── Chat panel ──────────────────────────────────────────────────────────── */
#chat-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }
/* Mobile-only floating back button — replaces the old in-header back button.
Hidden on desktop; mobile media query enables it. Positioned absolutely so
it doesn't take layout space or add visual chrome on desktop. */
/* Status badges (.status-idle/running/error) used to live in #chat-header.
That header has been removed; the bottom #session-info-bar uses its own
.sib-status-* classes instead. Legacy .status-* styles removed. */
/* ── Messages ────────────────────────────────────────────────────────────── */
#messages {
flex: 1;
overflow-y: auto;
padding: 28px 28px 24px;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 16px;
}
/* Empty-state hint: shown inside #messages when a session has no messages yet.
Designed to be quiet and low-contrast so it guides without distracting. */
.chat-empty-hint {
margin: auto; /* vertical + horizontal centering inside flex column */
max-width: 26.25rem;
padding: 1.5rem 1rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
color: var(--color-text-secondary);
user-select: none;
opacity: 0.85;
}
.chat-empty-hint .chat-empty-icon {
color: var(--color-text-tertiary);
margin-bottom: 0.875rem;
opacity: 0.55;
}
.chat-empty-hint .chat-empty-title {
color: var(--color-text-primary);
font-size: 0.9375rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.chat-empty-hint .chat-empty-subtitle {
color: var(--color-text-secondary);
font-size: 0.8125rem;
margin-bottom: 1.125rem;
opacity: 0.85;
}
.chat-empty-hint .chat-empty-prompts {
width: min(420px, calc(100vw - 64px));
margin-bottom: 16px;
pointer-events: auto;
}
.chat-empty-hint .chat-empty-prompt-btn {
font-size: 13px;
text-align: center;
}
.chat-empty-hint .chat-empty-tips {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--color-text-tertiary);
}
.chat-empty-hint .chat-empty-tips li {
position: relative;
padding-left: 0.875rem;
line-height: 1.5;
}
.chat-empty-hint .chat-empty-tips li::before {
content: "·";
position: absolute;
left: 0.25rem;
top: -1px;
opacity: 0.6;
}
/* New message notification banner */
.new-message-banner {
position: absolute;
bottom: 5rem; /* Above input area (input-area height ~3.75rem + gap) */
left: 50%;
transform: translateX(-50%);
background: var(--color-accent-primary);
color: var(--color-button-primary-text);
padding: 0.625rem 1.25rem;
border-radius: 24px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
z-index: 100;
box-shadow: var(--shadow-md);
transition: all 0.2s ease;
user-select: none;
pointer-events: auto;
border: 1px solid var(--color-accent-hover);
}
.new-message-banner:hover {
transform: translateX(-50%) translateY(-3px);
box-shadow: var(--shadow-lg);
background: var(--color-accent-hover);
}
.new-message-banner:active {
transform: translateX(-50%) translateY(-1px);
}
.msg {
padding: 13px 16px;
border-radius: 8px;
max-width: 82%;
min-width: 0;
font-size: 14px;
line-height: 1.72;
word-break: break-word;
position: relative;
}
.msg-time {
/* Rendered as a footnote *below* the bubble, floating inside the #messages
flex gap (0.75rem). Absolute-positioned so showing/hiding it on hover does
NOT reflow the message list — surrounding messages stay put.
Per-side anchoring (see .msg-user / .msg-assistant overrides below) is
critical: we must NOT set both left:0 and right:0, because with
white-space:nowrap a short bubble (e.g. just "1") would force the time
text to extend past the bubble edge and trigger horizontal page scroll.
Instead each variant anchors to one side and grows naturally inward. */
position: absolute;
top: 100%;
margin-top: 2px;
display: block;
font-size: 0.625rem;
line-height: 1;
opacity: 0;
transform: translateY(-2px);
transition: opacity 0.15s, transform 0.15s;
pointer-events: none;
white-space: nowrap;
/* Sit above the next message in case text would otherwise clip beneath it. */
z-index: 1;
}
.msg:hover .msg-time {
opacity: 1;
transform: translateY(0);
}
/* Time color / alignment: anchor to the bubble's own side, let width be
driven by content — prevents overflow on narrow bubbles. */
.msg-user .msg-time { color: var(--color-text-secondary); right: 0; left: auto; padding-right: 0.25rem; }
.msg-assistant .msg-time { color: var(--color-text-secondary); left: 0; right: auto; padding-left: 0.25rem; }
.msg-user {
background: linear-gradient(135deg, var(--color-accent-primary), color-mix(in srgb, var(--color-accent-primary) 84%, #111827));
color: var(--color-button-primary-text);
align-self: flex-end;
white-space: pre-wrap;
max-width: min(740px, 72%);
box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent-primary) 18%, transparent);
}
[data-theme="dark"] .msg-user { background: var(--color-accent-hover); }
.msg-assistant {
background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg-primary) 97%, #f4f6fb), color-mix(in srgb, var(--color-bg-primary) 99%, #eef2ff));
border: 1px solid color-mix(in srgb, var(--color-border-primary) 86%, #e7ebf5);
align-self: flex-start;
max-width: min(940px, 88%);
padding: 22px 24px 24px;
border-radius: 14px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
color: var(--color-text-primary);
font-size: 16px;
line-height: 1.82;
}
/* ── Copy button on assistant messages ────────────────────────────────────
Hidden by default, revealed on bubble hover (same pattern as .msg-time).
On touch devices (hover: none) we keep the button visible at low opacity
so it stays reachable without hover. */
.msg-copy-btn {
position: absolute;
top: 0.375rem;
right: 0.375rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.625rem;
height: 1.625rem;
padding: 0;
border: 1px solid var(--color-border-primary);
border-radius: 5px;
background: var(--color-bg-primary);
color: var(--color-text-secondary);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.msg-assistant:hover .msg-copy-btn,
.msg-copy-btn:focus-visible { opacity: 1; }
.msg-copy-btn:hover {
color: var(--color-text-primary);
background: var(--color-bg-tertiary);
}
.msg-copy-btn:active {
transform: translateY(1px);
}
.msg-copy-btn.is-copied {
opacity: 1;
color: #10b981; /* success green — same across themes */
border-color: #10b981;
background: var(--color-bg-primary);
}
.msg-copy-btn .msg-copy-icon,
.msg-copy-btn .msg-copy-icon-check { display: block; }
.msg-copy-btn .msg-copy-icon-check { display: none; }
.msg-copy-btn.is-copied .msg-copy-icon { display: none; }
.msg-copy-btn.is-copied .msg-copy-icon-check { display: block; }
/* Floating action shown when selecting text inside assistant messages. */
.msg-selection-action-btn {
position: fixed;
z-index: 1200;
display: none;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 14px;
min-height: 38px;
border-radius: 10px;
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 22%, var(--color-border-primary));
background: color-mix(in srgb, var(--color-bg-primary) 92%, var(--color-accent-primary));
color: var(--color-text-primary);
font-size: 14px;
line-height: 1;
font-weight: 600;
white-space: nowrap;
box-shadow: var(--shadow-lg);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.msg-selection-action-btn::before {
content: "+";
font-size: 13px;
font-weight: 700;
color: var(--color-accent-primary);
}
.msg-selection-action-btn:hover {
background: color-mix(in srgb, var(--color-bg-primary) 86%, var(--color-accent-primary));
border-color: color-mix(in srgb, var(--color-accent-primary) 34%, var(--color-border-primary));
transform: translateY(-1px);
}
.msg-selection-action-btn:active {
transform: translateY(0);
}
.msg-source-ref {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0.18em 0.5em;
border-radius: 6px;
background: color-mix(in srgb, var(--color-bg-primary) 78%, #eef4ff);
border: 1px solid color-mix(in srgb, var(--color-border-primary) 84%, #dbe4f3);
color: color-mix(in srgb, var(--color-text-primary) 88%, #334155);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.88em;
line-height: 1.35;
cursor: pointer;
vertical-align: baseline;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.msg-source-ref::before {
content: "Source";
font-family: ui-sans-serif, system-ui, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--color-accent-primary);
}
.msg-source-ref:hover,
.msg-source-ref:focus-visible {
background: color-mix(in srgb, var(--color-bg-primary) 70%, #e6efff);
border-color: color-mix(in srgb, var(--color-accent-primary) 24%, var(--color-border-primary));
transform: translateY(-1px);
outline: none;
}
.msg-source-preview {
position: fixed;
z-index: 1300;
width: min(520px, calc(100vw - 24px));
max-height: min(70vh, 680px);
overflow: auto;
padding: 14px 16px 16px;
border-radius: 14px;
border: 1px solid color-mix(in srgb, var(--color-border-primary) 86%, #d8e1ef);
background: color-mix(in srgb, var(--color-bg-primary) 98%, #f8fbff);
box-shadow: 0 24px 48px rgba(15, 23, 42, 0.16);
}
.msg-source-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.msg-source-preview-path {
min-width: 0;
color: var(--color-text-primary);
font-size: 13px;
font-weight: 700;
line-height: 1.4;
word-break: break-all;
}
.msg-source-preview-open {
flex-shrink: 0;
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 18%, var(--color-border-primary));
background: color-mix(in srgb, var(--color-bg-primary) 78%, #eef3ff);
color: var(--color-text-primary);
border-radius: 8px;
padding: 7px 10px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.msg-source-preview-open:hover {
background: color-mix(in srgb, var(--color-bg-primary) 68%, #e6efff);
}
.msg-source-preview-body {
color: var(--color-text-primary);
font-size: 14px;
line-height: 1.7;
}
.msg-source-preview-body .msg-source-ref {
transform: none;
}
/* Keep the button reachable without hover on touch / narrow viewports. */
@media (hover: none) {
.msg-copy-btn { opacity: 0.65; }
}
/* ── Markdown rendering inside assistant messages ────────────────────────── */
.msg-assistant > :first-child { margin-top: 0; }
.msg-assistant > :last-child { margin-bottom: 0; }
.msg-assistant p {
margin: 0.72em 0 1em;
color: color-mix(in srgb, var(--color-text-primary) 92%, #23324d);
}
.msg-assistant p:first-child { margin-top: 0; }
.msg-assistant p:last-child { margin-bottom: 0; }
.msg-assistant h1, .msg-assistant h2, .msg-assistant h3,
.msg-assistant h4, .msg-assistant h5, .msg-assistant h6 {
margin: 1.15em 0 0.55em;
font-weight: 700;
line-height: 1.28;
color: var(--color-text-primary);
}
.msg-assistant h1 {
font-size: 1.6em;
padding-bottom: 0.35em;
border-bottom: 1px solid color-mix(in srgb, var(--color-border-primary) 76%, transparent);
}
.msg-assistant h2 {
font-size: 1.22em;
padding-top: 0.2em;
}
.msg-assistant h3 { font-size: 1.06em; }
.msg-assistant ul, .msg-assistant ol {
margin: 0.85em 0 1.05em 1.3em;
padding: 0;
list-style-position: outside;
}
.msg-assistant li {
margin: 0.48em 0;
padding-left: 0.2em;
color: color-mix(in srgb, var(--color-text-primary) 94%, #263247);
}
.msg-assistant li p { margin: 0; }
.msg-assistant code {
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.9em;
background: color-mix(in srgb, var(--color-bg-primary) 84%, #eef2ff);
border: 1px solid color-mix(in srgb, var(--color-border-primary) 80%, #dbe2f3);
border-radius: 6px;
padding: 0.15em 0.42em;
}
.msg-assistant pre {
background: color-mix(in srgb, var(--color-bg-primary) 97%, #f8fafc);
border: 1px solid color-mix(in srgb, var(--color-border-primary) 86%, #d9e1ee);
border-radius: 10px;
padding: 16px 18px;
overflow-x: auto;
margin: 0.95em 0 1.15em;
font-size: 0.92em;
line-height: 1.65;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
.msg-assistant pre code {
background: none;
border: none;
padding: 0;
font-size: inherit;
border-radius: 0;
}
/* ── Code block with header (syntax highlight + copy) ─────────────────── */
.msg-assistant .code-block {
position: relative;
margin: 0.5em 0;
border: 1px solid var(--color-border-primary);
border-radius: 6px;
overflow: hidden;
}
.msg-assistant .code-block pre {
margin: 0;
border: none;
border-radius: 0;
padding: 12px 14px;
}
.msg-assistant .code-block pre code {
padding: 0;
}
.code-block-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 12px;
background: var(--color-bg-tertiary);
border-bottom: 1px solid var(--color-border-primary);
min-height: 28px;
}
.code-block-lang {
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.75em;
color: var(--color-text-tertiary);
text-transform: lowercase;
user-select: none;
}
.code-block-copy {
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--color-text-tertiary);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.code-block-copy:hover {
background: var(--color-bg-secondary);
color: var(--color-text-primary);
}
.code-block-copy .code-copy-icon-check { display: none; }
.code-block-copy.is-copied .code-copy-icon { display: none; }
.code-block-copy.is-copied .code-copy-icon-check { display: block; color: var(--color-success, #22c55e); }
.msg-assistant blockquote {
border-left: 4px solid var(--color-accent-primary);
margin: 1em 0 1.2em;
padding: 0.95em 1.05em;
color: color-mix(in srgb, var(--color-text-primary) 82%, #42526b);
background: color-mix(in srgb, var(--color-bg-primary) 82%, #eef4ff);
border-radius: 0 10px 10px 0;
font-size: 0.96em;
}
.msg-assistant blockquote p { margin: 0; }
.msg-assistant table {
border-collapse: collapse;
margin: 1em 0 1.2em;
font-size: 0.94em;
width: 100%;
max-width: 100%;
background: rgba(255, 255, 255, 0.55);
border-radius: 10px;
overflow: hidden;
}
.msg-assistant th, .msg-assistant td {
border: 1px solid color-mix(in srgb, var(--color-border-primary) 88%, #dfe6f1);
padding: 10px 12px;
text-align: left;
vertical-align: top;
}
.msg-assistant th {
background: color-mix(in srgb, var(--color-bg-primary) 80%, #edf2ff);
font-weight: 700;
color: var(--color-text-primary);
}
.msg-assistant tr:nth-child(even) { background: color-mix(in srgb, var(--color-bg-primary) 72%, #f8fafc); }
.msg-assistant a {
color: var(--color-accent-primary);
text-decoration: none;
font-weight: 600;
text-underline-offset: 2px;
}
.msg-assistant a:hover { text-decoration: underline; }
.msg-assistant hr {
border: none;
border-top: 1px solid color-mix(in srgb, var(--color-border-primary) 82%, transparent);
margin: 1.2em 0 1.35em;
}
.msg-assistant img {
max-width: 100%;
height: auto;
border-radius: 10px;
margin: 0.75em 0;
}
.msg-assistant strong {
font-weight: 750;
color: var(--color-text-primary);
}
.msg-assistant em { font-style: italic; color: color-mix(in srgb, var(--color-text-primary) 68%, #5c6b80); }
.msg-tool { background: var(--color-bg-primary); border: 1px solid var(--color-border-primary); font-family: monospace; font-size: 12px; color: var(--color-text-secondary); align-self: flex-start; }
.msg-info {
color: var(--color-text-tertiary);
background: color-mix(in srgb, var(--color-bg-primary) 88%, var(--color-accent-primary));
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 12%, var(--color-border-secondary));
border-radius: var(--radius-pill);
padding: 4px 10px;
font-size: 12px;
align-self: center;
font-style: normal;
}
.msg-info.msg-info-main { font-style: normal; }
.msg-info-sub { color: var(--color-text-secondary); font-size: 0.6875rem; align-self: center; opacity: 0.7; margin-top: -1.6875rem; }
/* ── Feedback request card ──────────────────────────────────────────────── */
.feedback-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 12px;
padding: 1rem 1.125rem;
margin: 0.25rem 0;
align-self: flex-start;
max-width: 85%;
color: var(--color-text-primary);
}
.feedback-context {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin-bottom: 0.5rem;
line-height: 1.4;
}
.feedback-question {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
margin-bottom: 0.75rem;
line-height: 1.5;
}
.feedback-options {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 0.625rem;
}
.feedback-option-btn {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 0.4375rem 0.75rem;
color: var(--color-text-primary);
font-size: 0.8125rem;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
text-align: left;
}
.feedback-option-btn:hover {
border-color: var(--color-accent-primary);
background: var(--color-bg-secondary);
}
.feedback-option-btn:active {
opacity: 0.8;
}
.feedback-hint {
font-size: 0.6875rem;
color: var(--color-text-secondary);
margin-top: 0.375rem;
}
.feedback-card--submitted {
opacity: 0.5;
pointer-events: none;
}
/* Strip the bubble shell (background/border) from .msg-assistant inside the
feedback card so only the markdown typography rules apply. */
.feedback-card .msg-assistant {
background: transparent;
border: none;
padding: 0;
}
.history-start-marker {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.6875rem;
color: var(--color-text-tertiary, var(--color-text-secondary));
padding: 0.5rem 1rem 0.25rem;
opacity: 0.5;
user-select: none;
}
.history-start-marker::before,
.history-start-marker::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border-primary);
opacity: 0.6;
}
.msg-idle-status { color: var(--color-accent-primary); animation: pulse 1.2s infinite; }
.msg-idle-status.msg-idle-done { color: var(--color-text-secondary); animation: none; opacity: 0.7; }
.msg-error {
background: rgba(255, 59, 48, 0.08);
border: 1px solid rgba(255, 59, 48, 0.25);
color: var(--color-error);
align-self: flex-start;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.msg-error .retry-btn {
align-self: flex-start;
padding: 0.5rem 1rem;
background: var(--color-bg-primary);
color: var(--color-text-primary);
border: 1px solid var(--color-border);
border-radius: 6px;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s;
}
.msg-error .retry-btn:hover:not(:disabled) {
background: var(--color-bg-secondary);
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);
}
.msg-error .retry-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.msg-success { color: var(--color-success); align-self: flex-start; font-size: 0.8125rem; }
.tool-name { color: var(--color-warning); font-weight: 600; }
.progress-msg {
color: var(--color-text-secondary);
font-size: 13px;
align-self: flex-start;
background: color-mix(in srgb, var(--color-bg-primary) 92%, var(--color-accent-primary));
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 16%, var(--color-border-primary));
border-radius: var(--radius-md);
padding: 9px 12px;
box-shadow: var(--shadow-xs);
}
/* ── Token usage line ────────────────────────────────────────────────────── */
.token-usage-line {
align-self: flex-start;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.25rem;
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: 0.6875rem;
color: var(--color-text-muted);
opacity: 0.7;
padding: 2px 0.25rem;
margin-top: -0.5rem;
cursor: default;
transition: opacity 0.15s ease;
}
.token-usage-line:hover { opacity: 1; }
.token-usage-line b { font-weight: 600; color: var(--color-text-secondary); }
.tu-label { color: var(--color-text-tertiary); font-weight: 600; }
.tu-sep { color: var(--color-text-muted); opacity: 0.45; padding: 0 1px; }
.tu-cache { color: var(--color-accent-primary); font-weight: 600; } /* [*] */
.tu-field { color: var(--color-text-muted); }
.tu-cost { color: var(--color-text-tertiary); }
.tu-delta { font-weight: 700; }
.tu-delta-ok { color: #34d399; } /* green — normal */
.tu-delta-mid { color: #f59e0b; } /* yellow — moderate */
.tu-delta-high { color: #f87171; } /* red — large */
.tu-delta-neg { color: var(--color-accent-primary); } /* cyan — compression */
/* Detail fields: hidden by default, revealed on hover */
.tu-detail {
display: none;
align-items: center;
gap: 0.25rem;
}
.token-usage-line:hover .tu-detail { display: contents; }
/* ── Tool group (collapsible tool call list) ─────────────────────────────── */
.tool-group {
align-self: flex-start;
max-width: 90%;
font-family: monospace;
font-size: 0.75rem;
color: var(--color-text-secondary);
}
.tool-group-header {
display: flex;
align-items: center;
gap: 0.375rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 6px;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
user-select: none;
color: var(--color-text-secondary);
transition: background 0.15s;
}
.tool-group-header:hover { background: var(--color-bg-secondary); }
.tool-group-arrow {
font-size: 0.625rem;
transition: transform 0.2s;
display: inline-block;
color: var(--color-text-tertiary);
}
.tool-group.expanded .tool-group-arrow { transform: rotate(90deg); }
.tool-group-label { color: var(--color-text-secondary); }
.tool-group-label .tg-count { color: var(--color-text-tertiary); margin-left: 0.25rem; }
.tool-group-body {
margin-top: 0.25rem;
display: none;
flex-direction: column;
gap: 2px;
padding-left: 0.5rem;
border-left: 2px solid var(--color-border-secondary);
}
.tool-group.expanded .tool-group-body { display: flex; }
.tool-item {
display: flex;
flex-direction: column;
gap: 0;
padding: 2px 0.375rem;
border-radius: 4px;
}
.tool-item-header {
display: flex;
align-items: baseline;
gap: 0.375rem;
}
.tool-item-name { color: var(--color-warning); font-weight: 600; }
.tool-item-arg { color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 25rem; }
.tool-item-status { margin-left: auto; font-size: 0.6875rem; flex-shrink: 0; }
.tool-item-status.ok { color: var(--color-success); }
.tool-item-status.err { color: var(--color-error); }
.tool-item-status.running { color: var(--color-accent-primary); animation: pulse 1.2s infinite; }
.tool-item-stdout {
margin: 0.25rem 0 2px 0;
padding: 0.375rem 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-secondary);
border-radius: 4px;
font-size: 0.6875rem;
font-family: monospace;
color: var(--color-text-secondary);
white-space: pre-wrap;
word-break: break-all;
max-height: 12.5rem;
overflow-y: auto;
line-height: 1.5;
}
/* ANSI color classes for tool stdout */
.tool-item-stdout .ansi-red { color: #e06c75; }
.tool-item-stdout .ansi-green { color: #98c379; }
.tool-item-stdout .ansi-yellow { color: #e5c07b; }
.tool-item-stdout .ansi-blue { color: #61afef; }
.tool-item-stdout .ansi-magenta { color: #c678dd; }
.tool-item-stdout .ansi-cyan { color: #56b6c2; }
.tool-item-stdout .ansi-white { color: #abb2bf; }
.tool-item-stdout .ansi-black { color: #5c6370; }
.tool-item-stdout .ansi-bold { font-weight: 700; }
/* ── Thinking block (collapsible ... sections) ─────────────── */
.thinking-block {
margin: 0 0 0.375rem 0;
background: transparent;
overflow: hidden;
}
.thinking-summary {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0;
cursor: pointer;
user-select: none;
list-style: none;
color: var(--color-text-tertiary);
font-size: 0.75rem;
transition: color 0.15s;
}
.thinking-summary::-webkit-details-marker { display: none; }
.thinking-summary:hover { color: var(--color-text-secondary); }
.thinking-icon { display: none; }
.thinking-label { font-weight: 400; }
.thinking-chevron {
font-size: 0.75rem;
color: inherit;
transition: transform 0.2s;
line-height: 1;
display: inline-block;
}
.thinking-block[open] .thinking-chevron { transform: rotate(90deg); }
.thinking-body {
margin-top: 2px;
margin-bottom: 0.625rem;
padding-left: 0.875rem;
font-size: 0.75rem;
line-height: 1.5;
color: var(--color-text-tertiary);
}
/* Inline image thumbnails inside user message bubbles */
.msg-image-thumb {
display: block;
max-width: 15rem;
max-height: 11.25rem;
border-radius: 6px;
margin-bottom: 0.25rem;
object-fit: contain;
cursor: zoom-in;
}
/* Lightbox overlay */
.img-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-out;
animation: lb-fade-in 0.15s ease;
}
@keyframes lb-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.img-lightbox img {
max-width: 90vw;
max-height: 90vh;
border-radius: 8px;
object-fit: contain;
box-shadow: 0 8px 40px rgba(0,0,0,0.6);
cursor: default;
}
.img-lightbox-close {
position: absolute;
top: 1rem;
right: 1.25rem;
color: #fff;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
opacity: 0.8;
user-select: none;
}
.img-lightbox-close:hover { opacity: 1; }
.msg-pdf-badge {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.625rem;
border-radius: 8px;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
margin-bottom: 0.25rem;
max-width: 15rem;
min-width: 6.25rem;
vertical-align: middle;
}
.msg-pdf-badge-icon {
font-size: 1.25rem;
line-height: 1;
flex-shrink: 0;
}
.msg-pdf-badge-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.msg-pdf-badge-name {
font-size: 0.75rem;
color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.msg-pdf-badge-type {
font-size: 0.625rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ── Session info bar (above input area, mirrors CLI bottom status bar) ─── */
/*
* Visual hierarchy (3 tiers):
* Tier 1 primary (opacity 1.00) — status, model → "what am I and is it running"
* Tier 2 secondary (opacity ~0.75) — dir, tasks → "contextual info"
* Tier 3 tertiary (opacity ~0.45) — id, mode, cost, │ → "can be glanced over"
* Base bar opacity is kept high so primary tier stays fully readable; the
* hover :hover rule lifts everything to 1.0 for detail inspection.
*/
#session-info-bar {
display: flex;
align-items: center;
padding: 0.25rem 0.875rem;
background: var(--color-bg-primary);
border-top: 1px solid var(--color-border-secondary);
font-size: 0.6875rem;
color: var(--color-text-secondary);
font-family: var(--font-mono, monospace);
white-space: nowrap;
overflow: hidden;
flex-shrink: 0;
opacity: 0.9;
transition: opacity 0.15s ease;
cursor: default;
}
#session-info-bar:hover {
opacity: 1;
}
#session-info-bar:hover .sib-sep { opacity: 0.35; }
/* Show all fields by default, not just on hover */
.sib-detail {
display: contents;
}
#sib-id {
opacity: 0.45; /* tier 3 — glanceable */
font-size: 0.625rem;
letter-spacing: 0.03em;
flex-shrink: 0;
}
/* Session ID is the click-trigger for the session actions dropdown
(download, etc.). Give it affordance similar to #sib-dir / sib-model. */
#sib-id-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.sib-id-clickable {
cursor: pointer;
padding: 1px 0.25rem;
border-radius: 3px;
transition: all 0.15s ease;
}
.sib-id-clickable:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
opacity: 1 !important;
}
/* Dropdown menu anchored above the session ID — same fixed-positioning
pattern as .sib-model-dropdown. */
.sib-actions-dropdown {
position: fixed;
min-width: 13.75rem;
max-width: 20rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
z-index: 1000;
padding: 0.25rem;
}
.sib-actions-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.625rem;
font-size: 0.75rem;
color: var(--color-text-primary);
cursor: pointer;
border-radius: 5px;
transition: background-color 0.15s ease;
}
.sib-actions-item:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
}
.sib-actions-item .sib-actions-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
flex-shrink: 0;
opacity: 0.8;
}
.sib-actions-item .sib-actions-label {
flex: 1;
white-space: nowrap;
}
.sib-actions-item .sib-actions-hint {
font-size: 0.625rem;
opacity: 0.5;
flex-shrink: 0;
}
.sib-sep {
margin: 0 0.5rem;
opacity: 0.18; /* very subtle — only visible on hover */
flex-shrink: 0;
transition: opacity 0.15s ease;
}
/* Status colors (Tier 1) */
.sib-status-idle { color: var(--color-text-secondary); opacity: 1; }
.sib-status-running { color: var(--color-accent-primary); animation: sib-pulse 1s ease-in-out infinite; }
.sib-status-error { color: #e05f5f; }
@keyframes sib-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
#sib-dir {
flex-shrink: 0;
cursor: pointer;
border-radius: 3px;
opacity: 0.75; /* tier 2 */
transition: all 0.15s ease;
}
#sib-dir:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
opacity: 1;
}
#sib-mode { opacity: 0.45; flex-shrink: 0; } /* tier 3 */
#sib-model { opacity: 1; flex-shrink: 0; } /* tier 1 — the model is primary */
#sib-tasks { opacity: 0.75; flex-shrink: 0; } /* tier 2 */
#sib-cost { opacity: 0.45; flex-shrink: 0; } /* tier 3 */
/* ── Latency signal (right after model name) ──────────────────────────────
A compact 4-bar signal + TTFT value. Placed adjacent to #sib-model so the
user's mental mapping "this model is fast/slow" is immediate. Variant
classes (-ok/-warn/-bad) are applied by Sessions._renderSignal based on
TTFT thresholds; colours intentionally use CSS vars so the same palette
works in both light and dark themes. */
#sib-signal-wrap { position: relative; flex-shrink: 0; }
.sib-signal-clickable {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 1px 0.375rem;
cursor: default; /* no click handler yet — step 3/4 will add one */
border-radius: 3px;
opacity: 0.85;
transition: opacity 0.15s ease, background-color 0.15s ease;
font-variant-numeric: tabular-nums; /* prevents the text from jittering as values change */
}
.sib-signal-clickable:hover {
opacity: 1;
background: var(--color-bg-hover);
}
/* Bar stack: four 2-px wide vertical bars of increasing height, mimicking
a phone signal-strength icon. Each is hollow by default; Sessions adds
.on to the ones that should light up for the current signal level. */
.sib-signal-clickable .sig-bars {
display: inline-flex;
align-items: flex-end;
gap: 1px;
height: 0.6875rem;
}
.sib-signal-clickable .sig-bars i {
display: inline-block;
width: 2px;
background: var(--color-text-secondary);
opacity: 0.25; /* dim "off" bar */
border-radius: 1px;
transition: background-color 0.15s, opacity 0.15s;
}
/* Individual bar heights — short→tall */
.sib-signal-clickable .sig-bars i:nth-child(1) { height: 0.1875rem; }
.sib-signal-clickable .sig-bars i:nth-child(2) { height: 0.3125rem; }
.sib-signal-clickable .sig-bars i:nth-child(3) { height: 0.5rem; }
.sib-signal-clickable .sig-bars i:nth-child(4) { height: 0.6875rem; }
.sib-signal-clickable .sig-bars i.on { opacity: 1; }
/* Signal level → bar colour. Applied to .on bars only; "off" bars stay grey. */
.sib-signal-ok .sig-bars i.on { background: var(--color-accent-primary); } /* green / brand */
.sib-signal-warn .sig-bars i.on { background: #d39e00; } /* amber */
.sib-signal-bad .sig-bars i.on { background: #d9534f; } /* red */
.sib-signal-clickable .sig-text {
font-size: 0.6875rem;
color: var(--color-text-secondary);
}
.sib-signal-ok .sig-text { color: var(--color-text-primary); }
.sib-signal-warn .sig-text { color: #d39e00; }
.sib-signal-bad .sig-text { color: #d9534f; }
/* Model name dropdown in session info bar */
#sib-model-wrap {
position: relative;
}
.sib-model-clickable {
cursor: pointer;
border-radius: 3px;
transition: all 0.15s ease;
}
.sib-model-clickable:hover {
background: var(--color-bg-hover);
opacity: 1 !important;
color: var(--color-accent-primary);
}
/* Reasoning effort switcher — same dropdown pattern as model switcher */
.sib-reasoning-clickable {
cursor: pointer;
border-radius: 3px;
transition: all 0.15s ease;
font-variant-numeric: tabular-nums;
}
.sib-reasoning-clickable:hover {
background: var(--color-bg-hover);
opacity: 1 !important;
color: var(--color-accent-primary);
}
.sib-reasoning-dropdown {
position: fixed;
min-width: 11rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
z-index: 1000;
overflow: hidden;
}
.sib-reasoning-header {
padding: 0.5rem 0.875rem;
border-bottom: 1px solid var(--color-border-primary);
}
.sib-reasoning-heading {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-primary);
}
.sib-reasoning-hint {
margin-top: 0.1875rem;
font-size: 0.6875rem;
color: var(--color-text-secondary);
line-height: 1.35;
}
.sib-reasoning-option {
padding: 0.5625rem 0.875rem;
font-size: 0.75rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.15s ease;
font-family: var(--font-mono, monospace);
}
.sib-reasoning-option:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
}
.sib-reasoning-option.current {
background: var(--color-bg-hover);
font-weight: 600;
}
.sib-model-dropdown {
position: fixed;
/* Position will be calculated dynamically via JavaScript */
min-width: 12.5rem;
max-width: 17.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
z-index: 1000;
max-height: 18.75rem;
overflow-y: auto;
}
.sib-model-option {
padding: 0.5625rem 0.875rem;
font-size: 0.75rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.15s ease;
font-family: var(--font-mono, monospace);
display: flex;
align-items: center;
justify-content: space-between;
}
.sib-model-option:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
}
.sib-model-option.current {
background: var(--color-bg-hover);
font-weight: 600;
}
.sib-model-option .model-badge {
font-size: 0.5625rem;
padding: 2px 0.3125rem;
border-radius: 3px;
margin-left: 0.5rem;
opacity: 0.8;
}
.sib-model-option .model-badge.default {
background: rgba(63, 185, 80, 0.12);
color: #2da44e;
}
.sib-model-option .model-badge.lite {
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
color: var(--color-accent-primary);
}
/* ── Model switcher benchmark banner & latency column ──────────────────────
The banner sits at the top of the dropdown with a subtle border so it
visually separates from the scrollable model list below. The ⚡ button is
pushed to the RIGHT edge (where the eye naturally lands after scanning a
model name → latency row), while the optional hint ("done in 1.2s") sits
on the left. The per-row latency cell is right-aligned and uses
tabular-nums so numbers line up vertically regardless of width. */
.sib-model-bench {
display: flex;
align-items: center;
justify-content: space-between; /* hint on the left, button on the right */
gap: 0.5rem;
padding: 0.25rem 0.5rem 0.25rem 0.625rem; /* compact: tighter top/bottom + tighter right side */
border-bottom: 1px solid var(--color-border-primary);
background: var(--color-bg-primary);
position: sticky; /* keep visible while scrolling a long model list */
top: 0;
z-index: 1;
min-height: 0;
}
.sib-bench-btn {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
padding: 2px 0.5rem;
font-size: 0.625rem;
line-height: 1.4;
font-family: inherit;
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
cursor: pointer;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
order: 2; /* force button to the right even if DOM order changes */
flex: 0 0 auto;
}
.sib-bench-btn:hover:not(:disabled) {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);
}
.sib-bench-btn:disabled {
opacity: 0.55;
cursor: progress;
}
.sib-bench-hint {
font-size: 0.625rem;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
order: 1; /* hint stays on the left */
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sib-model-option .sib-model-name {
/* Keep long model names from pushing the latency cell offscreen. */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
}
.sib-model-option .sib-model-right {
display: inline-flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.sib-model-option .sib-model-latency {
font-size: 0.625rem;
font-variant-numeric: tabular-nums;
min-width: 2.75rem; /* reserves space so rows don't jitter before benchmark */
text-align: right;
color: var(--color-text-secondary);
}
.sib-model-option .sib-model-latency:empty {
display: none;
}
.sib-model-option .sib-model-latency.is-ok { color: var(--color-accent-primary); }
.sib-model-option .sib-model-latency.is-warn { color: #d39e00; }
.sib-model-option .sib-model-latency.is-bad { color: #d9534f; }
.sib-model-option .sib-model-latency.is-err { color: #d9534f; }
.sib-model-option .sib-model-latency.is-pending {
color: var(--color-text-secondary);
opacity: 0.7;
}
/* ── Input area (wraps preview strip + input bar) ────────────────────────── */
#ws-disconnect-hint {
position: absolute;
bottom: 100%;
right: 1rem;
white-space: nowrap;
padding: 2px 0.5rem;
font-size: 0.6875rem;
color: var(--color-warning);
pointer-events: none;
opacity: 1;
transition: opacity 0.4s ease;
}
#input-area {
position: relative;
border-top: 1px solid var(--color-border-primary);
background: var(--color-bg-secondary);
flex-shrink: 0;
min-height: var(--footer-height);
display: flex;
flex-direction: column;
}
/* Hide top border when skill autocomplete is visible */
#input-area:has(#skill-autocomplete:not([style*="display:none"])):not(:has(#skill-autocomplete[style*="display: none"])) {
border-top: none;
}
/* Drop-target highlight when dragging a file over the input area */
#input-area.drag-over {
background: var(--color-accent-soft);
outline: 2px dashed var(--color-accent-primary);
outline-offset: -2px;
}
/* Image preview strip */
#image-preview-strip {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0.5rem 1rem 0;
}
.img-preview-item {
position: relative;
width: 4rem;
height: 4rem;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--color-border-primary);
flex-shrink: 0;
}
.img-preview-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.img-preview-remove {
position: absolute;
top: 2px;
right: 2px;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: rgba(0,0,0,.7);
color: #fff;
border: none;
font-size: 0.625rem;
line-height: 1rem;
text-align: center;
cursor: pointer;
padding: 0;
}
.img-preview-remove:hover { background: var(--color-error); }
/* File preview card in image-preview-strip (PDF, DOC, XLSX, etc.) */
.pdf-preview-item {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
height: 4rem;
padding: 0 1.75rem 0 0.625rem;
border-radius: 8px;
border: 1px solid var(--color-border-primary);
background: var(--color-bg-tertiary);
flex-shrink: 0;
max-width: 11.25rem;
min-width: 7.5rem;
box-sizing: border-box;
}
.pdf-preview-icon {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
}
.pdf-preview-info {
display: flex;
flex-direction: column;
overflow: hidden;
}
.pdf-preview-name {
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-text-primary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pdf-preview-type {
font-size: 0.5625rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-top: 2px;
}
.pdf-preview-remove {
position: absolute;
top: 0.25rem;
right: 0.25rem;
width: 1rem;
height: 1rem;
border-radius: 50%;
background: rgba(0,0,0,.7);
color: #fff;
border: none;
font-size: 0.625rem;
line-height: 1rem;
text-align: center;
cursor: pointer;
padding: 0;
}
.pdf-preview-remove:hover { background: var(--color-error); }
/* ── Skill autocomplete dropdown ─────────────────────────────────────────── */
#skill-autocomplete {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background: var(--color-bg-tertiary);
border: none;
border-radius: 8px 8px 0 0;
overflow: hidden;
box-shadow:
0 -0.5rem 0.75rem -0.25rem rgba(0, 0, 0, .12),
-0.5rem -0.25rem 0.75rem -0.25rem rgba(0, 0, 0, .12),
0.5rem -0.25rem 0.75rem -0.25rem rgba(0, 0, 0, .12);
max-height: 16.25rem;
overflow-y: auto;
z-index: 1000;
}
#skill-autocomplete-list {
padding: 0.25rem 0;
}
.skill-ac-empty {
padding: 0.875rem 1rem;
font-size: 0.8125rem;
color: var(--color-text-tertiary, #888);
text-align: left;
font-style: italic;
}
.skill-ac-item {
display: flex;
align-items: baseline;
gap: 0.625rem;
padding: 0.4375rem 0.875rem;
cursor: pointer;
border-radius: 0;
transition: background 0.1s;
user-select: none;
line-height: 1.4;
}
.skill-ac-item:hover {
background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}
[data-theme="light"] .skill-ac-item:hover {
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
}
.skill-ac-item.active {
background: color-mix(in srgb, var(--color-accent-primary) 20%, transparent);
outline: none;
}
[data-theme="light"] .skill-ac-item.active {
background: color-mix(in srgb, var(--color-accent-primary) 15%, transparent);
}
.skill-ac-name {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-accent-primary);
white-space: nowrap;
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.375rem;
}
.skill-ac-name-zh {
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-accent-primary);
}
.skill-ac-name-id {
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
font-size: 0.6875rem;
font-weight: 400;
color: var(--color-text-secondary);
opacity: 0.7;
}
.skill-ac-highlight {
background: rgba(255, 200, 0, 0.35);
color: inherit;
font-weight: inherit;
}
.skill-ac-desc {
font-size: 0.75rem;
color: var(--color-text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.skill-ac-header {
padding: 0.3125rem 0.875rem 0.1875rem;
font-size: 0.6875rem;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
border-bottom: 1px solid var(--color-border-secondary);
margin-bottom: 2px;
}
/* ── Header Row with Filter Toggle ──────────────────────────────────────── */
.skill-ac-header-row {
display: flex;
align-items: center;
padding: 0.5rem 0.875rem;
border-bottom: 1px solid var(--color-border-secondary);
}
.skill-ac-left {
display: flex;
align-items: center;
gap: 0.75rem;
}
.skill-ac-title {
font-size: 0.75rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
line-height: 1rem;
}
.skill-ac-filter-toggle {
display: inline-flex;
align-items: center;
gap: 0.375rem;
cursor: pointer;
flex-shrink: 0;
user-select: none;
}
.skill-ac-filter-toggle input[type="checkbox"] {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.skill-ac-toggle-track {
position: relative;
display: inline-block;
width: 1.75rem;
height: 1rem;
background: var(--color-border-primary);
border-radius: 8px;
transition: background .2s;
}
.skill-ac-toggle-track::after {
content: "";
position: absolute;
width: 0.6875rem;
height: 0.6875rem;
background: #fff;
border-radius: 50%;
top: 0.1562rem;
left: 0.1562rem;
transition: left .2s;
}
.skill-ac-filter-toggle input:checked + .skill-ac-toggle-track {
background: var(--color-button-primary);
}
.skill-ac-filter-toggle input:checked + .skill-ac-toggle-track::after {
left: 0.9062rem;
}
.skill-ac-filter-label {
font-size: 0.6875rem;
color: var(--color-text-secondary);
font-weight: 500;
}
/* meta block: encrypted badge + source directory */
.skill-ac-meta {
display: inline-flex;
align-items: center;
gap: 0.25rem;
flex-shrink: 0;
}
.skill-ac-enc {
font-size: 0.6875rem;
opacity: 0.5;
cursor: default;
}
.skill-ac-src {
font-size: 0.625rem;
color: var(--color-text-tertiary);
opacity: 0.6;
white-space: nowrap;
cursor: default;
}
/* ── Input bar ───────────────────────────────────────────────────────────── */
#input-bar {
margin-top: auto;
margin-bottom: auto;
padding: 0 1rem;
display: flex;
gap: 0.375rem;
align-items: center;
background: var(--color-bg-secondary);
}
/* Attach button — left of textarea, vertically centered */
#btn-attach {
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
padding: 0;
line-height: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
}
#btn-attach:hover { color: var(--color-text-primary); background: var(--color-border-secondary); }
#btn-slash {
border: none;
background: transparent;
color: var(--color-text-secondary);
cursor: pointer;
width: 1.75rem;
height: 1.75rem;
padding: 0;
line-height: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-weight: 600;
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}
#btn-slash span {
font-size: 1.125rem;
}
#btn-slash:hover { color: var(--color-accent-primary); background: var(--color-border-secondary); }
#btn-slash.active { color: var(--color-accent-primary); }
#user-input {
flex: 1;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
color: var(--color-text-primary);
padding: 0.5rem 0.875rem;
font-size: 0.875rem;
resize: none;
max-height: 12.5rem;
font-family: inherit;
line-height: 1.5;
overflow-y: auto;
scrollbar-width: none;
}
#user-input::-webkit-scrollbar { display: none; }
#user-input:focus { outline: none; border-color: var(--color-accent-primary); }
#btn-send, #btn-interrupt {
border: none;
border-radius: 6px;
padding: 0 1rem;
height: 2rem;
font-size: 0.8125rem;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
#btn-send { background: var(--color-button-primary); color: #fff; }
#btn-send:hover { background: var(--color-button-primary-hover); }
[data-theme="dark"] #btn-send { background: #2563eb; }
[data-theme="dark"] #btn-send:hover { background: #1d4ed8; }
#btn-send:disabled { background: var(--color-border-primary); color: var(--color-text-secondary); cursor: not-allowed; }
#btn-interrupt { background: var(--color-error); color: #fff; }
#btn-interrupt::after { content: ''; display: block; width: 0.625rem; height: 0.625rem; background: #fff; border-radius: 2px; }
#btn-interrupt:hover{ background: var(--color-error); opacity: 0.85; }
/* ── Sidebar footer ──────────────────────────────────────────────────────── */
#sidebar-footer {
border-top: 1px solid var(--color-border-primary);
min-height: var(--footer-height);
display: flex;
align-items: center;
padding: 0 0.5rem;
flex-shrink: 0;
}
.sidebar-nav-btn {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
background: transparent;
border: none;
border-radius: 6px;
color: var(--color-text-secondary);
font-size: 0.8125rem;
padding: 0.625rem 0.75rem 0.625rem 0.9375rem;
cursor: pointer;
text-align: left;
transition: background .15s, color .15s;
}
.sidebar-nav-btn:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.sidebar-nav-btn.active { background: var(--color-bg-hover); color: var(--color-accent-primary); }
.sidebar-nav-btn svg { flex-shrink: 0; }
/* ── Settings panel ──────────────────────────────────────────────────────── */
#settings-panel {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#settings-header {
display: flex;
align-items: center;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--color-border-primary);
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
flex-shrink: 0;
}
#settings-body {
flex: 1;
overflow-y: auto;
padding: 2rem 2rem 1.5rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.settings-section {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.settings-section-title {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 1.125rem;
font-weight: 700;
color: var(--color-text-primary);
letter-spacing: -0.3px;
padding-bottom: 0.5rem;
}
.btn-settings-add {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 1.25rem;
background: var(--color-button-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-settings-add:hover {
background: var(--color-button-primary-hover);
transform: translateY(-1px);
}
.btn-settings-add:active {
transform: translateY(0);
}
.settings-personalize {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.875rem 1rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
}
.settings-personalize-desc {
font-size: 0.8125rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.btn-settings-action {
flex-shrink: 0;
background: transparent;
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-accent-primary);
font-size: 0.8125rem;
padding: 0.375rem 0.875rem;
cursor: pointer;
white-space: nowrap;
}
.btn-settings-action:hover { background: var(--color-bg-hover); border-color: var(--color-accent-primary); }
.btn-settings-action:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-loading, .settings-empty, .settings-error {
color: var(--color-text-secondary);
font-size: 0.8125rem;
padding: 1rem 0;
}
.settings-error { color: var(--color-error); }
/* ── Browser toggle switch ───────────────────────────────────────────────── */
.settings-browser-actions {
display: flex;
align-items: center;
gap: 0.625rem;
flex-shrink: 0;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 2.25rem;
height: 1.25rem;
cursor: pointer;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.toggle-slider {
position: absolute;
inset: 0;
background: var(--color-border-primary);
border-radius: 20px;
transition: background 0.2s;
}
.toggle-slider::before {
content: "";
position: absolute;
width: 0.875rem;
height: 0.875rem;
left: 0.1875rem;
top: 0.1875rem;
background: #fff;
border-radius: 50%;
transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider {
background: var(--color-accent-primary);
}
.toggle-switch input:checked + .toggle-slider::before {
transform: translateX(1rem);
}
/* ── Model card ──────────────────────────────────────────────────────────── */
.model-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.875rem;
margin-bottom: 1rem;
}
.model-card-header {
display: flex;
align-items: center;
justify-content: space-between;
}
.model-card-badges { display: flex; gap: 0.375rem; }
.badge {
font-size: 0.6875rem;
font-weight: 600;
padding: 2px 0.5rem;
border-radius: 20px;
letter-spacing: 0.3px;
}
.badge-default { background: rgba(63, 185, 80, 0.12); color: #2da44e; border: 1px solid rgba(63, 185, 80, 0.35); }
[data-theme="dark"] .badge-default { background: #0d3818; color: #3fb950; border: 1px solid #238636; }
.badge-lite { background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent); color: var(--color-accent-primary); border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent); }
[data-theme="dark"] .badge-lite { background: #1a2f4e; color: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); }
.badge-secondary { background: var(--color-border-secondary); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }
.model-card-actions { display: flex; gap: 0.375rem; }
.btn-model-test {
background: transparent;
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-secondary);
font-size: 0.75rem;
padding: 0.25rem 0.625rem;
cursor: pointer;
}
.btn-model-test:hover:not(:disabled) { border-color: var(--color-accent-primary); color: var(--color-accent-primary); }
.btn-model-test:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-model-remove {
background: transparent;
border: 1px solid transparent;
border-radius: 6px;
color: var(--color-text-secondary);
font-size: 1.125rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
line-height: 1;
}
.btn-model-remove:hover { color: var(--color-error); border-color: var(--color-error); }
/* Model form fields */
.model-fields {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.model-field {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.model-field-inline {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.field-label {
font-size: 0.75rem;
color: var(--color-text-secondary);
}
.field-input {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
padding: 0.4375rem 0.625rem;
font-size: 0.8125rem;
font-family: inherit;
width: 100%;
}
.field-input:focus { outline: none; border-color: var(--color-accent-primary); }
.field-select {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
padding: 0.4375rem 0.625rem;
font-size: 0.8125rem;
font-family: inherit;
width: 100%;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 1.75rem;
}
.field-select:focus { outline: none; border-color: var(--color-accent-primary); }
.field-select option { background: var(--color-bg-secondary); color: var(--color-text-primary); }
.field-input-row {
display: flex;
gap: 0.375rem;
}
.field-input-row .field-input { flex: 1; }
.btn-toggle-key {
background: var(--color-border-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-secondary);
font-size: 0.8125rem;
padding: 0.25rem 0.5rem;
cursor: pointer;
flex-shrink: 0;
}
.btn-toggle-key:hover { color: var(--color-text-primary); }
.field-checkbox {
width: 1rem;
height: 1rem;
cursor: pointer;
accent-color: var(--color-accent-primary);
}
/* Custom dropdown for provider selection */
.custom-select-wrapper {
position: relative;
width: 100%;
}
.custom-select-trigger {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
padding: 0.4375rem 0.625rem;
font-size: 0.8125rem;
font-family: inherit;
width: 100%;
box-sizing: border-box;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
transition: border-color 0.15s ease;
}
.custom-select-trigger:hover {
border-color: var(--color-text-muted);
}
/* Focus: same accent border as `.open` so users see "this is where to start"
without the dropdown auto-expanding. Used by onboard step 2 and the
settings "add model" flow to nudge users to pick a provider first. */
.custom-select-trigger:focus,
.custom-select-trigger:focus-visible {
outline: none;
border-color: var(--color-accent-primary);
}
.custom-select-trigger.open {
border-color: var(--color-accent-primary);
}
.custom-select-trigger .placeholder {
color: var(--color-text-secondary);
}
.custom-select-arrow {
width: 0.75rem;
height: 0.75rem;
color: var(--color-text-secondary);
transition: transform 0.2s ease;
flex-shrink: 0;
}
.custom-select-trigger.open .custom-select-arrow {
transform: rotate(180deg);
}
.custom-select-dropdown {
position: absolute;
top: calc(100% + 0.25rem);
left: 0;
right: 0;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-height: 17.5rem;
overflow-y: auto;
z-index: 1000;
display: none;
}
.custom-select-dropdown.open {
display: block;
}
.custom-select-option {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.15s ease;
}
.custom-select-option:hover {
background: var(--color-bg-hover);
}
.custom-select-option.selected {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
}
/* Provider recommended badge (inside dropdown option) */
.provider-badge-recommended {
display: inline-block;
font-size: 0.625rem;
font-weight: 600;
padding: 1px 0.375rem;
margin-left: 0.375rem;
border-radius: 4px;
background: var(--color-accent-primary, #4f46e5);
color: #fff;
vertical-align: middle;
letter-spacing: 0.3px;
line-height: 1.6;
}
/* Provider promo hint (shown when openclacky is selected) */
.provider-promo-hint {
display: none;
margin-top: 2px;
padding: 0.5rem 0.625rem;
border-radius: 6px;
background: var(--color-bg-hover, #fafafa);
}
.provider-promo-hint.visible {
display: block;
}
.provider-promo-hint .promo-inner {
padding: 0;
}
.provider-promo-hint .promo-title {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-text-secondary);
margin-bottom: 0.1875rem;
}
.provider-promo-hint .promo-item {
display: flex;
align-items: baseline;
gap: 0.25rem;
font-size: 0.6875rem;
line-height: 1.6;
color: var(--color-text-tertiary, #9ca3af);
}
.provider-promo-hint .promo-icon {
flex-shrink: 0;
font-size: 0.375rem;
opacity: 0.3;
line-height: 2;
}
/* Model name combobox */
.model-name-combobox {
position: relative;
display: flex;
gap: 0;
}
.model-name-combobox .model-name-input {
flex: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.model-name-combobox .model-name-dropdown-btn {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
color: var(--color-text-secondary);
padding: 0 0.5rem;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.model-name-combobox .model-name-dropdown-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.model-name-dropdown {
position: absolute;
top: calc(100% + 0.25rem);
left: 0;
right: 0;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-height: 17.5rem;
overflow-y: auto;
z-index: 1000;
}
.model-dropdown-option {
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background-color 0.15s ease;
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
}
.model-dropdown-option:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
}
.model-dropdown-empty {
padding: 0.75rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
text-align: center;
font-style: italic;
}
/* Base URL combobox — mirrors model-name-combobox shape; differs only in
showing a two-line option (label + URL) so users can distinguish
regional/billing-plan variants under one provider. */
.base-url-combobox {
position: relative;
display: flex;
gap: 0;
}
.base-url-combobox .base-url-input {
flex: 1;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: none;
}
.base-url-combobox .base-url-dropdown-btn {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
color: var(--color-text-secondary);
padding: 0 0.5rem;
cursor: pointer;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s ease;
}
.base-url-combobox .base-url-dropdown-btn:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.base-url-dropdown {
position: absolute;
top: calc(100% + 0.25rem);
left: 0;
right: 0;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
max-height: 17.5rem;
overflow-y: auto;
z-index: 1000;
}
.base-url-dropdown-option {
padding: 0.5rem 0.75rem;
cursor: pointer;
transition: background-color 0.15s ease;
}
.base-url-dropdown-option:hover {
background: var(--color-bg-hover);
}
.base-url-dropdown-label {
font-size: 0.8125rem;
color: var(--color-text-primary);
font-weight: 500;
}
.base-url-dropdown-option:hover .base-url-dropdown-label {
color: var(--color-accent-primary);
}
.base-url-dropdown-url {
font-size: 0.6875rem;
color: var(--color-text-secondary);
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', 'Courier New', monospace;
margin-top: 2px;
}
/* Model card footer */
.model-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.625rem;
}
.model-test-result {
font-size: 0.75rem;
flex: 1;
}
.result-ok { color: var(--color-success); }
.result-fail { color: var(--color-error); }
.btn-save-model {
font-size: 0.8125rem;
padding: 0.375rem 1.125rem;
}
.btn-set-default {
font-size: 0.8125rem;
padding: 0.375rem 0.875rem;
background: transparent;
border: 1px solid var(--color-border-primary);
color: var(--color-accent-primary);
border-radius: 6px;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.btn-set-default:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
}
.btn-set-default:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.model-card-actions-row {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* ── Modals ──────────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
}
.modal-box {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
padding: 1.5rem;
width: 90%;
}
.modal-box.sm { max-width: 30rem; }
.modal-box.lg { max-width: 42.5rem; }
.modal-title { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; color: var(--color-text-primary); }
.modal-confirm-message {
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.25rem;
white-space: pre-wrap;
color: var(--color-text-primary);
}
.modal-actions {
display: flex;
gap: 0.625rem;
justify-content: flex-end;
margin-top: 1rem;
}
.btn-primary { background: var(--color-button-primary); color: #fff; border: none; border-radius: 0.375rem; padding: 0.5rem 1.25rem; cursor: pointer; }
.btn-primary:hover { background: var(--color-button-primary-hover); }
.btn-secondary { background: var(--color-border-primary); color: var(--color-text-primary); border: none; border-radius: 0.375rem; padding: 0.5rem 1.25rem; cursor: pointer; }
.btn-secondary:hover { background: var(--color-border-secondary); }
[data-theme="dark"] .btn-secondary:hover { background: #3d444d; }
.btn-danger { background: var(--color-error); color: #fff; border: none; border-radius: 0.375rem; padding: 0.5rem 1.25rem; cursor: pointer; }
.btn-danger:hover { background: var(--color-error); }
/* Prompt modal input */
.prompt-modal-input {
width: 100%;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 0.625rem 0.75rem;
font-size: 0.875rem;
color: var(--color-text-primary);
font-family: inherit;
outline: none;
margin-bottom: 1rem;
transition: border-color 0.2s ease;
}
.prompt-modal-input:focus {
border-color: var(--color-accent-primary);
}
/* New Session Modal */
.new-session-modal {
max-width: 32.5rem;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.modal-close-btn {
background: transparent;
border: none;
font-size: 1.75rem;
line-height: 1;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0;
width: 1.5rem;
height: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.modal-close-btn:hover {
color: var(--color-text-primary);
}
.modal-body {
display: flex;
flex-direction: column;
gap: 1rem;
}
.modal-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.modal-label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-primary);
}
.label-required {
color: var(--color-error);
margin-left: 2px;
}
.modal-input, .modal-select {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
padding: 0.5625rem 0.75rem;
font-size: 0.8125rem;
font-family: inherit;
width: 100%;
}
.modal-input:focus, .modal-select:focus {
outline: none;
border-color: var(--color-accent-primary);
}
.modal-input.input-error {
border-color: var(--color-error);
}
.modal-select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%238b949e' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 2rem;
}
.modal-input-row {
display: flex;
gap: 0.5rem;
}
.modal-input-row .modal-input {
flex: 1;
}
.modal-browse-btn {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 0 0.75rem;
font-size: 1rem;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s ease;
}
.modal-browse-btn:hover {
background: var(--color-bg-hover);
}
.modal-field-checkbox {
display: flex;
align-items: center;
padding-top: 0.25rem;
}
.modal-checkbox-label {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-size: 0.8125rem;
color: var(--color-text-primary);
}
.modal-checkbox {
width: 1rem;
height: 1rem;
cursor: pointer;
accent-color: var(--color-accent-primary);
}
.modal-footer {
display: flex;
gap: 0.625rem;
justify-content: flex-end;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--color-border-primary);
}
/* ── Form elements ───────────────────────────────────────────────────────── */
.form-group { margin-bottom: 0.75rem; }
.form-label { font-size: 0.75rem; color: var(--color-text-secondary); margin-bottom: 0.25rem; display: block; }
.form-input {
width: 100%;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
padding: 0.5rem 0.75rem;
font-size: 0.8125rem;
font-family: inherit;
}
.form-input:focus { outline: none; border-color: var(--color-accent-primary); }
.form-textarea {
width: 100%;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
padding: 0.625rem 0.75rem;
font-size: 0.8125rem;
font-family: monospace;
resize: vertical;
min-height: 12.5rem;
line-height: 1.6;
}
.form-textarea:focus { outline: none; border-color: var(--color-accent-primary); }
.form-hint { font-size: 0.6875rem; color: var(--color-text-secondary); margin-top: 0.25rem; }
/* ── Skills Panel ────────────────────────────────────────────────────────── */
#skills-panel {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#skills-body {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
padding: 2rem 2rem 1.5rem;
gap: 1.25rem;
}
/* ── Skills Page Header ──────────────────────────────────────────────────── */
.skills-page-header {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-shrink: 0;
position: relative;
}
.skills-page-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.5px;
}
.skills-page-subtitle {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
/* Two action buttons: Import (outlined) + Create (solid) */
.skill-action-btns {
position: absolute;
top: 0;
right: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Shared base for both buttons */
.btn-import-skill,
.btn-create-skill {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 0.875rem;
border-radius: 8px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
/* Import — outlined style */
.btn-import-skill {
background: transparent;
color: var(--color-text-primary);
border: 1px solid var(--color-border-primary);
}
.btn-import-skill:hover {
background: var(--color-bg-tertiary);
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);
transform: translateY(-1px);
}
.btn-import-skill:active { transform: translateY(0); }
/* Create — solid primary style */
.btn-create-skill {
background: var(--color-button-primary);
color: #fff;
border: none;
}
.btn-create-skill:hover {
background: var(--color-button-primary-hover);
transform: translateY(-1px);
}
.btn-create-skill:active { transform: translateY(0); }
/* ── Inline Import Bar ─────────────────────────────────────────────────── */
.skill-import-bar {
padding: 0.625rem 0 0.375rem;
border-bottom: 1px solid var(--color-border-primary);
margin-bottom: 0.25rem;
animation: skill-import-bar-in 0.15s ease;
}
@keyframes skill-import-bar-in {
from { opacity: 0; transform: translateY(-0.375rem); }
to { opacity: 1; transform: translateY(0); }
}
.skill-import-bar-inner {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
padding: 0.375rem 0.625rem;
transition: border-color 0.15s;
}
.skill-import-bar-inner:focus-within {
border-color: var(--color-accent-primary);
}
.skill-import-link-icon {
flex-shrink: 0;
color: var(--color-text-secondary);
}
.skill-import-input {
flex: 1;
background: none;
border: none;
outline: none;
font-size: 0.8125rem;
color: var(--color-text-primary);
min-width: 0;
}
.skill-import-input::placeholder {
color: var(--color-text-tertiary, var(--color-text-secondary));
}
.skill-import-input.skill-import-input-error {
animation: skill-import-shake 0.3s ease;
color: var(--color-error, #e53e3e);
}
@keyframes skill-import-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-0.25rem); }
75% { transform: translateX(0.25rem); }
}
.btn-skill-import-confirm {
flex-shrink: 0;
padding: 0.25rem 0.75rem;
background: var(--color-button-primary);
color: #fff;
border: none;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s;
}
.btn-skill-import-confirm:hover { background: var(--color-button-primary-hover); }
.btn-skill-import-browse {
flex-shrink: 0;
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 2px 0.25rem;
border-radius: 4px;
display: flex;
align-items: center;
transition: color 0.15s, background 0.15s;
}
.btn-skill-import-browse:hover {
color: var(--color-accent-primary);
background: var(--color-bg-tertiary);
}
.btn-skill-import-cancel {
flex-shrink: 0;
background: none;
border: none;
color: var(--color-text-secondary);
font-size: 0.9375rem;
line-height: 1;
cursor: pointer;
padding: 2px 0.25rem;
border-radius: 4px;
transition: color 0.15s, background 0.15s;
}
.btn-skill-import-cancel:hover {
color: var(--color-text-primary);
background: var(--color-bg-tertiary);
}
/* ── Skills Tabs ─────────────────────────────────────────────────────────── */
#skills-tabs {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-border-primary);
flex-shrink: 0;
gap: 1rem;
}
.skills-tabs-left {
display: flex;
gap: 0.25rem;
}
.skills-tabs-controls {
display: flex;
align-items: center;
gap: 0.75rem;
padding-right: 0.75rem;
margin-bottom: 0.25rem;
}
.skills-tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
padding: 0.5rem 1rem;
margin-bottom: -1px;
transition: color .15s, border-color .15s;
}
.skills-tab:hover { color: var(--color-text-primary); }
.skills-tab.active { color: var(--color-accent-primary); border-bottom-color: var(--color-accent-primary); }
.skills-tab-content {
flex: 1;
overflow-y: auto;
}
/* ── My Skills upload area (user-licensed only) ───────────────────────────── */
.my-skills-upload-area {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 0 0.25rem;
border-bottom: 1px solid var(--color-border-primary);
margin-bottom: 0.25rem;
}
.btn-upload-skill {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.4375rem 0.875rem;
background: var(--color-bg-secondary);
color: var(--color-text-primary);
border: 1px solid var(--color-border-primary);
border-radius: 7px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
flex-shrink: 0;
}
.btn-upload-skill:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
}
.btn-upload-skill:active {
transform: translateY(1px);
}
.btn-upload-skill:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.upload-skill-status {
font-size: 0.8125rem;
color: var(--color-text-secondary);
flex: 1;
}
.upload-skill-status.upload-ok {
color: var(--color-success, #22c55e);
}
.upload-skill-status.upload-error {
color: var(--color-error, #ef4444);
}
/* ── My Skills list ──────────────────────────────────────────────────────── */
/* ── Skills Filter Toggle (in tab bar) ───────────────────────────────────── */
.skills-filter-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
user-select: none;
padding: 0;
background: none;
border: none;
}
.skills-filter-toggle input[type="checkbox"] {
display: none;
}
.skills-filter-label {
font-size: 0.8125rem;
color: var(--color-text-secondary);
white-space: nowrap;
transition: color 0.15s;
}
.skills-filter-toggle:hover .skills-filter-label {
color: var(--color-text-primary);
}
/* Mini toggle track — matches the skill-card toggle style */
.skills-filter-toggle-track {
position: relative;
width: 2rem;
height: 1.125rem;
background: var(--color-border-primary);
border-radius: 9px;
flex-shrink: 0;
transition: background 0.18s;
}
.skills-filter-toggle-track::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 0.875rem;
height: 0.875rem;
background: #fff;
border-radius: 50%;
transition: transform 0.18s;
}
.skills-filter-toggle input:checked ~ .skills-filter-toggle-track {
background: var(--color-accent, #6c63ff);
}
.skills-filter-toggle input:checked ~ .skills-filter-toggle-track::after {
transform: translateX(0.875rem);
}
#skills-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.75rem;
}
.skills-empty {
color: var(--color-text-secondary);
font-size: 0.8125rem;
padding: 1.25rem 0;
text-align: center;
}
.skills-empty-text {
margin-bottom: 0.75rem;
color: var(--color-text-secondary);
font-size: 0.8125rem;
}
/* Guided CTA card in the empty-skills state — mirrors .creator-new-card */
.skills-empty-create-btn {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.875rem 1rem;
background: var(--color-bg-secondary);
border: 1px dashed var(--color-border-primary);
border-radius: 8px;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-secondary);
transition: border-color .15s, color .15s, background .15s;
text-align: left;
margin-top: 0.25rem;
}
.skills-empty-create-btn:hover {
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);
background: var(--color-accent-bg, rgba(59,130,246,0.04));
}
.skills-empty-create-arrow {
margin-left: auto;
opacity: 0.5;
transition: opacity .15s, transform .15s;
}
.skills-empty-create-btn:hover .skills-empty-create-arrow {
opacity: 1;
transform: translateX(3px);
}
/* ── Skill Card ──────────────────────────────────────────────────────────── */
.skill-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
padding: 0.875rem 1rem;
transition: border-color .15s;
}
.skill-card:hover { border-color: var(--color-text-muted); }
.skill-card-main {
display: flex;
align-items: center;
gap: 0.75rem;
}
.skill-card-info { flex: 1; min-width: 0; }
.skill-card-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.skill-card-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
}
.skill-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary);
}
.skill-card-desc {
font-size: 0.75rem;
color: var(--color-text-tertiary);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Skill Badges ────────────────────────────────────────────────────────── */
.skill-badge {
font-size: 0.625rem;
font-weight: 600;
padding: 2px 0.4375rem;
border-radius: 10px;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.skill-badge-system {
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
color: var(--color-accent-primary);
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 30%, transparent);
}
[data-theme="dark"] .skill-badge-system {
background: #1f3a5f;
color: var(--color-accent-hover);
border: 1px solid #1d4070;
}
.skill-badge-custom {
background: var(--color-success-bg);
color: var(--color-success);
border: 1px solid var(--color-success-border);
}
.skill-badge-invalid {
background: var(--color-error-bg, #fff0f0);
color: var(--color-error, #c0392b);
border: 1px solid var(--color-error-border, #f5c6c6);
}
/* ── Invalid / Warning notices ───────────────────────────────────────────── */
.skill-card-invalid {
opacity: 0.7;
border-color: var(--color-error-border, #f5c6c6) !important;
}
.skill-notice {
font-size: 0.6875rem;
line-height: 1.5;
padding: 0.25rem 0.625rem;
border-top: 1px solid transparent;
border-radius: 0 0 6px 6px;
}
.skill-notice-error {
background: var(--color-error-bg, #fff0f0);
color: var(--color-error, #c0392b);
border-top-color: var(--color-error-border, #f5c6c6);
}
/* ── Warning icon (skill usable but has auto-corrected config issue) ──────── */
.skill-warn-icon {
position: relative;
display: inline-flex;
align-items: center;
font-size: 0.75rem;
color: var(--color-warning, #b7791f);
cursor: help;
flex-shrink: 0;
}
.skill-warn-icon::after {
content: attr(data-tooltip);
position: absolute;
left: 0;
top: calc(100% + 0.375rem);
width: 16.25rem;
background: var(--color-bg-elevated, #fff);
color: var(--color-text, #333);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: 6px;
padding: 0.5rem 0.625rem;
font-size: 0.7188rem;
line-height: 1.6;
white-space: pre-wrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.skill-warn-icon:hover::after {
opacity: 1;
}
/* ── Toggle Switch ───────────────────────────────────────────────────────── */
.skill-toggle {
position: relative;
display: inline-flex;
align-items: center;
cursor: pointer;
flex-shrink: 0;
}
.skill-toggle::after {
content: attr(data-tooltip);
position: absolute;
right: 0;
bottom: calc(100% + 0.5rem);
width: max-content;
max-width: 17.5rem;
background: var(--color-bg-elevated, #fff);
color: var(--color-text, #333);
border: 1px solid var(--color-border, #e0e0e0);
border-radius: 6px;
padding: 0.5rem 0.625rem;
font-size: 0.7188rem;
line-height: 1.6;
white-space: pre-wrap;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
z-index: 100;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
}
.skill-toggle:hover::after {
opacity: 1;
}
/* Flip tooltip below when near top of scroll container */
.skill-toggle-flip::after {
bottom: auto;
top: calc(100% + 8px);
}
.skill-toggle-disabled {
cursor: not-allowed;
opacity: 0.4;
}
.skill-toggle-disabled:hover::after {
opacity: 1; /* Still show tooltip for disabled toggles */
}
.skill-toggle-input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.skill-toggle-track {
display: inline-block;
width: 2.25rem;
height: 1.25rem;
background: var(--color-border-primary);
border-radius: 10px;
transition: background .2s;
position: relative;
}
.skill-toggle-track::after {
content: "";
position: absolute;
width: 0.875rem;
height: 0.875rem;
background: #fff;
border-radius: 50%;
top: 0.1875rem;
left: 0.1875rem;
transition: left .2s;
}
.skill-toggle-input:checked + .skill-toggle-track {
background: var(--color-button-primary);
}
.skill-toggle-input:checked + .skill-toggle-track::after {
left: 1.1875rem;
}
/* ── Skill Card inline upload button ────────────────────────────────────── */
/* ── Skill Card — Upload / Publish button ────────────────────────────────── */
.btn-skill-upload-inline {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0.3125rem 0.6875rem;
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
flex-shrink: 0;
min-width: 4.875rem;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease,
border-color 0.15s ease, opacity 0.15s ease;
position: relative;
overflow: hidden;
}
.btn-skill-upload-inline:hover {
background: var(--color-bg-hover);
color: var(--color-accent-primary);
border-color: var(--color-accent-primary);
}
.btn-skill-upload-inline:active {
transform: translateY(1px);
}
.btn-skill-upload-inline:disabled {
cursor: not-allowed;
}
/* Icon — subtle spin while uploading */
.btn-skill-upload-inline .btn-upload-icon {
transition: opacity 0.2s ease;
flex-shrink: 0;
}
/* ── Uploading state ─────────────────────────────────────────────────────── */
.btn-skill-upload-inline[data-state="uploading"] {
color: var(--color-accent-primary);
border-color: var(--color-accent-primary);
background: color-mix(in srgb, var(--color-accent-primary) 6%, transparent);
opacity: 0.9;
}
.btn-skill-upload-inline[data-state="uploading"] .btn-upload-icon {
animation: upload-bounce 0.8s ease-in-out infinite alternate;
}
@keyframes upload-bounce {
from { transform: translateY(0); opacity: 1; }
to { transform: translateY(-0.1875rem); opacity: 0.6; }
}
/* ── Success state ───────────────────────────────────────────────────────── */
.btn-skill-upload-inline[data-state="success"] {
color: var(--color-success, #34d399);
border-color: var(--color-success, #34d399);
background: rgba(52, 211, 153, 0.08);
}
.btn-skill-upload-inline[data-state="success"] .btn-upload-icon {
opacity: 0;
}
/* ── Error state ─────────────────────────────────────────────────────────── */
.btn-skill-upload-inline[data-state="error"] {
color: var(--color-error, #f87171);
border-color: var(--color-error, #f87171);
background: rgba(248, 113, 113, 0.08);
animation: upload-shake 0.35s ease;
}
@keyframes upload-shake {
0% { transform: translateX(0); }
20% { transform: translateX(-0.25rem); }
40% { transform: translateX(0.25rem); }
60% { transform: translateX(-0.1875rem); }
80% { transform: translateX(2px); }
100% { transform: translateX(0); }
}
.btn-skill-upload-inline[data-state="error"] .btn-upload-icon {
opacity: 0;
}
/* ── Uploaded (persisted success) state ─────────────────────────────────── */
/* Applied when a skill has already been successfully uploaded to the cloud. */
/* Shows a green tint so the user can see it was previously uploaded. */
.btn-skill-upload-inline.btn-skill-uploaded {
color: var(--color-success, #34d399);
border-color: rgba(52, 211, 153, 0.45);
background: rgba(52, 211, 153, 0.06);
}
.btn-skill-upload-inline.btn-skill-uploaded:hover {
background: rgba(52, 211, 153, 0.12);
border-color: var(--color-success, #34d399);
color: var(--color-success, #34d399);
}
.btn-skill-upload-inline.btn-skill-uploaded .btn-upload-icon {
opacity: 0.7;
}
/* ── Skill Card upload progress bar ─────────────────────────────────────── */
.skill-upload-progress-wrap {
margin-top: 0.5rem;
height: 2px;
background: var(--color-border-primary);
border-radius: 2px;
overflow: hidden;
}
.skill-upload-progress-bar {
height: 100%;
width: 0%;
background: var(--color-accent-primary);
border-radius: 2px;
transition: width 0.25s ease;
}
.skill-upload-progress-bar[data-state="success"] {
background: var(--color-success, #34d399);
transition: background-color 0.3s ease, width 0.2s ease;
}
.skill-upload-progress-bar[data-state="error"] {
background: var(--color-error, #f87171);
transition: background-color 0.3s ease, width 0.2s ease;
}
/* ── Store Grid ──────────────────────────────────────────────────────────── */
#skills-store-grid {
display: flex;
flex-direction: column;
gap: 0.625rem;
padding-top: 0.75rem;
}
.store-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
padding: 1rem;
display: flex;
align-items: center;
gap: 0.875rem;
transition: border-color .15s;
}
.store-card:hover { border-color: var(--color-text-muted); }
.store-card-icon {
font-size: 1.75rem;
flex-shrink: 0;
width: 2.75rem;
height: 2.75rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-primary);
border-radius: 8px;
}
.store-card-body { flex: 1; min-width: 0; }
.store-card-title {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.25rem;
}
.store-card-desc {
font-size: 0.75rem;
color: var(--color-text-tertiary);
line-height: 1.5;
}
.store-card-actions { flex-shrink: 0; }
.btn-store-install {
background: transparent;
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-accent-primary);
padding: 0.375rem 0.875rem;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, border-color .15s;
}
.btn-store-install:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
}
.store-badge-installed {
font-size: 0.75rem;
color: var(--color-success);
font-weight: 600;
}
/* ── Brand Skills tab ────────────────────────────────────────────────────── */
/* Refresh button now lives in skills-tabs-controls, but keep these styles */
.btn-brand-skills-refresh {
display: flex;
align-items: center;
gap: 0.375rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-secondary);
cursor: pointer;
font-size: 0.8125rem;
padding: 0.375rem 0.75rem;
transition: color .15s, background .15s, border-color .15s;
white-space: nowrap;
}
.btn-brand-skills-refresh:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
color: var(--color-text-primary);
}
.btn-brand-skills-refresh:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-brand-skills-refresh svg {
flex-shrink: 0;
}
.btn-brand-skills-refresh svg.spinning {
animation: spin 1s linear infinite;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
#brand-skills-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding-top: 0.25rem;
}
.brand-skills-loading,
.brand-skills-empty,
.brand-skills-error {
font-size: 0.8125rem;
color: var(--color-text-secondary);
text-align: center;
padding: 1.5rem 0;
}
.brand-skills-error { color: var(--color-error); }
/* Unlicensed state — shown when brand is set but license is not activated */
.brand-skills-unlicensed {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: 2.25rem 1.5rem;
text-align: center;
}
.brand-skills-unlicensed-icon {
font-size: 2rem;
line-height: 1;
}
.brand-skills-unlicensed-msg {
font-size: 0.8125rem;
color: var(--color-text-secondary);
}
.brand-skills-activate-btn {
font-size: 0.8125rem;
font-weight: 500;
padding: 0.375rem 1rem;
border-radius: 6px;
border: 1px solid var(--color-accent, #6366f1);
color: var(--color-accent, #6366f1);
background: transparent;
cursor: pointer;
transition: background .15s, color .15s;
}
.brand-skills-activate-btn:hover {
background: var(--color-accent, #6366f1);
color: #fff;
}
/* Soft warning banner — shown when remote API is unavailable but local skills are displayed */
.brand-skills-warning {
font-size: 0.75rem;
color: #9e6a03;
background: #2d2208;
border: 1px solid #4d3800;
border-radius: 6px;
padding: 0.375rem 0.75rem;
margin-bottom: 0.625rem;
}
/* Brand Skill card */
.brand-skill-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
padding: 0.875rem 1rem;
transition: border-color .15s;
}
.brand-skill-card:hover { border-color: var(--color-text-muted); }
.brand-skill-card-main {
display: flex;
align-items: center;
gap: 0.75rem;
}
.brand-skill-info { flex: 1; min-width: 0; }
.brand-skill-title {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.25rem;
}
.brand-skill-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary);
}
.brand-skill-desc {
font-size: 0.75rem;
color: var(--color-text-tertiary);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.brand-skill-actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
/* Inline install-error tip (replaces alert dialog) */
.brand-install-error {
font-size: 0.75rem;
color: var(--color-danger, #f87171);
margin-top: 0.375rem;
line-height: 1.4;
}
/* Version chips */
.brand-skill-version {
font-size: 0.6875rem;
font-weight: 600;
padding: 2px 0.5rem;
border-radius: 10px;
white-space: nowrap;
}
.brand-skill-version.installed {
background: #1f3a5f;
color: #7eb8f7;
border: 1px solid #1d4070;
}
.brand-skill-version.latest {
background: #1f4e9e;
color: #bfdbfe;
border: 1px solid #1d4070;
}
[data-theme="light"] .brand-skill-version.installed {
background: #eff6ff;
color: #1d4ed8;
border: 1px solid #bfdbfe;
}
[data-theme="light"] .brand-skill-version.latest {
background: #1d4ed8;
color: #ffffff;
border: 1px solid #1e40af;
}
.brand-skill-update-arrow {
color: var(--color-text-secondary);
font-size: 0.75rem;
}
/* Private badge — shown on every brand skill */
.brand-skill-badge-private {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-text-secondary);
background: var(--color-border-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 4px;
padding: 1px 0.375rem;
white-space: nowrap;
}
/* Free badge — shown on free-mode brand skills (no license required) */
.brand-skill-badge-free {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
font-size: 0.6875rem;
font-weight: 500;
color: var(--color-accent-primary);
background: color-mix(in srgb, var(--color-accent-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
border-radius: 4px;
padding: 1px 0.375rem;
white-space: nowrap;
}
/* Footer hint shown below free skill list when premium skills exist behind activation */
.brand-skills-paid-hint {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 1rem;
padding: 0.75rem 1rem;
background: var(--color-bg-tertiary);
border: 1px dashed var(--color-border-primary);
border-radius: 8px;
font-size: 0.8125rem;
color: var(--color-text-secondary);
}
.brand-skills-paid-hint-msg {
flex: 1;
line-height: 1.5;
}
.brand-skills-paid-hint .brand-skills-activate-btn {
flex-shrink: 0;
}
/* Install / Update buttons */
.btn-brand-install,
.btn-brand-update {
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3125rem 0.75rem;
transition: background .15s;
}
.btn-brand-install {
background: transparent;
border: 1px solid var(--color-border-primary);
color: var(--color-accent-primary);
}
.btn-brand-install:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
}
.btn-brand-update {
background: #1f4e9e;
color: #bfdbfe;
border: 1px solid #1d4070;
}
.btn-brand-update:hover { background: #1a3f85; }
[data-theme="light"] .btn-brand-update {
background: #1d4ed8;
color: #ffffff;
border: 1px solid #1e40af;
}
[data-theme="light"] .btn-brand-update:hover { background: #1e40af; }
.btn-brand-install:disabled,
.btn-brand-update:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-brand-use,
.btn-skill-use {
background: transparent;
border: 1px solid var(--color-success-border);
border-radius: 6px;
color: var(--color-success);
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
padding: 0.3125rem 0.75rem;
transition: background .15s;
white-space: nowrap;
}
.btn-brand-use:hover,
.btn-skill-use:hover {
background: var(--color-success-bg);
}
/* ── Skills sidebar section ──────────────────────────────────────────────── */
#skill-list-items { padding: 0 0.5rem 0.5rem; display: flex; flex-direction: column; gap: 2px; }
/* ── Setup panel (full-screen, covers sidebar — mandatory first-run) ─────── */
/* Setup panel background — decorative gradient so transparency has something to show */
body.setup-mode {
background: linear-gradient(135deg,
#dbeafe 0%,
#ede9fe 35%,
#fce7f3 65%,
#d1fae5 100%);
}
[data-theme="dark"] body.setup-mode,
body.setup-mode[data-theme="dark"] {
background: linear-gradient(135deg,
#0f1f3d 0%,
#1a1040 35%,
#2d0a28 65%,
#042f1e 100%);
}
/* ── Setup panel overlay ─────────────────────────────────────────────────── */
#setup-panel {
position: fixed;
inset: 0;
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
/* Reserve scrollbar space always so card doesn't shift when scrollbar appears */
scrollbar-gutter: stable;
padding: 2.5rem 1.25rem;
background: rgba(255, 255, 255, 0.45);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(1.5rem);
}
[data-theme="dark"] #setup-panel {
background: rgba(11, 16, 32, 0.55);
}
/* Glass card */
#setup-card {
width: 26.25rem;
max-width: calc(100vw - 2.5rem);
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 16px;
padding: 2.25rem 2.5rem 2rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-shadow: 0 4px 32px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
/* Prevent height/width jitter when content changes */
min-height: 21.25rem;
/* Dropdown must overflow the card boundary */
overflow: visible;
}
[data-theme="dark"] #setup-card {
box-shadow: 0 4px 40px rgba(0,0,0,0.5), 0 1px 4px rgba(0,0,0,0.3);
}
/* Header */
#setup-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.375rem;
text-align: center;
}
#setup-logo {
font-size: 2rem;
line-height: 1;
margin-bottom: 2px;
background: linear-gradient(135deg, var(--color-accent-primary), var(--color-accent-hover));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
#setup-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
/* Reserve space so height doesn't change when text switches language */
min-height: 1.4em;
}
#setup-subtitle {
font-size: 0.8125rem;
color: var(--color-text-tertiary);
margin: 0;
min-height: 1.5em;
}
/* Step indicators */
#setup-steps {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
}
.setup-step {
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
background: var(--color-bg-secondary);
border: 1.5px solid var(--color-border-primary);
color: var(--color-text-tertiary);
font-size: 0.6875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, border-color .2s, color .2s;
}
.setup-step.active {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: #fff;
}
.setup-step.done {
background: #22c55e;
border-color: #22c55e;
color: #fff;
}
.setup-step-line {
width: 3rem;
height: 1.5px;
background: var(--color-border-primary);
}
/* Phase containers */
#setup-phase-lang,
#setup-phase-key {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
/* Phase label */
.setup-phase-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-secondary);
text-align: center;
margin: 0;
}
/* Language row: [En] [中文] on first line, [Continue →] on second */
#setup-lang-row {
display: flex;
flex-direction: column;
gap: 0.625rem;
margin-top: 0.75rem;
}
#setup-lang-btns {
display: flex;
gap: 0.5rem;
margin-bottom: 0.375rem;
}
.setup-lang-btn {
flex: 1;
background: var(--color-bg-secondary);
border: 1.5px solid var(--color-border-primary);
border-radius: 8px;
color: var(--color-text-primary);
font-size: 0.8125rem;
font-weight: 600;
padding: 0.5rem 0;
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.setup-lang-btn:hover {
border-color: var(--color-accent-primary);
}
.setup-lang-btn.active {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: #fff;
}
.setup-next-btn {
width: 100%;
background: #18181b;
color: #fff;
border: none;
border-radius: 8px;
padding: 0.5625rem 0;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, opacity .15s;
}
.setup-next-btn:hover { background: #3f3f46; }
[data-theme="dark"] .setup-next-btn { background: #e4e4e7; color: #18181b; }
[data-theme="dark"] .setup-next-btn:hover { background: #fff; }
/* Fields */
.setup-field {
display: flex;
flex-direction: column;
gap: 0.3125rem;
}
.setup-label {
font-size: 0.6875rem;
font-weight: 600;
color: var(--color-text-tertiary);
text-transform: uppercase;
letter-spacing: .06em;
}
.setup-input {
width: 100%;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 7px;
color: var(--color-text-primary);
font-size: 0.8125rem;
padding: 0.5rem 0.625rem;
outline: none;
transition: border-color .15s;
box-sizing: border-box;
}
.setup-input:focus {
border-color: var(--color-accent-primary);
box-shadow: 0 0 0 3px rgba(59,130,246,.15);
}
.setup-input-row {
display: flex;
gap: 0.375rem;
}
.setup-input-row .setup-input { flex: 1; }
/* Test result */
.setup-test-result {
font-size: 0.75rem;
min-height: 1rem;
text-align: center;
}
.setup-test-result.result-ok { color: var(--color-success); }
.setup-test-result.result-fail { color: var(--color-error); }
/* Bottom action row: [← Back] [Test & Continue →] */
.setup-key-actions {
display: flex;
gap: 0.5rem;
margin-top: 0.25rem;
}
.setup-back-btn {
flex-shrink: 0;
background: transparent;
color: var(--color-text-secondary);
border: 1.5px solid var(--color-border-primary);
border-radius: 8px;
padding: 0.5625rem 0.875rem;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: border-color .15s, color .15s;
}
.setup-back-btn:hover {
border-color: var(--color-text-secondary);
color: var(--color-text-primary);
}
/* Submit button */
.setup-submit-btn {
flex: 1;
background: var(--color-accent-primary);
color: #fff;
border: none;
border-radius: 8px;
padding: 0.625rem 0;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, opacity .15s;
}
.setup-submit-btn:hover { background: #2563eb; }
.setup-submit-btn:disabled { opacity: .5; cursor: default; }
/* ── Onboard panel ───────────────────────────────────────────────────────── */
#onboard-panel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: 2.5rem 1.25rem;
}
#onboard-inner {
width: 100%;
max-width: 30rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.onboard-logo {
font-size: 3rem;
margin-bottom: 0.25rem;
}
.onboard-title {
font-size: 1.625rem;
font-weight: 700;
color: var(--color-text-primary);
text-align: center;
}
.onboard-subtitle {
font-size: 0.875rem;
color: var(--color-text-secondary);
text-align: center;
margin-bottom: 0.5rem;
}
/* ── Step indicators ── */
#onboard-steps {
display: flex;
align-items: center;
gap: 0;
margin: 1rem 0 1.5rem;
}
.onboard-step {
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--color-border-secondary);
border: 2px solid var(--color-border-primary);
color: var(--color-text-secondary);
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
transition: background .2s, border-color .2s, color .2s;
}
.onboard-step.active {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: #fff;
}
.onboard-step.done {
background: var(--color-button-primary);
border-color: var(--color-button-primary);
color: #fff;
}
.onboard-step-line {
width: 3.75rem;
height: 2px;
background: var(--color-border-primary);
}
/* ── Language selection phase ── */
#onboard-phase-lang {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
}
.onboard-lang-prompt {
font-size: 0.9375rem;
color: var(--color-text-secondary);
text-align: center;
}
.onboard-lang-btns {
display: flex;
gap: 0.75rem;
justify-content: center;
}
.onboard-lang-btn {
background: var(--color-bg-secondary);
border: 2px solid var(--color-border-primary);
border-radius: 8px;
color: var(--color-text-primary);
font-size: 0.9375rem;
font-weight: 600;
padding: 0.75rem 2rem;
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.onboard-lang-btn:hover {
border-color: var(--color-accent-primary);
}
.onboard-lang-btn.active {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: #fff;
}
/* ── Settings language buttons ── */
.settings-lang-btns {
display: flex;
gap: 0.5rem;
}
.settings-lang-btn {
background: var(--color-bg-secondary);
border: 2px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
font-size: 0.8125rem;
font-weight: 600;
padding: 0.375rem 1.125rem;
cursor: pointer;
transition: border-color .15s, background .15s, color .15s;
}
.settings-lang-btn:hover {
border-color: var(--color-accent-primary);
}
.settings-lang-btn.active {
background: var(--color-accent-primary);
border-color: var(--color-accent-primary);
color: #fff;
}
/* ── Phase containers ── */
#onboard-phase-key,
#onboard-phase-soul {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.onboard-phase-title {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
text-align: center;
}
.onboard-phase-desc {
font-size: 0.8125rem;
color: var(--color-text-secondary);
text-align: center;
line-height: 1.6;
}
/* ── Fields ── */
.onboard-field {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.onboard-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: .04em;
}
.onboard-select,
.onboard-input {
width: 100%;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
color: var(--color-text-primary);
font-size: 0.8125rem;
padding: 0.5rem 0.75rem;
outline: none;
transition: border-color .15s;
}
.onboard-select:focus,
.onboard-input:focus {
border-color: var(--color-accent-primary);
}
.onboard-input-row {
display: flex;
gap: 0.375rem;
}
.onboard-input-row .onboard-input {
flex: 1;
}
/* ── Test result ── */
.onboard-test-result {
font-size: 0.8125rem;
min-height: 1.125rem;
text-align: center;
}
.onboard-test-result.result-ok { color: var(--color-success); }
.onboard-test-result.result-fail { color: var(--color-error); }
/* ── Action buttons ── */
.onboard-actions {
display: flex;
justify-content: center;
margin-top: 0.5rem;
}
.onboard-actions-split {
flex-direction: column;
align-items: center;
gap: 0.625rem;
}
.onboard-btn-primary {
background: var(--color-button-primary);
color: #fff;
border: none;
border-radius: 6px;
padding: 0.625rem 1.75rem;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background .15s;
}
.onboard-btn-primary:hover { background: var(--color-button-primary-hover); }
.onboard-btn-primary:disabled { opacity: .6; cursor: default; }
.onboard-btn-secondary {
background: transparent;
color: var(--color-text-secondary);
border: none;
font-size: 0.8125rem;
cursor: pointer;
text-decoration: underline;
padding: 0;
}
.onboard-btn-secondary:hover { color: var(--color-text-primary); }
/* ── Brand activation panel ─────────────────────────────────────────────── */
#brand-panel {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
overflow-y: auto;
padding: 2.5rem 1.25rem;
}
#brand-inner {
width: 100%;
max-width: 30rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.875rem;
}
/* ── Brand & License settings section ───────────────────────────────────── */
.brand-status-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
/* Inner layout: status fields on the left, QR code on the right */
.brand-status-main {
display: flex;
align-items: flex-start;
gap: 1.25rem;
}
.brand-status-fields {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.brand-status-row {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.8125rem;
}
.brand-status-label {
color: var(--color-text-secondary);
width: 3.75rem;
flex-shrink: 0;
}
.brand-status-value {
color: var(--color-text-primary);
font-weight: 500;
}
.brand-status-actions {
margin-top: 0.25rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border-primary);
}
.badge-active { color: var(--color-success); }
.badge-expired { color: var(--color-error); }
.badge-expiring { color: var(--color-warning); }
.badge-inactive { color: var(--color-text-secondary); }
/* Support QR code */
.brand-support-contact {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
font-size: 0.8125rem;
}
.brand-support-contact-label {
color: var(--color-text-secondary);
white-space: nowrap;
}
.brand-support-contact-value,
.brand-status-link {
color: var(--color-accent-primary);
text-decoration: none;
word-break: break-all;
}
.brand-support-contact-value:hover,
.brand-status-link:hover {
text-decoration: underline;
}
.brand-support-qr {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* Clickable QR button wrapper */
.brand-support-qr-btn {
position: relative;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
outline: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.brand-support-qr-btn:hover {
transform: scale(1.03);
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.brand-support-qr-btn:hover .brand-support-qr-zoom-hint {
opacity: 1;
}
.brand-support-qr-btn:focus-visible {
box-shadow: 0 0 0 2px var(--color-accent-primary);
}
.brand-support-qr-img {
width: 6.875rem;
height: 6.875rem;
border-radius: 10px;
border: 1px solid var(--color-border-primary);
object-fit: cover;
background: #fff;
display: block;
}
/* Hover overlay hint — "Click to enlarge" */
.brand-support-qr-zoom-hint {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 0.625rem;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
padding: 0.3125rem 0.25rem;
opacity: 0;
transition: opacity 0.2s ease;
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
border-radius: 0 0 10px 10px;
pointer-events: none;
white-space: nowrap;
}
.brand-support-qr-label {
font-size: 0.75rem;
font-weight: 500;
color: var(--color-text-secondary);
text-align: center;
}
/* ── QR Lightbox Modal ──────────────────────────────────────── */
.qr-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.qr-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(0.25rem);
}
.qr-lightbox-content {
position: relative;
z-index: 1;
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 16px;
padding: 1.75rem 2rem 1.5rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
animation: qr-lightbox-in 0.2s ease;
}
@keyframes qr-lightbox-in {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: scale(1); }
}
.qr-lightbox-img {
width: 15rem;
height: 15rem;
border-radius: 10px;
object-fit: contain;
background: #fff;
border: 1px solid var(--color-border-primary);
display: block;
padding: 0.5rem;
}
.qr-lightbox-label {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
text-align: center;
}
.qr-lightbox-hint {
font-size: 0.75rem;
color: var(--color-text-secondary);
margin: 0;
text-align: center;
}
.qr-lightbox-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 1.875rem;
height: 1.875rem;
border: none;
background: var(--color-bg-tertiary);
color: var(--color-text-secondary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.qr-lightbox-close:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
}
.brand-activate-form {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.brand-activate-desc {
font-size: 0.8125rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin: 0;
}
.brand-activate-fields {
display: flex;
gap: 0.5rem;
align-items: center;
}
.brand-activate-fields .field-input {
flex: 1;
font-family: monospace;
font-size: 0.8125rem;
}
/* "Get a Serial Number" helper row below the activation form */
.brand-get-serial {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
margin-top: 2px;
}
.brand-get-serial-hint {
opacity: 0.85;
}
.btn-link-inline {
background: none;
border: none;
padding: 0;
font: inherit;
color: var(--color-accent-primary);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.btn-link-inline:hover {
color: var(--color-accent-hover);
}
/* ── Brand warning bar ───────────────────────────────────────────────────── */
.brand-warning-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 1rem;
background: var(--color-warning-bg);
border-bottom: 1px solid var(--color-warning-border);
color: var(--color-warning);
font-size: 0.8125rem;
flex-shrink: 0;
}
.brand-warning-bar button {
background: transparent;
border: none;
color: var(--color-warning);
cursor: pointer;
font-size: 0.875rem;
padding: 0 0.25rem;
opacity: 0.7;
}
.brand-warning-bar button:hover { opacity: 1; }
/* ── Brand activation banner (top info bar, replaces full-screen panel) ──── */
.brand-activation-banner {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.5625rem 1rem;
/* Dark theme default */
background: #0d2045;
border-bottom: 1px solid #1e3a6e;
color: #93c5fd;
font-size: 0.8125rem;
flex-shrink: 0;
}
.brand-activation-banner > span {
flex: 1;
color: #93c5fd;
}
.brand-activation-banner-link {
background: #2563eb;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 0.75rem;
font-weight: 600;
padding: 0.25rem 0.75rem;
white-space: nowrap;
transition: opacity 0.15s;
}
.brand-activation-banner-link:hover { opacity: 0.85; }
.brand-activation-banner-close {
background: transparent;
border: none;
color: #93c5fd;
cursor: pointer;
font-size: 0.875rem;
padding: 0 0.25rem;
opacity: 0.6;
flex-shrink: 0;
}
.brand-activation-banner-close:hover { opacity: 1; }
/* Light theme overrides */
[data-theme="light"] .brand-activation-banner {
background: #eff6ff;
border-bottom-color: #bfdbfe;
color: #1d4ed8;
}
[data-theme="light"] .brand-activation-banner > span {
color: #1d4ed8;
}
[data-theme="light"] .brand-activation-banner-close {
color: #1d4ed8;
}
/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 0.375rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-primary); border-radius: 0.1875rem; }
/* ── Theme Switcher ────────────────────────────────────────────────────────── */
.settings-theme-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
padding: 1rem 1.25rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.settings-theme-info {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.settings-theme-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
transition: color 0.3s ease;
}
.settings-theme-desc {
font-size: 0.8125rem;
color: var(--color-text-secondary);
line-height: 1.5;
transition: color 0.3s ease;
}
.btn-theme-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--color-bg-tertiary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
color: var(--color-text-primary);
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.2s ease;
}
.btn-theme-toggle:hover {
background: var(--color-bg-hover);
border-color: var(--color-accent-primary);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
.btn-theme-toggle:active {
transform: translateY(0);
}
.btn-theme-toggle .theme-icon {
font-size: 1.125rem;
line-height: 1;
transition: transform 0.3s ease;
}
/* ── Channels Panel ──────────────────────────────────────────────────────── */
#channels-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
#channels-body {
flex: 1;
overflow-y: auto;
padding: 1.75rem 2.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.channels-page-header {
margin-bottom: 0.25rem;
}
.channels-page-title {
font-size: 1.375rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 0.375rem;
letter-spacing: -0.4px;
}
.channels-page-subtitle {
font-size: 0.8125rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.5;
}
/* ── Section highlight flash (used when banner navigates to Brand & License) ── */
@keyframes section-flash {
0% { box-shadow: 0 0 0 0 rgba(var(--color-accent-primary-rgb, 99,102,241), 0.0); background: transparent; }
15% { box-shadow: 0 0 0 0.375rem rgba(var(--color-accent-primary-rgb, 99,102,241), 0.5); background: rgba(var(--color-accent-primary-rgb, 99,102,241), 0.10); }
35% { box-shadow: 0 0 0 0.1875rem rgba(var(--color-accent-primary-rgb, 99,102,241), 0.25); background: rgba(var(--color-accent-primary-rgb, 99,102,241), 0.04); }
55% { box-shadow: 0 0 0 0.375rem rgba(var(--color-accent-primary-rgb, 99,102,241), 0.5); background: rgba(var(--color-accent-primary-rgb, 99,102,241), 0.10); }
75% { box-shadow: 0 0 0 0.1875rem rgba(var(--color-accent-primary-rgb, 99,102,241), 0.25); background: rgba(var(--color-accent-primary-rgb, 99,102,241), 0.04); }
90% { box-shadow: 0 0 0 0.375rem rgba(var(--color-accent-primary-rgb, 99,102,241), 0.5); background: rgba(var(--color-accent-primary-rgb, 99,102,241), 0.10); }
100% { box-shadow: 0 0 0 0 rgba(var(--color-accent-primary-rgb, 99,102,241), 0.0); background: transparent; }
}
.section-highlight {
border-radius: 10px;
padding: 0.75rem;
margin: -0.75rem;
animation: section-flash 2.4s ease-in-out;
}
/* ── Channel card ───────────────────────────────────────────────────────── */
#channels-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.channel-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 12px;
padding: 1rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.channel-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
}
.channel-card-identity {
display: flex;
align-items: center;
gap: 0.875rem;
}
/* Platform logo circle */
.channel-logo {
width: 2.5rem;
height: 2.5rem;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.channel-logo svg {
width: 1.5rem;
height: 1.5rem;
display: block;
}
.channel-logo-feishu {
background: transparent;
}
.channel-logo-feishu svg {
width: 2rem;
height: 2rem;
}
.channel-logo-wecom {
background: linear-gradient(135deg, #07c160, #0aab50);
color: #fff;
}
.channel-logo-weixin {
background: linear-gradient(135deg, #2dc100, #1aad19);
color: #fff;
}
.channel-logo-discord {
background: linear-gradient(135deg, #5865f2, #4752c4);
color: #fff;
}
.channel-logo-telegram {
background: linear-gradient(135deg, #2aabee, #229ed9);
color: #fff;
}
.channel-logo-dingtalk {
background: linear-gradient(135deg, #3296fa, #1677ff);
color: #fff;
}
.channel-card-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 2px;
}
.channel-card-desc {
font-size: 0.75rem;
color: var(--color-text-secondary);
}
/* Status badge */
.channel-card-status {
display: inline-flex;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.channel-status-badge {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.badge-running,
.badge-enabled,
.badge-disabled {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 500;
padding: 0.1875rem 0.625rem;
border-radius: 20px;
white-space: nowrap;
}
.badge-running { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.badge-enabled { background: #1a2f4e; color: var(--color-accent-primary); border: 1px solid var(--color-accent-primary); }
.badge-disabled { background: var(--color-bg-tertiary); color: var(--color-text-muted); border: 1px solid var(--color-border-primary); }
/* ── Channel card body ───────────────────────────────────────────────────── */
.channel-card-body {
padding: 0;
}
.channel-status-hint {
font-size: 0.8125rem;
line-height: 1.5;
margin: 0;
padding: 0.625rem 0.875rem;
border-radius: 8px;
}
.hint-ok { background: var(--color-success-bg); color: var(--color-success); border: 1px solid var(--color-success-border); }
.hint-warn { background: rgba(234,179,8,.10); color: #ca8a04; border: 1px solid rgba(234,179,8,.25); }
.hint-idle { background: var(--color-bg-tertiary); color: var(--color-text-secondary); border: 1px solid var(--color-border-primary); }
/* ── Channel card footer ─────────────────────────────────────────────────── */
.channel-card-footer {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.75rem;
padding-top: 0.75rem;
border-top: 1px solid var(--color-border-primary);
}
.channel-card-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* Test & configure buttons — reuse generic secondary/primary styles, just add icon gap */
.btn-channel-test,
.btn-channel-configure {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
padding: 0.375rem 1rem;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
border: none;
transition: background 0.15s, opacity 0.15s;
}
/* Test button uses an outline / ghost style so it does not compete with the primary action */
.btn-channel-test {
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-primary);
}
.btn-channel-test:hover {
background: var(--color-border-secondary);
color: var(--color-text-primary);
}
.btn-channel-test:disabled,
.btn-channel-configure:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* Loading / error placeholders */
.channel-loading,
.channel-error {
padding: 1.5rem;
text-align: center;
font-size: 0.8125rem;
color: var(--color-text-secondary);
border: 1px dashed var(--color-border-primary);
border-radius: 8px;
}
/* ── Version badge (inline in Settings row, right-aligned) ──────────────── */
/* Settings button stretches to fill width; version badge pushes to the right */
/* Settings row: btn-settings + version badge side by side */
.sidebar-nav-row {
display: flex;
align-items: stretch;
border-radius: 6px;
overflow: hidden;
transition: background .15s;
width: 100%;
}
.sidebar-nav-row:hover {
background: var(--color-bg-hover);
}
.sidebar-nav-row #btn-settings {
flex: 1;
border-radius: 0;
min-width: 0;
background: transparent !important; /* row handles the bg */
}
.sidebar-nav-row:hover #btn-settings {
color: var(--color-text-primary);
}
.sidebar-nav-row #btn-settings.active {
color: var(--color-accent-primary);
}
.version-badge {
display: inline-flex;
align-items: center;
gap: 0.3125rem;
padding: 0 0.625rem;
flex-shrink: 0;
border-radius: 0;
cursor: pointer;
transition: background .15s;
}
.version-text {
font-size: 0.6562rem;
color: var(--color-text-muted);
font-family: monospace;
letter-spacing: 0.03em;
transition: color .15s;
line-height: 1;
}
/* Highlight version text when badge is actionable and btn is hovered */
.version-badge:hover .version-text { color: var(--color-text-tertiary); }
.version-badge.has-update .version-text,
.version-badge.upgrade-done .version-text { color: var(--color-accent-primary); }
/* Amber pulsing dot — update available */
.version-update-dot {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background: var(--color-warning);
flex-shrink: 0;
box-shadow: 0 0 5px var(--color-warning);
animation: vbadge-pulse 2s ease-in-out infinite;
}
@keyframes vbadge-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0.3125rem var(--color-warning); }
50% { opacity: 0.4; box-shadow: 0 0 2px var(--color-warning); }
}
/* Tiny spinning ring — upgrade in progress */
.version-spinner {
width: 0.5625rem;
height: 0.5625rem;
border: 1.5px solid var(--color-border-primary);
border-top-color: var(--color-accent-primary);
border-radius: 50%;
flex-shrink: 0;
animation: vbadge-spin .7s linear infinite;
}
@keyframes vbadge-spin { to { transform: rotate(360deg); } }
/* Orange bouncing dot — needs restart (upgrade done, waiting for restart) */
.version-restart-dot {
width: 0.4375rem;
height: 0.4375rem;
border-radius: 50%;
background: #f97316; /* orange-500 */
flex-shrink: 0;
animation: vbadge-bounce 1s ease-in-out infinite;
}
@keyframes vbadge-bounce {
0%, 100% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(-0.1875rem); opacity: 0.7; }
}
/* Green check — restarted successfully */
.version-done-check {
font-size: 0.625rem;
color: #22c55e;
flex-shrink: 0;
line-height: 1;
animation: vbadge-popin .25s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes vbadge-popin {
from { transform: scale(0); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* ── Upgrade popover (fixed, floats above badge) ─────────────────────────── */
.vup {
position: fixed;
z-index: 9999;
width: 15rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12);
padding: 0.875rem 1rem 0.75rem;
display: none;
/* Slide-up + fade entrance */
opacity: 0;
transform: translateY(6px);
transition: opacity .18s ease, transform .18s ease;
}
.vup--visible {
opacity: 1;
transform: translateY(0);
}
/* Tiny arrow pointing down toward badge */
.vup::after {
content: "";
position: absolute;
bottom: -0.375rem;
left: 1.25rem;
width: 0.625rem;
height: 0.625rem;
background: var(--color-bg-secondary);
border-right: 1px solid var(--color-border-primary);
border-bottom: 1px solid var(--color-border-primary);
transform: rotate(45deg);
}
/* Confirm state */
/* Up-to-date state */
.vup-up-to-date {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
margin: 0;
white-space: nowrap;
}
.vup-check-icon {
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
background: #22c55e;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.625rem;
font-weight: 700;
flex-shrink: 0;
}
.vup-desc {
font-size: 0.75rem;
color: var(--color-text-secondary);
line-height: 1.55;
margin: 0 0 0.5rem;
}
.vup-versions {
font-size: 0.75rem;
font-family: monospace;
color: var(--color-text-primary);
margin: 0 0 0.75rem;
font-weight: 600;
}
.vup-arrow {
color: var(--color-accent-primary);
margin: 0 0.25rem;
}
.vup-actions {
display: flex;
gap: 0.5rem;
}
.vup-btn-primary {
flex: 1;
padding: 0.4375rem 0;
background: var(--color-button-primary);
color: var(--color-button-primary-text);
border: none;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, transform .1s;
}
.vup-btn-primary:hover { background: var(--color-button-primary-hover); }
.vup-btn-primary:active { transform: scale(.97); }
.vup-btn-cancel {
padding: 0.4375rem 0.75rem;
background: transparent;
color: var(--color-text-muted);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
font-size: 0.75rem;
cursor: pointer;
transition: background .15s, color .15s;
}
.vup-btn-cancel:hover { background: var(--color-bg-hover); color: var(--color-text-secondary); }
/* Progress state */
.vup-progress-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.625rem;
}
.vup-installing-label {
font-size: 0.75rem;
color: var(--color-text-secondary);
}
/* Animated 3-dot ellipsis */
.vup-installing-dot {
display: inline-flex;
gap: 0.1875rem;
}
.vup-installing-dot::before,
.vup-installing-dot::after,
.vup-installing-dot b {
content: "";
display: inline-block;
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background: var(--color-accent-primary);
animation: vup-bounce 1.2s ease-in-out infinite;
}
.vup-installing-dot::after { animation-delay: .2s; }
/* We use a pseudo trick — actual 3 dots via box-shadow instead */
.vup-installing-dot {
width: 0.3125rem;
height: 0.3125rem;
border-radius: 50%;
background: var(--color-accent-primary);
animation: vup-bounce 1.2s ease-in-out infinite;
box-shadow: 10px 0 0 var(--color-accent-primary), 20px 0 0 var(--color-accent-primary);
margin-right: 1.5rem; /* make room for box-shadow dots */
flex-shrink: 0;
}
.vup-installing-dot::before,
.vup-installing-dot::after { display: none; }
/* Stagger the shadow dots via custom animation composition */
.vup-installing-dot {
animation: vup-bounce1 1.2s ease-in-out infinite;
}
@keyframes vup-bounce1 {
0%, 80%, 100% { box-shadow: 0.625rem 0 0 var(--color-accent-primary), 1.25rem 0 0 var(--color-accent-primary); opacity: 1; }
40% { box-shadow: 0.625rem 0 0 var(--color-accent-primary), 1.25rem 0 0 var(--color-accent-primary); opacity: .4; }
}
@keyframes vup-bounce { 0%, 80%, 100% { opacity: 1; } 40% { opacity: .3; } }
.vup-log {
background: var(--color-bg-primary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 0.5rem 0.625rem;
font-size: 0.6562rem;
font-family: monospace;
line-height: 1.5;
color: var(--color-text-muted);
max-height: 8.75rem;
min-height: 3.75rem;
overflow-y: auto;
white-space: pre-wrap;
word-break: break-all;
margin: 0;
}
/* Done state */
.vup-done-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
}
.vup-done-icon {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #22c55e;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 700;
flex-shrink: 0;
animation: vbadge-popin .3s cubic-bezier(.34,1.56,.64,1) both;
}
.vup-btn-restart {
width: 100%;
padding: 0.5625rem 0;
background: var(--color-button-primary);
color: var(--color-button-primary-text);
border: none;
border-radius: 6px;
font-size: 0.8125rem;
font-weight: 600;
cursor: pointer;
transition: background .15s, transform .1s;
letter-spacing: .02em;
}
.vup-btn-restart:hover { background: var(--color-button-primary-hover); }
.vup-btn-restart:active { transform: scale(.97); }
/* Reconnect state */
.vup-reconnect {
text-align: center;
padding: 0.5rem 0 0.25rem;
}
.vup-reconnect-spinner {
width: 1.75rem;
height: 1.75rem;
border: 2.5px solid var(--color-border-primary);
border-top-color: var(--color-accent-primary);
border-radius: 50%;
animation: vbadge-spin .7s linear infinite;
margin: 0 auto 0.625rem;
}
.vup-reconnect-msg {
font-size: 0.75rem;
color: var(--color-text-muted);
}
/* Error state */
.vup-error {
font-size: 0.75rem;
color: var(--color-error, #ef4444);
margin: 0;
line-height: 1.5;
}
/* Restart-failed state — shows both recovery paths (tray + CLI) */
.vup-restart-failed {
padding: 0.25rem 0 2px;
}
.vup-restart-failed-title {
margin: 0 0 0.375rem;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-error, #ef4444);
}
.vup-restart-failed-desc {
margin: 0 0 0.5rem;
font-size: 0.75rem;
color: var(--color-text-muted);
line-height: 1.5;
}
.vup-restart-failed-options {
margin: 0 0 0.625rem;
padding-left: 1.125rem;
font-size: 0.75rem;
color: var(--color-text-primary);
line-height: 1.6;
}
.vup-restart-failed-options li + li {
margin-top: 0.25rem;
}
.vup-cmd {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.7188rem;
background: var(--color-surface-muted, rgba(127,127,127,.12));
padding: 1px 0.375rem;
border-radius: 4px;
}
/* ── Profile / My Data Panel ───────────────────────────────────────────────
*
* Assistant Memory is a 3-tab read-only window:
* 🧬 Soul – SOUL.md + "Have the assistant curate this" → /onboard scope:soul
* 👤 User – USER.md + "Have the assistant update this" → /onboard scope:user
* 🧠 Memories – cards with Curate + Delete (→ File Recall) → /onboard path:
*
* All mutations go through agent sessions; there are no inline editors.
* All colours use design tokens from :root / [data-theme="dark"] above —
* no hardcoded fallbacks so the panel looks correct in both light and dark.
* ═════════════════════════════════════════════════════════════════════════ */
#profile-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
}
#profile-body {
flex: 1;
overflow-y: auto;
padding: 1.75rem 2.25rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
background: var(--color-bg-secondary);
}
/* ── Tab bar ─────────────────────────────────────────────────────────── */
.profile-tabs {
display: flex;
gap: 0.25rem;
margin: 1.125rem 0 1rem;
border-bottom: 1px solid var(--color-border-primary);
}
.profile-tab {
padding: 0.625rem 1.125rem;
border: none;
background: transparent;
color: var(--color-text-muted);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.15s, border-color 0.15s;
}
.profile-tab:hover:not(.active) {
color: var(--color-text-primary);
}
.profile-tab.active {
color: var(--color-text-primary);
border-bottom-color: var(--color-accent-primary);
}
/* ── Tab panel ───────────────────────────────────────────────────────── */
.profile-tab-panel {
padding: 0.875rem 2px 1.25rem;
}
/* ── Section heading (shared across panels) ──────────────────────────── */
.profile-section-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.875rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid var(--color-border-primary);
}
.profile-section-title {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-text-primary);
margin: 0;
}
.profile-section-meta {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
}
.profile-section-hint {
font-size: 0.75rem;
color: var(--color-text-muted);
margin: 0 0 0.75rem 0;
}
.profile-path {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.6875rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 20rem;
}
.profile-status {
font-size: 0.6875rem;
padding: 2px 0.5rem;
border-radius: 10px;
flex-shrink: 0;
}
.profile-status-default {
background: var(--color-bg-hover);
color: var(--color-text-muted);
}
.profile-status-custom {
background: var(--color-success-bg);
color: var(--color-success);
}
.profile-empty {
padding: 0.875rem 0;
text-align: center;
color: var(--color-text-muted);
font-size: 0.75rem;
font-style: italic;
}
/* ── Per-tab curate footer (SOUL / USER) ─────────────────────────────── */
.profile-pane-footer {
margin-top: 1.375rem;
padding-top: 1rem;
border-top: 1px dashed var(--color-border-primary);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
}
.profile-pane-footer-hint {
flex: 1;
min-width: 12.5rem;
font-size: 0.75rem;
color: var(--color-text-muted);
margin: 0;
}
.btn-profile-update {
padding: 0.5rem 1.125rem;
border-radius: 8px;
border: 1px solid transparent;
background: var(--color-button-primary);
color: var(--color-button-primary-text);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: opacity 0.15s, background 0.15s;
}
.btn-profile-update:hover:not(:disabled) {
background: var(--color-button-primary-hover);
opacity: 0.92;
}
.btn-profile-update:disabled {
opacity: 0.55;
cursor: wait;
}
/* ── Minimal-Markdown rendered body ───────────────────────────────────── */
.profile-markdown {
font-size: 0.8438rem;
line-height: 1.65;
color: var(--color-text-primary);
}
.profile-markdown h1,
.profile-markdown h2,
.profile-markdown h3 {
margin: 0.875rem 0 0.5rem;
font-weight: 600;
color: var(--color-text-primary);
}
.profile-markdown h1 { font-size: 1.125rem; }
.profile-markdown h2 { font-size: 0.9375rem; }
.profile-markdown h3 { font-size: 0.8438rem; }
.profile-markdown p {
margin: 0.5rem 0;
}
.profile-markdown ul,
.profile-markdown ol {
margin: 0.375rem 0 0.625rem 1.25rem;
padding: 0;
}
.profile-markdown li {
margin: 0.1875rem 0;
}
.profile-markdown code {
background: var(--color-bg-hover);
padding: 1px 0.3125rem;
border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.75rem;
}
.profile-markdown strong { font-weight: 600; }
.profile-markdown em { font-style: italic; }
/* ── Memories list (cards) ───────────────────────────────────────────── */
.memories-summary {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.btn-memories-mini {
padding: 0.25rem 0.625rem;
border-radius: 5px;
border: 1px solid var(--color-border-primary);
background: transparent;
color: var(--color-text-muted);
font-size: 0.6875rem;
cursor: pointer;
transition: border-color 0.15s, color 0.15s;
}
.btn-memories-mini:hover {
border-color: var(--color-text-muted);
color: var(--color-text-primary);
}
#memories-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.memory-card {
display: flex;
flex-direction: column;
border: 1px solid var(--color-border-primary);
border-radius: 8px;
background: var(--color-bg-secondary);
transition: border-color 0.15s;
overflow: hidden;
}
.memory-card:hover { border-color: var(--color-text-muted); }
.memory-card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding: 0.875rem 1rem;
}
.memory-card-info {
flex: 1;
min-width: 0;
cursor: pointer;
}
.memory-card-title {
font-size: 0.875rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 0.1875rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.memory-card-desc {
font-size: 0.75rem;
color: var(--color-text-muted);
margin-bottom: 0.375rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.memory-card-meta {
display: flex;
gap: 0.625rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
flex-wrap: wrap;
}
.memory-filename {
font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.memory-card-actions {
display: flex;
align-items: flex-start;
gap: 0.375rem;
flex-shrink: 0;
}
/* Shared base for per-card buttons. */
.btn-memory-curate,
.btn-memory-delete,
.btn-memory-expand {
padding: 0.3125rem 0.625rem;
border-radius: 5px;
border: 1px solid var(--color-border-primary);
background: transparent;
color: var(--color-text-primary);
font-size: 0.6875rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.3125rem;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-memory-curate:hover {
border-color: var(--color-text-primary);
background: var(--color-bg-hover);
}
.btn-memory-delete {
color: var(--color-text-primary);
}
.btn-memory-delete:hover {
border-color: var(--color-error);
color: var(--color-error);
background: var(--color-error-bg);
}
.btn-memory-expand {
min-width: 1.75rem;
justify-content: center;
color: var(--color-text-muted);
}
.btn-memory-expand:hover { color: var(--color-text-primary); }
.btn-memory-expand.expanded svg { transform: rotate(180deg); }
.btn-memory-expand svg { transition: transform 0.2s; }
.memory-card-body {
padding: 0.25rem 1rem 0.875rem 1rem;
border-top: 1px solid var(--color-border-primary);
background: var(--color-bg-secondary);
font-size: 0.8125rem;
line-height: 1.6;
color: var(--color-text-primary);
}
.memory-card-body h1,
.memory-card-body h2,
.memory-card-body h3 {
margin: 0.625rem 0 0.375rem;
font-weight: 600;
}
.memory-card-body p { margin: 0.375rem 0; }
.memory-card-body ul,
.memory-card-body ol { margin: 0.25rem 0 0.5rem 1.25rem; padding: 0; }
.memory-card-body li { margin: 2px 0; }
.memory-card-body code {
background: var(--color-bg-hover);
padding: 1px 0.3125rem;
border-radius: 4px;
font-family: ui-monospace, "SF Mono", Menlo, monospace;
font-size: 0.75rem;
}
.memory-card-loading {
padding: 0.625rem 0;
text-align: center;
color: var(--color-text-muted);
font-size: 0.75rem;
font-style: italic;
}
/* ── Mobile responsive (≤48rem) ─────────────────────────────────────────── */
@media (max-width: 768px) {
/* Sidebar becomes a fixed drawer on top of content */
#sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
z-index: 200;
box-shadow: 4px 0 24px rgba(0,0,0,0.18);
transition: transform 0.3s ease, background-color 0.3s ease;
transform: translateX(0);
margin-left: 0 !important;
}
/* active session: always show ⋯ button (no hover on touch) */
.session-item.active .session-actions-btn { display: flex; }
#sidebar.hidden {
transform: translateX(-100%);
margin-left: 0 !important;
}
/* Overlay backdrop */
#sidebar-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 199;
background: rgba(0,0,0,0.4);
}
#sidebar-overlay.active {
display: block;
}
/* Main takes full width since sidebar is no longer in flow */
#main {
width: 100%;
min-width: 0;
overflow: visible;
}
/* Tighten header padding */
#top-header {
padding: 0 0.75rem;
}
/* Session info bar: single-line, no hover-expand, font smaller */
#session-info-bar {
padding: 0.1875rem 0.75rem;
font-size: 0.625rem;
overflow: hidden;
white-space: nowrap;
}
/* Always show detail fields on mobile (no hover) */
#session-info-bar .sib-detail {
display: contents;
}
/* Hide less-important fields and their separators (element + sib-sep-after-element pattern) */
#sib-id,
.sib-sep-after-id,
#sib-dir,
.sib-sep-after-dir,
#sib-mode,
.sib-sep-after-mode,
#sib-reasoning-wrap,
.sib-sep-after-reasoning {
display: none;
}
.sib-sep {
margin: 0 0.25rem;
}
/* Input bar: proportional spacing, touch-friendly */
#input-bar {
padding: 0.5rem 0.625rem;
gap: 0.25rem;
}
/* Attach & slash buttons: slightly smaller touch target */
#btn-attach {
padding: 0.25rem;
}
#btn-slash {
padding: 0.25rem 0.375rem;
font-size: 0.875rem;
}
/* Textarea: prevent iOS auto-zoom (must be ≥1rem) */
#user-input {
font-size: 1rem;
padding: 0.4375rem 0.625rem;
}
/* Send button: bigger tap target */
#btn-send, #btn-interrupt {
padding: 0.4375rem 0.875rem;
font-size: 0.875rem;
}
.msg {
max-width: 92%;
}
.msg-assistant {
max-width: 100%;
padding: 18px 16px 20px;
border-radius: 12px;
font-size: 15px;
line-height: 1.74;
}
.msg-assistant h1 { font-size: 1.38em; }
.msg-assistant h2 { font-size: 1.14em; }
.msg-assistant h3 { font-size: 1.02em; }
.msg-assistant ul, .msg-assistant ol { margin-left: 1.15em; }
.msg-selection-action-btn {
min-height: 36px;
padding: 9px 12px;
font-size: 13px;
}
/* Welcome page: vertically centered but shifted up, add horizontal padding */
#welcome {
justify-content: center;
padding-bottom: 30vh;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* ── Tasks page ── */
#task-detail-panel {
overflow: visible;
height: auto;
flex: 1;
min-height: 0;
}
#task-detail-body {
padding: 1rem 1rem 5rem;
gap: 0.75rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex: 1;
min-height: 0;
}
/* btn-create-task: move below title instead of absolute top-right */
.task-page-header {
flex-direction: column;
padding-right: 0;
}
.btn-create-task {
position: static;
align-self: flex-start;
margin-top: 0.25rem;
}
/* Table: let it scroll horizontally, keep columns readable */
#task-list-table {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ── Task table: mobile layout ── */
.task-table-header {
display: none;
}
.task-table-row {
display: flex;
align-items: center;
min-width: 0;
gap: 0.5rem;
padding: 0.5rem 0.625rem;
border: 1px solid var(--color-border-primary); /* full border */
border-radius: 6px; /* independent rounded card */
margin-bottom: 0.5rem; /* spacing between cards */
}
.task-table-row:last-child {
margin-bottom: 0;
border-radius: 6px; /* override desktop's "0 0 6px 6px" */
}
/* Name col takes all remaining space */
.task-col-name {
flex: 1;
min-width: 0;
align-items: center;
}
/* Show schedule as subtitle under the task name */
.task-name-sched {
display: block;
font-size: 0.6875rem;
font-family: monospace;
color: var(--color-warning);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Hide standalone schedule & content columns */
.task-col-schedule,
.task-col-content {
display: none;
}
/* Actions: fixed width, icon-only buttons */
.task-col-actions {
flex-shrink: 0;
width: 6.5rem;
gap: 0.25rem;
}
.task-btn .btn-label {
display: none;
}
.task-btn {
padding: 0.375rem;
width: 1.875rem;
height: 1.875rem;
justify-content: center;
}
/* ── Skills page ── */
#skills-panel {
overflow: visible;
height: auto;
flex: 1;
min-height: 0;
}
#skills-body {
padding: 1rem 1rem 5rem;
gap: 0.75rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
flex: 1;
min-height: 0;
}
/* action buttons: move below title, inline row */
.skills-page-header {
padding-right: 0;
}
.skill-action-btns {
position: static;
margin-top: 0.5rem;
}
/* Show system skills toggle: give right margin */
#label-show-system {
margin-right: 0.5rem;
}
/* Skills tab bar: stack tabs and controls vertically */
#skills-tabs {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.skills-tabs-left {
display: flex;
flex-shrink: 0;
}
.skills-tab {
padding: 0.5rem 0.5rem;
}
.skills-tabs-controls {
padding-right: 0;
flex-shrink: 0;
margin-bottom: 0.25rem;
}
/* ── Settings page ── */
#settings-header {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
}
#settings-body {
padding: 1rem 1rem 5rem;
gap: 1.5rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
#settings-panel {
overflow: visible;
height: auto;
flex: 1;
min-height: 0;
}
.settings-section-title {
font-size: 0.9375rem;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Add Model button: full width on mobile */
.btn-settings-add {
width: 100%;
justify-content: center;
}
/* Model card: tighter, stack actions */
.model-card {
padding: 0.75rem 0.875rem;
gap: 0.625rem;
}
.model-card-header {
flex-wrap: wrap;
gap: 0.5rem;
}
.model-card-actions {
flex-wrap: wrap;
}
/* ── Channels page ── */
#channels-panel {
overflow: visible;
height: auto;
flex: 1;
min-height: 0;
}
#channels-body {
padding: 1rem 1rem 5rem;
gap: 1rem;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* Channel card: tighter padding, stack footer buttons */
.channel-card {
padding: 0.875rem 1rem;
gap: 0.75rem;
}
.channel-card-footer {
flex-wrap: wrap;
gap: 0.5rem;
}
.channel-card-actions {
flex-wrap: wrap;
gap: 0.375rem;
}
/* ── Profile / My Data page ── */
#profile-body { padding: 1rem 0.875rem; }
.profile-tab { padding: 0.5625rem 0.75rem; font-size: 0.75rem; }
.profile-section-head { flex-wrap: wrap; }
.profile-path { max-width: 100%; }
.memory-card-head { flex-wrap: wrap; }
.memory-card-actions { margin-top: 0.375rem; flex-wrap: wrap; }
.btn-memory-curate span,
.btn-memory-delete span { display: none; } /* icon-only on narrow screens */
/* ── File Recall page ── */
.trash-toolbar {
flex-wrap: wrap;
gap: 0.5rem;
}
.trash-summary {
width: 100%;
}
.trash-actions {
flex-wrap: wrap;
margin-left: 0;
gap: 0.375rem;
}
.btn-trash-action {
white-space: nowrap;
flex-shrink: 0;
}
/* Latency signal popup (tap to show on mobile, replaces native title tooltip) */
.sib-signal-popup {
position: fixed;
z-index: 500;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 6px;
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
color: var(--color-text-primary);
white-space: pre-line;
box-shadow: 0 4px 16px rgba(0,0,0,0.18);
max-width: 80vw;
pointer-events: none;
}
/* Make signal icon look tappable on mobile */
.sib-signal-clickable {
cursor: pointer;
}
}
/* ══════════════════════════════════════════════════════════════════════════
Creator Hub — Creator Center
══════════════════════════════════════════════════════════════════════════ */
#creator-panel {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
}
#creator-body {
flex: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
padding: 2rem 2rem 3.75rem;
gap: 1.75rem;
}
/* ── Section blocks ────────────────────────────────────────────────────── */
.creator-section-block {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.creator-section-header {
display: flex;
align-items: baseline;
gap: 0.625rem;
padding-bottom: 0.375rem;
border-bottom: 1px solid var(--color-border-primary);
margin-bottom: 2px;
}
.creator-section-label {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.creator-section-hint {
font-size: 0.6875rem;
color: var(--color-text-muted);
}
.creator-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* ── Skill Card base ───────────────────────────────────────────────────── */
.creator-skill-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
padding: 0.875rem 1rem;
margin-bottom: 0.75rem;
transition: border-color .15s;
}
.creator-skill-card:last-child {
margin-bottom: 0;
}
.creator-skill-card:hover { border-color: var(--color-text-muted); }
.creator-card-main {
display: flex;
align-items: center;
gap: 0.75rem;
}
.creator-card-info { flex: 1; min-width: 0; }
.creator-card-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.creator-card-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
flex-wrap: wrap;
}
.creator-skill-name {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary);
}
.creator-card-desc {
font-size: 0.75rem;
color: var(--color-text-tertiary);
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ── Card meta row (version + download count) ──────────────────────────── */
.creator-card-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 0.3125rem;
}
.creator-version {
font-size: 0.6875rem;
color: var(--color-text-muted);
}
.creator-dl-count {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
}
/* ── Badges ────────────────────────────────────────────────────────────── */
.creator-badge {
font-size: 0.625rem;
font-weight: 600;
padding: 2px 0.4375rem;
border-radius: 10px;
letter-spacing: 0.3px;
flex-shrink: 0;
}
.creator-badge-published {
background: var(--color-success-bg);
color: var(--color-success);
border: 1px solid var(--color-success-border);
}
.creator-badge-local {
background: rgba(250, 173, 20, 0.1);
color: #b8860b;
border: 1px solid rgba(250, 173, 20, 0.3);
}
[data-theme="dark"] .creator-badge-local {
color: #f5c842;
background: rgba(245, 200, 66, 0.1);
border-color: rgba(245, 200, 66, 0.25);
}
/* "Has local changes" badge — orange dot */
.creator-changes-badge {
font-size: 0.6875rem;
font-weight: 500;
color: #d97706;
flex-shrink: 0;
}
[data-theme="dark"] .creator-changes-badge {
color: #fbbf24;
}
/* Local-overrides-brand badge */
.creator-shadow-badge {
font-size: 0.625rem;
font-weight: 600;
padding: 2px 0.4375rem;
border-radius: 10px;
background: rgba(168, 85, 247, 0.1);
color: #8b5cf6;
border: 1px solid rgba(168, 85, 247, 0.3);
cursor: help;
}
[data-theme="dark"] .creator-shadow-badge {
background: rgba(139, 92, 246, 0.15);
color: #a78bfa;
border-color: rgba(139, 92, 246, 0.3);
}
/* ── Publish / Update button ───────────────────────────────────────────── */
.creator-upload-wrap { position: relative; }
.btn-creator-publish {
display: flex;
align-items: center;
gap: 0.3125rem;
padding: 0.375rem 0.75rem;
border-radius: 7px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
background: var(--color-accent-primary);
color: #fff;
border: none;
transition: background-color 0.2s, opacity 0.2s;
white-space: nowrap;
}
.btn-creator-publish:hover:not(:disabled) {
background: var(--color-accent-hover);
}
.btn-creator-publish:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.btn-creator-publish[data-state="success"] { background: var(--color-success, #22c55e); }
.btn-creator-publish[data-state="error"] { background: var(--color-error, #ef4444); }
/* Progress bar (reuse skill-upload-progress-* classes) */
.creator-upload-wrap .skill-upload-progress-wrap {
position: absolute;
bottom: -0.1875rem;
left: 0; right: 0;
height: 2px;
background: var(--color-border-primary);
border-radius: 1px;
overflow: hidden;
}
.creator-upload-wrap .skill-upload-progress-bar {
height: 100%;
background: var(--color-accent-primary);
border-radius: 1px;
transition: width 0.15s ease;
}
.creator-upload-wrap .skill-upload-progress-bar[data-state="success"] { background: var(--color-success, #22c55e); }
.creator-upload-wrap .skill-upload-progress-bar[data-state="error"] { background: var(--color-error, #ef4444); }
/* Iterate button */
.btn-creator-iterate {
display: flex;
align-items: center;
gap: 0.3125rem;
padding: 0.375rem 0.75rem;
border-radius: 7px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
background: transparent;
color: var(--color-text-secondary);
border: 1px solid var(--color-border-primary);
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
white-space: nowrap;
}
.btn-creator-iterate:hover {
background: var(--color-bg-hover);
color: var(--color-text-primary);
border-color: var(--color-border-secondary);
}
/* Up-to-date (disabled) button */
.btn-creator-up-to-date {
display: flex;
align-items: center;
gap: 0.3125rem;
padding: 0.375rem 0.75rem;
border-radius: 7px;
font-size: 0.75rem;
font-weight: 500;
cursor: not-allowed;
background: transparent;
color: var(--color-text-disabled, var(--color-text-muted));
border: 1px solid var(--color-border-muted, var(--color-border-primary));
opacity: 0.55;
white-space: nowrap;
}
/* ── Promo banner (non-licensed users) ─────────────────────────────────── */
#creator-promo-banner {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 8px;
font-size: 0.7812rem;
color: var(--color-text-secondary);
}
#creator-promo-banner svg {
flex-shrink: 0;
color: var(--color-accent-primary);
opacity: 0.8;
}
#creator-promo-banner a {
margin-left: auto;
white-space: nowrap;
color: var(--color-accent-primary);
text-decoration: none;
font-weight: 500;
}
#creator-promo-banner a:hover {
text-decoration: underline;
}
/* ── Cloud skills lock (non-licensed users) ─────────────────────────────── */
#creator-cloud-lock {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 0.875rem;
border: 1px dashed var(--color-border-primary);
border-radius: 8px;
font-size: 0.7812rem;
color: var(--color-text-muted);
}
#creator-cloud-lock svg {
flex-shrink: 0;
opacity: 0.5;
}
#creator-cloud-lock a {
margin-left: auto;
white-space: nowrap;
color: var(--color-accent-primary);
text-decoration: none;
font-weight: 500;
opacity: 0.85;
}
#creator-cloud-lock a:hover {
text-decoration: underline;
}
/* ── Create New Skill entry card ───────────────────────────────────────── */
.creator-new-card {
display: flex;
align-items: center;
gap: 0.625rem;
padding: 0.875rem 1rem;
background: var(--color-bg-secondary);
border: 1px dashed var(--color-border-primary);
border-radius: 8px;
cursor: pointer;
font-size: 0.8125rem;
font-weight: 500;
color: var(--color-text-secondary);
transition: border-color .15s, color .15s, background .15s;
}
.creator-new-card:hover {
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);
background: var(--color-accent-bg, rgba(59,130,246,0.04));
}
.creator-new-arrow {
margin-left: auto;
opacity: 0.5;
transition: opacity .15s, transform .15s;
}
.creator-new-card:hover .creator-new-arrow {
opacity: 1;
transform: translateX(3px);
}
/* ── State messages ────────────────────────────────────────────────────── */
.creator-loading,
.creator-empty {
text-align: center;
color: var(--color-text-tertiary);
font-size: 0.8125rem;
padding: 1.5rem 0;
}
.creator-error {
text-align: center;
color: var(--color-error, #ef4444);
font-size: 0.8125rem;
padding: 1.5rem 0;
}
.creator-notice {
font-size: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 6px;
margin-bottom: 0.25rem;
}
.creator-notice-warn {
background: rgba(250, 173, 20, 0.1);
color: #b8860b;
border: 1px solid rgba(250, 173, 20, 0.3);
}
[data-theme="dark"] .creator-notice-warn { color: #f5c842; }
/* ── Trash panel · Recently Deleted ────────────────────────────────── */
.trash-summary {
font-size: 0.6875rem;
color: var(--color-text-muted);
margin-right: auto;
}
.trash-actions {
display: flex;
align-items: center;
gap: 0.5rem;
margin-left: auto;
}
.btn-trash-action {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
padding: 0.25rem 0.5rem;
border-radius: 5px;
border: 1px solid var(--color-border-primary);
background: var(--color-bg-secondary);
color: var(--color-text-secondary);
cursor: pointer;
transition: all .15s;
}
.btn-trash-action:hover:not(:disabled) {
background: var(--color-bg-hover, rgba(127,127,127,.08));
border-color: var(--color-text-muted);
color: var(--color-text-primary);
}
.btn-trash-action:disabled {
opacity: .4;
cursor: not-allowed;
}
.btn-trash-danger:hover:not(:disabled) {
color: var(--color-error, #ef4444);
border-color: var(--color-error, #ef4444);
}
/* Trash card — standalone layout matching channel card tone */
.trash-card {
background: var(--color-bg-secondary);
border: 1px solid var(--color-border-primary);
border-radius: 10px;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
transition: border-color .15s, background .15s;
}
.trash-card:hover {
border-color: var(--color-text-muted);
}
.trash-card-info {
flex: 1;
min-width: 0;
}
.trash-card-title {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 0.25rem;
}
.trash-card-path {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 0.6875rem;
color: var(--color-text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
direction: rtl; /* keep the right side (filename) visible when truncating */
text-align: left;
margin-bottom: 0.25rem;
}
.trash-card-meta {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
}
.trash-card-actions {
display: flex;
align-items: center;
gap: 0.375rem;
flex-shrink: 0;
}
.trash-project {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
color: var(--color-text-muted);
max-width: 16.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.trash-missing {
display: inline-flex;
align-items: center;
gap: 0.1875rem;
font-size: 0.625rem;
padding: 1px 0.375rem;
border-radius: 4px;
color: var(--color-warning, #d97706);
background: rgba(217, 119, 6, .1);
border: 1px solid rgba(217, 119, 6, .3);
}
.btn-trash-restore,
.btn-trash-delete {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.6875rem;
padding: 0.3125rem 0.5625rem;
border-radius: 5px;
border: 1px solid var(--color-border-primary);
background: var(--color-bg-tertiary, var(--color-bg-primary));
color: var(--color-text-secondary);
cursor: pointer;
transition: all .15s;
}
.btn-trash-restore:hover:not(:disabled) {
background: var(--color-bg-hover, rgba(127,127,127,.08));
color: var(--color-success, #10b981);
border-color: var(--color-success, #10b981);
}
.btn-trash-delete {
padding: 0.3125rem 0.5rem;
}
.btn-trash-delete:hover:not(:disabled) {
color: var(--color-error, #ef4444);
border-color: var(--color-error, #ef4444);
}
.btn-trash-restore:disabled,
.btn-trash-delete:disabled {
opacity: .5;
cursor: not-allowed;
}
/* Trash panel — matches Channels layout for visual consistency */
#trash-panel {
flex: 1;
display: flex;
flex-direction: column;
overflow: hidden;
}
#trash-body {
flex: 1;
overflow-y: auto;
padding: 1.75rem 2.25rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
}
.trash-toolbar {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.875rem;
border: 1px solid var(--color-border-primary);
border-radius: 10px;
background: var(--color-bg-secondary);
}
#trash-list {
display: flex;
flex-direction: column;
gap: 0.625rem;
}
/* ── Cyber Zen Theme Extensions & Micro-Animations ─────────────────────── */
/* Global smooth transition for theme switching and interactive hover actions */
body,
#sidebar,
#top-header,
#app > main,
#messages,
.msg-user,
.msg-assistant,
#input-area,
#input-bar,
#user-input,
#btn-send,
.theme-toggle-btn,
.sidebar-divider,
.task-item,
.session-item,
.btn-split-main,
.btn-split-arrow,
#session-info-bar {
transition: background-color 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
border-color 0.45s cubic-bezier(0.25, 0.8, 0.25, 1),
color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
box-shadow 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Webkit scrollbar customizations for Cyber Zen theme */
[data-theme="cyber"] ::-webkit-scrollbar {
width: 8px;
height: 8px;
}
[data-theme="cyber"] ::-webkit-scrollbar-track {
background: transparent;
}
[data-theme="cyber"] ::-webkit-scrollbar-thumb {
background: rgba(0, 245, 212, 0.16);
border-radius: 4px;
}
[data-theme="cyber"] ::-webkit-scrollbar-thumb:hover {
background: rgba(0, 245, 212, 0.32);
}
/* Glassmorphic user message bubbles */
[data-theme="cyber"] .msg-user {
background: linear-gradient(135deg, rgba(0, 245, 212, 0.12), rgba(168, 85, 247, 0.12));
border: 1px solid rgba(0, 245, 212, 0.28);
color: #f8fafc;
box-shadow: 0 8px 24px rgba(0, 245, 212, 0.06);
}
[data-theme="cyber"] .msg-user:hover {
border-color: rgba(0, 245, 212, 0.45);
box-shadow: 0 8px 28px rgba(0, 245, 212, 0.1);
}
/* Obsidian assistant response bubbles */
[data-theme="cyber"] .msg-assistant {
background: linear-gradient(180deg, #101524, #0b0f1a);
border: 1px solid rgba(30, 41, 59, 0.8);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}
/* Glow send button with dark text */
[data-theme="cyber"] #btn-send {
background: var(--color-accent-primary);
color: #030712 !important;
font-weight: 600;
box-shadow: 0 4px 14px rgba(0, 245, 212, 0.32);
}
[data-theme="cyber"] #btn-send:hover:not(:disabled) {
background: var(--color-accent-hover);
box-shadow: 0 6px 20px rgba(0, 245, 212, 0.48);
transform: translateY(-1px);
}
[data-theme="cyber"] #btn-send:disabled {
background: rgba(255, 255, 255, 0.06) !important;
color: rgba(255, 255, 255, 0.2) !important;
box-shadow: none !important;
border: 1px solid rgba(255, 255, 255, 0.05);
}
/* Chat text input focus glow */
[data-theme="cyber"] #user-input {
background: var(--color-bg-input);
border: 1px solid var(--color-border-primary);
}
[data-theme="cyber"] #user-input:focus {
border-color: var(--color-accent-primary);
box-shadow: 0 0 12px rgba(0, 245, 212, 0.24);
}
/* Code block customization in Cyber Zen */
[data-theme="cyber"] pre,
[data-theme="cyber"] code {
background: #06090f !important;
border: 1px solid rgba(30, 41, 59, 0.6) !important;
}
/* Special visual feedback for the theme toggle icon and auroral breathing */
.theme-toggle-btn svg,
.btn-theme-toggle svg {
transition: transform 0.18s ease;
}
.theme-toggle-btn:active svg,
.btn-theme-toggle:active svg {
transform: scale(0.94);
}