/* The Silent Ensemble — translated from the Claude Design mockups (design/silent-ensemble-*.dc.html). Dark default, light via [data-theme="light"] on . */ :root { --bg: #12161a; --surface: #1a2027; --text: #e3e7eb; --accent: #7ba3cc; --divider: rgba(227, 231, 235, 0.14); --sp-lasse: #9bb8dc; --sp-claude: oklch(0.77 0.075 55); --sp-gpt: oklch(0.77 0.075 165); --sp-gemini: oklch(0.77 0.075 292); --stop: #d9756a; --stop-border: #a85149; --mut: rgba(227, 231, 235, 0.5); --mut-weak: rgba(227, 231, 235, 0.3); } :root[data-theme="light"] { --bg: #f2f2f3; --surface: #e8e8ea; --text: #1d1f20; --accent: #4d7096; --divider: rgba(29, 31, 32, 0.16); --sp-lasse: #3d6288; --sp-claude: oklch(0.5 0.11 55); --sp-gpt: oklch(0.46 0.1 165); --sp-gemini: oklch(0.5 0.12 292); --mut: rgba(29, 31, 32, 0.55); --mut-weak: rgba(29, 31, 32, 0.35); } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.82); } } @keyframes spin { to { transform: rotate(360deg); } } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font-family: "Barlow", system-ui, sans-serif; font-size: 15px; line-height: 1.55; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--accent) 32%, transparent); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 30%, transparent); } ::-webkit-scrollbar-track { background: transparent; } .cond { font-family: "Barlow Condensed", sans-serif; } .kick { font-family: "Barlow Condensed", sans-serif; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); } .mut { color: var(--mut); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 14px; line-height: 1.2; color: var(--text); background: transparent; border: 1px solid var(--divider); border-radius: 0; padding: 0 16px; height: 40px; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); } .btn-stop { color: var(--stop); border-color: var(--stop-border); } .btn-stop:hover:not(:disabled) { background: rgba(168, 81, 73, 0.14); } .btn-ghost:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, transparent); } .input { width: 100%; height: 44px; border: 1px solid var(--divider); background: var(--surface); color: var(--text); font-family: "Barlow", system-ui, sans-serif; font-size: 15px; padding: 0 13px; border-radius: 0; caret-color: var(--accent); } .input::placeholder { color: var(--mut-weak); } .input:focus-visible { outline: none; border-color: var(--accent); } /* ── layout ─────────────────────────────────────────────────────────── */ #app { height: 100vh; height: 100dvh; display: flex; } /* sidebar (conversation list) */ #sidebar { width: 280px; flex: none; border-right: 1px solid var(--divider); display: flex; flex-direction: column; background: var(--bg); } #sidebar.collapsed { display: none; } #sidebar .new-conv { padding: 16px 16px 12px; border-bottom: 1px solid var(--divider); } #sidebar .new-conv .btn { width: 100%; } #conv-list { flex: 1; overflow-y: auto; padding: 8px; } .conv-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-left: 2px solid transparent; padding: 12px; cursor: pointer; } .conv-item.active { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); } .conv-item .title { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conv-item .when { font-size: 12px; color: var(--mut); } #conv-empty { flex: 1; display: grid; place-items: center; padding: 24px; text-align: center; } #sidebar .foot { padding: 10px 12px; border-top: 1px solid var(--divider); display: flex; gap: 10px; } #sidebar .foot .btn { flex: 1; height: 36px; font-size: 13px; } /* main column */ #main { flex: 1; min-width: 0; display: flex; flex-direction: column; } header#topbar { display: flex; align-items: center; gap: 14px; padding: 12px 22px; border-bottom: 1px solid var(--divider); flex: none; } #topbar .brand { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 19px; white-space: nowrap; } #topbar .sep { color: var(--divider); } #conv-title { color: var(--mut); font-size: 14px; outline: none; caret-color: currentColor; cursor: text; border-bottom: 1px solid transparent; padding-bottom: 1px; min-width: 40px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; } #conv-title:hover { border-bottom-color: var(--divider); } #conv-title:focus { color: var(--text); border-bottom-color: var(--accent); } #theme-toggle { font-size: 17px; } #topbar .right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--mut); } #usage-mini { font-family: ui-monospace, Menlo, monospace; white-space: nowrap; } #topbar .btn { height: 30px; padding: 0 10px; font-size: 12.5px; color: inherit; } /* reconnect banner */ #reconnect { display: none; align-items: center; gap: 11px; padding: 11px 28px; border-bottom: 1px solid var(--divider); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 13px; } #reconnect.visible { display: flex; } .spinner { width: 14px; height: 14px; border: 1.5px solid var(--divider); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; } /* transcript */ #transcript { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 32px; display: flex; flex-direction: column; gap: 20px; } .round-sep { text-align: center; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut-weak); } .msg { display: flex; gap: 12px; align-items: baseline; } .msg .nick { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 16px; white-space: nowrap; } .msg .body { flex: 1; min-width: 0; overflow-wrap: anywhere; } .msg .body p { margin: 0 0 0.6em; } .msg .body p:last-child { margin-bottom: 0; } .msg .body ul, .msg .body ol { margin: 0.4em 0; padding-left: 1.4em; } .msg .marker { font-family: ui-monospace, Menlo, monospace; font-size: 0.82em; color: var(--mut-weak); white-space: nowrap; } .msg .cursor { display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom; margin-left: 2px; animation: blink 1s steps(1) infinite; } .msg .fail { display: inline-flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--text) 70%, transparent); } .msg .fail::before { content: ""; width: 7px; height: 7px; background: var(--stop); flex: none; } .msg .hide-btn { background: none; border: 0; color: var(--mut-weak); cursor: pointer; font-size: 11px; padding: 0 4px; visibility: hidden; } .msg:hover .hide-btn { visibility: visible; } .msg-hidden { display: flex; align-items: center; gap: 12px; border: 1px dashed var(--divider); padding: 10px 14px; opacity: 0.7; } .msg-hidden .btn { height: 28px; font-size: 12px; } code.inline { font-family: ui-monospace, Menlo, monospace; font-size: 0.86em; background: color-mix(in srgb, var(--accent) 16%, transparent); padding: 1px 5px; color: var(--accent); } .codeblock { position: relative; border: 1px solid var(--divider); margin: 12px 0; padding: 14px 16px; background: color-mix(in srgb, var(--accent) 7%, transparent); overflow-x: auto; } .codeblock .lang { font-family: "Barlow Condensed", sans-serif; font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut-weak); margin-bottom: 8px; } .codeblock pre { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; line-height: 1.65; white-space: pre; color: color-mix(in srgb, var(--text) 82%, transparent); } /* blueprint corners */ .codeblock .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--text) 55%, transparent); } .codeblock .corner::before, .codeblock .corner::after { content: ""; position: absolute; background: currentColor; } .codeblock .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } .codeblock .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } .codeblock .corner.tl { top: -6px; left: -6px; } .codeblock .corner.tr { top: -6px; right: -6px; } .codeblock .corner.bl { bottom: -6px; left: -6px; } .codeblock .corner.br { bottom: -6px; right: -6px; } #chat-empty { flex: 1; display: grid; place-items: center; text-align: center; } /* composer */ #composer { flex: none; padding: 12px 32px 22px; border-top: 1px solid var(--divider); } #relay { display: none; align-items: center; gap: 9px; font-size: 12.5px; margin-bottom: 10px; flex-wrap: wrap; } #relay.visible { display: flex; } #relay .dot { width: 7px; height: 7px; animation: pulse 1.3s ease-in-out infinite; flex: none; } #relay .who { font-family: "Barlow Condensed", sans-serif; font-weight: 600; } #relay .goal-tag { display: inline-flex; align-items: center; border: 1px solid var(--accent); color: var(--accent); padding: 2px 9px; font-size: 11.5px; margin-left: 6px; } #relay .elapsed { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--mut); margin-left: auto; } #composer-row { display: flex; align-items: flex-end; gap: 10px; } #composer textarea { flex: 1; min-height: 46px; max-height: 50vh; resize: none; overflow-y: auto; border: 1px solid var(--divider); background: var(--surface); color: var(--text); font-family: "Barlow", system-ui, sans-serif; font-size: 15px; line-height: 1.45; padding: 12px 14px; caret-color: var(--accent); } #composer textarea::placeholder { color: var(--mut-weak); } #composer textarea:focus-visible { outline: none; border-color: var(--accent); } #composer .btn { height: 46px; flex: none; } #context-warning { display: none; align-items: center; gap: 7px; margin-top: 9px; color: var(--stop); font-size: 12.5px; } #context-warning.visible { display: flex; } #context-warning::before { content: ""; width: 7px; height: 7px; background: var(--stop); flex: none; } /* participant rail */ #rail { flex: none; width: 210px; border-left: 1px solid var(--divider); padding: 20px 16px; display: flex; flex-direction: column; gap: 13px; overflow-y: auto; background: var(--bg); } .pick { display: flex; align-items: center; gap: 8px; padding: 2px 0; } .pick .dotbtn { width: 22px; height: 22px; flex: none; display: grid; place-items: center; background: transparent; border: 0; padding: 0; cursor: pointer; } .pick .dot { width: 10px; height: 10px; flex: none; } .pick .dot.streaming { animation: pulse 1.3s ease-in-out infinite; } .pick .plus { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border: 1px dashed color-mix(in srgb, var(--text) 30%, transparent); color: var(--mut); font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 13px; } .pick .info { flex: 1; min-width: 0; } .pick .name { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap; } .pick .sub { display: block; font-size: 10.5px; color: var(--mut); } .pick .arrows { display: flex; flex-direction: column; flex: none; } .pick-arrow { width: 18px; height: 14px; display: grid; place-items: center; cursor: pointer; background: transparent; border: 0; color: var(--mut); font-size: 9px; line-height: 1; padding: 0; } .pick-arrow:hover:not(:disabled) { color: var(--accent); } .pick-arrow:disabled { opacity: 0.3; cursor: default; } .pick.available { cursor: pointer; } .pick.available .name { color: color-mix(in srgb, var(--text) 78%, transparent); } #rail .goal-wrap { margin-top: auto; border-top: 1px solid var(--divider); padding-top: 12px; } #rail .goal-wrap .kick { font-size: 10px; margin-bottom: 7px; } #goal-input { height: 38px; font-size: 13.5px; } #rail .auto-wrap { border-top: 1px solid var(--divider); padding-top: 12px; } #rail .auto-tag { border: 1px dashed var(--divider); color: var(--mut); font-family: "Barlow Condensed", sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 8px; } #rail .ctx-wrap { border-top: 1px solid var(--divider); padding-top: 12px; font-size: 11px; color: var(--mut); } .ctx-bar { height: 5px; background: color-mix(in srgb, var(--text) 12%, transparent); margin-top: 8px; } .ctx-bar .fill { display: block; height: 100%; background: var(--accent); max-width: 100%; } .ctx-bar .fill.warn { background: var(--stop); } /* ── overlays ───────────────────────────────────────────────────────── */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: none; place-items: center; z-index: 40; padding: 20px; } .overlay.visible { display: grid; } .panel { background: var(--bg); border: 1px solid var(--divider); padding: 24px 26px; width: min(600px, 100%); max-height: 90vh; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .panel .head { display: flex; align-items: center; } .panel .head h2 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 22px; margin: 0; flex: 1; } .panel .close { background: none; border: 0; color: var(--mut); font-size: 22px; cursor: pointer; line-height: 1; } .usage-table { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); font-size: 13px; border: 1px solid var(--divider); } .usage-table > div { padding: 8px 10px; border-bottom: 1px solid var(--divider); } .usage-table > div.num { text-align: right; font-family: ui-monospace, Menlo, monospace; } .usage-table > div.na { color: var(--mut-weak); } .usage-table > div.total { font-family: "Barlow Condensed", sans-serif; font-weight: 600; } .usage-table > div:nth-last-child(-n + 5) { border-bottom: 0; } #settings-panel textarea { height: 170px; padding: 12px 13px; line-height: 1.5; resize: none; font-size: 15px; } .saved-note { display: none; align-items: center; gap: 6px; color: var(--sp-gpt); font-size: 13px; } .saved-note.visible { display: inline-flex; } .saved-note::before { content: ""; width: 8px; height: 8px; background: var(--sp-gpt); } /* speaker colors */ .sp-lasse { color: var(--sp-lasse); } .sp-claude { color: var(--sp-claude); } .sp-gpt { color: var(--sp-gpt); } .sp-gemini { color: var(--sp-gemini); } .sp-other { color: var(--accent); } .bg-lasse { background: var(--sp-lasse); } .bg-claude { background: var(--sp-claude); } .bg-gpt { background: var(--sp-gpt); } .bg-gemini { background: var(--sp-gemini); } .bg-other { background: var(--accent); } .bd-claude { border: 1px solid var(--sp-claude); background: transparent !important; } .bd-gpt { border: 1px solid var(--sp-gpt); background: transparent !important; } .bd-gemini { border: 1px solid var(--sp-gemini); background: transparent !important; } .bd-other { border: 1px solid var(--accent); background: transparent !important; } /* ── login page ─────────────────────────────────────────────────────── */ .login-wrap { height: 100vh; display: grid; place-items: center; padding: 20px; } .login-box { width: min(320px, 100%); text-align: center; } .login-box h1 { font-family: "Barlow Condensed", sans-serif; font-weight: 600; font-size: 30px; margin: 0; } .login-box .tag { font-size: 13px; color: var(--mut); margin: 4px 0 26px; } .login-card { position: relative; border: 1px solid var(--divider); padding: 22px 20px; display: flex; flex-direction: column; gap: 14px; text-align: left; } .login-card label { font-size: 12px; color: var(--mut); } .login-err { display: none; align-items: center; gap: 7px; color: var(--stop); font-size: 13px; } .login-err.visible { display: flex; } .login-err::before { content: ""; width: 7px; height: 7px; background: var(--stop); flex: none; } /* blueprint corners on the card */ .login-card .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--text) 55%, transparent); } .login-card .corner::before, .login-card .corner::after { content: ""; position: absolute; background: currentColor; } .login-card .corner::before { left: 5px; top: 0; width: 1px; height: 100%; } .login-card .corner::after { top: 5px; left: 0; width: 100%; height: 1px; } .login-card .corner.tl { top: -6px; left: -6px; } .login-card .corner.tr { top: -6px; right: -6px; } .login-card .corner.bl { bottom: -6px; left: -6px; } .login-card .corner.br { bottom: -6px; right: -6px; } /* ── mobile ─────────────────────────────────────────────────────────── */ #rail-toggle { display: none; } #backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 30; display: none; } #backdrop.visible { display: block; } @media (max-width: 900px) { #sidebar { position: fixed; inset: 0 auto 0 0; z-index: 35; transform: translateX(-100%); transition: transform 0.25s ease; width: min(300px, 85vw); } #sidebar.open { transform: translateX(0); display: flex; } #sidebar.collapsed { display: flex; } #rail { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 70vh; z-index: 35; border-left: 0; border-top: 1px solid var(--divider); background: var(--surface); transform: translateY(101%); transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1); box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.32); } #rail.open { transform: translateY(0); } #rail .goal-wrap { margin-top: 0; } #rail-toggle, #sidebar-toggle { display: inline-flex; } /* Two-line header: brand + conversation title on top, buttons below. header#topbar matches the base rule's specificity — a bare #topbar would lose to it despite the media query. */ header#topbar { display: grid; grid-template-columns: auto auto 1fr; row-gap: 8px; column-gap: 10px; padding: 10px 14px; } #topbar .brand { font-size: 15px; grid-row: 1; grid-column: 1; } #topbar .sep { grid-row: 1; grid-column: 2; } #conv-title { grid-row: 1; grid-column: 3; max-width: none; min-width: 0; } #sidebar-toggle { grid-row: 2; grid-column: 1; } #topbar .right { grid-row: 2; grid-column: 2 / 4; justify-content: flex-end; margin-left: 0; } #usage-mini { display: none; } #transcript { padding: 18px 16px; } #composer { padding: 10px 14px 18px; } #composer-row { flex-wrap: wrap; } #composer textarea { width: 100%; flex: 1 1 100%; } #composer .btn { flex: 1; } }