/* [next]/internal/font/google/inter_fd091ad6.module.css [app-client] (css) */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/2c55a0e60120577a-s.0-dom-5bn10r2.woff2") format("woff2");
  unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/9c72aa0f40e4eef8-s.1y4-pdgsjb-pw.woff2") format("woff2");
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/ad66f9afd8947f86-s.3lvt2whj97whp.woff2") format("woff2");
  unicode-range: U+1F??;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/5476f68d60460930-s.2uwcyprjm3xu3.woff2") format("woff2");
  unicode-range: U+370-377, U+37A-37F, U+384-38A, U+38C, U+38E-3A1, U+3A3-3FF;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/2bbe8d2671613f1f-s.0k62hbripvv8p.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/1bffadaabf893a1e-s.3-6t-g6q0vh0a.woff2") format("woff2");
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, 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;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2") format("woff2");
  unicode-range: U+??, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter Fallback;
  src: local(Arial);
  ascent-override: 90.44%;
  descent-override: 22.52%;
  line-gap-override: 0.0%;
  size-adjust: 107.12%;
}

.inter_fd091ad6-module__giF-bG__className {
  font-family: Inter, Inter Fallback;
  font-style: normal;
}

.inter_fd091ad6-module__giF-bG__variable {
  --font-sans: "Inter", "Inter Fallback";
}

/* [project]/src/styles/theme.css [app-client] (css) */
:root {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light dark;
  --paper: #fcf9f6;
  --surface: #fff;
  --raised: #fefdfb;
  --sunken: #f5f2ed;
  --sunken-2: #efeae5;
  --ink: #1f1915;
  --ink-2: #5c5753;
  --ink-3: #726e6a;
  --ink-inverse: #fdfbfa;
  --line: #e0ddda;
  --line-strong: #cac7c2;
  --brand: #8f55e6;
  --accent: #874cdc;
  --accent-hover: #7537c7;
  --accent-press: #6729b2;
  --accent-wash: #f5f1ff;
  --accent-line: #d8cdf4;
  --on-accent: #fcfbfe;
  --accent-fill: var(--accent);
  --accent-fill-hover: var(--accent-hover);
  --danger: #af3d34;
  --danger-wash: #ffefec;
  --danger-fill: var(--danger);
  --warn: #976213;
  --warn-wash: #fff1df;
  --good: #3a714f;
  --t-xs: .75rem;
  --t-sm: .8125rem;
  --t-base: .9375rem;
  --t-chat: .875rem;
  --t-md: .9375rem;
  --t-lg: 1.0625rem;
  --t-xl: 1.625rem;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --s-1: .25rem;
  --s-2: .5rem;
  --s-3: .75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-full: 999px;
  --good-wash: #d2f6dd;
  --rail-hover: #f2eee9;
  --app-bg: var(--sunken);
  --scrim: #1f191580;
  --overlay-ink: #1f1915b8;
  --on-overlay: #fdfbfa;
  --shade: #1f1915;
  --switch-off: var(--sunken-2);
  --switch-knob: var(--surface);
  --switch-knob-off: var(--surface);
  --auto-sweep: linear-gradient(100deg, transparent 0%, #ff8d8fd9 20%, #ffc324d9 35%, #5edb81d9 50%, #00befad9 65%, #a976ffd9 80%, transparent 100%);
  --icon-sm: 12px;
  --icon-md: 14px;
  --icon-lg: 16px;
  --shadow-knob: 0 1px 2px #1f191540;
  --shadow-sm: 0 1px 2px #1f19150d;
  --shadow-card: 0 1px 2px #1f19150d, 0 6px 20px #1f191512;
  --shadow-float: 0 2px 6px #1f191514, 0 28px 64px #1f19152e;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur: .18s;
  --dur-slow: .24s;
  --column: 42rem;
  --card-w: 320px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lightningcss-light: ;
    --lightningcss-dark: initial;
  }
}

@supports (color: lab(0% 0 0)) {
  :root {
    --paper: lab(98.1529% .426799 1.84674);
    --surface: lab(100.004% .16892 .737572);
    --raised: lab(99.3095% .254244 1.10694);
    --sunken: lab(95.6043% .602037 2.58824);
    --sunken-2: lab(93.0554% .779957 3.33158);
    --ink: lab(9.49156% 2.1475 4.0348);
    --ink-2: lab(37.3403% 1.71241 3.34669);
    --ink-3: lab(46.625% 1.35648 2.66814);
    --ink-inverse: lab(98.8455% .254273 1.10694);
    --line: lab(88.4106% .514925 2.21779);
    --line-strong: lab(80.2937% .69344 2.96152);
    --brand: lab(48.774% 46.8055 -65.6914);
    --accent: lab(45.4507% 47.485 -65.6467);
    --accent-hover: lab(38.2935% 49.2162 -65.5782);
    --accent-press: lab(32.5364% 48.0882 -62.7427);
    --accent-wash: lab(95.61% 5.02366 -9.92391);
    --accent-line: lab(84.2899% 9.50545 -18.0169);
    --on-accent: lab(98.7975% .651896 -1.33587);
    --danger: lab(42.877% 46.6618 31.7072);
    --danger-wash: lab(95.7137% 7.76726 4.76083);
    --warn: lab(46.4086% 17.8015 48.9462);
    --warn-wash: lab(95.9438% 4.67414 13.9193);
    --good: lab(43.0499% -25.2902 13.0117);
    --good-wash: lab(93.7125% -15.5331 7.96211);
    --rail-hover: lab(94.2139% .690639 2.9597);
    --scrim: lab(9.49156% 2.1475 4.0348 / .5);
    --overlay-ink: lab(9.49156% 2.1475 4.0348 / .72);
    --on-overlay: lab(98.8455% .254273 1.10694);
    --shade: lab(9.49156% 2.1475 4.0348);
    --auto-sweep: linear-gradient(100deg, transparent 0%, lab(72.7104% 54.3606 24.398 / .85) 20%, lab(82.7905% 13.2835 80.528 / .85) 35%, lab(78.9483% -51.2433 33.6902 / .85) 50%, lab(71.2859% -25.0966 -41.6591 / .85) 65%, lab(59.8308% 42.574 -63.0903 / .85) 80%, transparent 100%);
    --shadow-knob: 0 1px 2px lab(9.49156% 2.1475 4.0348 / .25);
    --shadow-sm: 0 1px 2px lab(9.49156% 2.1475 4.0348 / .05);
    --shadow-card: 0 1px 2px lab(9.49156% 2.1475 4.0348 / .05), 0 6px 20px lab(9.49156% 2.1475 4.0348 / .07);
    --shadow-float: 0 2px 6px lab(9.49156% 2.1475 4.0348 / .08), 0 28px 64px lab(9.49156% 2.1475 4.0348 / .18);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161311;
    --surface: #1d1a17;
    --raised: #23201c;
    --sunken: #272320;
    --sunken-2: #312d29;
    --app-bg: #0d0b09;
    --rail-hover: #1a1815;
    --ink: #edebe7;
    --ink-2: #b8b3af;
    --ink-3: #989490;
    --ink-inverse: #161311;
    --line: #302d2a;
    --line-strong: #46423d;
    --brand: #a272f5;
    --accent: #b696f7;
    --accent-hover: #c7adff;
    --accent-press: #a481e8;
    --accent-wash: #32254c;
    --accent-line: #60488d;
    --accent-fill: #874cdc;
    --accent-fill-hover: #945fe9;
    --danger: #ef7f72;
    --danger-wash: #421c18;
    --danger-fill: #af3d34;
    --warn: #ebb25f;
    --warn-wash: #3b260c;
    --good: #74c692;
    --good-wash: #143320;
    --scrim: #0009;
    --overlay-ink: #040302c7;
    --shade: #000;
    --switch-off: #4b4742;
    --switch-knob: #faf8f5;
    --switch-knob-off: #c1bdb8;
    --shadow-knob: 0 1px 2px #00000080;
    --shadow-sm: 0 1px 2px #0000004d;
    --shadow-card: 0 1px 2px #0000004d, 0 6px 20px #00000059;
    --shadow-float: 0 2px 6px #00000059, 0 28px 64px #0000008c;
  }

  @supports (color: lab(0% 0 0)) {
    :root {
      --paper: lab(6.19679% .616513 1.74111);
      --surface: lab(9.52148% .846759 2.55285);
      --raised: lab(12.4216% .969529 2.91892);
      --sunken: lab(14.1618% .965446 2.91581);
      --sunken-2: lab(18.8021% 1.08422 3.27886);
      --app-bg: lab(3.04912% .321619 .902209);
      --rail-hover: lab(8.36132% .849627 2.46625);
      --ink: lab(93.0506% .514418 2.2175);
      --ink-2: lab(73.3242% .920564 2.88435);
      --ink-3: lab(61.724% .924051 2.88661);
      --ink-inverse: lab(6.19679% .616513 1.74111);
      --line: lab(18.8023% .95652 2.90914);
      --line-strong: lab(28.0829% 1.1947 3.63571);
      --brand: lab(57.6853% 40.2333 -59.9649);
      --accent: lab(67.9634% 27.2103 -44.6751);
      --accent-hover: lab(75.2676% 22.5096 -38.5401);
      --accent-press: lab(60.7901% 29.9765 -47.6632);
      --accent-wash: lab(17.8093% 14.1458 -22.2091);
      --accent-line: lab(35.7921% 22.3414 -34.8772);
      --accent-fill: lab(45.4507% 47.485 -65.6467);
      --accent-fill-hover: lab(51.5826% 43.7884 -62.949);
      --danger: lab(66.2183% 43.0322 27.6142);
      --danger-wash: lab(15.918% 18.4928 11.9807);
      --danger-fill: lab(42.877% 46.6618 31.7072);
      --warn: lab(76.7578% 14.8254 49.9635);
      --warn-wash: lab(17.5545% 7.7614 20.4317);
      --good: lab(73.6087% -34.6788 17.8306);
      --good-wash: lab(18.2944% -15.8427 8.15558);
      --scrim: lab(.112911% 0 0 / .6);
      --overlay-ink: lab(.900595% .21112 .363472 / .78);
      --shade: lab(0% 0 0);
      --switch-off: lab(30.4031% 1.19112 3.63309);
      --switch-knob: lab(97.6872% .340313 1.47665);
      --switch-knob-off: lab(76.8043% .91973 2.88379);
      --shadow-knob: 0 1px 2px lab(0% 0 0 / .5);
      --shadow-sm: 0 1px 2px lab(0% 0 0 / .3);
      --shadow-card: 0 1px 2px lab(0% 0 0 / .3), 0 6px 20px lab(0% 0 0 / .35);
      --shadow-float: 0 2px 6px lab(0% 0 0 / .35), 0 28px 64px lab(0% 0 0 / .55);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 1ms;
    --dur-slow: 1ms;
  }
}

/* [project]/src/app/globals.css [app-client] (css) */
*, :before, :after {
  box-sizing: border-box;
}

html, body {
  background: var(--paper);
  height: 100%;
  color: var(--ink);
  font-family: var(--font-sans), system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  margin: 0;
  line-height: 1.5;
  overflow: hidden;
}

button, a, [role="button"] {
  touch-action: manipulation;
}

body {
  font-size: var(--t-base);
}

button, input, textarea {
  font: inherit;
  color: inherit;
}

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

.app {
  background: var(--app-bg);
  flex-direction: row;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.main {
  min-width: 0;
  margin: var(--s-2) var(--s-2) var(--s-2) 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-direction: column;
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

.main:focus {
  outline: none;
}

.app.rail-collapsed .main {
  margin-left: var(--s-2);
}

.skip-link {
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  border: 1px solid var(--line);
  translate: 0 calc(-100% - var(--s-4));
  text-decoration: none;
  position: absolute;
}

.skip-link:focus-visible {
  translate: 0;
}

.topbar {
  align-items: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-2) var(--s-3);
  z-index: 30;
  transition: border-color var(--dur) var(--ease);
  border-bottom: 1px solid #0000;
  flex: none;
  grid-template-columns: minmax(max-content, 1fr) minmax(0, max-content) minmax(max-content, 1fr);
  display: grid;
}

.topbar.is-scrolled {
  border-bottom-color: #0000;
}

.topbar-actions {
  flex: none;
  align-items: center;
  gap: 2px;
  display: flex;
}

.topbar-actions:empty {
  display: none;
}

.topbar-left {
  align-items: center;
  gap: var(--s-1);
  justify-self: start;
  display: flex;
}

.topbar-right {
  align-items: center;
  gap: var(--s-1);
  justify-self: end;
  display: flex;
}

.brand {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  letter-spacing: -.005em;
  justify-self: center;
  display: flex;
}

.brand svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--brand);
}

