:root {
  --bg: #f2f5f6;
  --surface: #ffffff;
  --sunk: #f6f8f9;
  --ink: #14202a;
  --muted: #5d6c77;
  --faint: #8a98a2;
  --line: #dbe2e6;
  --accent: #0b6e83;
  --accent-ink: #ffffff;
  --accent-soft: #e1f0f3;
  --scheduled: #fbf3dc;
  --ok: #2e7d4f;
  --warn: #9a5700;
  --warn-soft: #fcf0de;
  --bad: #b42318;
  --doc: #2f5fb8;
  --radius: 14px;
  --display: "Bricolage Grotesque", "IBM Plex Sans", system-ui, sans-serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--sans);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1317;
    --surface: #131c22;
    --sunk: #0f171c;
    --ink: #e5ecf0;
    --muted: #94a3ad;
    --faint: #6b7a84;
    --line: #24323b;
    --accent: #4fb6cb;
    --accent-ink: #06171c;
    --accent-soft: #12323b;
    --scheduled: #2e2812;
    --ok: #5cc28a;
    --warn: #e5a54a;
    --warn-soft: #33270f;
    --bad: #f07167;
    --doc: #8fb0ee;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

[hidden] {
  display: none !important;
}

/* For screen readers only. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

button {
  font: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 9px;
  padding: 5px 12px;
  cursor: pointer;
}

button:hover {
  border-color: var(--faint);
}

button.primary,
button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Sign in */

#login {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 16px;
}

#login-form {
  display: grid;
  gap: 10px;
  width: min(360px, 100%);
}

#login-form h1 {
  font-family: var(--display);
  font-weight: 600;
  margin: 0 0 8px;
}

#login-form input {
  font: inherit;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.error {
  color: var(--bad);
  margin: 0;
}

/* App shell: the sidebar, and a column with the page */

#app {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  height: 100%;
  height: 100dvh;
}

.main-col {
  display: grid;
  /* One column, never wider than its space: wide content scrolls inside its own box. */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto;
  min-width: 0;
  min-height: 0;
}

/* Fixed rows, so the hidden confirmation bar does not shift the others. */
.main-col > .topbar {
  grid-row: 1;
}

.main-col > .confirm {
  grid-row: 2;
}

.main-col > main {
  grid-row: 3;
}

.main-col > footer {
  grid-row: 4;
}

/* The Memory page takes the transcript's place, and the composer's. */
.main-col > .memory {
  grid-row: 3 / span 2;
  overflow-y: auto;
  padding: 18px 16px calc(32px + env(safe-area-inset-bottom));
}

/* So does the Files page. Files dropped on it upload; the hint covers it while they are dragged. */
.main-col > .files,
.main-col > .files-drop {
  grid-row: 3 / span 2;
  grid-column: 1;
}

.main-col > .files {
  overflow-y: auto;
  padding: 18px 16px calc(32px + env(safe-area-inset-bottom));
}

/* So does the Coding agents panel, with its own reply box at the bottom. */
.main-col > .code {
  grid-row: 3 / span 2;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* The sidebar */

.sidebar,
.topbar {
  --icon: 18px;
}

.sidebar svg,
.topbar svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sidebar {
  display: flex;
  flex-direction: column;
  width: 236px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(12px + env(safe-area-inset-top)) 10px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-right: 1px solid var(--line);
  transition: width 0.18s ease, padding 0.18s ease;
}

.side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-left: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand svg {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.brand h1,
.brand-name {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.2;
}

.side-toggle {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--muted);
}

.side-toggle:hover {
  background: var(--sunk);
  color: var(--ink);
}

.side-toggle > span {
  display: grid;
}

.side-toggle svg {
  width: 20px;
  height: 20px;
}

.side-toggle .when-narrow {
  display: none;
}

/* What Argus is doing, under its name. */
.side-status {
  display: flex;
  min-height: 20px;
  margin: 0 0 14px;
  padding-left: 38px;
}

.side-nav,
.side-group,
.side-foot {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.side-group {
  margin-top: 18px;
}

.side-foot {
  margin-top: auto;
  padding-top: 18px;
}

.side-label {
  margin: 0 0 4px;
  padding: 0 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--ink);
  font-size: 14px;
  text-align: left;
  white-space: nowrap;
}

.side-item svg {
  flex: none;
  width: var(--icon);
  height: var(--icon);
  color: var(--muted);
}

.side-item:hover {
  background: var(--sunk);
}

.side-item[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.side-item[aria-current="page"] svg {
  color: var(--accent);
}

/* The notifications switch: the bell in the accent color when on, warned when blocked. */
#notify[data-state="on"] svg {
  color: var(--accent);
}

#notify[data-state="blocked"] {
  color: var(--warn);
}

