/* Lumio AI's chat (shared/chat/core.js): every class starts with lc-, every
   color is a token from theme.css, motion respects reduced motion, and it
   works from 320 px wide. Designed in dark, with a full light mode.
   The shell (website/public/chat.css) styles what's around. */

/* ------------------------------------------------------------ root */
.lc-root {
  position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  color: var(--text); font: 400 15px/1.55 var(--font); background: var(--bg);
  --lc-measure: 780px; --lc-gutter: clamp(14px, 4vw, 24px);
}
.lc-root *, .lc-list * { box-sizing: border-box; }
/* Zero specificity: every component class (.lc-send, .lc-btn-accent, .lc-link…)
   sets its own color and font over this reset. */
:where(.lc-root, .lc-list) button { font: inherit; color: inherit; }
.lc-root [hidden], .lc-list [hidden] { display: none !important; }
.lc-icon { display: inline-flex; flex: none; align-items: center; justify-content: center; }
.lc-icon svg { display: block; }
.lc-spin { animation: lc-spin 1s linear infinite; }
@keyframes lc-spin { to { transform: rotate(360deg); } }
.lc-mark .lc-mark-dot { fill: var(--accent); }

/* buttons (docs/design-system.md §6.1): pills, md 34 / sm 28; secondary by
   default, primary for confirmations, accent for Upgrade only, danger for
   destructive confirmations */
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h-md, 34px); padding: 0 16px;
  border-radius: var(--r-pill, 999px); border: 1px solid var(--line-strong); background: var(--overlay-2); color: var(--text);
  font: 500 var(--fs-ui, 13.5px) var(--font); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.lc-btn:hover:not(:disabled) { background: var(--overlay-4); }
.lc-btn:active:not(:disabled) { transform: scale(.98); }
.lc-btn:disabled { opacity: .4; cursor: default; }
.lc-btn-small { height: var(--h-sm, 28px); padding: 0 12px; font-size: var(--fs-sm, 12.5px); }
.lc-btn-primary { background: var(--primary-bg); border-color: transparent; color: var(--primary-fg); font-weight: 600; }
.lc-btn-primary:hover:not(:disabled) { background: var(--primary-hover); }
.lc-btn-accent { background: var(--accent); border-color: transparent; color: var(--on-accent); font-weight: 600; }
.lc-btn-accent:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text-strong)); }
.lc-btn-danger { background: var(--danger-fill); border-color: transparent; color: var(--on-danger); font-weight: 600; }
.lc-btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger-fill) 88%, var(--text-strong)); }
.lc-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: none;
  border: 0; border-radius: var(--r-control, 8px); background: none; color: var(--dim); cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.lc-icon-btn:hover { background: var(--hover); color: var(--text); }
.lc-link { border: 0; background: none; padding: 0 2px; color: var(--accent); font: 500 13px var(--font); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lc-link:hover { text-decoration-color: currentColor; }
.lc-label, .lc-group-label { font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; color: var(--label); }
.lc-group-label { padding: 10px 10px 6px; }
.lc-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 999px; font: 600 11px var(--font); background: var(--overlay-4); color: var(--dim); }
.lc-badge-length, .lc-badge-error { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); }
.lc-badge-stopped { background: var(--overlay-5); color: var(--text-soft); }

/* meters (width through --lc-pct, set from the CSSOM) */
.lc-meter { position: relative; height: 8px; border-radius: 999px; background: var(--usage-track, var(--overlay-5)); overflow: hidden; }
.lc-meter > i { position: absolute; inset: 0 auto 0 0; width: var(--lc-pct, 0%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, var(--accent2)), var(--accent)); transition: width var(--dur-4) var(--ease); }
.lc-meter-mid > i { background: var(--amber); }
.lc-meter-low > i { background: var(--danger); }
.lc-meter-thin { height: 6px; }
/* a meter of what's used, in the usage circle's four level colors (docs/design-system.md §6.4, §6.14) */
.lc-meter[data-level] > i { background: var(--usage-low, var(--dim)); }
.lc-meter[data-level="half"] > i { background: var(--usage-half, var(--accent)); }
.lc-meter[data-level="high"] > i { background: var(--usage-high, var(--amber)); }
.lc-meter[data-level="full"] > i { background: var(--usage-full, var(--danger)); }

/* ------------------------------------------------------------ status banner */
.lc-banner-slot:empty { display: none; }
/* The chat's column (--lc-measure, like the thread and the composer), calm: a faint tint, the text in
   --text-soft and only the mark in the state's color (the design review of 2026-10-26: a loud slab across the
   whole window). */
.lc-banner {
  display: flex; align-items: center; gap: 10px; width: calc(100% - 2 * var(--lc-gutter)); max-width: var(--lc-measure); margin: 10px auto 0; padding: 6px 6px 6px 12px;
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent);
  background: color-mix(in srgb, var(--warn) 6%, var(--card)); color: var(--text-soft); font-size: 13px; line-height: 1.4;
}
.lc-banner > .lc-icon { color: var(--warn); }
.lc-banner .lc-btn { flex: none; }
.lc-banner-down { border-color: color-mix(in srgb, var(--danger) 22%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--card)); }
.lc-banner-down > .lc-icon { color: var(--danger); }
/* offline (§6.13): the same banner in the info colors */
.lc-banner-info { border-color: var(--line-strong); background: var(--card); color: var(--text-soft); }
.lc-banner-info > .lc-icon { color: inherit; }
.lc-banner-text { flex: 1; min-width: 0; }
/* a phone: the action goes under the words, so they keep the width */
@media (max-width: 560px) {
  .lc-banner { flex-wrap: wrap; row-gap: 4px; }
  .lc-banner-text { flex: 1 1 calc(100% - 80px); }
  .lc-banner > .lc-icon-btn { order: 2; }
  .lc-banner > .lc-btn { order: 3; margin: 0 0 4px 25px; }
}

/* ------------------------------------------------------------ thread */
.lc-thread { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 28px var(--lc-gutter) 12px; scroll-padding-bottom: 24px; }
.lc-thread:focus { outline: none; }
.lc-thread-inner { max-width: var(--lc-measure); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.lc-msg { position: relative; min-width: 0; overflow-wrap: anywhere; }
.lc-msg-user { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lc-bubble { max-width: min(85%, 640px); padding: 10px 16px; border-radius: var(--r-sheet, 20px); background: var(--bubble); white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-read, 15px); line-height: var(--lh-read, 1.65); }
.lc-msg-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.lc-msg:hover .lc-msg-actions, .lc-msg:focus-within .lc-msg-actions, .lc-msg-assistant .lc-msg-actions { opacity: 1; }
@media (hover: none) { .lc-msg-actions { opacity: 1; } }
/* With a mouse your message's Copy and Edit show on hover, yet their row kept its room while invisible: the
   question sat about 60 px from its answer (the design review of 2026-10-26). A smaller row, closer to the
   bubble, and the reply 8 px nearer: about 40 px. Touch screens keep their always-visible buttons. */
@media (hover: hover) {
  .lc-msg-user { gap: 2px; }
  .lc-msg-user .lc-msg-actions .lc-icon-btn { width: var(--icon-btn-sm, 26px); height: var(--icon-btn-sm, 26px); }
  .lc-thread-inner > .lc-msg-user + .lc-msg-assistant { margin-top: -8px; }
}
.lc-files { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 85%; }
.lc-edit { width: min(100%, 640px); display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 18px; border: 1px solid var(--box-line-focus); background: var(--box); }
.lc-edit .lc-input { min-height: 72px; }
.lc-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* the assistant's message */
.lc-msg-assistant { display: flex; flex-direction: column; gap: 10px; }
.lc-thinking { border-radius: 12px; color: var(--dim); }
.lc-thinking summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font: 500 13px var(--font); color: var(--muted); padding: 4px 8px 4px 0; border-radius: 8px; user-select: none; }
.lc-thinking summary::-webkit-details-marker { display: none; }
.lc-thinking summary:hover { color: var(--text); }
.lc-thinking summary .lc-icon { transition: transform var(--dur-2) var(--ease); }
.lc-thinking[open] summary .lc-icon { transform: rotate(180deg); }
.lc-thinking .lc-think-md { margin: 6px 0 2px; padding: 4px 0 4px 14px; border-left: 2px solid var(--line-strong); font-size: 14px; color: var(--dim); }
.lc-msg-assistant.lc-streaming .lc-think-label { background: linear-gradient(90deg, var(--muted), var(--text), var(--muted)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lc-shimmer 2s linear infinite; }
@keyframes lc-shimmer { to { background-position: -200% 0; } }
.lc-waiting { display: flex; align-items: center; gap: 10px; color: var(--label); font-size: 14px; }
.lc-waiting .lc-mark { color: var(--accent); animation: lc-spin 1.1s linear infinite; }
.lc-using-list:empty { display: none; }
.lc-using-list { display: flex; flex-direction: column; gap: 6px; }
.lc-using { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; min-width: 0; }
.lc-using > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A step still running ("Searching the web for …"). */
.lc-using.lc-active > span:last-child { background: linear-gradient(90deg, var(--muted), var(--text), var(--muted)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lc-shimmer 2s linear infinite; }

/* Markdown (model output: data, never live HTML) */
.lc-md { line-height: var(--lh-read, 1.65); font-size: var(--fs-read, 15px); }
.lc-md > :first-child { margin-top: 0; }
.lc-md > :last-child { margin-bottom: 0; }
.lc-md p { margin: 0 0 12px; }
.lc-md h1, .lc-md h2, .lc-md h3, .lc-md h4 { line-height: 1.3; margin: 20px 0 8px; font-weight: 600; }
.lc-md h1 { font-size: 1.45em; } .lc-md h2 { font-size: 1.25em; } .lc-md h3 { font-size: 1.1em; } .lc-md h4 { font-size: 1em; }
.lc-md ul, .lc-md ol { padding-left: 22px; margin: 0 0 12px; }
.lc-md li { margin: 3px 0; }
.lc-md li > p { margin: 0 0 6px; }
.lc-md blockquote { margin: 0 0 12px; padding: 2px 0 2px 14px; border-left: 3px solid var(--line-strong); color: var(--dim); }
.lc-md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.lc-md a { color: var(--accent); text-underline-offset: 2px; }
.lc-md code { font: .87em/1.5 var(--mono); background: var(--overlay-4); padding: 1px 6px; border-radius: var(--r-tag, 6px); }
.lc-md .lc-code { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card2); overflow: hidden; }
.lc-md .lc-code-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 12px; border-bottom: 1px solid var(--line); font: 500 11.5px var(--mono); color: var(--label); }
.lc-md .lc-code-copy { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: var(--muted); font: 500 12px var(--font); padding: 3px 7px; border-radius: 6px; cursor: pointer; }
.lc-md .lc-code-copy:hover { background: var(--hover); color: var(--text); }
/* Copy just did (core.js copyText): a check in the ok color for 1.5 s */
.lc-root .lc-copied, .lc-root .lc-copied:hover, .lc-md .lc-code-copy.lc-copied:hover { color: var(--ok); }
.lc-md pre { margin: 0; padding: 12px 14px; overflow-x: auto; }
.lc-md pre code { background: none; padding: 0; font-size: 13px; white-space: pre; }
/* tables like the iPhone app's: a rounded box with row lines, numbers in even widths, and the columns the
   Markdown aligns (align="right" on money and numbers) aligned that way */