.rail .brand svg {
  width: calc(var(--icon-lg) + 2px);
  height: calc(var(--icon-lg) + 2px);
  margin-left: -2px;
}

.icon-btn {
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.icon-btn:hover {
  background: var(--sunken);
  color: var(--ink);
}

.icon-btn svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.surface {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.thread {
  scrollbar-gutter: stable both-edges;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.column {
  width: min(var(--column), 100% - var(--s-6));
  padding: var(--s-4) 0 var(--s-6);
  gap: var(--s-4);
  flex-direction: column;
  min-height: 100%;
  margin: 0 auto;
  display: flex;
}

.column.is-empty {
  justify-content: center;
  padding-bottom: 12vh;
}

.turn-user-row {
  flex-direction: column;
  align-self: flex-end;
  align-items: flex-end;
  gap: 2px;
  max-width: 82%;
  display: flex;
}

.turn-user-actions {
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  display: flex;
}

.turn-user-row:hover .turn-user-actions, .turn-user-row:focus-within .turn-user-actions {
  opacity: 1;
}

@media (hover: none) {
  .turn-user-actions {
    opacity: 1;
  }
}

.turn-user {
  background: var(--sunken);
  border-radius: var(--r-lg);
  max-width: 100%;
  padding: 7px var(--s-3);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: var(--t-chat);
  border-end-end-radius: var(--r-sm);
}

.turn-assistant {
  font-size: var(--t-chat);
  max-width: 72ch;
  line-height: 1.6;
}

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

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

.turn-assistant p {
  margin: 0 0 var(--s-4);
}

.turn-assistant h1, .turn-assistant h2, .turn-assistant h3 {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: var(--s-5) 0 var(--s-2);
}

.turn-assistant ul, .turn-assistant ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.25em;
}

.turn-assistant li {
  margin-bottom: var(--s-2);
}

.turn-assistant strong {
  font-weight: var(--w-semibold);
}

.turn-assistant code {
  background: var(--sunken);
  border-radius: 6px;
  padding: .1em .35em;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .9em;
}

.turn-assistant table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--s-2) 0 var(--s-4);
  font-size: var(--t-sm);
  line-height: 1.45;
}

.turn-assistant th {
  text-align: left;
  font-weight: var(--w-medium);
  color: var(--ink-2);
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.turn-assistant td {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  vertical-align: top;
}

.tool-line {
  align-items: baseline;
  column-gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-3);
  flex-wrap: wrap;
  row-gap: 0;
  display: flex;
}

.tool-line > span {
  overflow-wrap: anywhere;
  min-width: 0;
}

.tool-line.change {
  column-gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  display: grid;
}

.tool-line.change > b {
  grid-area: 1 / 1;
}

.tool-line.change > span:not(.cannot) {
  grid-area: 2 / 1;
}

.tool-line.change > .undo, .tool-line.change > .cannot {
  grid-area: 1 / 2 / span 2;
  align-self: center;
}

.tool-line.change b {
  color: var(--ink);
}

.tool-line.change > span {
  color: var(--ink-2);
}

.undo {
  font: inherit;
  cursor: pointer;
  color: var(--ink-2);
  text-underline-offset: 3px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--line-strong);
  text-decoration-color: var(--line-strong);
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
  background: none;
  border: 0;
  padding: 0;
}

.undo:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

.tool-line .cannot {
  color: var(--ink-3);
}

.tool-line b {
  font-weight: var(--w-medium);
  color: var(--ink-2);
}

.tool-line:not(.change) > b + span:before {
  content: "·";
  margin-right: var(--s-2);
  color: var(--ink-3);
}

.activity {
  gap: var(--s-2);
  flex-direction: column;
  display: flex;
}

.activity-head {
  align-self: flex-start;
  align-items: center;
  gap: var(--s-2);
  max-width: calc(100% + var(--s-4));
  margin: 0 calc(var(--s-2) * -1);
  padding: 2px var(--s-2);
  border-radius: var(--r-md);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  display: inline-flex;
}

.activity-head:hover {
  background: var(--sunken);
  color: var(--ink);
}

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

