:root {
  /* Brand palette (Deane 2026-09-19, charcoal since 2026-09-23): charcoal-grey page + sidebar (was Nantucket red #C4605F), baby-blue chrome, white text-input pane. */
  --charcoal: #3A3D42; --charcoal-deep: #2A2D31; --baby: #6FAEDD; --baby-deep: #4E93C9;
  --bg: var(--charcoal); --panel: var(--baby); --ink: #FFFFFF; --muted: #E6F1FA; --line: var(--baby-deep);
  --accent: #1E4F8A; --accent-ink: #FFFFFF; --hover: #86BDE5; --active: #FFFFFF; --danger: #7A1F1F;
  --term-bg: #FFFFFF; --term-fg: #000000;
  --font: "Segoe UI", system-ui, sans-serif; --mono: "Cascadia Code", "Cascadia Mono", Consolas, monospace;
}
/* Night uses a PowerShell-style black terminal and light text. */
html[data-dark="1"] { --bg: var(--charcoal); --panel: var(--baby); --ink: #FFFFFF; --muted: #E6F1FA; --line: var(--baby-deep); --hover: #86BDE5; --active: #FFFFFF; --term-bg: #000000; --term-fg: #CCCCCC; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { background: var(--bg); color: var(--ink); font: 13px/1.45 var(--font); overflow: hidden; }
#app { display: grid; grid-template-columns: 320px 1fr; height: 100%; }
button, select, input { font: inherit; color: inherit; }
/* Use the same keyboard focus indicator in browsers and Electron. */
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
button { cursor: pointer; }
code, .mono { font-family: var(--mono); }
code { background: #FFFFFF; color: #000000; border-radius: 3px; padding: 0 3px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.hidden { display: none !important; }
[hidden] { display: none !important; }
.identity-button { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(42,45,49,.97); }
.login-card { width: 390px; max-width: 94vw; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px; }
.login-card details { width: 100%; overflow-wrap: anywhere; }
#login-note { text-align: center; }
.login-information { text-align: center; }
.login-information a { color: #b9dcf5; }
#identity-modal { z-index: 50; width: 650px; }
#identity-content > * { margin-bottom: 12px; }
#identity-content button { background: white; color: black; border: 1px solid var(--line); padding: 5px 10px; border-radius: 5px; margin: 5px; }
#identity-content section { border-top: 1px solid white; padding-top: 12px; }
#identity-content input { width: 100%; }
#identity-content input[type=checkbox] { width: auto; }
html[data-shared="1"] .trelay { display: none; }
@media (max-width: 650px) {
  #app { grid-template-columns: 175px minmax(0, 1fr); }
  .side-body, .side-foot { padding: 8px; }
  .side-foot { flex-wrap: wrap; gap: 4px; }
  #st-hint { display: none; }
  #sidebar .model-row { flex-wrap: wrap; }
}
kbd { font-family: var(--mono); font-size: 11px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; }

/* sidebar */
#sidebar { --sidebar-divider: #FFFFFF; --divider-space-above: 22px; --divider-space-below: 10px; background: var(--charcoal); color: #FFFFFF; border-right: 1px solid var(--charcoal-deep); display: flex; flex-direction: column; min-width: 0; }
#sidebar .muted, #sidebar .ppath { color: #C9CDD2; }
#sidebar .icon-btn, #sidebar .ghost-btn { color: #FFFFFF; border-color: #9AA0A6; }
#sidebar .icon-btn:hover, #sidebar .ghost-btn:hover { background: var(--charcoal-deep); }
.side-head { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; padding: 10px 12px var(--divider-space-above); border-bottom: 1px solid var(--sidebar-divider); }
.side-body { flex: 1; overflow-y: auto; padding: 10px 12px; }
.side-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 8px; color: #FFFFFF; }
#sidebar .field label { color: #C9CDD2; }
#sidebar .check { color: #FFFFFF; }
#sidebar .session-list { background: #FFFFFF; color: #000000; border-color: var(--charcoal-deep); }
#sidebar .session-list li:hover { background: #E5E7EA; }
#sidebar .session-list .smeta { color: #555; }
#sidebar .btn-row button:not(.primary) { border-color: var(--charcoal-deep); }
.brand { font-weight: 600; letter-spacing: .02em; }
#project-list { list-style: none; overflow-y: auto; flex: 1; padding: 6px; }
#project-list li { padding: 7px 9px; border-radius: 6px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; }
#project-list li:hover { background: var(--charcoal-deep); }
#project-list li.active { background: #FFFFFF; color: var(--ink); }
#project-list li.active .ppath { color: var(--muted); }
#project-list .pname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#project-list .ppath { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; text-align: left; }
#project-list .pcount { font-size: 11px; color: inherit; font-weight: 600; }
.side-foot { border-top: 1px solid var(--sidebar-divider); padding: var(--divider-space-below) 12px 8px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.side-foot .muted { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sidebar { min-height: 0; }
#desktop-download-footer { margin-top: auto; flex: 0 0 auto; padding: 10px 12px 12px; }
#get-bob-desktop { display: block; padding: 6px 8px; border-radius: 5px; color: #FFFFFF; text-decoration: none; text-align: center; }
#get-bob-desktop:hover { background: var(--charcoal-deep); }
#get-bob-desktop:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }

.icon-btn { background: transparent; border: 1px solid var(--line); border-radius: 6px; width: 26px; height: 26px; line-height: 1; font-size: 16px; color: var(--ink); }
.icon-btn:hover { background: var(--hover); }
.ghost-btn { background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; }
.ghost-btn:hover { background: var(--hover); }
.primary { background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 6px; padding: 6px 14px; font-weight: 600; }
.primary:hover { filter: brightness(1.08); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.btn-row button:not(.primary) { background: #FFFFFF; color: #000000; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; }
.btn-row button:not(.primary):hover { background: var(--hover); }

/* main */
#main { display: grid; grid-template-rows: 36px 1fr 24px; min-width: 0; height: 100%; }
#tabbar { display: flex; align-items: center; gap: 6px; padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--line); }
#tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
.tab { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; border: 1px solid var(--line); border-bottom: 0; border-radius: 6px 6px 0 0; background: var(--hover); white-space: nowrap; cursor: pointer; max-width: 260px; user-select: none; }
.tab.active { background: var(--term-bg); font-weight: 600; }
.tab .tlabel { overflow: hidden; text-overflow: ellipsis; }
.tab .tclose { border: 0; background: transparent; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; }
.tab .tclose:hover { color: var(--danger); }
.tab.exited .tlabel { color: var(--muted); text-decoration: line-through; }
#term-host { position: relative; background: var(--term-bg); min-height: 0; }
.term-pane { position: absolute; inset: 0; padding: 6px 0 4px 8px; display: none; }
.term-pane.active { display: block; }
.term-pane .xterm { height: 100%; }
.term-pane .xterm-viewport { background-color: var(--term-bg); }
#empty-state { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; color: var(--term-fg); background: var(--term-bg); }
#empty-state h1 { font-size: 20px; font-weight: 600; }
#empty-state p { max-width: 520px; }
#statusbar { display: flex; align-items: center; gap: 14px; padding: 0 10px; background: var(--panel); border-top: 1px solid var(--line); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.st.grow { flex: 1; }
#st-branch:not(:empty)::before { content: "⎇ "; }

/* drawers */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw; background: var(--panel); border-left: 1px solid var(--line); box-shadow: -8px 0 24px rgba(0,0,0,.18); z-index: 20; display: flex; flex-direction: column; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h2 { font-size: 15px; font-weight: 600; }
.drawer-body { padding: 14px 16px; overflow-y: auto; flex: 1; }
.together-team-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.together-team-row > span { flex: 1; min-width: 180px; }
.together-team-row > button { flex: none; margin: 0; padding: 6px 12px; border: 1px solid var(--baby-deep); border-radius: 6px; white-space: nowrap; }
.connection-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 12px; margin: 10px 0 18px; }
.service-connection { display: flex; justify-content: center; align-items: center; }
#s-connection-list h4 { font-size: 13px; font-weight: 600; margin: 12px 0 0; }
#connection-manage-dialog { width: min(420px, 95vw); }
#s-connections button, #connection-mail-dialog button { background: #3a3d42; color: #fff; border-color: #555; }
#connection-mail-dialog { width: 440px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 20px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 10px; }
#connection-mail-dialog::backdrop { background: rgba(0,0,0,.5); }
#connection-mail-dialog h2 { font-size: 18px; margin-top: 0; }
#connection-mail-dialog fieldset { border: 1px solid var(--line); margin: 10px 0; padding: 10px; min-width: 0; }
#connection-mail-dialog label { display: block; margin: 8px 0; font-size: 12px; }
#connection-mail-dialog input:not([type=checkbox]), #connection-mail-dialog select { display: block; width: 100%; margin-top: 4px; }
#scrim { position: fixed; inset: 0; background: rgba(0,0,0,.25); z-index: 10; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.field select, .field input { background: #FFFFFF; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; color: #000000; }
.field .value { padding: 6px 8px; background: #FFFFFF; color: #000000; border-radius: 6px; word-break: break-all; }
.check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.session-list { list-style: none; border: 1px solid var(--line); border-radius: 6px; max-height: 260px; overflow-y: auto; }
.session-list li { padding: 7px 9px; border-bottom: 1px solid var(--line); cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.session-list li:last-child { border-bottom: 0; }
.session-list li:hover { background: var(--hover); }
.session-list .stitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-list .smeta { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.session-list li.muted { cursor: default; }

/* accounts */
.section-title { font-size: 13px; font-weight: 600; margin: 18px 0 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.acct-list { list-style: none; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0; }
.acct-list li { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-bottom: 1px solid var(--line); }
.acct-list li:last-child { border-bottom: 0; }
.acct-list .aname { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-list .akind { font-size: 11px; color: var(--muted); white-space: nowrap; }
.acct-list .akey { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.acct-list .aedit { border: 1px solid var(--line); background: transparent; border-radius: 5px; padding: 2px 8px; font-size: 12px; }
.acct-list li.muted { color: var(--muted); }
.acct-form { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 8px; background: var(--hover); }
.acct-form .field select, .acct-form .field input { background: #FFFFFF; }
button.danger { color: var(--danger); border-color: var(--danger) !important; }
#st-account:not(:empty)::before { content: "👤 "; }

/* voice + relay */
.tab-spacer { flex: 0 0 6px; }
.voice-btn { background: #FFFFFF; color: #000000; border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.voice-btn:hover { background: var(--hover); }
.voice-btn.rec { background: var(--danger); color: #fff; border-color: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
.voice-btn.busy { opacity: .7; cursor: progress; }
@keyframes pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
#voice-status { white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tab .trelay { border: 0; background: transparent; color: var(--muted); font-size: 13px; line-height: 1; padding: 0 3px; }
.tab .trelay:hover { color: var(--accent); }
.tab .trelay.on { color: var(--accent); font-weight: 700; }
.pop { position: fixed; z-index: 30; width: 360px; max-width: 92vw; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.22); padding: 10px 12px 12px; }
.pop-head { display: flex; align-items: center; justify-content: space-between; font-weight: 600; margin-bottom: 6px; }
.relay-list { list-style: none; border: 1px solid var(--line); border-radius: 6px; max-height: 220px; overflow-y: auto; margin: 6px 0; }
.relay-list li { display: flex; align-items: center; gap: 8px; padding: 6px 9px; border-bottom: 1px solid var(--line); }
.relay-list li:last-child { border-bottom: 0; }
.relay-list li.muted { color: var(--muted); }
.relay-list .rl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.relay-list .rl-acct { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* accounts popup (baby blue) + footer buttons */
.modal { position: fixed; z-index: 25; top: 8vh; left: 50%; transform: translateX(-50%); width: 600px; max-width: 94vw; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--baby); color: var(--ink); border: 1px solid var(--baby-deep); border-radius: 10px; box-shadow: 0 14px 44px rgba(0,0,0,.35); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--baby-deep); }
.modal-head h2 { font-size: 15px; font-weight: 600; }
.modal-body { padding: 12px 16px 16px; overflow-y: auto; }
.modal .acct-list { background: #FFFFFF; }
.modal .acct-form { background: var(--baby-deep); }
.acct-list .ause { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.acct-list .adel { border: 1px solid var(--danger); color: var(--danger); background: transparent; border-radius: 5px; padding: 2px 8px; font-size: 12px; }
.side-foot { flex-wrap: wrap; }
.side-foot .foot-btns { display: flex; gap: 6px; }
#tabbar #btn-new-tab { flex: 0 0 auto; }

/* Every left-panel button is baby blue (Deane 2026-09-19). */
#sidebar button, #sidebar .btn-row button, #sidebar .btn-row button:not(.primary), #sidebar .primary, #sidebar .ghost-btn, #sidebar .icon-btn {
  background: var(--baby); color: var(--ink); border: 1px solid var(--baby-deep); }
#sidebar button:hover, #sidebar .btn-row button:not(.primary):hover, #sidebar .primary:hover, #sidebar .ghost-btn:hover, #sidebar .icon-btn:hover {
  background: var(--hover); filter: none; }
#sidebar .primary { font-weight: 700; }

/* Blue surfaces carry white text (Deane 2026-09-19); white surfaces keep black text. */
.tab.active, .tab.active .tlabel { color: #000000; }
.tab.active .tclose, .tab.active .trelay { color: #555555; }
.tab.active .trelay.on { color: #1E4F8A; }
.acct-list, .acct-list li, .acct-list .aname { color: #000000; }
.acct-list .akind, .acct-list .akey, .acct-list .ause, .acct-list li.muted { color: #4A5560; }
.acct-list .aedit { color: #000000; border-color: #9AA7B3; }

/* Each account keeps its controls above two quota meters. Unknown is not zero. */
#accounts-modal { width: 760px; }
.acct-list li { flex-wrap: wrap; }
.acct-list .akind { white-space: normal; overflow-wrap: anywhere; }
.account-usage { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 5px 22px; padding: 3px 0 2px; min-width: 0; }
.usage-window { display: flex; gap: 8px; align-items: center; min-width: 0; font-size: 11px; }
.usage-window[hidden] { display: none; }
.usage-label { font-weight: 700; color: #344454; }
.usage-track { flex: 1; height: 9px; overflow: hidden; border-radius: 5px; background: #E2E8ED; }
.usage-fill { display: block; height: 100%; width: 0; border-radius: inherit; background: #26834A; transition: width .2s ease; }
.usage-track.warning .usage-fill { background: #BB7900; }
.usage-track.danger .usage-fill { background: #C44545; }
.usage-track.stale .usage-fill { opacity: .55; }
.usage-value { width: 34px; text-align: right; font-variant-numeric: tabular-nums; color: #344454; }
.usage-note { grid-column: 1 / -1; font-size: 10px; color: #546575; overflow-wrap: anywhere; }
.usage-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 10px; }   /* the "5H / 7D" caption is gone (Deane 2026-09-23); the button keeps its place on the right */
.usage-toolbar button { border: 1px solid white; border-radius: 5px; background: transparent; padding: 4px 9px; }
.usage-toolbar button:disabled { opacity: .6; cursor: wait; }
@media (max-width: 620px) { .account-usage { grid-template-columns: 1fr; } }
.relay-list { background: #FFFFFF; color: #000000; } .relay-list .rl-acct, .relay-list li.muted { color: #4A5560; }
.trelay.on { color: #FFFFFF; }
a { color: #FFFFFF; }

/* resume popup */
.modal .session-list { background: #FFFFFF; color: #000000; max-height: 60vh; margin-top: 8px; }
.modal .session-list li:hover { background: #E4F0FA; }
.modal .session-list .smeta, .modal .session-list li.muted { color: #4A5560; }

/* Leave room below New tab for the project navigator. */
.side-body { display: flex; flex: 0 1 auto; min-height: 0; flex-direction: column; padding: var(--divider-space-below) 12px var(--divider-space-above); }
.side-sec { flex: 0 0 auto; }
/* Match the original PROJECTS divider: 22px above, 10px below. */
.side-sec > .field:last-child, #mail-project-list > li:last-child { margin-bottom: 0; }
#sec-new, #sec-projects { margin-top: var(--divider-space-above); }
#mail-project-list { list-style: none; }
#mail-project-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; align-items: center; column-gap: 6px; border-radius: 5px; margin-bottom: 3px; }
#mail-project-list li.selected, #sidebar #mail-project-list li.selected button:hover { background: var(--charcoal); }
#sidebar #mail-project-list button { color: #FFFFFF; background: transparent; border: 0; border-radius: 5px; }
#sidebar #mail-project-list button:hover { background: var(--charcoal-deep); }
#mail-project-list button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -2px; }
#mail-project-list .project-open { flex: 1; min-width: 0; padding: 7px 6px; text-align: left; overflow-wrap: anywhere; }
#mail-project-list .project-delete { flex: 0 0 28px; width: 28px; height: 30px; display: flex; align-items: center; justify-content: center; }
#mail-project-list .project-delete svg { width: 15px; height: 15px; }
#mail-project-list .project-toggle { width: 22px; height: 30px; display: flex; align-items: center; justify-content: center; }
#mail-project-list .project-toggle svg { width: 12px; height: 12px; }
#mail-project-list .project-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
#mail-project-list .project-options { grid-column: 2 / -1; display: flex; flex-direction: column; padding: 0 0 5px 18px; }
#mail-project-list .project-together, #mail-project-list .project-connect, #mail-project-list .project-memory { width: 100%; text-align: left; font-size: 11px; padding: 5px 6px; }
#mail-project-list .projects-empty { display: block; padding: 6px; color: #FFFFFF; }
#together-modal { z-index: 55; width: 620px; }
#together-modal button { background: var(--charcoal); color: #FFFFFF; filter: none; }
#together-modal button:hover, #together-modal button:active { background: var(--charcoal-deep); }
#together-modal [hidden] { display: none !important; }
#together-modal textarea { resize: vertical; width: 100%; font: inherit; padding: 8px; }
#together-modal details { margin-top: 12px; }
#together-modal summary { cursor: pointer; }
#together-team label { display: block; margin: 6px 0; }
#together-results pre { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px; font-size: 12px; }
#together-status { margin-top: 14px; }
.side-h { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; margin: 0 0 8px; }
.side-divider { border-top: 1px solid var(--sidebar-divider); margin: 0 0 var(--divider-space-below); }
.model-row { display: flex; gap: 6px; align-items: stretch; }
.model-row select { flex: 1; min-width: 0; }
.newproj { display: flex; gap: 6px; margin-top: 4px; }
.newproj input { flex: 1; min-width: 0; }
#sidebar select:disabled { opacity: .6; }

/* footer buttons: half the previous spacing (was ~43px via space-between) */
.side-foot { justify-content: flex-start; gap: 21px; row-gap: 6px; }
.side-foot #claude-ver { flex-basis: 100%; }

/* microphone: icon-only, docked at the right of the text-input pane by the prompt line */
#voice-dock { position: absolute; right: 18px; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 8px; pointer-events: none; }
#voice-dock > * { pointer-events: auto; }
#voice-dock .voice-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; background: var(--baby); color: #FFFFFF; border: 1px solid var(--baby-deep); box-shadow: 0 2px 8px rgba(0,0,0,.25); }
#voice-dock .voice-btn:hover { background: var(--hover); }
#voice-dock .voice-btn.rec { background: var(--danger); border-color: var(--danger); }
#voice-status { max-width: 320px; font-size: 12px; color: #FFFFFF; background: var(--baby-deep); border-radius: 12px; padding: 3px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#voice-status:empty { display: none; }

/* old-school radio microphone, white on the light-blue button; grille lines take the button colour */
#voice-dock .voice-btn { display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; --mic-bg: var(--baby); }
#voice-dock .voice-btn:hover { --mic-bg: var(--hover); }
#voice-dock .voice-btn.rec { --mic-bg: var(--danger); }
#voice-dock .voice-btn .grille { stroke: var(--mic-bg); }
#voice-dock .voice-btn.on { background: #1B7A32; border-color: #1B7A32; }
#voice-dock .voice-btn.speaking { animation: pulse 1.2s ease-in-out infinite; }

/* footer buttons centred in their panel */
.side-foot { justify-content: center; }
.side-foot #claude-ver { text-align: center; }

/* tabs grouped by project */
#tabs { gap: 10px; align-items: flex-end; }
.tab-group { display: flex; align-items: flex-end; gap: 4px; padding: 0 6px 0 6px; border-left: 2px solid #FFFFFF; border-top: 2px solid #FFFFFF; border-radius: 8px 0 0 0; position: relative; margin-top: 4px; }
.tab-group .tg-name { align-self: center; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FFFFFF; padding: 0 4px 0 2px; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }

/* "Add" beside the new-project name box: a proper button width */
.newproj button { flex: 0 0 auto; min-width: 72px; padding: 6px 16px; border-radius: 6px; font-weight: 600; }
.newproj input { background: #FFFFFF; color: #000000; border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; }

/* Every blue button carries a 1px white border (Deane 2026-09-23): the sidebar's baby-blue buttons, the primary
   (dark-blue) buttons everywhere, the round mic button, and the Sign in button. Blue buttons ONLY (Deane, same day):
   the transparent project-navigator rows keep no border, and the mic button's red (recording) and green (voice mode
   on) states keep a border in their own colour rather than white. */
#sidebar button, #sidebar .btn-row button, #sidebar .btn-row button:not(.primary), #sidebar .ghost-btn, #sidebar .icon-btn,
.primary, .login-overlay .primary, #voice-dock .voice-btn, #btn-login {
  border: 1px solid #FFFFFF !important; }
#sidebar #mail-project-list button { border: 0 !important; }
#voice-dock .voice-btn.rec { border-color: var(--danger) !important; }
#voice-dock .voice-btn.on { border-color: #1B7A32 !important; }

/* Status bar: the working-folder path is hidden (Deane 2026-09-23). */
#st-project { display: none; }

/* Sign-in method toggle in the Add-account form (Deane 2026-09-23): Monthly plan | API.
   Selected half is white with black text; the other half is the form's blue with white text and a white border. */
.seg { display: inline-flex; align-self: flex-start; border: 1px solid #FFFFFF; border-radius: 6px; overflow: hidden; position: relative; }
.seg label { font-size: 13px; font-weight: 600; letter-spacing: 0; color: #FFFFFF; padding: 6px 16px; cursor: pointer; user-select: none; margin: 0; }
.seg label + label { border-left: 1px solid #FFFFFF; }
.seg label:has(input:checked) { background: #FFFFFF; color: #000000; }
.seg label:has(input:focus-visible) { outline: 2px solid #FFFFFF; outline-offset: -3px; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; pointer-events: none; }
.seg label:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* Night pane: the active tab matches the dark pane, so its text turns light. */
html[data-dark="1"] .tab.active, html[data-dark="1"] .tab.active .tlabel { color: #FFFFFF; }
html[data-dark="1"] .tab.active .tclose, html[data-dark="1"] .tab.active .trelay { color: #C8CCD0; }

/* Left panel buttons (Deane 2026-09-23): Sign in sits at the top of the panel; Sign in, Settings and AI accounts share one width. */
:root { --panel-btn-w: 116px; }
.side-head { align-items: stretch; }
.side-head #btn-login { width: var(--panel-btn-w); align-self: center; margin: 0; }
.side-foot #btn-settings, .side-foot #btn-accounts { width: var(--panel-btn-w); flex: 0 0 var(--panel-btn-w); padding-left: 0; padding-right: 0; text-align: center; }

/* Project context and text-only consultations. */
#insights-modal { width:min(760px,94vw); }
#insights-modal button, #btn-opinion, .project-memory { background:#3A3D42; color:#fff; border:1px solid #3A3D42; }
#insights-modal button:hover, #btn-opinion:hover, .project-memory:hover { background:#2A2D31; }
#insights-modal textarea { resize:vertical; }
#insights-models { max-height:170px; overflow:auto; margin:12px 0; }
#insights-models label { display:block; padding:5px 0; }
#insights-models input { width:auto; margin-right:5px; }
#insights-results pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; user-select:text; }
#insights-results section { border-top:1px solid var(--border,#ddd); margin-top:12px; }
.project-memory { grid-column:1/-1; text-align:left; padding:4px 8px; font-size:12px; }
.tab .tmore { flex: none; border: 0; background: transparent; border-radius: 4px; color: inherit; min-width: 24px; height: 24px; padding: 0 3px; letter-spacing: 1px; }
.tab .tmore:hover, .tab .tmore[aria-expanded="true"] { background: rgba(0,0,0,.12); }
.tab .tmore:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.tab-menu { position: fixed; z-index: 60; padding: 5px; max-width: calc(100vw - 16px); background: var(--panel); border: 1px solid var(--line); border-radius: 7px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
#tab-menu #btn-opinion { width: 100%; padding: 7px 12px; border-radius: 4px; text-align: left; white-space: nowrap; }
#tab-menu #btn-opinion:disabled { opacity: .55; cursor: default; }
.side-foot { flex-wrap: wrap; }
.service-dialog { width: 620px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; padding: 18px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 9px; }
.service-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-dialog h2 { margin: 0 0 10px; }
.service-dialog label { display: block; margin: 10px 0; }
.service-dialog input:not([type=checkbox]), .service-dialog textarea, .service-dialog select { box-sizing: border-box; width: 100%; padding: 7px; border-radius: 5px; border: 1px solid var(--line); background: white; color: black; }
.service-dialog button, .handoff-banner button { background: #3A3D42; color: white; border: 0; border-radius: 5px; padding: 6px 10px; margin: 3px; }
.service-dialog .service-close { font-size: 20px; }
/* Close controls blend into their popup, including on hover and press. */
:is(.modal-head, .drawer-head, .pop-head, .service-dialog-head) > :is(.icon-btn, .service-close) {
  background: transparent !important; border: 0 !important; outline: none !important; box-shadow: none !important; color: inherit !important;
}
:is(.modal-head, .drawer-head, .pop-head, .service-dialog-head) > :is(.icon-btn, .service-close):focus-visible {
  text-decoration: underline; text-underline-offset: 3px;
}
#peer-thread { max-height: 34vh; overflow: auto; padding: 8px; }
#peer-thread section { border-bottom: 1px solid var(--line); margin-bottom: 12px; }
#peer-thread pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; user-select: text; }
.handoff-banner { position: fixed; z-index: 45; bottom: 40px; right: 16px; max-width: min(420px, calc(100vw - 32px)); box-sizing: border-box; background: var(--panel); color: var(--ink); border: 1px solid var(--line); padding: 14px; border-radius: 8px; box-shadow: 0 4px 16px #0004; overflow-wrap: anywhere; }
.skills-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.skills-heading .side-h { margin:0; }
.skills-heading button,.workspace-buttons button,#skills-list button { background:#3A3D42; color:white; border:0; border-radius:4px; padding:5px 9px; }
#skills-dropdown { margin-top:10px; color:white; }
#skills-list { list-style:none; padding:0; margin:6px 0; max-height:180px; overflow:auto; }
#skills-list li { display:flex; gap:5px; align-items:center; margin:5px 0; }
#skills-list .skill-name { flex:1; text-align:left; min-width:0; overflow-wrap:anywhere; }
#skills-list .skill-remove { background:var(--baby-deep); }
.workspace-buttons { display:flex; flex-wrap:wrap; gap:5px; }
.workspace-dialog pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; user-select:text; }
.schedule-row { border-bottom:1px solid var(--line); padding:10px 0; }
#documents-dialog { width:1100px; }
.document-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:14px; }
.document-layout aside { max-height:70vh; overflow:auto; }
#document-list button { display:block; width:95%; overflow-wrap:anywhere; text-align:left; }
#document-preview { background:white; color:#222; border-radius:5px; padding:16px; max-height:55vh; overflow:auto; min-height:200px; }
#document-preview pre { margin:0; }
#document-preview img { max-width:100%; }
#document-preview iframe { width:100%; height:50vh; border:0; }
#document-preview table { border-collapse:collapse; font-size:12px; }
#document-preview td { border:1px solid #ccc; padding:4px; }
@media(max-width:640px){.document-layout{grid-template-columns:minmax(0,1fr)}.document-layout aside{max-height:140px}.workspace-dialog{padding:12px}}

#mail-project-list .project-space-button{width:100%;text-align:left;font-size:11px;padding:5px 6px}
#project-space{width:min(850px,95vw)}.space-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid #ffffff44}.space-row>span{flex:1;min-width:160px;overflow-wrap:anywhere}#space-drop{border:1px dashed white;padding:14px;margin:10px 0}.space-post{padding:12px 0;border-bottom:1px solid #ffffff44}.space-post pre{white-space:pre-wrap;overflow-wrap:anywhere}#project-space progress{width:100%}#project-space label{display:block;margin:8px 0}#project-space textarea,#project-space input{width:100%;box-sizing:border-box}#project-space section[hidden],#project-space form[hidden]{display:none!important}

#cloud-browser{width:min(1300px,96vw)}#cloud-image{display:block;width:100%;aspect-ratio:8/5;object-fit:contain;background:#171717}#cloud-nav input,#cloud-type input{flex:1;min-width:160px}

/* Compact white-on-charcoal sidebar tools. */
#sidebar-tools { display: grid; grid-template-columns: repeat(7, minmax(0, 36px)); justify-content: center; align-items: center; gap: 6px; width: 100%; }
#sidebar .sidebar-action {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px;
  width: 36px; height: 36px; padding: 5px; margin: 0;
  color: #fff !important; background: var(--charcoal) !important; border: 0 !important;
}
#sidebar .sidebar-action:hover { background: var(--charcoal-deep) !important; }
#sidebar .sidebar-action:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#sidebar .sidebar-action svg { display: block; width: 26px; height: 26px; }
#sidebar-tools .sidebar-action { width: 100%; min-width: 0; }
#sidebar .side-head #btn-login { width: 36px; flex: 0 0 36px; }
@media (max-width: 650px), (pointer: coarse) and (hover: none) {
  #sidebar .side-head { padding-left: 4px; padding-right: 4px; }
  #sidebar-tools { display: flex; justify-content: flex-start; gap: 6px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; }
  #sidebar-tools .sidebar-action { flex: 0 0 48px; width: 48px; height: 48px; padding: 4px; }
  #sidebar-tools .sidebar-action svg { width: 40px; height: 40px; max-width: none; }
  #desktop-download-footer { display: none; }
}
@media (pointer: coarse) and (hover: none) { #desktop-download-footer { display: none; } }
#voice-features-modal { width: 520px; }

#btn-welcome-signin { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; padding: 12px; background: #FFFFFF; border: 0; border-radius: 8px; }
#btn-welcome-signin svg { width: 48px; height: 48px; }
#btn-welcome-signin:focus-visible { outline: 2px solid var(--baby); outline-offset: 2px; }
#signin { background: var(--baby); }

#skills-dialog { width: min(520px, 95vw); }

#st-user { background: transparent; border: 0; color: inherit; font: inherit; padding: 0; min-width: 0; max-width: 100%; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
#st-user:hover, #st-user:focus-visible { text-decoration: underline; }

#s-connections .connection-logo { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 6px; background: transparent; border: 0; border-radius: 4px; }
#s-connections .connection-logo img { display: block; width: 32px; height: 32px; object-fit: contain; }
#s-connections .connection-logo:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 1px; }

#installed-connections:empty { display:none; }
#installed-connections-title[hidden] { display:none; }
.files-toolbar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; }
#file-location { overflow-wrap:anywhere; }
#documents-dialog[data-busy="1"] .files-toolbar button { pointer-events:none; opacity:.6; }
#document-preview audio,#document-preview video { max-width:100%; }
#document-list .file-folder { font-weight:bold; }

#files-drop { border:1px dashed white; padding:10px; margin-bottom:12px; }
#file-name-dialog { width:min(420px,95vw); }
#file-name-form label { display:block; }
#file-name-form input { width:100%; box-sizing:border-box; margin:10px 0; }

#s-computer-workspace { margin-bottom: 16px; }
.computer-folder-row { display: flex; gap: 8px; align-items: center; }
#s-computer-path { flex: 1; min-width: 0; width: 0; }
#s-computer-projects { overflow-wrap: anywhere; }
#s-computer-projects details { margin: 8px 0; }