.lc-md .lc-table { overflow-x: auto; margin: 0 0 12px; border: 1px solid var(--line); border-radius: 12px; }
.lc-md table { border-collapse: collapse; min-width: 100%; font-size: 14px; font-variant-numeric: tabular-nums; }
.lc-md th, .lc-md td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; text-align: start; vertical-align: top; }
.lc-md tr:last-child td { border-bottom: 0; }
.lc-md th { background: var(--overlay-2); font-weight: 600; }
.lc-md :is(th, td)[align="right"] { text-align: right; }
.lc-md :is(th, td)[align="center"] { text-align: center; }
.lc-md .lc-task { margin-right: 4px; }
.lc-md .lc-cite { font-size: .72em; line-height: 0; margin-left: 1px; }
.lc-md .lc-cite a { text-decoration: none; padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.lc-md .lc-md-image { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 8px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13px; vertical-align: middle; }
.lc-md .lc-md-image-icon { width: 15px; height: 15px; flex: none; background: currentColor;
  -webkit-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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M20.5 16l-5-5L6 19'/%3E%3C/svg%3E") center / contain no-repeat;
  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.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='14' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.6'/%3E%3Cpath d='M20.5 16l-5-5L6 19'/%3E%3C/svg%3E") center / contain no-repeat; }
.lc-md .lc-md-image-alt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-md .lc-md-image-host { font-size: 12px; }
.lc-msg-assistant.lc-streaming .lc-reply > :last-child::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: lc-blink 1s ease-in-out infinite; }
@keyframes lc-blink { 50% { opacity: .25; } }

/* Deep research and Roundtable (flow-cards.js; docs/research-roundtable-contract.md §7): a card above the
   reply's text in the plan card's look (docs/design-system.md §6.8: --card, a hairline, r16; head 11/14,
   its name 13px/600 and its status 12px --label; rows 13px). It folds to its head once the reply ends. */
.lc-flow-wrap:empty { display: none; }
.lc-flowcard { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-pop, 16px); background: var(--card); overflow: hidden; }
.lc-flowcard-head {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 11px 14px; border: 0; background: none;
  color: var(--text); text-align: left; cursor: pointer; transition: background var(--dur-1) var(--ease-out);
}
.lc-flowcard-head:hover { background: var(--overlay-1); }
.lc-flowcard-head:focus-visible { outline-offset: -2px; border-radius: var(--r-pop, 16px); }
.lc-flowcard-icon { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--r-control, 8px); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.lc-flowcard-icon svg { display: block; width: 14px; height: 14px; }
.lc-flowcard-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; flex: 1; min-width: 0; }
.lc-flowcard-title { font: 600 13px/1.35 var(--font); white-space: nowrap; }
.lc-flowcard-status { min-width: 0; font: 400 var(--fs-xs, 12px)/1.35 var(--font); color: var(--label); font-variant-numeric: tabular-nums; }
.lc-flowcard[data-state="running"] .lc-flowcard-status { background: linear-gradient(90deg, var(--label), var(--text), var(--label)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lc-shimmer 2s linear infinite; }
.lc-flowcard-chev { color: var(--label); transition: transform var(--dur-2) var(--ease-out); }
.lc-flowcard-chev svg { width: 14px; height: 14px; }
.lc-flowcard-head[aria-expanded="true"] .lc-flowcard-chev { transform: rotate(180deg); }
.lc-flowcard-body { padding: 0 14px 12px 48px; }
.lc-flowcard-note { margin: -6px 0 8px; font-size: var(--fs-xs, 12px); line-height: 1.4; color: var(--label); }
/* steps: a row each (the state, the title, at the right a count) */
.lc-flowsteps { list-style: none; margin: 0 0 0 -34px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.lc-flowstep-row {
  display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 30px; padding: 4px 6px; border: 0; border-radius: var(--r-control, 8px);
  background: none; color: var(--text); text-align: left; font: 400 var(--fs-row, 13px)/1.4 var(--font);
}
button.lc-flowstep-row { cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
button.lc-flowstep-row:hover { background: var(--hover); }
.lc-flowstep-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-flowstep[data-status="failed"] .lc-flowstep-title, .lc-flowstep[data-status="stopped"] .lc-flowstep-title, .lc-flowstep[data-status="pending"] .lc-flowstep-title { color: var(--dim); }
.lc-flowstep-count { flex: none; font-size: var(--fs-xs, 12px); color: var(--label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lc-flowstep-state { display: contents; }
/* the states: a 12 px spinner (an --overlay-6 ring, a --text arc), the check in --ok, a muted ✕, a dashed circle to do, a dash stopped */
.lc-flowstate { display: grid; place-items: center; flex: none; width: 16px; height: 16px; }
.lc-flowstate svg { display: block; width: 13px; height: 13px; }
.lc-flowstate-done { color: var(--ok); }
.lc-flowstate-failed { color: var(--label); }
.lc-flowstate-pending::before { content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--line-strong); }
.lc-flowstate-stopped::before { content: ''; width: 8px; height: 1.5px; border-radius: 1px; background: var(--label); }
.lc-flow-spin { display: block; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--overlay-6); border-top-color: var(--text); animation: lc-spin 1s linear infinite; }
/* what a step does now, and a step's searches and reads (opened) */
.lc-flowstep-live, .lc-flowstep-tools, .lc-flowcard-tools { margin: 0 0 4px 32px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-flowcard-tools { margin: 6px 0 0 -2px; }
:is(.lc-flowstep-live, .lc-flowstep-tools, .lc-flowcard-tools) .lc-using { font-size: var(--fs-sm, 12.5px); }
.lc-flowstep-tools { padding: 2px 0 6px; }
/* Roundtable's discussion: each round under its divider ("ROUND 1", 11.5px uppercase .05em --label between two
   --line rules, as §6.8's divider), its turns in order. A turn: the maker's mark in a 24 px tile, the name (550) and
   whom it answers (12px --label), at the right how it started in the badge's look (Agrees: --ok, Differs: --warn)
   and its state; under them its words like a reply's, 14px --text-soft, with the streaming dot while it speaks.
   Then who writes the answer, under a hairline, 12.5px --dim. */
.lc-flowmember-mark { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--r-control, 8px); background: var(--overlay-3); color: var(--text); }
.lc-flowmember-mark .lc-maker-logo { width: 14px; height: 14px; color: inherit; }
.lc-flowmember-mark .lc-maker-logo svg { width: 13px; height: 13px; }
.lc-flowturns { display: flex; flex-direction: column; gap: 4px; margin: 0 0 0 -34px; min-width: 0; }
.lc-turn-round { min-width: 0; }
.lc-turn-round-title { display: flex; align-items: center; gap: 10px; margin: 6px 6px 8px; font: 500 var(--fs-2xs, 11.5px)/1.3 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--label); }
.lc-turn-round-title::before, .lc-turn-round-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lc-turns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lc-turn { min-width: 0; }
.lc-turn-head { display: flex; align-items: center; gap: 10px; min-height: 28px; padding: 0 6px; }
.lc-turn-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; flex: 1; min-width: 0; font: 400 var(--fs-row, 13px)/1.4 var(--font); }
.lc-turn-name { font-weight: 550; color: var(--text); }
.lc-turn[data-status="failed"] .lc-turn-name { color: var(--dim); }
.lc-turn-to { min-width: 0; font-size: var(--fs-xs, 12px); color: var(--label); }
.lc-turn-side { display: flex; align-items: center; gap: 8px; flex: none; }
.lc-turn-stance[data-stance="agree"], .lc-turn-stance[data-stance="approve"] { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok-text); }
.lc-turn-stance[data-stance="differ"], .lc-turn-stance[data-stance="fix"] { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn-text); }
.lc-turn-md { margin: 2px 6px 0 40px; font-size: 14px; color: var(--text-soft); }
.lc-turn-md > :last-child { margin-bottom: 0; }
.lc-turn[data-status="running"] .lc-turn-md > :last-child::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; animation: lc-blink 1s ease-in-out infinite; }
.lc-turn-note { margin: 0 6px 0 40px; font-size: var(--fs-sm, 12.5px); color: var(--label); }
.lc-turn-writer { display: flex; align-items: center; gap: 10px; margin: 10px 0 0; padding: 10px 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-sm, 12.5px); line-height: 1.4; color: var(--dim); }
.lc-turn-writer-text { flex: 1; min-width: 0; }
@media (max-width: 520px) {
  .lc-flowcard-body { padding-left: 14px; }
  .lc-flowsteps, .lc-flowturns { margin-left: 0; }
  .lc-turn-md, .lc-turn-note { margin-left: 34px; }
}
/* Super AI's team (super-ai.js; Chat's card and picker, Code's): the team's line at the top of its card (its
   makers' marks overlapping, then its names, 12.5px --dim), and the picker's rows: a 16 px box (the accent when
   picked), the maker's mark, the name, and the lead's badge; a fifth model can't be picked (dimmed). */
.lc-team-line { display: flex; align-items: center; gap: 8px; min-width: 0; margin: -4px 0 10px -34px; padding: 0 6px; font-size: var(--fs-sm, 12.5px); line-height: 1.4; color: var(--dim); overflow-wrap: anywhere; }
.lc-team-names { min-width: 0; }
/* the marks: 20 px discs on the surface's own color (--lc-team-ring: the card's, the composer's), each ringed in it
   so the next one's edge reads over the one before; a hairline keeps each disc's shape */