.side-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* How many coding agents are working. */
.side-item {
  position: relative;
}

.side-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* On a phone, the menu button says when agents are working. */
.side-toggle {
  position: relative;
}

#menu.busy::after {
  content: "";
  position: absolute;
  top: 7px;
  right: 6px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--surface);
}

.scrim {
  display: none;
}

/* A top bar with the menu button stands in for the sidebar on phones. */
.topbar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: calc(6px + env(safe-area-inset-top)) 14px 6px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.topbar .brand svg {
  width: 20px;
  height: 20px;
}

.topbar .brand-name {
  font-size: 18px;
}

.topbar .status {
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Wide screens: the sidebar folds to a rail of icons. */
@media (min-width: 760px) {
  /* The sidebar's Chat does what a page's "Back to chat" would. */
  [data-page-close] {
    display: none;
  }

  #app.rail .sidebar {
    width: 60px;
    padding-left: 8px;
    padding-right: 8px;
  }

  #app.rail .side-head {
    flex-direction: column;
    gap: 6px;
    padding-left: 0;
  }

  /* Text stays for screen readers and in each button's tooltip. */
  #app.rail .brand h1,
  #app.rail .side-text,
  #app.rail .side-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Only a spinner shows while Argus works. */
  #app.rail .side-status {
    justify-content: center;
    padding-left: 0;
    font-size: 0;
  }

  #app.rail .side-item {
    justify-content: center;
    padding: 0;
  }

  /* Folded, the count sits on the icon's corner. */
  #app.rail .side-count {
    position: absolute;
    top: 0;
    right: 1px;
    min-width: 16px;
    height: 16px;
    margin: 0;
    padding: 0 4px;
    font-size: 10px;
    box-shadow: 0 0 0 2px var(--surface);
  }

  #app.rail .side-group {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
}

/* Phones: the sidebar is a drawer over the page. */
@media (max-width: 759px) {
  #app {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Hidden (and out of the tab order) once it has slid away; shown at once when it opens. */
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: min(300px, 86vw);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform 0.2s ease, visibility 0s linear 0.2s;
    border-right: 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.22);
  }

  #app.drawer .sidebar {
    visibility: visible;
    transform: none;
    transition: transform 0.2s ease, visibility 0s;
  }

  /* Taps, not clicks. */
  .side-item {
    min-height: 44px;
  }

  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 29;
    background: rgba(8, 16, 20, 0.42);
  }

  .topbar {
    display: flex;
  }

  .side-toggle .when-wide {
    display: none;
  }

  .side-toggle .when-narrow {
    display: grid;
  }
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Not connected: a dot that still shows when the sidebar is folded. */
.status-off {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
}

.confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--sunk);
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.confirm p {
  margin: 0;
}

.confirm div {
  display: flex;
  gap: 8px;
}

#log {
  overflow-y: auto;
  padding: 18px 16px 24px;
}

#messages {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

footer {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

#composer {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

#input {
  flex: 1;
  min-width: 0;
  font: inherit;
  resize: none;
  max-height: 40vh;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunk);
  color: var(--ink);
}

#send {
  border-radius: 11px;
  padding: 9px 16px;
  font-weight: 600;
  min-width: 72px;
}

#send:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* Files to send with the next message */

.attach {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: calc(1.5em + 20px);
  padding: 0;
  border-radius: 11px;
  color: var(--muted);
}

.attach:hover {
  color: var(--ink);
}

