/* The SCF Copilot dock.

   Paper ground, a 1px rule down its left edge, no shadow in light mode. The thread is a ledger: every
   exchange is a ruled row, not a bubble. The question is a quiet right aligned line above the rule, the
   answer sits under the rule with its eyebrow and time, and the only large type in the whole panel is the
   answer line, `.cp-lead`, which is the three second read. Powder blue appears on exactly two things, the
   Run button and the active tab. Everything else is ink, muted and rule.

   Every colour is a token from tokens.css, so dark mode is already answered and nothing here is defined
   only inside a media query. Only transform and opacity animate. Curves are --ease and --spring. */

/* The one value that differs by theme is a shadow, not a colour, and it is still declared on bare :root
   first: none in light, where the rule on the edge is enough, and the drawer's shadow in dark, where a
   1px rule on a dark ground disappears against the calendar. */
:root { --cp-shadow: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --cp-shadow: var(--shadow-drawer); }
}
:root[data-theme="dark"] { --cp-shadow: var(--shadow-drawer); }

/* ========================================================================
   1. The fab: an ink pill with a word and a count, not a glowing circle
   ======================================================================== */

.cp-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 44;
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 16px 0 14px; border-radius: 999px;
  background: var(--ink); color: var(--linen);
  font: 700 13.5px/1 var(--f-display); letter-spacing: .01em; white-space: nowrap;
  transition: transform 140ms var(--spring), opacity 140ms var(--ease);
}
.cp-fab-ic { width: 17px; height: 17px; }
.cp-fab-count {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; margin-right: -4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--linen) 16%, transparent);
  font: 700 11.5px/1 var(--f-ui); letter-spacing: .02em;
}
.cp-fab:active { transform: scale(.96); }
.cp-fab:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .cp-fab:hover { background: var(--ink-2); transform: translateY(-1px); }
}

/* ========================================================================
   2. The dock frame and its motion
   ======================================================================== */

.cp-dock {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 45;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border-left: 1px solid var(--rule-2);
  box-shadow: var(--cp-shadow);
  outline: none;
  transform: translateX(100%);
  transition: transform 220ms var(--ease);
}
.cp-dock.is-open { transform: none; }
/* Opened from the keyboard: it is simply there, the way a keyboard user expects a panel to be. */
.cp-dock.is-instant { transition: none; }
/* Full width at phone size; the edge rule has nothing to sit against so it goes. */
@media (max-width: 479.98px) {
  .cp-dock { border-left: 0; }
}

/* ========================================================================
   3. The head: eyebrow, the model, the count, and the two buttons
   ======================================================================== */

.cp-head {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 16px 14px 22px;
  border-bottom: 1px solid var(--rule);
}
.cp-head-id { min-width: 0; }
.cp-eyebrow {
  margin: 0 0 6px;
  font: 700 11px/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.cp-title {
  margin: 0;
  font: 700 18px/1.15 var(--f-display); letter-spacing: -.012em; color: var(--ink);
  overflow-wrap: anywhere;
}
.cp-brain-count {
  margin: 4px 0 0;
  font: 500 12.5px/1.3 var(--f-ui); color: var(--muted);
}
.cp-brain-count:empty { display: none; }
.cp-head-right { flex: none; display: flex; align-items: center; gap: 2px; margin-top: -4px; }
.cp-new span { font-size: 12.5px; }

/* The thinking mark: a dot on a 1.6 second pulse and the word beside it. There is no spinner in this app. */
.cp-pulse {
  display: inline-flex; align-items: center; gap: 7px; margin-right: 8px;
  font: 500 12px/1 var(--f-ui); color: var(--muted); white-space: nowrap;
}
.cp-pulse i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-strong);
  animation: cp-pulse 1.6s var(--ease) infinite;
}
@keyframes cp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ========================================================================
   4. The tabs: the second of the two accent marks
   ======================================================================== */

.cp-tabs.seg { flex: none; margin: 12px 22px 0; align-self: flex-start; }
.cp-tabs.seg > button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-ink); box-shadow: none;
}
.cp-tabs.seg > button[aria-pressed="true"] .ic { color: var(--accent-ink); }

/* ========================================================================
   5. Chat: chips, the ledger, the composer
   ======================================================================== */

.cp-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.cp-chips {
  flex: none;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 22px 4px;
}
.cp-chips:empty { display: none; }
.cp-chip {
  display: inline-flex; align-items: center;
  min-height: 28px; padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink-2);
  font: 500 12.5px/1.25 var(--f-ui); text-align: left;
  transition: transform 120ms var(--ease);
  animation: cp-in 220ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.cp-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .cp-chip:hover { border-color: var(--ink); color: var(--ink); }
}

