/* GlirOS app layout and components (phase A2). Uses only the tokens in
   tokens.css. Sections:
     1. Base          5. Chat log and messages    9. Settings
     2. Background    6. Markdown                10. Menus, dialogs, toasts
     3. Layout        7. Composer                11. Narrow screens
     4. Sidebar       8. Output panel            12. Reduced motion */

/* ---------- 1. base ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--text-md) / var(--line) var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
select option, select optgroup { background-color: var(--surface-solid); color: var(--text); }  /* 0.1.81zzz26 (the design chat, site review §3.9): Windows opens a select's list in the select's own colours -- a see-through select (.ss-head on --inset) gave a pale list with light text in the dark theme */
button { cursor: pointer; }
button:disabled { cursor: default; opacity: 0.5; }
:focus-visible { outline: none; box-shadow: var(--focus); }
[hidden] { display: none !important; }
.ico { flex: none; display: block; }
::selection { background: var(--accent-soft); }
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.2);
  backdrop-filter: blur(var(--blur)) saturate(1.2);
  box-shadow: var(--shadow);
}
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  color: var(--text-dim);
  transition: background var(--fast), color var(--fast);
}
.icon-btn:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.icon-btn.active { color: var(--accent); background: var(--accent-soft); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 0.5rem 1.1rem; border: 1px solid transparent; border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-sm);
  transition: background var(--fast), filter var(--fast);
}
.btn:hover:not(:disabled) { background: var(--accent-hover); }
.btn.secondary { background: var(--glass); color: var(--text); border-color: var(--glass-border); font-weight: 500; }
.btn.secondary:hover:not(:disabled) { background: var(--accent-soft); }
.btn.danger { background: var(--danger); color: var(--on-danger); }
.btn.danger.secondary { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.btn.small { padding: 0.3rem 0.8rem; font-size: var(--text-xs); }

/* ---------- 2. background ---------- */
.bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--bg); }
.bg-layer {
  position: absolute; inset: -60px;
  background-size: cover; background-position: center;
  filter: blur(var(--bg-blur)) saturate(1.05);
  transform: scale(1.04);
  opacity: 0; transition: opacity var(--bg-fade);
}
.bg-layer.visible { opacity: 1; }
.bg-layer.instant { transition: none; }
.bg-tint { position: absolute; inset: 0; background: var(--tint); }

/* ---------- 3. layout ---------- */
.app {
  position: relative; z-index: 1; height: 100%;
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  gap: var(--space-3); padding: var(--space-3);
  transition: grid-template-columns var(--medium);
}
.app.with-output { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--output-w); }
/* 0.0.56: full screen: the side panel becomes a glass overlay over the chat (the sidebar stays; the background shows) */
.app.with-output.output-full .output { position: absolute; z-index: 30; top: var(--space-3); bottom: var(--space-3); right: var(--space-3);
  left: calc(var(--sidebar-w) + 2 * var(--space-3)); background: var(--glass-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: var(--shadow); animation: none; }
.app.with-output.output-full .output-resize { display: none; }
.studio-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.studio-panel.media-studio { flex: 1; min-height: 0; }
.studio-panel.media-studio > * { flex-shrink: 0; }  /* the media never gets squeezed away in a short panel */
/* full screen: the media large on the left, the parts beside it, what will happen and the one action along the bottom */
.app.with-output.output-full .studio-panel.media-studio { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  grid-template-rows: repeat(6, auto); align-content: start; column-gap: var(--space-4); max-width: 1500px; margin: 0 auto; width: 100%; }
.app.with-output.output-full .studio-panel .ms-stage { grid-column: 1; grid-row: 2; height: min(68vh, 900px); width: auto; max-width: 100%; justify-self: center; }
/* 0.1.81zzf (the design chat's One file review §4.2): in full screen One file's side ends with the preview's band and its own
   column scrolls, as on the timeline (900px written as 56.25rem) */
.app.with-output.output-full .studio-panel .ms-parts:has(> .ws-side) { align-self: stretch; min-height: 0; max-height: calc(min(68vh, 56.25rem) + var(--space-6) * 2); display: flex; flex-direction: column; }
.app.with-output.output-full .studio-panel .ms-parts > .ws-side { flex: 1 1 0; min-height: 0; }
.app.with-output.output-full .studio-panel .ms-meta { grid-column: 1; grid-row: 3; }
.app.with-output.output-full .studio-panel .ms-parts { grid-column: 2; grid-row: 2 / 5; align-self: start; }
.app.with-output.output-full .studio-panel .ms-add { grid-column: 2; grid-row: 5; }
.app.with-output.output-full .studio-panel .ms-foot { grid-column: 1 / -1; grid-row: 6; }
/* 0.0.55: the SCORM test player widens the panel (courses assume 1000 px or more) */
.app.with-output.output-wide { grid-template-columns: var(--sidebar-w) minmax(260px, 1fr) max(var(--output-w), min(1100px, 68vw)); }
.app.collapsed { --sidebar-w: var(--rail-w); }
.main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.narrow-only { display: none; }
.scrim { position: fixed; inset: 0; z-index: 20; background: rgba(4, 10, 12, 0.4); }

.topbar { display: flex; align-items: center; gap: var(--space-2); height: var(--topbar-h); padding: 0 var(--space-2); flex: none; }
.chat-title {
  flex: 1; min-width: 0; text-align: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius);
  padding: 0.35rem 0.6rem; font-weight: 600; font-size: var(--text-md); color: var(--text);
  text-overflow: ellipsis;
}
.chat-title:hover { border-color: var(--border); }
.chat-title:focus { background: var(--inset); border-color: var(--border); }
.chat-title::placeholder { color: var(--text-faint); }
.top-actions { display: flex; gap: var(--space-1); }
/* 0.0.85: the connection light in a remote session (remotelink.js): a small dot beside the light/dark button */
.top-actions { align-items: center; }
.remote-link { width: 10px; height: 10px; margin: 0 6px; border-radius: 50%; flex: none; background: var(--text-faint); cursor: help; }
.remote-link.green { background: var(--good); }
.remote-link.yellow { background: var(--warn); }
.remote-link.red { background: var(--danger); }
.remote-link.busy { animation: rl-pulse 1.6s ease-in-out infinite; }
.remote-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@keyframes rl-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .remote-link.busy { animation: none; } }

.model-picker { position: relative; }
.model-btn {
  display: flex; align-items: center; gap: var(--space-2); max-width: 300px;
  padding: 0.4rem 0.7rem 0.4rem 0.8rem;
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  font-size: var(--text-sm); color: var(--text);
}
.model-btn:hover { background: var(--accent-soft); }
.model-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.dot.ready { background: var(--good); }
.dot.busy { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
.dot.error { background: var(--danger); }
@keyframes pulse { 50% { opacity: 0.35; } }
.model-menu { left: 0; top: calc(100% + 6px); width: min(340px, calc(100vw - 76px)); }  /* 0.1.44: never past a phone's edge */
.model-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.model-item small { color: var(--text-dim); font-size: var(--text-xs); }
.model-item .progress { width: 100%; }

.notice {
  margin: 0 auto var(--space-2); max-width: var(--chat-max-w); width: calc(100% - 2 * var(--space-4));
  display: flex; align-items: center; gap: var(--space-3);
  padding: 0.55rem 0.9rem; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft);
  font-size: var(--text-sm);
}
.notice.warn { border-color: var(--warn); }
.notice.error { border-color: var(--danger); }
.notice .grow { flex: 1; }
.notice.reload-hint { width: 100%; max-width: none; margin: 0 0 var(--space-4); border-color: var(--accent); }
/* 0.1.17: what was stopped when GlirOS last closed -- one calm card above the chat */
.stopped-card { margin: var(--space-2) auto var(--space-3); max-width: var(--chat-max-w); width: calc(100% - 2 * var(--space-4));
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); }
.stopped-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.stopped-head strong { font-weight: 600; font-size: var(--text-sm); }
.stopped-card > .settings-hint { margin: var(--space-1) 0 var(--space-3); }
.stopped-list .row .text strong { font-size: var(--text-sm); font-weight: 500; }
.stopped-list .row .text small { color: var(--text-dim); font-size: var(--text-xs); }
.stopped-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 600px) { .stopped-list .row { flex-direction: column; align-items: stretch; } .stopped-actions { justify-content: flex-start; } }
progress.progress { height: 6px; appearance: none; -webkit-appearance: none; border: none; border-radius: 3px; background: var(--inset); overflow: hidden; accent-color: var(--accent); }
progress.progress::-webkit-progress-bar { background: var(--inset); }
progress.progress::-webkit-progress-value { background: var(--accent); border-radius: 3px; }

/* ---------- 4. sidebar ---------- */
.sidebar {
  display: flex; flex-direction: column; min-height: 0;
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-2);
  overflow: hidden;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--space-1) var(--space-3) var(--space-2); }
.brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.logo {
  width: 28px; height: 28px; flex: none; background: var(--accent);
  -webkit-mask: url("../img/gliros-mark.svg") center / contain no-repeat;
  mask: url("../img/gliros-mark.svg") center / contain no-repeat;
}
.brand-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 650; letter-spacing: 0.01em; }
.new-chat {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  margin: 0 var(--space-1) var(--space-3); padding: 0.6rem; border: none; border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: var(--text-sm);
  transition: background var(--fast);
}
.new-chat:hover { background: var(--accent-hover); }
.search {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 0 var(--space-1) var(--space-2); padding: 0 0.6rem;
  border-radius: var(--radius); background: var(--inset); border: 1px solid var(--border); color: var(--text-dim);
}
.search input { flex: 1; min-width: 0; border: none; background: transparent; padding: 0.45rem 0; outline: none; font-size: var(--text-sm); }
.search:focus-within { box-shadow: var(--focus); }
.chat-list { flex: 1; overflow-y: auto; padding: 0 var(--space-1); }
.chat-group { margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.chat-item {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: 0.45rem 0.4rem 0.45rem 0.7rem; margin-bottom: 1px;
  border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; text-align: left; font-size: var(--text-sm); color: var(--text);
}
.chat-item:hover { background: var(--accent-soft); }
.chat-item.active { background: var(--accent-soft); border-color: var(--user-border); }
.chat-item .title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .pin { color: var(--text-faint); }
.chat-item .chat-media { color: var(--text-faint); display: inline-flex; flex: none; }  /* 0.1.53: a Media Studio setup kept */
.chat-item .more { width: 26px; height: 26px; opacity: 0; }
.chat-item:hover .more, .chat-item .more:focus-visible, .chat-item:focus-within .more, .chat-item.menu-open .more { opacity: 1; }
/* 0.1.81m (A11Y): a chat's and a project's name is the button the keyboard reaches; the row shows its focus */
.chat-open, .project-toggle { flex: 1; min-width: 0; display: flex; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.chat-open:focus-visible, .project-toggle:focus-visible { box-shadow: none; }
.chat-item:has(.chat-open:focus-visible), .project-row:has(.project-toggle:focus-visible) { box-shadow: var(--focus); }
.chat-item .rename { flex: 1; min-width: 0; background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.1rem 0.4rem; }
.chat-empty { padding: var(--space-4) var(--space-3); color: var(--text-dim); font-size: var(--text-sm); }
.sidebar-foot { padding-top: var(--space-2); border-top: 1px solid var(--border); margin: var(--space-2) var(--space-1) 0; }
.side-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: 0.55rem 0.7rem; border: none; border-radius: var(--radius); background: transparent; color: var(--text); font-size: var(--text-sm);
}
.side-item:hover { background: var(--accent-soft); }
.side-item .ico { color: var(--text-dim); }

/* collapsed rail */
.app.collapsed .sidebar { padding: var(--space-3) 0; align-items: center; }
.app.collapsed .brand-name, .app.collapsed .label, .app.collapsed .search, .app.collapsed .chat-list { display: none; }
.app.collapsed .sidebar-head { flex-direction: column; gap: var(--space-3); padding: 0 0 var(--space-3); }
.app.collapsed .new-chat { width: 40px; height: 40px; padding: 0; margin: 0 0 var(--space-2); }
.app.collapsed .sidebar-foot { margin-top: auto; border: none; }
.app.collapsed .side-item { width: 40px; height: 40px; padding: 0; justify-content: center; }

/* ---------- 5. chat log ---------- */
.chat { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: auto; }
.log { max-width: var(--chat-max-w); margin: 0 auto; padding: var(--space-3) var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.msg { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.msg.user { align-items: flex-end; }
.bubble { max-width: 100%; border-radius: var(--radius-lg); padding: 0.75rem 1.05rem; overflow-wrap: anywhere; }
.msg.user .bubble { max-width: 85%; background: var(--user-bg); border: 1px solid var(--user-border); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); white-space: pre-wrap; }
.msg.assistant .bubble { background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); }
.msg.assistant .bubble.thinking::after { content: "▍"; animation: pulse 1s steps(2) infinite; color: var(--accent); }
.msg-actions { display: flex; gap: 2px; opacity: 0; transition: opacity var(--fast); }
.msg:hover .msg-actions, .msg:focus-within .msg-actions, .msg.last .msg-actions { opacity: 1; }
.msg-actions .icon-btn { width: 30px; height: 30px; }
/* 0.1.10 (R9): the thumbs on an answer; the chosen one stays lit */
.msg-actions .rate-btn.on { color: var(--accent); opacity: 1; }
.msg-actions .rate-btn.on .ico { fill: color-mix(in srgb, currentColor 22%, transparent); }
.msg-meta { font-size: var(--text-xs); color: var(--text-faint); padding: 0 var(--space-1); }
.msg .error-line { color: var(--danger); font-size: var(--text-sm); }
.msg.user .edit-box { width: min(85%, 640px); display: flex; flex-direction: column; gap: var(--space-2); }
.msg.user .edit-box textarea { width: 100%; min-height: 4.5rem; resize: vertical; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--inset); border: 1px solid var(--border); }
.msg.user .edit-box .row { display: flex; gap: var(--space-2); justify-content: flex-end; }
.divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-faint); font-size: var(--text-xs); }
.divider::before, .divider::after { content: ""; flex: 1; border-top: 1px dashed var(--border); }
.system-line { align-self: center; color: var(--text-dim); font-size: var(--text-sm); text-align: center; }
.divider { flex-wrap: wrap; justify-content: center; text-align: center; }
.summary-box { flex-basis: 100%; order: 3; text-align: left; font-size: var(--text-sm); color: var(--text-dim); }
.summary-box summary { cursor: pointer; text-align: center; color: var(--accent); list-style: none; }
.summary-box summary::-webkit-details-marker { display: none; }
.summary-box p { margin: var(--space-2) auto 0; max-width: 640px; padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--glass-border); white-space: pre-wrap; }

/* Tools/plugins (0.0.14): the small note left where a model's ```tool-call block was (markdown.js). */
/* 0.0.14j: tools GlirOS used by itself for an answer (meta.tool_runs), under the answer. */
.tool-runs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.tool-used { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-dim); background: var(--inset); border: 1px solid var(--glass-border); border-radius: var(--radius); padding: 0.4rem 0.7rem; margin: 0.4rem 0; width: fit-content; font-family: inherit; cursor: pointer; }
/* 0.1.81zzf (Skills; the design chat's pointers): the first-use question (three small secondary buttons, Fetch first, no
   accent), the fetch line, and the "Worked out by the <name> skill" card under the answer (the tool icon, not the sparkle;
   a value in tabular figures; the local-only line is a fact in text-dim, no warn colour). */
.skill-ask { margin: 0.4rem 0; padding: var(--space-2) var(--space-3); border: thin solid var(--glass-border); border-radius: var(--radius); background: var(--inset); max-width: 40rem; }
.skill-ask-text { margin: 0 0 var(--space-2); }
.skill-ask-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.skill-line { color: var(--text-dim); font-size: var(--text-xs); }
.skill-cards { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-1) 0; }
.skill-card { width: fit-content; max-width: 100%; padding: 0.45rem 0.75rem; border: thin solid var(--glass-border); border-radius: var(--radius); background: var(--inset); }
.skill-by { display: flex; align-items: center; gap: var(--space-1); color: var(--text-dim); font-size: var(--text-xs); }
.skill-icon { display: inline-flex; }
.skill-value { font-size: var(--text-lg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.skill-text, .skill-local, .skill-caution { color: var(--text-dim); font-size: var(--text-sm); overflow-wrap: anywhere; }
/* 0.1.41: a tool id the answer wrote in a code span, shown as the tool's name; opens the tool */
.tool-name-chip { display: inline; font: inherit; font-weight: 600; color: var(--accent); background: var(--inset); border: 1px solid var(--glass-border); border-radius: 999px; padding: 0 0.5em; cursor: pointer; }
.tool-name-chip:hover { border-color: var(--accent); }
.tool-used:hover { color: var(--text); border-color: var(--accent); }
.tool-used .ico { width: 14px; height: 14px; flex: none; }
/* 0.0.14h: a silently-run call's note reads "Open ..." (markdown.js) -- given the accent colour so
   the invitation to click and see it live is visible at a glance, not just on hover like the plain
   "Used ..." note. */
.tool-open { color: var(--accent); border-color: var(--accent); }
.tool-open:hover { background: var(--accent); color: var(--bg); }
/* The live tool page shown in the output panel (0.0.14): same treatment as the preview frame. */
.tool-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
/* 0.0.55: the SCORM test player (its own origin; scormplay.js) */
.scorm-panel { flex: 1; min-height: 0; display: flex; }
.scorm-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: var(--bg); }

/* The model's thinking, above its answer (phase A3; 0.0.51: no box -- a quiet, transparent note that fades away when
   the answer starts, and folds open again on a click). */
:root { --cog-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M4.2 4.2l1.7 1.7M18.1 18.1l1.7 1.7M2.8 12h2.4M18.8 12h2.4M4.2 19.8l1.7-1.7M18.1 5.9l1.7-1.7'/%3E%3Ccircle cx='12' cy='12' r='6.6'/%3E%3C/svg%3E"); }
.thinking-block { align-self: stretch; font-size: var(--text-sm); color: var(--text-dim); background: transparent; border: 0; }
.thinking-block summary { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.2rem 0.1rem; cursor: pointer; list-style: none; user-select: none; color: var(--text-faint); border-radius: var(--radius-sm); transition: color var(--fast); }
.thinking-block summary:hover { color: var(--text-dim); }
.thinking-block summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.thinking-block summary::-webkit-details-marker { display: none; }
.thinking-block summary::before { content: ""; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--fast); }
.thinking-block[open] summary::before { transform: rotate(45deg); }
.thinking-block.live summary { color: var(--text-dim); }
.thinking-block.live summary::before { display: none; }
.thinking-block.live summary::after, .msg.assistant .bubble.thinking.waiting::after {
  content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: var(--accent);
  -webkit-mask: var(--cog-mask) center / contain no-repeat; mask: var(--cog-mask) center / contain no-repeat;
  animation: cog-spin 2.8s linear infinite, cog-pulse 1.6s ease-in-out infinite; }
.thinking-block.live summary::after { order: -1; width: 0.95rem; height: 0.95rem; }
.thinking-block.live .thinking-label { animation: breathe 1.6s ease-in-out infinite; }
.thinking-body { margin: 0.25rem 0 0.4rem 0.35rem; padding: 0.1rem 0 0.1rem 0.85rem; border-left: 2px solid var(--border); color: var(--text-faint); max-height: 18rem; overflow: auto; transition: opacity 1.2s ease, max-height 1.2s ease; }
.thinking-block.live .thinking-body { color: var(--text-dim); }
/* the answer has started: the thoughts fade out slowly, then fold away */
.thinking-block.fading .thinking-body { opacity: 0; max-height: 0; }
.thinking-body > :first-child { margin-top: 0; }
.thinking-body > :last-child { margin-bottom: 0; }
/* 0.0.51: waiting for the first words: a small pill with a turning, breathing cog instead of a full-width empty box */
.msg.assistant .bubble.thinking.waiting { align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; min-height: 2.5rem; padding: 0.55rem 0.95rem; }
@keyframes cog-spin { to { transform: rotate(360deg); } }
@keyframes cog-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  .thinking-block.live summary::after, .msg.assistant .bubble.thinking.waiting::after { animation: cog-pulse 2.4s ease-in-out infinite; }
  .thinking-body { transition: none; }
}
@keyframes breathe { 50% { opacity: 0.45; } }

/* Pictures in messages and in the composer. */
.msg-pictures { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; max-width: 85%; }
/* 0.0.50: a video added to a message: shown as a player while it is open here, else a small card */
.msg-videos { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); max-width: 85%; }
.msg-video { margin: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.msg-video video, .msg-video img { display: block; max-width: min(420px, 100%); max-height: 300px; border-radius: var(--radius); border: 1px solid var(--border); background: #000; }
.msg-video figcaption { font-size: var(--text-xs); color: var(--text-faint); }
.msg-video-card { max-width: 360px; }
.msg-pictures .picture { padding: 0; border: 1px solid var(--user-border); border-radius: var(--radius); overflow: hidden; background: var(--inset); cursor: zoom-in; line-height: 0; }
.msg-pictures img { display: block; max-width: 220px; max-height: 180px; min-width: 48px; min-height: 48px; object-fit: cover; }
.msg-pictures .picture.missing { width: 96px; height: 72px; cursor: default; }
.attached { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-1) 0 var(--space-2); }
.attached-item { position: relative; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: var(--inset); }
.attached-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attached-item.uploading img { opacity: 0.45; }
.attached-item.uploading::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 3px; border-radius: 2px; background: var(--accent); animation: breathe 1s ease-in-out infinite; }
.attached-item .remove { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; }
.think-btn.on { color: var(--accent); background: var(--accent-soft); }
.web-btn.on { color: var(--accent); background: var(--accent-soft); }

/* Web search (0.0.12): the status line while searching, [1] links and the sources under an answer. */
.web-status { align-self: flex-start; margin-bottom: 6px; animation: web-pulse 1.4s ease-in-out infinite; }
@keyframes web-pulse { 50% { opacity: .55; } }
.md a.cite {
  display: inline-block; min-width: 1.35em; padding: 0 .3em; margin: 0 1px; border-radius: 6px;
  font-size: .75em; line-height: 1.5; text-align: center; vertical-align: .15em; text-decoration: none;
  color: var(--accent); background: var(--accent-soft);
}
.md a.cite:hover { text-decoration: underline; }
.sources { margin-top: 6px; font-size: var(--text-sm); color: var(--text-dim); max-width: 100%; }
.sources > summary { cursor: pointer; width: max-content; }
.sources-list { margin: 6px 0 0; padding-left: 1.6em; display: grid; gap: 4px; }
.sources-list a { color: inherit; text-decoration: none; display: flex; gap: var(--space-2); min-width: 0; }
.sources-list a:hover .source-title { text-decoration: underline; }
.source-site { flex: none; color: var(--accent); }
.source-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.web-key-row .row-controls { flex-wrap: wrap; justify-content: flex-end; }
.web-key-row .key-input { min-width: 12em; }
@media (prefers-reduced-motion: reduce) { .web-status { animation: none; } }
.drop-zone { position: absolute; inset: var(--space-3); z-index: 20; display: grid; place-items: center; border: 2px dashed var(--accent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--bg) 70%, transparent); font-size: var(--text-lg); color: var(--text); pointer-events: none; }
.lightbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, 0.78); cursor: zoom-out; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); box-shadow: var(--shadow); cursor: default; }
.lightbox .icon-btn { position: absolute; top: var(--space-4); right: var(--space-4); color: #fff; background: rgba(255, 255, 255, 0.12); }

.welcome { margin: 12vh auto 0; max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.welcome .logo { width: 56px; height: 56px; }
.welcome h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); letter-spacing: -0.01em; }
.welcome p { margin: 0; color: var(--text-dim); }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.chip {
  padding: 0.45rem 0.9rem; border-radius: var(--radius-pill); font-size: var(--text-sm);
  background: var(--glass); border: 1px solid var(--glass-border); color: var(--text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.chip:hover { background: var(--accent-soft); }

/* ---------- 6. markdown ---------- */
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p, .md ul, .md ol, .md blockquote, .md table, .md .code { margin: 0.55em 0; }
.md h1, .md h2, .md h3, .md h4 { margin: 0.9em 0 0.4em; line-height: 1.3; font-family: var(--font-display); font-weight: 600; }
.md h1 { font-size: var(--text-xl); } .md h2 { font-size: var(--text-lg); } .md h3 { font-size: var(--text-md); } .md h4 { font-size: var(--text-md); color: var(--text-dim); }   /* 0.1.70b: the design chat's scale (gliros-design-type-pass-handover.md, last section) */
.md ul, .md ol { padding-left: 1.4em; }
.md li { margin: 0.15em 0; }
.md a { color: var(--accent); }
.md blockquote { margin-left: 0; padding: 0.1em 0 0.1em 0.9em; border-left: 3px solid var(--user-border); color: var(--text-dim); }
.md hr { border: none; border-top: 1px solid var(--border); margin: 1em 0; }
.md code { font-family: var(--mono); font-size: 0.86em; background: var(--inset); border: 1px solid var(--border); border-radius: 6px; padding: 0.05em 0.35em; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; font-size: var(--text-sm); }
.md th, .md td { border: 1px solid var(--border); padding: 0.35em 0.7em; text-align: left; }
.md th { background: var(--inset); }
.code { border: 1px solid var(--border); border-radius: var(--radius); background: var(--code-bg); overflow: hidden; }
.code-head { display: flex; align-items: center; gap: var(--space-1); padding: 0.2rem 0.3rem 0.2rem 0.8rem; border-bottom: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-dim); }
.code-head .lang { flex: 1; }
.code-head .icon-btn { width: 28px; height: 28px; }
/* 0.1.81zzf: a long block's buttons again at its end (chat.js wireCode) */
.code-foot { display: flex; align-items: center; gap: var(--space-1); padding: 0.2rem 0.3rem 0.2rem 0.8rem; border-top: thin solid var(--border); font-size: var(--text-xs); color: var(--text-dim); }
.code-foot .lang { flex: 1; }
.code-foot .icon-btn { width: 1.75rem; height: 1.75rem; }
.code pre { margin: 0; padding: 0.8rem 0.9rem; overflow-x: auto; }
.code pre code { background: none; border: none; padding: 0; font-size: var(--text-sm); line-height: 1.55; }

/* ---------- 7. composer ---------- */
.composer {
  flex: none; width: calc(100% - 2 * var(--space-4)); max-width: var(--chat-max-w); margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: 0.55rem 0.6rem 0.5rem 1rem; border-radius: var(--radius-xl);
  background: var(--glass-strong); transition: border-color var(--fast);
}
.composer:focus-within { border-color: var(--user-border); }
.composer textarea { width: 100%; resize: none; border: none; background: transparent; outline: none; padding: 0.35rem 0; max-height: 30vh; line-height: 1.5; }
.composer textarea::placeholder { color: var(--text-faint); }
.composer-row { display: flex; align-items: center; gap: var(--space-2); }
.composer-hint { flex: 1; font-size: var(--text-xs); color: var(--text-faint); min-height: 1em; }
/* 0.1.60 (the portal chat, a Samsung phone): on a phone the hint gets its own full-width line under the buttons instead
   of a tall column beside Send; nothing there, no line */
@media (max-width: 600px) {
  .composer-row { flex-wrap: wrap; }
  .composer-row .composer-hint { order: 10; flex: 0 0 100%; min-height: 0; }
  .composer-row .composer-hint:empty { display: none; }
  .composer-row .send-btn { margin-left: auto; }
}
.composer-row > .icon-btn:first-child { margin-left: -0.45rem; }
.composer-row .icon-btn { width: 34px; height: 34px; }
.send-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); transition: background var(--fast);
}
.send-btn:hover:not(:disabled) { background: var(--accent-hover); }
.send-btn.stop { background: var(--text); color: var(--bg); }
.footnote { flex: none; margin: var(--space-1) auto 0; min-height: 1.2em; font-size: var(--text-xs); color: var(--text-faint); text-align: center; }
/* 0.1.59: the footnote (the last answer's numbers) and the "made by AI" line share one row; on a phone they wrap */
.footline { flex: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: var(--space-3); margin: var(--space-1) auto 0; max-width: 100%; }
.footline .footnote { margin: 0; }
.ai-note { margin: 0; font-size: var(--text-xs); color: var(--text-faint); text-align: center; }
.ai-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ai-note a:hover, .ai-note a:focus-visible { color: var(--text-dim); }
/* 0.1.59 (TRANSCRIBE): a transcript under its answer */
.transcript-card { margin-top: var(--space-2); }
.transcript-text { margin: var(--space-2) 0 0; max-height: 320px; overflow: auto; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: var(--text-sm); line-height: 1.5;
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); }
.fx-transcript { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin-top: var(--space-1); }
.fx-download-label { font-size: var(--text-xs); color: var(--text-dim); margin-left: var(--space-1); }
.ms-export-subs .ms-chips { display: flex; gap: var(--space-1); }
/* 0.1.59: a remote session that lost the PC */
.pc-lost { position: fixed; left: 50%; top: var(--space-3); transform: translateX(-50%); z-index: 60; max-width: calc(100% - 32px);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--warn); color: var(--text); font-size: var(--text-sm); box-shadow: var(--shadow); }
.pc-lost.back { border-color: var(--good); }

