/* onest-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* onest-cyrillic-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* onest-math-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-math-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0302-0303,U+0305,U+0307-0308,U+0310,U+0312,U+0315,U+031A,U+0326-0327,U+032C,U+032F-0330,U+0332-0333,U+0338,U+033A,U+0346,U+034D,U+0391-03A1,U+03A3-03A9,U+03B1-03C9,U+03D1,U+03D5-03D6,U+03F0-03F1,U+03F4-03F5,U+2016-2017,U+2034-2038,U+203C,U+2040,U+2043,U+2047,U+2050,U+2057,U+205F,U+2070-2071,U+2074-208E,U+2090-209C,U+20D0-20DC,U+20E1,U+20E5-20EF,U+2100-2112,U+2114-2115,U+2117-2121,U+2123-214F,U+2190,U+2192,U+2194-21AE,U+21B0-21E5,U+21F1-21F2,U+21F4-2211,U+2213-2214,U+2216-22FF,U+2308-230B,U+2310,U+2319,U+231C-2321,U+2336-237A,U+237C,U+2395,U+239B-23B7,U+23D0,U+23DC-23E1,U+2474-2475,U+25AF,U+25B3,U+25B7,U+25BD,U+25C1,U+25CA,U+25CC,U+25FB,U+266D-266F,U+27C0-27FF,U+2900-2AFF,U+2B0E-2B11,U+2B30-2B4C,U+2BFE,U+3030,U+FF5B,U+FF5D,U+1D400-1D7FF,U+1EE00-1EEFF;
}

/* onest-symbols-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-symbols-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0001-000C,U+000E-001F,U+007F-009F,U+20DD-20E0,U+20E2-20E4,U+2150-218F,U+2190,U+2192,U+2194-2199,U+21AF,U+21E6-21F0,U+21F3,U+2218-2219,U+2299,U+22C4-22C6,U+2300-243F,U+2440-244A,U+2460-24FF,U+25A0-27BF,U+2800-28FF,U+2921-2922,U+2981,U+29BF,U+29EB,U+2B00-2BFF,U+4DC0-4DFF,U+FFF9-FFFB,U+10140-1018E,U+10190-1019C,U+101A0,U+101D0-101FD,U+102E0-102FB,U+10E60-10E7E,U+1D2C0-1D2D3,U+1D2E0-1D37F,U+1F000-1F0FF,U+1F100-1F1AD,U+1F1E6-1F1FF,U+1F30D-1F30F,U+1F315,U+1F31C,U+1F31E,U+1F320-1F32C,U+1F336,U+1F378,U+1F37D,U+1F382,U+1F393-1F39F,U+1F3A7-1F3A8,U+1F3AC-1F3AF,U+1F3C2,U+1F3C4-1F3C6,U+1F3CA-1F3CE,U+1F3D4-1F3E0,U+1F3ED,U+1F3F1-1F3F3,U+1F3F5-1F3F7,U+1F408,U+1F415,U+1F41F,U+1F426,U+1F43F,U+1F441-1F442,U+1F444,U+1F446-1F449,U+1F44C-1F44E,U+1F453,U+1F46A,U+1F47D,U+1F4A3,U+1F4B0,U+1F4B3,U+1F4B9,U+1F4BB,U+1F4BF,U+1F4C8-1F4CB,U+1F4D6,U+1F4DA,U+1F4DF,U+1F4E3-1F4E6,U+1F4EA-1F4ED,U+1F4F7,U+1F4F9-1F4FB,U+1F4FD-1F4FE,U+1F503,U+1F507-1F50B,U+1F50D,U+1F512-1F513,U+1F53E-1F54A,U+1F54F-1F5FA,U+1F610,U+1F650-1F67F,U+1F687,U+1F68D,U+1F691,U+1F694,U+1F698,U+1F6AD,U+1F6B2,U+1F6B9-1F6BA,U+1F6BC,U+1F6C6-1F6CF,U+1F6D3-1F6D7,U+1F6E0-1F6EA,U+1F6F0-1F6F3,U+1F6F7-1F6FC,U+1F700-1F7FF,U+1F800-1F80B,U+1F810-1F847,U+1F850-1F859,U+1F860-1F887,U+1F890-1F8AD,U+1F8B0-1F8BB,U+1F8C0-1F8C1,U+1F900-1F90B,U+1F93B,U+1F946,U+1F984,U+1F996,U+1F9E9,U+1FA00-1FA6F,U+1FA70-1FA7C,U+1FA80-1FA89,U+1FA8F-1FAC6,U+1FACE-1FADC,U+1FADF-1FAE9,U+1FAF0-1FAF8,U+1FB00-1FBFF;
}

/* onest-vietnamese-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* onest-latin-ext-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* onest-latin-wght-normal */
@font-face {
  font-family: 'Onest Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/onest-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* archivo-vietnamese-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-wght-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/archivo-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ibm-plex-mono-cyrillic-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-cyrillic-ext-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-cyrillic-ext-400-normal.woff) format('woff');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* ibm-plex-mono-cyrillic-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-cyrillic-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-cyrillic-400-normal.woff) format('woff');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* ibm-plex-mono-vietnamese-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-vietnamese-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-vietnamese-400-normal.woff) format('woff');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* ibm-plex-mono-latin-ext-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ibm-plex-mono-latin-400-normal */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'), url(/fonts/ibm-plex-mono-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Tokens from Grunden Work (grunden-ai/grunden-work@41d9de3, apps/app/src/app/index.css),
   which implements graphic profile v2. See ADR 0002. No component names a brand hex:
   everything reads the slate scale and the semantic names, so light and dark are one block each. */
:root, [data-theme="light"] {
  --slate-1: #fbf7f2;  /* Papper */
  --slate-2: #f8f3ee;
  --slate-3: #f3ece5;
  --slate-4: #ede5dc;  /* Lera */
  --slate-5: #e6ddd4;
  --slate-6: #ded9d5;
  --slate-8: #c1bab9;
  --slate-9: #a59c9c;
  --slate-10: #887d80;
  --slate-11: #6b5f63; /* Sten */
  --slate-12: #1c1418; /* Bläck */
  --soft: #4f4649;

  --surface: var(--slate-1);
  --raised: #fffdfa;
  --muted: var(--slate-3);
  --border: var(--slate-5);
  --ring: var(--slate-8);
  --accent: #6e2a5b;   /* Plommon */
  --destructive: #f12214;
  --warning: #e8b33c;  /* Gul */
  --warning-tint: #f7e9ce;

  /* The brand gradient is only ever used as this pair (Grunden Work ADR 0052). */
  --brand-stop-1: #6e2a5b;
  --brand-stop-2: #be3f2a;
  --grad-brand-fg: #ffffff;

  --shadow-border: 0 0 0 1px rgba(28, 20, 24, 0.06), 0 1px 2px -1px rgba(28, 20, 24, 0.06), 0 2px 4px 0 rgba(28, 20, 24, 0.04);
  --btn-secondary-shadow: 0 0 0 1px rgba(28, 20, 24, 0.12), inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
  --btn-primary-shadow: 0 4px 4px 0 rgba(28, 20, 24, 0.08), 0 0 0 1px rgba(28, 20, 24, 0.35), inset 0 4px 6px 0 rgba(255, 255, 255, 0.2), inset 0 -8px 14px 0 rgba(0, 0, 0, 0.15);
  --hover-brightness: 1.1;
}

[data-theme="dark"] {
  --slate-1: #1c1418;  /* Bläck */
  --slate-2: #221a1f;
  --slate-3: #2a1f27;
  --slate-4: #33282f;
  --slate-5: #3a3038;
  --slate-6: #453a42;
  --slate-8: #675a62;
  --slate-9: #7d6f76;
  --slate-10: #978a90;
  --slate-11: #c1b6bb;
  --slate-12: #f8f3ee;
  --soft: #ddd3d7;

  --raised: var(--slate-2);
  --accent: #d99bb4;   /* Ljusplommon: Plommon does not carry text on Bläck */
  --destructive: #ff6b5e;
  --warning-tint: rgba(232, 179, 60, 0.16);

  --brand-stop-1: #e8809b; /* Gryningen on ink */
  --brand-stop-2: #e8b33c;
  --grad-brand-fg: #1c1418;

  --shadow-border: 0 0 0 1px rgba(248, 243, 238, 0.08);
  --btn-secondary-shadow: 0 0 0 1px rgba(248, 243, 238, 0.14);
  --btn-primary-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  --hover-brightness: 1.05;
}

:root {
  --grad-brand: linear-gradient(105deg, var(--brand-stop-1) 0%, var(--brand-stop-2) 100%);
  --font-sans: "Onest Variable", "Archivo Variable", Arial, sans-serif;
  --font-heading: "Archivo Variable", Archivo, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace; /* for readings only: times, counts, model ids */
  --ease-out-strong: cubic-bezier(0.2, 0, 0, 1);      /* enters */
  --ease-power3-out: cubic-bezier(0.25, 1, 0.5, 1);   /* state changes */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%; background: var(--surface); color: var(--slate-12); font: 14px/1.5 var(--font-sans); -webkit-font-smoothing: antialiased; }
#app { height: 100vh; display: flex; flex-direction: column; }
button, textarea, select, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* Header and mail context */
.top { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; }
.wordmark { font-family: var(--font-heading); font-size: 14px; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }
.wordmark i { font-style: normal; font-weight: 700; margin-left: 0.04em; background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* One class per letter weight: the wordmark's own markup carries no style attribute (a strict CSP allows none). */
.wordmark .w200 { font-weight: 200; } .wordmark .w300 { font-weight: 300; } .wordmark .w400 { font-weight: 400; } .wordmark .w500 { font-weight: 500; } .wordmark .w600 { font-weight: 600; } .wordmark .w700 { font-weight: 700; }
.ghost { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; color: var(--slate-10); transition: background 150ms var(--ease-power3-out), color 150ms var(--ease-power3-out); }
.ghost:hover { background: var(--muted); color: var(--slate-12); }
.ghost svg { width: 16px; height: 16px; }
.top .ghost:first-of-type, .ghost.end { margin-left: auto; }

.ctx { padding: 0 12px 10px; }
.ctx:empty { display: none; }
.subj { font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.meta { margin-top: 3px; display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--slate-11); }
.meta span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reading { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--slate-10); white-space: nowrap; }
.steg { display: block; width: 100%; height: 6px; margin-top: 10px; color: var(--slate-5); }

/* Scope switch: this mail, or the whole mailbox */
.scope { display: flex; gap: 2px; margin: 0 12px 10px; padding: 2px; border-radius: 999px; background: var(--muted); }
.scope:empty { display: none; }
.scope button { flex: 1; height: 26px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--slate-11); transition: background 150ms var(--ease-power3-out), color 150ms var(--ease-power3-out); }
.scope button[aria-pressed="true"] { background: var(--raised); color: var(--slate-12); box-shadow: var(--shadow-border); }