.lc-team-marks { display: inline-flex; align-items: center; flex: none; }
.lc-team-chip-mark { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--lc-team-ring, var(--card)); color: var(--text); box-shadow: 0 0 0 1.5px var(--lc-team-ring, var(--card)); }
.lc-team-chip-mark + .lc-team-chip-mark { margin-left: -3px; }
.lc-team-chip-mark .lc-maker-logo, .lc-team-chip-mark svg { width: 11px; height: 11px; }
.lc-composer .lc-team-chip-mark { --lc-team-ring: var(--box); }
.lc-team-row { gap: 10px; }
.lc-team-row[aria-disabled="true"] { cursor: default; }
.lc-team-row.lc-team-full { opacity: .45; }
.lc-team-box { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 5px; border: 1.5px solid var(--line-strong); color: var(--on-accent); }
.lc-team-box.lc-on { background: var(--accent); border-color: var(--accent); }
.lc-team-box svg { width: 12px; height: 12px; }
.lc-team-mark { display: inline-grid; place-items: center; flex: none; color: var(--dim); }
.lc-team-mark svg { width: 15px; height: 15px; }
.lc-badge.lc-team-lead { flex: none; margin-left: auto; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
@media (max-width: 520px) { .lc-team-line { margin-left: 0; } }
/* Reduce Motion (the device's, or Settings › General): nothing moves, the same words (the spinners stand still) */
@media (prefers-reduced-motion: reduce) {
  .lc-flow-spin, .lc-flowcard[data-state="running"] .lc-flowcard-status, .lc-flowcard .lc-using.lc-active > span:last-child, .lc-turn[data-status="running"] .lc-turn-md > :last-child::after { animation: none !important; }
  .lc-flowcard[data-state="running"] .lc-flowcard-status { background: none; color: var(--label); }
  .lc-flowcard .lc-using.lc-active > span:last-child { background: none; color: var(--muted); }
}
html[data-motion="reduce"] :is(.lc-flow-spin, .lc-flowcard[data-state="running"] .lc-flowcard-status, .lc-flowcard .lc-using.lc-active > span:last-child) { animation: none !important; }
html[data-motion="reduce"] .lc-turn[data-status="running"] .lc-turn-md > :last-child::after { animation: none !important; }
html[data-motion="reduce"] .lc-flowcard[data-state="running"] .lc-flowcard-status { background: none; color: var(--label); }
html[data-motion="reduce"] .lc-flowcard .lc-using.lc-active > span:last-child { background: none; color: var(--muted); }

/* Match cards (match-card.js; docs/match-cards-contract.md §2): a game at its point in a reply, in the cards'
   look (--card, a hairline, r16). The head: "Home vs Away" 14/600 and where it's played 12.5px --label, ↗ at
   the right. A hairline, then the board: each crest (44 px) with its name under it, the scores large and light
   (the loser's dimmer), the state and the day between them, all centered on the crests' row. ↗ opens the
   details: the competition, when and where, each team's events, the sources as pills. The board tightens on a
   narrow card (a container query). */
.lc-match { container: lc-match / inline-size; min-width: 0; margin: 4px 0; border: 1px solid var(--line); border-radius: var(--r-pop, 16px); background: var(--card); overflow: hidden; }
.lc-match-head { display: flex; align-items: flex-start; gap: 8px; padding: 12px 10px 11px 16px; }
.lc-match-titles { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lc-match-title { margin: 0; font: 600 var(--fs-body, 14px)/1.35 var(--font); color: var(--text); overflow-wrap: anywhere; }
.lc-match-where { margin: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.4; color: var(--label); overflow-wrap: anywhere; }
/* a §6.1 icon button (30 px), pulled up to the title's line so the head doesn't grow */
.lc-match-expand { width: var(--icon-btn, 30px); height: var(--icon-btn, 30px); margin: -5px -2px -5px 0; color: var(--label); }
.lc-match-expand svg { width: 15px; height: 15px; }
.lc-match-expand[aria-expanded="true"] { background: var(--active); color: var(--text); }
.lc-match-board {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(88px, max-content) auto minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; gap: 8px 14px; padding: 16px 14px 18px; border-top: 1px solid var(--line);
}
/* a team spans both rows: its crest in the first (with the scores and the state), its name in the second */
.lc-match-team { grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; text-align: center; }
@supports (grid-template-rows: subgrid) { .lc-match-team { display: grid; grid-template-rows: subgrid; justify-items: center; } }
.lc-match-team[data-side="home"] { grid-column: 1; }
.lc-match-team[data-side="away"] { grid-column: 5; }
.lc-match-crest { display: grid; place-items: center; align-self: center; flex: none; width: 44px; height: 44px; }
.lc-match-crest img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* no crest (or one that didn't load): the initials in a circle tinted from the name (--lc-hue, set by match-card.js) */
.lc-match-mono {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; user-select: none;
  background: light-dark(oklch(93% .045 var(--lc-hue, 250)), oklch(32% .065 var(--lc-hue, 250)));
  color: light-dark(oklch(42% .11 var(--lc-hue, 250)), oklch(88% .075 var(--lc-hue, 250)));
  font: 650 15px/1 var(--font); letter-spacing: .02em;
}
.lc-match-mono::before { content: attr(data-initials); }
.lc-match-mono[data-len="3"] { font-size: 13px; }
.lc-match-name { align-self: start; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow-wrap: anywhere; font: 500 var(--fs-row, 13px)/1.3 var(--font); color: var(--text); }
.lc-match-score { grid-row: 1; font: 300 36px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; }
.lc-match-score[data-side="home"] { grid-column: 2; }
.lc-match-score[data-side="away"] { grid-column: 4; }
.lc-match-score[data-lost] { color: var(--dim); }
.lc-match-mid { grid-row: 1; grid-column: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; text-align: center; }
.lc-match-vs { margin-bottom: 3px; font: 300 22px/1 var(--font); color: var(--dim); }
.lc-match-state { display: inline-flex; align-items: center; gap: 6px; font: 500 var(--fs-sm, 12.5px)/1.3 var(--font); color: var(--text-soft); white-space: nowrap; }
.lc-match[data-status="live"] .lc-match-state { color: var(--danger-text); }
/* live: a small dot that pulses (standing still with Reduce Motion, below) */
.lc-match-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--rec-fill); animation: lc-match-pulse 1.6s var(--ease-in-out) infinite; }
@keyframes lc-match-pulse { 50% { opacity: .35; transform: scale(.75); } }
.lc-match-day { font-size: var(--fs-xs, 12px); line-height: 1.3; color: var(--label); white-space: nowrap; }
/* the details (↗) */
.lc-match-details { display: flex; flex-direction: column; gap: 14px; padding: 12px 16px 14px; border-top: 1px solid var(--line); animation: lc-fade var(--dur-3) var(--ease-out); }
.lc-match-facts, .lc-match-side, .lc-match-sources { list-style: none; margin: 0; padding: 0; }
.lc-match-facts { display: flex; flex-direction: column; gap: 6px; }
.lc-match-fact { display: flex; align-items: flex-start; gap: 8px; min-width: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--text-soft); }
.lc-match-fact > .lc-icon { margin-top: 2px; color: var(--label); }
.lc-match-fact > .lc-icon svg { width: 14px; height: 14px; }
/* each team's events under its side: the home team's from the left, the away team's mirrored from the right */
.lc-match-events { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
.lc-match-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lc-match-event { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.35; color: var(--text); }
.lc-match-side[data-side="away"] .lc-match-event { justify-content: flex-end; text-align: right; }
.lc-match-side[data-side="away"] .lc-match-player { order: 1; }
.lc-match-side[data-side="away"] .lc-match-note { order: 2; }
.lc-match-side[data-side="away"] .lc-match-kind { order: 3; }
.lc-match-side[data-side="away"] .lc-match-min { order: 4; }
/* wide enough for stoppage time (45+2'), so each side's icons line up */
.lc-match-min { flex: none; min-width: 5ch; color: var(--label); font-variant-numeric: tabular-nums; }
.lc-match-kind { display: grid; place-items: center; flex: none; width: 14px; height: 14px; color: var(--dim); }
.lc-match-kind svg { display: block; width: 14px; height: 14px; }
.lc-match-event[data-kind="own_goal"] .lc-match-kind { color: var(--danger-text); }
.lc-match-event[data-kind="red_card"] .lc-match-kind { color: var(--danger); }
.lc-match-event[data-kind="other"] .lc-match-kind { color: var(--label); }
.lc-match-player { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-match-note { flex: none; font-size: var(--fs-xs, 12px); color: var(--label); }
.lc-match-sources { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-match-sources li { display: flex; min-width: 0; max-width: 100%; }
.lc-match-source {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 10px 0 5px; overflow: hidden; white-space: nowrap;
  border-radius: var(--r-pill, 999px); background: var(--overlay-3); color: var(--dim); font: 500 var(--fs-xs, 12px)/24px var(--font); text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lc-match-source:hover { background: var(--overlay-5); color: var(--text); }
.lc-match-source .lc-site-icon { width: 15px; height: 15px; }
.lc-match-source > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container lc-match (max-width: 420px) {
  .lc-match-board { grid-template-columns: minmax(0, 1fr) auto minmax(64px, max-content) auto minmax(0, 1fr); column-gap: 8px; padding: 14px 10px 16px; }
  .lc-match-crest { width: 36px; height: 36px; }
  .lc-match-mono { font-size: 13px; }
  .lc-match-mono[data-len="3"] { font-size: 11.5px; }
  .lc-match-score { font-size: 28px; }
  .lc-match-name { font-size: var(--fs-xs, 12px); }
  .lc-match-events { column-gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lc-match-live, .lc-match-details { animation: none !important; } }
html[data-motion="reduce"] :is(.lc-match-live, .lc-match-details) { animation: none !important; }

/* Weather cards (weather-card.js; get_weather, Apple Weather): at the top of a reply, in the cards' look (--card,
   a hairline, r16). The place 14/600 with the place's date 12.5px --label; now: the condition's icon (48 px),
   the temperature large and light, the condition under it; today's high / low and a few words on the right (under
   it on a narrow card). Hairlines, then the next 6 hours (4 under 480 px: a container query), the days asked
   about as one compact row, and Apple's attribution, small, at the bottom. The icons' parts take their colors here:
   the sun amber, rain and snow the accent, clouds --dim filled with the card (what's behind them hides). */
.lc-wx { container: lc-wx / inline-size; min-width: 0; margin: 4px 0; border: 1px solid var(--line); border-radius: var(--r-pop, 16px); background: var(--card); overflow: hidden; }
.lc-wx-head { display: flex; flex-direction: column; gap: 2px; padding: 13px 16px 0; }
.lc-wx-place { margin: 0; font: 600 var(--fs-body, 14px)/1.35 var(--font); color: var(--text); overflow-wrap: anywhere; }
.lc-wx-date { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.4; color: var(--label); }
.lc-wx-approx { padding: 0 7px; border-radius: var(--r-pill, 999px); background: var(--overlay-3); font-size: var(--fs-2xs, 11.5px); line-height: 18px; color: var(--dim); }
.lc-wx-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 16px 16px; }
.lc-wx-now { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lc-wx-reading { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lc-wx-temp { display: flex; align-items: flex-start; font: 300 44px/1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text-strong); white-space: nowrap; }
.lc-wx-unit { margin: 3px 0 0 2px; font: 400 18px/1 var(--font); letter-spacing: 0; color: var(--dim); }
.lc-wx-cond { font: 500 var(--fs-row, 13px)/1.3 var(--font); color: var(--text-soft); overflow-wrap: anywhere; }
.lc-wx-today { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; text-align: right; }
.lc-wx-label { font-size: var(--fs-xs, 12px); line-height: 1.3; color: var(--label); }
.lc-wx-hilo { font: 500 var(--fs-title, 17px)/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.lc-wx-summary { max-width: 26ch; font-size: var(--fs-sm, 12.5px); line-height: 1.35; color: var(--dim); }
.lc-wx-hours, .lc-wx-days { list-style: none; margin: 0; border-top: 1px solid var(--line); }
.lc-wx-hours { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 12px 8px 13px; }
.lc-wx-hour { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.lc-wx-hour-time { font-size: var(--fs-xs, 12px); line-height: 1.2; color: var(--label); white-space: nowrap; }
.lc-wx-hour-temp { font: 500 var(--fs-body, 14px)/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--text); }
.lc-wx-rain { display: inline-flex; align-items: center; gap: 2px; min-height: 15px; font: 500 var(--fs-2xs, 11.5px)/15px var(--font); font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; }
.lc-wx-rain-drop { display: inline-grid; place-items: center; width: 10px; height: 10px; }
.lc-wx-rain-drop svg { display: block; width: 10px; height: 10px; }
/* the days: one compact row like the hours' (a second line under it when they don't fit) */
.lc-wx-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(68px, 1fr)); gap: 12px 4px; padding: 12px 8px 13px; }
.lc-wx-day { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; text-align: center; }
.lc-wx-day-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 var(--fs-xs, 12px)/1.2 var(--font); color: var(--text-soft); }
.lc-wx-day-hilo { font: 500 var(--fs-row, 13px)/1.2 var(--font); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.lc-wx-lo { color: var(--dim); }
.lc-wx-attr { margin: 0; padding: 8px 16px 10px; border-top: 1px solid var(--line); }
.lc-wx-attr-link { display: inline-flex; align-items: center; gap: 4px; font: 500 var(--fs-2xs, 11.5px)/1.4 var(--font); color: var(--label); text-decoration: none; }
.lc-wx-attr-link:hover { color: var(--text); text-decoration: underline; }
.lc-wx-attr-link .lc-icon svg { width: 11px; height: 11px; }
.lc-wx-icon { display: inline-grid; place-items: center; flex: none; color: var(--dim); }
.lc-wx-icon svg { display: block; width: 100%; height: 100%; }
.lc-wx-icon-now { width: 48px; height: 48px; }
.lc-wx-icon-hour { width: 26px; height: 26px; }
.lc-wx-icon-day { width: 22px; height: 22px; }
.lc-wx-icon .lc-wx-sun, .lc-wx-icon .lc-wx-bolt { color: var(--amber); }
.lc-wx-icon .lc-wx-moon { color: var(--text-soft); }
.lc-wx-icon .lc-wx-cloud { color: var(--dim); fill: var(--card); }
.lc-wx-icon .lc-wx-drops, .lc-wx-icon .lc-wx-snow, .lc-wx-icon .lc-wx-hail { color: var(--accent); }
.lc-wx-icon .lc-wx-fog, .lc-wx-icon .lc-wx-wind { color: var(--dim); }
@container lc-wx (max-width: 479px) {
  .lc-wx-hours { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lc-wx-hour:nth-child(n+5) { display: none; }
}
@container lc-wx (max-width: 419px) {
  .lc-wx-days { grid-template-columns: repeat(auto-fit, minmax(52px, 1fr)); }
  .lc-wx-day-hilo { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .lc-wx-sep { display: none; }
}
@container lc-wx (max-width: 359px) {
  .lc-wx-main { flex-direction: column; align-items: flex-start; }
  .lc-wx-today { align-items: flex-start; text-align: left; }
  .lc-wx-temp { font-size: 38px; }
  .lc-wx-icon-now { width: 42px; height: 42px; }
}

/* pictures and documents */
.lc-made { display: flex; flex-wrap: wrap; gap: 12px; }
.lc-made-img { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: min(100%, 420px); }
.lc-made-img img { display: block; max-width: 100%; border-radius: 14px; border: 1px solid var(--line); background: var(--overlay-2); min-height: 120px; }
.lc-made-img figcaption { display: flex; gap: 8px; }
/* a picture being made: the dots (dots.js), as big as the picture will be (--ar, set by core.js) */
.lc-making { position: relative; width: min(100%, 420px, calc(60vh * var(--ar, 1))); aspect-ratio: var(--ar, 1); border-radius: 14px; overflow: hidden; border: 1px solid var(--line); }
.lc-doc-card, .lc-att:not(.lc-att-pic) { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.lc-doc-card { width: min(100%, 360px); }
.lc-fname { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.lc-fname b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-fname small { color: var(--label); font-size: 12px; }
.lc-ficon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 34px; height: 40px; border-radius: 6px; font: 700 9.5px var(--font); letter-spacing: .02em; color: #fff; background: #555b66; }
.lc-ficon-pdf { background: #d93025; } .lc-ficon-doc { background: #185abd; } .lc-ficon-ppt { background: #c43e1c; }
.lc-ficon-xls, .lc-ficon-csv { background: #107c41; } .lc-ficon-html { background: #b4570a; }
.lc-att-pic { position: relative; width: 120px; height: 120px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--overlay-2); }
.lc-att-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-pic-missing { visibility: hidden; }

/* Sources: a button with the first sites' logos that opens their list (sources.js; the owner's request
   of 2026-10-21). The list slides down (its grid row from 0fr to 1fr); closed, it's hidden from
   keyboards and screen readers too (visibility). Nothing moves with Reduce Motion. */
.lc-sources-wrap { margin-top: 12px; }
.lc-sources-wrap[hidden] { display: none; }
.lc-src-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 6px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-pill, 999px); background: transparent; color: var(--dim);
  font: 500 13px/1 var(--font); cursor: pointer;
  transition: background var(--dur-1, .15s) var(--ease-out), color var(--dur-1, .15s) var(--ease-out), border-color var(--dur-1, .15s) var(--ease-out);
}
.lc-src-btn:hover { background: var(--hover); color: var(--text); }
.lc-src-btn[aria-expanded="true"] { color: var(--text); border-color: var(--line-strong); }
.lc-src-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lc-src-stack { display: inline-flex; padding-left: 1px; }
.lc-src-stack[hidden] { display: none; }
.lc-src-stack .lc-site-icon { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--bg), inset 0 0 0 1px #0000000f; }
.lc-src-stack .lc-site-icon + .lc-site-icon { margin-left: -7px; }
.lc-src-count { color: var(--label); font-variant-numeric: tabular-nums; }
.lc-src-chev { display: inline-flex; color: var(--label); transition: transform .25s var(--ease-out); }
.lc-src-btn[aria-expanded="true"] .lc-src-chev { transform: rotate(180deg); }
.lc-src-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s var(--ease-out), visibility 0s linear .3s; }
.lc-src-panel.lc-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .3s var(--ease-out), visibility 0s; }
.lc-src-inner { min-height: 0; overflow: hidden; }
.lc-sources {
  list-style: none; margin: 8px 0 2px; padding: 4px; display: flex; flex-direction: column; gap: 1px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--overlay-1);
}
.lc-src-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px 7px 8px; border-radius: 10px; color: var(--text); text-decoration: none; }
.lc-src-row:hover { background: var(--hover); }
.lc-src-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lc-src-slot { display: inline-flex; flex: none; width: 24px; height: 24px; }
.lc-src-slot .lc-site-icon { width: 24px; height: 24px; }
.lc-src-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lc-src-title { font-size: 13.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-src-host { font-size: 12px; line-height: 1.25; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-src-n { flex: none; min-width: 18px; text-align: right; font: 500 11.5px/1 var(--mono); color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .lc-src-panel, .lc-src-chev { transition: none; } }
html[data-motion="reduce"] :is(.lc-src-panel, .lc-src-chev) { transition: none; }

/* A site's logo (site-icon.js) on a light chip, so dark logos show on the dark theme; or its first
   letter in a circle tinted from its name (--lc-hue) when it has none. */
.lc-site-icon { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px #0000000f; }
.lc-site-icon img { display: block; width: 72%; height: 72%; object-fit: contain; }
.lc-site-icon:has(> .lc-site-letter) { background: none; }
.lc-site-letter {
  display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; user-select: none;
  background: light-dark(oklch(93% .045 var(--lc-hue, 250)), oklch(32% .065 var(--lc-hue, 250)));
  color: light-dark(oklch(42% .11 var(--lc-hue, 250)), oklch(88% .075 var(--lc-hue, 250)));
  font: 650 10px/1 var(--font);
}
.lc-site-letter::before { content: attr(data-letter); }
.lc-src-slot .lc-site-letter { font-size: 11.5px; }

/* notices */
.lc-msg-notices:empty { display: none; }
.lc-msg-notices { display: flex; flex-direction: column; gap: 8px; }
.lc-notice { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 12px; border-radius: var(--r-card, 12px); font-size: 13px; border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--card)); color: var(--danger-text); }
.lc-notice-info { border-color: var(--line-strong); background: var(--card); color: var(--text-soft); }
.lc-notice-text { flex: 1 1 220px; min-width: 0; }

/* footer */
.lc-footer:empty { display: none; }
.lc-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 30px; }
.lc-footer-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; color: var(--label); font-size: 12.5px; }
.lc-footer .lc-msg-actions { margin-left: auto; }
.lc-regen { position: relative; display: inline-flex; }
.lc-regen .lc-regen-more { width: 22px; }

/* empty chat, like Gemini's home (the owner's request of 2026-10-22): the greeting alone (Lumio's words, the
   serif), then the shell's Chat | Work switch and the ideas, one row each: an icon and one line, left-aligned
   in the composer's column, no cards */
.lc-empty { text-align: center; padding-top: min(12vh, 110px); }
.lc-greeting { font: 400 var(--fs-hero, clamp(32px, 5vw, 44px))/var(--lh-tight, 1.1) var(--serif); margin: 0; letter-spacing: var(--track-serif, -.01em); }
.lc-ideas { display: flex; flex-direction: column; gap: 2px; width: 100%; margin-top: 12px; text-align: left; }
.lc-idea {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 40px; padding: 8px 14px 8px 16px;
  border: 0; border-radius: var(--r-pill, 999px); background: none; color: var(--text-soft); text-align: left;
  font: 400 var(--fs-body, 14px)/1.4 var(--font); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lc-idea:hover { background: var(--hover); color: var(--text); }
.lc-idea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 0; }
.lc-idea-icon { color: var(--dim); }
.lc-idea-icon svg { width: 16px; height: 16px; }
.lc-idea-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* an idea the plan or the visit doesn't include: its pill right after its words (core.js ideas()) */
.lc-idea > :is(.lc-mo-lock, .lc-signup-badge) { flex: none; margin-left: 0; }
.lc-idea:has(> .lc-mo-lock, > .lc-signup-badge) > .lc-idea-text { flex: 0 1 auto; }

/* The shell's Chat | Work switch (website/public/chat.html's, the side panel's; core and the Work view place it):
   on a new chat or task only, centered under the composer (under the greeting while the composer is at the
   bottom), two pill buttons like Gemini's "Chat | Task", the picked one filled. role=tablist: the shell's arrow keys. */
.lc-modes { display: flex; justify-content: center; gap: 4px; margin: 14px 0 2px; }
.lc-mode-tab {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-radius: var(--r-pill, 999px);
  background: none; color: var(--dim); font: 500 var(--fs-ui, 13.5px)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.lc-mode-tab:hover { background: var(--hover); color: var(--text); }
.lc-mode-tab[aria-selected="true"] { background: var(--active); color: var(--text); }
.lc-mode-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (pointer: coarse) { .lc-mode-tab { height: 36px; } }

/* A new chat or task (.lc-fresh), at any width: a soft glow of the accent behind the greeting and the composer,
   faint in light (the owner's request of 2026-10-22, like Gemini's home). Static; none with More Contrast. */
.lc-root { --lc-glow: light-dark(color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent) 17%, transparent)); }
.lc-root.lc-fresh { background-image: radial-gradient(ellipse 60% 48% at 50% var(--lc-glow-y, 34%), var(--lc-glow), transparent); }
@media (prefers-contrast: more) { .lc-root.lc-fresh { background-image: none; } }

/* A new chat, centered (docs/match-cards-contract.md §3): core puts .lc-fresh on the root while the chat is
   new and empty. On windows 640 px and wider (core's WIDE), the thread (the greeting at its bottom) and the
   slot under the composer (the switch, then the ideas) share what's left equally, so the composer sits in the
   middle with the greeting right above it and the rest right under it; each half scrolls by itself on a short
   window. Narrower windows keep the composer at the bottom (the slot stays hidden; the rest is in the thread). */
.lc-ideas-slot { flex: none; min-height: 0; }
@media (min-width: 640px) {
  .lc-root.lc-fresh { --lc-glow-y: 50%; }
  .lc-root.lc-fresh > .lc-thread { flex: 1 1 0; display: flex; flex-direction: column; padding-bottom: 28px; }
  .lc-root.lc-fresh .lc-thread-inner { width: 100%; margin: auto auto 0; }
  .lc-root.lc-fresh .lc-empty { padding-top: 0; }
  .lc-root.lc-fresh > .lc-composer-wrap { padding-bottom: 0; }
  .lc-root.lc-fresh > .lc-ideas-slot { flex: 1 1 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--lc-gutter) 24px; }
  .lc-ideas-slot > .lc-ideas { max-width: var(--lc-measure); margin: 6px auto 0; }
}
/* The first message sends the composer down: core puts it where it was (--lc-glide, from its old place to the
   new one) and this brings it home, about 350 ms in the page's easing. With Reduce Motion core doesn't glide. */