/* ---------- 8. output panel ---------- */
.output { display: flex; flex-direction: column; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; animation: slide-in var(--medium); }
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } }
.output-head { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.output-title { flex: 1; margin: 0; font-family: inherit; font-weight: 600; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output { position: relative; }
.output-resize { position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 7px; cursor: col-resize; }
.output-resize:hover, body.resizing .output-resize { background: linear-gradient(90deg, var(--accent-soft), transparent); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .app { transition: none; }
body.resizing .preview-frame { pointer-events: none; }
.output-mode.segmented button { padding: 3px 10px; font-size: var(--text-xs); }
.output-tabs { display: flex; gap: 2px; padding: 0 var(--space-2); overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.output-tab {
  flex: none; padding: 7px 10px 6px; border: none; border-bottom: 2px solid transparent; background: none; color: var(--text-dim);
  font-family: var(--mono); font-size: var(--text-xs); cursor: pointer; white-space: nowrap;
}
.output-tab:hover { color: var(--text); }
.output-tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------- 0.0.13 "Files and versions": tracked files & their version history ---------- */
/* Ported from VibeAI's recordCodeFileVersions()/renderCodeFilesPanel(); see output.js. */
.output-files-panel { max-height: 40%; overflow-y: auto; border-bottom: 1px solid var(--border); background: var(--inset); }
.output-files-panel[hidden] { display: none; }
/* 0.1.81zzz30 (the owner: the folder's files didn't all show until something was opened): with nothing shown below, the list
   takes the whole panel instead of 40 % over an empty body */
.output-files-panel:has(+ .output-body:empty) { max-height: none; flex: 1; border-bottom: 0; }
.output-files-panel:not([hidden]) + .output-body:empty { flex: 0 0 0; }
.output-files-list { display: flex; flex-direction: column; }
.output-files-empty { padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--text-dim); }
.output-file-row { border-bottom: 1px solid var(--border); }
.output-file-row:last-child { border-bottom: none; }
.output-file-header { display: flex; align-items: center; gap: 2px; padding-right: var(--space-1); }
.output-file-name {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  background: transparent; border: none; color: var(--text); text-align: left; padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm); font-family: var(--mono); cursor: pointer;
}
.output-file-name:hover { color: var(--accent); }
.output-file-name .output-file-count { font-family: inherit; font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }
/* 0.1.81zzz29: where a project's file is (this chat, the folder on the PC, both) */
.output-files-hint { font-size: var(--text-xs); color: var(--text-dim); padding: 0 var(--space-3) var(--space-2); line-height: 1.4; }
.output-where { flex-shrink: 0; font-size: var(--text-xs); color: var(--text-dim); border: thin solid var(--border); border-radius: var(--radius-pill); padding: 0 var(--space-2); white-space: nowrap; margin-left: var(--space-1); }
/* 0.1.81zzz37 (D22: the chips overlapped "3 versjoner"): the name gives way (ellipsis), the count and the chips keep their room;
   0.1.81zzz39 (D22 run 3: with the pin badge too, "game.js" was pushed out and the count cut): the name and count keep at
   least 12rem, and what doesn't fit beside them goes on to a second line */
.output-file-header { flex-wrap: wrap; }
.output-file-name { overflow: hidden; flex: 1 1 12rem; }
.output-file-name > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-file-name .output-file-count, .output-pin-badge { flex-shrink: 0; }
.output-where.file-same-folder, .output-where.file-also-chat { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.output-where.file-differs-folder { color: var(--warn); border-color: currentColor; }
.output-delete-btn { flex-shrink: 0; width: 26px; height: 26px; }
.output-delete-btn:hover { color: var(--danger); }
.output-file-versions { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0 var(--space-4) var(--space-3); }
.output-file-versions[hidden] { display: none; }
.output-version-item { display: inline-flex; align-items: center; background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-pill); padding-right: 2px; }
.output-version-item:has(.output-version-pill.active) { border-color: var(--accent); }
.output-version-pill {
  background: transparent; border: none; color: var(--text-dim); border-radius: var(--radius-pill) 0 0 var(--radius-pill);
  padding: 3px 3px 3px 10px; font-size: var(--text-xs); cursor: pointer;
}
.output-version-pill:hover { color: var(--accent); }
.output-version-pill.active { color: var(--accent); }
.output-version-pill.user-edit { font-style: italic; }
.output-version-item .output-delete-btn { width: 22px; height: 22px; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
/* 0.1.81zzz28: the version a page's preview uses (one per file) */
.output-version-pin { width: 1.4rem; height: 1.4rem; display: inline-grid; place-items: center; border: 0; background: none; color: var(--text-dim); border-radius: 50%; opacity: .55; }
.output-version-pin:hover { opacity: 1; color: var(--accent); }
.output-version-pin.on { opacity: 1; color: var(--accent); }
.output-version-item.pinned { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--code-bg)); }
.output-pin-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--accent); border: thin solid var(--accent); border-radius: var(--radius-pill); padding: 0 0 0 var(--space-2); white-space: nowrap; }
.output-pin-clear { width: 1.15rem; height: 1.15rem; display: inline-grid; place-items: center; border: 0; background: none; color: inherit; border-radius: 50%; }
.output-pin-clear:hover { background: var(--inset); }
.output-edit-area {
  flex: 1; min-height: 0; min-width: 0; resize: none; border: none; outline: none; background: var(--code-bg);
  color: var(--text); font-family: var(--mono); font-size: var(--text-sm); line-height: 1.55; padding: var(--space-4);
}
.output-edit-area[hidden] { display: none; }

.output-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--code-bg); }
.code-scroll { flex: 1; min-height: 0; overflow: auto; display: flex; align-items: flex-start; font-family: var(--mono); font-size: var(--text-sm); line-height: 1.55; }
.code-scroll pre { margin: 0; font: inherit; white-space: pre; }
.code-scroll .gutter { flex: none; padding: var(--space-4) var(--space-2) var(--space-4) var(--space-3); min-width: 3ch; text-align: right; color: var(--text-faint); user-select: none; border-right: 1px solid var(--border); }
.code-scroll .code-text { flex: 1; padding: var(--space-4); }
.code-scroll code { background: none; border: none; padding: 0; font: inherit; }
.preview { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.preview-notes p { margin: 0; padding: var(--space-2) var(--space-4); font-size: var(--text-xs); color: var(--text-dim); border-bottom: 1px solid var(--border); }
.preview-frame { flex: 1; min-height: 0; width: 100%; border: 0; background: #fff; }
.preview-console { flex: none; max-height: 34%; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.preview-console-head { display: flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2) 2px var(--space-4); font-size: var(--text-xs); color: var(--text-dim); }
.preview-console-head span { flex: 1; }
.preview-console-head .icon-btn { width: 26px; height: 26px; }
.preview-console-body { margin: 0; padding: 0 var(--space-4) var(--space-2); overflow: auto; font-family: var(--mono); font-size: var(--text-xs); line-height: 1.5; white-space: pre-wrap; }
.preview-console-body .log-error { color: var(--danger); }
.preview-console-body .log-warn { color: var(--warn); }

/* code colours (highlight.js classes), in chat and in the panel */
.hl .hljs-keyword, .hl .hljs-selector-tag, .hl .hljs-literal, .hl .hljs-name, .hl .hljs-section, .hl .hljs-doctag { color: var(--hl-keyword); }
.hl .hljs-string, .hl .hljs-regexp, .hl .hljs-template-tag, .hl .hljs-selector-attr, .hl .hljs-char.escape_ { color: var(--hl-string); }
.hl .hljs-number, .hl .hljs-symbol, .hl .hljs-bullet, .hl .hljs-link { color: var(--hl-number); }
.hl .hljs-comment, .hl .hljs-quote { color: var(--hl-comment); font-style: italic; }
.hl .hljs-title, .hl .hljs-title.class_, .hl .hljs-title.function_, .hl .hljs-selector-id, .hl .hljs-selector-class { color: var(--hl-title); }
.hl .hljs-attr, .hl .hljs-attribute, .hl .hljs-property, .hl .hljs-variable, .hl .hljs-template-variable, .hl .hljs-params { color: var(--hl-attr); }
.hl .hljs-built_in, .hl .hljs-type, .hl .hljs-selector-pseudo, .hl .hljs-tag .hljs-attr { color: var(--hl-builtin); }
.hl .hljs-meta, .hl .hljs-meta .hljs-keyword, .hl .hljs-subst { color: var(--hl-meta); }
.hl .hljs-tag { color: var(--text-dim); }
.hl .hljs-tag .hljs-name { color: var(--hl-keyword); }
.hl .hljs-deletion { background: var(--hl-deleted); }
.hl .hljs-addition { background: var(--hl-added); }
.hl .hljs-emphasis { font-style: italic; }
.hl .hljs-strong { font-weight: 600; }

/* ---------- 9. settings ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background: rgba(4, 10, 12, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.modal { background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur)); }
.settings-modal { display: grid; grid-template-columns: 210px minmax(0, 1fr); width: min(920px, 100%); height: min(680px, 100%); overflow: hidden; }
.settings-nav { padding: var(--space-4) var(--space-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.settings-nav button { display: flex; align-items: center; gap: var(--space-3); padding: 0.5rem 0.7rem; border: none; border-radius: var(--radius); background: transparent; text-align: left; font-size: var(--text-sm); color: var(--text); }
.settings-nav button .ico { color: var(--text-dim); }
.settings-nav button:hover { background: var(--accent-soft); }
.settings-nav button.active { background: var(--accent-soft); font-weight: 600; }
.settings-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.settings-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-4) var(--space-2) var(--space-5); }
.settings-head h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.settings-body { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); }
.field-group { margin: var(--space-4) 0; }
.field-group > h3 { margin: 0 0 var(--space-2); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.card { background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius); }
.card > .row + .row { border-top: 1px solid var(--border); }
/* 0.1.81zzg (the design chat's nit on zzf): Settings > Tools, the Skills switch and the fetched skills -- two cards, a space-2 gap */
.skills-settings > .card + .card { margin-top: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-4); padding: 0.7rem 0.9rem; }
.row .text { flex: 1; min-width: 0; }
.row .text strong { display: block; font-weight: 500; font-size: var(--text-sm); }
.row .text small { display: block; color: var(--text-dim); font-size: var(--text-xs); margin-top: 1px; }
.number-choice { display: flex; gap: var(--space-2); flex: none; }
.number-choice input { width: 7.5rem; }
.row select, .row input[type="number"], .row input[type="text"] {
  background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.55rem; font-size: var(--text-sm); min-width: 0;
}
.row input[type="number"] { width: 110px; }
.row code, .path { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-dim); word-break: break-all; }
.badge { display: inline-block; padding: 0.05rem 0.5rem; margin-left: var(--space-1); border-radius: var(--radius-pill); font-size: var(--text-2xs); border: 1px solid var(--border); color: var(--text-dim); vertical-align: 1px; }
.badge.good { border-color: var(--good); color: var(--good); }
.badge.accent { border-color: var(--accent); color: var(--accent); }
.badge.warn { border-color: var(--warn); color: var(--warn); }
.tools-updates { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-3); border: thin solid var(--accent); border-radius: var(--radius); color: var(--text); }   /* 0.1.72 */
.choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: 0.6rem 0.9rem; cursor: pointer; }
.choice input { margin-top: 0.3rem; accent-color: var(--accent); }
.choice .text strong { display: block; font-weight: 500; font-size: var(--text-sm); }
.choice .text small { display: block; color: var(--text-dim); font-size: var(--text-xs); margin-top: 1px; }
.choice.sub { padding-left: 2.6rem; }
.choice.disabled { opacity: 0.55; cursor: default; }
.settings-hint { font-size: var(--text-xs); color: var(--text-dim); margin: var(--space-2) 0 0; }
/* 0.0.45: a calmer Settings (feng shui: room to breathe, one thing per line, the quiet things quieter). */
.settings-modal { width: min(980px, 100%); height: min(720px, 100%); }
.settings-body .field-group { margin: var(--space-5) 0; }
.settings-body .field-group:first-child { margin-top: var(--space-3); }
.settings-body .field-group > h3 { margin-bottom: var(--space-3); }
.settings-body .row { padding: 0.85rem 1rem; }
.settings-body .row .text small { line-height: 1.5; margin-top: 3px; max-width: 64ch; }
/* 0.0.56: on a phone a row's wide control (choices, a list, buttons) goes under its text, so the text keeps the full
   width (it was squeezed into a narrow column, one word a line); an on/off switch stays beside it */
@media (max-width: 600px) {
  .settings-body .row:not(:has(> .switch)) { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .settings-body .row:not(:has(> .switch)) > .segmented { align-self: flex-start; max-width: 100%; overflow-x: auto; }
  .settings-body .row:not(:has(> .switch)) > select { width: 100%; max-width: none; }
  .settings-body .row:not(:has(> .switch)) > .row-controls { justify-content: flex-start; flex-wrap: wrap; }
  .settings-body .row { padding: 0.75rem 0.85rem; }
}
.settings-body .row .text small.row-faint, .row-faint { color: var(--text-faint); }
/* 0.1.81zk: a row whose control goes under its words (Web search's five choices, the SearXNG address) */
.settings-body .row.row-stack { flex-direction: column; align-items: stretch; gap: var(--space-2); }
.settings-body .row.row-stack > .segmented { align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
.settings-body .row.row-stack > .row-controls { justify-content: flex-start; flex-wrap: wrap; }
.web-searxng .web-searxng-url { flex: 1 1 18rem; min-width: 0; }
.web-searxng .text a { color: var(--accent); }
/* 0.1.81zy "bring your own" (the design chat's claude/gliros-design-byo.md, its byo.css; the app's chevron icon for the
   fold's mark): one quiet tag and one sentence wherever a tool the person runs themselves is offered, and out of the
   main row -- the shared class is .byo-tag */
.byo-tag { display: inline-flex; align-items: center; margin-left: var(--space-2); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 400; line-height: 1.5; color: var(--text-dim); white-space: nowrap; vertical-align: 0.1em; }
.byo-fold > summary { display: flex; align-items: center; gap: var(--space-2); padding: 0.7rem 0.9rem; cursor: pointer; list-style: none; font-size: var(--text-sm); font-weight: 500; }
.byo-fold > summary::-webkit-details-marker { display: none; }
.byo-fold > summary .byo-tag { margin-left: 0; }
.byo-chev { display: inline-flex; color: var(--text-dim); transition: transform var(--fast); }
.byo-fold[open] > summary .byo-chev { transform: rotate(90deg); }
.byo-fold > summary small { margin-left: auto; font-weight: 400; font-size: var(--text-xs); color: var(--text-dim); }
.byo-body { display: grid; gap: var(--space-2); padding: 0 0.9rem 0.9rem calc(0.9rem + var(--space-4)); font-size: var(--text-xs); color: var(--text-dim); }
.byo-body p { margin: 0; }
.byo-body > .web-searxng { padding: 0; }
/* 0.1.81zz (the design chat's byo-zy-lines.css): the row's controls wrap with the address at least 16rem; the login
   fold has the same chevron as the fold around it */
.byo-body > .web-searxng .row-controls { flex-wrap: wrap; }
.byo-body > .web-searxng .web-searxng-url { flex: 1 1 16rem; min-width: 0; }
.web-searxng-login > summary { list-style: none; display: inline-flex; align-items: center; gap: var(--space-1); }
.web-searxng-login > summary::-webkit-details-marker { display: none; }
.web-searxng-login[open] > summary .byo-chev { transform: rotate(90deg); }
.web-searxng-login summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-dim); }
.web-searxng-login[open] { display: grid; gap: var(--space-2); }
.web-searxng-login .row-controls { justify-content: flex-start; flex-wrap: wrap; }
.settings-body .settings-hint, .settings-body .field-group > p { line-height: 1.55; max-width: 72ch; }
.settings-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.9rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--inset); font-size: var(--text-sm); color: var(--text); }
.settings-more > summary::-webkit-details-marker { display: none; }
.settings-more > summary::before { content: "›"; display: inline-block; transition: transform 0.15s ease; color: var(--text-dim); }
.settings-more[open] > summary::before { transform: rotate(90deg); }
.settings-more > summary:hover { background: var(--accent-soft); }
.settings-more[open] > summary { margin-bottom: var(--space-3); }
.voice-missing .text small { color: var(--text-dim); }
/* 0.1.17 (the layout pass): the section list under faint headings, and an Advanced fold at the end of a section for the
   rows used less often (styled like a group heading, so it reads as one more quiet heading, not as a button) */
.settings-nav-head { margin: var(--space-4) 0.7rem var(--space-1); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.settings-nav-head:first-child { margin-top: var(--space-1); }
.settings-nav button { padding: 0.42rem 0.7rem; }
.settings-advanced, .settings-fold { margin: var(--space-6) 0 var(--space-2); }
.settings-fold { margin-top: var(--space-3); }
.settings-advanced > summary, .settings-fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0.3rem 0.15rem; border-radius: var(--radius-sm); user-select: none; color: var(--text-faint); transition: color var(--fast); }
.settings-advanced > summary { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.settings-fold > summary { font-size: var(--text-sm); color: var(--text-dim); }
.settings-advanced > summary::-webkit-details-marker, .settings-fold > summary::-webkit-details-marker { display: none; }
.settings-advanced > summary:hover, .settings-fold > summary:hover { color: var(--text); }
.settings-advanced > summary:focus-visible, .settings-fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-advanced-chev { display: inline-flex; transition: transform var(--fast); }
.settings-advanced[open] > summary .settings-advanced-chev, .settings-fold[open] > summary .settings-advanced-chev { transform: rotate(90deg); }
.settings-advanced-body > .field-group:first-child { margin-top: var(--space-3); }
.settings-fold-body { margin-top: var(--space-2); }
/* a note inside a card sits on the card's own padding, not against its edge (the ffmpeg licence line did) */
.settings-body .card > p.settings-hint { margin: 0; padding: 0.6rem 1rem; }
.settings-body .card > .row + p.settings-hint, .settings-body .card > p.settings-hint + p.settings-hint { padding-top: 0; }
/* 0.1.66 (the owner's screenshot of Settings > Recipes): a card's own content that isn't a .row -- a list, a line of
   buttons, a paste field, a heading between rows -- gets the rows' inset instead of touching the card's edge */
.settings-body .card > :is(.recipe-list, .memory-list) { padding: 0.6rem 1rem; }
.settings-body .card > :is(.recipe-list, .memory-list) > p.settings-hint { margin: 0; }
.settings-body .card > .memory-actions { padding: 0.6rem 1rem 0.85rem; }
.settings-body .card > :is(.recipe-list, .memory-list) + .memory-actions { padding-top: 0.2rem; }
.settings-body .card > .memory-import-text { display: block; width: calc(100% - 2rem); margin: 0 1rem; }
.settings-body .card > .memory-import-preview:not(:empty) { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 1rem 0.85rem; }
.settings-body .card > .settings-subhead { margin: 0; padding: 1rem 1rem 0.2rem; }
/* 0.1.17 (R8): Send a report */
.report-row { display: block; }
.report-row textarea, .report-row input[type="email"] { width: 100%; box-sizing: border-box; background: var(--surface-solid); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.5rem 0.65rem; font: inherit; font-size: var(--text-sm); color: var(--text); resize: vertical; }
.report-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.report-text { white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: var(--text-xs); background: var(--inset);
  border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); max-height: 320px; overflow: auto; margin: var(--space-2) 0 0; }
/* the tool list: a filter, and its own scroll once it is long (the owner: "the tool list will most likely grow long") */
.tools-filter { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.tools-filter input[type="search"] { flex: 1 1 14rem; min-width: 0; background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem; font-size: var(--text-sm); color: var(--text); }
.tools-filter input[type="search"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tools-scroll { max-height: min(56vh, 480px); overflow-y: auto; border-radius: var(--radius); overscroll-behavior: contain; }
.tools-scroll > .card { border-radius: var(--radius); }
.tools-filter-none { padding: var(--space-3) var(--space-1); }
@media (prefers-reduced-motion: reduce) { .settings-advanced-chev, .settings-advanced > summary, .settings-fold > summary { transition: none; } }
.settings-warn { font-size: var(--text-sm); color: var(--warn); margin: var(--space-2) 0 0; }
.save-bar { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.save-bar .status { font-size: var(--text-sm); color: var(--text-dim); }

/* toggle switch */
.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch span { position: absolute; inset: 0; border-radius: 11px; background: var(--border); transition: background var(--fast); pointer-events: none; }
.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface-solid); box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform var(--fast); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::after { transform: translateX(16px); }
.switch input:focus-visible + span { box-shadow: var(--focus); }
.segmented { display: inline-flex; padding: 2px; border-radius: var(--radius); background: var(--surface-solid); border: 1px solid var(--border); }
.segmented button { display: inline-flex; align-items: center; gap: 6px; padding: 0.3rem 0.7rem; border: none; border-radius: var(--radius-sm); background: transparent; font-size: var(--text-sm); color: var(--text-dim); }
.segmented button.active { background: var(--accent-soft); color: var(--text); font-weight: 600; }

/* ---------- 10. menus, dialogs, toasts ---------- */
.menu {
  position: absolute; z-index: 30; min-width: 190px; padding: var(--space-1);
  background: var(--surface); border: 1px solid var(--glass-border); border-radius: var(--radius);
  box-shadow: var(--shadow); -webkit-backdrop-filter: blur(var(--blur)); backdrop-filter: blur(var(--blur));
  max-height: 60vh; overflow-y: auto;
}
.menu.floating { position: fixed; }
.menu button {
  display: flex; align-items: center; gap: var(--space-3); width: 100%;
  padding: 0.5rem 0.7rem; border: none; border-radius: var(--radius-sm); background: transparent; text-align: left; font-size: var(--text-sm); color: var(--text);
}
.menu button:hover:not(:disabled), .menu button:focus-visible { background: var(--accent-soft); }
.menu button.danger { color: var(--danger); }
.menu button .ico { color: var(--text-dim); }
.menu button.danger .ico { color: var(--danger); }
.menu .sep { height: 1px; background: var(--border); margin: var(--space-1) var(--space-2); }
/* 0.1.81zt: a check for the chosen one of a set, and a key on the right (the Workspace menu) */
.menu .menu-check { display: inline-flex; color: var(--accent); flex: none; min-width: var(--space-4); }
.menu .menu-hint { margin-left: auto; color: var(--text-faint); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.menu .menu-note { padding: 0.5rem 0.7rem; font-size: var(--text-xs); color: var(--text-dim); }
.dialog { width: min(440px, 100%); padding: var(--space-5); }
.dialog h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 600; font-family: var(--font-display); }
.dialog p { margin: 0 0 var(--space-5); color: var(--text-dim); font-size: var(--text-sm); white-space: pre-line; overflow-wrap: anywhere; }
#dialog-text { max-height: 55vh; overflow-y: auto; }  /* 0.1.6b: a connector call's full content (R4) can be long */
.dialog-buttons { display: flex; justify-content: flex-end; gap: var(--space-2); }
/* 0.1.81zzr (the design chat, gliros-design-zzr-web-review.md §1): a dialog whose buttons are answers: one answer a line,
   the main one on top, Cancel last and quiet */
.dialog-buttons:has(.dialog-choice) { flex-direction: column; align-items: stretch; }
.dialog-buttons:has(.dialog-choice) > #dialog-ok { order: -1; }
.dialog-buttons:has(.dialog-choice) > #dialog-cancel { order: 1; }
.dialog-buttons:has(.dialog-choice) > .btn { width: 100%; justify-content: center; }
.dialog-buttons:has(.dialog-choice) > #dialog-cancel { background: transparent; border-color: transparent; color: var(--text-dim); }
.dialog-buttons:has(.dialog-choice) > #dialog-cancel:hover { color: var(--text); }
.toasts { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; }
.toast { padding: 0.55rem 1rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow); font-size: var(--text-sm); animation: rise var(--medium); pointer-events: auto; }
.toast.error { border-color: var(--danger); }
@keyframes rise { from { transform: translateY(-8px); opacity: 0; } }

/* ---------- 10b. getting models: welcome, model cards, storage (A4) ---------- */
.notice.info { border-color: var(--accent); }
.link-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.3rem 0; border: none; background: none; color: var(--accent); font-size: var(--text-sm); font-weight: 500; }
.link-btn:hover { text-decoration: underline; }
.link-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.error-text { color: var(--danger); }
.icon-btn.danger-hover:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); }
.row-controls { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.row-controls .size { font-size: var(--text-sm); color: var(--text-dim); font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.disk-bar { display: block; width: 100%; margin: var(--space-2) 0 var(--space-1); }

/* this PC's hardware */
.hw { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-2); margin: var(--space-3) 0; }
.hw-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: 0.6rem 0.75rem; border-radius: var(--radius); background: var(--inset); border: 1px solid var(--border); min-width: 0; }
.hw-icon { color: var(--accent); flex: none; margin-top: 2px; }
.hw-text { min-width: 0; }
.hw-item small { display: block; font-size: var(--text-xs); color: var(--text-faint); }
.hw-item strong { display: block; font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* a model to download */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.mc-grid[hidden] { display: none; }
.model-card { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--inset); border: 1px solid var(--border); min-width: 0; }
.model-card.recommended { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--inset)); }
.mc-tag { align-self: flex-start; padding: 0.1rem 0.6rem; border-radius: var(--radius-pill); background: var(--accent); color: var(--bg); font-size: var(--text-xs); font-weight: 600; }
.mc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem var(--space-2); }
.mc-name { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; }
.mc-meta { font-size: var(--text-xs); color: var(--text-dim); }
.mc-head .badges .badge:first-child { margin-left: 0; }
.mc-fit { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.mc-fit.good .dot { background: var(--good); }
.mc-fit.warn .dot { background: var(--warn); }
.mc-fit.bad .dot { background: var(--danger); }
.mc-fit.bad { color: var(--text-dim); }
.mc-size { color: var(--text-dim); }
.mc-desc { margin: 0; font-size: var(--text-sm); color: var(--text-dim); line-height: 1.5; }
.mc-licence { font-size: var(--text-xs); color: var(--text-faint); }
.mc-licence a { color: var(--text-dim); }
.mc-settings .mc-date { white-space: nowrap; }  /* 0.1.62 (E5): "(read 10 Oct 2026)" kept on one line */
/* 0.1.63 (M-list): the signed model list's line above the cards, a card's list note, the "new on the list" line */
.mc-list.warn { color: var(--warn); }
.mc-listinfo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-2); }
.mc-listinfo .settings-hint { margin: 0; }
.mc-new-line { margin: 0 0 var(--space-2); color: var(--text); }
.mc-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: auto; padding-top: var(--space-1); }
.mc-progress { display: flex; flex-direction: column; gap: 4px; flex: 1 1 100%; min-width: 0; }
.mc-progress .progress { width: 100%; }
.mc-progress small { font-size: var(--text-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.mc-progress small.error-text { color: var(--danger); }
.mc-buttons { display: flex; gap: var(--space-2); }
.catalog-view > .mc-grid { margin-bottom: var(--space-2); }

/* the welcome */
.welcome-modal { display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(820px, 100%); overflow: hidden; }
.welcome-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3) 0 var(--space-5); min-height: 48px; }
.wz-steps { display: flex; gap: 6px; }
.wz-dot { width: 22px; height: 4px; border-radius: 2px; background: var(--border); transition: background var(--medium); }
.wz-dot.done { background: var(--accent-soft); }
.wz-dot.active { background: var(--accent); }
.welcome-body { overflow-y: auto; padding: var(--space-2) var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.welcome-body h2 { margin: 0; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.01em; }
.welcome-body h3 { margin: var(--space-2) 0 0; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.welcome-body .lead { margin: 0; color: var(--text-dim); max-width: 60ch; }
.welcome-body .hw { margin: var(--space-1) 0; }
.wz-logo { width: 64px; height: 64px; margin-top: var(--space-2); }
/* Browser version: first start, GlirOS Helper on the graphics card or the processor */
.wz-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin: var(--space-2) 0; }
.wz-choice { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-4); text-align: left;
  border-radius: var(--radius-lg); background: var(--inset); border: 1px solid var(--border); color: var(--text); font: inherit; cursor: pointer;
  transition: border-color var(--fast), background var(--fast), transform var(--fast); }
.wz-choice:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.wz-choice:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wz-choice.recommended { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 60%, var(--inset)); }
.wz-choice:disabled { cursor: not-allowed; opacity: 0.7; }
.wz-choice .mc-tag { position: absolute; top: var(--space-3); right: var(--space-3); }
.wz-choice-head { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.wz-choice-icon { display: inline-flex; color: var(--accent); }
.wz-choice-text { font-size: var(--text-sm); color: var(--text-dim); line-height: 1.5; }
.wz-size { margin: 0; }
.helper-ico { display: inline-flex; vertical-align: -3px; margin-right: 6px; color: var(--accent); }
.wz-points { list-style: none; margin: var(--space-1) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.wz-points li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.wz-point-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.wz-lang { display: flex; align-items: center; gap: var(--space-3); }
.wz-lang small { color: var(--text-dim); font-size: var(--text-sm); }
.wz-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.wz-foot .grow { flex: 1; }
.wz-check { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--good); margin-top: var(--space-2); }
.wz-tip { margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--inset); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-dim); }
.wz-path { display: block; padding: 0.6rem 0.8rem; border-radius: var(--radius); background: var(--inset); border: 1px solid var(--border); }
@media (max-width: 900px) {
  .welcome-modal { max-height: 100%; }
  .welcome-body { padding: var(--space-2) var(--space-4) var(--space-4); }
  .row-controls { flex-wrap: wrap; }
}