/* Body */
.body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 14px; }
.body > * { animation: rise 150ms var(--ease-out-strong) both; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
.greet { font-family: var(--font-heading); font-weight: 500; font-size: 25px; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; margin-top: 26px; }
.greet.small { font-size: 22px; margin-top: 14px; }
.label { font-size: 12px; font-weight: 500; color: var(--slate-10); margin-bottom: 6px; }
.asks { list-style: none; display: grid; gap: 6px; }
.asks li { display: flex; gap: 8px; align-items: flex-start; }
.asks li::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; margin-top: 8px; border-radius: 999px; background: var(--accent); }

/* Pills: every button and chip */
.pills, .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pill {
  height: 30px; padding: 0 13px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  background: var(--raised); color: var(--soft); box-shadow: var(--btn-secondary-shadow);
  transition: background 150ms var(--ease-power3-out), color 150ms var(--ease-power3-out), filter 150ms var(--ease-power3-out), box-shadow 150ms var(--ease-power3-out);
}
.pill:hover { background: var(--muted); color: var(--slate-12); }
.pill.primary, .send { background: var(--grad-brand); color: var(--grad-brand-fg); box-shadow: var(--btn-primary-shadow); }
.pill.primary:hover, .send:hover { background: var(--grad-brand); color: var(--grad-brand-fg); filter: brightness(var(--hover-brightness)); }
.pill.quiet { background: transparent; color: var(--slate-11); box-shadow: inset 0 0 0 1px var(--border); }
.pill.quiet:hover { background: var(--muted); color: var(--slate-12); }
.pills.general { margin-top: 8px; }
.pill.sm { height: 26px; padding: 0 10px; font-size: 12px; }
.pill svg { width: 13px; height: 13px; }
.intents { display: grid; gap: 6px; }
.intent {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 9px 13px; border-radius: 12px;
  background: var(--raised); box-shadow: var(--btn-secondary-shadow);
  transition: background 150ms var(--ease-power3-out);
}
.intent:hover { background: var(--muted); }
.intent b, .source b { font-size: 12.5px; font-weight: 500; color: var(--slate-12); }
.source { display: grid; gap: 2px; width: 100%; text-align: left; padding: 8px 12px; border-radius: 12px; background: var(--raised); box-shadow: var(--btn-secondary-shadow); transition: background 150ms var(--ease-power3-out); }
.source:hover { background: var(--muted); }
.source b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source span { font-size: 12px; color: var(--slate-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intent span { font-size: 12px; line-height: 1.4; color: var(--slate-11); overflow-wrap: anywhere; }
.pill:disabled, .send:disabled { opacity: 0.5; cursor: default; filter: none; }
@media (prefers-reduced-motion: no-preference) { .pill:active, .send:active, .ghost:active { scale: 0.96; } .intent:active { scale: 0.99; } }

/* Conversation */
.you { align-self: flex-end; max-width: 92%; background: var(--muted); border-radius: 16px; padding: 8px 14px; font-size: 13.5px; overflow-wrap: anywhere; }
.answer { overflow-wrap: anywhere; }
.draft { background: var(--raised); border-radius: 12px; box-shadow: var(--shadow-border); padding: 12px 14px; font-size: 13.5px; line-height: 1.55; overflow-wrap: anywhere; }
#stream:empty { display: none; }
.body:has(#stream:not(:empty)) .working, .body.has-stream .working { display: none; }
.ph { display: inline; font: inherit; color: inherit; background: var(--warning-tint); border-radius: 4px; padding: 1px 5px; box-shadow: inset 0 -1px 0 0 var(--warning); }
.hint, .note, .thought { font-size: 12px; color: var(--slate-11); }
.hint { display: flex; align-items: center; gap: 7px; }
.hint::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--warning); flex: 0 0 auto; }
.leak { margin: 0; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--slate-12); background: var(--warning-tint); border-radius: 6px; box-shadow: inset 3px 0 0 0 var(--warning); }
.thought { color: var(--slate-10); }
.link { font: inherit; color: var(--slate-11); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.link:hover { color: var(--slate-12); }

/* Running work: Grunden Work's 3x3 dot matrix */
.working { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--slate-11); }
.dots { display: grid; grid-template-columns: repeat(3, 3px); gap: 2.5px; color: var(--accent); }
.dots span { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: 0.25; animation: dot 720ms steps(1) infinite; }
.dots span:nth-child(1), .dots span:nth-child(6), .dots span:nth-child(8) { animation-delay: 0ms; }
.dots span:nth-child(3), .dots span:nth-child(4), .dots span:nth-child(9) { animation-delay: -180ms; }
.dots span:nth-child(2), .dots span:nth-child(7) { animation-delay: -360ms; }
.dots span:nth-child(5) { animation-delay: -540ms; }
@keyframes dot { 0% { opacity: 0.9; } 25% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .dots span { animation: none; }
  .dots span:nth-child(odd) { opacity: 0.9; }
  .body > * { animation: none; }
}

