/* Liquid Glass, adaptive.
   Colours that are plain colours use light-dark(); values that are not colours
   (gradients, shadow lists, blend modes, opacities) are variables set per scheme.
   Force a scheme with <html data-theme="light|dark"> — the app reads ?theme=. */

:root {
  /* --- dark palette (also the fallback for old browsers) --- */
  color-scheme: light dark;
  --page-bg: #0a0d12;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.92);
  --ink-mute: rgba(255, 255, 255, 0.72);
  --accent: #7cc4ff;
  --green: #6ce3a8;
  --amber: #ffd166;
  --red: #ff8b8b;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-strong: rgba(18, 24, 32, 0.62);
  --glass-border: rgba(255, 255, 255, 0.16);
  --sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 28%, transparent 52%);
  --sheen-blend: screen;
  --sheen-opacity: 0.5;
  --scrim: linear-gradient(180deg, rgba(6, 10, 16, 0.3), rgba(6, 10, 16, 0.14));
  --shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.75), 0 2px 10px -6px rgba(0, 0, 0, 0.6);
  --chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --wall-a: rgba(6, 10, 18, 0.35);
  --wallpaper: url("/wallpaper.svg");
  --wall-b: rgba(4, 7, 12, 0.72);

  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --spring: cubic-bezier(0.22, 1.1, 0.36, 1);
}

@supports (color: light-dark(#000, #fff)) {
  :root {
    /* iOS system colours; light variants darkened wherever they carry text */
    --page-bg: light-dark(#eef1f6, #0a0d12);
    --ink: light-dark(#0b0d10, #ffffff);
    --ink-soft: light-dark(rgba(11, 13, 16, 0.84), rgba(255, 255, 255, 0.92));
    --ink-mute: light-dark(rgba(11, 13, 16, 0.62), rgba(255, 255, 255, 0.72));
    --accent: light-dark(#0060c0, #7cc4ff);
    --green: light-dark(#1d7f48, #6ce3a8);
    --amber: light-dark(#9a6200, #ffd166);
    --red: light-dark(#c22a2a, #ff8b8b);
    --glass-bg: light-dark(rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1));
    --glass-bg-strong: light-dark(rgba(255, 255, 255, 0.84), rgba(18, 24, 32, 0.62));
    --glass-border: light-dark(rgba(11, 13, 16, 0.07), rgba(255, 255, 255, 0.16));
  }
}

/* --- light palette for the non-colour values ------------------------------ */
@media (prefers-color-scheme: light) {
  :root {
    --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 40%, transparent 70%);
    --sheen-blend: normal;
    --sheen-opacity: 0.3;
    --scrim: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
    --shadow: 0 14px 34px -20px rgba(18, 32, 56, 0.4), 0 1px 2px rgba(18, 32, 56, 0.06);
    --chip-shadow: 0 1px 3px rgba(18, 32, 56, 0.12);
  --wall-a: rgba(255, 255, 255, 0.04);
  --wallpaper: url("/wallpaper-day.svg");
  --wall-b: rgba(226, 238, 246, 0.22);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --page-bg: #eef1f6;
  --ink: #0b0d10;
  --ink-soft: rgba(11, 13, 16, 0.84);
  --ink-mute: rgba(11, 13, 16, 0.62);
  --accent: #0060c0;
  --green: #1d7f48;
  --amber: #9a6200;
  --red: #c22a2a;
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.84);
  --glass-border: rgba(11, 13, 16, 0.07);
  --sheen: linear-gradient(165deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 40%, transparent 70%);
  --sheen-blend: normal;
  --sheen-opacity: 0.3;
  --scrim: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.04));
  --shadow: 0 14px 34px -20px rgba(18, 32, 56, 0.4), 0 1px 2px rgba(18, 32, 56, 0.06);
  --chip-shadow: 0 1px 3px rgba(18, 32, 56, 0.12);
  --wall-a: rgba(255, 255, 255, 0.04);
  --wallpaper: url("/wallpaper-day.svg");
  --wall-b: rgba(226, 238, 246, 0.22);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #0a0d12;
  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.92);
  --ink-mute: rgba(255, 255, 255, 0.72);
  --accent: #7cc4ff;
  --green: #6ce3a8;
  --amber: #ffd166;
  --red: #ff8b8b;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-strong: rgba(18, 24, 32, 0.62);
  --glass-border: rgba(255, 255, 255, 0.16);
  --sheen: linear-gradient(160deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06) 28%, transparent 52%);
  --sheen-blend: screen;
  --sheen-opacity: 0.5;
  --scrim: linear-gradient(180deg, rgba(6, 10, 16, 0.3), rgba(6, 10, 16, 0.14));
  --shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.75), 0 2px 10px -6px rgba(0, 0, 0, 0.6);
  --chip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --wall-a: rgba(6, 10, 18, 0.35);
  --wallpaper: url("/wallpaper.svg");
  --wall-b: rgba(4, 7, 12, 0.72);
}