/* ---------- 10c. cloud models (C1) ---------- */
.model-cloud { display: inline-flex; color: var(--accent); }
.model-cloud .ico { width: 16px; height: 16px; }
.menu .menu-head { padding: 0.45rem 0.7rem 0.2rem; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; }
.menu .model-item { align-items: flex-start; gap: 1px; }
.menu .model-item.active { background: var(--accent-soft); }
.model-item .cloud-ico { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--accent); }
.composer-hint.cloud { color: var(--accent); }
.helper-note { max-width: var(--chat-max-w); margin: calc(-1 * var(--space-2)) auto var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); border: 1px dashed var(--border); font-size: var(--text-xs); color: var(--text-dim); }
.helper-note a { color: var(--accent); }
.fresh-offer { max-width: var(--chat-max-w); margin: 0 auto var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px dashed var(--border); font-size: var(--text-sm); color: var(--text-dim); }
.fresh-offer p { margin: 0 0 var(--space-2); }
.summary-box.carried { order: 0; flex-basis: auto; max-width: var(--chat-max-w); margin: 0 auto; font-size: var(--text-sm); color: var(--text-dim); }
.language-note { max-width: var(--chat-max-w); margin: 0 auto var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--glass-border); font-size: var(--text-sm); }
.language-note p { margin: 0 0 var(--space-2); }
.language-note small { display: block; margin-top: var(--space-2); color: var(--text-dim); }
.language-note-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mc-langs { display: block; color: var(--text-dim); font-size: var(--text-xs); }
.more-models { margin-top: var(--space-3); }
.more-models > summary { cursor: pointer; color: var(--text-dim); font-size: var(--text-sm); padding: var(--space-2) 0; }
.more-models > .mc-grid { margin-top: var(--space-2); }
.good-text { color: var(--good); }
.cloud-intro { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); margin-top: var(--space-3); border-radius: var(--radius); background: var(--accent-soft); }
.cloud-intro p { margin: 0; font-size: var(--text-sm); }
.cloud-intro p + p { margin-top: var(--space-2); }
.cloud-intro-icon { color: var(--accent); flex: none; margin-top: 2px; }
.cloud-intro + .card { margin-top: var(--space-3); }  /* 0.1.81zzr (design §3) */
.cloud-card + .cloud-card { margin-top: var(--space-3); }
.cloud-head { display: flex; align-items: center; gap: var(--space-3); padding: 0.75rem 0.9rem; }
.cloud-head .text { flex: 1; min-width: 0; }
.cloud-head .text strong { display: block; font-weight: 600; font-size: var(--text-sm); }
.cloud-head .text small { display: block; color: var(--text-dim); font-size: var(--text-xs); word-break: break-all; }
.cloud-logo { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); flex: none; }
.card > .cloud-head + .row, .card > .row + .cloud-chooser, .card > .cloud-chooser + .row { border-top: 1px solid var(--border); }
.key-row input, .web-key-row .key-input, .add-server input, .rename-input {
  flex: 1; min-width: 0; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font-size: var(--text-sm); color: var(--text);
}
.key-row input, .web-key-row .key-input { font-family: var(--mono); }
.rename-input { width: 12rem; flex: none; }
.cloud-status { display: block; font-size: var(--text-xs); color: var(--text-dim); margin-top: 1px; }
.cloud-status.error-text { color: var(--danger); }
.cloud-status.good-text { color: var(--good); }
.cloud-chooser { padding: var(--space-3) 0.9rem; }
.cloud-chooser-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); font-size: var(--text-sm); }
.cloud-search { width: 100%; margin-bottom: var(--space-2); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font-size: var(--text-sm); color: var(--text); }
.cloud-models { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-solid); }
.cloud-models .row { padding: 0.45rem 0.7rem; }
.cloud-models .row + .row { border-top: 1px solid var(--border); }
.cloud-models .row[hidden] { display: none; }
.add-server { flex-wrap: wrap; }
.add-server input[type="text"] { flex: 0 1 11rem; }
.add-server input[type="url"] { flex: 2 1 14rem; }
.add-server input[type="password"] { flex: 1 1 10rem; }
.in-menu { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.in-menu small { font-size: var(--text-xs); color: var(--text-dim); }
.wz-cloud-link { align-self: flex-start; margin-top: calc(-1 * var(--space-1)); }

/* ---------- 11. narrow screens ---------- */
@media (max-width: 900px) {
  .app, .app.with-output, .app.with-output.output-wide, .app.collapsed { grid-template-columns: minmax(0, 1fr); padding: var(--space-2); --sidebar-w: 288px; }
  .app.with-output.output-full .output { position: fixed; left: var(--space-2); right: var(--space-2); top: var(--space-2); bottom: var(--space-2); }
  .narrow-only { display: inline-flex; }
  #collapse-btn { display: none; }
  .sidebar {
    position: fixed; z-index: 30; top: var(--space-2); bottom: var(--space-2); left: var(--space-2); width: min(var(--sidebar-w), 86vw);
    background: var(--glass-strong); transform: translateX(-110%); transition: transform var(--medium);
  }
  .app.drawer-open .sidebar { transform: none; }
  .app.collapsed .sidebar { padding: var(--space-3) var(--space-2); align-items: stretch; }
  .app.collapsed .brand-name, .app.collapsed .label, .app.collapsed .search, .app.collapsed .chat-list { display: revert; }
  .output { position: fixed; z-index: 30; top: var(--space-2); bottom: var(--space-2); right: var(--space-2); width: min(var(--output-w), 94vw); background: var(--glass-strong); }
  .model-btn { max-width: 44vw; }
  .settings-modal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 100%; }
  .settings-nav { flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); padding: var(--space-2); }
  .settings-nav button { white-space: nowrap; }
  .settings-nav-head { display: none; }
  .settings-body { padding: 0 var(--space-4) var(--space-4); }
  .log { padding: var(--space-2) var(--space-2) var(--space-4); }
  .composer { width: calc(100% - 2 * var(--space-1)); }
  .row { flex-wrap: wrap; }
}
@media (max-width: 520px) {
  .chat-title { display: none; }
  .top-actions { margin-left: auto; }
  .msg.user .bubble { max-width: 92%; }
}

/* ---------- 12. reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* focus: these fields show focus on their container instead */
.composer textarea:focus-visible, .search input:focus-visible, .chat-title:focus-visible { box-shadow: none; }

/* ---- voice (0.0.15): dictation and read aloud ---------------------------------------------- */
/* The microphone while listening: red, with a ring that grows with the voice (--level 0..1). */
.mic-btn.listening, .mic-btn.listening:hover:not(:disabled) { color: var(--danger); background: var(--danger-soft); box-shadow: 0 0 0 calc(2px + var(--level, 0) * 7px) var(--danger-soft); transition: box-shadow 80ms linear; }
.mic-btn.busy, .speak-btn.busy { animation: pulse 1.2s ease-in-out infinite; }
.speak-btn.on, .speak-btn.on:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); }
input[type=range] { accent-color: var(--accent); }
.level-meter { display: inline-block; width: 90px; height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.level-meter > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 60ms linear; }
.range-value { min-width: 3.5em; text-align: right; font-size: var(--text-xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .mic-btn.busy, .speak-btn.busy { animation: none; } .mic-btn.listening { transition: none; } }
/* 0.0.15b: Settings > Voice rows keep their title readable with long device or microphone names:
   the controls wrap and a select shortens its text instead of pushing over the title. */
.voice-controls { flex: 0 1 auto; min-width: 0; max-width: 60%; flex-wrap: wrap; justify-content: flex-end; }
.voice-controls select { min-width: 0; max-width: 100%; width: 16rem; text-overflow: ellipsis; }
.row .text small.settings-warn { color: var(--warn); }
@media (max-width: 640px) { .voice-controls { max-width: 100%; } }

/* ---- files and books in a chat (0.0.16) --------------------------------------------------- */
.attached-doc { position: relative; display: flex; align-items: center; gap: var(--space-2); max-width: 260px; height: 64px; padding: 0 2rem 0 0.7rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--inset); }
.attached-doc .doc-text { display: flex; flex-direction: column; min-width: 0; }
.attached-doc strong { font-size: var(--text-sm); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attached-doc small { font-size: var(--text-xs); color: var(--text-dim); }
.attached-doc.uploading small { animation: breathe 1s ease-in-out infinite; }
.attached-doc .remove { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: none; background: transparent; color: var(--text-dim); cursor: pointer; }
.attached-doc .remove:hover { color: var(--text); background: var(--accent-soft); }
.doc-icon { display: inline-grid; place-items: center; color: var(--accent); flex: none; }
.msg-docs { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; margin-bottom: var(--space-2); }
.doc-chip { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 280px; padding: 0.35rem 0.7rem; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--inset); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.tool-file-open { align-self: center; white-space: nowrap; }  /* 0.0.45: "Open in <tool>" beside a chat file */
.doc-chip span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-chip:hover { border-color: var(--accent); }
/* 0.0.17: files a job made sit under its answer, on the left; the job's progress line. */
.msg.assistant .msg-docs { justify-content: flex-start; margin: var(--space-2) 0 0; }
/* 0.0.63: a 3D model in the chat (chat3d.js, player3d.html in a sandboxed frame) */
.msg-attachments { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.msg-models { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.model3d-card { width: min(360px, 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.model3d-card.big { width: 100%; }
.model3d-stage { position: relative; height: 240px; background: var(--inset); }
.model3d-card.big .model3d-stage { height: 60vh; }
.model3d-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.model3d-note { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-3); text-align: center; color: var(--text-dim); font-size: var(--text-sm); }
.model3d-card.failed .model3d-note { color: var(--danger); }
/* 0.0.70: ⛶ when the frame may not go full screen itself -- the card over the whole window */
.model3d-card.full { position: fixed; inset: 0; z-index: 1000; width: auto; border-radius: 0; border: 0; display: flex; flex-direction: column; }
.model3d-card.full .model3d-stage { flex: 1; height: auto; }
.model3d-card.full .model3d-bigger { display: none; }
.model3d-foot { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); flex-wrap: wrap; }
.model3d-name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.model3d-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.model3d-size { color: var(--text-dim); }
.model3d-foot .grow { flex: 1; }
.job-status { display: flex; flex-direction: column; gap: var(--space-2); min-width: min(360px, 70vw); font-size: var(--text-sm); color: var(--text-dim); }
.job-status progress { width: 100%; height: 6px; accent-color: var(--accent); }
.msg.assistant .bubble.thinking:has(.job-status)::after { content: none; }
@media (prefers-reduced-motion: reduce) { .attached-doc.uploading small { animation: none; } }

/* 0.0.18: project mode */
.project-chip { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 220px; padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--glass-border); background: var(--inset); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }
.project-chip:hover { border-color: var(--accent); }
.project-chip.pending { border-style: dashed; color: var(--text-dim); }
.project-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: var(--radius); cursor: pointer; color: var(--text); font-size: var(--text-sm); }
.project-row:hover { background: var(--inset); }
.project-row .project-name { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-row .project-count { color: var(--text-dim); font-size: 0.8em; }
.project-row .caret { transition: transform 0.15s; display: inline-flex; }
.project-row.open .caret { transform: rotate(90deg); }
.project-row .icon-btn { opacity: 0; }
.project-row:hover .icon-btn, .project-row:focus-within .icon-btn, .project-row.menu-open .icon-btn { opacity: 1; }
/* 0.1.81zzz33 (the owner: project names cut to "Sna…"): the + and ⋯ take no room until the row is pointed at, so the name
   has the row; on a touch screen (no pointing) they stay */
@media (hover: hover) {
  .project-row .icon-btn { display: none; }
  .project-row:hover .icon-btn, .project-row:focus-within .icon-btn, .project-row.menu-open .icon-btn { display: inline-flex; }
}
/* 0.1.81zzz34 (the owner's recording: a project row grew taller when pointed at and pushed the rows below down): its
   buttons are as small as a chat's ⋯ and take no height of their own, so the row is the same height either way */
.project-row { min-height: 2.2rem; box-sizing: border-box; }
.project-row .icon-btn { width: 1.65rem; height: 1.65rem; margin-block: -0.4rem; flex: none; }
/* 0.1.81zzz33: where an answer is being written (a soft pulse), and an answer not seen yet (a dot) -- on the chat and on
   its project, folded or not */
.activity-mark { flex: none; width: var(--space-2); height: var(--space-2); border-radius: 50%; margin: 0 var(--space-1); }
.activity-mark.unseen { background: var(--accent); box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 22%, transparent); }
.activity-mark.working { background: var(--accent); animation: activity-pulse var(--pulse) ease-in-out infinite; }
@keyframes activity-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .activity-mark.working { animation: none; opacity: .7; } }
.chat-item.unseen .title, .project-row.unseen .project-name { font-weight: 600; }
.project-chats { margin-left: 0.9rem; border-left: 1px solid var(--glass-border); padding-left: 0.3rem; }
.dialog-extra { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
/* 0.0.30: sharing a tool's snapshot */
.share-expiry { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.share-expiry select { max-width: 55%; }
.share-size { color: var(--text-faint); }
.share-list-title { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; }
.share-row .row-controls { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* 0.0.79: Settings > Tools > Sharing: the GlirOS account */
.share-account { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
/* 0.0.97 (the owner's screenshot: the account card's text one word a line): the state may wrap; the text keeps room */
.row-controls.share-account { flex: 0 1 auto; max-width: 55%; min-width: 0; }
.share-account-state { font-size: var(--text-sm); color: var(--text-dim); flex: 1 1 100%; text-align: right; }
.share-advanced { margin: var(--space-3) 0; }
.share-advanced > summary { cursor: pointer; color: var(--text-dim); font-size: var(--text-sm); padding: var(--space-2) 0; }
.share-account-state.ok { color: var(--accent); }
.dialog-input { width: 100%; padding: 0.55rem 0.7rem; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--inset); color: var(--text); font: inherit; }
.dialog-suggestions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.output-files-section { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); margin: var(--space-3) 0 var(--space-1); padding: 0 var(--space-4); }
.output-files-section:first-child { margin-top: var(--space-2); }
.output-files-chat { font-size: var(--text-sm); font-weight: 600; margin: var(--space-2) 0 var(--space-1); padding: 0 var(--space-4); color: var(--text); }
.output-doc-row { display: flex; align-items: center; gap: 0.4rem; width: 100%; padding: 0.45rem var(--space-4); border: 0; border-radius: var(--radius); background: none; color: var(--text); font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; }
.output-doc-row:hover { background: var(--inset); }
.output-doc-row small { color: var(--text-dim); margin-left: auto; white-space: nowrap; }

/* 0.0.19: the project folder */
.project-chip .chip-folder { color: var(--text-dim); }
.project-chip.needs-permission { border-color: var(--warn); }
.folder-call { display: inline-flex; flex-direction: column; gap: var(--space-2); margin: var(--space-1) var(--space-2) var(--space-1) 0; padding: 0.35rem 0.65rem; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--inset); font-size: var(--text-sm); color: var(--text-dim); }
.folder-call.folder-note { cursor: pointer; }
.folder-call.folder-note:hover { border-color: var(--accent); color: var(--text); }
.folder-call-head { display: inline-flex; align-items: center; gap: 0.35rem; }
.folder-call.change-card { display: flex; color: var(--text); padding: 0.6rem 0.75rem; margin: var(--space-2) 0; }
/* 0.1.81zzz29: an answer's piece of code put into its file by GlirOS; a block that only quotes the file's lines */
.folder-call.piece-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-border)); }
.piece-card .piece-test { display: inline-flex; align-items: center; gap: var(--space-1); }
.piece-note { font-size: var(--text-xs); color: var(--text-dim); margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
.code.piece-quote { opacity: .8; }
.folder-call.change-card.applied { opacity: 0.8; }
.change-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.change-actions .change-status { flex: 1; min-width: 120px; color: var(--text-dim); }
.change-card.applied .change-status { color: var(--accent); }
.output-folder-dir { display: flex; align-items: center; gap: 0.35rem; padding: 0.3rem var(--space-4); font-size: var(--text-sm); color: var(--text-dim); }
.output-folder-btn { margin: 0 var(--space-4) var(--space-2); align-self: flex-start; }
.tool-used.folder-read { cursor: pointer; }

/* 0.0.20: the user's own folder actions (rename/move, new folder, save into the folder) */
.output-folder-row { display: flex; align-items: center; }
.output-folder-row > :first-child { flex: 1; min-width: 0; }
.output-folder-move, .output-save-folder-btn { flex-shrink: 0; width: 26px; height: 26px; }
.output-folder-move { opacity: 0; }
.output-folder-row:hover .output-folder-move, .output-folder-move:focus-visible { opacity: 1; }
@media (hover: none) { .output-folder-move { opacity: 0.7; } }
.output-folder-tools { display: flex; gap: var(--space-2); padding: var(--space-1) var(--space-4) var(--space-2); }
.copy-list { display: flex; flex-direction: column; gap: 2px; }
/* 0.0.26: a task plan as a checklist card in the answer */
/* 0.1.9: a quiet tip about a tool the chat used (tips.js) */
.tool-tip { align-self: center; max-width: min(640px, 100%); margin: 6px 0 2px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: var(--text-sm); color: var(--text-dim); animation: tool-tip-in .3s ease; }
.tool-tip-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-tip-icon { display: inline-flex; color: var(--accent); }
.tool-tip-text { flex: 1 1 auto; }
.tool-tip-open { background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; padding: 2px 4px; }
.tool-tip-open[disabled] { text-decoration: none; opacity: .6; cursor: default; }
.tool-tip-close { background: none; border: 0; color: inherit; cursor: pointer; display: inline-flex; padding: 2px; opacity: .7; }
.tool-tip-examples { margin-top: 6px; }
@keyframes tool-tip-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tool-tip { animation: none; } }
/* 0.1.8b (TI1): text a model wrote before a data tool answered, folded away */
.before-tool { margin: 4px 0 8px; font-size: .9em; color: var(--text-dim); }
.before-tool > summary { cursor: pointer; font-style: italic; }
.before-tool[open] > p { text-decoration: line-through; text-decoration-color: rgba(127,127,127,.5); }
.plan-card { margin: 8px 0; padding: 10px 12px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.plan-head { display: flex; align-items: center; gap: 8px; }
.plan-head .ico { color: var(--accent); flex: none; }
.plan-head strong { flex: 1; min-width: 0; }
.plan-count { color: var(--text-dim); font-size: var(--text-sm); white-space: nowrap; }
progress.plan-bar { display: block; width: 100%; height: 4px; margin: 8px 0 6px; border: 0; border-radius: 4px; overflow: hidden; background: rgba(127,127,127,.18); appearance: none; }
progress.plan-bar::-webkit-progress-bar { background: rgba(127,127,127,.18); }
progress.plan-bar::-webkit-progress-value { background: var(--accent); transition: width .3s; }
progress.plan-bar::-moz-progress-bar { background: var(--accent); }
.plan-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--text-sm); }
.plan-step { display: flex; gap: 8px; align-items: baseline; }
.plan-mark { width: 14px; flex: none; text-align: center; color: var(--text-dim); }
.plan-step.done .plan-mark { color: var(--accent); }
.plan-step.now .plan-mark { color: var(--accent); animation: plan-pulse 1.4s ease-in-out infinite; }
.plan-step.now .plan-text { font-weight: 600; }
.plan-step.skipped .plan-text { text-decoration: line-through; color: var(--text-dim); }
.plan-text { min-width: 0; }
/* 0.0.97: a plan carried on in a later answer (that card has it), and one going on from an earlier answer */
.plan-card.continued { opacity: .72; }
.plan-continued-note, .plan-carried { display: block; color: var(--text-dim); font-size: var(--text-sm); margin-top: 6px; }
.plan-carried { margin-top: 2px; }
.plan-note { display: block; color: var(--text-dim); font-size: var(--text-sm); }
.plan-continue { display: none; margin-top: 8px; }
.msg.assistant.last .bubble:not(.thinking) .plan-card.open .plan-continue { display: inline-flex; }
.msg.assistant .bubble:not(.thinking) .plan-step.now .plan-mark { animation: none; }
.plan-step.now .pm-wait { display: none; }
.msg.assistant .bubble:not(.thinking) .plan-step.now .pm-run { display: none; }
.msg.assistant .bubble:not(.thinking) .plan-step.now .pm-wait { display: inline; }
.msg.assistant.last .bubble.thinking .plan-step.now .plan-mark { animation: plan-pulse 1.4s ease-in-out infinite; }
@keyframes plan-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .plan-step.now .plan-mark { animation: none !important; } }
/* 0.0.53: plan card actions, "from you", the list card, the Tasks view, the progress report */
.plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.plan-actions .plan-continue { margin-top: 0; }
/* 0.1.34 (REACH): a done step whose code GlirOS can't run here (PHP, Python, SQL ...) */
.plan-written { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: var(--text-2xs); line-height: 17px; color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); vertical-align: 1px; white-space: nowrap; }
.plan-by { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: var(--text-xs); line-height: 17px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); vertical-align: 1px; white-space: nowrap; }
.todo-card { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.todo-card .ico { color: var(--accent); flex: none; }
.todo-card strong { flex: 1; min-width: 0; }
.todo-line { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: var(--text-sm); margin: 4px 0; }

.tasks-view { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 18px; padding: 14px 16px 24px; background: var(--surface-solid); }
.tasks-section h3 { margin: 0 0 8px; font-size: var(--text-sm); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--text-dim); }
.tasks-hint, .tasks-empty { margin: 4px 0; color: var(--text-dim); font-size: var(--text-sm); }
.todo-list, .task-plan { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.todo-head, .task-plan-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-head strong, .task-plan-head strong { flex: 1; min-width: 0; }
.task-plan-head small { width: 100%; color: var(--text-dim); font-size: var(--text-xs); }
.todo-items { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.todo-item { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 2px 4px; border-radius: 8px; }
.todo-item:hover { background: rgba(127,127,127,.08); }
.todo-item input[type=checkbox] { width: 17px; height: 17px; flex: none; accent-color: var(--accent); cursor: pointer; }
.todo-item label { flex: 1; min-width: 0; cursor: pointer; overflow-wrap: anywhere; }
.todo-item.done label, .todo-item.done > span:last-child { text-decoration: line-through; color: var(--text-dim); }
.todo-remove { opacity: 0; transition: opacity .15s; }
.todo-item:hover .todo-remove, .todo-remove:focus-visible { opacity: 1; }
/* 0.1.75 (TASKS-DUE): a task's due date, overdue marked, and its date editor */
.todo-due { flex: none; font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }
.todo-item.late .todo-due { color: var(--danger); font-weight: 600; }
.todo-item.done .todo-due { text-decoration: line-through; }
/* 0.1.81w (DUE-SOON): what is due soon, on top of the Tasks view; the other chats' under their own heading */
.tasks-soon .todo-soon-list { flex: none; color: var(--text-dim); font-size: var(--text-xs); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks-soon .tasks-soon-other { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); color: var(--text-dim); font-weight: 600; }
.tasks-soon .todo-soon-chat { flex: none; font-size: var(--text-xs); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-date { opacity: 0; transition: opacity var(--fast); }
.todo-item:hover .todo-date, .todo-date:focus-visible, .todo-date[aria-expanded="true"] { opacity: 1; }
.todo-due-edit { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-1) var(--space-1) var(--space-2) var(--space-6); }
.todo-due-edit input { font: inherit; color: var(--text); background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.todo-add, .todo-new, .task-add, .task-reword { flex: 1; min-width: 0; width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; font-size: var(--text-sm); }
.todo-new-row { margin-top: 4px; }
.task-badge { font-size: var(--text-2xs); padding: 1px 8px; border-radius: 999px; background: rgba(127,127,127,.16); color: var(--text-dim); white-space: nowrap; }
.task-badge.live { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.task-badge.finished { color: var(--text); }
.task-timeline { list-style: none; margin: 6px 0 4px; padding: 0 0 0 4px; position: relative; }
.task-timeline::before { content: ""; position: absolute; left: 14px; top: 10px; bottom: 10px; width: 2px; background: rgba(127,127,127,.22); border-radius: 2px; }
.task-step { position: relative; padding: 2px 0; }
.task-step-head { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 4px 6px 4px 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; border-radius: 8px; }
.task-step-head:hover { background: rgba(127,127,127,.08); }
.task-dot { position: relative; z-index: 1; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-2xs); font-weight: 600; background: var(--surface-solid); border: 2px solid rgba(127,127,127,.35); color: var(--text-dim); }
.task-step.done .task-dot { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.task-step.now .task-dot { border-color: var(--accent); color: var(--accent); }
/* 0.1.43: only a plan that is running now pulses (a stopped one looked as if it were still working) */
.task-plan.live .task-step.now .task-dot { animation: plan-pulse 1.4s ease-in-out infinite; }
.task-step.next .task-dot { border-color: var(--accent); color: var(--accent); }
.task-step.skipped .task-step-text { text-decoration: line-through; color: var(--text-dim); }
.task-step.now .task-step-text { font-weight: 600; }
.task-step-text { flex: 1; min-width: 0; padding-top: 1px; overflow-wrap: anywhere; }
.task-note { display: block; margin: -2px 0 2px 34px; color: var(--text-dim); font-size: var(--text-sm); }
.task-details { margin: 4px 0 8px 34px; padding: 8px 10px; border-radius: 10px; background: rgba(127,127,127,.07); display: flex; flex-direction: column; gap: 8px; }
.task-result { max-height: 260px; overflow: auto; font-size: var(--text-sm); }
.task-edit-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.task-add-row { margin-top: 6px; }
.task-add-where { padding: 5px 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; font-size: var(--text-sm); }
.task-size-note { display: block; margin-top: 4px; color: var(--text-dim); font-size: var(--text-sm); }
.task-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.task-files-label { color: var(--text-dim); font-size: var(--text-sm); }
.progress-card { display: flex; flex-direction: column; gap: 6px; min-width: min(420px, 100%); }
.progress-head { display: flex; align-items: center; gap: 8px; }
.progress-head .ico { color: var(--accent); flex: none; }
.progress-head strong { flex: 1; min-width: 0; }
.progress-card progress.plan-bar { margin: 2px 0 0; }
.progress-count { color: var(--text-dim); font-size: var(--text-sm); }
.progress-group summary { cursor: pointer; font-size: var(--text-sm); font-weight: 600; color: var(--text-dim); padding: 2px 0; }
.progress-steps { margin: 2px 0 4px; padding-left: 26px; font-size: var(--text-sm); }
.progress-steps li { margin: 1px 0; }
.progress-steps.done li::marker { color: var(--accent); }
.progress-steps.now li { font-weight: 600; }
.progress-steps.skipped li .plan-text { text-decoration: line-through; color: var(--text-dim); }
.progress-files { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-dim); }
.progress-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.todo-items.readonly .todo-item { min-height: 24px; }
.todo-box { flex: none; width: 16px; height: 16px; border: 1.5px solid rgba(127,127,127,.5); border-radius: 4px; display: grid; place-items: center; font-size: var(--text-xs); color: var(--on-accent); }
.todo-item.done .todo-box { background: var(--accent); border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .task-step.now .task-dot { animation: none; } }

/* 0.0.25: a batch of folder changes -- each step with ✓ (done), ✗ (a problem) or • (to do) */
.batch-list { list-style: none; margin: 6px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-sm); max-height: 260px; overflow: auto; }
.batch-step { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-family: var(--mono); font-size: var(--text-sm); }
.batch-mark { width: 14px; text-align: center; color: var(--text-dim); flex: none; }
.batch-step.done .batch-mark { color: var(--accent); }
.batch-step.bad .batch-mark, .batch-problem { color: var(--danger); }
.batch-problem { flex-basis: 100%; padding-left: 20px; font-family: inherit; }
.copy-row { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.copy-row small { color: var(--text-dim); }
.output-trash { margin: var(--space-1) var(--space-4) var(--space-2); font-size: var(--text-sm); }
.output-trash summary { cursor: pointer; color: var(--text-dim); padding: 0.3rem 0; }
.output-trash-row { display: flex; align-items: center; gap: var(--space-2); padding: 0.2rem 0; }
.output-trash-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-trash-row small { color: var(--text-faint); white-space: nowrap; }
.output-trash-empty { margin-top: var(--space-2); }
.output-folder-delete:hover { color: var(--danger); }
/* 0.0.21: the folder tree folds; + for a new folder at the top */
.output-folder-head { display: flex; align-items: center; gap: var(--space-1); padding-right: var(--space-2); }
.output-folder-fold { display: inline-flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.output-folder-head .output-folder-mkdir { width: 24px; height: 24px; flex-shrink: 0; }
button.output-folder-dir { width: 100%; border: 0; background: none; font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer; border-radius: var(--radius); }
button.output-folder-dir:hover { background: var(--inset); color: var(--text); }
.output-folder-dir small { margin-left: auto; color: var(--text-faint); }
.output-folder-caret { display: inline-flex; width: 12px; }
.semantic-status { color: var(--text-dim); }

/* ---- pictures GlirOS made (0.0.23) ---- */
.image-btn.on { color: var(--accent); background: var(--accent-soft); }
.msg-pictures.made { justify-content: flex-start; max-width: min(100%, 560px); margin-top: var(--space-2); }
.msg-pictures.made .made-picture { position: relative; margin: 0; }
.msg-pictures.made .picture { border-color: var(--border); }
.msg-pictures.made img { max-width: min(100%, 512px); max-height: 512px; width: auto; height: auto; object-fit: contain; }
.msg-pictures.made .picture.missing { width: 256px; height: 192px; }
.msg-pictures.made .picture-save { position: absolute; top: var(--space-2); right: var(--space-2); background: var(--glass); backdrop-filter: blur(6px); opacity: 0; transition: opacity .15s; }
.msg-pictures.made .made-picture:hover .picture-save, .msg-pictures.made .picture-save:focus-visible { opacity: 1; }
@media (hover: none) { .msg-pictures.made .picture-save { opacity: 1; } }
.image-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }
.image-model-card .row { align-items: flex-start; }
.image-model-card .text small { display: block; }
.image-model-card .fit.good { color: var(--good); }
.image-model-card .fit.warn, .image-model-card .fit.ok { color: var(--warn); }
.image-model-card .fit.bad { color: var(--danger); }
.image-model-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); flex-shrink: 0; }
.image-model-card + .image-model-card { margin-top: var(--space-2); }

/* ---- the "making a picture" view (0.0.24) ---- */
.picture-progress { position: relative; width: 420px; max-width: 100%; border-radius: calc(var(--radius) * 1.5); overflow: hidden; background: var(--inset); isolation: isolate; }
.picture-progress .pp-blob { position: absolute; width: 70%; height: 70%; border-radius: 50%; filter: blur(38px); opacity: .75; animation: pp-drift 7s ease-in-out infinite alternate; }
.picture-progress .pp-blob.a { background: #3fae84; left: -10%; top: -10%; }
.picture-progress .pp-blob.b { background: #4f7bd8; right: -15%; top: 20%; animation-duration: 9s; animation-delay: -3s; }
.picture-progress .pp-blob.c { background: #c86fb0; left: 20%; bottom: -20%; animation-duration: 11s; animation-delay: -5s; }
@keyframes pp-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(18%, 12%) scale(1.15); } 100% { transform: translate(-10%, 22%) scale(.9); } }
.picture-progress .pp-glass { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  background: linear-gradient(120deg, rgba(255,255,255,.06), rgba(255,255,255,.14) 45%, rgba(255,255,255,.06) 60%); background-size: 250% 100%; animation: pp-shine 2.8s linear infinite; padding: var(--space-3); text-align: center; }
@keyframes pp-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.picture-progress .pp-center { position: relative; width: 64px; height: 64px; display: grid; place-items: center; }
.picture-progress .pp-ring { position: absolute; inset: 0; }
.picture-progress .pp-ring svg { position: absolute; inset: 0; width: 64px; height: 64px; transform: rotate(-90deg); }
.picture-progress .pp-track { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 3; }
.picture-progress .pp-bar { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 100; transition: stroke-dasharray .4s ease; }
.picture-progress .pp-ring.indeterminate svg { animation: pp-spin 1.1s linear infinite; }
.picture-progress .pp-ring.indeterminate .pp-bar { stroke-dasharray: 28 100; }
@keyframes pp-spin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.picture-progress .pp-pct { position: relative; font-size: var(--text-sm); font-weight: 600; color: #fff; }
.picture-progress .pp-label { font-size: var(--text-sm); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); max-width: 90%; }
.picture-progress.done .pp-blob, .picture-progress.done .pp-glass { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .picture-progress .pp-blob, .picture-progress .pp-glass, .picture-progress .pp-ring.indeterminate svg { animation: none; } }
.msg.assistant .bubble:has(.picture-progress) { background: transparent; border: 0; padding: 0; }
.msg.assistant .bubble.thinking:has(.picture-progress)::after { content: none; }

/* ---- the picture tool (0.0.24) ---- */
.picture-tool { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); height: 100%; overflow: auto; box-sizing: border-box; }
.picture-tool .pt-top { display: flex; flex-direction: column; gap: var(--space-2); position: relative; z-index: 5; }
.picture-tool .pt-prompt { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; font: inherit; color: var(--text); background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }
.picture-tool .pt-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.picture-tool .pt-make.stop { background: var(--danger); color: var(--on-danger); }
.picture-tool .pt-add-wrap { position: relative; }
.picture-tool .pt-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 210px; max-height: 320px; overflow: auto; padding: var(--space-1);
  background: var(--surface-solid); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow-soft), 0 8px 28px rgba(0,0,0,.25); }