.attach svg,
.files-tools svg,
.file-chip svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.attach svg {
  width: 20px;
  height: 20px;
}

/* The location pin: an outline when off, filled while sending, fading in
   and out while finding the location, struck through when it cannot. */
.locate .pin-slash {
  display: none;
}

.locate[data-state="ready"],
.locate[data-state="idle"],
.locate[data-state="locating"] {
  color: var(--accent);
}

.locate[data-state="ready"] .pin {
  fill: var(--accent-soft);
}

.locate[data-state="ready"] .pin-dot {
  fill: currentColor;
}

.locate[data-state="locating"] svg {
  animation: locating 1.2s ease-in-out infinite;
}

@keyframes locating {
  50% {
    opacity: 0.35;
  }
}

.locate[data-state="denied"],
.locate[data-state="unavailable"] {
  color: var(--warn);
}

.locate[data-state="denied"] .pin-slash,
.locate[data-state="unavailable"] .pin-slash {
  display: inline;
}

footer.dropping #input {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.attachments {
  max-width: 760px;
  margin: 0 auto 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 32px;
  padding: 3px 3px 3px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunk);
  font-size: 13px;
}

.attach-chip[data-state="failed"] {
  border-color: var(--bad);
}

.attach-name {
  min-width: 0;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-chip progress {
  width: 56px;
}

.attach-error {
  color: var(--bad);
  font-size: 12px;
}

.attach-chip button {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font-size: 17px;
  line-height: 1;
}

.attach-chip button:hover {
  background: var(--line);
  color: var(--ink);
}

progress {
  appearance: none;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

progress::-webkit-progress-bar {
  background: var(--line);
}

progress::-webkit-progress-value {
  background: var(--accent);
}

progress::-moz-progress-bar {
  background: var(--accent);
}

#send.stop {
  background: var(--sunk);
  border-color: var(--line);
  color: var(--ink);
}

.banner {
  max-width: 760px;
  margin: 0 auto 8px;
  font-size: 13px;
  color: var(--bad);
}

.banner.ok {
  color: var(--ok);
}

/* Messages */

.user {
  align-self: flex-end;
  max-width: 85%;
  background: var(--accent-soft);
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Files sent with a message */
.user-files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  white-space: normal;
}

.user-files.after {
  margin-top: 6px;
}

.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: 9px;
  font-size: 13px;
}

.file-chip svg,
.place-chip svg {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--accent);
}

.file-chip span,
.place-chip span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Where the owner was when they sent a message */
.place-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 2px 2px;
  color: var(--muted);
  font-size: 12px;
}

.place-chip svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.user.scheduled {
  align-self: stretch;
  max-width: none;
  background: var(--scheduled);
  border-radius: 12px;
}

.user.report {
  align-self: stretch;
  max-width: none;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 12px;
  white-space: normal;
}

.report-headline {
  font-weight: 500;
}

.report-line {
  font-size: 13.5px;
  color: var(--muted);
}

.report-line a {
  color: var(--accent);
}

.report-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.report-toggle {
  border: 0;
  background: none;
  padding: 0;
  margin-top: 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}

.report-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.briefing .report-summary + .report-line {
  margin-top: 8px;
}

.user .tag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: normal;
}

.user.queued {
  background: transparent;
  border: 1.5px dashed var(--line);
  color: var(--muted);
}

.queued-note {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--faint);
  margin-bottom: 2px;
  white-space: normal;
}

.queued-actions {
  display: flex;
  gap: 4px;
}

.queued-actions button {
  border: 0;
  background: none;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
}