* {
  box-sizing: border-box;
}

/* a class that sets display (flex/grid) would otherwise beat the UA rule for hidden */
[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  background: var(--page-bg);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  /* no `-webkit-font-smoothing: antialiased`: it thins light text on dark glass */
  overflow-x: hidden;
  transition: background 300ms ease, color 300ms ease;
}

/* A faint grain so the glass has something to refract; without texture the
   displacement is invisible on a smooth gradient. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

@media (prefers-color-scheme: light) {
  body::after {
    opacity: 0.035;
    mix-blend-mode: multiply;
  }
}

/* --- the colour field the glass refracts --------------------------------- */
/* A nature backdrop (drawn in public/wallpaper.svg, so no external photo): a dusk
   lake with ridgelines. The sharp ridges are what the glass refracts; the water keeps
   the middle calm so text stays readable. */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  contain: strict;
  background-color: var(--page-bg);
  background-image: linear-gradient(180deg, var(--wall-a), var(--wall-b)), var(--wallpaper);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}







/* --- glass ----------------------------------------------------------------- */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--sheen);
  mix-blend-mode: var(--sheen-blend);
  opacity: var(--sheen-opacity);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass {
    background: light-dark(rgba(255, 255, 255, 0.94), rgba(20, 26, 34, 0.92));
  }
}

/* --- layout --------------------------------------------------------------- */
.shell {
  max-width: 720px;
  margin-inline: auto;
  padding: max(16px, env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
}

.top {
  position: sticky;
  top: max(10px, env(safe-area-inset-top));
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--radius-xl);
  /* a toolbar is a thicker material: content behind it must not read through */
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
}

.filters {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px) saturate(170%);
  -webkit-backdrop-filter: blur(30px) saturate(170%);
}

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

h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 620;
  letter-spacing: -0.01em;
}

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

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex: none;
  background: var(--ink-mute);
}

.dot--green {
  background: var(--green);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--green) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--green) 55%, transparent);
}
.dot--amber {
  background: var(--amber);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--amber) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--amber) 50%, transparent);
}
.dot--red {
  background: var(--red);
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent),
    0 0 12px color-mix(in srgb, var(--red) 50%, transparent);
}
.dot--unknown {
  background: var(--ink-mute);
}

.pill {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60vw;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
}

/* --- filters --------------------------------------------------------------- */
.filters {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 14px;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.filters::-webkit-scrollbar {
  display: none;
}

.chip {
  font: inherit;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  white-space: nowrap;
  transition: background 220ms var(--spring), color 220ms var(--spring),
    transform 220ms var(--spring);
}

.chip:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.chip--on {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: var(--chip-shadow);
}

/* --- view switch: the pipeline, or the agents -------------------------------- */
.views {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  margin-bottom: 10px;
  border-radius: 999px;
}

.view {
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
}

.view:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.view--on {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: var(--chip-shadow);
}

/* --- agents board ------------------------------------------------------------ */
.sessions {
  display: grid;
  gap: 16px;
}

.sessions__group {
  display: grid;
  gap: 10px;
}

.sessions__label {
  margin: 2px 0 0;
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.agent {
  position: relative;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background-color: var(--glass-bg);
  background-image: var(--scrim);
  border: 1px solid var(--glass-border);
  border-left-width: 3px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.agent--waiting {
  border-left-color: color-mix(in srgb, var(--amber) 65%, transparent);
}

.agent--doing {
  border-left-color: color-mix(in srgb, var(--green) 65%, transparent);
}

.agent--done {
  border-left-color: color-mix(in srgb, var(--ink-mute) 35%, transparent);
  opacity: 0.86;
}

.agent__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-mute);
}

.agent__badge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent) 55%, #374151);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.agent__name {
  font-weight: 600;
  color: var(--ink-soft);
}