.cp-thread {
  flex: 1; min-height: 0;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  padding: 6px 22px 12px;
  scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent;
}

/* Rows enter one after another, 30ms apart, capped in the script so a long thread lands inside 400ms.
   Rows drawn on an earlier render carry .is-still and do not move again. */
.cp-row {
  padding: 14px 0 16px;
  animation: cp-in 220ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.cp-row.is-still { animation: none; }
@keyframes cp-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* The question: quiet, right aligned, no rule of its own, because it belongs to the row under it. */
.cp-row-user { padding: 18px 0 6px; }
.cp-user-text {
  margin: 0; margin-left: 15%;
  text-align: right;
  font: 500 13.5px/1.45 var(--f-ui); color: var(--ink-2);
  overflow-wrap: anywhere; white-space: pre-wrap;
}

/* The answer, and every other thing the copilot says: a ruled entry with an eyebrow and a time. */
.cp-row-assistant, .cp-row-note, .cp-row-error, .cp-row-hello, .cp-row-pending {
  border-top: 1px solid var(--rule-2);
}
.cp-row-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.cp-row-eyebrow {
  font: 700 10.5px/1.2 var(--f-display); letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.cp-row-time { font: 400 11.5px/1.2 var(--f-ui); color: var(--ghost); }
.cp-row-thinking { animation: cp-pulse 1.6s var(--ease) infinite; }

/* The rendered answer. Four roles: the lead, a paragraph, a list item, and the Next line, each set
   differently in at least two of font, size, weight and colour. */
.cp-md { font: 400 13.5px/1.5 var(--f-ui); color: var(--ink-2); overflow-wrap: anywhere; }
.cp-md p { margin: 0 0 8px; }
.cp-md p:last-child, .cp-md ul:last-child, .cp-md ol:last-child, .cp-md pre:last-child { margin-bottom: 0; }
.cp-md strong { font-weight: 700; color: var(--ink); }
.cp-md .cp-lead {
  margin: 0 0 10px;
  font: 700 17px/1.25 var(--f-display); letter-spacing: -.012em; color: var(--ink);
}
.cp-md .cp-lead strong { font-weight: inherit; }
.cp-md ul, .cp-md ol { margin: 0 0 10px; padding-left: 18px; }
.cp-md li { margin: 0 0 4px; padding-left: 2px; }
.cp-md li::marker { color: var(--ghost); }
.cp-md .cp-next {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule);
  font-weight: 500; color: var(--ink);
}
.cp-code {
  margin: 0 0 10px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--linen-2); border: 1px solid var(--rule);
  font: 400 12.5px/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* What it did: a short list under the answer. */
.cp-acts {
  list-style: none; margin: 10px 0 0; padding: 8px 0 0;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px;
}
.cp-acts li { display: flex; align-items: flex-start; gap: 7px; font: 500 12.5px/1.4 var(--f-ui); color: var(--ink-2); }
.cp-act-ic { width: 13px; height: 13px; margin-top: 3px; color: var(--good); }

/* What the brain kept, in the same column as the answer it came from. */
.cp-learned {
  display: flex; align-items: flex-start; gap: 7px;
  margin: 8px 0 0; font: 400 12.5px/1.4 var(--f-ui); color: var(--muted);
}
.cp-learned b { font-weight: 700; color: var(--ink-2); }
.cp-learned-ic { width: 14px; height: 14px; margin-top: 2px; color: var(--accent-strong); }

.cp-note-text { margin: 0; font: 400 13.5px/1.5 var(--f-ui); color: var(--ink-2); }
.cp-row-error .cp-note-text { color: var(--bad); }
.cp-hello { margin: 0 0 8px; font: 400 13.5px/1.55 var(--f-ui); color: var(--ink-2); max-width: 46ch; }
.cp-hello-next { margin: 0; font: 400 12.5px/1.5 var(--f-ui); color: var(--muted); }
.cp-hello-next + .cp-note-text { margin-top: 10px; color: var(--warn); }

/* A pending answer is a skeleton in the shape of an answer: a lead line and two lines of copy. */
.cp-skel-lead { height: 17px; width: 62%; margin-bottom: 10px; }
.cp-skel-line { height: 12px; width: 92%; margin-bottom: 7px; }
.cp-skel-line.is-short { width: 48%; }
.cp-row-pending .skel { animation: cp-pulse 1.6s var(--ease) infinite; }

/* The composer. The Run button is the first of the two accent marks. */
.cp-bar {
  flex: none;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 12px 16px 14px 22px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.cp-input {
  flex: 1; min-width: 0;
  min-height: 40px; max-height: 168px; padding: 10px 12px;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  font: 400 14px/1.45 var(--f-ui);
  resize: none; overflow-y: hidden;
  -webkit-appearance: none; appearance: none;
}
.cp-input::placeholder { color: var(--ghost); }
.cp-input:focus { outline: none; border-color: var(--ink); }
.cp-input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.cp-mic {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); color: var(--ink-2);
  transition: transform 120ms var(--ease);
}
.cp-mic .ic { width: 18px; height: 18px; }
.cp-mic:active { transform: scale(.96); }
.cp-mic.is-listening { border-color: var(--bad); color: var(--bad); }
.cp-mic.is-listening .ic { animation: cp-pulse 1.6s var(--ease) infinite; }
.cp-send {
  flex: none; height: 40px; padding: 0 16px; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-ink);
  font: 700 13.5px/1 var(--f-display); letter-spacing: .01em;
  transition: transform 120ms var(--ease);
}
.cp-send:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .cp-input:hover { border-color: var(--rule-2); }
  .cp-mic:hover { border-color: var(--ink); color: var(--ink); }
  .cp-send:hover { background: var(--accent-deep); }
}