.picture-tool .pt-menu-head { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: var(--space-2) var(--space-2) var(--space-1); }
.picture-tool .pt-menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 6px var(--space-2); border-radius: calc(var(--radius) / 1.5); cursor: pointer; font: inherit; }
.picture-tool .pt-menu-item:hover, .picture-tool .pt-menu-item:focus-visible { background: var(--accent-soft); }
.picture-tool .pt-controls { display: flex; flex-direction: column; gap: var(--space-2); }
.picture-tool .pt-control { display: grid; grid-template-columns: 6.5rem 1fr auto; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); border-radius: var(--radius); background: var(--inset);
  animation: pt-in .18s ease-out; }
@keyframes pt-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.picture-tool .pt-label { font-size: var(--text-sm); color: var(--text-dim); }
.picture-tool .pt-input { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
.picture-tool .pt-input input[type=range] { flex: 1; min-width: 90px; accent-color: var(--accent); }
.picture-tool .pt-input input[type=text], .picture-tool .pt-input input[type=number], .picture-tool .pt-input select { flex: 1; min-width: 0; color: var(--text); background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.55rem; font: inherit; font-size: var(--text-sm); }
.picture-tool .pt-value { min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.picture-tool .pt-mini { gap: var(--space-1); }
.picture-tool .pt-mini .btn.on { background: var(--accent-soft); color: var(--accent); }
.picture-tool .pt-remove { width: 26px; height: 26px; }
.picture-tool > * { flex-shrink: 0; }
.picture-tool .pt-preview { flex: 1 0 auto; min-height: 220px; display: flex; align-items: center; justify-content: center; }
.picture-tool .pt-canvas { max-width: 100%; max-height: 60vh; border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0,0,0,.25); }
.picture-tool .pt-empty { color: var(--text-dim); font-size: var(--text-sm); text-align: center; max-width: 30ch; }
.picture-tool .pt-crop-stage { position: relative; display: inline-block; cursor: crosshair; touch-action: none; user-select: none; }
.picture-tool .pt-crop-stage .pt-canvas { display: block; }
.picture-tool .pt-crop-mark { position: absolute; border: 2px dashed #fff; box-shadow: 0 0 0 9999px rgba(0,0,0,.45); pointer-events: none; }
.picture-tool .pt-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.picture-tool .pt-size { margin-left: auto; color: var(--text-dim); font-size: var(--text-sm); }
.msg-pictures.made .picture-buttons { position: absolute; top: var(--space-2); right: var(--space-2); display: flex; gap: var(--space-1); opacity: 0; transition: opacity .15s; }
.msg-pictures.made .made-picture:hover .picture-buttons, .msg-pictures.made .picture-buttons:focus-within { opacity: 1; }
@media (hover: none) { .msg-pictures.made .picture-buttons { opacity: 1; } }
.msg-pictures.made .picture-buttons .icon-btn { background: var(--glass); backdrop-filter: blur(6px); }
.msg-pictures.made .picture-buttons .picture-save { position: static; opacity: 1; }
.picture-tool .pt-preview { max-height: 55vh; }
.picture-tool .pt-preview.zoomed { display: block; overflow: auto; }
.picture-tool .pt-zoom-view { width: max-content; min-width: 100%; display: flex; justify-content: center; }
.picture-tool .pt-zoom-view .pt-canvas { max-height: none; }
.msg-pictures .user-picture { position: relative; margin: 0; }
/* 0.1.75c: a picture the user added: its buttons (edit, timeline, Open in <tool>) in one row over its corner, as a made picture's */
.msg-pictures .user-picture .picture-buttons { position: absolute; top: var(--space-1); right: var(--space-1); display: flex; gap: var(--space-1); opacity: 0; transition: opacity var(--fast); }
.msg-pictures .user-picture:hover .picture-buttons, .msg-pictures .user-picture .picture-buttons:focus-within { opacity: 1; }
@media (hover: none) { .msg-pictures .user-picture .picture-buttons { opacity: 1; } }
.msg-pictures .user-picture .picture-buttons .icon-btn { width: 28px; height: 28px; background: var(--glass); backdrop-filter: blur(6px); }

/* ---- 0.0.28: conversation mode (conversation.js) -------------------------------------------------- */
.conv-btn.on { color: var(--accent); }
.conversation {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
  color: var(--text); animation: conv-in .25s ease-out;
}
@keyframes conv-in { from { opacity: 0; } to { opacity: 1; } }
.conv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; }
.conv-top strong { font-size: var(--text-md); letter-spacing: .02em; opacity: .85; }
.conv-top-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.conv-cloud { color: var(--text-dim); font-size: var(--text-sm); }
.conv-model { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-solid); color: inherit; font: inherit; font-size: var(--text-sm); cursor: pointer; max-width: 260px; }
.conv-model span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 0.1.20 (the owner, on a 4K screen: "the chat boxes end up in the right bottom corner"): three columns -- the orb in the
   middle of the screen, the words centred in the right-hand space, both in the middle of the height; sizes grow with
   the screen, and the bubbles sit apart like text messages */
.conv-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center;
  gap: clamp(24px, 4vw, 120px); padding: 0 clamp(24px, 4vw, 120px); }
.conv-stage { grid-column: 2; width: clamp(260px, 28vw, 620px); min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 2.2vh, 40px); }
.conv-status { margin: 0; font-size: clamp(18px, 1.1vw, 26px); font-weight: 500; min-height: 1.4em; text-align: center; }
.conv-hint { margin: 0; color: var(--text-dim); font-size: clamp(13px, .75vw, 17px); text-align: center; max-width: 42ch; }
.conv-transcript { grid-column: 3; justify-self: center; align-self: center; width: min(100%, clamp(320px, 24vw, 560px)); max-height: min(74vh, 1000px);
  display: flex; flex-direction: column; gap: clamp(12px, 1.2vh, 22px); overflow-y: auto; padding: 16px 6px; scrollbar-width: thin; }
.conv-transcript > :first-child { margin-top: auto; }  /* (the newest at the bottom, and the top still scrolls) */
.conv-bubble { padding: clamp(10px, .6vw, 14px) clamp(14px, .9vw, 20px); border-radius: 20px; font-size: clamp(14px, .82vw, 19px); line-height: 1.5;
  max-width: 86%; white-space: normal; overflow-wrap: anywhere;
  background: var(--surface-solid); border: 1px solid var(--border);
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; flex: none; animation: conv-bubble-in .25s ease-out; }
.conv-bubble.user { align-self: flex-end; border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--accent) 24%, transparent); }
.conv-bubble.assistant { align-self: flex-start; border-bottom-left-radius: 6px; }
.conv-bubble.assistant:empty::before { content: "…"; color: var(--text-dim); }
/* your words on their way: the bubble shows as soon as you stop talking, three dots until they're written down */
.conv-bubble.pending { min-width: 64px; display: flex; gap: 5px; justify-content: center; align-items: center; min-height: 2.4em; }
.conv-bubble.pending::before, .conv-bubble.pending::after, .conv-bubble.pending > i { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .5; animation: conv-dot 1.1s ease-in-out infinite; }
.conv-bubble.pending > i { animation-delay: .35s; }
.conv-bubble.pending::after { animation-delay: .7s; }
@keyframes conv-dot { 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes conv-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.conv-bar { display: flex; align-items: center; gap: 10px; padding: 14px 20px 20px; max-width: 760px; width: 100%; margin: 0 auto; }
.conv-input { flex: 1; min-width: 0; padding: 11px 16px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-solid); color: inherit; font: inherit; }
.conv-bar .icon-btn { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.conv-pause { background: var(--surface-solid); border: 1px solid var(--border); }
.conv-pause.on { color: var(--accent); }
.conv-end { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }

/* the orb: calm when paused, breathing while it listens (bigger with the voice), turning while it thinks,
   pulsing while it speaks. 0.0.89 (the owner: "the globe could fade better in with the environment"): a soft
   light in the accent colour with a feathered edge and a glow around it, in the theme's own colours (no dark ball);
   states change gently. */
.conv-orb { --level: 0; position: relative; width: clamp(200px, 17vw, 400px); max-width: 46vw; aspect-ratio: 1; isolation: isolate; }
.conv-orb::before {
  content: ""; position: absolute; inset: -38%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 14%, transparent) 45%, transparent 100%);
  filter: blur(22px); opacity: calc(.6 + var(--level) * .4); transform: scale(calc(.92 + var(--level) * .18));
  transition: opacity .6s ease, transform .3s ease;
}
.conv-orb-core, .conv-orb-ring { position: absolute; inset: 0; border-radius: 50%; }
.conv-orb-core {
  background:
    radial-gradient(circle at 38% 32%, color-mix(in srgb, #fff 75%, transparent) 0%, transparent 40%),
    radial-gradient(circle at 64% 70%, color-mix(in srgb, var(--accent) 55%, #9fd6ff) 0%, transparent 58%),
    radial-gradient(closest-side, color-mix(in srgb, var(--accent) 78%, var(--bg)) 0%,
      color-mix(in srgb, var(--accent) 55%, var(--bg)) 62%, color-mix(in srgb, var(--accent) 30%, transparent) 100%);
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, rgba(0,0,0,.55) 90%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 76%, rgba(0,0,0,.55) 90%, transparent 100%);
  transform: scale(calc(0.9 + var(--level) * 0.25)); transition: transform .12s ease-out, filter .6s ease, opacity .6s ease;
}
.conv-orb-ring { border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; filter: blur(.5px); }
.conv-orb.paused .conv-orb-core { filter: saturate(.35) brightness(.95); opacity: .7; transform: scale(.85); }
.conv-orb.paused::before { opacity: .25; }
.conv-orb.listening .conv-orb-ring { animation: conv-ring 2.6s ease-out infinite; }
/* 0.1.20: someone is heard -- the ring quicker and brighter, so you know it's taking your words */
.conv-orb.listening.hearing .conv-orb-ring { animation-duration: 1.1s; border-color: var(--accent); border-width: 2px; }
.conv-orb.listening.hearing::before { opacity: calc(.75 + var(--level) * .25); }
.conv-orb.transcribing .conv-orb-core, .conv-orb.voice .conv-orb-core { animation: conv-breathe 1.4s ease-in-out infinite; }
.conv-orb.thinking .conv-orb-core { animation: conv-turn 4s linear infinite; filter: hue-rotate(20deg); }
.conv-orb.thinking::before { animation: conv-glow 2.4s ease-in-out infinite; }
/* speaking: the orb follows the voice's own loudness (--level, from the sound being played), so it moves with the
   words; listening: with the user's voice. Awake, it floats a little; the light inside drifts slowly. */
.conv-orb.speaking .conv-orb-core { transform: scale(calc(0.92 + var(--level) * 0.16)); filter: brightness(calc(1 + var(--level) * 0.18)); }
.conv-orb.speaking::before { opacity: calc(.55 + var(--level) * .45); transform: scale(calc(.95 + var(--level) * .22)); }
.conv-orb:not(.paused) { animation: conv-float 7s ease-in-out infinite; }
.conv-orb:not(.paused) .conv-orb-core::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in srgb, #fff 35%, transparent), transparent 35%);
  animation: conv-drift 9s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes conv-float { 50% { translate: 0 -5px; } }
@keyframes conv-drift { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(40deg) scale(1.06); } }
@keyframes conv-glow { 50% { opacity: .95; transform: scale(1.06); } }
@keyframes conv-ring { from { transform: scale(.95); opacity: .55; } to { transform: scale(1.4); opacity: 0; } }
@keyframes conv-breathe { 50% { transform: scale(.95); filter: brightness(1.15); } }
@keyframes conv-turn { to { transform: rotate(360deg); } }
@keyframes conv-speak { 50% { transform: scale(1.04); filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .conv-orb, .conv-orb *, .conv-orb::before, .conv-orb-core::after, .conv-bubble, .conv-bubble::before, .conv-bubble::after { animation: none !important; } }
@media (max-width: 900px) {
  .conv-main { display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: 0 16px; }
  .conv-stage { width: 100%; }
  .conv-transcript { width: min(100%, 560px); max-height: 34vh; }
}

/* 0.0.32: memory is low (desktop app) */
.memory-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 auto var(--space-2); width: min(100%, 860px);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--warn); border-radius: var(--radius); background: var(--surface); font-size: var(--text-sm); }
.memory-bar[hidden] { display: none; }
.memory-bar .grow { flex: 1; min-width: 12em; }


/* 0.0.35: Settings > Models > Import a model (importmodel.js) */
.import-files { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; }
.import-file { display: flex; flex-direction: column; gap: 2px; }
.import-file strong { font-weight: 600; overflow-wrap: anywhere; }
.import-file small { color: var(--text-dim); overflow-wrap: anywhere; }
.import-file.bad strong { color: var(--danger); }
.import-file .badge { align-self: flex-start; margin-top: 2px; }

/* 0.0.37: the side panel's tabs (output.js sheets) */
.output-sheets[hidden] { display: none; }
.output-sheets { display: flex; gap: 4px; padding: var(--space-2) var(--space-2) 0; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--border); }
.output-sheet { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 220px; border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: transparent; }
.output-sheet.active { background: var(--accent-soft); border-color: var(--accent-soft); }
.output-sheet-open { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 6px 4px 6px 10px; background: none; border: none; color: inherit; cursor: pointer; font-size: var(--text-sm); }
.output-sheet-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.output-sheet-close { display: flex; align-items: center; padding: 6px 8px 6px 4px; background: none; border: none; color: var(--text-dim); cursor: pointer; }
.output-sheet-close:hover, .output-sheet-open:hover { color: var(--text); }

/* 0.0.37: a document's overview (docview.js) */
.docview { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); overflow-y: auto; height: 100%; box-sizing: border-box; }
.docview-head { display: flex; flex-direction: column; gap: var(--space-2); }
.docview-title { display: flex; gap: var(--space-2); align-items: flex-start; }
.docview-title strong { display: block; font-size: var(--text-lg); overflow-wrap: anywhere; }
.docview-title small { color: var(--text-dim); }
.docview-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.docview-search { flex: 1 1 160px; min-width: 120px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: transparent; color: inherit; font: inherit; }
.docview-summary { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.docview-summary summary { cursor: pointer; font-weight: 600; }
.docview-hits { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); }
.docview-hits-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.docview-hit { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 6px 8px; border-radius: var(--radius-sm); background: none; border: none; color: inherit; cursor: pointer; }
.docview-hit:hover { background: var(--accent-soft); }
.docview-hit small { color: var(--text-dim); }
.docview-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.docview-row { border-bottom: 1px solid var(--border); padding: var(--space-2) 0; }
.docview-row-head { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; background: none; border: none; color: inherit; cursor: pointer; padding: 2px 0; font: inherit; }
.docview-row-title { font-weight: 600; overflow-wrap: anywhere; }
.docview-loc { color: var(--text-dim); margin-left: auto; white-space: nowrap; padding-left: var(--space-2); }
.docview-caret { color: var(--text-dim); }
.docview-row-sum, .docview-row-gist { margin: 4px 0 0 18px; font-size: var(--text-sm); }
.docview-row-gist { color: var(--text-dim); font-style: italic; }
.docview-row-actions { margin: 4px 0 0 18px; }
.docview-ask { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; font-size: var(--text-sm); }
.docview-reader { margin: var(--space-2) 0 0 18px; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--accent-soft); font-size: var(--text-sm); line-height: 1.55; }
.docview-reader p { margin: 0 0 var(--space-2); }
.docview-page { color: var(--text-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; margin: var(--space-2) 0 4px; }
.docview-flash { animation: docview-flash 1.6s ease-out; }
@keyframes docview-flash { from { background: var(--accent-soft); } to { background: transparent; } }
.docview-note, .docview-empty { font-size: var(--text-sm); }
a.doc-ref { color: var(--accent); text-decoration: underline dotted; text-underline-offset: 2px; }
.msg-doc-sources { align-items: center; }
.msg-doc-sources > small { color: var(--text-dim); margin-right: 4px; }

/* 0.0.41: Settings > Tools: what a tool needs, the catalogue's tools to add, a tool this GlirOS can't run */
.tool-row .tool-needs { color: var(--text-faint); }
/* 0.0.74: paid tools (Settings > Tools, the licence panel) */
.paid-box { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); }
.paid-box a { color: var(--accent); }
.paid-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.paid-panel { padding: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.paid-panel h2 { margin: 0; font-size: var(--text-lg); }
.tool-row.dim .text strong { opacity: .65; }
.tools-summary { margin-top: 6px; }
.tools-avail-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 2px 8px; }
.tools-avail-head small { color: var(--text-faint); }
/* 0.0.42: adding a home-made tool from a file */
.tools-add-file-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tools-add-link-row .settings-hint { flex: 1 1 100%; }
.tools-link-input { flex: 1 1 260px; min-width: 0; }  /* 0.0.87 */
.settings-body .row select { max-width: 300px; }
/* 0.0.48: code starters -- "one file or apart?" and the look, under GlirOS's question */
.starter-choices { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 var(--space-3); }
.starter-looks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: var(--space-2); }
.starter-looks small { color: var(--text-dim); margin-right: 2px; }
.starter-looks .chip { font: inherit; font-size: var(--text-xs); padding: 0.2rem 0.65rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--inset); color: var(--text); cursor: pointer; }
.starter-looks .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* 0.0.51: media jobs done by GlirOS (ffmpeg): the card with time spent / left, and the results with a player */
.job-status.media-job { cursor: pointer; display: grid; gap: 0.35rem; }
.job-status.media-job progress { width: 100%; }
.media-job-meta { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.media-job-details { color: var(--text-faint); font-size: var(--text-sm); }
.media-results { display: flex; flex-direction: column; gap: var(--space-2); align-self: stretch; }
.media-result { margin: 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--inset); max-width: 520px; }
.media-result video, .media-result img { display: block; max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); background: #000; }
/* 0.1.5b: a picture keeps its shape: cropped to the card (an upright one shows its middle), the whole picture when clicked
   (the card is a flex column, which stretched the picture's width while its height was capped) */
.media-result.image img { width: 100%; height: auto; max-height: 320px; object-fit: cover; object-position: center 30%; cursor: zoom-in; }
.media-result audio { width: 100%; }
.media-result-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.media-result-head strong { overflow-wrap: anywhere; }
.media-result-head small { color: var(--text-faint); margin-right: auto; }
.media-result.gone video, .media-result.gone img, .media-result.gone audio { display: none; }

/* 0.0.54: a reminder the scheduler wrote into the chat, and the label on a message it sent for the user */
.reminder-card { display: flex; flex-direction: column; gap: 6px; min-width: min(360px, 100%); }
.reminder-head { display: flex; align-items: center; gap: 8px; }
.reminder-icon { color: var(--accent); display: inline-flex; animation: reminder-ring 1.2s ease-in-out 2; transform-origin: 50% 20%; }
.reminder-card.missed .reminder-icon { color: var(--text-dim); animation: none; }
.reminder-text { margin: 0; font-size: var(--text-md); }
.reminder-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.scheduled-label { display: flex; align-items: center; gap: 5px; align-self: flex-end; margin: 0 4px 3px; font-size: var(--text-xs); color: var(--text-dim); }
.scheduled-label .ico { color: var(--accent); }
@keyframes reminder-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .reminder-icon { animation: none; } }

/* ---------- 0.0.56: Media Studio (js/media/mediastudio.js, the tools chat's panel CSS) ---------- */
.media-studio { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); height: 100%; overflow: auto; box-sizing: border-box;
  font-family: var(--font); color: var(--text); font-size: var(--text-md); line-height: var(--line); }
.media-studio *, .media-studio *::before, .media-studio *::after { box-sizing: border-box; }
.media-studio [hidden] { display: none !important; }

/* the media */
.ms-stage { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: var(--inset); aspect-ratio: 16 / 9; box-shadow: var(--shadow-soft); }  /* 0.1.81zzf: inset, not black (the design chat's One file review §4.4) */
.ms-stage video, .ms-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: filter var(--fast), transform var(--fast); }
.ms-stage .ms-empty { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-faint); font-size: var(--text-sm); text-align: center; padding: var(--space-4); }
.ms-crop { position: absolute; border: 2px solid var(--accent); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); border-radius: 2px; cursor: move; touch-action: none; }
.ms-crop::after { content: ""; position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); cursor: nwse-resize; }
.ms-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--text-dim); padding: 0 var(--space-1); }
.ms-meta b { color: var(--text); font-weight: 600; }
.ms-meta .ms-other-file { margin-left: auto; }  /* 0.1.81j: Another file…, at the end of the file line */

/* parts */
.ms-parts { display: flex; flex-direction: column; gap: var(--space-2); }
.ms-part { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
.ms-part-head { display: flex; align-items: center; gap: var(--space-2); }
.ms-part-head h3 { margin: 0; font-size: var(--text-sm); font-weight: 600; letter-spacing: .01em; flex: 1; }
.ms-part-head .ms-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); opacity: .8; }
.ms-part-head .icon-btn { width: 28px; height: 28px; }
.ms-row { display: grid; grid-template-columns: 6rem 1fr auto; align-items: center; gap: var(--space-2); min-height: 32px; }
.ms-row label, .ms-label { font-size: var(--text-sm); color: var(--text-dim); }
.ms-row input[type=range] { width: 100%; accent-color: var(--accent); }
.ms-value { min-width: 3.4em; text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.media-studio select, .media-studio input[type=text], .media-studio input[type=number] { font: inherit; font-size: var(--text-sm); color: var(--text); background: var(--inset);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem 0.55rem; min-width: 0; width: 100%; }
.media-studio select:focus-visible, .media-studio input:focus-visible, .media-studio button:focus-visible { outline: none; box-shadow: var(--focus); }
.ms-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ms-chip { font: inherit; font-size: var(--text-xs); padding: 0.28rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--border); background: transparent; color: var(--text-dim); cursor: pointer; }
.ms-chip:hover { color: var(--text); border-color: var(--accent); }
.ms-chip.on { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.ms-check { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.ms-check input { accent-color: var(--accent); width: 16px; height: 16px; }
.ms-hint { font-size: var(--text-xs); color: var(--text-faint); margin: 0; max-width: 64ch; }
/* 0.1.29 (EXPORT): Media Studio's Export part */
.ms-export-presets .ms-chips { flex-wrap: wrap; }
.ms-export-what { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--text); font-variant-numeric: tabular-nums; }
.ms-export-name { margin: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.ms-export-details { border-top: 1px solid var(--border); padding-top: var(--space-2); margin-top: var(--space-1); }
.ms-export-details > summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-dim); }
.ms-export-details[open] > summary { margin-bottom: var(--space-2); }
.ms-export-note { margin: calc(-1 * var(--space-1)) 0 var(--space-2); }
.ms-check.disabled { opacity: 0.55; }
/* 0.1.30: Vertical's safe zone over the preview */
.ms-safe { position: absolute; pointer-events: none; outline: 1px dashed rgba(255, 255, 255, 0.8); overflow: hidden; }
.ms-safe-in { position: absolute; border: 2px solid var(--accent); border-radius: 2px; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.4); }
.ms-hint.warn { color: var(--warn); }

/* 0.0.60: icons, the face swap console (tiles, face pictures, the AI steps, fine-tune sliders) and hover tips */
.media-studio { position: relative; }
.ms-ico { display: inline-grid; place-items: center; flex: none; line-height: 0; }
.ms-part-head .ms-part-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); cursor: help; }
.ms-menu button .ms-ico { color: var(--accent); }
.ms-group { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-1); }
.ms-group + .ms-group { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.ms-sub { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); }
.ms-sub[data-tip] { cursor: help; }
.ms-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(70px, 1fr)); gap: var(--space-2); }
.ms-tile { font: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 68px; padding: var(--space-2) var(--space-1);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); color: var(--text-dim); font-size: var(--text-xs); cursor: pointer; text-align: center;
  transition: border-color var(--fast), background var(--fast), color var(--fast), transform var(--fast); }
.ms-tile:hover:not(:disabled) { color: var(--text); border-color: var(--accent); transform: translateY(-1px); }
.ms-tile.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.ms-tile:disabled { opacity: .5; cursor: progress; }
.ms-tile .ms-ico { color: inherit; }
.ms-faces { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ms-face { font: inherit; position: relative; width: 56px; height: 56px; padding: 0; border-radius: var(--radius); border: 2px solid transparent; background: var(--inset); color: var(--text-dim);
  display: grid; place-items: center; overflow: hidden; cursor: pointer; transition: border-color var(--fast), transform var(--fast); }
.ms-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-face small { font-size: var(--text-2xs); line-height: 1; }
.ms-face.all { display: flex; flex-direction: column; gap: 3px; justify-content: center; align-items: center; }
.ms-face.find { border: 1px dashed var(--border); background: transparent; }
.ms-face:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.ms-face.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); color: var(--accent); }
.ms-face:disabled { opacity: .5; cursor: progress; }
.ms-source { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-2); border-radius: var(--radius); background: var(--inset); }
.ms-source > img, .ms-source-ph { width: 64px; height: 64px; flex: none; border-radius: var(--radius-sm); object-fit: cover; display: grid; place-items: center; background: var(--surface); color: var(--text-faint); }
/* 0.0.73: Face age -- the try on the moment shown */
.studio-panel .ms-age-try { margin: 2px 0 6px; }
.studio-panel .ms-age-trial { display: block; max-width: 100%; max-height: 260px; border-radius: 8px; margin: 6px 0; background: var(--surface); }
.ms-source-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-source-info b { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-source-info .ms-row { grid-template-columns: auto 1fr auto; }
.ms-layers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; counter-reset: layer; }
.ms-layers li { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; padding: 6px var(--space-2) 6px 34px;
  border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--inset); counter-increment: layer; color: var(--text-dim); }
.ms-layers li::before { content: counter(layer); position: absolute; left: 9px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--text-2xs); font-weight: 600; background: var(--surface); color: var(--text-faint); }
.ms-layer-opt { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-dim); }  /* 0.1.81zr: Stronger likeness on the swap's layer */
.ms-layers li.on { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); color: var(--text); }
.ms-layers li.on::before { background: var(--accent); color: var(--bg); }
.ms-layers li:not(:last-child)::after { content: ""; position: absolute; left: 17px; bottom: -7px; width: 1px; height: 7px; background: var(--border); }
.ms-layer-name { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); cursor: help; }
.ms-lock { color: var(--accent); font-size: var(--text-sm); }
.ms-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.ms-switch { position: relative; width: 36px; height: 20px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; padding: 0; transition: background var(--fast); }
.ms-switch i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--text-faint); transition: transform var(--fast), background var(--fast); }
.ms-switch.on { background: var(--accent-soft); border-color: var(--accent); }
.ms-switch.on i { transform: translateX(16px); background: var(--accent); }
.ms-fine { font: inherit; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); font-size: var(--text-xs); cursor: pointer; }
.ms-fine:hover { color: var(--text); border-color: var(--accent); }
.ms-fine.on { color: var(--accent); border-color: var(--accent); }
.ms-fine .ms-ico:last-child { transition: transform var(--fast); }
.ms-fine.on .ms-ico:last-child { transform: rotate(180deg); }
.ms-fine-box { padding: var(--space-2); border-radius: var(--radius); background: var(--inset); border-top: 0 !important; }
.ms-row label[data-tip] { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--text-faint) 60%, transparent); text-underline-offset: 3px; }
.ms-tip { position: absolute; z-index: 40; max-width: min(300px, calc(100% - 12px)); padding: 7px 10px; border-radius: var(--radius-sm); background: var(--surface-solid);
  color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); font-size: var(--text-xs); line-height: 1.45; pointer-events: none; animation: ms-tip-in var(--fast); }
@keyframes ms-tip-in { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ms-tip { animation: none; } .ms-tile, .ms-face { transition: none; } }