.agent__where {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agent__when {
  margin-left: auto;
  flex: none;
}

.agent__title {
  margin: 7px 0 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.agent__line {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
}

.agent__ask {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--amber) 14%, transparent);
  color: var(--ink);
  font-size: 13.5px;
}

.agent__none {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--ink-mute);
}

.agent__files {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

.agent__tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.taskchip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  color: var(--ink-soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.taskchip:hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
}

.taskchip__id {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.taskchip__title {
  font-size: 13px;
}

.taskchip__line {
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-mute);
}

/* --- mailboxes --------------------------------------------------------------- */
.mailboxes {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.mailbox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background-color: var(--glass-bg);
  background-image: var(--scrim);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.mailbox__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mailbox__key {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.mailbox__addr {
  font-size: 13.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.mailbox__mode {
  font-size: 11.5px;
  color: var(--ink-mute);
}

.mailbox__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex: none;
  text-align: right;
}

.mailbox__state {
  font-size: 11.5px;
  color: var(--ink-mute);
}

.mailbox__state--ok {
  color: var(--green);
}

.mailbox__state--bad {
  color: var(--amber);
}

.mailbox__connect {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* --- today's plan ------------------------------------------------------------ */
.plan {
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
}

.plan__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.plan__kicker {
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.plan__author {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-mute);
}

.plan__summary {
  margin: 8px 0 0;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.plan__empty {
  margin: 0;
  font-size: 13px;
  color: var(--ink-mute);
}

.plan__items {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.plan__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.plan__slot {
  flex: none;
  min-width: 46px;
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  font-size: 11.5px;
  text-align: center;
}

.plan__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.plan__title {
  font-size: 14.5px;
  font-weight: 550;
  color: var(--ink);
}

.plan__why {
  font-size: 12.5px;
  font-style: normal;
  color: var(--ink-mute);
}

/* --- pipeline lanes --------------------------------------------------------- */
.stages {
  display: flex;
  gap: 6px;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 999px;
  overflow-x: auto;
  scrollbar-width: none;
}

.stages::-webkit-scrollbar {
  display: none;
}

.stage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-mute);
  cursor: pointer;
  transition: background 200ms var(--spring), color 200ms var(--spring);
}

.stage:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.stage--on {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  box-shadow: var(--chip-shadow);
}

.stage__n {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  line-height: 17px;
  text-align: center;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  color: var(--ink-soft);
}

.stage--on .stage__n {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  color: var(--ink);
}

.stage--empty .stage__n {
  opacity: 0.45;
}

/* compact rows: a mention that is still raw, a job running, a finished item, a dropped one */
.qrow {
  position: relative;
  padding: 13px 15px;
  border-radius: var(--radius-md);
  background-color: var(--glass-bg);
  background-image: var(--scrim);
  border: 1px solid var(--glass-border);
  border-left-width: 3px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px) saturate(155%);
  -webkit-backdrop-filter: blur(18px) saturate(155%);
}

.qrow--raw {
  border-left-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.qrow--doing {
  border-left-color: color-mix(in srgb, var(--amber) 55%, transparent);
}

.qrow--done {
  border-left-color: color-mix(in srgb, var(--green) 55%, transparent);
}

.qrow--dropped {
  border-left-color: color-mix(in srgb, var(--ink-mute) 40%, transparent);
  opacity: 0.82;
}

.qrow__head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--ink-mute);
}

.qrow__badge {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: color-mix(in srgb, var(--accent) 70%, #444);
}

.qrow__icon {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 5px;
  object-fit: contain;
}

.qrow__badge--doing {
  background: color-mix(in srgb, var(--amber) 80%, #6b4a00);
  color: #20160a;
}

.qrow__badge--done {
  background: color-mix(in srgb, var(--green) 80%, #0d3b25);
  color: #06231a;
}

.qrow__badge--dropped {
  background: color-mix(in srgb, var(--ink-mute) 40%, transparent);
  color: var(--ink);
}

.qrow__avatar {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 55%, #3b4252);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.qrow__who {
  font-weight: 600;
  color: var(--ink-soft);
}

.qrow__chan {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qrow__when {
  margin-left: auto;
  flex: none;
}

.qrow__when--late {
  color: var(--amber);
  font-weight: 600;
}

.qrow__title {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.qrow__text {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* tap a raw mention to read the whole thing */
.qrow--open .qrow__text {
  display: block;
  overflow: visible;
}

.qrow__line {
  margin: 6px 0 0;
  color: var(--ink-mute);
  font-size: 13.5px;
}

.qrow__meta {
  margin: 8px 0 0;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* --- feed ------------------------------------------------------------------ */
.feed {
  display: grid;
  gap: 12px;
}

/* the whole card opens the detail sheet, so it reads as one target */
.item {
  cursor: pointer;
}

.item {
  position: relative;
  padding: 16px 18px;
  border-radius: var(--radius-lg);
  background-color: var(--glass-bg);
  background-image: var(--triage-wash, none), var(--scrim, none);
  border: 1px solid var(--glass-border);
  border-left-color: var(--triage-line, var(--glass-border));
  /* glass rim: a bright top edge, a dimmer bottom edge, and a hairline inner shade */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 1px rgba(0, 0, 0, 0.28),
    var(--shadow);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
  overflow: hidden;
  transition: transform 260ms var(--spring), box-shadow 260ms var(--spring);
}

.item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--sheen);
  mix-blend-mode: var(--sheen-blend);
  opacity: var(--sheen-opacity);
}

.item--do {
  --triage-line: color-mix(in srgb, var(--green) 65%, transparent);
  --triage-wash: linear-gradient(90deg, color-mix(in srgb, var(--green) 26%, transparent), transparent 60px);
}
.item--decide {
  --triage-line: color-mix(in srgb, var(--amber) 65%, transparent);
  --triage-wash: linear-gradient(90deg, color-mix(in srgb, var(--amber) 26%, transparent), transparent 60px);
}
.item--fyi {
  --triage-line: color-mix(in srgb, var(--ink-mute) 45%, transparent);
  --triage-wash: linear-gradient(90deg, color-mix(in srgb, var(--ink-mute) 10%, transparent), transparent 60px);
}

@media (hover: hover) {
  .item:hover {
    transform: translateY(-2px);
  }
}

.item__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.item__title {
  margin: 0;
  font-size: 16px;
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.item__tag {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  flex: none;
}

.item__summary {
  margin: 8px 0 0;
  color: var(--ink-soft);
  /* bright, but not a second title: hierarchy stays, legibility comes from colour */
  font-weight: 450;
}

.item__ask {
  margin: 8px 0 0;
  color: var(--accent);
  font-weight: 500;
}

.item__actions {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--ink-mute);
  font-size: 14px;
}

.item__actions li + li {
  margin-top: 2px;
}

.item__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.item__meta {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11.5px;
}

/* --- controls -------------------------------------------------------------- */
button {
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}

.item__foot button,
.sheet button,
.icon-btn {
  border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink);
  padding: 8px 14px;
  cursor: pointer;
  transition: transform 180ms var(--spring), background 200ms var(--spring);
}

.item__foot button:hover,
.sheet button:hover,
.icon-btn:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
}

.item__foot button:active,
.sheet button:active,
.icon-btn:active,
.chip:active {
  transform: scale(0.96);
}

.item__foot button.primary,
.sheet button.primary {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 35%, transparent);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.item__foot button:disabled,
.sheet button:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.icon-btn {
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1;
}

/* the bell, when this device is subscribed */
.icon-btn--on {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 45%, transparent);
  background: color-mix(in srgb, var(--amber) 14%, transparent);
}

/* --- states ---------------------------------------------------------------- */
.empty,
.error {
  margin-top: 24px;
  padding: 18px;
  text-align: center;
  color: var(--ink-mute);
  border-radius: var(--radius-lg);
}

.error {
  color: var(--red);
}

.status {
  margin-top: 26px;
  font-size: 12px;
  color: var(--ink-mute);
  text-align: center;
}

/* --- detail sheet ----------------------------------------------------------
   A right-hand pane on desktop, a bottom sheet on phones. It is a denser material
   than a card (the owner is reading, not scanning), so no displacement here. */
body.sheet-open {
  overflow: hidden;
}

.sheet {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(560px, 100%);
  max-width: 560px;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  overflow: visible;
}

.sheet:focus,
.sheet:focus-visible {
  outline: none;
}

.sheet::backdrop {
  background: rgba(4, 7, 12, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--radius-xl) 0 0 var(--radius-xl);
  border: 1px solid var(--glass-border);
  background-color: var(--glass-bg-strong);
  background-image: var(--scrim);
  box-shadow: var(--shadow);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  overflow: hidden;
}

.sheet__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--glass-border);
  /* the body scrolls underneath: keep the bar solid enough to hide it */
  background: color-mix(in srgb, var(--page-bg) 55%, transparent);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.sheet__id {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.sheet__bar .icon-btn {
  margin-left: auto;
}

.sheet__body {
  flex: 1;
  padding: 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sheet__title {
  margin: 0 0 10px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.sheet__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-bottom: 18px;
}

.sheet__meta .chip {
  font-size: 10.5px;
  padding: 3px 10px;
  pointer-events: none;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.sheet__meta .chip--do {
  color: var(--green);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  background: color-mix(in srgb, var(--green) 12%, transparent);
}

.sheet__meta .chip--decide {
  color: var(--amber);
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 12%, transparent);
}

.sheet__meta .chip--fyi {
  color: var(--ink-mute);
  border-color: color-mix(in srgb, var(--ink) 16%, transparent);
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.sheet__meta-item {
  font-size: 11.5px;
  color: var(--ink-mute);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
}

.sheet__section {
  margin-top: 20px;
}

.sheet__kicker {
  margin: 0 0 8px;
  font-size: 10.5px;
  font-weight: 620;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-mute);
}

.sheet__p {
  margin: 0 0 8px;
  color: var(--ink-soft);
}

.sheet__p--mute {
  color: var(--ink-mute);
}

.sheet__p--error {
  color: var(--red);
}

.sheet__ask {
  margin: 0 0 8px;
  color: var(--accent);
  font-weight: 500;
}

.sheet__actions {
  margin: 0;
  padding-left: 18px;
  color: var(--ink-mute);
  font-size: 14px;
}

.sheet__options {
  display: grid;
  gap: 8px;
}

.option {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.option--pick {
  border-color: color-mix(in srgb, var(--amber) 40%, transparent);
  background: color-mix(in srgb, var(--amber) 10%, transparent);
}

.option__label {
  margin: 0;
  font-weight: 560;
}

.option__detail {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-mute);
}

/* --- the conversation, drawn in the colours of the app it came from ---------
   Each palette below is the app's own, not an approximation: Telegram's #0E1621 /
   #182533 / #2B5278, WhatsApp's #0B141A / #202C33 / #005C4B, Lark's #3370FF on
   #F2F3F5, Zalo's #0068FF. The owner has seen these bubbles a thousand times, so
   getting the palette, the bubble shape and the little composer right is what makes
   the card read as "this is from WhatsApp" before a single word is read. */
.chat {
  --c-bg: color-mix(in srgb, var(--ink) 5%, transparent);
  --c-bar: color-mix(in srgb, var(--ink) 7%, transparent);
  --c-bar-ink: var(--ink);
  --c-bar-muted: var(--ink-mute);
  --c-in: color-mix(in srgb, var(--ink) 8%, transparent);
  --c-in-ink: var(--ink-soft);
  --c-out: color-mix(in srgb, var(--accent) 22%, transparent);
  --c-out-ink: var(--ink);
  --c-name: var(--accent);
  --c-meta: var(--ink-mute);
  --c-meta-out: var(--ink-mute);
  --c-accent: var(--accent);
  --c-tick: var(--accent);
  --c-radius: 12px;
  --c-tail: 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  overflow: hidden;
  background: var(--c-bg);
}

.chat[data-source="telegram"] {
  --c-bg: light-dark(#e6ebee, #0e1621);
  --c-bar: light-dark(#ffffff, #17212b);
  --c-bar-ink: light-dark(#0f1720, #ffffff);
  --c-bar-muted: light-dark(#707579, #7d8e98);
  --c-in: light-dark(#ffffff, #182533);
  --c-in-ink: light-dark(#0f1720, #ffffff);
  --c-out: light-dark(#effdde, #2b5278);
  --c-out-ink: light-dark(#0f1720, #ffffff);
  --c-name: light-dark(#2f8fd8, #64b5ef);
  --c-meta: light-dark(#9aa4ad, #7d8e98);
  --c-meta-out: light-dark(#7d9c5f, #a8c6e6);
  --c-accent: light-dark(#3390ec, #64b5ef);
  --c-tick: #4fae4e;
  --c-radius: 15px;
  --c-tail: 4px;
}

.chat[data-source="whatsapp"] {
  --c-bg: light-dark(#efeae2, #0b141a);
  --c-bar: light-dark(#f0f2f5, #202c33);
  --c-bar-ink: light-dark(#111b21, #e9edef);
  --c-bar-muted: light-dark(#667781, #8696a0);
  --c-in: light-dark(#ffffff, #202c33);
  --c-in-ink: light-dark(#111b21, #e9edef);
  --c-out: light-dark(#d9fdd3, #005c4b);
  --c-out-ink: light-dark(#111b21, #e9edef);
  --c-name: light-dark(#0f8f7e, #53bdeb);
  --c-meta: light-dark(#667781, #8696a0);
  --c-meta-out: light-dark(#5f8a6a, #9ad9c8);
  --c-accent: light-dark(#00a884, #25d366);
  --c-tick: #53bdeb;
  --c-radius: 8px;
  --c-tail: 2px;
}

.chat[data-source="zalo"] {
  --c-bg: light-dark(#ebf0f7, #141a21);
  --c-bar: light-dark(#ffffff, #1d232b);
  --c-bar-ink: light-dark(#081b33, #e9eef5);
  --c-bar-muted: light-dark(#7a8699, #93a1b5);
  --c-in: light-dark(#ffffff, #232a33);
  --c-in-ink: light-dark(#081b33, #e9eef5);
  --c-out: light-dark(#d6e9ff, #1d3b60);
  --c-out-ink: light-dark(#081b33, #e9eef5);
  --c-name: light-dark(#0068ff, #6fa8ff);
  --c-meta: light-dark(#8a97ab, #8fa0b5);
  --c-meta-out: light-dark(#5b7ea8, #9db6d0);
  --c-accent: light-dark(#0068ff, #4d94ff);
  --c-tick: light-dark(#0068ff, #4d94ff);
  --c-radius: 18px;
  --c-tail: 6px;
}

.chat[data-source="lark"] {
  --c-bg: light-dark(#f2f3f5, #1a1a1a);
  --c-bar: light-dark(#ffffff, #242424);
  --c-bar-ink: light-dark(#1f2329, #ebebeb);
  --c-bar-muted: light-dark(#646a73, #a6a6a6);
  --c-in: light-dark(#ffffff, #2b2b2b);
  --c-in-ink: light-dark(#1f2329, #ebebeb);
  --c-out: #3370ff;
  --c-out-ink: #ffffff;
  --c-name: light-dark(#3370ff, #75a4ff);
  --c-meta: light-dark(#8f959e, #a6a6a6);
  --c-meta-out: rgba(255, 255, 255, 0.75);
  --c-accent: light-dark(#3370ff, #75a4ff);
  --c-tick: rgba(255, 255, 255, 0.85);
  --c-radius: 6px;
  --c-tail: 2px;
}

.chat__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: var(--c-bar);
  border-bottom: 1px solid color-mix(in srgb, var(--c-bar-ink) 8%, transparent);
}

.chat__back {
  flex: none;
  padding: 0 2px 3px;
  font-size: 21px;
  line-height: 1;
  color: var(--c-accent);
}

.chat__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 24%, var(--c-bar));
  color: var(--c-bar-ink);
  font-size: 11.5px;
  font-weight: 650;
}

.chat__names {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.chat__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--c-bar-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__sub {
  font-size: 11.5px;
  color: var(--c-bar-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat__appicon {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 6px;
  object-fit: contain;
}

.chat__msgs {
  list-style: none;
  margin: 0;
  padding: 12px 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* WhatsApp's fine dot texture; the other apps are flat. */
.chat[data-source="whatsapp"] .chat__msgs {
  background-image: radial-gradient(
    circle,
    light-dark(rgba(17, 27, 33, 0.05), rgba(255, 255, 255, 0.035)) 1px,
    transparent 1.2px
  );
  background-size: 22px 22px;
}

.chat__day {
  align-self: center;
  margin: 6px 0 4px;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--c-bar);
  color: var(--c-bar-muted);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.chat__empty {
  margin: 0;
  padding: 16px 12px;
  color: var(--c-bar-muted);
  font-size: 13px;
}

.row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
}

.row--out {
  justify-content: flex-end;
}

.row__app {
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 5px;
  object-fit: contain;
}

.row__app--ghost {
  background: transparent;
}

.row__avatar {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 65%, #4b5563);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.row__avatar--ghost {
  background: transparent;
}

/* fallback for a source we have no icon for */
.app-icon--letter {
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink);
  font-size: 10px;
  font-weight: 700;
}

.bubble {
  position: relative;
  max-width: 76%;
  padding: 6px 9px 6px;
  border-radius: var(--c-radius) var(--c-radius) var(--c-radius) var(--c-tail);
  background: var(--c-in);
  color: var(--c-in-ink);
  box-shadow: 0 1px 1px color-mix(in srgb, #000 11%, transparent);
}

.row--out .bubble {
  border-radius: var(--c-radius) var(--c-radius) var(--c-tail) var(--c-radius);
  background: var(--c-out);
  color: var(--c-out-ink);
}

.row--hit .bubble {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--c-accent) 60%, transparent),
    0 2px 8px color-mix(in srgb, #000 16%, transparent);
}

.bubble__name {
  display: block;
  margin-bottom: 1px;
  font-size: 12px;
  font-weight: 600;
  color: var(--c-name);
}

.bubble__flag {
  display: block;
  margin-bottom: 1px;
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.bubble__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Email HTML: a white sheet inside the bubble, sandboxed and height-fitted. */
.bubble__html {
  display: block;
  width: 100%;
  min-height: 80px;
  height: 220px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  overflow: auto;
}

.bubble__meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--c-meta);
}

.row--out .bubble__meta {
  color: var(--c-meta-out);
}

.bubble__tick {
  font-size: 10px;
  letter-spacing: -1px;
  color: var(--c-tick);
}

.chat__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--c-bar);
  border-top: 1px solid color-mix(in srgb, var(--c-bar-ink) 7%, transparent);
}

.chat__field {
  flex: 1;
  padding: 7px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-bar-ink) 4%, var(--c-bar));
  color: var(--c-bar-muted);
  font-size: 12.5px;
  text-align: center;
}

.sheet__replies {
  display: grid;
  gap: 8px;
}

.reply {
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.reply__head {
  margin: 0;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-mute);
}

.reply__text {
  margin: 4px 0 0;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.sheet__fb {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sheet .fb {
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-soft);
  cursor: pointer;
}

.sheet__lastfb {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--ink-mute);
}

.sheet .fb--on {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.sheet__cmd {
  width: 100%;
  min-height: 54px;
  padding: 10px 12px;
  resize: vertical;
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-border);
  background: color-mix(in srgb, var(--page-bg) 40%, transparent);
}

.sheet__cmd::placeholder {
  color: var(--ink-mute);
}

.sheet__cmd:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
  outline-offset: 2px;
}

.sheet__send {
  margin-top: 8px;
}

.sheet__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.toast {
  position: absolute;
  left: 50%;
  top: 56px;
  transform: translateX(-50%);
  z-index: 5;
  margin: 0;
  padding: 9px 16px;
  max-width: calc(100% - 32px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--page-bg) 70%, transparent);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: var(--ink);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 640px) {
  .sheet {
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 90dvh;
    margin: auto 0 0;
  }

  .sheet__panel {
    max-height: 90dvh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
  .item:hover {
    transform: none;
  }
}