/* Errors: inline, at the thing that failed */
.err { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--destructive); }
.err svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; }
.err small { display: block; font-size: 12px; color: var(--slate-11); }

/* Dock */
.dock { padding: 8px 12px 10px; }
.mail-actions { margin-bottom: 8px; }
.mail-actions:empty { display: none; }
.composer { background: var(--raised); border-radius: 16px; box-shadow: var(--shadow-border); padding: 10px 10px 8px 14px; transition: box-shadow 150ms var(--ease-out-strong); }
.composer:focus-within { box-shadow: 0 0 0 1px var(--ring), var(--shadow-border); }
.composer textarea { display: block; width: 100%; min-height: 22px; max-height: 120px; resize: none; border: 0; outline: none; background: transparent; font-size: 14px; line-height: 22px; }
.composer textarea::placeholder { color: var(--slate-10); }
.bar { display: flex; align-items: center; margin-top: 6px; }
.model { font-family: var(--font-mono); font-size: 11px; color: var(--slate-10); }
.send { margin-left: auto; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; transition: filter 150ms var(--ease-power3-out); }
.send svg { width: 15px; height: 15px; }
.trust { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 0 2px; font-size: 11px; line-height: 1.4; color: var(--slate-10); }
.trust svg { flex: 0 0 auto; width: 11px; height: 11px; margin-top: 2px; }
.trust b { font-weight: 500; color: var(--slate-11); }