/* the trim timeline: a film strip with two handles */
.ms-strip { position: relative; height: 44px; border-radius: var(--radius-sm); overflow: hidden; background: var(--inset); display: flex; user-select: none; touch-action: none; }
.ms-strip img { flex: 1; min-width: 0; height: 100%; object-fit: cover; opacity: .55; }
.ms-sel { position: absolute; top: 0; bottom: 0; border: 2px solid var(--accent); border-radius: var(--radius-sm); background: rgba(140, 196, 163, 0.12); }
.ms-handle { position: absolute; top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; display: grid; place-items: center; }
.ms-handle::before { content: ""; width: 4px; height: 22px; border-radius: 2px; background: var(--accent); }
.ms-times { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.ms-times label { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); color: var(--text-faint); }

/* add a part */
.ms-add { position: relative; align-self: flex-start; }
.ms-menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 220px; padding: var(--space-1); background: var(--surface-solid);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.ms-menu button { display: flex; gap: var(--space-2); width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 7px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-size: var(--text-sm); }
.ms-menu button:hover, .ms-menu button:focus-visible { background: var(--accent-soft); }
.ms-menu small { color: var(--text-faint); margin-left: auto; }

/* what will happen + the one action */
.ms-foot { position: sticky; bottom: calc(-1 * var(--space-3)); margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); padding: var(--space-3);
  background: var(--glass-strong); backdrop-filter: blur(var(--blur)); border-top: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: var(--space-2); }
.ms-plan { font-size: var(--text-sm); color: var(--text-dim); display: flex; gap: var(--space-2); align-items: flex-start; }
.ms-plan .ms-badge { flex: none; font-size: var(--text-xs); font-weight: 600; padding: 1px 8px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); }
.ms-plan .ms-badge.medium { background: rgba(226, 179, 94, 0.16); color: var(--warn); }
.ms-plan .ms-badge.heavy { background: var(--danger-soft); color: var(--danger); }
.ms-plan.bad { color: var(--danger); }
.ms-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
/* 0.1.81zx (the design chat): no button wraps inside itself; the row wraps, and Make it (the last) takes the room */
.ms-actions .btn { white-space: nowrap; }
.ms-actions .btn:first-child { flex: 0 1 auto; }
.ms-actions .btn:last-child { flex: 1 0 auto; }
.ms-progress { height: 6px; border-radius: 3px; background: var(--inset); overflow: hidden; }
.ms-progress i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
.ms-result { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--accent-soft); }
.ms-result b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 0.0.58: Settings > About > Licences */
.licence-group { margin-top: var(--space-3); }
.licence-area { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }

/* 0.0.64: Media Studio's two modes and the timeline (media/timelineui.js) */
.ms-modes { display: flex; gap: var(--space-2); }
.ms-modes .ws-spacer { flex: 1; }   /* 0.1.81zt: the Workspace dropdown on the right of the bar */
.ms-modes .ms-tabs { display: flex; gap: var(--space-2); }
.ws-manage { display: grid; gap: var(--space-2); }
.ws-item-actions { display: inline-flex; align-items: center; gap: var(--space-1); }   /* 0.1.81zu: Copy / Paste parts beside Remove */
.ws-panel.dragging { opacity: .6; }
.ws-manage-row { display: flex; align-items: center; gap: var(--space-1); }
.ws-manage-row .dialog-input { flex: 1; min-width: 0; }
.ms-mode { display: inline-flex; align-items: center; gap: 6px; }
.app.with-output.output-full .studio-panel.media-studio .ms-modes { grid-column: 1 / -1; grid-row: 1; }
.app.with-output.output-full .studio-panel.media-studio .ms-timeline:not([hidden]) { grid-column: 1 / -1; grid-row: 2 / 7; }
.ms-timeline .ms-foot { grid-column: auto; grid-row: auto; }
.ms-timeline { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.tl-stage { display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.tl-screen { position: relative; width: min(100%, calc(46vh * var(--ar, 1.7778))); aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.tl-fit { width: 100%; display: flex; justify-content: center; }
.tl-video, .tl-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tl-screen.fill .tl-video, .tl-screen.fill .tl-pic { object-fit: cover; }
.tl-layerbox { position: absolute; inset: 0; pointer-events: none; }
.tl-layer { position: absolute; height: auto; }
.tl-transport { display: flex; align-items: center; gap: var(--space-2); }
/* 0.1.2: the red line's scrub bar under the preview, one-frame steps, ✂ dragged */
.tl-scrub { width: 100%; margin: 6px 0 2px; accent-color: var(--danger); cursor: pointer; }
.tl-frame { min-width: 30px; padding-inline: 6px; font-size: var(--text-2xs); }
.tl-ruler { touch-action: none; }
.tl-crop-shapes { flex-wrap: wrap; }
.tl-play { display: inline-flex; align-items: center; gap: 6px; }
.tl-time { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: var(--text-sm); }
.tl-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tl-toolbar .grow { flex: 1; }
.tl-add { display: inline-flex; align-items: center; gap: 6px; }
.tl-size-label { font-size: var(--text-sm); color: var(--text-dim); display: inline-flex; align-items: center; gap: 6px; }
.tl-size { background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; }
.tl-zoom { min-width: 32px; justify-content: center; }
.tl-tracks { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 var(--space-2); outline: none; }
.tl-labels { display: flex; flex-direction: column; }
.tl-lane-label { height: 56px; display: flex; align-items: center; font-size: var(--text-xs); color: var(--text-dim); white-space: nowrap; }
.tl-labels .tl-lane-label:nth-child(3) { height: 34px; } .tl-labels .tl-lane-label:nth-child(4) { height: 30px; }
.tl-ruler-label, .tl-ruler { height: 22px !important; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); }
.tl-inner { position: relative; }
.tl-ruler { position: relative; border-bottom: 1px solid var(--border); cursor: pointer; }
.tl-tick { position: absolute; top: 3px; font-size: var(--text-2xs); color: var(--text-faint); padding-left: 3px; border-left: 1px solid var(--border); height: 16px; }
.tl-row { position: relative; border-bottom: 1px solid var(--border); }
.tl-row.drop { background: var(--accent-soft); }
.tl-empty { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); font-size: var(--text-xs); color: var(--text-dim); white-space: normal; }
.tl-block { position: absolute; top: 3px; bottom: 3px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); overflow: hidden; cursor: grab; box-sizing: border-box; touch-action: none; }
.tl-block.on { outline: 2px solid var(--accent); outline-offset: -1px; }
.tl-block.dragging { opacity: .75; cursor: grabbing; z-index: 3; }
.tl-block:focus-visible { outline: 2px solid var(--focus); }
.tl-clips { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.tl-layers { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); }
.tl-sounds { background: color-mix(in srgb, var(--good) 18%, var(--surface)); }
.tl-thumbs { position: absolute; inset: 0; display: flex; opacity: .55; pointer-events: none; }
.tl-thumbs img { height: 100%; flex: 1; min-width: 0; object-fit: cover; }
.tl-block-name { position: relative; display: flex; align-items: center; gap: 4px; padding: 2px 6px; font-size: var(--text-2xs); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 3px var(--surface-solid); }
.tl-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: color-mix(in srgb, var(--text) 18%, transparent); }
.tl-fade { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), transparent); pointer-events: none; }
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); pointer-events: none; }
.tl-hint { grid-column: 1 / -1; margin: 4px 0 0; }
.tl-inspector { display: flex; flex-direction: column; gap: var(--space-2); }
.tl-inspector:empty { display: none; }
.tl-sel-head { display: flex; align-items: center; gap: var(--space-2); }
.tl-sel-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-field { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); flex-wrap: wrap; }
.tl-field > span:first-child { color: var(--text-dim); min-width: 88px; }
.tl-field input[type=number] { width: 84px; background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; }
.tl-field input[type=text] { flex: 1; min-width: 120px; background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; }
.tl-slider input[type=range] { flex: 1; min-width: 100px; accent-color: var(--accent); }
.tl-slider output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.tl-pair { display: flex; gap: var(--space-3); flex-wrap: wrap; }
/* 0.1.81r (A11Y-2): a clip's place in the order, without dragging */
.tl-order-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.tl-order .ms-hint { display: block; }
.tl-places { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-menu { position: absolute; z-index: 30; min-width: 220px; max-width: min(360px, 90%); max-height: 320px; overflow: auto; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; }
.tl-menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; padding: 6px 8px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.tl-menu-item:hover, .tl-menu-item:focus-visible { background: var(--inset); }
.tl-menu-item img { width: 40px; height: 28px; object-fit: cover; border-radius: 4px; }
.tl-menu-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-menu-empty { margin: 6px 8px; font-size: var(--text-sm); color: var(--text-dim); }
.tl-menu-pc { border-top: 1px solid var(--border); margin-top: 4px; }
.ms-timeline { position: relative; }
.ms-to-timeline { display: inline-flex; align-items: center; gap: 6px; }

/* 0.0.65: the activity log's quiet system lines between the messages (activity.js) */
.activity-line { font-size: var(--text-xs); opacity: 0.85; max-width: 80%; margin: 0; }
.activity-group { align-self: center; max-width: 80%; font-size: var(--text-xs); color: var(--text-dim); }
.activity-group > summary { cursor: pointer; list-style: none; }
.activity-group > summary::-webkit-details-marker { display: none; }
.activity-group > summary::after { content: " ▾"; }
.activity-group[open] > summary::after { content: " ▴"; }
.activity-group ul { margin: 4px 0 0; padding-left: 18px; text-align: left; }
.activity-group li { margin: 2px 0; }

/* 0.0.66: Settings > Security -- New incognito chat beside New chat, the chip by the chat's title, the incognito note */
.new-chat-row { display: flex; align-items: stretch; gap: var(--space-1); margin: 0 var(--space-1) var(--space-3); }
.new-chat-row .new-chat { flex: 1; margin: 0; }
.new-chat-row .incognito-new { width: 40px; flex: 0 0 40px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--inset); color: var(--text-dim); }
.new-chat-row .incognito-new:hover { color: var(--text); border-color: var(--accent); }
.app.collapsed .new-chat-row { flex-direction: column; margin: 0 0 var(--space-2); }
.app.collapsed .new-chat-row .new-chat { margin: 0; }
.app.collapsed .new-chat-row .incognito-new { height: 40px; }
.net-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.25rem 0.65rem; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--inset); color: var(--text-dim); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; flex: 0 0 auto; }
.net-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--text); }
.net-chip:disabled { cursor: default; }
.net-chip.off { color: var(--text); border-color: color-mix(in srgb, var(--warn) 45%, var(--glass-border)); }
.net-chip.incognito { color: var(--text); border-style: dashed; }
.incognito-note { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: var(--space-2) auto; opacity: 0.9; }
.model-item.resting { opacity: 0.5; cursor: not-allowed; }
/* 0.1.81zzr (design §2): My PC signed out can still be chosen: the name quiet, "sign in to use" readable */
.model-item.resting:not(:disabled) { opacity: 1; cursor: pointer; }
.model-item.resting:not(:disabled) > span:first-child { color: var(--text-dim); }
.security-state { display: flex; align-items: center; gap: 0.5rem; color: var(--text-dim); font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.security-state.on { color: var(--text); }

/* 0.0.68: the plan bar -- a long plan in progress, above the message box (chat.js updatePlanBar) */
div.plan-bar { display: flex; align-items: center; gap: var(--space-3); flex: none; width: calc(100% - 2 * var(--space-4)); max-width: var(--chat-max-w);
  margin: 0 auto var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-sm);
  animation: planbar-in var(--fast); }
div.plan-bar[hidden] { display: none; }
.planbar-ico { color: var(--accent); display: inline-flex; flex: none; }
.planbar-text { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: baseline; }
.planbar-text strong { white-space: nowrap; }
.planbar-step { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planbar-progress { grid-column: 1 / -1; width: 100%; height: 3px; margin-top: 6px; appearance: none; border: 0; border-radius: 999px; background: var(--inset); overflow: hidden; }
.planbar-progress::-webkit-progress-bar { background: var(--inset); border-radius: 999px; }
.planbar-progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; transition: width 300ms ease; }
.planbar-progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
.planbar-actions { display: flex; gap: var(--space-1); flex: none; }
.planbar-pause.active { border-color: var(--accent); color: var(--text); }
@keyframes planbar-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { div.plan-bar { flex-wrap: wrap; } .planbar-actions { width: 100%; justify-content: flex-end; }
  .research-visual { flex-wrap: wrap; } .research-visual .research-stars { margin-left: 0; }  /* 0.1.69: Research too (0.1.81zzf: a later rule had overridden both) */
  .dialog:has(.research-dialog) .research-dialog, .dialog .research-dialog .research-levels { grid-template-columns: minmax(0, 1fr); } .dialog:has(.research-dialog) { padding: var(--space-4); } }  /* 0.1.81zze: the research brief in one column */
@media (prefers-reduced-motion: reduce) { div.plan-bar { animation: none; } }
/* a small model hands the plan to a bigger one: shown with Continue on the last answer's open plan */
.plan-handoff { display: none; }
.msg.assistant.last .bubble:not(.thinking) .plan-card.open .plan-handoff { display: inline-flex; }

/* 0.0.68: the "/" tool list in the message box (slash.js) */
.composer { position: relative; }
.slash-menu { position: absolute; left: var(--space-2); right: var(--space-2); bottom: calc(100% + var(--space-2)); z-index: 30; max-height: min(320px, 50vh);
  overflow-y: auto; padding: var(--space-1); border-radius: var(--radius-lg); box-shadow: var(--shadow); background: var(--glass-strong); }
.slash-item { display: flex; align-items: center; gap: var(--space-3); padding: 0.45rem 0.6rem; border-radius: var(--radius); cursor: pointer; }
.slash-item.active { background: var(--accent-soft); }
.slash-item.off { opacity: 0.72; }
.slash-ico { display: inline-flex; color: var(--text-dim); flex: none; }
.slash-item.active .slash-ico { color: var(--accent); }
.slash-text { display: flex; flex-direction: column; min-width: 0; }
.slash-text strong { font-weight: 600; font-size: var(--text-sm); }
.slash-text small { color: var(--text-dim); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slash-empty, .slash-hint { padding: 0.45rem 0.6rem; color: var(--text-faint); font-size: var(--text-xs); }
.slash-hint { border-top: 1px solid var(--glass-border); margin-top: var(--space-1); }

/* 0.0.68: GlirOS asks what an unclear request means (clarify.js): the answer's buttons */
.clarify-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.clarify-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--glass-border);
  background: var(--inset); color: var(--text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.clarify-chip:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
.clarify-chip.settings { color: var(--text-dim); border-style: dashed; }
.clarify-chip.back { color: var(--text-dim); }
.clarify-chip small { color: var(--text-dim); }
.msg.assistant:not(.last) .clarify-chips { display: none; }
.msg.assistant.video-ask .clarify-chips { display: flex; }  /* 0.0.78: GlirOS's question about an added video */

/* 0.0.69: Media Studio -- placing layers and texts in the preview, the texts, the effects' shades, Grab frame */
.tl-shade, .tl-blackout, .tl-textcanvas, .tl-edit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tl-blackout { background: #000; opacity: 0; }
.tl-video, .tl-pic { transform-origin: 50% 50%; }
.tl-layer { object-fit: contain; }
.tl-hit { position: absolute; pointer-events: auto; cursor: move; border-radius: 4px; outline: 1px dashed transparent; touch-action: none; }
.tl-hit:hover { outline-color: color-mix(in srgb, var(--accent) 70%, transparent); }
.tl-hit.on { outline: 2px solid var(--accent); box-shadow: 0 0 0 1px rgba(0,0,0,0.35); }
.tl-hit-handle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
/* 0.1.3: turning a text, subtitles laid out as blocks */
.tl-hit-rotate { position: absolute; left: 50%; top: -26px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,0.4); }
.tl-hit-rotate::after { content: ""; position: absolute; left: 50%; top: 12px; width: 2px; height: 12px; margin-left: -1px; background: var(--accent); }
.tl-hit-rotate:active { cursor: grabbing; }
.fx-split { margin-top: 4px; }
.fx-angle .ms-seg { flex-wrap: wrap; }
.tl-info, .tl-listening { font-size: var(--text-xs); color: var(--text-dim); padding: 2px 6px; }
.tl-listening::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); animation: tl-pulse 1s ease-in-out infinite; vertical-align: middle; }
@keyframes tl-pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { .tl-listening::before { animation: none; } }
.tl-guide { position: absolute; pointer-events: none; background: color-mix(in srgb, var(--accent) 85%, #fff); opacity: 0.9; }
.tl-guide.v { top: 0; bottom: 0; left: 50%; width: 1px; }
.tl-guide.h { left: 0; right: 0; top: 50%; height: 1px; }
.tl-transport .grow { flex: 1; }
.tl-grab { display: inline-flex; align-items: center; gap: 6px; }
.tl-row-texts .tl-block { background: color-mix(in srgb, var(--accent) 22%, var(--inset)); }
.tl-row-effects .tl-block { background: color-mix(in srgb, var(--hl-builtin) 24%, var(--inset)); }  /* 0.1.49: the palette's violet, not a foreign one */
/* 0.0.93: layer and text lines, a layer line's effect strip, undo/redo */
.tl-row-lfx { background: color-mix(in srgb, var(--hl-builtin) 6%, transparent); }
.tl-row-lfx .tl-block { top: 1px; bottom: 1px; }
.tl-row-lfx .tl-block-name { padding: 0 6px; font-size: var(--text-2xs); line-height: 14px; }
.tl-lane-sub { font-size: var(--text-2xs); color: var(--text-faint); padding-left: 6px; }
.tl-newline { color: var(--text-faint); font-style: italic; pointer-events: none; }
.tl-undo, .tl-redo { display: inline-flex; align-items: center; gap: 6px; }
.tl-undo:disabled, .tl-redo:disabled { opacity: .45; cursor: default; }
.fx-textarea { width: 100%; min-height: 64px; resize: vertical; font: inherit; font-size: var(--text-sm); padding: 8px 10px; border-radius: var(--radius); border: 1px solid var(--glass-border); background: var(--inset); color: var(--text); }
.fx-presets { flex-wrap: wrap; }
.fx-colour input[type="color"] { width: 44px; height: 30px; padding: 0; border: 1px solid var(--glass-border); border-radius: 8px; background: none; cursor: pointer; }
/* One file mode: the texts and the drag boxes over the media */
.ms-stage { position: relative; }
.ms-overlay, .ms-edit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* 0.1.81 (BG-CHOOSER): Remove background on one file -- the keyed frame over the media (a check pattern where it is
   see-through; the video's controls show at the bottom on hover, softly: the design chat), Pick's crosshair */
.ms-keyview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: clip-path var(--fast); }
.ms-lookview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transition: clip-path var(--fast); }  /* 0.1.81zj: the look's parts */
.ms-stage:has(> video):hover .ms-lookview { clip-path: inset(0 0 calc(var(--space-6) + var(--space-4)) 0); }
@media (prefers-reduced-motion: reduce) { .ms-lookview { transition: none; } }
@media (prefers-reduced-motion: reduce) { .ms-keyview { transition: none; } }
.ms-keyview.see { background: repeating-conic-gradient(color-mix(in srgb, var(--text) 16%, var(--surface-solid)) 0 25%, var(--surface-solid) 0 50%) 0 0 / var(--space-4) var(--space-4); }
/* (0.1.81h, the owner: a picture showed its background in a strip at the bottom on hover -- only a video has controls
   there, so only a video's keyed view leaves room for them) */
.ms-stage:has(> video):hover .ms-keyview { clip-path: inset(0 0 calc(var(--space-6) + var(--space-4)) 0); }
.ms-stage.ms-picking, .ms-stage.ms-picking * { cursor: crosshair; }
.ms-key-foot { display: grid; gap: var(--space-2); }
.ms-edit .tl-hit { pointer-events: auto; }
.ms-grab { display: inline-flex; align-items: center; gap: 6px; }
.ms-empty-pick { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.ms-empty-list { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); max-width: 520px; }
.ms-empty-list .tl-menu-item { width: auto; max-width: 240px; }
.fx-list { flex-wrap: wrap; }
.ms-grab-menu { position: absolute; z-index: 20; }
.ms-actions { position: relative; }
.fx-subs { margin-top: 6px; max-width: 100%; }

/* ---- 0.0.75: GlirOS's own dropdown (gselect.js): a quiet field and a frosted list ---- */
.gsel { position: relative; min-width: 0; flex: 1; display: flex; }
.gsel-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); padding: 0.38rem 0.6rem 0.38rem 0.7rem;
  background: var(--inset); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-sm);
  text-align: left; cursor: pointer; transition: border-color var(--fast), background var(--fast); }
.gsel-btn:hover { border-color: var(--user-border); }
.gsel-btn:focus-visible { outline: none; box-shadow: var(--focus); }
.gsel.open .gsel-btn { border-color: var(--accent); }
.gsel-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-text.gsel-placeholder { color: var(--text-faint); }
.gsel-chev { display: inline-flex; color: var(--text-faint); transition: transform var(--fast); }
.gsel.open .gsel-chev { transform: rotate(180deg); }
.gsel-list { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 180px; max-height: 280px; overflow: auto; padding: var(--space-1);
  background: var(--surface-solid); border: 1px solid var(--glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow); animation: gsel-in var(--fast); }
.gsel.up .gsel-list { top: auto; bottom: calc(100% + 4px); }
@keyframes gsel-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.gsel-opt { display: flex; align-items: center; gap: var(--space-2); padding: 7px var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); color: var(--text); }
.gsel-opt.active { background: var(--accent-soft); }
.gsel-opt.on .gsel-label { color: var(--accent); }
.gsel-opt[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.gsel-opt .gsel-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gsel-opt small { color: var(--text-faint); font-size: var(--text-xs); white-space: nowrap; }
.gsel-ico, .gsel-check { display: inline-flex; color: var(--accent); }
.gsel-head { cursor: default; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); padding: var(--space-2) var(--space-2) var(--space-1); }
@media (prefers-reduced-motion: reduce) { .gsel-list { animation: none; } .gsel-chev { transition: none; } }

/* ---- 0.0.75: the job bar (jobbar.js): Pause / Go on, Stop and save, Cancel; time spent and left ---- */
.job-bar { display: flex; flex-direction: column; gap: var(--space-2); }
.job-bar .job-bar-track { margin: 0; }
.job-bar.paused .job-bar-track i { background: var(--warn); }
.job-bar-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.job-bar-meta { flex: 1; min-width: 12rem; color: var(--text-dim); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.job-bar-actions { display: flex; gap: var(--space-1); flex-wrap: wrap; margin-left: auto; }
.job-bar-actions .btn { display: inline-flex; align-items: center; gap: 5px; }
.job-bar-ico { display: inline-flex; }
.media-job .job-bar { margin-top: var(--space-1); }
.media-job-more { background: none; border: 0; color: var(--text-faint); cursor: pointer; padding: 0 4px; border-radius: var(--radius-sm); font: inherit; }
.media-job-more:hover, .media-job-more:focus-visible { color: var(--text); background: var(--accent-soft); outline: none; }

/* ---- 0.0.75: the picture tool's "Add a control" menu: grouped, with icons, frosted ---- */
.picture-tool .pt-menu { background: var(--surface); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); border: 1px solid var(--glass-border);
  border-radius: var(--radius); box-shadow: var(--shadow); min-width: 240px; padding: var(--space-1); }
.picture-tool .pt-menu.end { left: auto; right: 0; }
.picture-tool .pt-menu { max-height: min(420px, 60vh); }
.picture-tool .pt-menu-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); padding: 7px var(--space-2); border-radius: var(--radius-sm); }
.picture-tool .pt-menu-item .pt-mi-ico { display: inline-flex; color: var(--accent); }
.picture-tool .pt-menu-item small { margin-left: auto; color: var(--text-faint); font-size: var(--text-xs); }
.picture-tool .pt-menu-item:focus-visible { outline: none; }
.picture-tool .pt-input .gsel { flex: 1; }
.picture-tool .pt-ai { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; }
.picture-tool .pt-ai-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.picture-tool .pt-ai-row .ms-chip { padding: 3px 10px; }
.picture-tool .pt-ai-note { margin: 0; font-size: var(--text-xs); color: var(--text-faint); }
.picture-tool .pt-tr-box { position: absolute; padding: 0; background: transparent; border: thin solid var(--accent); border-radius: var(--radius-sm); cursor: pointer; }
.picture-tool .pt-tr-box:hover, .picture-tool .pt-tr-box:focus-visible { background: var(--accent-soft); }
.picture-tool .pt-tr-box.on { border-width: medium; background: var(--accent-soft); }
.picture-tool .pt-tr-box.marked { pointer-events: none; }
.picture-tool .pt-tr-drag { position: absolute; border: thin dashed var(--accent); background: var(--accent-soft); pointer-events: none; }
.picture-tool .pt-tr .pt-tr-text { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--inset); border: thin solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.picture-tool .pt-tr-chosen, .picture-tool .pt-tr-none { display: block; color: var(--text-dim); }
.picture-tool .pt-tr-note { color: var(--text-dim); }
.picture-tool .pt-face { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); }
.picture-tool .pt-face img, .picture-tool .pt-face .pt-face-ph { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); background: var(--surface-solid); }
.picture-tool .pt-face b { flex: 1; min-width: 0; font-weight: 500; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picture-tool .pt-pick { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.picture-tool .pt-pick button { width: 44px; height: 44px; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-solid); overflow: hidden; cursor: pointer; }
.picture-tool .pt-pick button img { width: 100%; height: 100%; object-fit: cover; }
.picture-tool .pt-pick button:hover, .picture-tool .pt-pick button:focus-visible { border-color: var(--accent); outline: none; }
.picture-tool .pt-ai-job { width: 100%; }

/* ---- 0.0.75: Media Studio: the dropdowns, the face swap's source and target ---- */
.ms-row .gsel { max-width: 100%; }
.ms-swap-pair { display: flex; align-items: center; gap: var(--space-2); }
.ms-swap-pair .ms-source { flex: 1; min-width: 0; }
.ms-source-actions { display: flex; gap: var(--space-1); margin-left: auto; flex: none; }
.ms-target-file { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); }
.ms-target-file .ms-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; flex: none; background: var(--surface-solid); display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); }
.ms-target-file b { flex: 1; min-width: 0; font-weight: 500; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-chooser { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--surface); }
.ms-chooser .ms-faces { flex-wrap: wrap; }

/* 0.0.76: Settings > Remote access (remotesettings.js) */
/* 0.1.81x (HOST V2): the round trip and Measure now */
.remote-rtt { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.remote-rtt-result { color: var(--text-dim); }
.remote-state { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-dim); }
.remote-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--text-dim); flex: none; opacity: 0.6; }
.remote-state.ok { color: var(--text); }
.remote-state.ok .remote-dot { background: var(--good); opacity: 1; }
.remote-state.live { color: var(--text); }
.remote-state.live .remote-dot { background: var(--accent); opacity: 1; box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 22%, transparent); }
.remote-state.bad .remote-dot { background: var(--danger); opacity: 1; }
/* 0.1.26: GlirOS Plus on Settings > Remote access (plusline.js) */
.plus-row, .account-row { align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.plus-row .text, .account-row .text { flex: 1 1 16rem; min-width: 0; }
.plus-line, .account-line { font-weight: 600; }
.account-line { overflow-wrap: anywhere; }  /* 0.1.81za: the signed-in account */
.plus-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.plus-stopped { margin: 0.75rem 0.75rem 0; padding: 0.55rem 0.75rem; border-radius: 0.6rem; font-size: var(--text-sm);
  background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--text); }
.remote-why { flex-basis: 100%; color: var(--text-dim); }
.remote-fpr { font-family: var(--mono); font-size: var(--text-sm); letter-spacing: 0.04em; white-space: nowrap; }
.remote-code { font-family: var(--mono); letter-spacing: 0.12em; text-transform: uppercase; width: 9.5rem; }
.remote-name { width: min(16rem, 100%); }
.remote-go { justify-content: flex-end; gap: var(--space-3); }
.remote-msg { flex: 1; margin: 0; color: var(--danger); font-size: var(--text-sm); }
.remote-msg:empty { display: none; }
.remote-steps .text span { color: var(--text-dim); font-size: var(--text-sm); }
.remote-here { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); margin: 0 0 var(--space-3);
  border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--text); }
.remote-here p { margin: 0.2rem 0 0; }
.settings-hint.warn { color: var(--text); }
.remote-section a.btn, .au-new a.btn { text-decoration: none; display: inline-flex; align-items: center; white-space: nowrap; }