/* ========================================================================
   6. Brain: search, kinds, the entries ledger, the add form, the foot
   ======================================================================== */

.cp-brain { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.cp-brain-tools { flex: none; padding: 12px 22px 8px; display: flex; flex-direction: column; gap: 8px; }
.cp-search { position: relative; display: block; }
.cp-search-ic { position: absolute; left: 10px; top: 9px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.cp-brain-q { padding-left: 32px; }
/* Nine kinds will not fit one row of the measure, so the seg wraps to two rows rather than hiding a kind
   behind a scroll nobody can see. */
.cp-kinds.seg { max-width: 100%; flex-wrap: wrap; }
.cp-kinds.seg > button { height: 26px; padding: 0 10px; font-size: 12px; text-transform: capitalize; }

.cp-entries {
  flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0 22px 8px;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent;
}
.cp-entry {
  padding: 12px 0 12px;
  border-top: 1px solid var(--rule);
  animation: cp-in 220ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.cp-entry:first-child { border-top: 0; }
.cp-entry.is-pinned { border-top-color: var(--rule-2); }
.cp-entry-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.cp-kind {
  display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px;
  background: var(--linen-2); color: var(--ink-2);
  font: 700 10px/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase;
}
.cp-entry-meta { font: 400 11.5px/1.2 var(--f-ui); color: var(--muted); }
.cp-pin-ic { width: 12px; height: 12px; margin-right: 4px; }
.cp-entry-body { margin: 0; font: 400 13.5px/1.5 var(--f-ui); color: var(--ink); overflow-wrap: anywhere; }
.cp-entry.is-pinned .cp-entry-body { font-weight: 500; }
.cp-entry-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.cp-entry-tags span { font: 500 11px/1.2 var(--f-ui); color: var(--muted); padding: 2px 6px; border: 1px solid var(--rule); border-radius: 999px; }
.cp-entry-actions { display: flex; gap: 4px; margin: 6px 0 0 -6px; }
.cp-entry-btn {
  display: inline-flex; align-items: center;
  height: 26px; padding: 0 6px; border-radius: var(--r-sm);
  font: 500 12px/1 var(--f-ui); color: var(--muted);
  transition: transform 120ms var(--ease);
}
.cp-entry-btn:active { transform: scale(.97); }
.cp-pin[aria-pressed="true"] { color: var(--ink); }
.cp-retire-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; padding: 10px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--linen); }
.cp-retire-actions { display: flex; gap: 6px; justify-content: flex-end; }
.cp-entry.is-skeleton { display: flex; flex-direction: column; gap: 7px; animation: none; }
.cp-entry.is-skeleton .skel { height: 12px; width: 88%; }
.cp-entry.is-skeleton .skel:last-child { width: 56%; }
.cp-brain-msg { padding: 14px 0; font: 400 13.5px/1.5 var(--f-ui); color: var(--muted); }
.cp-brain-msg.is-bad { color: var(--bad); }
.cp-brain-loading { animation: cp-pulse 1.6s var(--ease) infinite; padding-bottom: 4px; }

.cp-add { flex: none; padding: 10px 22px 12px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 8px; }
/* One line at rest so the entries above keep their room; it grows with what is typed, to a cap. */
textarea.input.cp-add-body { min-height: 40px; max-height: 120px; padding: 9px 10px; font-size: 13.5px; line-height: 1.4; resize: vertical; field-sizing: content; }
.cp-add-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 8px; align-items: center; }

