:root { /* Single dark theme; palette shared with the YAM Market ledger (markets.css). */ color-scheme: dark; --bg: #10151e; --sidebar: #10151e; --sidebar-hover: #202836; --surface: #171d28; --surface-soft: #1d2431; --surface-softer: #242c3a; --surface-hover: #202836; --tide: #51b9c2; --text: #f1f4f9; --muted: #abb5c4; --faint: #7f8a9b; --border: #303a4a; --border-strong: #465267; --button: #8299ef; --button-text: #10151e; --accent: #8299ef; --accent-strong: #a6b6f7; --on-accent: #10151e; --success: #65c7cf; --warning: #e3ad56; --danger: #e07886; --link: #8299ef; --chart-grid: #303a4a; --chart-focus: #9aacf5; --shadow: 0 12px 40px rgba(0, 0, 0, 0.28); --content-width: 768px; --table-min-width: 26rem; --font-mono: "SFMono-Regular", "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace; font-family: "Avenir Next", Avenir, "Century Gothic", Futura, Montserrat, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; color: var(--text); background: var(--bg); } [hidden] { display: none !important; } button, input, select, textarea { font: inherit; } button { cursor: pointer; } .auth-gate { display: grid; min-height: 100vh; /* Match the visible viewport on mobile browsers with collapsing URL bars; identical to 100vh on desktop. */ min-height: 100dvh; place-items: center; padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: radial-gradient(circle at 50% 34%, color-mix(in srgb, #5865f2 12%, transparent), transparent 32%), var(--bg); } .auth-card { width: min(430px, 100%); padding: 42px 36px 34px; text-align: center; } .auth-logo { width: 78px; height: 78px; margin-bottom: 22px; object-fit: contain; } .auth-eyebrow { margin: 0 0 10px; color: var(--muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .auth-card h1 { margin: 0; font-size: clamp(1.8rem, 7vw, 2.5rem); font-weight: 650; letter-spacing: -0.045em; } .auth-detail { max-width: 34ch; margin: 14px auto 0; color: var(--muted); font-size: 0.98rem; line-height: 1.55; } .auth-error { margin: 18px 0 0; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--border)); border-radius: 12px; padding: 11px 12px; color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); font-size: 0.86rem; line-height: 1.45; } .discord-login { display: inline-flex; align-items: center; justify-content: center; width: min(290px, 100%); min-height: 48px; margin-top: 24px; border-radius: 12px; color: #fff; background: #5865f2; box-shadow: 0 8px 24px rgba(88, 101, 242, 0.22); font-weight: 650; text-decoration: none; transition: background 140ms ease, transform 140ms ease; } .discord-login:hover { background: #4752c4; transform: translateY(-1px); } .discord-login:focus-visible { outline: 3px solid color-mix(in srgb, #5865f2 38%, transparent); outline-offset: 3px; } .auth-requirement { margin: 16px 0 0; color: var(--faint); font-size: 0.74rem; } body.auth-pending .shell, body.auth-required .shell, body.authenticated .auth-gate { display: none; } /* iOS reports a `vh`/`dvh` for home-screen apps that disagrees with the layout viewport in both directions: too tall opens the document scrolled down (header under the status bar), too short leaves dead space under the composer. and are already exactly the layout viewport, so the shell takes its height from them and neither can happen. Scoped to the console: app.css is also loaded by share.html and the admin pages, which scroll normally and must not inherit the lock. */ body.console-page.authenticated { overflow: hidden; overscroll-behavior: none; } .shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; /* The shell is the whole page when authenticated; clipping here keeps the body from ever becoming a scroll container, so the header stays fixed and only the panels' own overflow areas scroll. */ overflow: hidden; background: var(--bg); } .shell-body { display: grid; grid-template-columns: 260px minmax(0, 1fr); /* Explicit row so tall panel content (long transcripts) can never expand the row past the viewport — without this the implicit `auto` row grows to content height and the sidebar + chat scroll together as one page. */ grid-template-rows: minmax(0, 1fr); min-height: 0; overflow: hidden; } /* Flex rather than fixed grid rows: the mobile drawer adds a page-links row above the chats and an actions row below them, and those two are absent on desktop. Only the chat list flexes, so every other row keeps its natural height however many of them exist. */ .sidebar { display: flex; flex-direction: column; height: 100%; padding: 12px; background: var(--sidebar); border-right: 1px solid var(--border); overflow: hidden; } /* Page destinations and the drawer's action group: header chrome on desktop, part of the single mobile drawer below 861px. */ .sidebar-site-nav, .sidebar-site-actions { display: none; } /* Mobile-only scrim for the overlay sidebar; the ≤860px media block turns it on while the sidebar is open. Display:none keeps it out of the desktop shell-body grid entirely. */ .sidebar-backdrop { display: none; } .sidebar-header { display: flex; align-items: center; gap: 4px; padding-bottom: 12px; } /* ChatGPT-style icon buttons on the sidebar's top row (search + collapse). */ .sidebar-icon-button { display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; min-height: 36px; padding: 0; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: transparent; } .sidebar-icon-button:hover { color: var(--text); background: var(--sidebar-hover); } .sidebar-icon-button svg, .rail-button svg, .search-input-row svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .new-chat-button, .ghost-button, .history-controls button, .sidebar-button { border: 1px solid transparent; border-radius: 10px; color: var(--text); background: transparent; } .new-chat-button { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0 12px; text-align: left; font-weight: 500; } .new-chat-button:hover, .ghost-button:hover, .history-controls button:hover, .sidebar-button:hover { background: var(--sidebar-hover); } /* The chat list is the only part of the sidebar that flexes. Its own grid has exactly one row per child — a stale fourth row used to hand the leftover height to nothing and cut the list short. */ .sidebar-section { display: grid; grid-template-rows: auto auto minmax(0, 1fr); flex: 1 1 auto; min-height: 0; overflow: hidden; } .sidebar-admin { padding: 0 8px 8px; } .sidebar-admin-link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 0.86rem; font-weight: 500; } .sidebar-admin-link:hover { color: var(--text); background: var(--sidebar-hover); } .sidebar-admin-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.85; } .empty-logo, .message-label { display: grid; place-items: center; border-radius: 999px; color: var(--on-accent); background: var(--accent); font-weight: 700; } .avatar-image { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; } .empty-logo.has-image, .message-label.has-image { overflow: hidden; border: 1px solid var(--border); background: var(--surface); } .empty-logo.yam-logo, .message-label.yam-logo { border-color: transparent; background: transparent; } .yam-logo .avatar-image { object-fit: contain; } .chat-panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; min-width: 0; background: var(--surface); container-type: inline-size; } /* Shared top header. The rules below are copied verbatim from the markets surface (markets.css) with only the variable names mapped to this stylesheet's palette, so both surfaces render a pixel-identical header. */ .site-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; /* Keep the header clear of the iOS status bar in a home-screen app. The inset is 0 in a normal browser, so this is unconditional on purpose; see site-nav.css for why the `display-mode: standalone` gate was dropped. Padding longhands only — a shorthand here resets padding-top. */ min-height: calc(62px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); padding-right: max(clamp(18px, 3.5vw, 54px), env(safe-area-inset-right)); padding-bottom: 0; padding-left: max(clamp(18px, 3.5vw, 54px), env(safe-area-inset-left)); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(16px); /* markets.css sets these on body; scope them here so the wordmark and header text metrics match the ledger exactly. */ font-size: 15px; line-height: 1.45; } .site-header svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .site-header .sidebar-button { display: none; min-height: 36px; padding: 0 10px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; } /* Keep the brand glued to the left (next to the mobile menu button) instead of letting space-between center it between the menu and the actions. */ .site-header .brand { margin-right: auto; } .brand-mark { display: block; width: 29px; height: 29px; border-radius: 50%; object-fit: cover; } .brand-name { letter-spacing: 0.08em; font-weight: 800; } .brand-divider { width: 1px; height: 18px; background: var(--border-strong); } .brand-section { color: var(--muted); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; } .header-actions { display: flex; align-items: center; gap: 12px; } .member-avatar { display: grid; width: 26px; height: 26px; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.72rem; font-weight: 750; } .member-avatar img { width: 100%; height: 100%; object-fit: cover; } .member-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 880px) { .site-header { padding-right: max(18px, env(safe-area-inset-right)); padding-left: max(18px, env(safe-area-inset-left)); } .member-name { display: none; } } @media (max-width: 680px) { .brand-divider, .brand-section { display: none; } .site-header { padding-right: max(12px, env(safe-area-inset-right)); padding-left: max(12px, env(safe-area-inset-left)); } .header-actions { gap: 8px; } } /* Very narrow phones: keep every header action reachable. The logo alone remains the home link, and the ledger link gets a shorter label. */ @media (max-width: 520px) { .brand-name { display: none; } .site-header .brand { gap: 0; } .header-actions { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; padding-block: 6px; } } .ghost-button { min-height: 36px; padding: 0 12px; color: var(--muted); } .messages { min-height: 0; overflow: auto; /* Reaching the end of the transcript must not chain the scroll to the page or any other panel. */ overscroll-behavior: contain; padding: 22px 16px 26px; } .empty-state { display: grid; justify-items: center; align-content: center; gap: 16px; min-height: 100%; max-width: var(--content-width); margin: 0 auto; text-align: center; } .empty-logo { width: 38px; height: 38px; font-size: 1rem; } .empty-state h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.35rem); font-weight: 600; letter-spacing: -0.03em; } .empty-state p { max-width: 520px; margin: 0; color: var(--muted); line-height: 1.5; } .message { display: grid; grid-template-columns: 32px minmax(0, var(--content-width)); justify-content: center; align-items: start; column-gap: 16px; row-gap: 2px; padding: 12px 0; } .message.user { grid-template-columns: minmax(0, var(--content-width)) 32px; } .message.assistant { background: transparent; } .message-label { width: 32px; height: 32px; align-self: start; font-size: 0.84rem; } .message.user .message-label { grid-column: 2; grid-row: 1; } .message-body { min-width: 0; max-width: var(--content-width); white-space: pre-wrap; line-height: 1.65; overflow-wrap: anywhere; } .message.user .message-body { grid-column: 1; grid-row: 1; justify-self: end; width: fit-content; max-width: min(82%, 44rem); padding: 10px 14px; border-radius: 16px 16px 4px; background: var(--surface-soft); } .message-meta { grid-column: 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; min-width: 0; } .message.user .message-meta { grid-column: 1; justify-self: end; justify-content: flex-end; max-width: min(82%, 44rem); } .message-time { width: fit-content; color: var(--muted); font-size: 0.72rem; line-height: 1.3; } .clarification-card { white-space: normal; } .clarification-card h3 { margin: 0; font-size: 1rem; font-weight: 650; } .clarification-card > p { margin: 2px 0 18px; color: var(--muted); font-size: 0.86rem; } .clarification-question { margin: 0; padding: 14px 0; border: 0; border-top: 1px solid var(--border); } .clarification-question legend { margin-bottom: 9px; padding: 0; color: var(--text); font-size: 0.84rem; font-weight: 600; } .clarification-choices { display: flex; flex-wrap: wrap; gap: 7px; } .clarification-choice { min-height: 34px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 9px; color: var(--muted); background: var(--surface); transition: border-color 120ms ease, background 120ms ease, color 120ms ease; } .clarification-choice:hover:not(:disabled) { color: var(--text); border-color: var(--text); } .clarification-choice:disabled { cursor: default; } .clarification-choice.selected { color: var(--button-text); border-color: var(--button); background: var(--button); } .clarification-choice:focus-visible, .clarification-submit:focus-visible, .clarification-custom:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } .clarification-custom { display: block; max-width: 320px; margin-top: 10px; border-radius: 9px; } .clarification-custom[hidden] { display: none; } .yield-more-filters { margin: 8px 0 12px; border-top: 1px solid var(--border); } .yield-more-filters > summary { padding: 13px 0; color: var(--muted); cursor: pointer; font-size: 0.86rem; font-weight: 600; } .yield-exclusion-field { display: grid; gap: 7px; padding: 10px 0; color: var(--text); font-size: 0.84rem; font-weight: 600; } .yield-exclusion-field input { max-width: 440px; border-radius: 9px; } .yield-preference-summary { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; color: var(--text); background: var(--surface); font-size: 0.86rem; } .yield-preference-actions { display: flex; gap: 8px; } .yield-preference-actions button { padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text); background: transparent; } .yield-preference-summary[hidden], .yield-preference-actions[hidden], .yield-preference-controls[hidden] { display: none; } .clarification-submit { min-height: 38px; margin-top: 5px; padding: 0 16px; border: 0; border-radius: 9px; color: var(--button-text); background: var(--button); font-weight: 650; } .clarification-submit:disabled { cursor: default; opacity: 0.4; } .message-body.markdown { white-space: normal; } .message-body.markdown > *:first-child { margin-top: 0; } .message-body.markdown > *:last-child { margin-bottom: 0; } .message-body.markdown p { margin: 0 0 0.85em; } .message-body.markdown h1, .message-body.markdown h2, .message-body.markdown h3, .message-body.markdown h4, .message-body.markdown h5, .message-body.markdown h6 { margin: 1.2em 0 0.5em; line-height: 1.3; font-weight: 600; } .message-body.markdown h1 { font-size: 1.45rem; } .message-body.markdown h2 { font-size: 1.25rem; } .message-body.markdown h3 { font-size: 1.1rem; } .message-body.markdown h4, .message-body.markdown h5, .message-body.markdown h6 { font-size: 1rem; } .message-body.markdown ul, .message-body.markdown ol { margin: 0 0 0.85em; padding-left: 1.5em; } .message-body.markdown li { margin: 0.2em 0; } .message-body.markdown a { color: var(--link); text-decoration: underline; overflow-wrap: anywhere; } .message-body.markdown .citation-chip { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-width: 24px; min-height: 24px; margin: 0 0.08em; padding: 0.12em 0.58em; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-soft); text-decoration: none; font-size: 0.78em; font-weight: 600; line-height: 1.2; vertical-align: 0.08em; overflow-wrap: anywhere; transition: border-color 120ms ease, color 120ms ease, background 120ms ease; } .message-body.markdown .citation-chip:hover, .message-body.markdown .citation-chip[aria-expanded="true"] { border-color: var(--border-strong); color: var(--text); background: var(--surface-softer); text-decoration: none; } .message-body.markdown .citation-chip:focus-visible { outline: 2px solid var(--chart-focus); outline-offset: 2px; } .message-source-preview { display: grid; gap: 8px; width: min(100%, 560px); margin: 10px 0 6px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface-soft); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16); font-size: 0.84rem; line-height: 1.45; } .message-body.markdown .source-row > .message-source-preview { grid-column: 1 / -1; width: 100%; } .message-source-preview.is-loading, .message-source-preview.is-error { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); } .message-source-preview-header, .message-source-preview-meta { display: flex; justify-content: space-between; gap: 12px; } .message-source-preview-header { align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--border); } .message-source-preview-meta { align-items: center; } .message-source-preview-author { display: flex; align-items: center; gap: 8px; min-width: 0; } .message-source-preview-author strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .message-source-preview-avatar { display: grid; width: 22px; height: 22px; flex: 0 0 auto; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.68rem; font-weight: 750; } .message-source-preview-avatar img { width: 100%; height: 100%; object-fit: cover; } .message-source-preview-header span, .message-source-preview-meta time { color: var(--muted); font-size: 0.76rem; } .message-source-preview-content { margin: 0 !important; white-space: pre-wrap; overflow-wrap: anywhere; } .message-source-preview-attachments { display: flex; flex-wrap: wrap; gap: 8px; } .message-source-preview-attachment-thumb { display: block; width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); } .message-body.markdown .message-source-open { width: max-content; color: var(--muted); font-size: 0.76rem; font-weight: 600; text-decoration: none; } .message-body.markdown .message-source-open:hover { color: var(--text); text-decoration: underline; } .message-body.markdown .sources-disclosure { margin: 1.2em 0 0; } .message-body.markdown .sources-summary { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); background: var(--surface-soft); cursor: pointer; font-size: 0.82rem; font-weight: 600; line-height: 1; list-style: none; user-select: none; } .message-body.markdown .sources-summary::-webkit-details-marker { display: none; } .message-body.markdown .sources-summary:hover { border-color: var(--border-strong); background: var(--surface-softer); } .message-body.markdown .sources-summary:focus-visible { outline: 2px solid var(--chart-focus); outline-offset: 2px; } .message-body.markdown .sources-icon { width: 14px; height: 14px; flex: 0 0 auto; } .message-body.markdown .sources-chevron { width: 6px; height: 6px; margin: -3px 1px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 120ms ease, margin 120ms ease; } .message-body.markdown .sources-disclosure[open] .sources-chevron { margin: 3px 1px 0 2px; transform: rotate(225deg); } .message-body.markdown .sources-list { display: grid; gap: 8px; margin: 10px 0 0 !important; padding: 0 !important; list-style: none; } .message-body.markdown .source-row { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 9px; min-width: 0; margin: 0 !important; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-soft); } .message-body.markdown .source-badge { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); background: var(--surface-softer); font-size: 0.72rem; font-weight: 650; line-height: 1; } .message-body.markdown .source-url { min-width: 0; text-decoration: none; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.45; overflow-wrap: anywhere; } .message-body.markdown .source-url:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .message-body.markdown .citation-chip { transition: none; } .message-body.markdown .sources-chevron { transition: none; } } @media (pointer: coarse) { .message-body.markdown .citation-chip { min-width: 32px; min-height: 32px; margin: 0.12em 0.1em; padding-inline: 0.7em; } } .message-body.markdown code { padding: 0.12em 0.36em; border-radius: 6px; background: var(--surface-softer); font-family: var(--font-mono); font-size: 0.86em; } .message-body.markdown pre { max-width: 100%; margin: 0 0 0.85em; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-softer); overflow: auto; white-space: pre; } .message-body.markdown .code-block { margin: 0 0 0.85em; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .message-body.markdown .code-block pre { margin: 0; border: 0; border-radius: 0; } .code-block-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 8px 4px 12px; background: var(--surface-soft); border-bottom: 1px solid var(--border); } .code-lang { color: var(--muted); font-size: 0.72rem; letter-spacing: 0.02em; text-transform: lowercase; } .code-copy { border: 0; border-radius: 6px; padding: 3px 8px; color: var(--muted); background: transparent; font-size: 0.72rem; } .code-copy:hover { color: var(--text); background: var(--sidebar-hover); } .code-copy.copied { color: var(--success); } .message-body.markdown pre code { padding: 0; border-radius: 0; background: transparent; font-size: 0.82rem; } .message-body.markdown blockquote { margin: 0 0 0.85em; padding: 0.1em 0 0.1em 1em; border-left: 3px solid var(--border-strong); color: var(--muted); } .message-body.markdown table { width: auto; max-width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9rem; } .message-body.markdown .table-scroll { max-width: 100%; margin: 0 0 0.85em; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); scrollbar-width: thin; } .message-body.markdown > .table-scroll { width: fit-content; min-width: min(100%, var(--table-min-width)); max-width: 100%; } .message-body.markdown > .table-scroll table { width: auto; min-width: min(100%, var(--table-min-width)); } .message-body.markdown .table-scroll:focus { outline: 2px solid var(--chart-focus); outline-offset: 2px; } .message-body.markdown th, .message-body.markdown td { padding: 5px 8px; border: 1px solid var(--border); text-align: left; vertical-align: top; } .message-body.markdown th { background: var(--surface-soft); font-weight: 600; } .message-body.markdown .table-scroll th, .message-body.markdown .table-scroll td { border-width: 0 1px 1px 0; white-space: nowrap; } .message-body.markdown > .table-scroll th + th, .message-body.markdown > .table-scroll td + td, .message-body.markdown > .table-scroll th:first-child:last-child, .message-body.markdown > .table-scroll td:first-child:last-child { white-space: normal; min-width: 10ch; max-width: 36ch; } .message-body.markdown .table-scroll tr:last-child td { border-bottom-width: 0; } .message-body.markdown .table-scroll th:last-child, .message-body.markdown .table-scroll td:last-child { border-right-width: 0; } .message-body.markdown hr { margin: 1.2em 0; border: 0; border-top: 1px solid var(--border); } .message-body.markdown img { max-width: 100%; } .message-body.markdown .math { font-family: var(--font-mono); } .message-body.markdown .math-display { display: block; margin: 0.6em 0 0.85em; padding: 10px 14px; overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-softer); text-align: center; } .message-body.markdown .math-inline { display: inline-block; vertical-align: middle; } .message-body.markdown .katex-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 0.15em; line-height: 1.15; } .message-body.markdown .katex-frac .frac-num, .message-body.markdown .katex-frac .frac-den { padding: 0 0.2em; } .message-body.markdown .katex-frac .frac-num { border-bottom: 1px solid currentColor; } .message-body.markdown .katex-sqrt { display: inline-flex; align-items: flex-start; vertical-align: middle; } .message-body.markdown .katex-sqrt .sqrt-radical { margin-right: 0.05em; } .message-body.markdown .katex-sqrt .sqrt-body { border-top: 1px solid currentColor; padding: 0 0.15em; } .message-body.markdown .math sub, .message-body.markdown .math sup { font-size: 0.75em; } .message-body.markdown .math-fallback { white-space: pre-wrap; } .visual-image, .yam-chart { max-width: 100%; margin: 1em 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } .visual-image > a { display: block; padding: 10px; text-align: center; background: var(--surface-softer); } .visual-image img { display: block; width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; border-radius: 8px; } .visual-image figcaption { padding: 9px 12px; color: var(--muted); font-size: 0.78rem; line-height: 1.45; } .visual-image.image-error > a { padding: 24px 12px; color: var(--muted); text-decoration: none; } .yam-chart:focus { outline: 2px solid var(--chart-focus); outline-offset: 2px; } .chart-title { padding: 14px 16px 0; color: var(--text); font-size: 1rem; font-weight: 650; line-height: 1.35; } .yam-chart svg { display: block; width: 100%; height: auto; min-height: 260px; color: var(--text); } .flow-steps { display: flex; gap: 34px; margin: 0 !important; padding: 24px 18px 28px !important; overflow-x: auto; counter-reset: flow-step; list-style: none; } .flow-steps li { position: relative; display: flex; flex: 1 0 130px; min-width: 0; margin: 0 !important; counter-increment: flow-step; } .flow-steps li::before { position: absolute; top: -11px; left: 10px; z-index: 1; display: grid; place-items: center; width: 23px; height: 23px; border: 2px solid var(--surface); border-radius: 999px; color: var(--on-accent); background: var(--accent); content: counter(flow-step); font-size: 0.68rem; font-weight: 700; } .flow-steps li:not(:last-child)::after { position: absolute; top: 50%; right: -25px; color: var(--muted); content: "\2192"; font-size: 1.25rem; line-height: 1; transform: translateY(-50%); } .flow-step { display: grid; align-content: center; gap: 5px; width: 100%; min-height: 90px; padding: 17px 12px 12px; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface-soft); text-align: center; } .flow-step strong { color: var(--text); font-size: 0.84rem; line-height: 1.3; overflow-wrap: anywhere; } .flow-step span { color: var(--muted); font-size: 0.72rem; line-height: 1.4; overflow-wrap: anywhere; } .chart-grid { stroke: var(--chart-grid); stroke-width: 1; } .chart-tick, .chart-label, .chart-axis-title { fill: var(--muted); font-family: inherit; font-size: 11px; } .chart-label { font-size: 10.5px; } .chart-axis-title { fill: var(--text); font-size: 12px; font-weight: 600; } .chart-mark:focus { outline: none; filter: brightness(1.15) drop-shadow(0 0 2px var(--chart-focus)); } .chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: -8px 16px 10px !important; padding: 0 !important; list-style: none; } .chart-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0 !important; color: var(--muted); font-size: 0.76rem; } .chart-legend li span { width: 9px; height: 9px; border-radius: 3px; } .chart-footer { padding: 10px 16px 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.76rem; line-height: 1.45; } .chart-footer p { margin: 4px 0 0 !important; } .chart-data { margin: 0 !important; padding: 0 16px 12px; } .chart-data summary { min-height: 30px; padding-top: 6px; } .chart-data .table-scroll { margin-top: 6px; max-height: 280px; overflow: auto; } .chart-error { margin: 0 0 6px !important; padding: 8px 10px; border-left: 3px solid var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); font-size: 0.82rem; } .composer { padding: 12px 16px 18px; background: linear-gradient(180deg, transparent, var(--surface) 24%); } .composer-box { max-width: var(--content-width); margin: 0 auto; border: 1px solid var(--border-strong); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } textarea { display: block; width: 100%; min-height: 58px; max-height: 220px; padding: 18px 18px 8px; border: 0; resize: vertical; color: var(--text); background: transparent; line-height: 1.45; outline: none; } textarea::placeholder { color: var(--faint); } .composer-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px 8px 14px; } select, input { min-height: 32px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-soft); outline: none; } select { padding: 0 28px 0 10px; } input { width: 100%; padding: 0 12px; } select:focus, input:focus { border-color: var(--border-strong); background: var(--surface); } .send-button { min-width: 54px; min-height: 36px; margin-left: auto; border: 0; border-radius: 999px; color: var(--button-text); background: var(--button); font-weight: 600; } .attach-button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-soft); cursor: pointer; } .attach-button:hover { color: var(--text); border-color: var(--border-strong); } .composer-mode { display: inline-flex; flex-shrink: 0; align-items: stretch; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface-soft); } .composer-mode-button { min-height: 36px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 0.78rem; font-weight: 650; white-space: nowrap; cursor: pointer; } .composer-mode-button:hover { color: var(--text); } .composer-mode-button[aria-checked="true"] { background: var(--surface-softer); color: var(--text); } .composer-mode-button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .composer-mode-button:disabled { cursor: not-allowed; opacity: 0.45; } .composer-mode-button:disabled:hover { color: var(--muted); } .composer.drag-over .composer-box { border-color: var(--button); } .composer-attachments { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; } .attachment-chip { position: relative; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-soft); } .attachment-chip.uploading { display: grid; place-items: center; color: var(--faint); } .attachment-thumb { width: 100%; height: 100%; object-fit: cover; display: block; } .attachment-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 999px; color: var(--on-accent, #fff); background: rgba(0, 0, 0, 0.55); font-size: 12px; line-height: 1; cursor: pointer; } .user-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .user-attachment-thumb { max-width: 180px; max-height: 140px; border-radius: 10px; border: 1px solid var(--border); object-fit: cover; } .send-button:disabled { cursor: wait; opacity: 0.45; } .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .section-heading h2 { margin: 0; color: var(--muted); font-size: 0.76rem; font-weight: 600; text-transform: none; } .section-heading span { color: var(--faint); font-size: 0.72rem; } .history-controls { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 8px; } .history-controls button { min-height: 30px; padding: 0 10px; font-size: 0.78rem; } .history-filter { position: relative; min-width: 0; } .history-controls .history-filter-button { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; border: 1px solid var(--border); background: var(--surface-soft); text-align: left; } .history-controls .history-filter-button:hover { background: var(--sidebar-hover); } .history-filter-button:focus-visible, .history-filter-button[aria-expanded="true"] { border-color: var(--border-strong); } .history-filter-button > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .history-filter-chevron { flex-shrink: 0; color: var(--muted); transition: transform 0.15s ease; } .history-filter-button[aria-expanded="true"] .history-filter-chevron { transform: rotate(180deg); } .history-filter-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); } .history-filter-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text); font-size: 0.78rem; white-space: nowrap; cursor: pointer; } .history-filter-option:hover, .history-filter-option:focus { background: var(--sidebar-hover); outline: none; } /* Reserve check space so labels stay aligned. */ .history-filter-option::after { content: ""; width: 1em; text-align: right; } .history-filter-option[aria-selected="true"]::after { content: "\2713"; } .history-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; align-content: start; /* Sized by the sidebar-section grid (its minmax(0, 1fr) row) instead of a hardcoded viewport calc, so it always fits under the site header. */ min-height: 0; overflow-x: hidden; overflow-y: auto; /* Reaching the end of the list must not chain the scroll to the page or the transcript. */ overscroll-behavior: contain; } .history-card { border-radius: 10px; padding: 10px; color: var(--text); background: transparent; cursor: pointer; } .history-card:hover { background: var(--sidebar-hover); } .history-card.active { background: var(--sidebar-hover); } .history-card:focus { outline: 2px solid var(--border-strong); outline-offset: -2px; } .history-card.empty { color: var(--faint); cursor: default; font-size: 0.82rem; } .history-card.empty:hover { background: transparent; } .history-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; } .history-heading strong { overflow: hidden; color: var(--text); font-size: 0.88rem; font-weight: 500; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .history-heading span { overflow: hidden; color: var(--faint); font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; } .history-meta { display: flex; gap: 5px; align-items: center; min-width: 0; } .history-status { font-style: normal; } .history-surface-icon { display: block; flex: 0 0 auto; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .history-card.error { color: var(--danger); overflow-wrap: anywhere; } .telemetry-panel { position: fixed; inset: 0 0 0 auto; z-index: 20; width: min(440px, 100vw); padding: 16px; overflow: auto; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -20px 0 50px rgba(0, 0, 0, 0.12); transform: translateX(100%); transition: transform 180ms ease; } body.debug-open .telemetry-panel { transform: translateX(0); } .debug-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .debug-header h2 { margin: 0; font-size: 1rem; } .debug-header p { margin: 4px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .run-picker-row { display: grid; gap: 6px; margin-bottom: 16px; } .run-picker-row select, .run-picker-row .yam-select, .run-picker-row .yam-select-trigger { width: 100%; min-height: 34px; border-radius: 10px; font-size: 0.8rem; } .run-context { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0; overflow: hidden; color: var(--faint); font-size: 0.76rem; line-height: 1.4; } .timeline, .tools { display: grid; gap: 8px; margin-bottom: 18px; } .timeline.compact { max-height: 240px; overflow: auto; } .event, .tool { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface-soft); } .event-title, .tool-title { display: flex; justify-content: space-between; gap: 10px; color: var(--text); font-size: 0.78rem; font-weight: 600; } .event p, .tool p, .tool-payload summary { margin: 6px 0 0; color: var(--muted); font-size: 0.78rem; line-height: 1.45; overflow-wrap: anywhere; } .tool-payload summary:hover, .tool-payload[open] summary { color: var(--text); } .tool-payload-body { max-height: 360px; } .tool.running { border-color: var(--warning); } .tool.done { border-color: var(--success); } .tool.error, .event.error { border-color: var(--danger); } details { margin-top: 8px; } summary { color: var(--muted); cursor: pointer; font-size: 0.76rem; } pre { max-height: 260px; overflow: auto; padding: 10px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); background: var(--surface); font-size: 0.74rem; white-space: pre-wrap; } .new-chat-button { display: flex; align-items: center; gap: 8px; } .new-chat-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; font-size: 1.05rem; line-height: 1; } .message-actions { display: flex; gap: 2px; opacity: 0; transition: opacity 120ms ease; } .message:hover .message-actions, .message:focus-within .message-actions, .message[data-recovery-action="1"] .message-actions, .message:has(.message-body.recoverable) .message-actions, .message-body.recoverable ~ .message-meta .message-actions { opacity: 1; } .message-action { border: 0; border-radius: 7px; padding: 1px 5px; color: var(--muted); background: transparent; font-size: 0.7rem; line-height: 1.4; } .message-action:hover { color: var(--text); background: var(--surface-softer); } .message-action.copied { color: var(--success); } .message-recovery-action { color: var(--accent-strong); border: 1px solid var(--border); padding-inline: 9px; } .message-body.error { color: var(--danger); } .message-body.notice { color: var(--muted); font-style: italic; } .typing { display: inline-flex; gap: 5px; align-items: center; height: 1.4em; } .typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: typing-bounce 1.2s infinite ease-in-out; } .typing span:nth-child(2) { animation-delay: 0.16s; } .typing span:nth-child(3) { animation-delay: 0.32s; } @keyframes typing-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } } .typing-status { margin-top: 6px; color: var(--faint); font-size: 0.78rem; line-height: 1.4; } .assistant-content { grid-column: 2; min-width: 0; max-width: var(--content-width); } .run-activity { width: min(100%, 42rem); margin: 0 0 12px; color: var(--muted); } .run-activity-summary { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 28px; padding: 3px 0; list-style: none; color: var(--muted); cursor: pointer; font-size: 0.82rem; line-height: 1.4; user-select: none; } .run-activity-summary::-webkit-details-marker { display: none; } .run-activity-summary:hover, .run-activity[open] > .run-activity-summary { color: var(--text); } .run-activity-summary:focus-visible { border-radius: 5px; outline: 2px solid var(--chart-focus); outline-offset: 3px; } .run-activity-indicator { position: relative; width: 12px; height: 12px; flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: 999px; opacity: 0.75; } .run-activity.is-live .run-activity-indicator { border-right-color: transparent; animation: activity-spin 0.85s linear infinite; } .run-activity.is-complete .run-activity-indicator::after { position: absolute; top: 2px; left: 3px; width: 4px; height: 2px; border-bottom: 1.5px solid currentColor; border-left: 1.5px solid currentColor; content: ""; transform: rotate(-45deg); } .run-activity.has-error .run-activity-indicator { color: var(--danger); } .run-activity.has-stopped .run-activity-indicator { color: var(--warning); } .run-activity.has-stopped .run-activity-indicator::after { display: none; } .run-activity-label.typing-status { margin: 0; color: inherit; font-size: inherit; line-height: inherit; } .run-activity-chevron { width: 6px; height: 6px; margin: -3px 2px 0 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: 0.7; transform: rotate(45deg); transition: transform 120ms ease, margin 120ms ease; } .run-activity[open] .run-activity-chevron { margin-top: 3px; transform: rotate(225deg); } .run-activity-list { position: relative; display: grid; gap: 9px; margin: 5px 0 2px 6px; padding: 3px 0 3px 17px; } .run-activity-list::before { position: absolute; top: 5px; bottom: 5px; left: 0; width: 1px; background: var(--border); content: ""; } .run-activity-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; } .run-activity-marker { position: absolute; top: 0.48em; left: -20px; width: 7px; height: 7px; border: 2px solid var(--bg); border-radius: 999px; background: var(--faint); box-sizing: content-box; } .run-activity-item.running .run-activity-marker, .run-activity-item.warning .run-activity-marker { background: var(--warning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warning) 18%, transparent); } .run-activity-item.done .run-activity-marker { background: var(--success); } .run-activity-item.error .run-activity-marker { background: var(--danger); } .run-activity-item-title { color: var(--text); font-size: 0.82rem; font-weight: 560; line-height: 1.35; } .run-activity-item-detail, .run-activity-empty { margin-top: 2px; color: var(--muted); font-size: 0.78rem; line-height: 1.45; overflow-wrap: anywhere; } .run-activity-empty.error { color: var(--danger); } @keyframes activity-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .typing span, .run-activity.is-live .run-activity-indicator { animation: none; } .run-activity-chevron { transition: none; } } .send-button.is-stop { background: var(--danger); color: var(--on-accent); } .scroll-bottom { position: absolute; left: 50%; bottom: 104px; z-index: 5; display: grid; place-items: center; width: 36px; height: 36px; transform: translateX(-50%); border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); font-size: 1rem; } .scroll-bottom[hidden] { display: none; } .history-group { padding: 12px 10px 4px; color: var(--faint); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; } .history-title-row { position: relative; display: flex; align-items: center; min-width: 0; } .history-title-row strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Rename/delete stay out of layout so resting titles get the full row width (ChatGPT-style). On hover/focus they overlay the right edge with a gradient fade over the truncated text. */ .history-controls-inline { position: absolute; top: 50%; right: 0; display: flex; align-items: center; gap: 2px; padding-left: 18px; background: linear-gradient(to right, transparent, var(--sidebar-hover) 45%); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 120ms ease; } .history-card:hover .history-controls-inline, .history-card:focus-within .history-controls-inline { opacity: 1; pointer-events: auto; } /* Tabbing onto the hidden buttons must reveal them against the same background the gradient fades into. */ .history-card:focus-within { background: var(--sidebar-hover); } .history-icon-btn { flex: 0 0 auto; border: 0; border-radius: 6px; padding: 2px 6px; color: var(--muted); background: transparent; font-size: 0.82rem; line-height: 1; } .history-icon-btn:hover { color: var(--text); background: var(--border); } .history-delete:hover { color: var(--danger); } .rename-input { width: 100%; min-height: 28px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 8px; color: var(--text); background: var(--surface); font-size: 0.86rem; } @media (max-width: 860px) { .shell-body { grid-template-columns: 1fr; } /* The chat sidebar is the one mobile drawer: page links on top, chats below. It always stays laid out (never `display: none`) so a swipe can drag it — `visibility` is what keeps the closed panel's destinations out of the tab order and the accessibility tree. Only the closing direction transitions it, so the panel stays visible while it slides away; transitioning it open would leave it unfocusable for the first frame and focus-on-open would silently no-op. */ .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(320px, 86vw); padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); transform: translateX(-100%); visibility: hidden; touch-action: pan-y pinch-zoom; transition: transform 200ms ease, visibility 200ms; } body.sidebar-open .sidebar { transform: translateX(0); visibility: visible; transition: transform 200ms ease; box-shadow: 24px 0 60px rgba(0, 0, 0, 0.35); } /* Scrim behind the overlay sidebar; tapping it closes the sidebar. It fades with the panel, so opacity — not `display` — carries the state. */ .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: color-mix(in srgb, #000 45%, transparent); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } /* While a finger owns the panel its inline transform is the animation. */ body.mobile-nav-dragging .sidebar { visibility: visible; } body.mobile-nav-dragging .sidebar, body.mobile-nav-dragging .sidebar-backdrop { transition: none; } /* Two columns: an admin sees seven destinations, and stacking them would push the chat list — the thing this drawer is mostly for — off screen. */ .sidebar-site-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); } .sidebar-site-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding-top: 8px; border-top: 1px solid var(--border); } .sidebar-site-nav .mobile-nav-link, .sidebar-site-actions .mobile-nav-action { display: flex; align-items: center; width: 100%; min-height: 38px; padding: 6px 10px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font: inherit; font-size: 0.86rem; font-weight: 500; text-align: left; text-decoration: none; } .sidebar-site-nav .mobile-nav-link:hover, .sidebar-site-actions .mobile-nav-action:hover { color: var(--text); background: var(--sidebar-hover); } .sidebar-site-nav .mobile-nav-link.is-current { color: var(--text); background: var(--sidebar-hover); cursor: default; } /* Keep the composer compact and let it sit right on the home-indicator safe area. Adding padding on top of the inset (rather than max()ing with it) left an obvious dead strip under the composer on notched phones. */ .composer { padding: 4px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); } /* The panel's own bottom padding stacks with the composer's inset. */ .chat-panel { padding-bottom: 0; } .composer-box { border-radius: 20px; } .composer textarea { min-height: 42px; max-height: 140px; padding: 11px 12px 3px; resize: none; /* Keep 16px on iOS so focusing the field does not zoom the viewport. */ font-size: 1rem; line-height: 1.35; } .composer-row { flex-wrap: nowrap; gap: 5px; padding: 3px 6px 6px; } .attach-button { width: 32px; height: 32px; flex: 0 0 32px; } .composer-mode { min-width: 0; } .composer-mode-button { min-height: 32px; padding: 0 clamp(7px, 2.2vw, 10px); font-size: 0.72rem; } .send-button { min-width: 50px; min-height: 32px; font-size: 0.9rem; } .scroll-bottom { bottom: 82px; } .messages { padding: 10px 8px 12px; } .message { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; padding: 8px 0; } .message.user { grid-template-columns: minmax(0, 1fr) 24px; } .message.user .message-body, .message.user .message-meta { max-width: 96%; } .message-label { width: 24px; height: 24px; } .message-body { font-size: 0.94rem; line-height: 1.55; } .message-body.markdown > .table-scroll { width: 100%; min-width: 0; overscroll-behavior-inline: contain; } .message-body.markdown > .table-scroll table { width: 100%; min-width: 0; table-layout: fixed; } .message-body.markdown .table-scroll th, .message-body.markdown .table-scroll td { min-width: 0; padding: 6px 7px; white-space: normal; overflow-wrap: anywhere; } .message-body.markdown .table-scroll tr > :first-child:nth-last-child(2) { width: 44%; } /* Wider tables remain horizontally scrollable instead of crushing three or more columns into the phone viewport. */ .message-body.markdown > .table-scroll table:has(thead tr > :nth-child(3)) { min-width: 28rem; table-layout: auto; } .message-body.markdown > .table-scroll table:has(thead tr > :nth-child(3)) :is(th, td) { min-width: 9ch; } .yam-chart { margin-inline: -4px; } .yam-chart svg { min-width: 620px; } .yam-chart { overflow-x: auto; } .chart-title, .chart-footer, .chart-data { position: sticky; left: 0; width: min(100%, calc(100vw - 76px)); } .visual-image figcaption { overflow-wrap: anywhere; } .flow-steps { flex-direction: column; gap: 30px; overflow: visible; } .flow-steps li { flex-basis: auto; width: 100%; } .flow-steps li:not(:last-child)::after { top: auto; right: 50%; bottom: -24px; content: "\2193"; transform: translateX(50%); } } /* Floating controls shown at the top-left of the chat area while the sidebar is collapsed (ChatGPT-style). Hidden by default; only the desktop collapsed state reveals them, so the mobile overlay flow is untouched. */ .sidebar-rail { position: absolute; top: 10px; left: 12px; z-index: 15; display: none; gap: 4px; } .rail-button { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid transparent; border-radius: 10px; color: var(--muted); background: color-mix(in srgb, var(--surface) 78%, transparent); } .rail-button:hover { color: var(--text); background: var(--sidebar-hover); } /* Floating "Share" control at the top-right of the chat area, mirroring the sidebar-rail on the opposite corner. Lives with the conversation it acts on (not the global site-header) so every subpage's top menu stays identical; visibility is still driven by #share-chat's own `hidden` attribute (app.js toggles it once a chat session exists). */ .chat-share-rail { position: absolute; top: 10px; right: 16px; z-index: 15; } .chat-share-rail .share-chat-button { min-height: 36px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); background: var(--surface); box-shadow: var(--shadow); text-decoration: none; } .chat-share-rail .share-chat-button:hover { color: var(--text); background: var(--sidebar-hover); } @media (max-width: 860px) { .chat-share-rail { top: 8px; right: 12px; } .chat-share-rail .share-chat-button { width: 36px; min-height: 36px; flex: 0 0 36px; justify-content: center; gap: 0; padding: 0; font-size: 0; } .chat-share-rail .share-chat-button svg { width: 16px; height: 16px; } } /* Desktop sidebar collapse. Mobile (<=860px) keeps the body.sidebar-open overlay behavior, so every rule here is scoped to wider viewports. */ @media (min-width: 861px) { .shell-body { transition: grid-template-columns 200ms ease; } .sidebar { transition: padding 200ms ease, border-color 200ms ease, visibility 200ms; } /* Keep the content at its expanded width while the column animates shut so it slides out of view instead of squishing. */ .sidebar > * { min-width: 236px; } body.sidebar-collapsed .shell-body { grid-template-columns: 0 minmax(0, 1fr); } body.sidebar-collapsed .sidebar { padding-inline: 0; border-right-color: transparent; visibility: hidden; } body.sidebar-collapsed .sidebar-rail { display: flex; } } /* Chat search overlay (ChatGPT-style command palette). */ .search-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: clamp(16px, 14vh, 140px) 16px 16px; background: color-mix(in srgb, #000 45%, transparent); } .search-overlay[hidden] { display: none; } .search-dialog { display: flex; flex-direction: column; width: min(620px, 100%); max-height: min(60vh, 520px); overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); } .search-input-row { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--muted); } .search-input-row input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0; color: var(--text); background: transparent; font-size: 1rem; } .search-input-row input:focus { outline: none; } .search-close { flex: 0 0 auto; padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; color: var(--muted); background: transparent; font-size: 0.72rem; } .search-close:hover { color: var(--text); background: var(--sidebar-hover); } .search-results { min-height: 0; overflow-y: auto; padding: 8px; } .search-result { display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; color: var(--text); background: transparent; text-align: left; } .search-result strong { display: block; overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; } .search-result span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.78rem; } .search-result:hover, .search-result.active { background: var(--sidebar-hover); } .search-empty { padding: 18px 14px; color: var(--muted); font-size: 0.86rem; text-align: center; } /* Touch devices have no hover, so controls that rest at opacity:0 and reveal on :hover would be unreachable. Show them at rest instead. Desktop pointer devices never match (hover: none), so nothing changes there. */ @media (hover: none) { .message-actions { opacity: 1; } /* Rename/delete sit in normal flow after the truncated title instead of overlaying it on hover. */ .history-controls-inline { position: static; padding-left: 6px; background: none; transform: none; opacity: 1; pointer-events: auto; } .history-icon-btn { padding: 4px 7px; } } .share-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: 16px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); } .share-dialog::backdrop { background: rgba(8, 11, 16, 0.62); } .share-dialog-form { display: grid; gap: 14px; padding: 20px 20px 18px; } .share-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .share-dialog-header h2 { margin: 0; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; } .share-dialog-copy, .share-dialog-status { margin: 0; color: var(--muted); font-size: 0.82rem; } .share-dialog-status[data-tone="error"] { color: var(--danger); } .share-dialog-status[data-tone="ok"] { color: var(--success); } .share-visibility-options { display: grid; gap: 8px; } .share-visibility-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .share-visibility-option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } .share-visibility-option strong { display: block; font-size: 0.88rem; } .share-visibility-option span { color: var(--muted); font-size: 0.78rem; line-height: 1.4; } .share-link-row { display: flex; gap: 8px; } .share-link-row input { flex: 1; min-width: 0; min-height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); background: var(--bg); font-size: 0.78rem; } .share-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } .share-dialog-actions button { min-height: 34px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 0.78rem; font-weight: 700; } .share-dialog-actions .share-primary { color: var(--on-accent); background: var(--accent); border-color: transparent; } .share-dialog-actions .share-danger:hover { color: var(--danger); border-color: var(--danger); } .history-card.shared .history-title-row strong::after { content: "shared"; margin-left: 6px; padding: 0 6px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } /* Last in the file, and naming the open state explicitly. The ≤860px drawer rules re-declare `transition` on the panel and its scrim: the scrim only ties on specificity (so source order settles it), but `body.sidebar-open .sidebar` outranks a bare `.sidebar` and would still slide. */ @media (prefers-reduced-motion: reduce) { .discord-login, .shell-body, .sidebar, body.sidebar-open .sidebar, .sidebar-backdrop { transition: none; } }