/* 0.0.77: the media gallery's "Open" (gallery.js viewer): the original, on a dark glass */
.gal-viewer { position: fixed; inset: 0; z-index: 900; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); padding: var(--space-4); background: rgba(6, 10, 9, 0.88); backdrop-filter: blur(6px); }
.gal-viewer-media { max-width: 100%; max-height: calc(100vh - 7rem); border-radius: var(--radius-lg); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.gal-viewer-bar { display: flex; align-items: center; gap: var(--space-3); color: #e3ece7; font-size: var(--text-sm); max-width: 100%; }
.gal-viewer-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 0.0.77: a toast with one action (Open after a tool saved a file) */
.toast.with-action { display: flex; align-items: center; gap: var(--space-3); }
.toast-action { flex: none; border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; padding: 0.15rem 0.35rem; border-radius: var(--radius-sm); }
.toast-action:hover, .toast-action:focus-visible { background: var(--accent-soft); outline: none; }

/* ---- 0.0.80: the Code workspace (js/codeworkspace.js): the tools chat's code-workspace/workspace.css 0.2.0, as it is ---- */
/* The code panel's full-screen workspace (workspace.js). GlirOS's tokens only; append to app.css. */
.code-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 10px; height: 100%; min-height: 0; font-size: var(--text-sm); color: var(--text); }
.code-workspace [hidden] { display: none !important; }
.cw-side, .cw-preview { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 6px; }
.cw-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.cw-grow { flex: 1; }
.cw-title { font-weight: 600; color: var(--text-dim); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; }
.cw-btn { font: inherit; font-size: var(--text-xs); min-height: 28px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--inset); color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.cw-btn:hover { color: var(--text); border-color: var(--accent); }
.cw-btn[aria-pressed="true"], .cw-btn[aria-expanded="true"] { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.cw-btn:focus-visible, .cw-seg button:focus-visible, .cw-badge:focus-visible, .cw-file:focus-visible, .cw-width:focus-visible, .cw-page:focus-visible, .cw-ta:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.cw-run { background: var(--accent); color: var(--on-accent); border-color: var(--accent); font-weight: 600; }
.cw-run:hover { background: var(--accent-hover); color: var(--on-accent); }
.cw-console-btn.has-errors { color: var(--danger); border-color: var(--danger); }
.cw-seg { display: flex; background: var(--inset); border: 1px solid var(--border); border-radius: 999px; padding: 2px; }
.cw-seg button { font: inherit; font-size: var(--text-xs); border: 0; background: none; color: var(--text-dim); border-radius: 999px; padding: 3px 11px; cursor: pointer; }
.cw-seg button.on { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.cw-findbox { position: relative; flex: 1 1 14em; min-width: 0; }
.cw-find { width: 100%; font: inherit; font-size: var(--text-xs); color: var(--text); background: var(--inset); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; }
.cw-find:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--accent); }
.cw-found { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; display: flex; flex-direction: column; padding: 4px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0,0,0,.25); max-height: 300px; overflow: auto; }
.cw-hit { text-align: left; font: inherit; font-size: var(--text-xs); border: 0; background: none; color: var(--text); padding: 5px 8px; border-radius: 6px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-hit b { font-family: var(--mono); font-weight: 500; }
.cw-hit small { color: var(--text-faint); }
.cw-hit:hover, .cw-hit:focus-visible { background: var(--accent-soft); outline: none; }
.cw-empty-find { margin: 4px 8px; font-size: var(--text-xs); color: var(--text-faint); }
.cw-stale { font-size: var(--text-xs); color: var(--warn); }
.cw-width, .cw-page, .cw-file { font: inherit; font-size: var(--text-xs); color: var(--text); background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 6px; min-width: 0; max-width: 100%; }

/* editors: one, or two side by side */
.cw-editors { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); gap: 8px; }
.cw-editors.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cw-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); overflow: hidden; }
.cw-pane-head { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.cw-pane-head .cw-file { flex: 1 1 8em; }
.cw-badge { font: inherit; font-size: var(--text-2xs); border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; }
.cw-badge.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.cw-badge.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.cw-badge.bad { background: var(--danger-soft); color: var(--danger); }
.cw-savedtag { font-size: var(--text-2xs); color: var(--good); }
.cw-checks { padding: 6px 8px; border-bottom: 1px solid var(--border); max-height: 30%; overflow: auto; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cw-checks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: var(--text-xs); }
.cw-checks li { padding: 2px 8px; border-left: 3px solid var(--border); overflow-wrap: anywhere; }
.cw-checks li.fixed { border-color: var(--good); } .cw-checks li.error { border-color: var(--danger); } .cw-checks li.advice { border-color: var(--warn); color: var(--text-dim); } .cw-checks li.warn { border-color: var(--warn); }  /* 0.1.35: workspace 0.2.4 */
.cw-values { padding: 8px; border-bottom: 1px solid var(--border); max-height: 40%; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.cw-vtitle { font-size: var(--text-xs); font-weight: 600; }
.cw-vals { display: grid; grid-template-columns: minmax(5em, auto) minmax(0, 1fr); gap: 5px 8px; align-items: center; font-size: var(--text-xs); color: var(--text-dim); }
.cw-val { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cw-val input[type=color] { width: 30px; height: 26px; padding: 1px; border: 1px solid var(--border); border-radius: 6px; background: var(--inset); cursor: pointer; flex: none; }
.cw-vtext, .cw-vnum, .cw-val select { font: inherit; font-size: var(--text-xs); color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; min-width: 0; flex: 1; }
.cw-vnum { max-width: 7em; }
.cw-moved { margin: 0; font-size: var(--text-xs); color: var(--warn); }

/* the editor: line numbers, coloured code under a transparent textarea */
.cw-ed { position: relative; flex: 1; min-height: 120px; display: grid; grid-template-columns: auto minmax(0, 1fr); font-family: var(--mono); font-size: var(--text-sm); line-height: 1.55; }
.cw-gutter { margin: 0; padding: 10px 8px 10px 10px; text-align: right; color: var(--text-faint); user-select: none; overflow: hidden; border-right: 1px solid var(--border); font: inherit; }
.cw-edscroll { position: relative; min-width: 0; overflow: hidden; }
.cw-hl, .cw-ta { position: absolute; inset: 0; margin: 0; padding: 10px 12px; font: inherit; line-height: inherit; tab-size: 2; white-space: pre; overflow: auto; border: 0; }
.cw-hl { pointer-events: none; color: var(--text); overflow: hidden; }
.cw-hl code { font: inherit; position: relative; z-index: 1; }
.cw-mark { position: absolute; left: 0; right: 0; background: color-mix(in srgb, var(--accent) 22%, transparent); border-left: 3px solid var(--accent); animation: cw-mark 6s ease forwards; pointer-events: none; }
@keyframes cw-mark { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cw-mark { animation: none; } }
.cw-ta { resize: none; background: transparent; color: transparent; caret-color: var(--text); outline: none; }
.cw-ta::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }
.cw-ta.plain { color: var(--text); }

/* the preview */
.cw-notes { font-size: var(--text-xs); color: var(--text-dim); }
.cw-notes p { margin: 0; }
.cw-framebox { flex: 1; min-height: 200px; display: flex; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; overflow: auto; }
.cw-framebox.device { background: var(--inset); padding: 10px 0; }
.cw-frame { border: 0; width: 100%; height: 100%; min-height: 200px; background: #fff; }
.cw-framebox.device .cw-frame { box-shadow: 0 0 0 1px var(--border), 0 8px 30px rgba(0,0,0,.25); border-radius: 12px; }
.cw-empty { margin: auto; padding: 20px; color: #555; font-size: var(--text-sm); text-align: center; max-width: 34em; }
.cw-console { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); max-height: 32%; display: flex; flex-direction: column; min-height: 0; }
.cw-console-head { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px 3px 10px; font-size: var(--text-xs); color: var(--text-dim); border-bottom: 1px solid var(--border); }
.cw-console-head .cw-fix-ai { margin-right: 4px; color: var(--accent); border-color: var(--accent); }  /* 0.1.7b: workspace 0.2.3, Fix with AI */
.cw-console-body { overflow: auto; font-family: var(--mono); font-size: var(--text-xs); padding: 4px 10px; }
.cw-log { padding: 1px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cw-log.warn { color: var(--warn); } .cw-log.error { color: var(--danger); }

/* narrow screens: the preview under the editors */
@media (max-width: 900px) {
  .code-workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) minmax(260px, 1fr); }
  .cw-editors.two { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .code-workspace * { transition: none !important; } }
/* 0.2.0 (GlirOS 0.0.80): the file tree beside the editors (opts.tree) */
.code-workspace.with-tree { grid-template-columns: minmax(140px, 190px) minmax(0, 1.15fr) minmax(0, 1fr); }
.cw-tree { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); overflow: hidden; }
.cw-tree-head { display: flex; align-items: center; gap: 4px; padding: 6px 6px 6px 10px; border-bottom: 1px solid var(--border); }
.cw-tree-head .cw-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-tree-head .cw-btn { padding: 2px 8px; min-height: 24px; }
.cw-tree-list { flex: 1; overflow: auto; padding: 4px; display: flex; flex-direction: column; gap: 1px; }
.cw-tree-dir { flex: none; font-size: var(--text-xs); color: var(--text-faint); padding: 6px 6px 2px; font-family: var(--mono); }
.cw-tree-row { flex: none; display: flex; align-items: center; gap: 4px; text-align: left; font: inherit; font-size: var(--text-sm); font-family: var(--mono); border: 0; background: none; color: var(--text-dim); padding: 4px 8px; border-radius: 6px; cursor: pointer; min-width: 0; }
.cw-tree-row.in-dir { padding-left: 16px; }
.cw-tree-row .cw-tree-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.cw-tree-row { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.cw-tree-row:hover, .cw-tree-row:focus-visible { background: var(--accent-soft); color: var(--text); outline: none; }
.cw-tree-row.on { color: var(--text); background: var(--accent-soft); font-weight: 600; }
.cw-tree-row.asset { cursor: default; color: var(--text-faint); }
.cw-tree-x { border: 0; background: none; color: var(--text-faint); cursor: pointer; font-size: var(--text-sm); line-height: 1; padding: 0 4px; border-radius: 4px; }
.cw-tree-x:hover { color: var(--danger); }
.cw-tree-foot { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-top: 1px solid var(--border); }
.cw-tree-foot .cw-btn { flex: 1 1 auto; }
@media (max-width: 1100px) { .code-workspace.with-tree { grid-template-columns: minmax(130px, 160px) minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 900px) { .code-workspace.with-tree { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(260px, 1fr) minmax(260px, 1fr); } .cw-tree { max-height: 140px; } }
/* 0.2.0: narrower than 760 px (the side panel): one column, the tree short — set by workspace.js from its own width */
.code-workspace.cw-narrow, .code-workspace.cw-narrow.with-tree { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(220px, 1fr) minmax(220px, 1fr); }
.code-workspace.cw-narrow:not(.with-tree) { grid-template-rows: minmax(220px, 1fr) minmax(220px, 1fr); }
.code-workspace.cw-narrow .cw-tree { max-height: 130px; }
.code-workspace.cw-narrow .cw-editors.two { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
/* the app's hosts for the workspace (0.0.80) */
#output-body > .code-workspace { height: 100%; padding: 8px; box-sizing: border-box; }
.ws-host { height: 100%; min-height: 0; padding: 8px; box-sizing: border-box; display: flex; flex-direction: column; }
.ws-host > .code-workspace { flex: 1; min-height: 0; }
.output-files-workspace { display: inline-flex; align-items: center; gap: 6px; margin: 4px 8px 8px; align-self: flex-start; }
/* 0.0.84: ✂ on the play line (Media Studio's timeline), and a piece's start edge */
.tl-cut { position: absolute; top: 1px; z-index: 3; transform: translateX(-50%); width: 22px; height: 20px; padding: 0; display: grid; place-items: center; border-radius: 6px; border: 1px solid var(--danger); background: var(--surface-solid); color: var(--danger); cursor: pointer; }
.tl-cut:hover, .tl-cut:focus-visible { background: var(--danger); color: var(--on-danger); outline: none; }
.tl-handle.tl-handle-l { right: auto; left: 0; }

/* 0.0.90: the arrow back to the end of a long chat (it sticks to the bottom of the chat while you read above) */
.to-end-wrap { position: sticky; bottom: 14px; height: 0; display: flex; justify-content: center; pointer-events: none; z-index: 5; }
.to-end { pointer-events: auto; transform: translateY(-100%); width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border); background: var(--surface-solid); color: var(--text);
  box-shadow: 0 6px 20px rgba(0,0,0,.25); cursor: pointer; animation: to-end-in .18s ease-out; }
.to-end[hidden] { display: none; }
.to-end:hover { color: var(--accent); }
.to-end:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes to-end-in { from { opacity: 0; transform: translateY(-60%); } }
@media (prefers-reduced-motion: reduce) { .to-end { animation: none; } }
/* 0.0.90: "Show N earlier messages" at the top of a long chat */
.earlier-btn { display: block; margin: 8px auto 16px; padding: 6px 14px; border-radius: 999px; font: inherit; font-size: var(--text-sm); cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text-dim); }
.earlier-btn:hover { color: var(--accent); border-color: var(--accent); }
/* 0.0.90: GlirOS offers to search the web when the answer says the model couldn't look it up */
.web-offer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border);
  color: var(--text-dim); font-size: var(--text-sm); }
.web-offer .btn { margin-left: auto; }

/* 0.0.91: Settings > Connectors */
.connectors-section .card { margin-bottom: 12px; }
.conn-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; }
.conn-head .grow { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.conn-tools, .conn-actions, .conn-add { padding: 10px 16px 14px; }
.conn-tools { border-top: 1px solid var(--border); }
.conn-head .grow > * { overflow-wrap: anywhere; }
.conn-icon { display: inline-flex; color: var(--accent); }
.conn-host, .conn-status { color: var(--text-dim); font-size: var(--text-xs); }
.conn-status.ok { color: var(--good); }
.conn-status.bad { color: var(--danger); }
.conn-projects { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; }
.conn-projects .chip.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.conn-tools summary { cursor: pointer; color: var(--text-dim); font-size: var(--text-sm); padding: 4px 0; }
.conn-tool { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.conn-tool .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.conn-tool small { color: var(--text-dim); overflow-wrap: anywhere; }
.conn-ro { color: var(--good) !important; }
.conn-danger { color: var(--danger) !important; }
.conn-allow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-dim); }
.conn-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.conn-add { display: flex; flex-direction: column; gap: 10px; }
.conn-add .row { padding-left: 0; padding-right: 0; }
.conn-fields { display: flex; flex-direction: column; gap: 8px; }
.conn-input { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--inset); color: var(--text); font: inherit; }
@media (max-width: 560px) { .conn-projects { max-width: 100%; justify-content: flex-start; } .conn-row { flex-direction: column; align-items: flex-start; } }

/* 0.0.92: questions with buttons (asking.js) and what GlirOS decides */
.ask-cards { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 2px; max-width: 760px; }
.ask-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.ask-question { font-weight: 600; font-size: var(--text-sm); margin-bottom: 6px; }
.ask-question small { font-weight: 400; color: var(--text-dim); }
.ask-opt.on { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.ask-opt small { color: var(--text-dim); }
.ask-opt.unavailable { opacity: .55; cursor: not-allowed; }
.ask-by { color: var(--accent) !important; }
.ask-actions { display: flex; justify-content: flex-end; }
.deleg-chip { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0 auto 6px; padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--text); font-size: var(--text-xs); border: 1px solid var(--border); max-width: calc(100% - 32px); }
.deleg-chip[hidden] { display: none; }
.deleg-chip span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deleg-x { display: inline-flex; border: 0; background: transparent; color: var(--text-dim); cursor: pointer; padding: 2px; border-radius: 999px; }
.deleg-x:hover { color: var(--text); background: var(--inset); }
.ask-fact-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.ask-input { flex: 1 1 220px; min-width: 0; padding: 7px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--inset); color: var(--text); font: inherit; }
textarea.ask-input { resize: vertical; }
.ask-given { font-size: var(--text-sm); color: var(--text-dim); white-space: pre-wrap; margin-top: 4px; }
.ask-q.answered .ask-question { color: var(--text-dim); }
.msg.assistant .ask-card .clarify-chips { display: flex; }  /* 0.0.92: a question stays answerable (and changeable) on older answers */
/* 0.0.94: offers (a tool that is off, a project) and the plan's tools */
.web-offer .btn + .btn { margin-left: 0; }
.web-offer .offer-never { font-size: var(--text-xs); }
.plan-tools-card { margin: 10px 0 2px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 8%, transparent); display: flex; flex-direction: column; gap: 8px; }
.plan-tools-head { display: flex; align-items: center; gap: 8px; }
.plan-tools-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plan-tools-what { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 2px; }
.plan-tools-what small { color: var(--text-dim); }
.plan-tools-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.plan-tools-hint { color: var(--text-dim); font-size: var(--text-xs); }
.plan-tool { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: var(--text-2xs); line-height: 17px; color: var(--text-dim); background: color-mix(in srgb, var(--text) 8%, transparent); white-space: nowrap; }
.plan-tool.off { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.tasks-waiting { border: 1px solid var(--warn); border-radius: var(--radius); padding: var(--space-2) var(--space-3); }  /* 0.1.49: an outline like .notice.warn, no hard left bar */
.task-wait { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.task-wait label, .task-wait-text { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.task-wait small { color: var(--text-dim); }
.task-wait-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.task-step.wait .task-dot { background: color-mix(in srgb, var(--warn) 25%, transparent); }
.task-step.user .task-dot { background: color-mix(in srgb, var(--accent) 20%, transparent); }

/* 0.0.98: comparing models (an experiment) -- the Compare chip, the bar while armed, the answers side by side */
.compare-btn.on { color: var(--accent); background: var(--accent-soft); }
.compare-bar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0 auto var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: 12px; max-width: var(--chat-width, 820px); width: calc(100% - 2 * var(--space-4)); box-sizing: border-box; border: 1px solid var(--accent-soft); }
.compare-bar .compare-ico { color: var(--accent); flex: none; display: inline-flex; }
.compare-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-sm); }
.compare-text span { color: var(--text-dim); font-size: var(--text-xs); }
.compare-picks { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.compare-pick { max-width: 220px; }
.compare-panel { margin-top: var(--space-3); border: 1px solid var(--border); border-radius: 12px; padding: var(--space-3); background: color-mix(in srgb, var(--text) 6%, transparent); }
.compare-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.compare-head > span:first-child { color: var(--accent); display: inline-flex; }
.compare-note { color: var(--text-dim); font-size: var(--text-xs); flex: 1 1 200px; }
.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); }
.compare-card { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: var(--space-3); border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.compare-card.saved { border-color: var(--accent-soft); }
.compare-card-head { display: flex; align-items: center; gap: var(--space-2); }
.compare-card-head strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.compare-facts { color: var(--text-dim); font-size: var(--text-xs); }
.compare-body { max-height: 340px; overflow: auto; font-size: var(--text-sm); overflow-wrap: anywhere; }
.compare-card .btn { align-self: flex-start; }
.from-model { display: flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: var(--text-xs); margin-top: 4px; }
.from-model span { display: inline-flex; }

/* 0.0.98: thorough answers -- the switch (lit up as a tip), the emergency numbers first, GlirOS's line under the answer */
.thorough-btn.on { color: var(--accent); background: var(--accent-soft); }
.thorough-btn.suggest:not(.on) { color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); animation: thorough-glow 1.6s ease-in-out 2; }
@keyframes thorough-glow { 50% { box-shadow: 0 0 0 4px var(--accent-soft); } }
.emergency-card { margin: 0 0 var(--space-2); padding: var(--space-3); border-radius: 12px; border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.emergency-card.crisis { border-color: var(--accent); background: var(--accent-soft); }
.emergency-card strong { display: block; margin-bottom: 4px; }
.emergency-card ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.emergency-number { font-weight: 600; font-variant-numeric: tabular-nums; }
.emergency-card small { display: block; margin-top: 6px; color: var(--text-dim); }
.gliros-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; font-size: var(--text-xs); color: var(--text-dim); }
.gliros-line a { color: var(--accent); }
.thorough-badge { font-size: var(--text-2xs); }
.thorough-more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); }
.thorough-more > span { color: var(--text-dim); flex: 1 1 220px; }
@media (prefers-reduced-motion: reduce) { .thorough-btn.suggest:not(.on) { animation: none; } }

/* 0.0.99: the last step done with earlier ones open; "Yes, go on"; the version a file tab shows */
.plan-unticked { display: block; color: var(--text-dim); font-size: var(--text-sm); margin-top: 6px; }
.task-plan .plan-unticked { margin: var(--space-2) 0 0; }
.go-on-row { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.output-title.with-version { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.output-title-name { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.output-version-tag { color: var(--text-dim); font-weight: 400; font-size: 0.85em; opacity: 0.75; flex-shrink: 0; }
.output-version-newest { flex-shrink: 0; background: none; border: 0; padding: 0 2px; color: var(--accent); font-size: 0.8em; cursor: pointer; text-decoration: underline; }
.output-version-newest:hover { color: var(--text); }

/* ---- 0.1.0: notifications -- the bell, its list, Settings > Notifications (the support chat's notices.css, unchanged) ---- */
/* GlirOS notifications: the bell, its list and the settings block (prep 0.1.0). Uses the app's tokens (tokens.css).
   Every class starts with nt- so it can't meet the app's own rules. */
.nt-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-dim); cursor: pointer; }
.nt-bell:hover { background: var(--accent-soft); color: var(--text); }
.nt-bell:focus-visible, .nt-panel button:focus-visible, .nt-settings input:focus-visible, .nt-settings button:focus-visible { outline: none; box-shadow: var(--focus); }
.nt-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font: 700 10px/16px var(--font); text-align: center; }

.nt-panel { position: fixed; z-index: 55; width: min(380px, calc(100vw - 16px)); max-height: min(560px, calc(100vh - 16px)); display: flex; flex-direction: column; background: var(--surface-solid); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--text); font: var(--text-sm)/1.45 var(--font); overflow: hidden; }
.nt-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-2); border-bottom: 1px solid var(--border); }
.nt-head h2 { flex: 1 1 auto; margin: 0; font: 600 var(--text-md) var(--font-display); }
.nt-link { border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm); }
.nt-link:hover { background: var(--accent-soft); }
.nt-link[disabled] { color: var(--text-faint); cursor: default; background: none; }
.nt-ask { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--accent-soft); }
.nt-btn { flex: none; border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; cursor: pointer; }
.nt-btn:hover { background: var(--accent-soft); }
.nt-btn[disabled] { opacity: 0.5; cursor: default; }
.nt-list { list-style: none; margin: 0; padding: 4px; overflow-y: auto; }
.nt-row { display: flex; align-items: flex-start; border-radius: var(--radius-sm); }
.nt-row:hover, .nt-row:focus-within { background: var(--accent-soft); }
.nt-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: var(--space-2); text-align: left; border: 0; background: none; color: inherit; font: inherit; padding: var(--space-2); border-radius: var(--radius-sm); cursor: pointer; }
.nt-icon { flex: none; margin-top: 1px; color: var(--text-dim); }
.nt-icon.failed { color: var(--danger); }
.nt-icon.needs_you { color: var(--warn); }
.nt-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.nt-title { overflow-wrap: anywhere; }
.nt-row.unread .nt-title { font-weight: 600; }
.nt-body { color: var(--text-dim); overflow-wrap: anywhere; }
.nt-meta { color: var(--text-faint); font-size: var(--text-xs); }
.nt-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.nt-row-tools { flex: none; display: flex; padding: 6px 4px 0 0; opacity: 0; }
.nt-row:hover .nt-row-tools, .nt-row:focus-within .nt-row-tools { opacity: 1; }
@media (hover: none) { .nt-row-tools { opacity: 1; } }
.nt-x { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; color: var(--text-faint); font: inherit; font-size: var(--text-md); line-height: 1; border-radius: var(--radius-sm); cursor: pointer; }
.nt-x:hover { color: var(--text); background: var(--inset); }
.nt-empty { margin: 0; padding: var(--space-4) var(--space-3); color: var(--text-faint); }

.nt-settings { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); font: var(--text-md)/1.45 var(--font); }
.nt-settings h3 { margin: var(--space-3) 0 0; font: 600 var(--text-sm) var(--font); color: var(--text-dim); }
.nt-set { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.nt-set.off { opacity: 0.5; cursor: default; }
.nt-set input { margin-top: 3px; accent-color: var(--accent); }
.nt-set small { display: block; color: var(--text-faint); font-size: var(--text-xs); }
.nt-times { display: flex; flex-wrap: wrap; gap: var(--space-3); padding-left: 24px; color: var(--text-dim); font-size: var(--text-sm); }
.nt-time input { font: inherit; color: var(--text); background: var(--inset); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; }
.nt-settings .nt-empty { padding: 0; }
.nt-settings .nt-btn { align-self: flex-start; margin-top: var(--space-2); }
.tl-cut { touch-action: none; cursor: ew-resize; }  /* 0.1.2: drag to move the red line, click to cut */

/* 0.1.5: GlirOS.video -- a tool's video being made (video.js): one line per job, above the message box, with Cancel */
.vid-jobs { position: fixed; bottom: 96px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; flex-direction: column; gap: var(--space-2); width: min(520px, calc(100vw - 32px)); }
.vid-job { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 12px; align-items: center; padding: 0.6rem 0.9rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--glass-border); box-shadow: var(--shadow); font-size: var(--text-sm); animation: rise var(--medium); }
.vid-job-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vid-job-bar { grid-column: 1; grid-row: 2; height: 4px; border-radius: 2px; background: var(--glass-border); overflow: hidden; }
.vid-job-bar i { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.vid-job-cancel { grid-column: 2; grid-row: 1 / span 2; }
.msg-pictures .picture-tool { width: 28px; height: 28px; }
.tool-file-chip .tool-file-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; }
.dialog-fields { display: flex; flex-direction: column; gap: var(--space-2); }
.dialog-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); color: var(--text-dim); }
/* 0.1.60 (DUB): Speak the subtitles -- one row per subtitle file: its language and voice */
.dub-dialog { display: flex; flex-direction: column; gap: var(--space-2); max-height: 50vh; overflow: auto; }
.dub-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px var(--space-2); padding: var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); }
.dub-row .dub-file { grid-column: 1; overflow-wrap: anywhere; color: var(--text); }
.dub-row .dub-cues { grid-column: 2; justify-self: end; font-size: var(--text-xs); color: var(--text-faint); }
.dub-row .dialog-field select { min-width: 0; width: 100%; }
.dub-row .dub-note { grid-column: 1 / -1; color: var(--warn); font-size: var(--text-xs); }
.dub-row .dub-note:empty { display: none; }
@media (max-width: 520px) { .dub-row { grid-template-columns: 1fr; } .dub-row .dub-cues { grid-column: 1; justify-self: start; } }
/* 0.1.76 (L2): the prompt helper's form (a Guided model): the kind's few fields, GlirOS writes the prompt */
.ph-form { display: flex; flex-direction: column; gap: var(--space-2); max-height: 55vh; overflow: auto; }
.ph-form .ph-field { width: 100%; min-width: 0; box-sizing: border-box; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--space-2); font: inherit; font-size: var(--text-sm); color: var(--text); resize: vertical; }
.ph-form .ph-note { color: var(--warn); }
.ph-form .ph-note:empty { display: none; }
/* 0.1.77 (ADD-MODEL-LINK): Settings > Models > Add a model from a link, and the "Added by you" group */
.lm-ask { flex: 1 1 18rem; min-width: 0; }
.lm-input { flex: 1 1 auto; min-width: 0; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.4rem 0.6rem; font: inherit; font-size: var(--text-sm); color: var(--text); }
.lm-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); }
.lm-head { overflow-wrap: anywhere; }
.lm-files { display: flex; flex-direction: column; gap: var(--space-1); padding: 0 var(--space-3) var(--space-2); }
.lm-file { display: flex; flex-direction: column; gap: var(--space-1); overflow-wrap: anywhere; }
.lm-file.pick { flex-direction: row; align-items: flex-start; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-sm); background: var(--inset); cursor: pointer; }
.lm-file-text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.lm-file-name { color: var(--text); font-family: var(--mono); font-size: var(--text-xs); }
.lm-file-meta { color: var(--text-dim); font-size: var(--text-xs); }
.lm-licence, .lm-policy { margin: 0; font-size: var(--text-sm); }
.lm-lines { margin: 0; padding-left: var(--space-4); font-size: var(--text-xs); color: var(--text-dim); }
.lm-accept, .lm-mmproj { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--text); }
/* 0.1.77d: the design chat's look at the link section (gliros-design-report-handover.md §17): the accent on its links and
   choices, a hover tint on the file choices; and the base-model line (add-model-link 0.1.1) */