.lc-composer-wrap.lc-glide { animation: lc-glide 350ms var(--ease-out); }
@keyframes lc-glide { from { transform: translateY(var(--lc-glide, 0px)); } }
@media (prefers-reduced-motion: reduce) { .lc-composer-wrap.lc-glide { animation: none; } }
html[data-motion="reduce"] .lc-composer-wrap.lc-glide { animation: none; }

/* ------------------------------------------------------------ composer
   docs/design-system.md §6.3 and Appendix A. Chat's composer; any other
   composer builds its own from the same classes (lc-composer, lc-composer-row,
   lc-chip, lc-round, lc-send), so they look the same. Sizes come from theme.css's
   v1 tokens (--cmp-*, --r-*) with the design's values as fallbacks; a
   composer under 480 px wide is compact (the container query at the end). */
.lc-composer-wrap { position: relative; flex: none; padding: 0 var(--lc-gutter) 16px; }
/* ↓ to the newest message (core.js ui.jump), centered over the composer; the accent while a reply is still coming */
.lc-jump {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 2; transform: translateX(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--popover); color: var(--text); box-shadow: var(--shadow-md); cursor: pointer;
  animation: lc-jump-in var(--dur-3) var(--ease-out);
}
@keyframes lc-jump-in { from { opacity: 0; transform: translateX(-50%) translateY(6px); } }
.lc-jump:hover { background: var(--card-hover); }
.lc-jump:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lc-jump.lc-live { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .lc-jump { animation: none; } }
@media (pointer: coarse) { .lc-jump { width: 40px; height: 40px; } }
.lc-composer {
  container: lc-composer / inline-size;
  position: relative; width: 100%; max-width: var(--lc-measure, var(--measure, 780px)); margin: 0 auto; padding: 10px 10px 8px 14px;
  border: 1px solid var(--box-line); border-radius: var(--r-composer, 22px); background: var(--box); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur-2) var(--ease-out);
}
.lc-composer:focus-within { border-color: var(--box-line-focus); }
.lc-input {
  display: block; width: 100%; resize: none; border: 0; outline: none; background: none; color: var(--text);
  font: 400 var(--cmp-font, 15px)/var(--lh-input, 1.5) var(--font); max-height: 240px; padding: 6px 2px;
}
.lc-input::placeholder { color: var(--label); }
.lc-composer-row { display: flex; align-items: center; gap: var(--cmp-gap, 6px); margin-top: 6px; min-width: 0; }
.lc-composer-row :focus-visible { outline-offset: 1px; }
.lc-spacer { flex: 1 1 0; min-width: 0; }
/* round buttons: + (filled); the usage circle and the mic are quiet ones with their own styles (usage-circle.css, dictation.css) */
.lc-round {
  display: grid; place-items: center; flex: none; width: var(--cmp-ctl, 32px); height: var(--cmp-ctl, 32px); padding: 0;
  border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--dim); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lc-round:hover, .lc-round[aria-expanded="true"] { background: var(--card-hover); border-color: var(--line-strong); color: var(--text); }
