| @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); |
|
|
| :root { |
| --bg-base: #f4f1ea; |
| --bg-panel: #fffdf8; |
| --bg-raised: #fff8ef; |
| --bg-hover: #f4eadb; |
| --bg-active: #efe2cf; |
| --border: rgba(114, 84, 48, 0.14); |
| --border-strong: rgba(114, 84, 48, 0.24); |
| --border-accent: rgba(210, 124, 46, 0.28); |
| --text-primary: #2e2218; |
| --text-secondary: #5f4c3c; |
| --text-muted: #8f7a66; |
| --text-accent: #b15c16; |
| --accent: #d97706; |
| --accent-glow: rgba(217, 119, 6, 0.16); |
| --accent-muted: rgba(217, 119, 6, 0.11); |
| --accent-2: #0f766e; |
| --success: #15803d; |
| --warning: #ca8a04; |
| --danger: #dc2626; |
| --surface-glass: rgba(255, 255, 255, 0.76); |
| --surface-glass-hover: rgba(247, 236, 220, 0.92); |
| --shadow-sm: 0 1px 3px rgba(74, 52, 24, 0.08); |
| --shadow-md: 0 12px 30px rgba(108, 76, 40, 0.09); |
| --shadow-lg: 0 20px 48px rgba(108, 76, 40, 0.14); |
| --shadow-accent: 0 10px 32px rgba(217, 119, 6, 0.15); |
| --radius-sm: 6px; |
| --radius-md: 10px; |
| --radius-lg: 16px; |
| --radius-xl: 20px; |
| --sidebar-w: 260px; |
| --right-panel-w: 280px; |
| --topbar-h: 56px; |
| } |
|
|
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } |
|
|
| html, body { |
| height: 100%; |
| overflow: hidden; |
| } |
|
|
| body { |
| font-family: 'Sora', sans-serif; |
| background: |
| radial-gradient(circle at top left, rgba(255, 222, 173, 0.55), transparent 28%), |
| radial-gradient(circle at top right, rgba(181, 92, 22, 0.08), transparent 24%), |
| linear-gradient(180deg, #f9f4ec 0%, #f3eee6 46%, #efe7dc 100%); |
| color: var(--text-primary); |
| font-size: 14px; |
| line-height: 1.5; |
| } |
|
|
| ::-webkit-scrollbar { width: 7px; height: 7px; } |
| ::-webkit-scrollbar-track { background: transparent; } |
| ::-webkit-scrollbar-thumb { background: rgba(143, 122, 102, 0.45); border-radius: 999px; } |
| ::-webkit-scrollbar-thumb:hover { background: rgba(143, 122, 102, 0.72); } |
|
|
| .app-shell { |
| display: grid; |
| grid-template-columns: var(--sidebar-w) 1fr var(--right-panel-w); |
| grid-template-rows: var(--topbar-h) 1fr; |
| height: 100vh; |
| min-height: 100dvh; |
| position: relative; |
| } |
|
|
| .topbar, |
| .sidebar, |
| .right-panel, |
| .chat-form-wrap, |
| .stat-pill, |
| .quick-prompt-card, |
| .message.assistant .bubble, |
| .guide-card, |
| .summary-card, |
| .util-btn, |
| .search-item, |
| .drawer, |
| .helper-panel { |
| backdrop-filter: blur(12px); |
| } |
|
|
| .topbar { |
| grid-column: 1 / -1; |
| grid-row: 1; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 20px 0 0; |
| border-bottom: 1px solid var(--border); |
| background: rgba(255, 253, 248, 0.92); |
| z-index: 10; |
| } |
|
|
| .topbar-brand { |
| width: var(--sidebar-w); |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 0 20px; |
| height: 100%; |
| border-right: 1px solid var(--border); |
| flex-shrink: 0; |
| } |
|
|
| .brand-icon { |
| width: 34px; |
| height: 34px; |
| border-radius: 11px; |
| background: linear-gradient(135deg, #d97706, #0f766e); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 12px; |
| font-weight: 700; |
| color: #fff; |
| box-shadow: var(--shadow-accent); |
| flex-shrink: 0; |
| } |
|
|
| .brand-name { |
| font-size: 14px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .brand-tag { |
| font-size: 10px; |
| font-weight: 600; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 0.12em; |
| } |
|
|
| .topbar-center { |
| position: relative; |
| flex: 1; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 0 20px; |
| } |
|
|
| .topbar-search { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| background: rgba(255, 248, 239, 0.95); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-md); |
| padding: 0 12px; |
| height: 38px; |
| width: 260px; |
| cursor: text; |
| transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; |
| } |
|
|
| .topbar-search:focus-within { |
| border-color: var(--accent); |
| background: #fffdfa; |
| box-shadow: 0 0 0 3px var(--accent-muted); |
| } |
|
|
| .topbar-search svg { color: var(--text-muted); flex-shrink: 0; } |
|
|
| .topbar-search input { |
| width: 100%; |
| border: none; |
| outline: none; |
| background: none; |
| color: var(--text-primary); |
| font-family: inherit; |
| font-size: 13px; |
| } |
|
|
| .topbar-search input::placeholder { color: var(--text-muted); } |
|
|
| .search-results { |
| display: none; |
| position: absolute; |
| top: 48px; |
| left: 86px; |
| width: min(420px, calc(100vw - 120px)); |
| z-index: 100; |
| background: rgba(255, 253, 248, 0.98); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| padding: 8px; |
| box-shadow: var(--shadow-lg); |
| } |
|
|
| .topbar-right { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .tb-btn, |
| .send-btn, |
| .chip, |
| .close-btn, |
| .panel-tab { |
| font-family: inherit; |
| } |
|
|
| .tb-btn { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| height: 34px; |
| padding: 0 12px; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border); |
| background: rgba(255, 248, 239, 0.98); |
| color: var(--text-secondary); |
| font-size: 13px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.15s; |
| white-space: nowrap; |
| } |
|
|
| .tb-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| border-color: var(--border-strong); |
| } |
|
|
| .tb-btn.primary { |
| background: linear-gradient(135deg, #d97706, #ea8c22); |
| border-color: #d97706; |
| color: #fff; |
| box-shadow: var(--shadow-accent); |
| } |
|
|
| .tb-btn.primary:hover { |
| background: linear-gradient(135deg, #c86c05, #de7c16); |
| } |
|
|
| .tb-btn svg { width: 14px; height: 14px; } |
|
|
| .avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| background: linear-gradient(135deg, #0f766e, #d97706); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 12px; |
| font-weight: 700; |
| color: #fff; |
| border: 2px solid rgba(255, 255, 255, 0.9); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .sidebar { |
| grid-row: 2; |
| background: rgba(255, 253, 248, 0.88); |
| border-right: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .sidebar-section { |
| padding: 16px 12px 8px; |
| } |
|
|
| .sidebar-label { |
| font-size: 10px; |
| font-weight: 700; |
| letter-spacing: 0.12em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| padding: 0 8px; |
| margin-bottom: 4px; |
| } |
|
|
| .sidebar-btn, |
| .session-item { |
| display: flex; |
| align-items: center; |
| gap: 9px; |
| width: 100%; |
| padding: 9px 10px; |
| border-radius: var(--radius-md); |
| border: none; |
| background: none; |
| color: var(--text-secondary); |
| font-size: 13px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.13s; |
| text-align: left; |
| } |
|
|
| .sidebar-btn:hover, |
| .session-item:hover { |
| background: var(--surface-glass-hover); |
| color: var(--text-primary); |
| } |
|
|
| .sidebar-btn.active, |
| .session-item.active { |
| background: linear-gradient(135deg, rgba(217, 119, 6, 0.12), rgba(15, 118, 110, 0.08)); |
| color: var(--text-accent); |
| } |
|
|
| .sidebar-btn svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.8; } |
| .sidebar-btn .badge { |
| margin-left: auto; |
| background: var(--accent); |
| color: #fff; |
| font-size: 10px; |
| font-weight: 700; |
| padding: 1px 6px; |
| border-radius: 999px; |
| } |
|
|
| .sidebar-divider { |
| height: 1px; |
| background: var(--border); |
| margin: 8px 12px; |
| } |
|
|
| .summary-header { |
| padding: 0 12px 4px; |
| } |
|
|
| .refresh-link { |
| cursor: pointer; |
| color: var(--text-accent); |
| font-size: 10px; |
| margin-left: 6px; |
| letter-spacing: 0; |
| text-transform: none; |
| } |
|
|
| .session-list { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0 12px 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| } |
|
|
| .session-item { |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 2px; |
| } |
|
|
| .session-item strong { |
| font-size: 13px; |
| font-weight: 600; |
| color: inherit; |
| width: 100%; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .session-item small { |
| font-size: 11px; |
| color: var(--text-muted); |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .chat-layout { |
| grid-row: 2; |
| display: grid; |
| grid-template-rows: auto 1fr auto; |
| overflow: hidden; |
| background: transparent; |
| } |
|
|
| .stats-bar { |
| display: flex; |
| gap: 10px; |
| padding: 14px 18px 0; |
| } |
|
|
| .stat-pill { |
| flex: 1; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| padding: 14px 16px; |
| background: rgba(255, 253, 248, 0.88); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-lg); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .stat-pill:hover { background: #fffdfa; } |
|
|
| .stat-icon { |
| width: 34px; |
| height: 34px; |
| border-radius: 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| flex-shrink: 0; |
| font-size: 11px; |
| font-weight: 700; |
| } |
|
|
| .stat-icon.blue { background: rgba(217, 119, 6, 0.12); color: var(--accent); } |
| .stat-icon.purple { background: rgba(15, 118, 110, 0.12); color: var(--accent-2); } |
| .stat-icon.green { background: rgba(21, 128, 61, 0.12); color: var(--success); } |
| .stat-icon.yellow { background: rgba(202, 138, 4, 0.12); color: var(--warning); } |
|
|
| .stat-value { |
| font-size: 20px; |
| font-weight: 700; |
| color: var(--text-primary); |
| line-height: 1.1; |
| } |
|
|
| .stat-label { |
| font-size: 11px; |
| color: var(--text-muted); |
| font-weight: 600; |
| } |
|
|
| .chat-messages { |
| overflow-y: auto; |
| padding: 24px 28px; |
| display: flex; |
| flex-direction: column; |
| gap: 16px; |
| } |
|
|
| .welcome-state { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| text-align: center; |
| flex: 1; |
| padding: 40px; |
| gap: 22px; |
| } |
|
|
| .welcome-icon { |
| width: 62px; |
| height: 62px; |
| border-radius: 20px; |
| background: linear-gradient(135deg, #d97706, #0f766e); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 18px; |
| font-weight: 700; |
| color: #fff; |
| box-shadow: var(--shadow-accent); |
| } |
|
|
| .welcome-title { |
| font-size: 24px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .welcome-sub { |
| font-size: 14px; |
| color: var(--text-secondary); |
| max-width: 42ch; |
| line-height: 1.7; |
| } |
|
|
| .quick-prompts { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 10px; |
| width: 100%; |
| max-width: 560px; |
| } |
|
|
| .quick-prompt-card { |
| display: flex; |
| flex-direction: column; |
| gap: 4px; |
| padding: 14px 16px; |
| border-radius: var(--radius-lg); |
| border: 1px solid var(--border); |
| background: rgba(255, 253, 248, 0.88); |
| cursor: pointer; |
| text-align: left; |
| transition: all 0.15s; |
| color: inherit; |
| } |
|
|
| .quick-prompt-card:hover { |
| border-color: var(--accent); |
| background: #fff7eb; |
| box-shadow: var(--shadow-accent); |
| transform: translateY(-1px); |
| } |
|
|
| .quick-prompt-card strong { |
| font-size: 13px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .quick-prompt-card span { |
| font-size: 12px; |
| color: var(--text-muted); |
| } |
|
|
| .message { |
| display: flex; |
| gap: 12px; |
| animation: msgIn 0.2s ease; |
| } |
|
|
| .message.user { flex-direction: row-reverse; } |
|
|
| .msg-avatar { |
| width: 32px; |
| height: 32px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 11px; |
| font-weight: 700; |
| margin-top: 2px; |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .msg-avatar.ai { |
| background: linear-gradient(135deg, #d97706, #0f766e); |
| color: #fff; |
| } |
|
|
| .msg-avatar.user { |
| background: linear-gradient(135deg, #8b5e34, #d97706); |
| color: #fff; |
| } |
|
|
| .bubble-wrap { |
| max-width: min(68ch, 82%); |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .message.user .bubble-wrap { align-items: flex-end; } |
|
|
| .bubble { |
| padding: 12px 16px; |
| border-radius: var(--radius-lg); |
| line-height: 1.65; |
| font-size: 13.5px; |
| } |
|
|
| .message.assistant .bubble { |
| background: rgba(255, 253, 248, 0.9); |
| border: 1px solid var(--border); |
| border-bottom-left-radius: 4px; |
| color: var(--text-primary); |
| } |
|
|
| .message.user .bubble { |
| background: linear-gradient(135deg, #d97706, #ea8c22); |
| border-bottom-right-radius: 4px; |
| color: #fff; |
| } |
|
|
| .bubble h1, .bubble h2, .bubble h3 { |
| font-size: 14px; |
| font-weight: 700; |
| color: inherit; |
| margin: 8px 0 4px; |
| } |
|
|
| .bubble code, |
| .guide-card code { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 12px; |
| background: rgba(177, 92, 22, 0.1); |
| color: var(--text-accent); |
| padding: 2px 6px; |
| border-radius: 4px; |
| } |
|
|
| .bubble ul { padding-left: 18px; margin: 4px 0; } |
| .bubble li { margin: 2px 0; } |
|
|
| .message-actions { |
| display: flex; |
| gap: 5px; |
| flex-wrap: wrap; |
| } |
|
|
| .msg-action-btn { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| height: 24px; |
| padding: 0 8px; |
| border-radius: 6px; |
| border: 1px solid var(--border); |
| background: rgba(255, 248, 239, 0.96); |
| color: var(--text-muted); |
| font-family: inherit; |
| font-size: 11px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.13s; |
| } |
|
|
| .msg-action-btn:hover { |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| border-color: var(--border-strong); |
| } |
|
|
| .typing .bubble { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| padding: 14px 16px; |
| } |
|
|
| .typing-dots { display: flex; gap: 4px; } |
|
|
| .typing-dot { |
| width: 6px; |
| height: 6px; |
| border-radius: 50%; |
| background: var(--text-muted); |
| animation: dotPulse 1.2s ease-in-out infinite; |
| } |
|
|
| .typing-dot:nth-child(2) { animation-delay: 0.15s; } |
| .typing-dot:nth-child(3) { animation-delay: 0.3s; } |
|
|
| .helper-panel { |
| background: rgba(255, 247, 235, 0.96); |
| border: 1px solid var(--border-accent); |
| border-radius: var(--radius-md); |
| padding: 10px 14px; |
| font-size: 13px; |
| color: var(--text-secondary); |
| max-height: 120px; |
| overflow-y: auto; |
| margin: 0 28px; |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .helper-panel.hidden { display: none; } |
| .helper-panel pre { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 12px; |
| white-space: pre-wrap; |
| } |
|
|
| .chat-form-wrap { |
| padding: 16px 24px 20px; |
| border-top: 1px solid var(--border); |
| background: rgba(255, 253, 248, 0.92); |
| } |
|
|
| .chat-form { |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| background: rgba(255, 248, 239, 0.98); |
| border: 1px solid var(--border-strong); |
| border-radius: var(--radius-xl); |
| padding: 14px; |
| transition: border-color 0.15s, box-shadow 0.15s; |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .chat-form:focus-within { |
| border-color: rgba(217, 119, 6, 0.35); |
| box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.08); |
| } |
|
|
| .chat-form textarea { |
| background: none; |
| border: none; |
| outline: none; |
| resize: none; |
| font-family: inherit; |
| font-size: 14px; |
| color: var(--text-primary); |
| min-height: 24px; |
| max-height: 120px; |
| line-height: 1.6; |
| } |
|
|
| .chat-form textarea::placeholder { color: var(--text-muted); } |
|
|
| .form-bottom { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .chip-row { |
| display: flex; |
| gap: 6px; |
| flex-wrap: wrap; |
| } |
|
|
| .chip { |
| display: flex; |
| align-items: center; |
| gap: 4px; |
| height: 28px; |
| padding: 0 10px; |
| border-radius: 999px; |
| border: 1px solid var(--border); |
| background: #fffdfa; |
| color: var(--text-muted); |
| font-size: 11px; |
| font-weight: 600; |
| cursor: pointer; |
| transition: all 0.13s; |
| white-space: nowrap; |
| } |
|
|
| .chip:hover { |
| background: rgba(217, 119, 6, 0.09); |
| color: var(--text-accent); |
| border-color: var(--border-accent); |
| } |
|
|
| .send-btn { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| height: 36px; |
| padding: 0 16px; |
| border-radius: var(--radius-md); |
| border: none; |
| background: linear-gradient(135deg, #d97706, #ea8c22); |
| color: #fff; |
| font-size: 13px; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.15s; |
| flex-shrink: 0; |
| box-shadow: var(--shadow-accent); |
| } |
|
|
| .send-btn:hover { |
| transform: translateY(-1px); |
| box-shadow: 0 14px 30px rgba(217, 119, 6, 0.2); |
| } |
|
|
| .send-btn svg { width: 14px; height: 14px; } |
|
|
| .right-panel { |
| grid-row: 2; |
| background: rgba(255, 253, 248, 0.88); |
| border-left: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .panel-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 14px 16px 10px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .panel-title { |
| font-size: 13px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .panel-tab-row { |
| display: flex; |
| gap: 2px; |
| padding: 10px 12px 6px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .panel-tab { |
| flex: 1; |
| height: 30px; |
| border-radius: var(--radius-sm); |
| border: none; |
| background: none; |
| color: var(--text-muted); |
| font-size: 12px; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.13s; |
| } |
|
|
| .panel-tab:hover { color: var(--text-primary); background: var(--surface-glass-hover); } |
| .panel-tab.active { color: var(--text-accent); background: rgba(217, 119, 6, 0.1); } |
|
|
| .panel-body { |
| flex: 1; |
| overflow-y: auto; |
| padding: 12px; |
| display: flex; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| #tab-actions { |
| display: grid; |
| } |
|
|
| .stack-panel { |
| display: none; |
| flex-direction: column; |
| gap: 8px; |
| } |
|
|
| .util-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 6px; |
| } |
|
|
| .util-btn, |
| .guide-card, |
| .summary-card, |
| .search-item { |
| border: 1px solid var(--border); |
| background: rgba(255, 248, 239, 0.92); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .util-btn { |
| display: flex; |
| flex-direction: column; |
| align-items: flex-start; |
| gap: 4px; |
| padding: 10px 11px; |
| border-radius: var(--radius-md); |
| color: var(--text-secondary); |
| cursor: pointer; |
| text-align: left; |
| transition: all 0.15s; |
| } |
|
|
| .util-btn:hover { |
| background: #fff6e9; |
| border-color: var(--border-strong); |
| color: var(--text-primary); |
| transform: translateY(-1px); |
| } |
|
|
| .util-btn svg { width: 14px; height: 14px; color: var(--accent); } |
| .util-btn span { font-size: 11.5px; font-weight: 600; line-height: 1.2; } |
|
|
| .guide-card { |
| padding: 11px 13px; |
| border-radius: var(--radius-md); |
| } |
|
|
| .guide-card strong { |
| display: block; |
| font-size: 12.5px; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: 4px; |
| } |
|
|
| .guide-card p { |
| font-size: 12px; |
| color: var(--text-secondary); |
| line-height: 1.5; |
| } |
|
|
| .side-helper-title { |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: 0.08em; |
| text-transform: uppercase; |
| color: var(--text-muted); |
| } |
|
|
| #sideHelperContent { |
| font-size: 12px; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| white-space: pre-wrap; |
| font-family: 'JetBrains Mono', monospace; |
| min-height: 60px; |
| max-height: 160px; |
| overflow-y: auto; |
| } |
|
|
| #summaryCards { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 6px; |
| padding: 0 12px 12px; |
| } |
|
|
| .summary-card { |
| padding: 10px 11px; |
| border-radius: var(--radius-md); |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .summary-card strong { |
| font-size: 18px; |
| font-weight: 700; |
| color: var(--text-primary); |
| } |
|
|
| .summary-card small { |
| font-size: 10.5px; |
| color: var(--text-muted); |
| font-weight: 600; |
| } |
|
|
| .search-item { |
| padding: 10px 12px; |
| border-radius: var(--radius-md); |
| margin-bottom: 6px; |
| cursor: pointer; |
| transition: background 0.15s, border-color 0.15s; |
| } |
|
|
| .search-item:hover { |
| background: #fff6e9; |
| border-color: var(--border-strong); |
| } |
|
|
| .search-item strong { |
| font-size: 12px; |
| font-weight: 700; |
| color: var(--text-primary); |
| display: block; |
| } |
|
|
| .search-item small { |
| display: block; |
| font-size: 11px; |
| color: var(--text-muted); |
| margin-top: 2px; |
| } |
|
|
| .search-item p { |
| font-size: 12px; |
| color: var(--text-secondary); |
| margin-top: 4px; |
| line-height: 1.4; |
| } |
|
|
| .page-overlay { |
| position: fixed; |
| inset: 0; |
| background: rgba(46, 34, 24, 0.3); |
| backdrop-filter: blur(3px); |
| z-index: 40; |
| } |
|
|
| .page-overlay.hidden { display: none; } |
|
|
| .drawer { |
| position: fixed; |
| top: 0; |
| bottom: 0; |
| width: min(320px, calc(100vw - 32px)); |
| background: rgba(255, 253, 248, 0.96); |
| border: 1px solid var(--border); |
| z-index: 50; |
| overflow-y: auto; |
| transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1); |
| padding: 20px 16px; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| box-shadow: var(--shadow-lg); |
| padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); |
| } |
|
|
| .left-drawer { left: 0; border-radius: 0 16px 16px 0; transform: translateX(-110%); } |
| .right-drawer { right: 0; border-radius: 16px 0 0 16px; transform: translateX(110%); } |
| body.left-drawer-open .left-drawer { transform: translateX(0); } |
| body.right-drawer-open .right-drawer { transform: translateX(0); } |
|
|
| .drawer-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| } |
|
|
| .drawer-head h3 { |
| font-size: 16px; |
| font-weight: 700; |
| } |
|
|
| .drawer-subtitle { padding-top: 12px; } |
|
|
| .drawer-footer { |
| margin-top: auto; |
| padding-top: 12px; |
| border-top: 1px solid var(--border); |
| } |
|
|
| .drawer-action { |
| width: 100%; |
| justify-content: center; |
| } |
|
|
| .app-modal { |
| position: fixed; |
| inset: 0; |
| z-index: 90; |
| } |
|
|
| .app-modal.hidden { |
| display: none; |
| } |
|
|
| .app-modal-backdrop { |
| position: absolute; |
| inset: 0; |
| background: rgba(46, 34, 24, 0.42); |
| backdrop-filter: blur(4px); |
| } |
|
|
| .app-modal-card { |
| position: relative; |
| width: min(880px, calc(100vw - 32px)); |
| max-height: calc(100dvh - 40px); |
| margin: 20px auto; |
| background: rgba(255, 253, 248, 0.98); |
| border: 1px solid var(--border); |
| border-radius: 24px; |
| box-shadow: var(--shadow-lg); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .app-modal-head { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 18px 20px 14px; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .app-modal-head h2 { |
| font-size: 22px; |
| line-height: 1.2; |
| } |
|
|
| .reminder-form { |
| padding: 18px 20px; |
| border-bottom: 1px solid var(--border); |
| background: rgba(255, 248, 239, 0.6); |
| } |
|
|
| .reminder-grid { |
| display: grid; |
| grid-template-columns: 1.4fr 1fr 1fr; |
| gap: 14px; |
| } |
|
|
| .field-block { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .field-block span { |
| font-size: 12px; |
| font-weight: 700; |
| color: var(--text-secondary); |
| } |
|
|
| .field-block input, |
| .field-block textarea { |
| width: 100%; |
| border: 1px solid var(--border); |
| border-radius: 12px; |
| background: #fffdfa; |
| color: var(--text-primary); |
| font: inherit; |
| padding: 11px 12px; |
| outline: none; |
| transition: border-color 0.15s, box-shadow 0.15s; |
| } |
|
|
| .field-block textarea { |
| resize: vertical; |
| min-height: 94px; |
| } |
|
|
| .field-block input:focus, |
| .field-block textarea:focus { |
| border-color: var(--accent); |
| box-shadow: 0 0 0 3px var(--accent-muted); |
| } |
|
|
| .reminder-note-block { |
| grid-column: 1 / -1; |
| } |
|
|
| .form-status { |
| margin-top: 12px; |
| padding: 10px 12px; |
| border-radius: 12px; |
| font-size: 12px; |
| font-weight: 600; |
| } |
|
|
| .form-status.hidden { |
| display: none; |
| } |
|
|
| .form-status.success { |
| background: rgba(21, 128, 61, 0.12); |
| color: var(--success); |
| border: 1px solid rgba(21, 128, 61, 0.18); |
| } |
|
|
| .form-status.error { |
| background: rgba(220, 38, 38, 0.1); |
| color: var(--danger); |
| border: 1px solid rgba(220, 38, 38, 0.16); |
| } |
|
|
| .modal-actions { |
| display: flex; |
| justify-content: flex-end; |
| gap: 10px; |
| margin-top: 14px; |
| } |
|
|
| .reminder-list-head { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| padding: 18px 20px 10px; |
| } |
|
|
| .reminder-list-head h3 { |
| font-size: 16px; |
| } |
|
|
| .reminder-list-head p { |
| font-size: 12px; |
| color: var(--text-muted); |
| margin-top: 4px; |
| } |
|
|
| .reminder-list { |
| padding: 0 20px 20px; |
| overflow-y: auto; |
| display: flex; |
| flex-direction: column; |
| gap: 10px; |
| } |
|
|
| .reminder-empty, |
| .reminder-item { |
| border: 1px solid var(--border); |
| border-radius: 16px; |
| background: rgba(255, 248, 239, 0.82); |
| box-shadow: var(--shadow-sm); |
| } |
|
|
| .reminder-empty { |
| padding: 18px; |
| text-align: center; |
| color: var(--text-muted); |
| } |
|
|
| .reminder-item { |
| display: flex; |
| align-items: flex-start; |
| justify-content: space-between; |
| gap: 14px; |
| padding: 14px 16px; |
| } |
|
|
| .reminder-main { |
| min-width: 0; |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| } |
|
|
| .reminder-topline { |
| display: flex; |
| align-items: center; |
| flex-wrap: wrap; |
| gap: 8px; |
| } |
|
|
| .reminder-title { |
| font-size: 14px; |
| font-weight: 700; |
| } |
|
|
| .status-pill { |
| display: inline-flex; |
| align-items: center; |
| height: 22px; |
| padding: 0 9px; |
| border-radius: 999px; |
| font-size: 11px; |
| font-weight: 700; |
| text-transform: capitalize; |
| } |
|
|
| .status-pill.scheduled { |
| background: rgba(217, 119, 6, 0.12); |
| color: var(--accent); |
| } |
|
|
| .status-pill.overdue { |
| background: rgba(220, 38, 38, 0.1); |
| color: var(--danger); |
| } |
|
|
| .status-pill.done { |
| background: rgba(21, 128, 61, 0.12); |
| color: var(--success); |
| } |
|
|
| .reminder-note { |
| font-size: 12px; |
| color: var(--text-secondary); |
| } |
|
|
| .reminder-meta { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| font-size: 11px; |
| color: var(--text-muted); |
| } |
|
|
| .reminder-actions { |
| display: flex; |
| flex-wrap: wrap; |
| justify-content: flex-end; |
| gap: 6px; |
| } |
|
|
| .action-chip { |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| background: #fffdfa; |
| color: var(--text-secondary); |
| padding: 7px 10px; |
| font: inherit; |
| font-size: 11px; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.13s; |
| } |
|
|
| .action-chip:hover { |
| border-color: var(--border-strong); |
| background: var(--bg-hover); |
| color: var(--text-primary); |
| } |
|
|
| .action-chip.danger:hover { |
| background: rgba(220, 38, 38, 0.1); |
| border-color: rgba(220, 38, 38, 0.16); |
| color: var(--danger); |
| } |
|
|
| .close-btn { |
| width: 28px; |
| height: 28px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| border-radius: 50%; |
| border: 1px solid var(--border); |
| background: var(--bg-raised); |
| color: var(--text-secondary); |
| font-size: 14px; |
| cursor: pointer; |
| line-height: 1; |
| transition: all 0.13s; |
| } |
|
|
| .close-btn:hover { |
| background: var(--danger); |
| color: #fff; |
| border-color: var(--danger); |
| } |
|
|
| @keyframes msgIn { |
| from { opacity: 0; transform: translateY(6px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
|
|
| @keyframes dotPulse { |
| 0%, 100% { opacity: 0.3; transform: scale(0.85); } |
| 50% { opacity: 1; transform: scale(1); } |
| } |
|
|
| @media (max-width: 1024px) { |
| :root { --right-panel-w: 0px; } |
| .right-panel { display: none; } |
| .app-shell { grid-template-columns: var(--sidebar-w) 1fr; } |
| } |
|
|
| @media (max-width: 720px) { |
| :root { |
| --sidebar-w: 0px; |
| --topbar-h: auto; |
| } |
| html, body { |
| overflow: hidden; |
| } |
| .sidebar { display: none; } |
| .app-shell { |
| grid-template-columns: 1fr; |
| grid-template-rows: var(--topbar-h) 1fr; |
| min-height: 100dvh; |
| } |
| .topbar { |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) auto; |
| align-items: center; |
| padding: max(10px, env(safe-area-inset-top, 0px)) 12px 10px; |
| gap: 10px 8px; |
| } |
| .topbar-brand { display: none; } |
| .topbar-center { |
| grid-column: 1 / 2; |
| min-width: 0; |
| padding: 0; |
| gap: 8px; |
| } |
| .topbar-search { |
| width: auto; |
| flex: 1; |
| min-width: 0; |
| } |
| .topbar-right { |
| grid-column: 1 / -1; |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| width: 100%; |
| overflow-x: auto; |
| padding-bottom: 2px; |
| scrollbar-width: none; |
| } |
| .topbar-right::-webkit-scrollbar { |
| display: none; |
| } |
| .topbar-right .tb-btn:not(.mobile-only):not(.primary) { |
| display: none; |
| } |
| .topbar-right .tb-btn.primary { |
| padding: 0 12px; |
| } |
| .topbar-right .tb-btn.primary svg { |
| display: none; |
| } |
| .topbar-right .tb-btn, |
| .topbar-right .avatar { |
| flex: 0 0 auto; |
| } |
| .avatar { |
| width: 28px; |
| height: 28px; |
| font-size: 11px; |
| } |
| .search-results { |
| left: 12px; |
| right: 12px; |
| width: auto; |
| top: calc(100% - 2px); |
| } |
| .chat-layout { |
| min-width: 0; |
| } |
| .stats-bar { |
| display: none; |
| } |
| .chat-messages { |
| padding: 16px; |
| gap: 12px; |
| } |
| .chat-form-wrap { |
| padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); |
| } |
| .stat-pill { |
| min-width: 0; |
| padding: 12px; |
| } |
| .stat-value { |
| font-size: 18px; |
| } |
| .stat-label { |
| font-size: 10px; |
| } |
| .welcome-state { |
| padding: 20px 8px 28px; |
| gap: 18px; |
| } |
| .welcome-title { |
| font-size: 21px; |
| } |
| .welcome-sub { |
| font-size: 13px; |
| } |
| .quick-prompts { |
| grid-template-columns: 1fr; |
| max-width: none; |
| } |
| .message { |
| gap: 8px; |
| } |
| .msg-avatar { |
| width: 28px; |
| height: 28px; |
| font-size: 10px; |
| } |
| .bubble-wrap { |
| max-width: calc(100% - 36px); |
| } |
| .bubble { |
| padding: 11px 13px; |
| font-size: 13px; |
| } |
| .helper-panel { |
| margin: 0 16px; |
| max-height: 140px; |
| } |
| .chat-form { |
| padding: 12px; |
| border-radius: 18px; |
| } |
| .form-bottom { |
| flex-direction: column; |
| align-items: stretch; |
| } |
| .chip-row { |
| overflow-x: auto; |
| flex-wrap: nowrap; |
| padding-bottom: 2px; |
| scrollbar-width: none; |
| } |
| .chip-row::-webkit-scrollbar { |
| display: none; |
| } |
| .chip { |
| flex: 0 0 auto; |
| } |
| .send-btn { |
| justify-content: center; |
| width: 100%; |
| } |
| .drawer { |
| width: min(320px, calc(100vw - 20px)); |
| padding: 18px 14px; |
| padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); |
| } |
| .app-modal-card { |
| width: calc(100vw - 20px); |
| max-height: calc(100dvh - 20px); |
| margin: 10px auto; |
| border-radius: 20px; |
| } |
| .app-modal-head, |
| .reminder-form, |
| .reminder-list-head, |
| .reminder-list { |
| padding-left: 14px; |
| padding-right: 14px; |
| } |
| .reminder-grid { |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
| .reminder-note-block { |
| grid-column: auto; |
| } |
| .reminder-item { |
| flex-direction: column; |
| } |
| .reminder-actions { |
| justify-content: flex-start; |
| } |
| .modal-actions { |
| flex-direction: column-reverse; |
| } |
| .modal-actions .tb-btn { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
|
|
| .mobile-only { display: none; } |
|
|
| @media (max-width: 720px) { |
| .mobile-only { display: flex; } |
| } |
|
|
| @media (max-width: 480px) { |
| .topbar { |
| padding: max(8px, env(safe-area-inset-top, 0px)) 10px 8px; |
| gap: 8px 6px; |
| } |
| .topbar-center { |
| gap: 6px; |
| } |
| .topbar-right { |
| gap: 5px; |
| } |
| .topbar-search { |
| height: 34px; |
| padding: 0 10px; |
| } |
| .topbar-search input { |
| font-size: 12px; |
| } |
| .tb-btn { |
| height: 32px; |
| padding: 0 10px; |
| font-size: 12px; |
| } |
| .topbar-right .tb-btn.primary { |
| font-size: 12px; |
| padding: 0 9px; |
| } |
| #openLeftDrawerBtn, |
| #openRightDrawerBtn { |
| padding: 0 10px; |
| } |
| #newChatBtn, |
| #openLeftDrawerBtn, |
| #openRightDrawerBtn { |
| min-width: 0; |
| } |
| .avatar { |
| display: none; |
| } |
| .chat-messages { |
| padding: 14px 12px; |
| } |
| .helper-panel { |
| margin: 0 12px; |
| } |
| .chat-form-wrap { |
| padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); |
| } |
| .bubble-wrap { |
| max-width: calc(100% - 32px); |
| } |
| .welcome-icon { |
| width: 56px; |
| height: 56px; |
| font-size: 16px; |
| } |
| .welcome-title { |
| font-size: 19px; |
| } |
| .quick-prompt-card { |
| padding: 12px 14px; |
| } |
| .helper-panel { |
| padding: 10px 12px; |
| } |
| .app-modal-card { |
| width: calc(100vw - 12px); |
| margin: 6px auto; |
| border-radius: 18px; |
| } |
| .app-modal-head h2 { |
| font-size: 19px; |
| } |
| .reminder-list { |
| padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); |
| } |
| } |
|
|
| @media (max-width: 380px) { |
| .topbar { |
| grid-template-columns: 1fr; |
| } |
| .topbar-center, |
| .topbar-right { |
| grid-column: 1 / -1; |
| } |
| .mobile-only { |
| justify-content: center; |
| } |
| .topbar-right .tb-btn.primary { |
| flex: 1 1 auto; |
| justify-content: center; |
| } |
| .message { |
| gap: 6px; |
| } |
| .bubble { |
| font-size: 12.5px; |
| } |
| } |
|
|