.lm-card a, .lm-refused a { color: var(--accent); text-underline-offset: 0.15em; }
.lm-file.pick input, .lm-accept input, .lm-mmproj input { flex: none; margin: 0.2rem 0 0; accent-color: var(--accent); }
.lm-file.pick:hover { background: var(--accent-soft); }
.lm-base { margin: 0; }
.mc-mine { margin-top: var(--space-3); }
.mc-mine-title { margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 500; }
/* 0.1.5b: Try: a tool's simple examples (Settings > Tools) */
.tool-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.tool-try-label { opacity: .75; }
.tool-try-chip { font-size: var(--text-xs); max-width: 100%; white-space: normal; text-align: left; }
/* 0.1.6: Settings > Backup */
.backup-box input[type="password"] { min-width: 0; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.45rem 0.6rem; font-size: var(--text-sm); color: var(--text); }
.backup-pw { display: flex; flex-direction: column; gap: var(--space-2); flex: 0 1 16rem; }
.backup-box .card > .row-controls { padding: var(--space-3) var(--space-4); }
.backup-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: center; padding: var(--space-3) var(--space-4); }
.backup-progress .vid-job-bar { grid-column: 1; }
.backup-progress .btn { grid-column: 2; grid-row: 1 / span 2; }
.backup-pending { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* 0.1.7 (H5, H1, R2): how an answer was made, the code check's line, the earlier version of a repaired file, what left this PC */
.answer-trace { margin: 4px 0 0; font-size: var(--text-xs); color: var(--text-dim); }
.answer-trace .trace-check { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 999px; margin-bottom: 4px; }
.answer-trace .trace-check.good { background: rgba(46, 160, 67, 0.12); color: var(--text); }
.answer-trace .trace-check.warn { background: rgba(210, 153, 34, 0.16); color: var(--text); }
.answer-trace .trace-stop { margin-bottom: 4px; color: var(--text); }
.answer-trace .trace-details > summary { cursor: pointer; list-style: none; opacity: 0.8; }
.answer-trace .trace-details > summary::-webkit-details-marker { display: none; }
.answer-trace .trace-details[open] > summary { opacity: 1; }
.answer-trace .trace-steps, .answer-trace .trace-left, .answer-trace .trace-read-list { margin: 4px 0; padding-left: 1.2rem; }
.answer-trace .trace-steps li.bad { color: var(--danger); }
.answer-trace h5 { margin: 6px 0 2px; font-size: inherit; }
.answer-trace .trace-facts { margin: 4px 0; }
.code.code-superseded { opacity: 0.7; }
.code.code-superseded .code-head { cursor: pointer; }
.code.code-superseded:not(.open) pre { display: none; }
.preview-console-head .preview-fix { margin-left: auto; margin-right: 4px; }
.left-box { width: min(560px, 100%); max-height: min(80vh, 720px); overflow-y: auto; }
.left-box h3 { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-sm); }
.left-box ul { margin: 0 0 var(--space-2); padding-left: 1.2rem; font-size: var(--text-sm); }
.left-box .left-day summary { cursor: pointer; font-size: var(--text-sm); padding: 4px 0; }
/* 0.1.13 (PDF2): a PDF's sheet -- Overview and Pages tabs; the Pages tab (docpages.js) */
.docview-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--glass-border); }
.docview-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 12px; font: inherit; font-size: var(--text-sm); color: var(--text-dim); cursor: pointer; }
.docview-tab.on { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.docpages { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.docpages-bar { display: flex; align-items: center; gap: 6px; position: sticky; top: calc(-1 * var(--space-4)); z-index: 2; background: var(--surface); padding: 4px 0; font-size: var(--text-sm); }
.docpages-zoom { min-width: 3.2em; text-align: center; }
.docpages-of { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.docpages-at { width: 4.2em; }
.docpages-list { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); overflow-x: auto; }
.docpages-page { position: relative; background: #fff; box-shadow: var(--shadow); flex: none; max-width: none; }
.docpages-canvas { display: block; }
.docpages-mark { position: absolute; background: color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 2px; pointer-events: none; }
/* 0.1.13 (PDF2): the row of choices under a PDF just added */
.pdf-choices { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; margin: -2px 0 4px 34px; }
.pdf-choice { font-size: var(--text-xs); }
/* 0.1.13: Media Studio -- a part's eye, and Compare (hold to see the original) */
.ms-eye.off { color: var(--accent); }
.ms-hidden-note { margin: 0 0 4px; }
.ms-compare { position: absolute; left: 8px; top: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); font: inherit; font-size: var(--text-xs); cursor: pointer; user-select: none; touch-action: none; }
.ms-stage.ms-comparing .ms-compare { background: var(--accent); color: var(--on-accent); }
/* 0.1.13: a timeline line's eye; a line switched off */
.tl-lane-label { display: flex; align-items: center; gap: 4px; }
.tl-lane-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.tl-eye { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--text-dim); cursor: pointer; }
.tl-eye:hover { background: var(--glass-border); }
.tl-eye.off { color: var(--accent); }
.tl-row-off { opacity: 0.4; filter: grayscale(1); }

/* 0.1.20: Media Studio's colour graph, looks and "Set by GlirOS" */
.ms-graph-fold { margin: 0 0 var(--space-2); }
.ms-graph-fold > summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-dim); padding: 2px 0; list-style-position: inside; }
.ms-graph { display: block; width: 100%; height: 84px; margin-top: var(--space-1); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.ms-looks { display: grid; gap: var(--space-1); margin: var(--space-2) 0; }
.ms-looks .ms-chips { flex-wrap: wrap; }
.ms-setby { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); margin: var(--space-1) 0 var(--space-2);
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: var(--text-sm); }
.ms-setby > span:nth-child(2) { flex: 1; min-width: 0; }
.ms-setby small { color: var(--text-dim); }
.ms-row.ms-glide label { color: var(--accent); transition: color .3s; }
.ms-row.ms-glide input[type=range] { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 55%, transparent)); }
@media (prefers-reduced-motion: reduce) { .ms-row.ms-glide input[type=range] { filter: none; } }

/* 0.1.21: the tools chat's colour key (key-panel.css 1.0.0) */
/* 0.1.79: the key's backdrop chips (the tools chat's key-panel.css, 2026-10-21): up to five, wrapping at 320 px */
.mk-bd { display: flex; flex-direction: column; gap: var(--space-2); }
.mk-bd-seg { flex-wrap: wrap; row-gap: var(--space-1); }
.mk .mk-row { flex-wrap: wrap; }
.mk .mk-row .ms-seg { flex: 1; min-width: 0; }
.mk-swatch { width: 22px; height: 22px; border-radius: var(--radius-sm); border: 1px solid var(--border); flex: none; }
.mk-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; min-width: 88px; }
.mk-check input { accent-color: var(--accent); width: var(--space-4); height: var(--space-4); margin: 0; }
.mk-smart { display: flex; flex-direction: column; gap: var(--space-1); }
.mk-tl { display: flex; align-items: center; gap: var(--space-2); }
.mk-tl input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.mk-tl small { color: var(--text-dim); font-size: var(--text-xs); }
.mk-tl.off { opacity: .55; }
.mk-color { width: 40px; height: 26px; padding: 0 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); cursor: pointer; }
.mk-color:disabled { opacity: .45; cursor: default; }
.mk-adv { border-top: 1px solid var(--border); padding-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.mk-adv > summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-dim); padding: 2px 0; }
.mk-adv > summary:hover { color: var(--text); }
.mk-adv:not([open]) { gap: 0; }
.mk-note { margin: 0; font-size: var(--text-sm); color: var(--text-dim); line-height: 1.45; }
/* 0.1.81c: the tools chat's chooser and Corridor Key box (key-panel.css 2026-10-22), with the design chat's look
   (claude/gliros-design-corridor-review.md): inset, not glass on glass; dim hints; "installed" with a good dot; buttons
   on one line (the row wraps); the link in the accent */
.mk .ms-chip.mk-off { opacity: .5; }
.mk-ck { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius); background: var(--inset); }
.mk-ck-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.mk-ck-found { color: var(--text-dim); font-size: var(--text-xs); }
.mk-ck-found.yes::before { content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-1); border-radius: 50%; background: var(--good); vertical-align: 0.05em; }
.mk-ck-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.mk-ck .btn { white-space: nowrap; }
.mk-ck-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--accent); text-underline-offset: 0.15em; justify-self: start; align-self: flex-start; }
/* the two-handle levels slider: see-through below the left handle, solid above the right */
.mk-levels { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); flex-wrap: wrap; }
.mk-levels > span { color: var(--text-dim); min-width: 88px; }
.mk-levels > output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }
.mk-range2 { position: relative; flex: 1; min-width: 100px; height: 24px; }
.mk-range2::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--text-faint)); opacity: .5; }
.mk-range2-fill { position: absolute; top: 10px; height: 4px; border-radius: 2px; background: var(--accent); }
.mk-range2 input[type=range] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 24px; }
.mk-range2 input[type=range]::-webkit-slider-runnable-track { background: none; height: 24px; }
.mk-range2 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 16px; height: 16px; margin-top: 4px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--surface-solid); box-shadow: 0 0 0 1px var(--border); cursor: pointer; }
.mk-range2 input[type=range]::-moz-range-thumb { pointer-events: auto; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface); cursor: pointer; }
.mk-range2 input[type=range]::-moz-range-track { background: none; }
.mk-range2 input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }

/* 0.1.21: the tools chat's sound controls (sound-ui.css 1.0.0) */
.sd-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.sd-note { margin: 0; font-size: var(--text-sm); color: var(--text-dim); line-height: 1.45; }
.sd-mute { display: inline-flex; align-items: center; gap: 6px; }
.sd-line { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
.sd-line .icon-btn { width: 28px; height: 28px; }
.sd-line-vol { width: 64px; min-width: 0; accent-color: var(--accent); }
.sd-link { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-dim); }
.sd-link.on > span { color: var(--accent); }
.sd-link.off > span { color: var(--warn); font-weight: 600; }
/* the waveform strip at the bottom of a block on the timeline (the app draws it with drawWave) */
.sd-wave { display: block; width: 100%; height: 18px; }

/* 0.1.21: the timeline's keyed clip, Pick's crosshair, the waveforms and sound blocks' marks */
.tl-keyed { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; transform-origin: 50% 50%; }
.tl-keyed.fill { object-fit: cover; }
.tl-screen.tl-picking, .tl-screen.tl-picking * { cursor: crosshair !important; }
.tl-block .sd-wave { position: absolute; left: 0; right: 0; bottom: 0; opacity: .85; pointer-events: none; }
.tl-block .sd-chain, .tl-block .sd-drift { position: absolute; top: 2px; right: 6px; font-size: var(--text-2xs); line-height: 1; pointer-events: none; }
.tl-block .sd-drift { color: var(--warn); font-weight: 600; }
.tl-lane-label .sd-line { margin-left: auto; }
/* (the line's volume shows when the pointer or the keyboard is on its line's name. 0.1.31b, the owner: it floats over the
   rows beside the name, so the labels keep their width and the timeline doesn't slide) */
.tl-lane-label { position: relative; }
.tl-lane-label .sd-line-vol { position: absolute; z-index: 8; left: 100%; top: 50%; transform: translateY(-50%); width: 120px; height: 28px; margin: 0;
  padding: 0 8px; background: var(--surface-solid); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow);
  visibility: hidden; opacity: 0; transition: opacity var(--fast); }
.tl-lane-label:hover .sd-line-vol, .tl-lane-label:focus-within .sd-line-vol { visibility: visible; opacity: 1; }
.tl-lane-label .sd-line .icon-btn { width: 22px; height: 22px; }

/* 0.1.22: the floating chat over a full-screen tool (floatchat.js): glass boxes on the left, newest at the bottom */
.float-chat { position: absolute; z-index: 31; left: calc(var(--sidebar-w) + 2 * var(--space-3) + 14px); bottom: calc(var(--space-3) + 14px);
  width: var(--fc-w, 340px); max-height: calc(100% - 2 * var(--space-3) - 80px); display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.fc-list { display: flex; flex-direction: column; gap: 10px; overflow: hidden; justify-content: flex-end; min-height: 0; }
.fc-box { pointer-events: auto; font: inherit; text-align: left; cursor: pointer; color: var(--text);
  max-width: 88%; padding: 9px 13px; border-radius: 18px; font-size: var(--text-sm); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--glass-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.14);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; flex: none;
  opacity: max(.25, calc(1 - var(--fc-age, 0) * .15)); transition: opacity .2s; animation: conv-bubble-in .25s ease-out; }
.fc-box:hover, .fc-box:focus-visible { opacity: 1; }
.fc-box:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc-box.user { align-self: flex-end; border-bottom-right-radius: 6px; background: color-mix(in srgb, var(--accent) 30%, var(--glass-strong)); }
.fc-box.assistant { align-self: flex-start; border-bottom-left-radius: 6px; }
.fc-box.busy::before { content: "…"; color: var(--text-dim); }
.fc-bar { pointer-events: auto; display: flex; }
.fc-input { flex: 1; min-width: 0; font: inherit; font-size: var(--text-sm); color: var(--text); padding: 9px 14px; border-radius: 999px;
  background: var(--glass-strong); backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border); box-shadow: 0 4px 16px rgba(0,0,0,.14); }
.fc-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fc-cloud { pointer-events: auto; align-self: flex-start; color: var(--text-dim); font-size: var(--text-xs); padding: 0 6px; }
@media (prefers-reduced-motion: reduce) { .fc-box { animation: none; transition: none; } }
/* 0.1.22: a file with bytes in the files panel (a tool's GlirOS.save: a PDF, a .glb, a picture) */
.binary-file { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 24px 20px; }
.binary-file strong { font-size: var(--text-md); overflow-wrap: anywhere; }
.binary-meta { margin: 0; color: var(--text-dim); }
.binary-note { margin: 0 0 6px; color: var(--text-dim); font-size: var(--text-sm); max-width: 52ch; }
.binary-picture { max-width: 100%; max-height: 50vh; border-radius: 10px; border: 1px solid var(--border); }
/* 0.1.23 (SDK v1.9): GlirOS.secret's dialog -- the key typed in GlirOS's own field, a quiet link to where to get one */
.secret-ask { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 2px; }
.secret-label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); color: var(--text-dim); }
.secret-help { font-size: var(--text-sm); color: var(--accent); align-self: flex-start; }
.secret-links { margin: 0; font-size: var(--text-sm); color: var(--text-dim); align-self: flex-start; }  /* 0.1.78n: where to get one · terms · privacy */
.secret-links a { color: var(--accent); }
/* 0.1.25: the connection pill -- in a remote session "you're on <your PC>", on the PC "in use from a browser" -- and its card */
.remote-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; margin-right: 6px; border-radius: 999px;
  font: inherit; font-size: var(--text-sm); color: var(--text); cursor: pointer; max-width: 220px;
  background: color-mix(in srgb, var(--good) 14%, var(--glass)); border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); }
.remote-pill .remote-link { margin: 0; cursor: inherit; }
.remote-pill-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remote-pill:hover { background: color-mix(in srgb, var(--good) 22%, var(--glass)); }
.remote-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.remote-card { position: fixed; z-index: 60; width: min(320px, calc(100vw - 24px)); padding: 14px 16px; border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start; box-shadow: var(--shadow); }
.remote-card p { margin: 0; }
.remote-card-line { font-size: var(--text-sm); }
.remote-card-hint { font-size: var(--text-xs); color: var(--text-dim); }
@media (max-width: 520px) { .remote-pill { max-width: 130px; padding: 0 10px 0 8px; } }
/* 0.1.52 (SEC-2 step B): "Allow remote access from <name>?" on the PC, and the code to allow a browser */
.bauth-prompt { position: fixed; z-index: 70; top: 72px; left: 50%; transform: translateX(-50%); width: min(420px, calc(100vw - 24px));
  padding: 16px 18px; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.bauth-title { font-size: var(--text-md); }
.bauth-body { display: flex; flex-direction: column; gap: 10px; }
.bauth-body p { margin: 0; font-size: var(--text-sm); }
.bauth-fpr code { font-family: var(--mono); letter-spacing: 0.04em; white-space: nowrap; }
.bauth-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bauth-msg:empty { display: none; }
.bauth-msg { color: var(--danger); font-size: var(--text-xs); }
.remote-bauth-big, .row .remote-bauth-big { font-family: var(--mono); font-size: var(--text-xl); color: var(--text); word-break: normal; letter-spacing: 0.12em; padding: 4px 10px; border-radius: var(--radius);
  background: var(--inset); align-self: flex-start; }
.remote-bauth-code { gap: 12px; flex-wrap: wrap; }
.remote-bauth-notice { gap: 12px; }

/* 0.1.26: Media Studio's preview views and scopes (the tools chat's media-studio/views/views-ui.css 1.0.0) */
/* Media Studio's preview views and scopes (views-ui.js), in GlirOS tokens. The View pill sits top right on the stage
   (the app's "Original" pill is top left), at the same height and in the same calm glass. The menu is fixed to the
   window, so the stage's rounded corners never cut it. */
.mv-host { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.mv-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mv-pill { pointer-events: auto; position: absolute; right: 8px; top: 8px; z-index: 6; display: inline-flex; align-items: center; gap: 5px;
  max-width: calc(100% - 120px); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--surface) 80%, transparent); color: var(--text); font: inherit; font-size: var(--text-xs); cursor: pointer; user-select: none; }