.lc-round svg { display: block; width: var(--cmp-icon, 16px); height: var(--cmp-icon, 16px); }
/* chips: model, effort, approval mode, project / folders */
.lc-chip {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; height: var(--cmp-ctl, 32px); padding: 0 10px 0 11px;
  border-radius: var(--r-pill, 999px); border: 1px solid var(--line); background: var(--card); color: var(--text);
  font: 500 var(--cmp-chip-font, 13px)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.lc-chip:hover, .lc-chip[aria-expanded="true"] { background: var(--card-hover); border-color: var(--line-strong); }
.lc-chip .lc-icon, .lc-chip .lc-dot { flex: none; }
.lc-chip .lc-icon { color: var(--dim); }
.lc-chip .lc-icon svg { width: 14px; height: 14px; }
.lc-chip .lc-chev { color: var(--label); }
.lc-chip .lc-chev svg { width: 12px; height: 12px; }
.lc-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: var(--lbl-max, 180px); }
.lc-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--warn); }
.lc-dot-down { background: var(--danger); }
/* the mic's place (mic-slot.js) and voice mode's: their buttons are laid out as the row's own */
.lc-mic-slot { display: contents; }
.lc-voice-slot { display: contents; }
/* send, and Stop (the same circle with a square) while it runs (§6.6) */
.lc-send {
  display: grid; place-items: center; flex: none; width: var(--cmp-send, 34px); height: var(--cmp-send, 34px); padding: 0;
  border-radius: 50%; border: 0; background: var(--primary-bg); color: var(--primary-fg); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.lc-send:hover:not(:disabled) { background: var(--primary-hover); }
.lc-send:active:not(:disabled) { transform: scale(.94); }
.lc-send:disabled { opacity: .3; cursor: default; }
.lc-send svg { display: block; width: 18px; height: 18px; }
/* Send ↔ Stop: the new glyph springs in (§3.7), only when it changes (not each time the view shows again) */
.lc-send.lc-swap svg { animation: lc-glyph var(--dur-4) var(--ease-spring, var(--ease-out)); }
.lc-send.lc-stop svg { width: 10px; height: 10px; }
@keyframes lc-glyph { from { transform: scale(.6); } }
/* The pill (the owner's request of 2026-10-22, "like Google Gemini"): Chat's and Work's composer (.lc-pill;
   Images and Videos keep theirs) is one rounded box, its controls quiet (the + and the chips borderless, the
   model a name and a chevron) and Send the only filled one. From a 480 px content box, while the text fits on
   one line (no .lc-tall, dom.js fitInput), the input sits in the row: the row's first control (+, Work's
   approvals) on its left, the rest on its right. Narrower (the side panel, phones), or once the text is
   longer, the input is over the row. */
.lc-composer.lc-pill { border-radius: 28px; padding: 10px 10px 10px 12px; }
.lc-pill .lc-composer-row > .lc-round { background: transparent; border-color: transparent; }
.lc-pill .lc-composer-row > .lc-round:hover, .lc-pill .lc-composer-row > .lc-round[aria-expanded="true"] { background: var(--hover); }
.lc-pill .lc-chip { background: transparent; border-color: transparent; }
.lc-pill .lc-chip:hover, .lc-pill .lc-chip[aria-expanded="true"] { background: var(--hover); border-color: transparent; }
.lc-pill .lc-chip-model { padding: 0 8px 0 12px; color: var(--dim); }
.lc-pill .lc-chip-model:hover, .lc-pill .lc-chip-model[aria-expanded="true"] { color: var(--text); }
.lc-pill .lc-chip-model .lc-chev { color: inherit; }
/* Extra thinking on: a small bulb in the model's chip */
.lc-chip .lc-icon.lc-chip-think { color: var(--accent); }
.lc-chip .lc-chip-think svg { width: 13px; height: 13px; }
@container lc-composer (min-width: 480px) {
  .lc-pill:not(.lc-tall) .lc-composer-line { display: flex; align-items: center; gap: var(--cmp-gap, 6px); }
  .lc-pill:not(.lc-tall) .lc-composer-line > .lc-composer-row { display: contents; }
  .lc-pill:not(.lc-tall) .lc-composer-line > .lc-input { order: 2; flex: 1 1 0; min-width: 0; padding: 6px 4px; }
  .lc-pill:not(.lc-tall) .lc-composer-row > *, .lc-pill:not(.lc-tall) .lc-composer-row > :is(.lc-mic-slot, .lc-voice-slot) > * { order: 3; }
  .lc-pill:not(.lc-tall) .lc-composer-row > :first-child { order: 1; }
  .lc-pill:not(.lc-tall) .lc-composer-row > .lc-spacer { display: none; }
}
/* Deep research or Super AI for the next message (docs/research-roundtable-contract.md §7, §10): a chip
   above the input (§6.3's place for chips), its icon, its name and ×, in the accent like a picked row; Super AI's
   name and its team's marks are a button that opens the team's picker. */
.lc-flow-slot { display: flex; min-width: 0; padding: 0 0 6px; }
.lc-flow-chip {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; height: var(--h-sm, 28px); padding: 0 4px 0 10px;
  border-radius: var(--r-pill, 999px); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent);
  font: 500 var(--fs-sm, 12.5px)/1 var(--font); animation: lc-pop-in var(--dur-3) var(--ease-out); transform-origin: 0 100%;
}
.lc-flow-chip > .lc-icon svg { width: 14px; height: 14px; }
.lc-flow-chip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-flow-chip-x { display: grid; place-items: center; flex: none; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
.lc-flow-chip-x:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.lc-flow-chip-x svg { display: block; width: 12px; height: 12px; }
.lc-flow-chip-team {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 100%; margin: 0 0 0 -10px; padding: 0 2px 0 10px; border: 0;
  border-radius: var(--r-pill, 999px) 0 0 var(--r-pill, 999px); background: none; color: inherit; font: inherit; cursor: pointer;
}
.lc-flow-chip-team:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lc-flow-chip-team:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lc-flow-chip-team > .lc-icon svg { width: 14px; height: 14px; }
.lc-flow-chip .lc-team-chip-mark { --lc-team-ring: var(--box); width: 18px; height: 18px; }
/* Super AI's team picker (super-team): the team's rows (super-ai.js teamRows, the team first), then Done. Its title
   and Done stay in view while the rows scroll (on the popover's own color: the glass would show rows through), at
   its very top and bottom (no padding there: .lc-pop's 6 px let rows show above the title and under Done; two
   classes, as .lc-pop comes later), and a row the arrow keys reach scrolls clear of both (scroll-padding). */
.lc-super-team { width: min(340px, calc(100vw - 32px)); overflow-y: auto; }
.lc-pop.lc-super-team { padding-top: 0; padding-bottom: 0; scroll-padding-block: 44px 52px; }
.lc-super-team > .lc-menu-head { position: sticky; top: 0; z-index: 1; margin: 0 -6px; padding: 12px 16px 6px; background: var(--popover); }
.lc-super-team-foot { position: sticky; bottom: 0; z-index: 1; display: flex; justify-content: flex-end; margin: 4px -6px 0; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--popover); }
.lc-hints:empty { display: none; }
.lc-hints { display: flex; flex-direction: column; gap: 4px; margin: -2px 0 6px; }
.lc-hint { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: var(--warn-text); }
.lc-cost-preview { padding: 6px 4px 0; font-size: 12px; color: var(--label); }
.lc-preview-high { color: var(--warn-text); }