.cp-brain-foot {
  flex: none; padding: 10px 22px 14px; border-top: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.cp-brain-actions { display: flex; gap: 6px; }
.cp-counts { margin: 0; font: 400 12px/1.4 var(--f-ui); color: var(--muted); }
.cp-counts:empty { display: none; }

@media (hover: hover) and (pointer: fine) {
  .cp-entry-btn:hover { background: var(--linen-2); color: var(--ink); }
  .cp-retire:hover { color: var(--bad); }
}

/* ========================================================================
   7. Narrow screens
   ======================================================================== */

@media (max-width: 479.98px) {
  .cp-head { padding: 16px 12px 12px 16px; }
  .cp-tabs.seg { margin-left: 16px; }
  .cp-chips, .cp-thread, .cp-brain-tools, .cp-entries, .cp-add, .cp-brain-foot { padding-left: 16px; padding-right: 16px; }
  .cp-bar { padding: 10px 12px 12px 16px; }
  .cp-fab { right: 16px; bottom: 16px; }
  .cp-user-text { margin-left: 8%; }
  .cp-add-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cp-add-row .cp-add-btn { grid-column: 1 / -1; }
}

/* ========================================================================
   8. Reduced motion: opacity only, and only where it says something
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
  .cp-dock { transform: none; opacity: 0; transition: opacity 150ms var(--ease); }
  .cp-dock.is-open { opacity: 1; }
  .cp-dock.is-instant { transition: none; }
  .cp-fab, .cp-fab:active, .cp-chip:active, .cp-mic:active, .cp-send:active, .cp-entry-btn:active { transform: none; transition: none; }
  .cp-row, .cp-chip, .cp-entry { animation: cp-fade 150ms var(--ease) both; }
  .cp-row.is-still { animation: none; }
  @keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
  .cp-pulse i, .cp-row-thinking, .cp-mic.is-listening .ic, .cp-row-pending .skel, .cp-brain-loading { animation: none; opacity: .7; }
}

/* wave 6, vibe */

/* The dock is a sheet laid on the sheet: no edge rule, the drawer shadow in both themes, a rounded left
   edge. Only at 480px and up, where it does not fill the viewport. */
@media (min-width: 480px) {
  .cp-dock {
    border-left: 0;
    box-shadow: var(--shadow-drawer);
    border-radius: var(--r-lg) 0 0 var(--r-lg);
    overflow: hidden;
  }
}

/* Kill 4: the count on the pill read as a notification nobody sent. */
.cp-fab-count { display: none; }

/* The fab is an ink plate: the inset top highlight and the card shadow. */
.cp-fab {
  padding: 0 18px 0 14px;
  box-shadow: var(--shadow-card), inset 0 1px 0 var(--band-hi);
}

/* Eyebrows on the app ladder: Satoshi 700, 10.5px, .22em. */
.cp-eyebrow, .cp-row-eyebrow {
  font: 700 10.5px/1.2 var(--f-ui);
  letter-spacing: .22em;
}

/* The two accent plates take the highlight. */
.cp-send, .cp-tabs.seg > button[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 var(--band-hi);
}

/* The lead steps up one size. */
.cp-md .cp-lead { font-size: 18px; }

/* wave 7 */

/* The thinking mark: the light running round a pill, 18px, in place of the dot while it draws.
   The dot stays in the markup as the stand in for reduced motion and for a canvas that could not mount. */
.cp-pulse.has-tui > i { display: none; }
.cp-pulse .tui-thinking { display: block; flex: none; width: 18px; height: 18px; }

/* The brain field: the topology sits behind the ledger, the ledger above it. The tools, the list, the add
   form and the foot all lift to z 1; the form and the foot take the paper so the field lives under the
   search and the entries only, and the composer reads as the plate the sphere hangs above. */
.cp-brain { position: relative; }
.cp-topo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cp-topo canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cp-topo.is-flat { display: none; }
.cp-brain-tools, .cp-entries, .cp-add, .cp-brain-foot { position: relative; z-index: 1; }
.cp-add, .cp-brain-foot { background: var(--paper); }