.mv-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-pill.on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mv-pill:focus-visible, .mv-item:focus-visible, .mv-handle:focus-visible, .mv-scope:focus-visible { outline: none; box-shadow: var(--focus); }
.mv-menu { pointer-events: auto; position: fixed; z-index: 1000; width: 250px; max-height: calc(100vh - 16px); overflow: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--radius); border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); }
.mv-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 8px 6px 24px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; position: relative; }
.mv-item:hover { background: var(--accent-soft); }
.mv-item[aria-checked="true"]::before { content: ""; position: absolute; left: 9px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mv-item-name { font-size: var(--text-sm); }
.mv-item-hint { font-size: var(--text-xs); color: var(--text-dim); line-height: 1.3; }
.mv-only { margin: 4px 8px 2px; font-size: var(--text-xs); color: var(--text-faint); line-height: 1.3; }
.mv-divider { pointer-events: auto; position: absolute; top: 0; bottom: 0; left: 50%; width: 28px; margin-left: -14px; z-index: 4; cursor: ew-resize; touch-action: none; }
.mv-line { position: absolute; top: 0; bottom: 0; left: 13px; width: 2px; background: rgb(255 255 255 / .9); box-shadow: 0 0 0 1px rgb(0 0 0 / .25); }
.mv-handle { position: absolute; left: 2px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%;
  background: rgb(255 255 255 / .95); box-shadow: 0 1px 6px rgb(0 0 0 / .35); }
.mv-handle::before, .mv-handle::after { content: ""; position: absolute; top: 8px; border: 4px solid transparent; }
.mv-handle::before { left: 2px; border-right-color: #333; }
.mv-handle::after { right: 2px; border-left-color: #333; }
.mv-tags { position: absolute; left: 8px; right: 8px; top: 40px; display: flex; justify-content: space-between; }
.mv-tag { font-size: var(--text-2xs); padding: 1px 7px; border-radius: 999px; color: #fff; background: rgb(0 0 0 / .45); }
.mv-legend { position: absolute; right: 8px; top: 40px; max-width: calc(100% - 16px); font-size: var(--text-xs); padding: 2px 8px; border-radius: 999px; color: #fff; background: rgb(0 0 0 / .5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-legend:empty { display: none; }
/* the graph fold's switch: quiet chips, one accent for the chosen */
.mv-scopes { display: flex; flex-wrap: wrap; gap: 4px; margin: var(--space-1) 0 0; }
.mv-scope { font: inherit; font-size: var(--text-xs); padding: 0.2rem 0.6rem; border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer; }
.mv-scope:hover { color: var(--text); }
.mv-scope[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

/* 0.1.27 (H12 phase 1): messages written while GlirOS works (msgqueue.js) -- a calm strip above the message box */
.queue-strip { display: flex; flex-direction: column; gap: 0.35rem; margin: 0 auto 0.5rem; padding: 0.5rem 0.6rem; flex: none; width: calc(100% - 2 * var(--space-4)); max-width: var(--chat-max-w); border-radius: var(--radius-lg); box-sizing: border-box; }
.queue-head { font-size: var(--text-xs); color: var(--text-dim); padding: 0 0.15rem; }
.queue-chip { display: flex; align-items: center; gap: 0.5rem; min-width: 0; padding: 0.3rem 0.35rem 0.3rem 0.6rem; border-radius: 0.75rem;
  background: color-mix(in srgb, var(--accent) 7%, transparent); }
.queue-tag { flex: none; font-size: var(--text-xs); color: var(--accent); font-weight: 600; white-space: nowrap; }
.queue-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); color: var(--text); }
.queue-chip .icon-btn { width: 1.9rem; height: 1.9rem; flex: none; }
.queue-progress { margin: 0 auto 0.5rem; padding: 0.6rem 0.75rem; flex: none; width: calc(100% - 2 * var(--space-4)); max-width: var(--chat-max-w); border-radius: var(--radius-lg); max-height: 40vh; overflow: auto; box-sizing: border-box; }
.queue-progress-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; font-size: var(--text-sm); }
.queue-strip[hidden] { display: none; }

/* 0.1.28 (RECIPE): the green-screen job's card under GlirOS's answer (media/recipecard.js) */
.recipe-card { margin: 0.4rem 0 0.8rem; padding: 0.8rem 0.9rem; border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 0.6rem; max-width: var(--chat-max-w); }
.recipe-head { font-weight: 600; font-size: var(--text-sm); color: var(--text-dim); }
.recipe-plan { margin: 0; padding-left: 1.1rem; font-size: var(--text-sm); display: flex; flex-direction: column; gap: 0.2rem; }
.recipe-needs { display: flex; flex-direction: column; gap: 0.6rem; }
.recipe-need { display: flex; flex-direction: column; gap: 0.35rem; font-size: var(--text-sm); }
/* 0.1.81zzz44: the question still open when the button is pressed; the button looks waiting until all are answered */
.recipe-need.recipe-need-open { box-shadow: var(--focus); border-radius: var(--radius-sm); }
.recipe-make[aria-disabled="true"] { opacity: 0.6; }
.recipe-chips, .recipe-row, .recipe-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.recipe-chips .ms-chip.suggested { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.recipe-text { flex: 1 1 14rem; min-width: 0; }
.recipe-pick-wrap { display: flex; flex-direction: column; gap: 0.3rem; }
.recipe-pick { width: min(100%, 320px); height: auto; border-radius: 0.5rem; cursor: crosshair; }
.recipe-status { margin: 0; font-size: var(--text-sm); color: var(--text-dim); }
.recipe-status:empty { display: none; }
.recipe-note { margin: 0; font-size: var(--text-sm); color: var(--text-dim); }
/* 0.1.81zi: the slideshow card */
.slideshow-rows { display: flex; flex-direction: column; gap: 0.6rem; }
.slideshow-plan { margin: 0; font-size: var(--text-sm); }
.slideshow-zoomrow { font-size: var(--text-sm); display: flex; gap: 0.4rem; align-items: center; }
.slideshow-card .ms-hint { color: var(--text-dim); font-size: var(--text-xs); }

/* 0.1.31b (the owner: "the same way One file fills the full screen, the timeline should fill it"): Media Studio's timeline
   fills the panel. Wide (full screen, or the side panel dragged out to 860 px or more): the preview on the left, the
   chosen block's settings beside it, the toolbar and the rows under them, and the one action along the bottom -- no page
   scroll; the settings and the rows scroll on their own. Narrow: one column as before, the preview fitted to its shape. */
.media-studio { container: ms / inline-size; }
.app.with-output.output-full .studio-panel.media-studio.ms-tl-mode { display: flex; flex-direction: column; max-width: none; }
.studio-panel.media-studio.ms-tl-mode > .ms-timeline { flex-shrink: 1; }
.ms-timeline .tl-foot .ms-actions .btn { flex: none; }
.ms-timeline .tl-foot .ms-actions .tl-run { flex: 1; }
.tl-to-file { display: inline-flex; align-items: center; gap: 6px; }
@container ms (min-width: 860px) {
  .ms-timeline:not([hidden]) { display: grid; flex: 1 1 0; min-height: 0; grid-template-columns: minmax(0, 1fr) clamp(300px, 32%, 460px);
    grid-template-rows: minmax(160px, 1fr) auto auto auto; grid-template-areas: "stage side" "tools tools" "tracks tracks" "foot foot"; gap: var(--space-2) var(--space-4); }
  .ms-timeline > .tl-stage { grid-area: stage; min-height: 0; }
  .ms-timeline .tl-fit { flex: 1 1 0; min-height: 0; container-type: size; display: grid; place-items: center; }
  .ms-timeline .tl-screen { width: min(100cqw, calc(100cqh * var(--ar, 1.7778))); height: auto; max-height: none; }
  .ms-timeline > .tl-inspector { grid-area: side; min-height: 0; overflow-y: auto; align-self: stretch; padding: var(--space-3); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); }
  .ms-timeline > .tl-inspector:empty { display: block; }
  .ms-timeline > .tl-toolbar { grid-area: tools; }
  .ms-timeline > .tl-tracks { grid-area: tracks; max-height: 32vh; overflow-y: auto; }
  .ms-timeline .tl-hint { max-width: none; }
  .media-studio .ms-timeline > .ms-foot.tl-foot { grid-area: foot; position: static; margin: 0 calc(-1 * var(--space-3)) calc(-1 * var(--space-3)); }
}

/* 0.1.32 (SITES-UP): Settings > Tools > Website hosts */
.site-host-row .text small { display: block; overflow-wrap: anywhere; }
.site-host-key { font-family: var(--mono); font-size: var(--text-xs); color: var(--text-faint); }
.site-host-actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); }
.site-host-form select.dialog-input { width: 100%; }
.site-host-form .settings-hint { margin: -4px 0 4px; }

.site-host-row .row-controls { flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
/* 0.1.32: Undo and Reset inside a timeline part (Colour and look, Crop, Colour key) */
.tl-part-tools { display: flex; gap: var(--space-2); justify-content: flex-end; padding-top: var(--space-1); border-top: 1px solid var(--border); margin-top: var(--space-1); }
.tl-part-tools .btn { display: inline-flex; align-items: center; gap: 6px; }
/* 0.1.32: the clip a crossfade fades from, under the next one in the timeline's preview */
.tl-under { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

/* 0.1.34 (VOICE-N): Settings > Voice > Speech recognition on this PC */
.stt-models { margin: 4px 0 8px; padding-left: 18px; font-size: var(--text-sm); color: var(--text-dim); }
.stt-models li { margin: 2px 0; overflow-wrap: anywhere; }
.stt-models .badge { margin-left: 6px; }
.stt-which { margin: 0 12px 10px; }
.stt-compare-out { padding: 0 12px 6px; }
.stt-compare-row { margin: 6px 0; }
.stt-compare-row p { margin: 2px 0 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
/* 0.1.35 (REACH phase 2): GlirOS's line from what the answer holds */
.reach-line { align-items: flex-start; flex-wrap: nowrap; gap: 6px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 7%, transparent); }
.reach-line-icon { flex: 0 0 auto; color: var(--warn); line-height: 0; margin-top: 1px; }
.reach-line-body p { margin: 0; }
.reach-line-body p + p, .reach-line-body p + ul { margin-top: 4px; }
.reach-unsafe { margin: 2px 0 0; padding-left: 18px; }
.reach-unsafe li { margin: 1px 0; }

/* 0.1.44 (the owner's layout screening): a table in an answer keeps its words whole and scrolls sideways on a phone,
   instead of breaking "Friday" into "Frida y" */
.md table th, .md table td { overflow-wrap: normal; word-break: normal; }
.md table td { min-width: 4ch; }
/* 0.1.44: a TV or a 4K screen at 100 % shows GlirOS larger, not tiny in the middle */
@media (min-width: 2400px) and (min-height: 1300px) { html { zoom: 1.25; } }
@media (min-width: 3200px) and (min-height: 1800px) { html { zoom: 1.6; } }

/* 0.1.45 (H4): memory across chats -- the card under an answer, the list in Settings > Memory */
.memory-card { margin-top: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.memory-card.done { background: transparent; border-style: dashed; }
.memory-card-fact { font-style: italic; overflow-wrap: anywhere; }
.memory-card-actions, .memory-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.memory-list { display: flex; flex-direction: column; gap: var(--space-1); }
.memory-item { display: flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0; border-bottom: 1px solid var(--border); }
.memory-item:last-child { border-bottom: none; }
.memory-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.memory-from { color: var(--text-dim); font-size: var(--text-xs); }
.memory-import-text { width: 100%; box-sizing: border-box; font: inherit; padding: var(--space-2); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text); resize: vertical; }
.memory-import-line { display: flex; gap: var(--space-2); align-items: flex-start; padding: 0.2rem 0; font-size: var(--text-sm); }
/* 0.1.45 (H8): Settings > Recipes, and a finished plan's Save as recipe */
.recipe-list { display: flex; flex-direction: column; gap: var(--space-1); }
.recipe-item { display: flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.recipe-item:last-child { border-bottom: none; }
.recipe-text { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.recipe-text small { color: var(--text-dim); font-size: var(--text-xs); }
.plan-save-recipe { display: inline-flex; align-items: center; gap: 0.3rem; }
@media (max-width: 480px) { .recipe-item { flex-wrap: wrap; } .recipe-text { flex-basis: 100%; } }

/* 0.1.56: Sound Studio (media/soundstudio.js): lines on a timeline, a mixer strip per line, the block's settings.
   It sizes to the side panel (container queries), and takes the whole screen with Full screen. */
.sound-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ss { flex: 1; min-height: 0; display: grid; grid-template-rows: auto minmax(160px, 1fr) auto; container-type: inline-size; background: var(--surface-solid); color: var(--text); outline: none; }
.ss:fullscreen { background: var(--bg); height: 100vh; }
.ss input[type=range], .ss input[type=checkbox] { accent-color: var(--accent); }
.ss-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.ss-title { display: none; font: 600 var(--text-md) var(--font-display); }
.ss:fullscreen .ss-title { display: inline; }  /* (the side panel's own header names it otherwise) */
.ss-transport, .ss-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ss-tools { margin-left: auto; }
.ss-btn { min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); color: var(--text); font: inherit; cursor: pointer; }
.ss-btn:hover { border-color: var(--accent); }
.ss-btn:disabled { opacity: 0.5; cursor: default; }
.ss-btn:focus-visible, .ss input:focus-visible, .ss select:focus-visible { outline: none; box-shadow: var(--focus); }
.ss-btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; min-width: 44px; }
.ss-btn.rec { color: var(--danger); }
.ss-btn.rec.on { background: var(--danger); color: var(--on-danger); }
.ss-btn.on { background: var(--accent-soft); border-color: var(--accent); }
.ss-btn.small { min-height: 24px; min-width: 26px; padding: 0 6px; font-size: var(--text-xs); }
.ss-btn.mute.on { background: var(--warn); color: var(--on-accent); border-color: transparent; }
.ss-btn.solo.on { background: var(--good); color: var(--on-accent); border-color: transparent; }
.ss-clock { font: 600 var(--text-md) var(--mono); min-width: 7ch; text-align: right; font-variant-numeric: tabular-nums; }
.ss-duck { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); }
.ss-duck input[type=range] { width: 72px; }
.ss-zoom { display: inline-flex; gap: 2px; }
.ss-dim { color: var(--text-dim); margin: 0; }
.ss-stage { display: grid; grid-template-columns: 150px 1fr; min-height: 0; }
.ss-heads { padding-top: 26px; border-right: 1px solid var(--border); overflow: hidden; }
.ss-head { height: 68px; padding: 6px 8px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name name" "role ms"; gap: 4px; align-content: center; }
.ss-head input.name { grid-area: name; }
.ss-head select { grid-area: role; min-width: 0; }
.ss-head .ms { grid-area: ms; }
.ss-head.sel { background: var(--accent-soft); }
.ss-head input.name { width: 100%; min-width: 0; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text); font: 600 var(--text-sm) var(--font); padding: 2px 4px; }
.ss-head input.name:hover, .ss-head input.name:focus { border-color: var(--border); background: var(--inset); }
.ss-head select { background: var(--inset); color: var(--text-dim); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-size: var(--text-xs); }
.ss-head .ms { display: flex; gap: 4px; align-items: start; }
.ss-scroll { position: relative; overflow: auto; }
.ss-ruler { position: sticky; top: 0; z-index: 3; height: 26px; background: var(--surface-solid); border-bottom: 1px solid var(--border); cursor: pointer; }
.ss-tick { position: absolute; top: 0; height: 100%; border-left: 1px solid var(--border); padding-left: 4px; font: var(--text-xs) var(--mono); color: var(--text-faint); pointer-events: none; }
.ss-marker { position: absolute; top: 0; height: 26px; transform: translateX(-1px); border-left: 2px solid var(--warn); }
.ss-marker input { margin-left: 2px; width: 9ch; background: var(--warn); color: var(--on-accent); border: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font: 600 var(--text-xs) var(--font); padding: 2px 4px; }
.ss-tracks { position: relative; min-height: 68px; }
.ss-track { position: relative; height: 68px; border-bottom: 1px solid var(--border); }
.ss-track.sel { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.ss-empty { position: absolute; left: var(--space-3); top: var(--space-3); max-width: 46ch; margin: 0; color: var(--text-dim); pointer-events: none; }
.ss-item { position: absolute; top: 6px; height: 56px; border: 1px solid var(--user-border); border-radius: var(--radius-sm); background: var(--user-bg); overflow: hidden; cursor: grab; touch-action: none; }
.ss-item.sel { border-color: var(--accent); box-shadow: var(--focus); }
.ss-item.voice { background: color-mix(in srgb, var(--good) 18%, transparent); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.ss-item.music { background: color-mix(in srgb, var(--warn) 16%, transparent); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.ss-item.silent-preview { border-style: dashed; }
.ss-item .lbl { position: absolute; left: 6px; top: 2px; right: 6px; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.ss-item canvas { position: absolute; left: 0; top: 14px; width: 100%; height: 40px; pointer-events: none; }
.ss-item .grip { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.ss-item .grip.l { left: 0; }
.ss-item .grip.r { right: 0; }
.ss-playhead { position: absolute; top: 0; width: 2px; background: var(--danger); z-index: 4; pointer-events: none; }
.ss-bottom { display: grid; grid-template-columns: 1fr minmax(220px, 300px); gap: var(--space-3); padding: var(--space-3); border-top: 1px solid var(--border); max-height: 50vh; overflow: auto; }
.ss-mixer { display: flex; gap: var(--space-2); overflow-x: auto; align-items: flex-start; }
.ss-strip { flex: 0 0 84px; display: grid; grid-auto-rows: auto; justify-items: center; gap: 6px; padding: 8px 6px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); }
.ss-strip.sel { border-color: var(--accent); }
.ss-strip.master { background: var(--accent-soft); margin-left: auto; }
.ss-strip .nm { max-width: 72px; min-height: 1.4em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.ss-strip .pan { width: 68px; }
.ss-ms { display: flex; gap: 4px; }
.ss-fader { display: flex; gap: 6px; height: 132px; align-items: stretch; }
.ss-fader input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 22px; height: 132px; }
.ss-fader canvas { width: 12px; height: 132px; border-radius: var(--radius-sm); background: var(--bg); }
.ss-strip .db { font: var(--text-xs) var(--mono); color: var(--text-dim); font-variant-numeric: tabular-nums; }
.ss-side { display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.ss-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); padding: var(--space-3); min-width: 0; }
.ss-block-name { display: block; overflow-wrap: anywhere; }
.ss-slider { display: grid; grid-template-columns: 8ch 1fr 7ch; gap: 8px; align-items: center; margin-top: 6px; }
.ss-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: 6px; }
.ss-row select, .ss-export select { background: var(--surface-solid); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; padding: 2px 4px; max-width: 60%; }
.ss-check { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.ss-row-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.ss-at { margin-top: 6px; font-size: var(--text-xs); }
.ss-clean { margin: var(--space-2) 0; }
.ss-clean summary { cursor: pointer; font-weight: 600; }
.ss-clean .ss-btn.primary { margin-top: var(--space-2); }
.ss-card .ss-btn.small { margin-top: var(--space-2); }
.ss-note { font-size: var(--text-xs); }
@container (max-width: 640px) {
  .ss-stage { grid-template-columns: 128px 1fr; }
  .ss-bottom { grid-template-columns: 1fr; }
  .ss-tools { margin-left: 0; }
  .ss-head { padding: 6px 4px; }
  .ss-duck input[type=range] { width: 56px; }
}
/* 0.1.57 (FACESWAP-3, R1): more pictures of the same person */
.ms-more-item { position: relative; width: 56px; height: 56px; border-radius: var(--radius); overflow: hidden; background: var(--inset); display: inline-flex; align-items: center; justify-content: center; }
.ms-more-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ms-more-remove { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; min-height: 0; padding: 0; border-radius: var(--radius-pill); background: var(--surface-solid); }
.ms-more-add, .ms-more-upload { align-self: center; }

/* 0.1.69: Research -- the card above the message box while a research is planned and runs (research/research.js),
   the brief in the dialog, Open and Export under the report's answer. Tokens only (t_design_ratchet). */
div.research-dock { flex: none; width: calc(100% - 2 * var(--space-4)); max-width: var(--chat-max-w); max-height: 46vh; overflow: auto;
  margin: 0 auto var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm);
  animation: planbar-in var(--fast); }
div.research-dock[hidden] { display: none; }
body:has(div.research-dock:not([hidden])) div.welcome { display: none; }   /* the research chat is empty until the report: the card is its content */
.research-head { display: flex; align-items: center; gap: var(--space-2); }
.research-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.research-ico { display: inline-flex; color: var(--accent); flex: none; }
.research-line { margin: var(--space-2) 0; color: var(--text-dim); }
.research-dock.waiting .research-line { color: var(--text); }
.research-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.research-spacer { flex: 1; }
.research-inline { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-dim); }
.research-select { font: inherit; color: var(--text); background: var(--inset); border: thin solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.research-plan { margin: var(--space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); counter-reset: rq; }
.research-plan li { display: flex; align-items: center; gap: var(--space-2); }
.research-plan li::before { counter-increment: rq; content: counter(rq); min-width: 1.4em; text-align: right; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.research-q { flex: 1; min-width: 0; font: inherit; color: var(--text); background: var(--inset); border: thin solid var(--border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.research-q:disabled { color: var(--text-faint); text-decoration: line-through; }
.research-tag { flex: none; color: var(--text-faint); }
/* 0.1.81zzz63: the plan's "Covers:" line; a part of the ask with no question */
.research-covers { margin: var(--space-2) 0 0; }
.research-gap { color: var(--warn); }
.research-add { padding: 0 var(--space-2); margin-left: var(--space-1); color: inherit; border-color: currentColor; }
.research-visual { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-3); }
.research-steps { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; flex: none; }
.research-steps li { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); color: var(--text-faint); }
.research-steps li > span:last-child { display: none; }
.research-steps li.done { color: var(--text-dim); }
.research-steps li.now { color: var(--accent); background: var(--accent-soft); }
.research-steps li.now > span:last-child { display: inline; }
.research-steps li.now .research-step-ico { animation: research-breathe var(--bg-fade) infinite; }
.research-step-ico { display: inline-flex; }
.research-stars { position: relative; flex: none; width: 9rem; height: 2.6rem; margin-left: auto; }   /* a small field: the dots read as one constellation */
.research-stars i { position: absolute; width: 0.4rem; height: 0.4rem; margin: -0.2rem 0 0 -0.2rem; border-radius: 50%; background: var(--accent); opacity: 0.25;
  animation: research-in var(--medium); }
.research-stars i.gA { opacity: 0.95; } .research-stars i.gB { opacity: 0.7; } .research-stars i.gC { opacity: 0.4; }
.research-stars i.new { box-shadow: 0 0 0 0.2rem var(--accent-soft); }
/* 0.1.77f: the live part -- each star twinkles in turn, a soft light circles the field (with a short tail), and the
   progress bar's fill carries a slow sheen; all still while the research waits for the model and for less motion */
.research-stars i { animation: research-in var(--medium), research-twinkle var(--bg-fade) infinite; animation-delay: 0s, calc(var(--rs-i, 0) * -0.43s); }
.research-comet { position: absolute; left: 0; top: 0; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0.5rem 0.15rem var(--accent-soft); offset-path: ellipse(48% 46% at 50% 50%); offset-rotate: 0deg; animation: research-orbit 6.5s linear infinite; }
.research-comet::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); opacity: 0.35; transform: translateX(-0.6rem) scale(0.6); }
.research-dock .job-bar-track i { position: relative; overflow: hidden; }
.research-dock .job-bar-track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  transform: translateX(-100%); animation: research-sheen 2.2s ease-in-out infinite; }
.research-dock.waiting .research-stars i, .research-dock.waiting .research-comet, .research-dock.waiting .job-bar-track i::after { animation-play-state: paused; }
.research-dock.waiting .research-comet { opacity: 0.35; }
@keyframes research-twinkle { 0%, 100% { transform: none; filter: none; } 50% { transform: scale(1.5); filter: brightness(1.35); } }
@keyframes research-orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes research-sheen { to { transform: translateX(100%); } }
@keyframes research-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@keyframes research-in { from { transform: scale(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { div.research-dock, .research-stars i, .research-steps li.now .research-step-ico, .research-comet, .research-dock .job-bar-track i::after { animation: none; }
  .research-comet { display: none; } }
.research-dialog { display: grid; gap: var(--space-3); }
.research-brief { width: 100%; min-height: 6.5rem; resize: vertical; font: inherit; }
.research-field { display: grid; gap: var(--space-1); }
.research-label { color: var(--text-dim); font-size: var(--text-sm); }
.research-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.research-level { display: grid; align-content: start; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: thin solid var(--border); border-radius: var(--radius); cursor: pointer; }
.research-level:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.research-level input { position: absolute; opacity: 0; pointer-events: none; }
.research-level:focus-within { box-shadow: var(--focus); }
.research-level-name { font-weight: 600; }
.research-level small { color: var(--text-dim); line-height: 1.4; }
/* 0.1.81zze (the owner, 2026-10-29: "the start/plan button is under the screen"): the research brief is a wider box that
   never grows past the window. Its fields scroll inside it; the title, the line under it and the buttons stay in view.
   Type and Reviewer share a row when there is a reviewer; one column on a narrow window. */
.dialog:has(.research-dialog) { width: min(46rem, 100%); max-height: calc(100vh - 2 * var(--space-4)); max-height: calc(100dvh - 2 * var(--space-4)); display: flex; flex-direction: column; }
.dialog:has(.research-dialog) > h2, .dialog:has(.research-dialog) > #dialog-text, .dialog:has(.research-dialog) > .dialog-buttons { flex: none; }
.dialog:has(.research-dialog) > #dialog-text { margin-bottom: var(--space-4); max-height: none; overflow: visible; }
.dialog .research-dialog { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); align-content: start;
  margin: 0 calc(-1 * var(--space-2)) 0; padding: var(--space-1) var(--space-2) var(--space-3); }
.research-dialog > * { grid-column: 1 / -1; min-width: 0; }
.research-dialog:has(> .dialog-field:nth-child(4)):not(:has(> :nth-child(4) .research-pictures)) > .dialog-field:is(:nth-child(3), :nth-child(4)) { grid-column: auto; }
.research-dialog .research-select { width: 100%; min-width: 0; text-overflow: ellipsis; }
.research-dialog > .research-pictures-hint { margin: calc(-1 * var(--space-2)) 0 0; }
.research-dialog > .settings-hint:last-child { margin: 0; padding-top: var(--space-2); }
.dialog:has(.research-dialog) > .dialog-buttons { padding-top: var(--space-4); border-top: thin solid var(--border); }
.research-msg-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.research-msg-actions .btn { display: inline-flex; align-items: center; gap: var(--space-1); }

/* 0.1.74 (SDK v1.14): GlirOS.confirm -- a tool's yes/no card above the message box (toolconfirm.js) */
div.tool-confirm-dock { flex: none; width: calc(100% - 2 * var(--space-4)); max-width: var(--chat-max-w); margin: 0 auto var(--space-2);
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--space-2);
  border: 1px solid var(--accent); animation: planbar-in var(--fast); }
div.tool-confirm-dock[hidden] { display: none; }
.tool-confirm-from { color: var(--text-dim); font-size: var(--text-xs); }
.tool-confirm-q { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.tool-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }
.tool-confirm-more { color: var(--text-dim); font-size: var(--text-xs); }

/* 0.1.78i (A9): Delete my data and Uninstall -- the dialog's choices and lists */
.dialog-body { margin: 0 0 1rem; max-height: 50vh; overflow: auto; }
.wipe-dialog .wipe-list, .wipe-dialog .wipe-notes { margin: 0.25rem 0 0.75rem; padding-left: 1.2rem; font-size: var(--text-sm); }
.wipe-dialog .wipe-list code { overflow-wrap: anywhere; }
.wipe-dialog .wipe-choice { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0.5rem 0; }
.wipe-dialog .wipe-choice input { margin-top: 0.2rem; }
/* 0.1.79: Instructions and Memory of a project and a chat (ctxui.js) */
.project-ctx { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--accent); flex: none; margin-left: var(--space-1); }
/* 0.1.81h (the owner: the editor scrolled sideways and up and down inside a 440 dialog): the dialog itself is wider,
   the editor fits it (no sideways scroll), and only the dialog's body scrolls, not the memory list inside it too */
.dialog:has(.ctx-dialog) { width: min(560px, 100%); }
.dialog-body:has(> .ctx-dialog) { overflow-x: hidden; max-height: 62vh; padding: 0 var(--space-1); margin-inline: calc(-1 * var(--space-1)); }
.ctx-dialog { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.ctx-dialog .ctx-facts { max-height: none; overflow: visible; }
.ctx-label { display: flex; flex-direction: column; gap: var(--space-2); }
.ctx-instructions { min-height: 7.5em; resize: vertical; font: inherit; }
.ctx-count { align-self: flex-end; margin-top: calc(-1 * var(--space-1)); }
.ctx-short { display: flex; flex-direction: column; gap: var(--space-2); }
.ctx-short:empty { display: none; }
.ctx-short-text { font: inherit; font-size: var(--text-sm); color: var(--text-dim); resize: vertical; }
.ctx-short .btn { align-self: flex-start; }
.ctx-facts { display: flex; flex-direction: column; gap: var(--space-2); max-height: 32vh; overflow-y: auto; }
.ctx-fact, .ctx-fact-row { display: flex; gap: var(--space-2); align-items: center; }
.ctx-fact .dialog-input, .ctx-fact-row .dialog-input { flex: 1; min-width: 0; }
.ctx-fact .btn, .ctx-fact-row .btn { flex: none; }

/* ---------- 0.1.80 (CAM-PASTE): Take a photo, and the Paste buttons in the media panels ---------- */
/* (0.1.80c, the design chat's review: the app's own modal backdrop and card; inset in the view; the can't-start
   sentence in text with a danger dot) */
.gr-cam { padding: var(--space-4); z-index: 60; }
.gr-cam-card { width: min(640px, 100%); max-height: 100%; overflow: auto; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.gr-cam-card h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; font-family: var(--font-display); }
.gr-cam-view { position: relative; aspect-ratio: 16 / 9; background: var(--inset); border-radius: var(--radius); overflow: hidden; }
.gr-cam-view video, .gr-cam-view canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.gr-cam-view video { transform: scaleX(-1); }  /* like a mirror on screen; the photo itself is the right way round */
.gr-cam-note { margin: 0; font-size: var(--text-sm); color: var(--text-dim); }
.gr-cam-note.warn { color: var(--text); }
.gr-cam-note.warn::before { content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2); border-radius: 50%; background: var(--danger); vertical-align: 0.1em; }
.gr-cam-pick { max-width: 100%; }
.gr-cam-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
/* 0.1.81zd (CAM-VIDEO): the recorded clip plays the right way round; the running time; Stop marked while recording */
.gr-cam-view video.gr-cam-back { transform: none; }
/* 0.1.81zh (F6): the microphone shown, not heard: a 12-segment level bar, the top two in warn */
.gr-cam-meter { display: flex; gap: var(--space-1); align-items: center; height: var(--space-3); }
.gr-cam-meter[hidden] { display: none; }
.gr-cam-meter span { flex: 1; height: 100%; border-radius: var(--radius-sm); background: var(--inset); }
.gr-cam-meter span.on { background: var(--good); }
.gr-cam-meter span.hot.on { background: var(--warn); }
.gr-cam-time { margin: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--text); }
.gr-cam-time::before { content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2); border-radius: 50%; background: var(--danger); vertical-align: 0.1em; }
.gr-cam-rec.recording::before { content: ""; display: inline-block; width: var(--space-2); height: var(--space-2); margin-right: var(--space-2); border-radius: 0; background: currentColor; vertical-align: 0.05em; }
.gr-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- 0.1.80c: a 2FA removal waiting (Settings > Remote access) ---------- */
.twostep-box { margin-bottom: var(--space-4); }
.twostep-card { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); max-width: none; width: 100%; margin: 0; }
.twostep-card p { margin: 0; }
.twostep-warning { font-weight: 600; }
.twostep-code { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.twostep-code-value { font-family: var(--mono); font-size: var(--text-lg); letter-spacing: 0.08em; }
.twostep-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* 0.1.81m (A11Y): text only a screen reader reads, and the skip link (hidden until focused by the keyboard) */
.sr-only { position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -0.0625rem; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; left: var(--space-3); top: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius); background: var(--surface-solid); color: var(--text); box-shadow: var(--focus); transform: translateY(-200%); }
.skip-link:focus { transform: none; outline: none; }
/* 0.1.81zj (LOOKS): the tools chat's media-studio/looks/looks-ui.css (1.0.2 since 0.1.81zn), as delivered */
/* looks-ui.css -- the Looks dropdown and the effect parts (looks-ui.js). Only lk-* rules: the rest is the app's own
   ms-part / tl-field / ms-chip look. GlirOS tokens; fits a 320 px panel. 1.0.1: the design chat's lines
   (claude/gliros-design-looks-review.md): the list a well (inset, no shadow), the badge and the dot quiet, group
   headings as .menu-head, the chosen look accent-soft, tokens for the numbers, Add an effect a pill. */
.lk { display: flex; flex-direction: column; gap: var(--space-2); position: relative; }
.lk-row { flex-wrap: wrap; }
.lk-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--inset); color: var(--text); font-size: var(--text-sm); text-align: left; }
.lk-btn:hover { border-color: var(--accent); }
.lk-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-dot { width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--text-dim); flex: none; }
.lk-caret { color: var(--text-dim); flex: none; }
.lk-list { max-height: 340px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--inset); box-shadow: none;
  padding: var(--space-1); outline: none; }
.lk-group { font-size: var(--text-xs); font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; padding: var(--space-3) var(--space-2) var(--space-1); }
.lk-opt { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); outline: none; }
.lk-opt:hover, .lk-opt:focus { background: var(--accent-soft); }
.lk-opt:focus-visible { box-shadow: var(--focus); }
.lk-opt.sel { color: var(--text); background: var(--accent-soft); font-weight: 600; }
.lk-opt > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-thumb { width: 64px; height: 36px; flex: none; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--inset), var(--border)); object-fit: cover; }
.lk-acts, .lk-save { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.lk-save input { flex: 1; min-width: 120px; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--inset); color: var(--text); font-size: var(--text-sm); }
.lk-add { align-self: flex-start; }   /* an .ms-chip (1.0.2): "+ Add an effect" opens a list like Looks */
.lk-add[aria-expanded="true"] { color: var(--text); border-color: var(--accent); }
.lk-pico { width: var(--space-5); display: inline-grid; place-items: center; color: var(--text-dim); flex: none; }
.lk-note { margin: 0; font-size: var(--text-xs); color: var(--text-dim); line-height: 1.45; }
.lk-from { font-size: var(--text-xs); color: var(--text-dim); background: none; border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0 var(--space-2); white-space: nowrap; }
.lk-seg { flex-wrap: wrap; row-gap: var(--space-1); }
.lk-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.lk-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.lk-part .ms-part-head h3 { min-width: 0; }

/* 0.1.81zm (WORKSPACES step 1): the design chat's ws.css (claude/gliros-design-workspaces.md §6), as delivered, then the
   app's lines for its own sections inside the panels */
/* Media Studio workspaces (design chat proposal, 2026-10-27; claude/gliros-support-workspaces-scope.md). Tokens only.
   Full screen on the timeline: the preview left, the panel column right (with the parts rail on its outer edge), the
   toolbar, the lines and the one action along the bottom. */

/* the bar above everything: the two modes left; the workspace and full screen right */
.ws-bar { display: flex; align-items: center; gap: var(--space-2); }
.ws-bar .ws-spacer { flex: 1; }
.ws-pick { display: inline-flex; align-items: center; gap: var(--space-2); }
.ws-pick-label { font-size: var(--text-xs); color: var(--text-dim); }
.ws-pick .btn .ico:last-child { color: var(--text-dim); }

/* the side: the selected asset, its Applied row, the panels, and the rail at the outer edge */
.ws-side { container: wsside / inline-size; display: grid; grid-template-columns: minmax(0, 1fr) auto; min-height: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ws-col { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); overflow-y: auto; min-height: 0; }
.ws-sel { display: grid; gap: 2px; padding-bottom: var(--space-1); }
.ws-sel-name { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sel-meta { font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ws-applied { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-1); }
.ws-applied-label { font-size: var(--text-xs); color: var(--text-dim); margin-right: var(--space-1); }
.ws-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px var(--space-2); border-radius: var(--radius-pill); background: var(--inset); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--text); }
.ws-chip button { display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text-dim); cursor: pointer; }
.ws-chip button:hover { color: var(--danger); background: var(--danger-soft); }

/* a panel: a header that folds, names the part and carries Reset, Remove and hide; the body under it */
.ws-panel { background: var(--inset); border-radius: var(--radius); }
.ws-head { display: flex; align-items: center; gap: var(--space-1); min-height: 40px; padding: 0 var(--space-1) 0 var(--space-2); cursor: grab; }
.ws-fold { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text-dim); }
.ws-title { font-size: var(--text-sm); font-weight: 600; }
.ws-state { font-size: var(--text-xs); color: var(--text-dim); margin-left: var(--space-1); }
.ws-head .ws-spacer { flex: 1; }
.ws-head .icon-btn { width: 28px; height: 28px; border-radius: var(--radius-sm); }
.ws-body { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }
.ws-panel.folded .ws-body { display: none; }
.ws-sl { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-dim); }
.ws-sl input { width: 100%; margin: 0; }
.ws-sl output { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; font-size: var(--text-xs); }
.ws-looks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ws-look { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background-size: cover; background-position: center; border: 1px solid var(--border); }
.ws-look-name { font-size: var(--text-2xs); color: var(--text-dim); margin-top: 2px; text-align: center; }
/* not on this asset: the panel stays, quiet, at neutral, with one way in */
.ws-panel.quiet .ws-body > :not(.ws-apply) { opacity: .45; }
.ws-apply { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--text-dim); }
/* the scopes: a view, not a part (no Reset or Remove) */
.ws-scope { aspect-ratio: 16 / 7; border-radius: var(--radius-sm); background: var(--surface-solid); border: 1px solid var(--border); overflow: hidden; }
.ws-scope svg { display: block; width: 100%; height: 100%; }
.ws-tabs { display: flex; gap: var(--space-1); }
.ws-tab { padding: 2px var(--space-2); border-radius: var(--radius-pill); font-size: var(--text-xs); color: var(--text-dim); border: 1px solid transparent; background: none; }
.ws-tab[aria-selected="true"] { color: var(--text); background: var(--surface); border-color: var(--border); }

/* the parts rail: one tap pins or unpins (Edit: opens the part); a dot when the part is on the selected asset;
   greyed when this kind of asset can't take it */
.ws-rail { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-1); background: var(--inset); overflow-y: auto; }
.ws-part { position: relative; display: grid; justify-items: center; gap: 2px; width: 56px; padding: 6px 0 4px; border: 0; border-radius: var(--radius); background: none; color: var(--text-dim); cursor: pointer; }
.ws-part span { font-size: var(--text-2xs); line-height: 1.2; }
/* 0.1.81zzc (the design chat): a rail name may take two lines ("Hintergrund", "Gesichter tauschen") */
.ws-part span { max-width: calc(100% - var(--space-1)); text-align: center; hyphens: manual; overflow-wrap: anywhere; }  /* (0.1.81zzc, the design chat: soft hyphens in the long words, wsside.js railBreaks) */
.ws-part:hover:not(:disabled) { background: var(--accent-soft); color: var(--text); }
.ws-part[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.ws-part[aria-pressed="true"] span { color: var(--text); }
.ws-part.on::after { content: ""; position: absolute; top: 6px; right: 12px; width: 6px; height: 6px; border-radius: 50%; background: var(--text); }
.ws-part:disabled { opacity: .35; cursor: default; }
.ws-rail-sep { height: 1px; margin: var(--space-1) var(--space-2); background: var(--border); }

/* 0.1.81zw (the review §3.1): the app's sliders in the column on one grid line: name | slider | value */
.ws-col .tl-slider { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--space-2); }
.ws-col .tl-slider > span:first-child { min-width: 0; }
.ws-col .tl-slider input[type=range] { min-width: 0; width: 100%; margin: 0; }
.ws-col .tl-slider output { min-width: 0; }
/* a narrow column (320 px in full screen, or the side panel): each slider's name and value above it, the slider full width */
@container wsside (max-width: 359px) {
  /* (0.1.81zw: the app's sliders too, the review's ws-build-lines.css) */
  .ws-col .tl-slider { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "slider slider"; row-gap: calc(var(--space-1) / 2); }
  .ws-col .tl-slider > span:first-child { grid-area: name; }
  .ws-col .tl-slider output { grid-area: value; }
  .ws-col .tl-slider input[type=range] { grid-area: slider; }
  .ws-sl { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name value" "slider slider"; row-gap: 2px; }
  .ws-sl > span { grid-area: name; } .ws-sl output { grid-area: value; } .ws-sl input { grid-area: slider; }
  .ws-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* a phone (under 380 px): the rail turns into a row above the panels; at the side panel's 460 it stays on the edge */
@container ms (max-width: 379px) {
  .ws-side { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .ws-rail { order: -1; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: var(--space-1) var(--space-2); }
  .ws-rail-sep { width: 1px; height: auto; margin: var(--space-2) var(--space-1); }
}
/* the app's side: the inspector holds the side box (no padding of its own); the side fills it and only the column scrolls */
.tl-inspector:has(> .ws-side) { padding: 0; }
.ws-side { min-height: 0; }
.ws-side.no-rail { grid-template-columns: minmax(0, 1fr); }
.ws-sel-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; row-gap: var(--space-1); }   /* 0.1.81zx (the design chat's ws-zw-lines.css): the name keeps 8rem, the actions wrap to the right */
.ws-sel-row .ws-sel-name { flex: 1 1 8rem; min-width: 0; }
.ws-sel-row .ws-item-actions { margin-left: auto; }
.ws-sel-row .btn { flex: none; }
.ws-chip .ws-chip-name { width: auto; height: auto; padding: 0; border-radius: 0; color: var(--text); font: inherit; }
.ws-chip .ws-chip-name:hover { color: var(--text); background: none; text-decoration: underline; }
.ws-applied-none { font-size: var(--text-xs); color: var(--text-faint); }
.ws-title { margin: 0; }
.ws-head .icon-btn .ms-ico, .ws-fold .ms-ico, .ws-part .ms-ico, .ws-chip .ms-ico { display: inline-flex; }
/* a part's own section inside its panel: the panel's header names it, so the section's own head is left out (the look's
   effect parts keep theirs: they are panels inside Looks) */
.ws-body > .ms-part:not(.lk-part) { padding: 0; border: 0; background: none; box-shadow: none; }
.ws-body > .ms-part:not(.lk-part) > .ms-part-head { display: none; }
.ws-body > .tl-field, .ws-body > .tl-pair { margin: 0; }
@container ms (min-width: 860px) {
  .ms-timeline:not([hidden]) { grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 440px); column-gap: var(--space-4); }
  .ms-timeline > .tl-inspector:has(> .ws-side) { padding: 0; border: 0; background: none; overflow: hidden; display: flex; flex-direction: column; }
  .ms-timeline > .tl-inspector > .ws-side { flex: 1 1 0; }
}
.ws-foot .btn { white-space: nowrap; }
/* 0.1.81zw (the design chat's claude/gliros-design-workspaces-build-review.md §3, its ws-build-lines.css): the app's
   sliders in the column on one grid line -- name | slider | value -- and under 360 px of side the name and value above a
   full-width slider (in the wsside block above); the rail sticky in the side panel (the whole panel scrolls); a quiet Looks keeps its dropdown (the
   one way in) at full strength and dims what is under it */
@container ms (max-width: 859px) {
  .ws-side { overflow: visible; }
  .ws-rail { position: sticky; top: 0; align-self: start; border-radius: 0 var(--radius) var(--radius) 0; }
}
.ws-panel.quiet .ws-body > .ms-looks { opacity: 1; }
.ws-panel.quiet .ms-looks .lk > :not(:first-child) { opacity: .45; }
/* 0.1.81zw (the review §1): One file's parts are panels like the timeline's -- fold, name, the preview eye after it,
   Remove (trash) -- on the page's surface; the eye in text-dim while the part shows in the preview, pressed (accent)
   while it doesn't, and the note under the header in text-dim (an instruction, not faint) */
/* (0.1.81zzc: they sit in the side box now, inset like the timeline's) */
.ms-part.ms-of-panel { padding: 0; gap: 0; border: 0; background: var(--inset); }
.ms-of-panel > .ms-part-head h3 { flex: none; }
.ws-head .ms-eye { color: var(--text-dim); }
.ws-head .ms-eye.off { color: var(--accent); }
.ms-of-panel > .ms-hidden-note { color: var(--text-dim); padding: 0 var(--space-3) var(--space-2); margin: 0; }
/* 0.1.81zzz32: a model's inline LaTeX shown as plain maths (markdown.js, mathtext.js) */
.math { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 0.1.81zzz39: a tool call still being written (markdown.js): a line while the answer streams, nothing once it has stopped */
.tool-writing { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); }
.bubble:not(.thinking) .tool-writing { display: none; }