/* attachment tray */
.lc-tray { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; }
.lc-tray .lc-att { position: relative; flex: none; }
.lc-tray .lc-att:not(.lc-att-pic) { width: 220px; padding-right: 30px; }
.lc-tray .lc-att-pic { width: 64px; height: 64px; border-radius: 12px; }
.lc-att.lc-busy { opacity: .6; }
.lc-att.lc-err { border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.lc-att-x { position: absolute; top: 4px; right: 4px; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 0; background: var(--overlay-6); color: var(--text); cursor: pointer; padding: 0; }
.lc-att-x svg { width: 11px; height: 11px; }

/* ------------------------------------------------------------ popovers */
/* Menus and popovers (docs/design-system.md §6.2): composer menus open upward,
   their left edge on their button (core's showMenu). */
.lc-pop {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: var(--z-popover, 30); max-width: calc(100vw - 24px);
  max-height: min(480px, 70vh); overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r-pop, 16px); background: var(--popover-glass); color: var(--text);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); padding: 6px;
  transform-origin: 20% 100%; animation: lc-pop-in var(--dur-3) var(--ease-out);
}
@keyframes lc-pop-in { from { opacity: 0; transform: translateY(6px) scale(.97); } }
/* Tooltips (§6.2) for the mic and the composer's chips (tooltip.js setTip(): the words in
   data-tip): 8 px above, left-aligned (right-aligned at the row's end), after 350 ms of hover,
   at once on keyboard focus; hidden while the control's menu is open or after Esc. */
.lc-tipped { position: relative; }
.lc-tipped[data-tip]::after {
  content: attr(data-tip);
  position: absolute; z-index: var(--z-tooltip, 70); bottom: calc(100% + 8px); left: -6px;
  width: max-content; max-width: 260px; padding: 7px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-row, 10px); background: var(--popover); box-shadow: var(--shadow-md);
  color: var(--text); font: 600 12px/1.4 var(--font); letter-spacing: normal; text-align: left; text-transform: none; white-space: normal;
  pointer-events: none; visibility: hidden; opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
}
.lc-tipped.lc-tip-end[data-tip]::after { left: auto; right: -6px; }
.lc-tipped[data-tip]:hover::after { visibility: visible; opacity: 1; transform: none; transition-delay: 350ms; }
.lc-tipped[data-tip]:focus-visible::after { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* As specific as :hover's rule (and after it), so an open menu's chip never shows its tip over the menu. */
.lc-tipped[data-tip]:is([aria-expanded="true"], .lc-tip-hush, :disabled)::after { visibility: hidden; opacity: 0; transition: none; }
.lc-menu-head { padding: 10px 10px 6px; font: 500 var(--fs-label, 10.5px)/1.3 var(--mono); letter-spacing: var(--track-label, .12em); text-transform: uppercase; color: var(--label); }
.lc-menu-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px; text-align: left; border: 0; background: none; color: var(--text); padding: 8px 10px; border-radius: var(--r-row, 10px); cursor: pointer; font: 400 13.5px var(--font); }
.lc-menu-row:hover, .lc-menu-row:focus-visible { background: var(--overlay-3); outline: none; }
.lc-menu-row.lc-danger { color: var(--danger-text); }
.lc-menu-row .lc-icon { color: var(--dim); }
.lc-menu-row .lc-check { color: var(--accent); margin-left: auto; }
.lc-menu-row .lc-check svg { width: 14px; height: 14px; }
/* a rich row: a 30 px icon tile, a title and a description */
.lc-menu-rich { gap: 11px; padding: 9px 10px; border-radius: var(--r-card, 12px); }
.lc-menu-tile { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-control, 8px); background: var(--overlay-3); color: var(--dim); }
.lc-menu-tile svg { width: 16px; height: 16px; }
.lc-menu-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.35; }
.lc-menu-text b { font-weight: 600; font-size: 13.5px; }
.lc-menu-rich .lc-menu-text b { font-size: 13px; }
.lc-menu-text small { color: var(--dim); font-size: 12px; }
.lc-menu-rich .lc-menu-text small { color: var(--label); }
.lc-menu-note { margin: 4px 10px 6px; font-size: 12.5px; color: var(--label); }
.lc-menu-foot-note { margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 12px; }
.lc-menu-row kbd { margin-left: auto; padding: 1px 5px; border: 1px solid var(--line); border-radius: var(--r-tag, 6px); font: 11px var(--mono); color: var(--label); }
.lc-menu-foot { display: block; width: 100%; text-align: left; border: 0; border-top: 1px solid var(--line); margin-top: 4px; padding: 10px 10px 6px; background: none; color: var(--accent); font-size: 13px; cursor: pointer; }
.lc-plus-menu { width: min(340px, calc(100vw - 32px)); }
.lc-app-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; }
.lc-app-row:hover { background: var(--overlay-2); }
.lc-soon { font-size: 12px; color: var(--label); }
.lc-switch { position: relative; width: 34px; height: 20px; flex: none; border-radius: 999px; border: 0; padding: 0; background: var(--switch-off); cursor: pointer; transition: background var(--dur-2) var(--ease); }
.lc-switch > i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-xs); transition: transform var(--dur-2) var(--ease); }
.lc-switch[aria-checked="true"] { background: var(--accent); }
.lc-switch[aria-checked="true"] > i { transform: translateX(14px); }
.lc-model-menu { width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column; max-height: min(520px, 62vh); padding: 0; overflow: hidden; }
.lc-model-search { margin: 8px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: 14px var(--font); outline: none; }
.lc-model-search:focus { border-color: var(--box-line-focus); }
.lc-model-list { overflow-y: auto; padding: 0 6px 6px; }
/* a plan's pill (a lock and "Go", "Pro": the settings popover, a tile's menu, the lightbox) and a model's state */
.lc-mo-lock { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font: 600 11px var(--font); color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 2px 8px; }
.lc-state { font: 600 10.5px var(--font); padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); }
.lc-state-down { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger-text); }
/* The model menus' list (model-list.js; the owner's request of 2026-10-19: simpler, no prices):
   Recommended rows (a 30 px tile with the maker's mark, the name, a short muted line, the check),
   More models (a disclosure row), then compact rows (the mark and the name, one line). */
.lc-model-option { display: flex; align-items: center; gap: 10px; min-width: 0; border-radius: var(--r-row, 10px); color: var(--text); cursor: pointer; }
.lc-model-option:hover, .lc-model-option.lc-active { background: var(--hover); }
.lc-model-option[aria-selected="true"] { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.lc-model-option[aria-selected="true"].lc-active { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.lc-mo-rec { min-height: 48px; padding: 7px 10px 7px 8px; border-radius: var(--r-card, 12px); }
.lc-mo-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--r-control, 8px); background: var(--overlay-3); color: var(--text); }
.lc-mo-mark .lc-maker-logo { width: 16px; height: 16px; color: inherit; }
.lc-mo-mark .lc-maker-logo svg { width: 15px; height: 15px; }
.lc-mo-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; line-height: 1.3; }
.lc-mo-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13.5px; }
.lc-mo-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--label); }
.lc-mo-compact { min-height: 34px; padding: 6px 10px; }
.lc-mo-compact .lc-maker-logo { color: var(--dim); }
.lc-mo-compact .lc-mo-name { flex: 0 1 auto; font-weight: 500; font-size: 13px; }
.lc-mo-sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--label); }
/* A model's data note (data-note.js: what its provider does with what's sent), on a small line under its name in
   the model and team pickers; it wraps rather than cut the words short. */