.activity-count {
  color: var(--ink-3);
  font-weight: var(--w-regular);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.activity-chevron {
  color: var(--ink-3);
  transition: rotate var(--dur) var(--ease);
  place-items: center;
  display: grid;
}

.activity-chevron svg {
  width: 12px;
  height: 12px;
}

.activity.open .activity-chevron {
  rotate: 180deg;
}

.activity-list {
  gap: var(--s-1);
  padding-left: var(--s-3);
  border-left: 1px solid var(--line);
  font-size: var(--t-sm);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  animation: fade var(--dur) var(--ease);
  flex-direction: column;
  margin-left: 3px;
  display: flex;
}

.activity-list.solo {
  border-left: 0;
  margin-left: 0;
  padding-left: 0;
  animation: none;
}

.step {
  gap: var(--s-3);
  display: flex;
}

.step > * {
  flex: 1;
  min-width: 0;
}

.turn-origin {
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-3);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

.turn-origin b {
  font-weight: var(--w-medium);
  color: var(--ink-2);
}

.thinking {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  animation: glint 1.8s linear infinite, fade var(--dur) var(--ease);
  align-self: flex-start;
  -webkit-mask-image: linear-gradient(90deg, #0003 0% 35%, #000 50%, #0003 65% 100%);
  mask-image: linear-gradient(90deg, #0003 0% 35%, #000 50%, #0003 65% 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
}

@keyframes glint {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }

  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

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

@keyframes pulse {
  0%, 100% {
    opacity: .3;
  }

  50% {
    opacity: 1;
  }
}

.empty {
  gap: var(--s-5);
  flex-direction: column;
  display: flex;
}

.empty h2 {
  font-size: var(--t-xl);
  font-weight: var(--w-semibold);
  letter-spacing: -.02em;
  margin: 0;
}

.openers {
  align-items: flex-start;
  gap: var(--s-2);
  flex-direction: column;
  display: flex;
}

.next-steps {
  align-items: center;
  gap: var(--s-2);
  animation: fade var(--dur) var(--ease);
  flex-wrap: wrap;
  display: flex;
}

.next-steps.expired > span {
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.next-step {
  align-items: center;
  gap: var(--s-1);
  max-width: 100%;
  min-height: 32px;
  padding: 5px var(--s-2) 5px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
  display: inline-flex;
}

.next-step svg {
  width: var(--icon-md);
  height: var(--icon-md);
  color: var(--ink-3);
  transition: color var(--dur) var(--ease), translate var(--dur) var(--ease);
  flex: none;
}

.next-step:hover {
  border-color: var(--accent-line);
  background: var(--accent-wash);
  color: var(--accent);
}

.next-step:hover svg {
  color: var(--accent);
  translate: 2px;
}

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

.next-step:active {
  translate: 0 1px;
}

@media (prefers-reduced-motion: reduce) {
  .next-step svg, .next-step:active {
    translate: none;
  }
}

@media (pointer: coarse) {
  .next-step {
    min-height: 44px;
  }
}

.opener {
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  color: var(--ink-2);
  border-radius: var(--r-sm);
  padding: 6px var(--s-2);
  font: inherit;
  font-size: var(--t-base);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  display: inline-flex;
}

.opener:hover {
  background: var(--sunken);
  color: var(--ink);
}

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

.opener:active {
  translate: 0 1px;
}

@media (pointer: coarse) {
  .opener {
    min-height: 44px;
  }
}

.dock {
  padding: 0 0 var(--s-4);
  background: linear-gradient(to top, var(--paper) 62%, transparent);
  flex: none;
  position: relative;
}

.jump-latest {
  z-index: 5;
  left: 50%;
  top: calc(-36px - var(--s-2));
  min-width: 44px;
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  animation: rise var(--dur) var(--ease);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  place-items: center;
  display: grid;
  position: absolute;
  translate: -50%;
}

.jump-latest:hover {
  background: var(--sunken);
  color: var(--ink);
}

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

.jump-latest svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.jump-dots {
  align-items: center;
  gap: 4px;
  height: 16px;
  display: inline-flex;
  translate: 0 1px;
}

.jump-dots span {
  border-radius: var(--r-full);
  opacity: .4;
  background: currentColor;
  width: 5px;
  height: 5px;
  animation: 1.3s infinite jump-typing;
}

.jump-dots span:nth-child(2) {
  animation-delay: .14s;
}

.jump-dots span:nth-child(3) {
  animation-delay: .28s;
}

@keyframes jump-typing {
  0% {
    opacity: .4;
    animation-timing-function: cubic-bezier(.3, 0, .4, 1);
    translate: 0;
    scale: .9;
  }

  22% {
    opacity: 1;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    translate: 0 -3px;
    scale: 1.05;
  }

  48% {
    opacity: .75;
    translate: 0;
    scale: 1;
  }

  100% {
    opacity: .4;
    translate: 0;
    scale: .9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jump-latest {
    animation: none;
  }

  .jump-dots span {
    opacity: .7;
    animation: none;
  }
}

.dock-inner {
  width: min(var(--column), 100% - var(--s-6));
  margin: 0 auto;
}

.composer {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-4);
  gap: var(--s-1);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
}

.composer-row {
  align-items: center;
  gap: var(--s-2);
  display: flex;
}

.composer-row .spacer {
  flex: 1;
}

.composer-row .where {
  font-size: var(--t-xs);
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.composer:focus-within {
  border-color: var(--line-strong);
}

.composer textarea {
  --rows: 4;
  --leading: 1.55;
  --pad-y: 7px;
  resize: none;
  width: 100%;
  padding: var(--pad-y) 0;
  line-height: var(--leading);
  max-height: calc(var(--rows) * var(--leading) * 1em + var(--pad-y) * 2);
  background: none;
  border: 0;
  outline: 0;
  flex: none;
}

.composer textarea::placeholder {
  color: var(--ink-2);
}

.send {
  border-radius: var(--r-full);
  background: var(--accent-fill);
  width: 32px;
  height: 32px;
  color: var(--on-accent);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  border: 0;
  flex: none;
  place-items: center;
  display: grid;
}

.send:hover:not(:disabled) {
  background: var(--accent-fill-hover);
}

.send:disabled {
  background: var(--sunken-2);
  color: var(--ink-3);
  cursor: default;
}

.send svg {
  width: 16px;
  height: 16px;
}

.send.is-stop {
  background: var(--ink);
  color: var(--paper);
}

.send.is-stop:hover {
  background: color-mix(in oklch, var(--ink) 82%, var(--paper));
}

.stop-square {
  background: currentColor;
  border-radius: 2px;
  width: 10px;
  height: 10px;
}

.dock-meta {
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4) 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  display: flex;
}

.dock-meta .where {
  align-items: center;
  gap: var(--s-1);
  color: var(--ink-2);
  display: inline-flex;
}

.dock-meta kbd {
  font: inherit;
  color: var(--ink-2);
}

.dock-meta .spacer {
  margin-left: auto;
}

.approval {
  border: 1px solid var(--accent-line);
  background: var(--accent-wash);
  border-radius: var(--r-md);
  padding: var(--s-3);
  gap: var(--s-3);
  animation: rise var(--dur-slow) var(--ease);
  flex-direction: column;
  display: flex;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.approval .eyebrow {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  display: flex;
}

.approval .eyebrow svg {
  width: 14px;
  height: 14px;
  color: var(--accent);
}

.approval .what {
  font-size: var(--t-base);
  color: var(--ink);
  line-height: 1.6;
}

.approval .row {
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  display: flex;
}

.approval .row .spacer {
  margin-left: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-2);
  flex: 0 auto;
  min-width: 0;
}

.btn {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-4);
  min-height: 38px;
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  flex: none;
}

.btn:hover {
  background: var(--sunken);
}

.btn.primary {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}

.btn.primary:hover {
  background: var(--accent-fill-hover);
  border-color: var(--accent-fill-hover);
}

.btn.small {
  min-height: 30px;
  padding: 4px var(--s-3);
  font-size: var(--t-sm);
}

.btn.ghost {
  color: var(--ink-2);
  background: none;
  border-color: #0000;
}

.btn.ghost:hover {
  background: var(--sunken);
  color: var(--ink);
}

.plan {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--r-md);
  margin-bottom: var(--s-2);
  animation: rise var(--dur-slow) var(--ease);
  position: relative;
  overflow: hidden;
}

.plan-clear {
  z-index: 1;
  border-radius: var(--r-md);
  width: 26px;
  height: 26px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  place-items: center;
  display: grid;
  position: absolute;
  top: 5px;
  right: 4px;
}

.plan-clear:hover {
  background: var(--sunken-2);
  color: var(--ink);
}

.plan-clear svg {
  width: 14px;
  height: 14px;
}

.plan-head {
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2) 34px var(--s-2) var(--s-3);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: none;
  border: 0;
  display: flex;
}

.plan-head:hover {
  background: var(--sunken);
}

.plan-count {
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.plan-now {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.plan-chevron {
  color: var(--ink-3);
  transition: rotate var(--dur) var(--ease);
  flex: none;
  place-items: center;
  display: grid;
}

.plan-chevron svg {
  width: 12px;
  height: 12px;
}

.plan.open .plan-chevron {
  rotate: 180deg;
}

.plan-list {
  padding: var(--s-1) var(--s-3) var(--s-3);
  flex-direction: column;
  gap: 2px;
  max-height: 40vh;
  margin: 0;
  list-style: none;
  display: flex;
  overflow-y: auto;
}

.plan-item {
  gap: var(--s-2);
  font-size: var(--t-sm);
  grid-template-columns: 18px 1fr;
  align-items: start;
  line-height: 1.45;
  display: grid;
}

.plan-mark {
  height: 20px;
  color: var(--ink-3);
  place-items: center;
  display: grid;
}

.plan-mark svg {
  width: 12px;
  height: 12px;
}

.plan-text {
  flex-direction: column;
  padding: 1px 0;
  display: flex;
}

.plan-note {
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.plan-item.todo {
  color: var(--ink-3);
}

.plan-item.doing {
  color: var(--ink);
  font-weight: var(--w-medium);
}

.plan-item.queued .plan-mark:before {
  content: "";
  border: 1px dashed var(--ink-3);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}

.plan-item.done, .plan-item.skipped, .plan-item.done .plan-mark, .plan-item.skipped .plan-mark {
  color: var(--ink-3);
}

.plan-item.done .plan-title, .plan-item.skipped .plan-title {
  text-decoration: line-through;
}

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

.plan-add {
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
  display: flex;
}

.plan-add input {
  min-width: 0;
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  flex: 1;
}

.plan-add input::placeholder {
  color: var(--ink-3);
}

.plan-add button {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  background: var(--sunken-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  flex: none;
}

.plan-add button:hover:not(:disabled) {
  background: var(--raised);
}

.plan-add button:disabled {
  opacity: .45;
  cursor: default;
}

.asking {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--r-md);
  padding: var(--s-3);
  gap: var(--s-3);
  box-shadow: var(--shadow-sm);
  animation: rise var(--dur-slow) var(--ease);
  flex-direction: column;
  display: flex;
}

.asking .eyebrow {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  display: flex;
}

.asking .eyebrow svg {
  width: 14px;
  height: 14px;
}

.asking .what {
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  margin: 0;
  line-height: 1.5;
}

.asking .why {
  margin: calc(var(--s-2) * -1) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.asking .row {
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  min-height: 38px;
  display: flex;
}

.asking .row .spacer {
  font-size: var(--t-xs);
  color: var(--ink-3);
  flex: 0 auto;
  min-width: 0;
  margin-left: auto;
}

.asking .row .spacer kbd {
  font: inherit;
  font-weight: var(--w-semibold);
  color: var(--ink-2);
}

.choices {
  gap: var(--s-1);
  flex-direction: column;
  display: flex;
}

.choice {
  align-items: start;
  gap: var(--s-3);
  text-align: left;
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: var(--r-md);
  width: 100%;
  padding: var(--s-2) var(--s-3);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  grid-template-columns: auto 1fr;
  display: grid;
}

.choice:hover {
  border-color: var(--line-strong);
  background: var(--sunken);
}

.choice.dim {
  opacity: .5;
}

.choice.dim:hover {
  opacity: 1;
}

.choice.custom {
  cursor: text;
}

.choice.custom input {
  color: var(--ink);
  font: inherit;
  font-size: var(--t-sm);
  background: none;
  border: 0;
  outline: none;
  width: 100%;
  padding: 0;
}

.choice.custom input::placeholder {
  color: var(--ink-3);
}

.choice-key.done {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-inverse);
}

.choice-key svg {
  width: 12px;
  height: 12px;
}

.choice:active {
  transform: translateY(1px);
}

.choice.on {
  border-color: var(--line-strong);
  background: var(--sunken-2);
}

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

.choice-label {
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  align-items: center;
  gap: var(--s-2);
  display: flex;
}

.tab-hint {
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-regular);
  color: var(--ink-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 5px;
  line-height: 1.5;
}

.choice-desc {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 1.4;
}

.choice-key {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  width: 22px;
  height: 22px;
  color: var(--ink-3);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
  border-bottom-width: 2px;
  border-radius: 6px;
  place-items: center;
  margin-top: 1px;
  line-height: 1;
  display: grid;
}

.choice:hover .choice-key {
  border-color: var(--line-strong);
  color: var(--ink-2);
}

.choice.on .choice-key {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--ink-inverse);
}

.browser {
  top: var(--s-3);
  right: var(--s-3);
  width: clamp(240px, (100% - var(--column)) / 2 - var(--s-4), var(--card-w));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  z-index: 20;
  animation: settle var(--dur-slow) var(--ease);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  will-change: transform;
  position: absolute;
  overflow: hidden;
}

.browser.corner:hover {
  border-color: var(--line-strong);
}

.browser-restore {
  position: relative;
}

.browser-restore .badge {
  background: var(--accent);
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.2s ease-in-out infinite pulse;
  position: absolute;
  top: 5px;
  right: 5px;
}

.browser-strip {
  align-items: center;
  gap: var(--s-2);
  min-height: 32px;
  margin-bottom: var(--s-2);
  padding: 0 var(--s-1) 0 var(--s-3);
  border-top: 1px solid var(--line);
  background: var(--paper);
  font-size: var(--t-sm);
  color: var(--ink-2);
  display: flex;
}

.browser-strip .dot {
  background: var(--ink-3);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.browser-strip .dot.live {
  background: var(--good);
}

.browser-strip .dot.busy {
  background: var(--accent);
  animation: 1.2s ease-in-out infinite pulse;
}

.browser-strip .path {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: var(--w-medium);
  flex: 1;
  overflow: hidden;
}

.browser-strip .btn.small {
  min-height: 28px;
}

@keyframes settle {
  from {
    opacity: 0;
    transform: scale(.97);
  }
}

.browser.focused {
  z-index: 60;
  width: min(1120px, 92vw);
  box-shadow: var(--shadow-float);
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
}

.scrim {
  background: var(--scrim);
  z-index: 50;
  animation: fade var(--dur-slow) var(--ease);
  border: 0;
  padding: 0;
  position: fixed;
  inset: 0;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.browser-bar.draggable {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.browser-bar.draggable:active {
  cursor: grabbing;
}

.browser-bar {
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--line);
  background: var(--raised);
  display: flex;
}

.browser-bar .dot {
  background: var(--ink-3);
  border-radius: 50%;
  flex: none;
  width: 7px;
  height: 7px;
}

.browser-bar .dot.live {
  background: var(--good);
}

.browser-bar .dot.busy {
  background: var(--accent);
  animation: 1.2s ease-in-out infinite pulse;
}

.browser-bar .path {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  flex: 1;
  overflow: hidden;
}

.shot-empty {
  justify-content: center;
  align-items: center;
  gap: var(--s-1);
  padding: var(--s-4);
  text-align: center;
  background: var(--sunken);
  color: var(--ink-2);
  font-size: var(--t-sm);
  flex-direction: column;
  display: flex;
  position: absolute;
  inset: 0;
}

.shot-empty b {
  color: var(--ink);
  font-weight: var(--w-semibold);
}

.browser-shot {
  aspect-ratio: 1440 / 900;
  background: var(--sunken);
  cursor: zoom-in;
  border: 0;
  width: 100%;
  padding: 0;
  display: block;
  position: relative;
  overflow: hidden;
}

.browser-shot img {
  object-fit: cover;
  object-position: top left;
  width: 100%;
  height: 100%;
  display: block;
}

.browser.focused .browser-shot {
  cursor: default;
  aspect-ratio: auto;
  height: min(640px, 72vh);
}

.browser.focused .browser-shot img {
  object-fit: contain;
  object-position: center;
}

.browser.driving .browser-shot {
  cursor: crosshair;
}

.browser.driving {
  border-color: var(--accent);
  box-shadow: var(--shadow-float), 0 0 0 3px var(--accent-wash);
}

.shot-hint {
  padding: var(--s-2) var(--s-3);
  font-size: var(--t-xs);
  color: var(--on-overlay);
  background: var(--overlay-ink);
  text-align: left;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  position: absolute;
  inset: auto 0 0;
}

.browser.corner:hover .shot-hint {
  opacity: 1;
}

.browser-foot {
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  white-space: nowrap;
  border-top: 1px solid var(--line);
  background: var(--raised);
  font-size: var(--t-xs);
  color: var(--ink-3);
  display: flex;
}

.browser-foot b {
  font-weight: var(--w-medium);
  color: var(--ink-2);
}

.browser-where {
  text-overflow: ellipsis;
  min-width: 0;
  overflow: hidden;
}

.browser-foot .spacer {
  margin-left: auto;
}

.driving-note {
  color: var(--accent);
  font-weight: var(--w-medium);
}

.anchor {
  display: inline-flex;
  position: relative;
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(.96)translateY(-4px);
  }
}

.notice {
  color: var(--danger);
  font-size: var(--t-sm);
}

.voice {
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  display: inline-flex;
}

.voice-word {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 16rem;
  overflow: hidden;
}

.voice.error .voice-word {
  color: var(--danger);
  white-space: normal;
  max-width: 18rem;
  line-height: 1.35;
}

.voice-btn {
  border-radius: var(--r-full);
  width: 32px;
  height: 32px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  display: grid;
  position: relative;
}

.voice-btn svg {
  width: 16px;
  height: 16px;
  position: relative;
}

.voice-btn:hover:not(:disabled) {
  background: var(--sunken);
  color: var(--ink);
}

.voice-btn:disabled {
  opacity: .45;
  cursor: default;
}

.voice.listening .voice-btn, .voice.speaking .voice-btn {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: var(--on-accent);
}

.voice.error .voice-btn {
  color: var(--danger);
  border-color: var(--danger);
}

@media (pointer: coarse) {
  .voice-btn {
    width: 44px;
    height: 44px;
  }
}

.voice-btn.is-primary {
  color: var(--ink-2);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background: none;
}

.voice-btn.is-primary:hover:not(:disabled) {
  background: var(--sunken);
  color: var(--ink);
}

.voice-btn.is-live, .voice-btn.is-live:hover:not(:disabled) {
  background: var(--ink);
  color: var(--paper);
}

.voice-btn.is-live:disabled {
  opacity: 1;
}

.voice-dots {
  align-items: center;
  gap: 3px;
  height: 18px;
  display: inline-flex;
}

.voice-dots span {
  width: 4px;
  height: calc(4px + var(--v, 0) * 14px);
  border-radius: var(--r-full);
  background: currentColor;
  transition: height 90ms cubic-bezier(.34, 1.56, .64, 1);
}

.voice-dots.is-thinking span {
  height: 4px;
  animation: 1.3s infinite jump-typing;
}

.voice-dots.is-thinking span:nth-child(2) {
  animation-delay: .14s;
}

.voice-dots.is-thinking span:nth-child(3) {
  animation-delay: .28s;
}

@media (prefers-reduced-motion: reduce) {
  .voice-dots span {
    transition: none;
  }

  .voice-dots.is-thinking span {
    opacity: .7;
    animation: none;
  }

  .pip, .plan-dot, .browser-restore .dot, .browser-bar .dot.busy {
    animation: none;
  }

  .thinking {
    color: var(--ink-2);
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (max-width: 640px) {
  :root {
    --t-base: 1rem;
    --t-chat: 1rem;
    --t-md: 1rem;
    --t-sm: .875rem;
    --t-xs: .8125rem;
  }
}

@media (pointer: coarse) {
  :root {
    --icon-sm: 14px;
    --icon-md: 18px;
    --icon-lg: 20px;
  }

  .icon-btn svg, .rail-item svg, .reply-action svg, .feed-icon-btn svg, .feed-cta svg, .voice-btn svg, .alert-more svg, .rail-chat-more svg {
    width: var(--icon-lg);
    height: var(--icon-lg);
  }

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

  .stop-square {
    width: 12px;
    height: 12px;
  }

  .icon-btn, .send {
    width: 44px;
    height: 44px;
  }

  .btn {
    min-height: 44px;
  }

  .auto-btn {
    min-height: 44px;
    padding-inline: var(--s-3);
  }

  .browser-strip {
    min-height: 44px;
  }

  textarea, input:not([type="checkbox"]):not([type="radio"]), select {
    font-size: max(1rem, var(--t-base));
  }
}

@media (max-width: 860px) {
  .browser {
    width: min(var(--column), 100% - var(--s-6));
    max-width: none;
    margin: 0;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50%;
  }

  .browser.focused {
    width: 94vw;
    max-width: none;
    margin: 0;
    position: fixed;
    top: 50%;
    translate: -50% -50%;
  }

  .thread {
    padding-top: var(--browser-h, 0px);
    transition: padding-top var(--dur-slow) var(--ease);
  }

  .main, .app.rail-collapsed .main {
    border: 0;
    border-radius: 0;
    margin: 0;
  }
}

@media (max-width: 900px) {
  .turn-assistant {
    font-size: var(--t-base);
  }

  .topbar {
    padding: var(--s-2) var(--s-4);
  }
}

.turn-card {
  width: 100%;
  margin-block: var(--s-2);
}

.turn-view {
  margin-top: var(--s-2);
  margin-bottom: var(--s-2);
}

.approval.as-message .msg {
  background: var(--surface);
}

.approval.as-message > .spacer {
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.msg {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}

.msg-failed {
  border-color: var(--danger);
}

.msg-head {
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  background: var(--sunken);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  display: flex;
}

.msg-icon {
  color: var(--ink-3);
  flex: none;
  place-items: center;
  display: grid;
}

.msg-icon svg {
  width: 14px;
  height: 14px;
}

.msg-failed .msg-icon {
  color: var(--danger);
}

.msg-to {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-weight: var(--w-medium);
  color: var(--ink);
  flex: 1;
  overflow: hidden;
}

.msg-to-label {
  color: var(--ink-3);
  font-weight: var(--w-regular);
}

.msg-pill {
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  background: var(--sunken-2);
  color: var(--ink-2);
  flex: none;
  padding: 2px 9px;
}

.msg-pill-sent {
  background: var(--good-wash);
  color: var(--good);
}

.msg-pill-failed {
  background: var(--danger-wash);
  color: var(--danger);
}

.msg-pill-already {
  background: var(--sunken-2);
  color: var(--ink-2);
}

.msg-body {
  padding: var(--s-3);
}

.msg-body p {
  font-size: var(--t-base);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
  line-height: 1.5;
}

.msg-body .msg-note {
  margin-top: var(--s-2);
  color: var(--ink-3);
  font-size: var(--t-xs);
}

.msg-body textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  width: 100%;
  padding: var(--s-2);
  font: inherit;
  font-size: var(--t-base);
  resize: none;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  line-height: 1.5;
}

.msg-body textarea:focus {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.msg-actions {
  gap: var(--s-2);
  padding: 0 var(--s-3) var(--s-3);
  display: flex;
}

.msg-actions .btn {
  align-items: center;
  gap: var(--s-2);
  min-height: 34px;
  display: inline-flex;
}

.msg-actions .btn svg {
  width: 14px;
  height: 14px;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.view-card {
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-direction: column;
  display: flex;
}

.view-card.active {
  border-color: var(--accent-line);
}

.view-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-2);
  display: flex;
}

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

.view-titles h3 {
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--ink);
  margin: 0;
}

.view-titles span {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.view-actions {
  align-items: center;
  gap: var(--s-1);
  flex: none;
  display: flex;
}

.view-action svg {
  width: 14px;
  height: 14px;
}

.btn.view-action {
  align-items: center;
  gap: var(--s-1);
  display: inline-flex;
}

.stat-row {
  gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(4.25rem, 1fr));
  margin: 0;
  display: grid;
}

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

.stat dt {
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.stat dd {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.day-strip {
  gap: var(--s-1);
  padding: var(--s-3) 0 0;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(7, 1fr);
  margin: 0;
  list-style: none;
  display: grid;
}

.day-strip li {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  display: flex;
}

.day-strip .day {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.day-strip .count {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.view-lines {
  gap: var(--s-2);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.view-followup {
  color: var(--ink-2);
}

.view-lines li {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink);
  display: flex;
}

.issue-pill {
  padding: 2px var(--s-2);
  border-radius: var(--r-full);
  background: var(--warn-wash);
  color: var(--warn);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  flex: none;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.issue-pill svg {
  width: 12px;
  height: 12px;
}

.timecard-rows {
  gap: var(--s-3);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.timecard-row-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  display: flex;
}

.timecard-rows .kv-list > div:last-child {
  border-bottom: 0;
}

.view-empty, .view-note {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
}

.view-unavailable {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0;
}

.view-error {
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.view-partial {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  background: var(--sunken);
  font-size: var(--t-sm);
  color: var(--ink);
  margin: 0;
}

.workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.workspace > .surface {
  flex: 42%;
  min-width: 0;
}

.view-panel {
  background: var(--surface);
  flex-direction: column;
  min-height: 0;
  display: flex;
}

.view-panel.wide {
  min-width: 480px;
  max-width: 64rem;
  margin: 0 var(--s-3) var(--s-3) 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  animation: panel-in var(--dur-slow) var(--ease);
  flex: 58%;
  overflow: hidden;
}

.workspace:has(.view-panel.wide) > .surface {
  min-width: 360px;
}

.view-panel.full {
  z-index: 90;
  animation: panel-up var(--dur-slow) var(--ease);
  position: fixed;
  inset: 0;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes panel-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .view-panel.wide, .view-panel.full {
    animation: none;
  }
}

.view-panel-head {
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line);
  flex: none;
  display: flex;
}

.view-panel-head .view-titles {
  flex: 1;
}

.view-panel-head h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  color: var(--ink);
  outline: none;
  margin: 0;
}

.view-panel-head .view-titles > span {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.view-updated {
  color: var(--accent);
  font-weight: var(--w-medium);
}

.view-back {
  --size: 34px;
  margin-top: calc((var(--t-lg) * 1.5 - var(--size)) / 2);
  margin-left: calc(var(--s-2) * -1);
  flex: none;
}

@media (pointer: coarse) {
  .view-back {
    --size: 44px;
  }
}

.view-panel-body {
  min-height: 0;
  padding: var(--s-4);
  gap: var(--s-5);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow: auto;
}

.view-section {
  gap: var(--s-2);
  flex-direction: column;
  display: flex;
}

.view-section h3 {
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--ink);
  margin: 0;
}

.view-filter {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink);
  display: inline-flex;
}

.data-table {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: calc(100dvh - 220px);
  overflow: auto;
}

.data-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--t-sm);
}

.data-table th, .data-table td {
  padding: var(--s-2) var(--s-3);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  color: var(--ink);
}

.data-table thead th {
  z-index: 1;
  background: var(--raised);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
  position: sticky;
  top: 0;
}

.data-table th:first-child, .data-table td:first-child {
  background: var(--surface);
  position: sticky;
  left: 0;
}

.data-table thead th:first-child {
  z-index: 2;
  background: var(--raised);
}

.data-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table th button {
  all: unset;
  cursor: pointer;
  align-items: center;
  gap: 4px;
  display: inline-flex;
}

.data-table th button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.sort-mark {
  color: var(--ink-3);
  min-width: 9px;
  font-size: 9px;
}

.week-grid {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  max-height: calc(100dvh - 220px);
  overflow: auto;
}

.week-grid table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--t-sm);
}

.week-grid th, .week-grid td {
  border-bottom: 1px solid var(--line);
  padding: var(--s-2);
  vertical-align: top;
  min-width: 5.5rem;
}

.week-grid thead th {
  z-index: 1;
  background: var(--raised);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
  text-align: left;
  position: sticky;
  top: 0;
}

.week-grid .who {
  z-index: 1;
  background: var(--surface);
  text-align: left;
  min-width: 8rem;
  max-width: 10rem;
  font-weight: var(--w-medium);
  color: var(--ink);
  position: sticky;
  left: 0;
}

.week-grid thead .who {
  z-index: 2;
  background: var(--raised);
}

.week-grid .open-row .who {
  color: var(--ink-2);
}

.week-grid td {
  display: table-cell;
}

.shift-chip {
  margin-bottom: var(--s-1);
  padding: 4px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  color: var(--ink);
  border: 1px solid #0000;
  flex-direction: column;
  gap: 1px;
  display: flex;
}

.shift-chip .t {
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.shift-chip .r, .shift-chip .n {
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.shift-chip.draft {
  background: var(--surface);
  border: 1px dashed var(--accent-line);
}

.shift-chip.open {
  background: var(--sunken);
}

.shift-chip.ended {
  background: var(--sunken);
  color: var(--ink-3);
}

.shift-list {
  gap: var(--s-4);
  flex-direction: column;
  display: flex;
}

.shift-list h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
}

.shift-list ul {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.shift-row {
  gap: 2px var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  grid-template-columns: 1fr auto;
  display: grid;
}

.shift-row .who {
  font-weight: var(--w-medium);
  color: var(--ink);
}

.shift-row .when {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.shift-row .what {
  font-size: var(--t-xs);
  color: var(--ink-2);
  grid-column: 1 / -1;
}

.shift-row.ended .who, .shift-row.ended .when {
  color: var(--ink-3);
}

.findings {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.findings li {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line);
}

.findings p {
  font-size: var(--t-sm);
  color: var(--ink);
  margin: 4px 0 0;
}

.findings .f-fix {
  color: var(--ink-2);
}

.f-head {
  gap: var(--s-2);
  align-items: baseline;
  display: flex;
}

.f-rule {
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink);
  text-transform: capitalize;
}

.f-sev {
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.kv-list {
  flex-direction: column;
  margin: 0;
  display: flex;
}

.kv-list > div {
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--t-sm);
  display: flex;
}

.kv-list dt {
  color: var(--ink-2);
}

.kv-list dd {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.hours-chart {
  margin: 0;
}

.hours-chart svg {
  width: 100%;
  max-width: 44rem;
  height: auto;
}

.hc-name {
  fill: var(--ink);
  font-size: 12px;
}

.hc-value {
  fill: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
}

.hc-bar {
  fill: var(--accent);
}

.hc-bar.over {
  fill: var(--warn);
}

.hc-limit {
  stroke: var(--ink-3);
  stroke-width: 1px;
  stroke-dasharray: 4 3;
}

.hc-limit-label {
  fill: var(--ink-2);
  font-size: 11px;
}

@media (max-width: 1023px) {
  .data-table {
    border: 0;
    max-height: none;
  }

  .data-table thead {
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
  }

  .data-table table, .data-table tbody, .data-table tr, .data-table td {
    width: 100%;
    display: block;
  }

  .data-table tr {
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
  }

  .data-table td {
    justify-content: space-between;
    gap: var(--s-3);
    white-space: normal;
    text-align: right;
    background: none;
    border: 0;
    padding: 3px 0;
    display: flex;
    position: static;
  }

  .data-table td:before {
    content: attr(data-label);
    color: var(--ink-2);
    text-align: left;
  }

  .data-table td:first-child {
    font-weight: var(--w-semibold);
    position: static;
  }

  .data-table td:first-child:before {
    content: none;
  }

  .data-table td:empty {
    display: none;
  }
}

.mem-panel {
  background: var(--surface);
  width: min(520px, 100%);
  height: 100%;
  padding: var(--s-5);
  gap: var(--s-5);
  box-shadow: var(--shadow-float);
  flex-direction: column;
  display: flex;
  overflow-y: auto;
}

.mem-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  display: flex;
}

.mem-head h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  outline: none;
  margin: 0;
}

.mem-head span {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.mem-group h3 {
  margin: 0 0 var(--s-2);
  font-size: var(--t-sm);
  font-weight: var(--w-semibold);
  color: var(--ink-2);
}

.mem-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mem-group li {
  padding: var(--s-3) 0;
  border-top: 1px solid var(--line);
}

.mem-row {
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  display: flex;
}

.mem-text {
  font-size: var(--t-base);
  color: var(--ink);
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.mem-meta {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.mem-actions {
  gap: var(--s-1);
  flex: none;
  display: flex;
}

.mem-editor {
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-direction: column;
  display: flex;
}

.mem-editor select, .mem-editor input[type="text"], .mem-editor input[type="number"] {
  font: inherit;
  font-size: var(--t-sm);
  padding: 6px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.mem-inline {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  display: inline-flex;
}

.mem-choices {
  gap: var(--s-2) var(--s-4);
  font-size: var(--t-sm);
  border: 0;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  display: flex;
}

.mem-choices label {
  align-items: center;
  gap: var(--s-1);
  display: inline-flex;
}

.mem-roles {
  gap: var(--s-2);
  flex-direction: column;
  display: flex;
}

.mem-roles label {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  display: flex;
}

.mem-foot {
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.interview-top {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  display: flex;
}

.interview-count {
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.asking.interview.loading {
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.mem-ask {
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink-2);
  display: flex;
}

.mem-editor input[type="time"] {
  font: inherit;
  font-size: var(--t-sm);
  padding: 6px var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.mem-editor .mem-inline input[type="number"] {
  width: 5.5rem;
}

.feed-page {
  width: min(var(--column), 100% - var(--s-6));
  padding: var(--s-4) 0 var(--s-8);
  animation: fade var(--dur) var(--ease);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
}

.feed-page h2:focus {
  outline: none;
}

.new-chat {
  justify-content: center;
  gap: var(--s-5);
  min-height: 0;
  width: min(calc(var(--column) + 8px), 100% - var(--s-6) + 8px);
  padding: var(--s-6) 4px 14vh;
  flex-direction: column;
  flex: 1;
  margin: 0 auto;
  display: flex;
  overflow-y: auto;
}

.new-chat h2 {
  font-size: var(--t-xl);
  font-weight: var(--w-semibold);
  letter-spacing: -.02em;
  animation: fade var(--dur) var(--ease);
  margin: 0;
}

.new-chat h2:focus {
  outline: none;
}

.new-chat-skel {
  align-items: center;
  min-height: 34px;
  display: flex;
}

.new-chat-openers {
  gap: 2px;
  min-height: 120px;
}

.feed-list {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.feed-list > li + li {
  border-top: 1px solid var(--line);
}

.feed-card {
  gap: var(--s-2);
  padding: var(--s-4) 0;
  animation: fade var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
}

.feed-meta {
  align-items: center;
  gap: var(--s-2);
  min-height: 28px;
  margin: calc(var(--s-1) * -1) calc(var(--s-2) * -1) calc(var(--s-1) * -1) 0;
  font-size: var(--t-xs);
  color: var(--ink-3);
  display: flex;
}

.feed-head {
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  display: flex;
}

.feed-head .feed-title {
  flex: 1;
  min-width: 0;
}

.feed-new {
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
  width: 6px;
  height: 6px;
}

.feed-when {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-3);
  white-space: nowrap;
  flex: none;
  display: inline-flex;
}

.feed-severity {
  align-items: center;
  gap: var(--s-1);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  display: inline-flex;
}

.feed-severity svg {
  color: var(--danger);
  flex: none;
}

.feed-tools {
  flex: none;
  align-items: center;
  display: flex;
}

.feed-menu-anchor {
  display: inline-flex;
  position: relative;
}

.feed-icon-btn {
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.feed-icon-btn:hover, .feed-icon-btn[aria-expanded="true"] {
  background: var(--sunken);
  color: var(--ink);
}

.feed-title {
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  color: var(--ink);
  text-wrap: pretty;
  margin: 0;
  line-height: 1.4;
}

.feed-title:focus {
  outline: none;
}

.feed-title:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.feed-body {
  margin: calc(var(--s-1) * -1) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
}

.feed-foot {
  align-items: center;
  gap: var(--s-1);
  margin: var(--s-1) 0 0 calc(var(--s-2) * -1);
  flex-wrap: wrap;
  display: flex;
}

.feed-foot .feed-cta {
  margin-left: 0;
}

.feed-foot .btn {
  white-space: normal;
  text-align: start;
  max-width: 100%;
}

.feed-acted {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.feed-text-btn {
  padding: 5px var(--s-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
}

.feed-text-btn:hover {
  background: var(--sunken);
  color: var(--ink);
}

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

@media (pointer: coarse) {
  .feed-text-btn {
    min-height: 44px;
  }
}

.feed-more-cards {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  align-self: flex-start;
}

.feed-hidden {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-2) var(--s-1) var(--s-4);
  font-size: var(--t-sm);
  color: var(--ink-2);
  animation: fade var(--dur) var(--ease);
  display: flex;
}

.feed-empty {
  font-size: var(--t-base);
  color: var(--ink-2);
  margin: 0;
}

.feed-error {
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-2);
  flex-wrap: wrap;
  margin: 0;
  display: flex;
}

@media (pointer: coarse) {
  .feed-icon-btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feed-card, .feed-hidden {
    animation: none;
  }
}

.rail {
  gap: var(--s-3);
  width: 264px;
  padding: var(--s-2) var(--s-2) var(--s-3);
  background: none;
  flex-direction: column;
  flex: none;
  display: flex;
  overflow: hidden;
}

.app.rail-collapsed .rail {
  display: none;
}

.rail-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  padding-left: var(--s-2);
  min-height: 28px;
  display: flex;
}

.rail-nav, .rail-chats ul {
  flex-direction: column;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.rail-chats ul {
  gap: 2px;
}

.rail-item {
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: 28px;
  padding: 4px var(--s-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  display: flex;
}

.rail-item svg {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
}

.rail-item:hover {
  background: var(--rail-hover);
  color: var(--ink);
}

.rail-item[aria-current="page"] {
  background: var(--sunken-2);
  color: var(--ink);
  font-weight: var(--w-medium);
}

.rail-label {
  flex: 1;
  min-width: 0;
}

.rail-count {
  color: var(--accent);
  text-align: right;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  flex: none;
  margin-left: auto;
}

.rail-chats {
  gap: var(--s-1);
  overscroll-behavior: contain;
  min-height: 0;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
  flex-direction: column;
  flex: 1;
  display: flex;
  overflow-y: auto;
}

.rail-heading {
  padding: var(--s-2) var(--s-2) 0;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  margin: 0;
}

.rail-empty {
  padding: 0 var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0;
}

.rail-chat {
  border-radius: var(--r-sm);
  transition: background var(--dur) var(--ease);
  align-items: center;
  display: flex;
  position: relative;
}

.rail-chat:hover, .rail-chat.menu-open {
  background: var(--rail-hover);
}

.rail-chat.menu-open {
  z-index: 20;
}

.rail-chat:has([aria-current="page"]) {
  background: var(--sunken-2);
}

.rail-chat.is-pinned + .rail-chat:not(.is-pinned) {
  margin-top: var(--s-3);
}

.rail-chat-main {
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  min-height: 32px;
  padding: 6px var(--s-2);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  background: none;
  border: 0;
  flex: 1;
  display: flex;
}

.rail-chat:hover .rail-chat-main, .rail-chat.menu-open .rail-chat-main, .rail-chat-main:focus-visible {
  color: var(--ink);
}

.rail-chat-main[aria-current="page"] {
  color: var(--ink);
  font-weight: var(--w-medium);
}

.rail-chat-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.rail-pin {
  color: var(--ink-3);
  flex: none;
  display: inline-flex;
}

.rail-pin svg {
  width: var(--icon-sm);
  height: var(--icon-sm);
}

.rail-chat-when {
  text-align: right;
  min-width: 24px;
  font-size: var(--t-xs);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.rail-chat-more-wrap {
  top: 50%;
  right: var(--s-1);
  position: absolute;
  translate: 0 -50%;
}

.rail-chat-more {
  border-radius: var(--r-sm);
  width: 24px;
  height: 24px;
  color: var(--ink-2);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
  background: none;
  border: 0;
  place-items: center;
  display: grid;
}

.rail-chat:hover .rail-chat-more, .rail-chat:focus-within .rail-chat-more, .rail-chat.menu-open .rail-chat-more {
  opacity: 1;
  pointer-events: auto;
}

.rail-chat:hover .rail-chat-when, .rail-chat:focus-within .rail-chat-when, .rail-chat.menu-open .rail-chat-when {
  visibility: hidden;
}

.rail-chat-more:hover {
  background: var(--line);
  color: var(--ink);
}

.rail-chat-more svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

@media (hover: none) {
  .rail-chat .rail-chat-when, .rail-chat:hover .rail-chat-when, .rail-chat:focus-within .rail-chat-when, .rail-chat.menu-open .rail-chat-when {
    visibility: visible;
    margin-right: 22px;
  }

  .rail-chat-more {
    opacity: 1;
    pointer-events: auto;
  }
}

@media (hover: none) and (pointer: coarse) {
  .rail-chat .rail-chat-when, .rail-chat:hover .rail-chat-when, .rail-chat:focus-within .rail-chat-when, .rail-chat.menu-open .rail-chat-when {
    min-width: 0;
    margin-right: 34px;
  }
}

.rail-rename, .bar-title-input {
  min-width: 0;
  font-size: var(--t-sm);
  padding: 5px var(--s-2);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.rail-rename {
  flex: 1;
  margin: 1px 0;
}

.rail-rename:focus, .bar-title-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
  outline: none;
}

.action-menu {
  z-index: 90;
  min-width: 168px;
  padding: var(--s-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-float);
  animation: pop var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
  position: absolute;
  top: calc(100% + 4px);
}

.action-menu.align-end {
  transform-origin: 100% 0;
  right: 0;
}

.action-menu.align-start {
  transform-origin: 0 0;
  left: 0;
}

.action-menu.opens-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.action-menu.opens-up.align-end {
  transform-origin: 100% 100%;
}

.action-menu.opens-up.align-start {
  transform-origin: 0 100%;
}

.action-menu button {
  border-radius: var(--r-sm);
  color: var(--ink);
  padding: 7px var(--s-2);
  font-size: var(--t-sm);
  text-align: left;
  cursor: pointer;
  background: none;
  border: 0;
}

.action-menu button:hover, .action-menu button:focus-visible {
  background: var(--sunken);
  outline: none;
}

.rail-toggle.wide-hidden {
  display: none;
}

.topbar-side {
  align-items: center;
  gap: 2px;
  min-width: 44px;
  display: flex;
}

.topbar-side.is-end {
  justify-content: flex-end;
}

.topbar-side .btn.small {
  align-items: center;
  gap: var(--s-1);
  display: inline-flex;
}

.topbar-side .btn.small svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.bar-title {
  min-width: 0;
  font: inherit;
  justify-content: center;
  margin: 0;
  display: flex;
}

.bar-title-text {
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  display: block;
  overflow: hidden;
}

.bar-title.is-page .bar-title-text {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
}

.bar-title-btn {
  border-radius: var(--r-sm);
  min-width: 0;
  max-width: 100%;
  color: var(--ink);
  cursor: pointer;
  background: none;
  border: 0;
  align-items: center;
  gap: 4px;
  padding: 4px 6px 4px 10px;
  display: inline-flex;
}

.bar-title-btn:hover, .bar-title-btn[aria-expanded="true"] {
  background: var(--sunken);
}

.bar-title-btn svg {
  width: var(--icon-sm, 14px);
  height: var(--icon-sm, 14px);
  color: var(--ink-3);
  flex: none;
}

.bar-title-input {
  text-align: center;
  width: min(28rem, 100%);
  font-weight: var(--w-medium);
}

.action-menu.align-center {
  transform-origin: top;
  left: 50%;
  translate: -50%;
}

@media (pointer: coarse) {
  .bar-title-btn {
    min-height: 44px;
  }
}

.page-scroll {
  scrollbar-gutter: stable both-edges;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.mem-panel.page {
  width: min(var(--column), 100% - var(--s-6));
  height: auto;
  padding: var(--s-5) 0 var(--s-7);
  box-shadow: none;
  background: none;
  margin: 0 auto;
  overflow: visible;
}

.page-loading {
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin: 0;
}

.page-error {
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
  display: flex;
}

.field-error {
  font-size: var(--t-xs);
  color: var(--ink-2);
  flex-basis: 100%;
  margin: 0;
}

.mem-panel .mem-item {
  padding: var(--s-3) 0;
}

.mem-panel .mem-text {
  font-size: var(--t-sm);
}

.mem-panel .mem-text > span:first-child {
  font-size: var(--t-base);
}

.row-controls {
  align-items: center;
  gap: var(--s-2);
  flex: none;
  display: flex;
}

.row-more {
  opacity: 0;
  transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease);
}

.mem-item:hover .row-more, .mem-item:focus-within .row-more, .row-more-wrap.menu-open .row-more {
  opacity: 1;
}

@media (hover: none) {
  .row-more {
    opacity: 1;
  }
}

.row-confirm {
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--ink);
  flex-wrap: wrap;
  display: flex;
}

.row-confirm span {
  margin-right: var(--s-1);
}

.auto-btn[aria-busy="true"] {
  cursor: progress;
}

.undo-bar:empty {
  display: none;
}

.undo-bar {
  bottom: var(--s-4);
  align-items: center;
  gap: var(--s-2);
  width: fit-content;
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--t-sm);
  color: var(--ink);
  margin: 0 auto;
  display: flex;
  position: sticky;
}

.rail-scrim {
  display: none;
}

@media (max-width: 860px) {
  .rail-hide {
    display: none;
  }

  .rail-head {
    min-height: 44px;
  }

  .rail, .app.rail-collapsed .rail {
    z-index: 70;
    background: var(--sunken);
    width: min(300px, 86vw);
    box-shadow: var(--shadow-float);
    visibility: hidden;
    transition: transform var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
    display: flex;
    position: fixed;
    inset: 0 auto 0 0;
    transform: translateX(-100%);
  }

  .rail.is-open, .app.rail-collapsed .rail.is-open {
    visibility: visible;
    transition: transform var(--dur-slow) var(--ease);
    transform: none;
  }

  .rail-scrim {
    z-index: 65;
    background: color-mix(in oklch, var(--shade) 24%, transparent);
    animation: fade var(--dur) var(--ease);
    border: 0;
    padding: 0;
    display: block;
    position: fixed;
    inset: 0;
  }

  .rail-toggle.wide-hidden {
    display: grid;
  }
}

@media (pointer: coarse) {
  .rail-item, .rail-chat-main {
    min-height: 44px;
  }

  .rail-chat-more {
    width: 40px;
    height: 40px;
  }

  .rail-chat-when {
    min-width: 40px;
  }

  .action-menu button {
    min-height: 44px;
  }
}

.alerts-page {
  width: min(820px, 100% - var(--s-6));
  padding: var(--s-6) 0 var(--s-8);
  gap: var(--s-3);
  flex-direction: column;
  margin: 0 auto;
  display: flex;
  container-type: inline-size;
}

.alerts-hint {
  margin: var(--s-4) 0 0;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.link-btn {
  font: inherit;
  color: var(--accent);
  cursor: pointer;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
}

.link-btn:hover {
  text-underline-offset: 2px;
  text-decoration: underline;
}

.link-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.mem-reset {
  margin-top: var(--s-4);
}

.alerts-list {
  gap: var(--s-3);
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.alerts-recos {
  gap: var(--s-3);
  flex-direction: column;
  display: flex;
}

.alerts-label {
  font-size: var(--t-sm);
  line-height: 16px;
  font-weight: var(--w-regular);
  color: var(--ink-2);
  margin: 0;
}

.alert-card {
  --alert-ease: cubic-bezier(.22, 1, .36, 1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  min-height: 72px;
  transition: border-color .15s ease, background .15s ease, opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  align-items: center;
  display: flex;
  position: relative;
}

.alert-card:hover {
  border-color: var(--line-strong);
}

.alert-card:has(.alert-card-main:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.alert-card.is-new {
  animation: alert-in .32s var(--alert-ease);
}

.alert-card.is-leaving {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

@keyframes alert-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.alert-card-main {
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
  padding: calc(var(--s-4) - 1px) var(--s-2) calc(var(--s-4) - 1px) calc(20px - 1px);
  border-radius: var(--r-lg);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  background: none;
  border: 0;
  flex: 1;
  display: flex;
}

.alert-card-main:focus-visible {
  outline: none;
}

.alert-status {
  width: 18px;
  color: var(--ink-3);
  flex: none;
  place-items: center;
  display: grid;
}

.alert-dot {
  border-radius: var(--r-full);
  background: var(--accent);
  width: 7px;
  height: 7px;
}

.alert-text {
  flex-direction: column;
  min-width: 0;
  display: flex;
}

.alert-name, .alert-meta {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.alert-name {
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  line-height: 22px;
}

.alert-meta {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 18px;
}

.alert-more-wrap {
  padding-right: var(--s-3);
  flex: none;
}

.alert-more {
  width: 32px;
  height: 32px;
  color: var(--ink);
}

.alert-more svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.alert-card.is-paused .alert-dot {
  background: var(--line-strong);
}

.alert-card.is-paused .alert-name {
  color: var(--ink-2);
}

.alert-card.is-paused .alert-meta, .alert-card.is-paused .alert-more {
  color: var(--ink-3);
}

.alert-card.is-auto-paused .alert-status {
  color: var(--ink-2);
}

.alert-card.is-running .alert-meta {
  color: var(--accent);
}

.alert-card.is-running .alert-dot {
  animation: 1s ease-out infinite alert-pulse;
}

@keyframes alert-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 45%, transparent);
  }

  100% {
    box-shadow: 0 0 0 6px color-mix(in oklch, var(--accent) 0%, transparent);
  }
}

.alert-card.is-error {
  background: var(--warn-wash);
  border-color: color-mix(in oklch, var(--warn) 40%, var(--warn-wash));
}

.alert-card.is-error:hover {
  border-color: color-mix(in oklch, var(--warn) 60%, var(--warn-wash));
}

.alert-card.is-error .alert-status, .alert-card.is-error .alert-meta {
  color: var(--warn);
}

.alert-card.is-error .alert-more:hover {
  background: color-mix(in oklch, var(--warn) 10%, transparent);
}

.alert-menu button {
  align-items: center;
  gap: var(--s-2);
  display: flex;
}

.alert-menu button svg {
  color: var(--ink-2);
  flex: none;
}

.alert-menu button.is-danger, .alert-menu button.is-danger svg {
  color: var(--danger);
}

.alert-menu button.is-danger:hover, .alert-menu button.is-danger:focus-visible {
  background: var(--danger-wash);
}

.reco-card {
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 72px;
  padding: calc(var(--s-4) - 1px) calc(20px - 1px);
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: none;
  transition: border-color .15s, background .15s, transform .15s;
  display: flex;
}

.reco-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-lg);
}

.reco-chip {
  border-radius: var(--r-full);
  background: var(--sunken);
  width: 32px;
  height: 32px;
  color: var(--ink-3);
  flex: none;
  place-items: center;
  transition: background .15s, color .15s;
  display: grid;
}

.reco-text {
  flex-direction: column;
  flex: 1;
  min-width: 0;
  display: flex;
}

.reco-title {
  font-size: var(--t-base);
  font-weight: var(--w-medium);
  line-height: 22px;
  transition: color .15s;
}

.reco-desc {
  font-size: var(--t-sm);
  color: var(--ink-2);
  line-height: 18px;
}

.reco-kind {
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  flex: none;
}

.reco-card:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.reco-card:hover .reco-chip {
  background: var(--surface);
  color: var(--accent);
}

.reco-card:hover .reco-title {
  color: var(--accent);
}

@container (max-width: 560px) {
  .reco-kind {
    display: none;
  }
}

.alerts-toast-slot {
  bottom: var(--s-4);
  pointer-events: none;
  margin-top: var(--s-4);
  justify-content: center;
  display: flex;
  position: sticky;
}

.alerts-toast {
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ink);
  color: var(--ink-inverse);
  font-size: var(--t-sm);
  box-shadow: var(--shadow-card);
  animation: rise var(--dur) var(--ease);
}

.editor-layer, .confirm-layer {
  z-index: 120;
  position: fixed;
  inset: 0;
}

.editor-scrim {
  cursor: default;
  background: color-mix(in oklch, var(--shade) 44%, transparent);
  animation: fade var(--dur-slow) ease;
  border: 0;
  padding: 0;
  position: absolute;
  inset: 0;
}

.editor-drawer {
  background: var(--surface);
  border-left: 1px solid var(--line);
  width: min(440px, 100vw);
  box-shadow: var(--shadow-float);
  outline: none;
  flex-direction: column;
  animation: .32s cubic-bezier(.22, 1, .36, 1) drawer-in;
  display: flex;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

@keyframes drawer-in {
  from {
    transform: translateX(100%);
  }
}

.editor-head {
  align-items: center;
  gap: var(--s-1);
  min-height: 72px;
  padding: var(--s-4) 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
}

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

.editor-heading h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  overflow: hidden;
}

.editor-eyebrow {
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--w-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}

.editor-head .icon-btn {
  width: 32px;
  height: 32px;
}

.editor-head .icon-btn svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.editor-body {
  min-height: 0;
  padding: var(--s-5) 20px;
  flex-direction: column;
  flex: 1;
  gap: 28px;
  display: flex;
  overflow-y: auto;
}

.editor-section {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.editor-caption-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  height: 16px;
  display: flex;
}

.editor-caption {
  font-size: 11px;
  line-height: 16px;
  font-weight: var(--w-medium);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}

.btn.editor-modify {
  min-height: 24px;
  padding: 2px var(--s-2);
  margin-right: calc(var(--s-2) * -1);
  color: var(--accent);
}

.btn.editor-modify:hover {
  color: var(--accent-hover);
  background: var(--accent-wash);
}

.editor-readout {
  padding: 14px var(--s-4);
  background: var(--sunken);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  color: var(--ink);
  margin: 0;
  line-height: 1.55;
}

.editor-rows {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  flex-direction: column;
  display: flex;
}

.editor-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  min-height: 64px;
  padding: 0 var(--s-4);
  font-size: var(--t-base);
  color: var(--ink);
  display: flex;
}

.editor-row + .editor-row, .editor-field-error + .editor-row {
  border-top: 1px solid var(--line);
}

.editor-select {
  width: 150px;
  height: 40px;
  padding: 0 var(--s-3);
  font: inherit;
  font-size: var(--t-base);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  cursor: pointer;
}

select.editor-select {
  appearance: none;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23423f3b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 9.00005C18 9.00005 13.5811 15 12 15C10.4188 15 6 9 6 9'/%3E%3C/svg%3E") no-repeat right var(--s-3) center / 16px;
  padding-right: 36px;
}

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

.editor-select:hover {
  border-color: var(--ink-3);
}

.editor-number {
  cursor: text;
}

.editor-number[aria-invalid="true"] {
  border-color: var(--danger);
}

.editor-value {
  font-size: var(--t-base);
  color: var(--ink);
}

.editor-field-error {
  margin: 0 var(--s-4) var(--s-2);
  font-size: var(--t-xs);
  color: var(--danger);
  text-align: right;
}

.channel-chips {
  gap: var(--s-1);
  flex-wrap: wrap;
  display: flex;
}

.channel-chip {
  height: 36px;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  font-size: var(--t-sm);
  color: var(--ink-3);
  cursor: pointer;
  background: none;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s, border-color .15s;
  display: inline-flex;
}

.channel-chip.is-on {
  background: var(--accent-wash);
  border-color: var(--accent-line);
  color: var(--accent);
}

.channel-chip[aria-disabled="true"] {
  cursor: default;
}

.editor-hint {
  font-size: var(--t-xs);
  color: var(--ink-3);
  margin: 0;
}

.editor-foot {
  min-height: 72px;
  padding: var(--s-4) 20px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  display: flex;
}

.editor-foot .btn {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
}

.editor-foot .btn:not(.primary) {
  background: var(--sunken);
  border-color: #0000;
}

.editor-foot .btn:not(.primary):hover {
  background: var(--sunken-2);
}

.editor-foot .btn.primary:disabled {
  background: var(--sunken);
  color: var(--ink-3);
  cursor: default;
  border-color: #0000;
}

.editor-error {
  font-size: var(--t-xs);
  color: var(--danger);
  text-align: right;
  flex-basis: 100%;
  margin: 0;
}

.confirm-layer {
  padding: var(--s-4);
  place-items: center;
  display: grid;
}

.confirm-dialog {
  width: min(400px, 100%);
  padding: var(--s-5);
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  animation: settle var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
  position: relative;
}

.confirm-dialog h2 {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  margin: 0;
}

.confirm-dialog p {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
}

.confirm-actions {
  justify-content: flex-end;
  gap: var(--s-2);
  margin-top: var(--s-3);
  display: flex;
}

.btn.danger {
  background: var(--danger-fill);
  border-color: var(--danger-fill);
  color: var(--on-accent);
}

.btn.danger:hover {
  background: color-mix(in oklch, var(--danger-fill) 88%, black);
}

@media (pointer: coarse) {
  .alert-more, .editor-head .icon-btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alert-card, .alert-card.is-new, .alert-card.is-running .alert-dot, .reco-card, .reco-chip, .reco-title, .channel-chip, .editor-drawer, .editor-scrim, .confirm-dialog, .alerts-toast {
    transition: none;
    animation: none;
  }
}

.rail-account {
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: 52px;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
  background: none;
  border: 0;
  flex: none;
  display: flex;
  position: relative;
}

.rail-account:hover, .rail-account[aria-current="page"] {
  background: var(--sunken-2);
}

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

.rail-avatar {
  border-radius: var(--r-full);
  background: var(--accent-wash);
  width: 30px;
  height: 30px;
  color: var(--accent);
  font-size: var(--t-xs);
  font-weight: var(--w-semibold);
  letter-spacing: .02em;
  border: 2px solid var(--surface);
  box-shadow: 0 1px 3px color-mix(in oklch, var(--shade) 18%, transparent);
  flex: none;
  place-items: center;
  display: grid;
}

.rail-account-text {
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  line-height: 1.3;
  display: flex;
}

.rail-account-name {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.rail-account-loc {
  font-size: var(--t-xs);
  color: var(--ink-3);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.profile-page {
  width: min(480px, 100% - var(--s-6));
  padding: var(--s-6) 0;
  margin: 0 auto;
}

.profile-form {
  gap: var(--s-5);
  flex-direction: column;
  display: flex;
}

.profile-field {
  gap: var(--s-1);
  flex-direction: column;
  display: flex;
}

.profile-label {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
}

.profile-static {
  font-size: var(--t-base);
  color: var(--ink-2);
}

.profile-hint {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.profile-field input, .profile-field select {
  font: inherit;
  font-size: var(--t-base);
  padding: 8px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

.profile-field input:focus-visible, .profile-field select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.profile-actions {
  align-items: center;
  gap: var(--s-3);
  display: flex;
}

.profile-saved {
  font-size: var(--t-sm);
  color: var(--ink-2);
}

.push-field {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
}

.push-row {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
  display: flex;
}

.skel {
  background: var(--sunken-2);
  border-radius: 4px;
  animation: 1.4s ease-in-out infinite skel-pulse;
  display: block;
}

@keyframes skel-pulse {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skel {
    animation: none;
  }
}

.skel-list {
  gap: var(--s-3);
  flex-direction: column;
  display: flex;
}

.skel-card {
  align-items: center;
  gap: var(--s-4);
  min-height: 72px;
  padding: 0 var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
}

.skel-stack {
  gap: var(--s-2);
  flex-direction: column;
  flex: 1;
  display: flex;
}

.skel-groups {
  gap: var(--s-6);
  flex-direction: column;
  display: flex;
}

.skel-group {
  gap: var(--s-4);
  flex-direction: column;
  display: flex;
}

.skel-row {
  gap: var(--s-2);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
  flex-direction: column;
  display: flex;
}

.skel-form {
  gap: var(--s-5);
  flex-direction: column;
  display: flex;
}

.skel-field {
  gap: var(--s-2);
  flex-direction: column;
  display: flex;
}

.skel-home {
  gap: var(--s-3);
  flex-direction: column;
  display: flex;
}

.empty-state {
  text-align: center;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-7) var(--s-5);
  flex-direction: column;
  display: flex;
}

.empty-state-icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--s-1);
  border-radius: var(--r-full);
  background: var(--sunken);
  color: var(--ink-2);
  place-items: center;
  display: grid;
}

.empty-state-icon svg {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.empty-state.is-error .empty-state-icon {
  background: var(--warn-wash);
  color: var(--warn);
}

.empty-state-title {
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--ink);
  margin: 0;
}

.empty-state-desc {
  max-width: 36ch;
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
}

.empty-state-action {
  margin-top: var(--s-3);
}

.feed-cta {
  align-items: center;
  gap: var(--s-2);
  max-width: 100%;
  margin-left: calc(var(--s-2) * -1);
  padding: 5px var(--s-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-regular);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  display: inline-flex;
}

.feed-cta svg {
  width: var(--icon-md);
  height: var(--icon-md);
  flex: none;
}

.feed-cta:hover {
  background: var(--sunken);
  color: var(--ink);
}

.feed-cta.is-secondary {
  color: var(--ink-2);
  font-weight: var(--w-regular);
  margin-left: 0;
}

.feed-cta.is-secondary:hover {
  background: var(--sunken);
  color: var(--ink);
}

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

@media (pointer: coarse) {
  .feed-cta {
    min-height: 44px;
  }
}

.feed-quiet {
  margin-left: var(--s-1);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  align-items: center;
  gap: 2px;
  display: inline-flex;
}

.feed-card:hover .feed-quiet, .feed-card:focus-within .feed-quiet {
  opacity: 1;
}

@media (hover: none) {
  .feed-quiet {
    opacity: 1;
  }
}

[data-tip] {
  position: relative;
}

[data-tip]:after {
  content: attr(data-tip);
  padding: 3px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .12s var(--ease), translate .12s var(--ease);
  z-index: 30;
  line-height: 1.4;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  translate: -50% 2px;
}

[data-tip]:hover:after, [data-tip]:focus-visible:after {
  opacity: 1;
  transition-delay: .3s;
  translate: -50%;
}

@media (hover: none) {
  [data-tip]:after {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-tip]:after {
    transition: none;
    translate: -50%;
  }
}

.watch-card {
  align-items: center;
  gap: var(--s-3);
  max-width: 34rem;
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex;
}

.watch-dot {
  border-radius: var(--r-full);
  background: var(--ink-3);
  flex: none;
  width: 8px;
  height: 8px;
}

.watch-dot.is-live {
  background: var(--accent);
  animation: 1.6s ease-out infinite watch-pulse;
}

@keyframes watch-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 45%, transparent);
  }

  100% {
    box-shadow: 0 0 0 7px #0000;
  }
}

@media (prefers-reduced-motion: reduce) {
  .watch-dot.is-live {
    animation: none;
  }
}

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

.watch-label {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
}

.watch-status {
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.watch-card.is-done .watch-dot {
  background: var(--ok, var(--ink-2));
}

.watches-section {
  gap: var(--s-2);
  margin-bottom: var(--s-5);
  flex-direction: column;
  display: flex;
}

.rail-unread {
  width: 6px;
  height: 6px;
  margin-right: var(--s-1);
  border-radius: var(--r-full);
  background: var(--accent);
  flex: none;
}

.rail-chat:has(.rail-unread) .rail-chat-title {
  font-weight: var(--w-medium);
  color: var(--ink);
}

.reply-actions-wrap {
  gap: var(--s-2);
  margin-top: calc(var(--s-3) * -1);
  flex-direction: column;
  display: flex;
}

.reply-actions {
  align-items: center;
  gap: 2px;
  margin-left: -6px;
  display: flex;
}

.reply-action {
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  color: var(--ink-3);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  place-items: center;
  padding: 0;
  display: grid;
}

.reply-action svg {
  width: var(--icon-md);
  height: var(--icon-md);
}

.reply-action:hover {
  background: var(--sunken);
  color: var(--ink);
}

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

.reply-action.is-on {
  color: var(--ink);
}

@media (pointer: coarse) {
  .reply-action {
    width: 40px;
    height: 40px;
  }
}

.reply-thanks {
  margin-left: var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-3);
}

.reply-why {
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  animation: rise var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
}

.reply-why-title {
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink);
  margin: 0;
}

.reply-why-chips {
  gap: var(--s-2);
  flex-wrap: wrap;
  display: flex;
}

.why-chip {
  padding: 4px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink-2);
  cursor: pointer;
  background: none;
}

.why-chip:hover {
  background: var(--sunken);
  color: var(--ink);
}

.why-chip.on {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--sunken);
}

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

.reply-why-note {
  font: inherit;
  font-size: var(--t-sm);
  padding: 6px var(--s-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

.reply-why-note:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.reply-why-actions {
  justify-content: flex-end;
  gap: var(--s-2);
  display: flex;
}

.tc-choice {
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  animation: rise var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
}

.tc-title {
  font-size: var(--t-base);
  font-weight: var(--w-semibold);
  color: var(--ink);
  margin: 0;
}

.tc-sub {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
}

.tc-cards {
  gap: var(--s-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
}

@media (max-width: 560px) {
  .tc-cards {
    grid-template-columns: 1fr;
  }
}

.tc-card {
  gap: var(--s-1);
  padding: var(--s-3) var(--s-4) var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper);
  flex-direction: column;
  display: flex;
}

.tc-card.is-suggested {
  border-color: var(--accent-line);
  background: var(--accent-wash);
}

.tc-card-head {
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  min-height: 22px;
  display: flex;
}

.tc-role {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink-2);
}

.tc-suggested {
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--accent);
}

.tc-times {
  font-size: var(--t-lg);
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}

.tc-worked {
  font-size: var(--t-sm);
  color: var(--ink-2);
  margin: 0;
}

.tc-facts {
  margin: var(--s-1) 0 var(--s-2);
  font-size: var(--t-xs);
  color: var(--ink-3);
  flex-direction: column;
  gap: 2px;
  padding: 0;
  list-style: none;
  display: flex;
}

.tc-why {
  margin: var(--s-1) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-2);
}

.tc-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

.tc-foot {
  justify-content: flex-end;
  gap: var(--s-2);
  flex-wrap: wrap;
  display: flex;
}

.rail-toggle {
  position: relative;
}

.menu-dot {
  border-radius: var(--r-full);
  background: var(--accent);
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 2px var(--paper);
  position: absolute;
  top: 8px;
  right: 7px;
}

@media (pointer: coarse) {
  .menu-dot {
    top: 9px;
    right: 9px;
  }
}

.app {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.topbar {
  padding-top: max(var(--s-2), env(safe-area-inset-top));
}

.dock {
  padding-bottom: max(var(--s-4), calc(env(safe-area-inset-bottom) + var(--s-2)));
}

@media (max-width: 640px) and (pointer: coarse) {
  .dock {
    padding-bottom: max(14px, calc(env(safe-area-inset-bottom) - 10px));
  }

  .dock-inner {
    width: calc(100% - 20px);
  }

  .composer {
    border-radius: var(--r-lg);
    padding: 12px 8px 8px 20px;
  }

  .dock .composer {
    border-radius: 30px;
  }

  .composer textarea {
    padding-right: 12px;
  }
}

@media (max-width: 860px) {
  .rail, .app.rail-collapsed .rail {
    padding-top: max(var(--s-2), env(safe-area-inset-top));
    padding-bottom: max(var(--s-3), env(safe-area-inset-bottom));
    padding-left: max(var(--s-2), env(safe-area-inset-left));
  }
}

.page-scroll {
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 640px) {
  .tool-line:not(.change) {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
  }

  .tool-line:not(.change) > b + span:before {
    content: none;
  }

  .tool-line.change > .cannot {
    grid-area: 3 / 1;
    align-self: start;
  }
}

.composer-shell {
  border-radius: calc(var(--r-md) + 4px);
}

.composer-shell.has-alert {
  background: var(--danger-wash);
  animation: rise var(--dur) var(--ease);
  margin: 0 -4px -4px;
  padding: 0 4px 4px;
}

.composer-alert {
  align-items: center;
  gap: var(--s-2);
  min-height: 36px;
  padding: 6px var(--s-3) 6px var(--s-3);
  font-size: var(--t-sm);
  color: var(--ink);
  display: flex;
}

.composer-alert p {
  flex: 1;
  min-width: 0;
  margin: 0;
}

.composer-alert-icon {
  color: var(--danger);
  place-items: center;
  display: grid;
}

.composer-alert-icon svg {
  width: 14px;
  height: 14px;
}

.composer-alert-action {
  padding: 4px var(--s-2);
  border-radius: var(--r-sm);
  font: inherit;
  font-weight: var(--w-medium);
  color: var(--ink);
  text-underline-offset: 3px;
  text-decoration: underline;
  -webkit-text-decoration-color: var(--line-strong);
  text-decoration-color: var(--line-strong);
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
}

.composer-alert-action:hover {
  background: color-mix(in oklch, var(--danger) 10%, transparent);
}

.composer-shell.has-alert.is-info {
  background: var(--accent-wash);
}

.composer-shell.is-info .composer-alert-icon {
  color: var(--accent);
}

.composer-shell.is-info .composer-alert-action:hover {
  background: color-mix(in oklch, var(--accent) 12%, transparent);
}

.composer-alert-row {
  text-align: left;
  cursor: pointer;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  background: none;
  border: 0;
  flex: 1;
  padding: 4px 0;
  overflow: hidden;
}

.composer-alert-link {
  font-weight: var(--w-medium);
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  -webkit-text-decoration-color: var(--accent);
  text-decoration-color: var(--accent);
}

.composer-alert-row:hover .composer-alert-link {
  text-decoration-color: currentColor;
}

.composer-alert-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.composer-alert-close {
  border-radius: var(--r-sm);
  width: 28px;
  height: 28px;
  color: var(--ink-3);
  cursor: pointer;
  background: none;
  border: 0;
  flex: none;
  place-items: center;
  margin-right: -6px;
  display: grid;
}

.composer-alert-close:hover {
  color: var(--ink);
  background: color-mix(in oklch, var(--ink) 8%, transparent);
}

.composer-alert-close svg {
  width: 14px;
  height: 14px;
}

@media (pointer: coarse) {
  .composer-alert-close {
    width: 44px;
    height: 44px;
  }
}

.composer-alert-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

@media (pointer: coarse) {
  .composer-alert-action {
    min-height: 44px;
  }
}

@media (max-width: 640px) and (pointer: coarse) {
  .composer-shell {
    border-radius: calc(var(--r-lg) + 4px);
  }

  .dock .composer-shell {
    border-radius: 34px;
  }

  .composer-alert {
    padding: 8px 4px 7px var(--s-4);
    gap: var(--s-2);
    line-height: 1.35;
  }

  .composer-alert-icon {
    align-self: flex-start;
    margin-top: 3px;
  }

  .composer-alert-action, .composer-alert-close {
    margin-block: -6px;
  }

  .composer-alert-action {
    padding-inline: 6px;
  }

  .composer-alert-close {
    margin-left: -10px;
    margin-right: 0;
  }
}

.auto-btn {
  isolation: isolate;
  border-radius: var(--r-full);
  min-height: 32px;
  font: inherit;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  background: none;
  border: 0;
  align-items: center;
  padding: 0 10px;
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.auto-btn:hover {
  background: var(--sunken);
  color: var(--ink);
}

.auto-btn.is-on {
  color: var(--accent);
  background: linear-gradient(100deg, var(--accent-wash), color-mix(in oklch, var(--accent) 22%, var(--accent-wash)) 55%, var(--accent-wash));
}

.auto-btn.is-on:hover {
  background: color-mix(in oklch, var(--accent) 26%, var(--accent-wash));
}

.auto-btn.is-on {
  transition: background var(--dur) var(--ease), color calc(var(--dur-slow) * 1.5) ease-in-out;
}

.auto-btn.is-on.is-flash {
  color: var(--ink);
}

.auto-btn.is-flash:after {
  content: "";
  z-index: -1;
  background: var(--auto-sweep);
  width: 300%;
  animation: .7s cubic-bezier(.45, 0, .55, 1) forwards auto-sweep;
  position: absolute;
  inset: 0 auto 0 0;
  translate: -100%;
}

@keyframes auto-sweep {
  to {
    translate: 33.4%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auto-btn.is-flash:after {
    animation: none;
    display: none;
  }
}

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

.switch.composer-voice {
  color: var(--ink-2);
  font-size: var(--t-sm);
}

.switch.composer-voice:hover {
  color: var(--ink);
}

.menu-setting {
  align-items: flex-start;
  gap: var(--s-2);
  text-align: left;
  display: flex;
}

.menu-check {
  width: 16px;
  height: 18px;
  color: var(--accent);
  flex: none;
  place-items: center;
  display: grid;
}

.menu-check svg {
  width: 14px;
  height: 14px;
}

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

.menu-hint {
  font-size: var(--t-xs);
  color: var(--ink-3);
  white-space: normal;
  text-wrap: balance;
  max-width: 15rem;
}

.switch {
  align-items: center;
  gap: var(--s-2);
  border-radius: var(--r-full);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: var(--w-medium);
  color: var(--ink-3);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
  background: none;
  border: 0;
  flex: none;
  padding: 4px 6px;
  display: inline-flex;
}

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

.switch.on {
  color: var(--ink);
}

.switch-track {
  border-radius: var(--r-full);
  background: var(--switch-off);
  width: 26px;
  height: 16px;
  transition: background var(--dur) var(--ease);
  display: block;
  position: relative;
}

.switch.on .switch-track {
  background: var(--accent);
}

.switch-knob {
  background: var(--switch-knob-off);
  width: 12px;
  height: 12px;
  box-shadow: var(--shadow-knob);
  transition: translate var(--dur) var(--ease);
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
}

.switch.on .switch-knob {
  background: var(--switch-knob);
  translate: 10px;
}

@media (pointer: coarse) {
  .switch {
    min-height: 44px;
    padding-inline: var(--s-2);
  }
}

.menu-icon {
  width: 16px;
  height: 18px;
  color: var(--ink-2);
  flex: none;
  place-items: center;
  display: grid;
}

.menu-icon svg {
  width: 14px;
  height: 14px;
}

.action-menu .menu-setting {
  align-items: center;
}

.action-menu:has(.menu-hint) {
  width: max-content;
  max-width: calc(100vw - 24px);
}

.action-menu .menu-setting:has(.menu-hint) {
  align-items: flex-start;
}

.menu-setting:has(.menu-hint) .menu-check {
  height: 22px;
}

.action-menu .menu-hint {
  max-width: 11.5rem;
}

.viewer {
  z-index: 120;
  background: var(--sunken);
  animation: fade var(--dur) var(--ease);
  flex-direction: column;
  display: flex;
  position: fixed;
  inset: 0;
}

.viewer-bar, .viewer-tools {
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--surface);
  flex: none;
  display: flex;
}

.viewer-bar {
  padding-top: max(var(--s-2), env(safe-area-inset-top));
  border-bottom: 1px solid var(--line);
}

.viewer-tools {
  padding-bottom: max(var(--s-2), env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  min-height: 52px;
}

.viewer-place {
  justify-content: center;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  font-size: var(--t-sm);
  font-weight: var(--w-medium);
  flex: 1;
  display: flex;
}

.viewer-place .path {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.viewer-stage {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.viewer-page {
  transform-origin: 0 0;
  will-change: transform;
  box-shadow: var(--shadow-float);
  background: var(--surface);
  position: absolute;
  top: 0;
  left: 0;
}

.viewer-page img {
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: block;
}

.viewer-stage .shot-empty {
  color: var(--ink-2);
  font-size: var(--t-sm);
  place-items: center;
  display: grid;
  position: absolute;
  inset: 0;
}

.viewer-hint {
  text-align: center;
  min-width: 0;
  color: var(--ink-2);
  font-size: var(--t-xs);
  flex: 1;
}

.viewer-ripple {
  border: 2px solid var(--accent);
  pointer-events: none;
  width: 36px;
  height: 36px;
  animation: viewer-ripple .45s var(--ease) forwards;
  border-radius: 50%;
  margin: -18px 0 0 -18px;
  position: absolute;
}

@keyframes viewer-ripple {
  from {
    opacity: 1;
    scale: .4;
  }

  to {
    opacity: 0;
    scale: 1.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer {
    animation: none;
  }

  .viewer-ripple {
    display: none;
  }
}

.viewer-page img.viewer-tile {
  position: absolute;
}

@media (min-width: 861px) {
  .bar-title.phone-only {
    visibility: hidden;
  }

  .topbar:has( > .bar-title.is-page) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 0;
  }

  .topbar:has( > .bar-title.is-page) > .topbar-side:first-child {
    min-width: 0;
  }

  .topbar:has( > .bar-title.is-page) > .topbar-side:first-child:has( > :not(.wide-hidden)) {
    margin-right: var(--s-2);
  }

  .topbar:has( > .bar-title.is-page) > .topbar-side.is-end {
    margin-left: var(--s-2);
  }

  .bar-title.is-page {
    justify-content: flex-start;
    padding-left: 6px;
  }

  .bar-title.is-page .bar-title-text {
    font-size: 1rem;
  }
}

@media (max-width: 860px) {
  .feed-quiet {
    margin-left: auto;
  }
}

.action-menu button.is-danger, .action-menu button.is-danger .menu-icon {
  color: var(--danger);
}

.action-menu button.is-danger:hover, .action-menu button.is-danger:focus-visible {
  background: var(--danger-wash);
}

@media (pointer: coarse) {
  .choice-key, .tab-hint, .asking .row .spacer {
    display: none;
  }

  .asking .row:not(:has(button)) {
    display: none;
  }
}

@media (max-width: 640px) and (pointer: coarse) {
  .dock .asking {
    border-radius: 20px 20px 30px 30px;
    padding: 14px;
  }

  .dock .asking .choice {
    border-radius: 16px;
  }
}

/*# sourceMappingURL=%5Broot-of-the-server%5D__1j46m5s._.css.map*/