/* * Dark mode strategy: the `dark` class is set on (not body) so the custom * properties cascade to BOTH html and body. Setting it on body alone left html's * bg using :root values → light bands above/below body when content < viewport. */ :root { --bg: #fafaf7; --fg: #2c2c2a; --muted: #6b6b66; --line: #e3e2dc; --accent: #534ab7; --accent-bg: #eeedfe; --ok: #0f6e56; --warn: #b45309; --err: #993556; --radius: 8px; /* Surface colors — overridden by html.dark for dark mode. */ --surface: #ffffff; --surface-hover: #f1efe8; --bubble-asst: #f4f3ee; --badge-ok-bg: #e1f5ee; --badge-warn-bg: #faeeda; --badge-err-bg: #fbeaf0; --badge-ok-fg: #0f6e56; --badge-warn-fg: #854f0b; --badge-err-fg: #993556; --step-bg: #f1efe8; --step-done-bg: #e1f5ee; --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02); } html.dark { --bg: #0f0f0e; --fg: #e8e6df; --muted: #8a8880; --line: #2a2a28; --accent: #8a82e8; --accent-bg: #1f1d3a; --ok: #4fc4a0; --warn: #d4a45a; --err: #d8627d; --surface: #1a1a18; --surface-hover: #25241f; --bubble-asst: #25241f; --badge-ok-bg: #14322a; --badge-warn-bg: #3a2a14; --badge-err-bg: #3a1a24; --badge-ok-fg: #4fc4a0; --badge-warn-fg: #e7b86e; --badge-err-fg: #e98aa3; --step-bg: #25241f; --step-done-bg: #14322a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05); color-scheme: dark; } /* Back-compat: legacy code still toggles body.dark in some places. */ body.dark { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Sukhumvit Set", "IBM Plex Sans Thai", sans-serif; background: var(--bg); color: var(--fg); font-size: 15px; line-height: 1.5; } /* Auth screens use Card with `margin:4rem auto` — without flow-root, that * margin-top "escapes" up through the body and offsets the body inside html * by ~60px, which makes the document scroll-height = viewport + 60 → spurious * scrollbar. flow-root creates a Block Formatting Context that contains the * margin. Cheaper than padding/border tricks and no visual side-effect. */ body { display: flow-root; } /* HTML always covers the viewport so the dark/light bg fills the screen even * when body content is short (auth screen ~300px). Was previously on body, but * that broke once we added flow-root above (body would still be 100vh AND * scroll its own content). */ html { min-height: 100vh; } /* Form elements use surface vars so they look right in both themes. */ input, textarea, select { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius); font-family: inherit; } input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); } input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.7; } /* Banner (auth screens use this for inline alerts) — inline styles in JS were * hardcoding light hex colours, which looked wrong in dark mode. The component * now uses .banner.{ok,warn,err} so colour comes from CSS vars. */ .banner { padding: 0.5rem 0.75rem; border-radius: var(--radius); font-size: 0.875rem; margin: 0 0 0.75rem; border: 1px solid var(--line); } .banner.ok { background: var(--badge-ok-bg); color: var(--badge-ok-fg); border-color: var(--badge-ok-fg); } .banner.warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); border-color: var(--badge-warn-fg); } .banner.err { background: var(--badge-err-bg); color: var(--badge-err-fg); border-color: var(--badge-err-fg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .layout { display: grid; grid-template-columns: 220px 1fr; min-height: 100vh; } /* Sidebar sticks to the viewport so when the page scrolls (document-level * scrollbar on the right), the nav stays in view. */ .layout > .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } .sidebar { border-right: 1px solid var(--line); padding: 1.5rem 1rem; background: var(--surface); } .sidebar h1 { font-size: 1rem; margin: 0 0 1.5rem 0.5rem; letter-spacing: 0.02em; } .sidebar h1 .sub { color: var(--muted); font-weight: 400; font-size: 0.8rem; display: block; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { padding: 0.5rem 0.75rem; border-radius: var(--radius); color: var(--fg); } .nav a.active { background: var(--accent-bg); color: var(--accent); font-weight: 500; } .nav a:hover:not(.active) { background: var(--surface-hover); text-decoration: none; } .content { padding: 2rem 2.5rem; /* Full width — every tab uses the entire space next to the sidebar. */ } /* Agents (chat) opts in to viewport-fill so chat panes can size themselves * instead of scrolling at document level. Other tabs grow naturally and the * document scrollbar appears on the right when content is long. */ .content--full, .content--full > div { display: flex; flex-direction: column; min-height: calc(100vh - 4rem); } .content--full > div { flex: 1; min-height: 0; } h2 { margin-top: 0; font-size: 1.5rem; } .muted { color: var(--muted); } .row { display: flex; gap: 0.75rem; align-items: center; } .col { display: flex; flex-direction: column; gap: 0.75rem; } .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; } label { display: block; font-size: 0.875rem; color: var(--muted); margin-bottom: 0.25rem; } input[type=text], input[type=password], input[type=email], textarea, select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: var(--surface); color: var(--fg); } textarea { min-height: 120px; font-family: ui-monospace, "JetBrains Mono", Consolas, monospace; } button { padding: 0.5rem 1rem; border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: var(--radius); cursor: pointer; font: inherit; } button.secondary { background: var(--surface); color: var(--accent); } button:disabled { opacity: 0.5; cursor: not-allowed; } .badge { display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; background: var(--accent-bg); color: var(--accent); } .badge.ok { background: var(--badge-ok-bg); color: var(--ok); } .badge.warn { background: var(--badge-warn-bg); color: var(--warn); } .badge.err { background: var(--badge-err-bg); color: var(--err); } .steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; } .steps .step { flex: 1; padding: 0.5rem; text-align: center; border-radius: var(--radius); background: var(--step-bg); color: var(--muted); font-size: 0.875rem; } .steps .step.active { background: var(--accent); color: #fff; } .steps .step.done { background: var(--step-done-bg); color: var(--ok); } table { width: 100%; border-collapse: collapse; } th, td { padding: 0.5rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line); } th { font-size: 0.75rem; text-transform: uppercase; color: var(--muted); letter-spacing: 0.05em; } /* ─── Chat ─────────────────────────────────────────── */ .chat-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1rem; /* Fill remaining space in .content after the H2 heading. Old code used * `height: calc(100vh - 4rem)` which forgot about the H2 (~41px) + .content * padding (60px) → caused 41px overshoot inside .content scroll area. */ flex: 1; min-height: 0; } .chat-sidebar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; } .chat-sidebar-head { padding: 0.75rem; border-bottom: 1px solid var(--line); } .chat-sidebar-head button { width: 100%; } .chat-list { overflow-y: auto; flex: 1; padding: 0.5rem; } .chat-list-item { padding: 0.5rem 0.75rem; border-radius: var(--radius); cursor: pointer; margin-bottom: 2px; } .chat-list-item:hover { background: var(--surface-hover); } .chat-list-item.active { background: var(--accent-bg); } .chat-list-item .title { font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .chat-list-item .sub { font-size: 0.75rem; color: var(--muted); } .chat-main { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; overflow: hidden; } .chat-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .chat-header .title { font-weight: 600; flex: 1; } .chat-header select { width: auto; max-width: 200px; } .chat-messages { flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.875rem; } .bubble { max-width: 78%; padding: 0.625rem 0.875rem; border-radius: 14px; white-space: pre-wrap; word-wrap: break-word; line-height: 1.55; font-size: 0.95rem; } .bubble.user { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; } .bubble.assistant { align-self: flex-start; background: var(--bubble-asst); color: var(--fg); border-bottom-left-radius: 4px; } .bubble.assistant .bubble-meta { display: block; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); font-size: 0.7rem; color: var(--muted); } .typing { align-self: flex-start; background: var(--bubble-asst); padding: 0.625rem 0.875rem; border-radius: 14px; border-bottom-left-radius: 4px; color: var(--muted); font-size: 0.875rem; font-style: italic; } .chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); text-align: center; padding: 2rem; } .chat-composer { border-top: 1px solid var(--line); padding: 0.75rem; display: flex; gap: 0.5rem; align-items: flex-end; } .chat-composer textarea { flex: 1; min-height: 44px; max-height: 200px; resize: none; font-family: inherit; } .skill-grid-mini { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; max-width: 480px; margin: 1rem auto 0; } .skill-grid-mini button { text-align: left; padding: 0.5rem 0.75rem; font-size: 0.875rem; } /* ─── Theme toggle ─────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--fg); border-radius: 999px; cursor: pointer; font-size: 0.95rem; line-height: 1; } .theme-toggle:hover { background: var(--surface-hover); } .theme-toggle.floating { position: fixed; top: 16px; right: 16px; z-index: 50; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,0.1); } /* Smooth transitions when switching theme. */ html, body, .sidebar, .card, .chat-sidebar, .chat-main, .bubble, button { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } /* ─── Mobile responsive ──────────────────────────────── * Hidden by default — only surface on small screens via @media below. * Hamburger opens an off-canvas sidebar; backdrop dims the main area and * closes the menu on tap. */ .mobile-menu-btn, .mobile-close-btn, .sidebar-backdrop { display: none; } @media (max-width: 768px) { /* Single-column layout — content fills width, sidebar slides over it. */ .layout { grid-template-columns: 1fr; } /* Off-canvas sidebar: fixed left, slides in via transform. The position:fixed * also overrides the desktop `position:sticky` rule so it doesn't interfere. */ .layout > .sidebar { position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 280px; max-width: 85vw; transform: translateX(-100%); transition: transform 0.2s ease; z-index: 100; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.12); } .layout.sidebar-open > .sidebar { transform: translateX(0); } /* Backdrop dims the page when sidebar is open and intercepts taps to close. */ .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } .layout.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } /* Hamburger — top-left, fixed. Stays visible while scrolling. */ .mobile-menu-btn { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 12px; left: 12px; width: 40px; height: 40px; padding: 0; background: var(--surface); border: 1px solid var(--line); color: var(--fg); border-radius: 8px; font-size: 1.25rem; line-height: 1; z-index: 50; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .mobile-close-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--line); color: var(--fg); border-radius: 999px; font-size: 0.95rem; line-height: 1; } /* Make room for the hamburger on top of the content. */ .content { padding: 3.5rem 1rem 1.5rem; } .content--full, .content--full > div { min-height: calc(100vh - 4rem); } /* Chat: stack chat-sidebar above chat-main; cap chat list height. */ .chat-layout { grid-template-columns: 1fr; gap: 0.75rem; } .chat-sidebar { max-height: 220px; } /* Bubbles wider so 1-2 sentences don't wrap awkwardly. */ .bubble { max-width: 92%; } /* Skill grid mini → 1 col on phones. */ .skill-grid-mini { grid-template-columns: 1fr; } /* iOS Safari zooms input on focus when font-size < 16px — bump to prevent. */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], input[type=url], textarea, select { font-size: 16px; } /* Theme-toggle floating (auth screens) — keep in top-right but smaller. */ .theme-toggle.floating { top: 12px; right: 12px; } /* Tables — let them scroll horizontally instead of squashing. */ .table-wrap, table { display: block; overflow-x: auto; white-space: nowrap; } th, td { padding: 0.4rem 0.5rem; font-size: 0.875rem; } h2 { font-size: 1.25rem; } .steps { gap: 0.25rem; } .steps .step { padding: 0.4rem 0.25rem; font-size: 0.7rem; } .card { padding: 1rem; } /* Chat header wraps; allow the model select to take its own row. */ .chat-header select { max-width: 100%; width: 100%; } } @media (max-width: 480px) { .content { padding: 3.5rem 0.75rem 1rem; } .card { padding: 0.875rem; } .chat-messages { padding: 0.75rem; } .chat-composer { padding: 0.5rem; } .bubble { font-size: 0.95rem; padding: 0.5rem 0.75rem; max-width: 95%; } /* Stack composer vertically on very narrow screens so the send button gets * full width below the textarea instead of squeezing alongside. */ .chat-composer { flex-direction: column; align-items: stretch; } .chat-composer button { width: 100%; } }