.lc-mo-names { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* a model's data note: information, not a warning (an info mark in the label's gray, like the app's other notes) */
.lc-data-note { display: flex; align-items: flex-start; gap: 4px; min-width: 0; font-size: 11.5px; line-height: 1.35; color: var(--label); white-space: normal; }
.lc-data-note-mark { flex: none; display: inline-flex; margin-top: 1px; color: var(--label); }
.lc-data-note-mark svg { width: 12px; height: 12px; }
/* The once-only notice by the composer after the first message to such a model (Chat's and Code's), with Dismiss. */
.lc-notice[data-code="data_note"] .lc-notice-text { flex: 1 1 240px; min-width: 0; }
.lc-model-option > .lc-check { flex: none; margin-left: auto; color: var(--accent); }
.lc-model-option > .lc-check svg { width: 14px; height: 14px; }
.lc-model-option > .lc-state { flex: none; }
.lc-model-option > .lc-state + .lc-check, .lc-model-option > .lc-state + .lc-mo-lock { margin-left: 6px; }
.lc-mo-text + .lc-state, .lc-mo-compact > .lc-state { margin-left: auto; }
/* a model the plan doesn't include: a small lock and the plan's name, in the accent; Deep research and
   Roundtable the plan doesn't include look the same in the + menu and the slash menu */
:is(.lc-model-list, .lc-plus-menu, .lc-slash-menu, .lc-work-model-menu) .lc-mo-lock { flex: none; gap: 3px; height: 20px; margin-left: auto; padding: 0 8px 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 600 11px var(--font); white-space: nowrap; }
:is(.lc-model-list, .lc-plus-menu, .lc-slash-menu) .lc-mo-lock .lc-icon svg { width: 11px; height: 11px; }
.lc-slash-option .lc-mo-lock { margin-left: 8px; align-self: center; }
.lc-flow-row[data-locked] .lc-menu-text b { color: var(--dim); }
.lc-locked .lc-mo-name, .lc-locked .lc-mo-mark { color: var(--dim); }
/* More models: a disclosure row under a hairline; its count and a chevron that turns down when it's open */
.lc-mo-more { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; margin-top: 7px; padding: 8px 10px; border-radius: var(--r-row, 10px); color: var(--dim); font: 500 13px var(--font); cursor: pointer; }
.lc-mo-more::before { content: ''; position: absolute; left: 10px; right: 10px; top: -4px; height: 1px; background: var(--line); }
.lc-mo-more:hover, .lc-mo-more.lc-active { background: var(--hover); color: var(--text); }
.lc-mo-count { margin-left: auto; font: 500 11.5px var(--font); font-variant-numeric: tabular-nums; color: var(--label); }
.lc-mo-chev { color: var(--label); transform: rotate(-90deg); transition: transform var(--dur-2) var(--ease-out); }
.lc-mo-chev svg { width: 14px; height: 14px; }
.lc-mo-more[aria-expanded="true"] .lc-mo-chev { transform: none; }
.lc-mo-more-list { padding-top: 2px; }
/* what the plan doesn't have, at the end of More models (model-list.js lockedLast) */
.lc-mo-more-list > .lc-mo-later { padding-top: 12px; }
/* Extra thinking (model-list.js thinkingRow, the owner's request of 2026-10-22): the last row of Chat's and Work's
   model menus, always in view under a hairline: the bulb in its tile (the accent while on), the name and its line,
   the switch at the right; a click anywhere on the row flips it. Without an account: "Sign up to use", the switch off. */
.lc-think-row { display: flex; align-items: center; gap: 10px; flex: none; margin: 0 6px 6px; padding: 10px 10px 4px 8px; border-top: 1px solid var(--line); cursor: pointer; }
.lc-think-row .lc-menu-text { gap: 1px; line-height: 1.3; }
.lc-think-row .lc-menu-text b { font-size: 13.5px; }
.lc-think-row .lc-menu-text small { color: var(--label); }
.lc-think-tile { transition: color var(--dur-2) var(--ease-out); }
.lc-think-row.lc-on .lc-think-tile { color: var(--accent); }
.lc-think-row .lc-signup-badge + .lc-switch { margin-left: 8px; }
.lc-think-row[data-locked] .lc-switch { opacity: .5; }
.lc-think-row .lc-switch:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lc-slash-menu { width: min(460px, calc(100vw - 32px)); max-height: min(380px, 55vh); overflow-y: auto; }
.lc-slash-option { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 10px; cursor: pointer; min-width: 0; }
.lc-slash-option.lc-active, .lc-slash-option:hover { background: var(--hover); }
.lc-slash-option.lc-unavailable { opacity: .65; }
.lc-slash-cmd { font: 600 13px var(--mono); color: var(--text); }
.lc-arg { font: 12px var(--mono); color: var(--label); }
.lc-slash-desc { margin-left: auto; color: var(--dim); font-size: 12.5px; text-align: right; }
.lc-slash-need { font-size: 11.5px; color: var(--warn-text); }
.lc-slash-error { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 2px 2px 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn-text); font-size: 13px; }
.lc-usage-pop { width: min(300px, calc(100vw - 32px)); right: 0; left: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.lc-usage-pop p { margin: 0; color: var(--dim); }
.lc-usage-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lc-usage-nums { display: flex; justify-content: space-between; color: var(--dim); }
.lc-chat-menu, .lc-regen-menu { min-width: 180px; }
.lc-regen-menu { left: auto; right: 0; max-height: min(360px, 50vh); overflow-y: auto; width: min(280px, calc(100vw - 32px)); }

/* ------------------------------------------------------------ sheets, dialogs, toasts */
.lc-layer { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
.lc-layer > * { pointer-events: auto; }
/* The sheet stops above the composer (--lc-composer-h, set by core), so the
   usage circle "See usage" points at shows beside it. */
.lc-sheet {
  position: absolute; inset: 12px 12px calc(var(--lc-composer-h, 0px) + 12px) auto; width: min(440px, calc(100% - 24px)); overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--r-sheet, 20px); background: var(--panel); box-shadow: var(--shadow-dialog);
  padding: 0 20px 20px; animation: lc-sheet-in var(--dur-4) var(--ease-out);
}
.lc-sheet:focus { outline: none; }
@keyframes lc-sheet-in { from { opacity: 0; transform: translateX(16px); } }
@media (max-width: 560px) { .lc-sheet { inset: auto 0 0 0; width: 100%; max-height: 88%; border-radius: var(--r-sheet, 20px) var(--r-sheet, 20px) 0 0; } @keyframes lc-sheet-in { from { opacity: 0; transform: translateY(16px); } } }
.lc-sheet-head { position: sticky; top: 0; display: flex; align-items: center; gap: 10px; padding: 16px 0 10px; background: var(--panel); z-index: 1; }
.lc-sheet-title { flex: 1; margin: 0; font: 400 26px/1.15 var(--serif); }
.lc-sheet h3 { margin: 0 0 8px; font: 600 13px var(--font); color: var(--text-soft); }
/* usage, kept simple (plan-panel.js): the plan with Upgrade, this week's bar
   and, when the plan has one, a few hours' bar; the /plan panel and Settings › Usage */
.lc-use-sum { display: flex; flex-direction: column; gap: 4px; }
.lc-use-plan { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 0 14px; }
.lc-use-plan-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-use-plan-name { font: 600 var(--fs-title, 17px)/1.3 var(--font); color: var(--text); }
.lc-use-plan-text small { font-size: var(--fs-sm, 12.5px); color: var(--label); }
.lc-use { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.lc-use-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lc-use-label { font: 500 var(--fs-ui, 13.5px)/1.3 var(--font); color: var(--text); }
.lc-use-pct { font-size: var(--fs-sm, 12.5px); color: var(--dim); white-space: nowrap; }
.lc-use-pct b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.lc-use-note { min-height: 1.4em; font-size: var(--fs-xs, 12px); line-height: 1.4; color: var(--label); }
.lc-use-wait { margin: 0 0 8px; font-size: 13px; color: var(--label); }
/* The /plan popover (the owner's request of 2026-10-19): over the usage circle that opened it, its
   arrow pointing at it (plan-panel.js placePlanPanel sets where: .lc-anchored); without a circle to
   point at, above the composer at the right; a bottom sheet on phones (.lc-sheet's rule).
   .lc-plan-in is what scrolls, so the arrow can stick out under the box. */
.lc-plan-in { display: contents; }
@media (min-width: 561px) {
  .lc-sheet.lc-plan {
    inset: auto 12px calc(var(--lc-composer-h, 0px) + 12px) auto; width: min(360px, calc(100% - 24px));
    max-height: none; overflow: visible; padding: 0; border-radius: var(--r-pop, 16px); box-shadow: var(--shadow-lg);
    transform-origin: 85% 100%; animation: lc-pop-in var(--dur-3) var(--ease-out);
  }
  .lc-sheet.lc-plan > .lc-plan-in { display: block; max-height: calc(100vh - var(--lc-composer-h, 0px) - 48px); overflow-y: auto; padding: 0 18px 16px; border-radius: inherit; }
  .lc-sheet.lc-plan .lc-sheet-head { padding: 14px 0 8px; }
  .lc-sheet.lc-plan .lc-sheet-title { font-size: 22px; }
  .lc-sheet.lc-plan.lc-anchored { left: var(--lc-pop-left); right: auto; bottom: var(--lc-pop-bottom); width: var(--lc-pop-w); transform-origin: var(--lc-arrow-x) 100%; }
  .lc-sheet.lc-plan.lc-anchored > .lc-plan-in { max-height: var(--lc-pop-max-h); }
  .lc-sheet.lc-plan.lc-anchored::after {
    content: ''; position: absolute; bottom: -6px; left: calc(var(--lc-arrow-x) - 6px); width: 11px; height: 11px;
    border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); border-bottom-right-radius: 3px;
    background: var(--panel); transform: rotate(45deg); pointer-events: none;
  }
}
/* "See usage": the panel's own meter is pointed at too (two halo pulses, §6.4) */
.lc-use.lc-pointed .lc-meter { animation: lc-meter-point 1.2s var(--ease-out) 2; }
@keyframes lc-meter-point { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } to { box-shadow: 0 0 0 8px transparent; } }
@media (prefers-reduced-motion: reduce) { .lc-use.lc-pointed .lc-meter { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); } }
/* the compact segmented control (§6.1): the plan panel's 7 days / 24 hours */
.lc-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-row, 10px); background: var(--overlay-3); }
.lc-seg-btn { height: 26px; border: 0; background: none; padding: 0 10px; border-radius: var(--r-control, 8px); font: 500 var(--fs-sm, 12.5px) var(--font); color: var(--dim); cursor: pointer; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.lc-seg-btn:hover { color: var(--text); }
.lc-seg-btn[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-xs); }
.lc-help-dl { margin: 0 0 16px; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.lc-help-dl dt { white-space: nowrap; }
.lc-help-dl dd { margin: 0; color: var(--dim); }
.lc-help-dl code, .lc-help-dl kbd { font: 12.5px var(--mono); padding: 1px 6px; border-radius: 6px; background: var(--overlay-4); }
.lc-scrim { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--scrim); animation: lc-fade var(--dur-3) var(--ease); }
@keyframes lc-fade { from { opacity: 0; } }
.lc-dialog { width: min(420px, 100%); padding: 20px; border-radius: var(--r-pop, 16px); border: 1px solid var(--line-strong); background: var(--panel); box-shadow: var(--shadow-dialog); animation: lc-dialog-in var(--dur-4) var(--ease-out); }
@keyframes lc-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }
.lc-dialog-title { margin: 0 0 6px; font: 600 17px var(--font); }
.lc-dialog-body { margin: 0 0 18px; color: var(--dim); font-size: 14px; }
.lc-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Toasts (§6.14): bottom center, 16 px above the composer, whatever its height (they live in .lc-composer-wrap) */
.lc-toasts { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); z-index: var(--z-toast, 50); display: flex; flex-direction: column; align-items: center; gap: 8px; width: min(460px, calc(100% - 24px)); pointer-events: none; }
.lc-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--r-card, 12px); background: var(--popover); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); font-size: var(--fs-ui, 13.5px); color: var(--text); animation: lc-pop-in var(--dur-3) var(--ease-out); }
.lc-toast-text { flex: 1; min-width: 0; }
/* While the /chat shell shows another view (Work, Images, Videos: the chat's root is hidden), the dialogs and
   toasts go over the whole page, on the body like Settings (core.js pageLayer()); the toasts sit above where
   the view's composer is. */
.lc-page-layer { position: fixed; inset: 0; z-index: 85; pointer-events: none; color: var(--text); font: 400 15px/1.55 var(--font); }
.lc-page-layer * { box-sizing: border-box; }
:where(.lc-page-layer) button { font: inherit; color: inherit; }
.lc-page-layer [hidden] { display: none !important; }
.lc-page-layer > .lc-scrim { pointer-events: auto; }
.lc-page-layer > .lc-toasts { bottom: 128px; }
.lc-drop { position: absolute; inset: 8px; z-index: 60; display: flex; align-items: center; justify-content: center; border-radius: 18px; border: 2px dashed var(--accent); background: color-mix(in srgb, var(--bg) 82%, transparent); color: var(--text); font: 500 16px var(--font); pointer-events: none; }

/* ------------------------------------------------------------ chat list (listRoot) */
.lc-list { display: flex; flex-direction: column; min-height: 0; color: var(--text); font: 400 14px/1.4 var(--font); }
.lc-list-head { position: relative; display: flex; align-items: center; margin: 0 0 6px; }
.lc-list-head > .lc-icon { position: absolute; left: 10px; color: var(--label); pointer-events: none; }
.lc-list-search { width: 100%; height: 34px; padding: 0 10px 0 32px; border-radius: 10px; border: 1px solid var(--line); background: var(--field); color: var(--text); font: 13.5px var(--font); outline: none; }
.lc-list-search:focus { border-color: var(--box-line-focus); }
.lc-list-body { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 8px; }
/* The sidebar's rows (docs/design-system.md §5.2, the browser's): plain 12px
   labels, 32 px rows r8 at 13px with the time at the right, which the ⋯
   button takes the place of on hover; a 7 px blinking dot while it runs. */
.lc-list-label { font: 500 var(--fs-xs, 12px)/1.4 var(--font); color: var(--label); padding: 12px 10px 4px; margin: 0; }
.lc-chat-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.lc-chat-row { position: relative; display: flex; align-items: center; min-height: 32px; border-radius: var(--r-control, 8px); color: var(--dim); }
.lc-chat-row:hover, .lc-chat-row:focus-within { background: var(--hover); color: var(--text); }
.lc-chat-row.lc-current { background: var(--active); color: var(--text); }
.lc-chat-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; border: 0; background: none; text-align: left; padding: 6px 10px; cursor: pointer; font-size: var(--fs-row, 13px); line-height: 1.45; border-radius: var(--r-control, 8px); }
.lc-chat-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-chat-time { flex: none; font-size: var(--fs-2xs, 11.5px); color: var(--label); font-variant-numeric: tabular-nums; }
.lc-chat-running { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--accent); animation: lc-blink 1s ease-in-out infinite; }
.lc-chat-more-btn { display: none; width: 22px; height: 22px; margin-right: 6px; border-radius: var(--r-tag, 6px); }
.lc-chat-row:hover .lc-chat-more-btn, .lc-chat-row:focus-within .lc-chat-more-btn, .lc-chat-more-btn[aria-expanded="true"] { display: inline-flex; }
.lc-chat-row:hover .lc-chat-time, .lc-chat-row:focus-within .lc-chat-time, .lc-chat-row:has([aria-expanded="true"]) .lc-chat-time { display: none; }
@media (hover: none) { .lc-chat-more-btn { display: inline-flex; } .lc-chat-time { display: none; } }
.lc-chat-menu { top: calc(100% + 2px); bottom: auto; left: auto; right: 0; transform-origin: 80% 0; }
.lc-rename { flex: 1; min-width: 0; height: 32px; margin: 2px 4px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--box-line-focus); background: var(--box); color: var(--text); font: 14px var(--font); outline: none; }
.lc-list-empty { color: var(--label); font-size: var(--fs-sm, 12.5px); padding: 6px 10px; margin: 0; }
.lc-list-more { display: block; width: 100%; margin: 6px 0; padding: 8px; border: 0; border-radius: var(--r-control, 8px); background: none; color: var(--accent); font-size: 13px; cursor: pointer; }
.lc-list-more:hover { background: var(--hover); }