/* Startup failure */
.fatal { padding: 16px 12px; font-size: 13px; line-height: 1.5; color: var(--destructive); overflow-wrap: anywhere; }

/* Settings */
.settings { display: grid; gap: 12px; }
.settings label { display: grid; gap: 5px; font-size: 12px; font-weight: 500; color: var(--slate-11); }
.settings select, .settings textarea, .settings input[type="password"] { width: 100%; padding: 8px 10px; border: 0; border-radius: 12px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--slate-6); font-size: 13px; font-weight: 400; color: var(--slate-12); outline: none; resize: vertical; }
.settings select:focus, .settings textarea:focus, .settings input[type="password"]:focus { box-shadow: inset 0 0 0 1px var(--ring), 0 0 0 3px rgba(110, 42, 91, 0.08); }
.settings .check { display: flex; align-items: center; gap: 8px; font-weight: 400; color: var(--slate-12); font-size: 13px; }
.settings .check input { accent-color: var(--accent); }

/* The agent conversation */
.rich p + p, .rich p + ul, .rich ul + p { margin-top: 8px; }
.rich ul { padding-left: 18px; display: grid; gap: 3px; }
.rich strong { font-weight: 600; }
.cite { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin: 0 1px; padding: 0 4px; border-radius: 999px; background: var(--muted); color: var(--slate-11); font-family: var(--font-mono); font-size: 10px; line-height: 1; vertical-align: 1px; transition: background 150ms var(--ease-power3-out), color 150ms var(--ease-power3-out); }
.cite:hover { background: var(--accent); color: var(--grad-brand-fg); }
.mail-marker { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 11px; line-height: 1.4; color: var(--slate-10); text-align: left; opacity: 0.8; }
.mail-marker span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button.mail-marker { cursor: pointer; transition: color 150ms var(--ease-power3-out), opacity 150ms var(--ease-power3-out); }
button.mail-marker:hover { color: var(--slate-12); opacity: 1; }
.record { display: grid; gap: 8px; }
.record .draft { max-height: 220px; overflow-y: auto; }
.card { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--raised); box-shadow: var(--shadow-border); }
.send[data-stop="true"] { background: var(--muted); color: var(--slate-12); box-shadow: var(--shadow-border); }
.draft.meeting { display: grid; gap: 3px; }
.draft.meeting b { font-weight: 600; }
.draft.meeting span { font-size: 12.5px; color: var(--slate-11); }
.settings .clear-ask { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--slate-6); }
.settings .clear-ask p { margin: 0; font-size: 12px; color: var(--slate-12); }