.notice {
  align-self: center;
  font-size: 11.5px;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.turn {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.answer {
  line-height: 1.55;
  overflow-wrap: anywhere;
  min-width: 0;
}

.answer > :first-child {
  margin-top: 0;
}

.answer > :last-child {
  margin-bottom: 0;
}

.answer pre {
  overflow-x: auto;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px;
}

.answer code {
  font-family: var(--mono);
  font-size: 0.88em;
}

.answer :not(pre) > code {
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 4px;
}

.answer a {
  color: var(--accent);
}

.answer ol,
.answer ul {
  padding-left: 22px;
}

.turn-error {
  margin: 0;
  font-size: 13px;
  color: var(--bad);
}

.caret {
  display: inline-block;
  width: 7px;
  height: 1em;
  vertical-align: -2px;
  margin-left: 2px;
  background: var(--accent);
  border-radius: 1px;
  animation: blink 1s steps(1) infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

/* Steps */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  position: relative;
}

.steps::before {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--line);
}

.step {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 4px 6px 4px 0;
  position: relative;
}

.step .lb {
  min-width: 0;
  color: var(--muted);
  font-size: 13.5px;
}

.step.active .lb {
  color: var(--ink);
  font-weight: 500;
}

.step .sub {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step .sub.think {
  font-style: italic;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.step .sub.mono {
  font-family: var(--mono);
  font-size: 12px;
}

.step .tm {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  padding-top: 1px;
}

.step.active .tm {
  color: var(--accent);
}

.step.warn {
  background: var(--warn-soft);
  border-radius: 8px;
}

.step.warn .lb,
.step.warn .tm {
  color: var(--warn);
}

.step.failed .lb {
  color: var(--bad);
}

.step.note .lb {
  color: var(--muted);
}

.note-text {
  white-space: pre-wrap;
}

.thought summary {
  cursor: pointer;
  list-style: none;
}

.thought summary::-webkit-details-marker {
  display: none;
}

.thought summary::after {
  content: " \203A";
  color: var(--faint);
}

.thought[open] summary::after {
  content: " \2039";
}

.thought p {
  margin: 4px 0 0;
  font-size: 12.5px;
  font-style: italic;
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}

.summary {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--sunk);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--muted);
}

.summary .what {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.summary .tm {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.chev {
  font-size: 9px;
  color: var(--faint);
  transition: transform 0.15s;
}

.summary[aria-expanded="true"] .chev {
  transform: rotate(90deg);
}

/* Icons */

.ic {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  margin-top: 2px;
  background: var(--bg);
  position: relative;
}

/* The spinner (SPINNER in src/client/steady.ts): a full ring, and an arc that
   goes round it once every 1.2 seconds. Only its rotation is animated, about
   its own center, and its size is fixed, so nothing around it moves. */
.spin {
  flex: none;
  display: block;
  width: 14px;
  height: 14px;
  transform-origin: 50% 50%;
  animation: spin 1.2s linear infinite;
}

.spin circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
}

.spin-track {
  opacity: 0.22;
}

/* A third of the ring: 10 of its 37.7 units, and the round caps. */
.spin-arc {
  stroke-linecap: round;
  stroke-dasharray: 10 28;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    transform: scale(0.55);
    opacity: 0.5;
  }
}

.ring {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid var(--faint);
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
}

.glyph {
  width: 14px;
  height: 14px;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.glyph.ok {
  stroke: var(--ok);
}

.glyph.bad {
  stroke: var(--bad);
}

.glyph.warn {
  stroke: var(--warn);
  stroke-width: 2;
}

/* The Memory page */

.memory-page {
  max-width: 760px;
  margin: 0 auto;
}

.memory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.memory-head h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  margin: 0;
}

.memory-intro,
.mem-hint {
  color: var(--muted);
  font-size: 13.5px;
  margin: 6px 0 0;
}

.memory-notice {
  margin: 12px 0 0;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 14px;
}

.memory-page section {
  margin-top: 26px;
}

.memory-page h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.mem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mem-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.mem-item.past .mem-text {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: var(--faint);
}

.mem-meta {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

.mem-meta .overdue {
  color: var(--warn);
  font-weight: 500;
}

.mem-key {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--muted);
}

.mem-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.mem-button {
  font-size: 12.5px;
  padding: 3px 10px;
  border-radius: 8px;
}

.mem-button.danger {
  color: var(--bad);
}

.mem-empty {
  color: var(--faint);
  font-size: 14px;
  margin: 0;
}

.memory-page details {
  margin-top: 8px;
}

.memory-page summary {
  cursor: pointer;
  font-size: 13.5px;
  color: var(--muted);
}

.mem-person {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.mem-person > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  color: var(--ink);
  font-size: 15px;
}

.mem-name {
  font-weight: 600;
}

.mem-also,
.mem-count {
  color: var(--muted);
  font-size: 13px;
}

.mem-count {
  margin-left: auto;
}

.mem-person[open] > summary {
  margin-bottom: 8px;
}

.mem-person .mem-item {
  background: var(--sunk);
}

.mem-note {
  white-space: pre-wrap;
  font-size: 14px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* The Coding agents panel */

#code-content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom));
}

.code-page {
  padding-top: 18px;
}

.code-none {
  margin-top: 18px;
}

/* The Memory page's folds are styled for its own lists. */
.code-page details {
  margin-top: 0;
}

.code-page summary {
  color: inherit;
  font-size: inherit;
}

.code-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.code-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.code-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.code-title {
  font-weight: 500;
  min-width: 0;
  overflow-wrap: anywhere;
}

.code-num {
  color: var(--muted);
}

.code-sub {
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.code-latest {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-latest[data-kind="step"] {
  font-family: var(--mono);
  font-size: 12.5px;
}

.code-latest[data-kind="error"] {
  color: var(--bad);
}

.code-problem {
  color: var(--warn);
  font-size: 12.5px;
}

.code-badge {
  flex: none;
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}

.code-badge.working,
.code-badge.stopping {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

.code-badge.ready,
.code-badge.merged {
  border-color: var(--ok);
  color: var(--ok);
}

.code-badge.paused {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn);
}

.code-badge.failed {
  border-color: var(--bad);
  color: var(--bad);
}

/* One change in full */

.code-heading {
  font-family: var(--display);
  font-weight: 600;
  font-size: 20px;
  margin: 14px 0 0;
  overflow-wrap: anywhere;
}

/* Where it stands, with its Stop button, stays in view while the feed scrolls under it. */
.code-facts {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  min-height: 44px;
  padding: 6px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.code-facts .mem-button {
  margin-left: auto;
}

.code-links {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.code-links a,
.code-body a {
  color: var(--accent);
}

.code-links code,
.code-item code,
.code-item pre {
  font-family: var(--mono);
}

.code-links code {
  font-size: 12.5px;
}

.code-earlier {
  color: var(--faint);
  font-size: 12.5px;
  margin: 14px 0 0;
}

.code-feed {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.code-item {
  font-size: 14px;
  min-width: 0;
}

.code-item time {
  flex: none;
  margin-left: auto;
  padding-left: 10px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 400;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.code-item time.waiting {
  color: var(--warn);
}

.code-who {
  display: flex;
  align-items: baseline;
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.code-item[data-kind="request"],
.code-item[data-kind="message"] {
  margin: 6px 0;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
}

.code-item[data-kind="request"] {
  background: var(--accent-soft);
  border-color: transparent;
}

.code-body {
  overflow-wrap: anywhere;
}

.code-body:not(.answer) {
  white-space: pre-wrap;
}

.code-body.answer {
  font-size: 14px;
}

.code-body.answer p,
.code-body.answer ul,
.code-body.answer ol {
  margin: 0 0 8px;
}

/* A long request or message shows a few lines, faded, until "Show all". */
.code-clamp {
  max-height: 10.5em;
  overflow: hidden;
}

.code-item:not(.code-fits):not(:has(> .code-more[open])) > .code-clamp {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}

.code-item:has(> .code-more[open]) > .code-clamp {
  max-height: none;
}

.code-fits > .code-more {
  display: none;
}

.code-more > summary {
  display: inline-block;
  margin-top: 2px;
  cursor: pointer;
  list-style: none;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 500;
}

.code-more > summary::-webkit-details-marker {
  display: none;
}

.code-more:not([open]) > summary span:last-child,
.code-more[open] > summary span:first-child {
  display: none;
}

/*
 * Steps line up, with a marker on the ones that open to their output. The
 * time floats right, and a long command wraps under its own first line.
 */
.code-step {
  display: block;
  padding: 1px 0 1px 16px;
  text-indent: -16px;
  line-height: 20px;
}

.code-step::before {
  content: "";
  display: inline-block;
  width: 16px;
  text-indent: 0;
  color: var(--faint);
  font-size: 10px;
}

.code-step time {
  float: right;
  text-indent: 0;
  line-height: 20px;
}

summary.code-step {
  cursor: pointer;
  list-style: none;
}

summary.code-step::-webkit-details-marker {
  display: none;
}

summary.code-step::before {
  content: "▶";
}

details[open] > summary.code-step::before {
  content: "▼";
}

summary.code-step:hover code {
  text-decoration: underline;
  text-decoration-color: var(--faint);
}

.code-step code {
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.code-failed {
  display: inline-block;
  text-indent: 0;
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--bad);
  color: var(--bad);
  font-size: 11px;
  font-weight: 600;
}

.code-item[data-failed] code,
.code-item[data-kind="error"] {
  color: var(--bad);
}

.code-item[data-kind="status"],
.code-item[data-kind="error"] {
  display: flex;
  align-items: baseline;
  padding: 1px 0 1px 16px;
  font-size: 13px;
}

.code-item[data-kind="status"] {
  color: var(--muted);
  font-style: italic;
}

.code-item pre {
  margin: 4px 0 6px 16px;
  padding: 8px 10px;
  max-height: 320px;
  overflow: auto;
  border-radius: 8px;
  background: var(--sunk);
  border: 1px solid var(--line);
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.code-working {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.code-reply {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  /* Full width, with its contents in the page's column. */
  padding: 10px max(16px, calc((100% - 760px) / 2)) calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.code-reply textarea {
  flex: 1;
  min-width: 0;
  font: inherit;
  resize: none;
  max-height: 30vh;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunk);
  color: var(--ink);
}

.code-reply button {
  border-radius: 11px;
  padding: 9px 16px;
  font-weight: 600;
}

.code-reply button:disabled {
  opacity: 0.6;
  cursor: progress;
}

/* The Files page */

.files-tools {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.files-tools button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 10px;
  font-weight: 600;
}

.files-tools svg {
  width: 17px;
  height: 17px;
}

#files-search {
  flex: 1;
  min-width: 0;
  font: inherit;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}

.files-none,
.files-more {
  margin-top: 16px;
}

.folders {
  display: grid;
  gap: 6px;
  margin-top: 14px;
}

.folder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.folder-row.sub {
  padding-left: 10px;
  border-left: 2px solid var(--line);
}

.folder-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
}

.folder-chip[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
  font-weight: 600;
}

.folder-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.folder-chip[aria-pressed="true"] .folder-count {
  color: var(--accent);
}

.uploads,
.file-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  padding: 8px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface);
  font-size: 13.5px;
}

.upload[data-failed] {
  border-color: var(--bad);
  border-style: solid;
}

.upload-name {
  flex: 1 1 50%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upload progress {
  flex: none;
  width: 110px;
}

.upload-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

.upload-error {
  color: var(--bad);
  font-size: 12.5px;
}

.file-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  text-align: left;
}

.file-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  height: 44px;
  border-radius: 5px 12px 5px 5px;
  background: var(--sunk);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.file-icon[data-kind="pdf"] {
  background: color-mix(in srgb, var(--bad) 13%, var(--surface));
  color: var(--bad);
}

.file-icon[data-kind="image"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.file-icon[data-kind="sheet"] {
  background: color-mix(in srgb, var(--ok) 14%, var(--surface));
  color: var(--ok);
}

.file-icon[data-kind="doc"] {
  background: color-mix(in srgb, var(--doc) 14%, var(--surface));
  color: var(--doc);
}

.file-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.file-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.file-title {
  min-width: 0;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.file-sub {
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.file-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.file-snippet mark {
  background: var(--scheduled);
  color: var(--ink);
  border-radius: 3px;
}

.file-status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
}

.file-status[data-status="processing"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.file-status[data-status="unreadable"] {
  background: var(--warn-soft);
  color: var(--warn);
}

.file-status[data-status="failed"] {
  border-color: var(--bad);
  color: var(--bad);
}

.file-status .spin,
.file-note .spin,
.upload-note .spin {
  width: 12px;
  height: 12px;
}

/* One file in full */

.file-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.file-facts {
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.file-facts .file-status {
  margin-right: 8px;
  vertical-align: 1px;
}

.file-name {
  color: var(--ink);
}

.file-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.file-actions > * {
  font-size: 13.5px;
}

a.button {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}

a.button:hover {
  border-color: var(--faint);
}

.file-actions .danger {
  color: var(--bad);
}

.file-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

.file-note.problem {
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--warn-soft);
  color: var(--warn);
}

.file-summary {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.file-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px 12px;
}

.file-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

.file-form label:first-child,
.file-save {
  grid-column: 1 / -1;
}

.file-form input {
  min-width: 0;
  font: inherit;
  font-size: 14.5px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}

.file-save button {
  padding: 6px 16px;
  font-weight: 600;
}

.file-save button:disabled {
  opacity: 0.7;
  cursor: progress;
}

.file-preview {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--sunk);
}

.file-excerpt {
  margin: 0;
  max-height: 360px;
  overflow: auto;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.files-drop {
  z-index: 2;
  display: grid;
  place-items: center;
  margin: 10px;
  border: 2px dashed var(--accent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent-soft) 88%, transparent);
  color: var(--accent);
  font-size: 16px;
  font-weight: 600;
  pointer-events: none;
}

@media (max-width: 520px) {
  .file-form {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phones: each row of folders scrolls sideways, edge to edge, rather than taking several lines. */
@media (max-width: 759px) {
  .folder-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 0 16px;
    scrollbar-width: none;
  }

  .folder-row::-webkit-scrollbar {
    display: none;
  }

  .folder-row.sub {
    margin-left: 0;
    padding-left: 10px;
  }

  .folder-chip {
    flex: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spin,
  .pulse,
  .caret,
  .locate[data-state="locating"] svg {
    animation: none;
  }
  .sidebar {
    transition: none;
  }
}

/* The Integrations page: laid out like the Memory page, with forms. */

.mem-hint + .mem-list,
.mem-hint + .mem-empty {
  margin-top: 8px;
}

.memory-notice.ok {
  background: var(--accent-soft);
  color: var(--ink);
}

.integrations-page code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--sunk);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 5px;
  overflow-wrap: anywhere;
}

.int-state::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

.int-state.ok {
  color: var(--ok);
}

.int-state.bad {
  color: var(--bad);
}

.int-problem {
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 13px;
}

.int-choose {
  display: grid;
  gap: 2px;
  margin-top: 6px;
}

.int-check {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
  font-size: 14px;
  cursor: pointer;
}

.int-check input {
  flex: none;
  margin: 0;
  transform: translateY(2px);
}

.int-add {
  margin-top: 10px;
}

.int-setup {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}

.memory-page .int-setup {
  margin-top: 12px;
}

.int-status {
  font-size: 14px;
  margin: 10px 0 0;
}

.int-steps {
  color: var(--muted);
  font-size: 13.5px;
  margin: 8px 0 0;
  padding-left: 20px;
}

.int-steps li {
  margin: 4px 0;
}

.int-steps a {
  color: var(--accent);
}

.int-form {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.int-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12.5px;
}

.int-form input {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}

.int-form select {
  font: inherit;
  font-size: 14px;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
}

.settings-form section + section {
  margin-top: 6px;
}

.settings-hours {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.int-form .mem-actions {
  margin-top: 0;
}

/* A feed's name and address side by side, when there is room. */
@media (min-width: 560px) {
  .int-feed {
    grid-template-columns: 1fr 2fr auto;
    align-items: end;
  }
}

.int-meter {
  height: 8px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--sunk);
  overflow: hidden;
}

.int-meter span {
  display: block;
  height: 100%;
  background: var(--accent);
}

/* Each integration is a card: icon, name and what it is, a status pill, and a line on what it has. Tapped, it opens. */
.int-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

/* Room below the last card for the New button. */
.integrations-page {
  padding-bottom: 72px;
}

/* The subtitle shares the head with Back to chat, which keeps to one line. */
.integrations-page .memory-head {
  align-items: flex-start;
}

.integrations-page .memory-head > button {
  flex: none;
}

.memory-page .int-card {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(20, 32, 42, 0.04);
}

/* A card that needs the owner: an amber edge. */
.memory-page .int-card.attention {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
  box-shadow: inset 4px 0 0 var(--warn), 0 1px 2px rgba(20, 32, 42, 0.04);
}

.int-card-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  padding: 14px 16px;
  list-style: none;
}

.memory-page summary.int-card-head {
  color: var(--ink);
  font-size: 15px;
}

.int-card-head::-webkit-details-marker {
  display: none;
}

.int-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  color: #ffffff;
}

.int-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.int-icon.google {
  background: #3f74d9;
}

.int-icon.feeds {
  background: #0b6e83;
}

.int-icon.oura {
  background: #3b3f4a;
}

.int-icon.mcp {
  background: #7357d6;
}

.int-icon.storage {
  background: #8a98a2;
}

.int-title {
  display: grid;
  min-width: 0;
}

.int-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.int-desc {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.int-pill {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.int-pill.ok {
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
}

.int-pill.warn {
  background: var(--warn-soft);
  color: var(--warn);
}

.int-pill.off {
  background: var(--sunk);
  color: var(--muted);
}

.int-chevron {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--faint);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.15s ease;
}

.int-card[open] .int-chevron {
  transform: rotate(180deg);
}

/* The line under the name: a dot in the pill's color, then what the integration has. */
.int-line {
  grid-column: 2 / -1;
  color: var(--muted);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.int-line::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--faint);
  vertical-align: 1px;
}

.int-line.ok::before {
  background: var(--ok);
}

.int-line.warn::before {
  background: var(--warn);
}

.int-body {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
}

.int-body > :first-child {
  margin-top: 0;
}

.int-body .mem-item,
.int-body .int-setup {
  background: var(--sunk);
}

.int-body .int-form input,
.int-body .int-form select {
  background: var(--surface);
}

/* Storage is always open: its meter needs no tap. */
.int-storage .int-card-head {
  grid-template-columns: 40px minmax(0, 1fr);
}

.int-storage .int-body {
  border-top: 0;
  padding-top: 0;
}

/* The New button floats at the bottom right; its chooser opens above it. */
.memory-page .int-new {
  margin: 0;
}

.memory-page summary.int-new-button {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 18px 11px 14px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 15px;
  font-weight: 600;
  list-style: none;
  box-shadow: 0 6px 20px rgba(8, 16, 20, 0.22);
}

.int-new-button::-webkit-details-marker {
  display: none;
}

.int-new-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transition: transform 0.15s ease;
}

.int-new[open] .int-new-button svg {
  transform: rotate(45deg);
}

.int-new-menu {
  position: fixed;
  right: calc(20px + env(safe-area-inset-right));
  bottom: calc(80px + env(safe-area-inset-bottom));
  z-index: 5;
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 12px 36px rgba(8, 16, 20, 0.2);
}

.int-new-title {
  margin: 4px 8px 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.int-choice,
.memory-page .int-new-mcp > summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--ink);
  font-size: 15px;
  text-align: left;
  list-style: none;
}

.int-new-mcp > summary::-webkit-details-marker {
  display: none;
}

.int-choice:hover,
.int-new-mcp > summary:hover {
  background: var(--sunk);
}

.memory-page .int-new-mcp {
  margin: 0;
}

.int-new-mcp > .mem-hint {
  margin: 4px 8px 8px;
}

/* Phones: a little tighter, and taps, not clicks. */
@media (max-width: 520px) {
  .int-card-head {
    column-gap: 10px;
    padding: 12px 14px;
  }

  .int-body {
    padding: 12px 14px 14px;
  }

  .int-body .mem-button {
    min-height: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .int-chevron,
  .int-new-button svg {
    transition: none;
  }
}

/* An account that needs connecting again. */
.side-count.alert {
  background: var(--bad);
  color: var(--accent-ink);
}

/* The Browser page: each open tab's title and address, and its Watch link. */
.browser-tabs {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.browser-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.browser-tab-text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.browser-tab-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser-tab .mem-hint {
  overflow-wrap: anywhere;
}