/* ------------------------------------------------------------ app logos (also in applook.css) */
.lc-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 22px; height: 22px; border-radius: 6px; color: #fff; font: 700 11px var(--font); background: #444; }
.lc-logo svg { width: 13px; height: 13px; }
.lc-logo-google_drive { background: #1e8e3e; } .lc-logo-gmail { background: #d93025; } .lc-logo-google_calendar { background: #1a73e8; }
.lc-logo-outlook, .lc-logo-outlook_calendar { background: #0f6cbd; } .lc-logo-onedrive { background: #0364b8; }
.lc-logo-word { background: #185abd; } .lc-logo-powerpoint { background: #c43e1c; } .lc-logo-excel { background: #107c41; }
.lc-logo-web { background: var(--overlay-5); color: var(--text-soft); }
.lc-logo-weather { background: #2f80ed; }
.lc-using .lc-logo { width: 18px; height: 18px; border-radius: 5px; }
.lc-using .lc-logo svg { width: 11px; height: 11px; }

/* ------------------------------------------------------------ narrow */
@media (max-width: 640px) {
  .lc-thread { padding-top: 18px; }
}
/* A compact composer: its content box is under 480 px (docs/design-system.md
   §6.3, Appendix A). A container can't restyle itself, so the sizes are set
   on its input and row. */
@container lc-composer (max-width: 599px) {
  .lc-chip-model { --lbl-max: 140px; }
}
@container lc-composer (max-width: 479px) {
  .lc-input, .lc-composer-row { --cmp-ctl: 28px; --cmp-send: 32px; --cmp-gap: 4px; --cmp-font: 14px; --cmp-chip-font: 12px; --cmp-icon: 15px; --cmp-ring: 18px; }
  .lc-input { padding: 4px 0; max-height: 180px; }
  .lc-composer-row { margin-top: 4px; }
  .lc-chip { gap: 4px; padding: 0 8px 0 9px; }
  .lc-chip-model { --lbl-max: 96px; }
  .lc-send.lc-stop svg { width: 9px; height: 9px; }
}

/* Model makers' marks (makers.js): monochrome, currentColor, so they follow light and dark. */
.lc-maker-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 16px; height: 16px; color: var(--muted); }
.lc-maker-logo svg { width: 14px; height: 14px; display: block; }
.lc-maker-letter { border-radius: 4px; border: 1px solid var(--line-strong); font: 600 9.5px var(--font); line-height: 1; }
.lc-group-label { display: flex; align-items: center; gap: 6px; }
.lc-group-label .lc-maker-logo { width: 13px; height: 13px; color: var(--label); }
.lc-group-label .lc-maker-logo svg { width: 12px; height: 12px; }
.lc-chip-model .lc-maker-logo { color: var(--text); }
.lc-chip-model .lc-maker-logo { margin-right: 2px; }

/* A video Chat started: progress, then the player (core.js videoCard). */
.lc-made-video { margin: 0; display: flex; flex-direction: column; gap: 6px; max-width: min(100%, 480px); }
.lc-made-video video { display: block; width: 100%; max-height: 70vh; border-radius: 14px; border: 1px solid var(--line); background: #000; }
.lc-made-video figcaption { display: flex; gap: 8px; }
.lc-video-wait { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(100%, 360px); min-height: 180px; padding: 12px; text-align: center; border-radius: 14px; border: 1px dashed var(--line-strong); color: var(--muted); font-size: 13px; background: var(--overlay-2); }
/* a video being made: the dots at the video's shape (--ar on the card, set by core.js); the card
   sets the width, since the dots alone have none */
.lc-made-video[data-status="running"] { width: min(100%, 480px, calc(60vh * var(--ar, 1.7778))); }
.lc-made-video[data-status="running"] .lc-video-wait { position: relative; display: block; width: 100%; min-height: 0; padding: 0; aspect-ratio: var(--ar, 1.7778); border: 1px solid var(--line); overflow: hidden; }

/* Something being made (dots.js): faint dots, two warm glows drifting over them, and how far along it is.
   The field's color is the faint dots', the canvas's the glows' heart (dots.js reads them). */
.lc-dots { position: absolute; inset: 0; overflow: hidden; container-type: size; background: light-dark(#f4f1ef, #050505); color: light-dark(rgb(226 204 198), rgb(78 35 30)); }
.lc-dots-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; color: light-dark(rgb(232 104 74), rgb(255 146 116)); }
.lc-dots-pct {
  position: absolute; right: max(8px, 5cqmin); bottom: max(8px, 5cqmin); padding: .5em .85em; border-radius: 999px;
  background: rgb(36 36 38 / .92); color: #fff; font: 600 clamp(11px, 5.5cqmin, 18px)/1 var(--font); font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 6px 18px rgb(0 0 0 / .35);
}
@container (max-width: 96px) { .lc-dots-pct { display: none; } }
/* Settings › General (browser-settings.js): the text size of messages and the box you type in, and less motion. */
html[data-text-size="small"] { --fs-read: 14px; }
html[data-text-size="large"] { --fs-read: 17px; }
html[data-text-size="small"] :is(.lc-input, .lc-composer-row) { --cmp-font: 14px; }
html[data-text-size="large"] :is(.lc-input, .lc-composer-row) { --cmp-font: 17px; }
html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important;
}
/* for screen readers only */
.lc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The rules (18+), inline in a reply. */
.lc-terms { align-items: flex-start; }
.lc-terms-text p { margin: 6px 0 0; }
.lc-terms-text a { color: inherit; text-decoration: underline; }
.lc-terms-acts { margin-top: 10px; }

/* ------------------------------------------------------------ chat without an account (docs/guest-chat-contract.md §7)
   The sign-up box (§7.3): a card docked right above the composer, in its wrap
   (in the flow, so the thread above stays readable), not a modal. The mark,
   the title 17/600, one line 14px, the buttons, a 26 px close at the top right;
   under 520 px the buttons stack full width. */
.lc-wall {
  position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start;
  width: 100%; max-width: var(--lc-measure, var(--measure, 780px)); margin: 0 auto 10px; padding: 20px 44px 18px 20px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pop, 16px); background: var(--card); box-shadow: var(--shadow-md);
  color: var(--text); animation: lc-pop-in var(--dur-3) var(--ease-out); transform-origin: 50% 100%;
}
.lc-wall-mark { display: grid; place-items: center; width: 28px; height: 28px; color: var(--text); }
.lc-wall-mark svg { display: block; width: 28px; height: 28px; }
.lc-wall-body { min-width: 0; }
.lc-wall-title { margin: 3px 0 4px; font: 600 17px/1.3 var(--font); color: var(--text); letter-spacing: -.005em; }
.lc-wall-line { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--dim); }
.lc-wall-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.lc-wall-google .lc-icon svg { width: 16px; height: 16px; }
.lc-wall-alt { margin: 12px 0 0; font-size: 13px; color: var(--dim); }
.lc-wall-alt .lc-link { font-size: 13px; font-weight: 600; }
.lc-wall-close { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; color: var(--label); }
.lc-wall-close svg { width: 13px; height: 13px; }
.lc-wall :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (max-width: 520px) {
  .lc-wall { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 16px 16px 14px; }
  .lc-wall-title { margin-right: 28px; }
  .lc-wall-actions { flex-direction: column; }
  .lc-wall-actions .lc-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .lc-wall { animation: none; } }
/* "Sign up to use" on a control that needs an account (a neutral badge, DS §6.1), at the row's end. */
.lc-signup-badge { flex: none; margin-left: auto; white-space: nowrap; }
.lc-menu-row .lc-signup-badge + .lc-check { margin-left: 8px; }
.lc-slash-option .lc-signup-badge { margin-left: 8px; align-self: center; }
/* The fine print under the composer: 12px --label, centered, links in the accent. */
.lc-fine { max-width: var(--lc-measure, var(--measure, 780px)); margin: 8px auto 0; text-align: center; font-size: 12px; line-height: 1.45; color: var(--label); }
.lc-fine a { color: var(--accent); text-decoration: none; }
.lc-fine a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Cloudflare Turnstile's box: empty (nothing shown) unless Cloudflare needs a
   click, with a short line (13px --dim) above it while it does. */
.lc-turnstile { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.lc-turnstile:has(.lc-turnstile-box:not(:empty)), .lc-turnstile:has(.lc-turnstile-line:not([hidden])) { margin: 0 auto 10px; }
.lc-turnstile-box:empty { display: none; }
.lc-turnstile-line { margin: 0; font-size: 13px; line-height: 1.4; color: var(--dim); text-align: center; }
.lc-turnstile-line[hidden] { display: none; }

/* ------------------------------------------------------------ touch (phones and tablets)
   Last in the file: after the compact composer and Settings' text sizes, which these follow.
   iPhone Safari zooms the whole page into a text box under 16 px when it's focused, so the first tap in
   "Message Lumio" shifted the chat (the design review of 2026-10-26): every box is 16 px on a touch screen
   ("Large" text keeps its 17 px: its rule is more specific). The viewport still allows pinch zoom. */
@media (pointer: coarse) {
  html :is(.lc-input, .lc-composer-row), html[data-text-size="small"] :is(.lc-input, .lc-composer-row) { --cmp-font: 16px; }
  .lc-model-search, .lc-list-search, .lc-rename { font-size: 16px; }
  /* 40 px targets: the composer's +, model, usage, mic, voice and Send (all sized by --cmp-ctl and --cmp-send:
     usage-circle.css, dictation.css, voice-mode.css), Copy, Edit and Regenerate under a message, and the closes
     of the banner and the toasts. A compact composer packs them 2 px apart and gives the model's name more room
     (its chip still shrinks, with an ellipsis, when the row is full). */
  .lc-input, .lc-composer-row { --cmp-ctl: 40px; --cmp-send: 40px; }
  @container lc-composer (max-width: 479px) {
    .lc-input, .lc-composer-row { --cmp-gap: 2px; }
    .lc-chip-model { --lbl-max: 130px; }
  }
  .lc-flow-chip { height: 32px; }
  .lc-flow-chip-x { width: 32px; height: 32px; margin-right: -4px; }
  .lc-msg-actions { gap: 4px; }
  .lc-msg-actions .lc-icon-btn, .lc-banner .lc-icon-btn, .lc-toast .lc-icon-btn { width: 40px; height: 40px; }
  .lc-regen .lc-regen-more { width: 32px; }
  /* the banner's Use {model}: 36 px, like the Chat | Work tabs (28 px was too small for a finger) */
  .lc-banner .lc-btn { min-height: 36px; }
}