[hidden] { display: none !important; }
/* Iris — warm paper, iris violet (the --teal vars hold the accent), ruled lines, an iris-flower mark. */
@import url("/static/fonts/fonts.css?v=2");

:root {
  --paper: #f4f1ec;
  --paper-2: #ebe6e0;
  --panel: #fbfaf7;
  --ink: #1f1a28;
  --ink-2: #4a4458;
  --muted: #807a8c;
  --rule: #ddd6d0;
  --rule-2: #cdc3bd;
  --teal: #5b3f9f;
  --teal-2: #47307f;
  --teal-wash: #e9e2f4;
  --teal-ink: #faf8ff;
  --oxblood: #9c3a28;
  --oxblood-wash: #f6e4dc;
  --amber: #8f6206;
  --code: #ece7e1;
  --shadow: 0 1px 0 rgba(31, 26, 40, .04), 0 10px 30px -18px rgba(31, 26, 40, .35);
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Hanken Grotesk", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 14px;
  --wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5C14.6 4.4 14.6 8.6 12 11.6 9.4 8.6 9.4 4.4 12 1.5ZM11.4 12.4C8.7 9.6 3.9 9.4 2.2 12.6 4.4 15.9 8.9 15.6 11.4 12.4ZM12.6 12.4C15.3 9.6 20.1 9.4 21.8 12.6 19.6 15.9 15.1 15.6 12.6 12.4Z'/><path d='M12 13.5V22.5M12 20C10 17.6 7.6 17 6.4 17.4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/></svg>");
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #110e17;
    --paper-2: #16121e;
    --panel: #1c1726;
    --ink: #ece9f1;
    --ink-2: #bdb6c9;
    --muted: #878194;
    --rule: #2a2437;
    --rule-2: #392f48;
    --teal: #b49cf2;
    --teal-2: #cbb9f8;
    --teal-wash: #2a2143;
    --teal-ink: #170f2a;
    --oxblood: #ef8f78;
    --oxblood-wash: #2d1a15;
    --amber: #e5b65a;
    --code: #1d1828;
    --shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 14px 34px -20px rgba(0, 0, 0, .8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15.5px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* paper grain */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--teal); }
::selection { background: var(--teal-wash); }

/* pinned to the visible viewport so iOS Safari never scrolls the page itself (which slid the header under the URL bar) */
.layout { position: fixed; left: 0; right: 0; top: var(--vvt, 0px); height: var(--vvh, 100dvh); z-index: 1; display: flex; }

/* ---------- sidebar ---------- */
.side {
  width: 288px; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper-2); border-right: 1px solid var(--rule);
}
.side header { padding: 18px 16px 12px; display: flex; align-items: center; gap: 10px; }
.brand {
  flex: 1; display: flex; align-items: center; gap: 9px;
  font: 600 21px/1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em;
}
/* "Iris" in the serif; the small "JHMD" tag in spaced sans caps. */
.brand b, .login h1 b { font: 700 .5em/1 var(--sans); letter-spacing: .14em; color: var(--muted); align-self: flex-end; margin: 0 0 .28em .1em; }
.brand::before {
  content: ""; width: 22px; height: 22px; flex-shrink: 0; background: var(--teal);
  -webkit-mask: var(--wave) center/contain no-repeat; mask: var(--wave) center/contain no-repeat;
}
.side .new {
  margin: 2px 16px 14px; padding: 10px 14px; border-radius: 12px; text-align: left; width: calc(100% - 32px);
  border: 1px solid var(--rule-2); background: var(--panel); box-shadow: var(--shadow);
  font-weight: 600; transition: transform .15s, border-color .15s;
}
.side .new:hover { border-color: var(--teal); transform: translateY(-1px); }
.side .scroll { overflow-y: auto; flex: 1; padding: 0 10px 16px; }
.side h3 {
  display: flex; align-items: center; gap: 6px;
  margin: 18px 8px 6px; font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.side h3::after { content: ""; flex: 1; height: 1px; background: var(--rule); margin-left: 6px; }
.item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px;
  background: none; color: var(--ink); text-decoration: none; text-align: left; font-size: 14.5px; transition: background .12s;
}
.item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.item.active { background: var(--panel); box-shadow: inset 3px 0 0 var(--teal), var(--shadow); }
.item .t { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); flex-shrink: 0; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(.7); opacity: .45; } 45% { transform: scale(1.15); opacity: 1; } }
.side footer { padding: 12px 18px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; }
.side footer a { color: var(--muted); font-size: 13px; text-decoration: none; }
.side footer a:hover, .side footer a.active { color: var(--ink); }
.side footer button { background: none; border: 0; padding: 0; color: var(--muted); font-size: 13px; }
.side footer button:hover { color: var(--ink); }
.archived { margin-top: 10px; }
.archived summary { cursor: pointer; list-style: none; margin: 0 8px 4px; padding: 6px 2px; color: var(--muted); font: 600 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.archived summary::-webkit-details-marker { display: none; }
.archived summary::before { content: "▸ "; }
.archived[open] summary::before { content: "▾ "; }
.archived .item { color: var(--muted); }
.item .acts { display: flex; gap: 2px; flex-shrink: 0; }
.item .acts button { display: grid; place-items: center; width: 28px; height: 28px; border: 0; padding: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transition: color .12s, background .12s; }
.item .acts button svg { width: 15px; height: 15px; }
.item .acts button:hover { color: var(--teal); background: var(--teal-wash); }
.item .acts button.del:hover { color: var(--oxblood); background: var(--oxblood-wash); }
.iconbtn.ico { display: grid; place-items: center; padding: 6px 8px; }
#delBtn:hover { border-color: var(--oxblood); color: var(--oxblood); }
@media (hover: hover) { .item .acts { display: none; } .item:hover .acts, .item.active .acts { display: flex; } }
.linkbtn { border: 0; background: none; padding: 0 0 0 4px; color: var(--teal); font: 600 10.5px/1 var(--sans); letter-spacing: .06em; }

.rem { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; font-size: 13.5px; border-radius: 10px; }
.rem .body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rem .when { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.rem.sent .body { opacity: .55; }
.rem.failed .when { color: var(--oxblood); }
.rem button { border: 0; background: none; color: var(--muted); padding: 0 2px; }
.rem button:hover { color: var(--ink); }

/* ---------- main ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(10px);
}
.top .title {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 18px/1.2 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.005em;
}
.iconbtn { border: 1px solid var(--rule-2); background: var(--panel); border-radius: 10px; padding: 6px 11px; font-size: 13px; color: var(--ink-2); }
.iconbtn:hover { border-color: var(--teal); color: var(--ink); }
.iconbtn.mic.rec { background: #c0392b; border-color: #c0392b; color: #fff; font-variant-numeric: tabular-nums; animation: micpulse 1.2s ease-in-out infinite; }
.iconbtn.mic.busy { opacity: .6; cursor: progress; }
@keyframes micpulse { 50% { opacity: .75; } }
.menu-btn, .close-side, .backdrop { display: none; }
.mode { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--paper-2); border: 1px solid var(--rule); font-size: 12.5px; }
.mode button { border: 0; background: none; padding: 4px 11px; border-radius: 8px; color: var(--muted); font-weight: 600; }
.mode button.on { background: var(--panel); color: var(--teal); box-shadow: var(--shadow); }

.log { flex: 1; min-height: 0; overflow-y: auto; overflow-anchor: none; overscroll-behavior: contain; padding: 26px 20px 10px; }
.log-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* empty state: a flow-volume loop draws itself */
.empty { text-align: center; margin-top: 11vh; color: var(--ink-2); animation: rise .6s ease-out both; }
.empty .loop-btn { display: block; margin: 0 auto 10px; padding: 0; border: 0; background: none; cursor: pointer;
  position: relative; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.empty .coach { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; white-space: nowrap;
  font: 600 13px/1.2 var(--sans); color: var(--teal); opacity: 0; transition: opacity .2s; }
.empty .coach.on { opacity: 1; }
.empty .loop { width: 80px; height: 118px; display: block; overflow: visible; pointer-events: none; }
.empty .loop path { stroke: var(--teal); stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100; animation: draw 2.4s .2s cubic-bezier(.4, 0, .2, 1) forwards; }
.empty .loop line { stroke: var(--rule-2); stroke-width: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.empty h2 { margin: 6px 0 6px; color: var(--ink); font: 500 30px/1.15 var(--serif); font-variation-settings: "opsz" 96; letter-spacing: -.02em; }
.empty h2 em { font-style: italic; color: var(--teal); }
.suggest { display: grid; gap: 8px; max-width: 520px; margin: 22px auto 0; text-align: left; }
.suggest button {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; text-align: left;
  border: 1px solid var(--rule); background: var(--panel); box-shadow: var(--shadow); font-size: 14.5px;
  opacity: 0; animation: rise .45s ease-out forwards; transition: border-color .15s, transform .15s;
}
.suggest button::before { content: "→"; color: var(--teal); font-weight: 700; }
.suggest button:nth-child(1) { animation-delay: .35s; }
.suggest button:nth-child(2) { animation-delay: .45s; }
.suggest button:nth-child(3) { animation-delay: .55s; }
.suggest button:hover { border-color: var(--teal); transform: translateX(3px); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* messages */
.msg { overflow-wrap: anywhere; animation: rise .25s ease-out both; }
.msg.user {
  align-self: flex-end; max-width: 82%; padding: 10px 15px; white-space: pre-wrap;
  background: var(--teal); color: var(--teal-ink); border-radius: 18px 18px 5px 18px; box-shadow: var(--shadow);
}
.msg.user .files { font-size: 12.5px; opacity: .8; margin-top: 4px; }
.msg.user .sent { font: 11px var(--mono); opacity: .75; margin-top: 5px; letter-spacing: .02em; }
.msg.bot { padding: 2px 2px 2px 16px; border-left: 2px solid var(--rule-2); }
.msg.bot > :first-child { margin-top: 0; }
.msg.bot > :last-child, .msg.bot > :has(+ .copy:last-child) { margin-bottom: 0; }
.msg.bot h1, .msg.bot h2, .msg.bot h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.25; margin: 1.1em 0 .4em; }
.msg.bot h1 { font-size: 22px; } .msg.bot h2 { font-size: 19px; } .msg.bot h3 { font-size: 16.5px; }
.msg.bot ul, .msg.bot ol { padding-left: 1.3em; }
.msg.bot li { margin: .2em 0; }
.msg.bot li::marker { color: var(--teal); }
.msg.bot blockquote { margin: .8em 0; padding: .2em 0 .2em 14px; border-left: 3px solid var(--teal); color: var(--ink-2); font-family: var(--serif); font-style: italic; }
.msg.bot table { border-collapse: collapse; font-size: 13.5px; display: block; overflow-x: auto; margin: .6em 0; }
.msg.bot th { font-weight: 600; text-align: left; border-bottom: 2px solid var(--ink); padding: 5px 10px; white-space: nowrap; }
.msg.bot td { border-bottom: 1px solid var(--rule); padding: 5px 10px; font-variant-numeric: tabular-nums; }
.msg.bot code { font: 12.5px var(--mono); background: var(--code); padding: 1px 5px; border-radius: 5px; }
.msg.bot pre { background: var(--code); padding: 11px 13px; border-radius: 10px; overflow-x: auto; border: 1px solid var(--rule); }
.msg.bot pre code { background: none; padding: 0; }
.msg.bot hr { border: 0; border-top: 1px dashed var(--rule-2); margin: 1.2em 0; }

/* tool rows: quiet ledger lines */
.tool { font-size: 12.5px; color: var(--muted); margin-left: 16px; }
.tool summary {
  cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; border-radius: 8px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono);
}
.tool summary::-webkit-details-marker { display: none; }
.tool summary::before { content: "▸"; color: var(--rule-2); transition: transform .15s; }
.tool details[open] summary::before { transform: rotate(90deg); }
.tool summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.tool .name { font-weight: 500; color: var(--teal); }
.tool.err .name { color: var(--oxblood); }
.tool pre { white-space: pre-wrap; max-height: 260px; overflow: auto; margin: 4px 0 4px 8px; padding: 9px 11px; border-radius: 8px;
  background: var(--code); border: 1px solid var(--rule); font: 12px/1.5 var(--mono); color: var(--ink-2); }

/* approval: a signature slip */
.approval {
  position: relative; padding: 14px 16px 14px 20px; border-radius: var(--r); animation: rise .3s ease-out both;
  background: var(--panel) repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--amber) 6%, transparent) 10px 11px);
  border: 1px solid var(--rule-2); box-shadow: var(--shadow);
}
.approval::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--amber); }
.approval .q { font: 600 15.5px/1.35 var(--serif); margin-bottom: 6px; }
.approval pre { white-space: pre-wrap; font: 12.5px/1.5 var(--mono); margin: 6px 0 12px; max-height: 200px; overflow: auto;
  padding: 8px 10px; border-radius: 8px; background: var(--code); }
.approval .btns { display: flex; gap: 8px; align-items: center; }
.approval .btns button { border-radius: 10px; padding: 8px 18px; border: 1px solid var(--rule-2); background: var(--panel); font-weight: 600; }
.approval .btns .yes { background: var(--teal); border-color: var(--teal); color: var(--teal-ink); }
.approval .btns .no:hover { border-color: var(--oxblood); color: var(--oxblood); }
.approval .done { font-size: 13px; color: var(--muted); font-weight: 600; }

/* apps: three-across tiles (icon over a two-line name) so chats stay in reach */
#apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
#apps .tile { flex-direction: column; justify-content: flex-start; gap: 3px; padding: 8px 4px 7px; text-align: center; font-size: 11.5px; line-height: 1.2; }
#apps .tile .ic { font-size: 20px; line-height: 1; }
.ic.svg { display: inline-block; width: 1em; height: 1em; vertical-align: -0.12em; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#apps .tile .ic.svg { width: 20px; height: 20px; color: var(--teal); }
#apps .tile .t { flex: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#apps .tile.active { box-shadow: inset 0 -2px 0 var(--teal), var(--shadow); }
#apps .item.wide { grid-column: 1 / -1; }
#apps .tile { position: relative; }
#apps .tile .star { position: absolute; top: 0; right: 0; width: 28px; height: 28px; padding: 4px 5px 0 0; border: 0; background: none;
  display: flex; justify-content: flex-end; align-items: flex-start; font-size: 13px; line-height: 1; color: var(--muted); opacity: .45; cursor: pointer; }
#apps .tile:hover .star { opacity: 1; }
#apps .tile .star.on { color: var(--amber); opacity: 1; }
#apps .tile.busy { opacity: .5; }
#pinBtn { font-size: 17px; line-height: 1; color: var(--muted); }
#pinBtn.on { color: var(--amber); }
#apps .grp { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 6px 2px 0; cursor: pointer; user-select: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
#apps .grp:first-child { margin-top: 0; }
#apps .grp::before { content: "▾"; font-size: 9px; letter-spacing: 0; }
#apps .grp.folded::before { content: "▸"; }
#apps .grp .n { display: none; font-weight: 500; letter-spacing: 0; }
#apps .grp.folded .n { display: inline; }

/* foldable sidebar sections: tap the heading */
.sec h3 { cursor: pointer; user-select: none; }
.sec h3::before { content: "▾"; font-size: 10px; letter-spacing: 0; margin-right: -2px; }
.sec.folded h3::before { content: "▸"; }
.sec.folded .sec-body { display: none; }
.sec h3 .badge { order: 2; }
.sec h3 .linkbtn { order: 3; }
.sec h3::after { order: 1; }
.badge { padding: 2px 6px; border-radius: 99px; background: var(--teal-wash); color: var(--teal); font-size: 10px; letter-spacing: 0; }
#remBadge { background: var(--oxblood-wash); color: var(--oxblood); }
#appsBadge { display: none; }
.sec.folded #appsBadge:not([hidden]) { display: inline; }

/* sidebar chat search + date headings */
.filter { width: calc(100% - 12px); margin: 0 6px 6px; padding: 7px 11px; border-radius: 10px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink); font: 13.5px var(--sans); outline: none; }
.filter:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
/* Placeholder rows until the first chat list arrives (no cached copy yet). */
.item.skel { height: 34px; margin: 2px 0; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); animation: skel 1.2s ease-in-out infinite alternate; }
@keyframes skel { to { opacity: .45; } }
.grp { margin: 10px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--muted); }
.grp:first-child { margin-top: 2px; }
/* message hits under the search box: title + date, then a two-line snippet with the match marked */
#msgHits { margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.item.hit { flex-wrap: wrap; row-gap: 2px; }
.item.hit .when { flex-shrink: 0; font-size: 11.5px; color: var(--muted); }
.item.hit .snip { flex-basis: 100%; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.item.hit .snip b { font-weight: 600; color: var(--muted); }
mark { background: var(--teal-wash); color: var(--ink); border-radius: 3px; padding: 0 1px; }
.msg.flash { animation: flash 2.4s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 3px var(--teal); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* reminders: two lines each until tapped; upcoming ones hidden until "N upcoming" */
.rem { cursor: pointer; }
.rem .txt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rem.open .txt { display: block; }
.rem.open { background: color-mix(in srgb, var(--ink) 5%, transparent); }
#reminders .rem.more { display: none; }
#reminders.all .rem.more { display: flex; }
.showmore { margin: 2px 10px 4px; font-size: 12px; letter-spacing: 0; }
.later { margin: 2px 10px; color: var(--muted); font-size: 12px; }

/* a run of tool calls: one quiet line that opens to the list */
.steps { margin-left: 16px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.steps > details > summary {
  cursor: pointer; list-style: none; display: flex; gap: 8px; align-items: baseline; padding: 3px 8px; border-radius: 8px;
  overflow: hidden; white-space: nowrap; font-family: var(--mono);
}
.steps > details > summary::-webkit-details-marker { display: none; }
.steps > details > summary::before { content: "▸"; color: var(--rule-2); transition: transform .15s; }
.steps > details[open] > summary::before { transform: rotate(90deg); }
.steps > details > summary:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.steps .n { flex-shrink: 0; font-weight: 600; color: var(--ink-2); }
.steps .n:empty { display: none; }
.steps .last { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.steps .name { font-weight: 500; color: var(--teal); }
.steps.err > details > summary .n { color: var(--oxblood); }
.steps > details[open] > summary .last { display: none; }
.steps .list { margin: 2px 0 4px 6px; padding-left: 8px; border-left: 1px dashed var(--rule-2); }
.steps .tool { margin-left: 0; }

/* copy a reply */
.msg.bot { position: relative; }
.msg.bot .copy { position: absolute; top: -6px; right: -4px; border: 1px solid var(--rule); background: var(--panel); padding: 2px 8px; border-radius: 7px;
  color: var(--muted); font: 600 11.5px var(--sans); opacity: 0; transition: opacity .15s; }
.msg.bot:hover .copy, .msg.bot .copy:focus { opacity: 1; }
.msg.bot .copy:hover { color: var(--teal); background: var(--teal-wash); }
@media (hover: none) { .msg.bot .copy { position: static; display: block; margin: 4px 0 0 auto; border: 0; background: none; opacity: .7; } }
/* copy one code block: always visible (phones have no hover) */
.msg.bot .codewrap { position: relative; margin: .8em 0; }
.msg.bot .codewrap pre, .msg.bot .codewrap blockquote { margin: 0; padding-top: 30px; }
.msg.bot .copyblock { position: absolute; top: 5px; right: 6px; border: 1px solid var(--rule); background: var(--panel); padding: 3px 10px; border-radius: 7px;
  color: var(--teal); font: 600 12px var(--sans); cursor: pointer; }
.msg.bot .copyblock:hover { background: var(--teal-wash); }
/* ```text blocks are prose to paste elsewhere: wrap, readable font */
.msg.bot pre:has(> code.language-text) { white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot pre > code.language-text { font: 14.5px/1.5 var(--sans); }

/* approved/denied cards fold to a single line; tap the title to see the details again */
.approval.resolved { padding: 8px 14px 8px 18px; background: var(--panel); box-shadow: none; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.approval.resolved::before { top: 8px; bottom: 8px; }
.approval.resolved.ok::before { background: var(--teal); }
.approval.resolved.no::before { background: var(--oxblood); }
.approval.resolved .q { flex: 1; min-width: 0; margin: 0; font: 500 13.5px/1.4 var(--sans); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval.resolved pre { display: none; flex-basis: 100%; order: 3; margin: 6px 0 2px; }
.approval.resolved.open pre { display: block; }
.approval.resolved .btns { order: 2; }
.approval.resolved .done { font-size: 12.5px; }
.approval.resolved.no .done { color: var(--oxblood); }

.note { font: 11.5px var(--mono); color: var(--muted); text-align: center; letter-spacing: .02em; }
.note.err { color: var(--oxblood); }
.note.task { text-align: left; margin-left: 16px; }

/* everything finished: a ruled teal marker you can spot while scrolling */
.alldone { display: flex; align-items: center; gap: 12px; margin: 6px 0 2px; color: var(--teal); font: 600 12.5px var(--sans); letter-spacing: .02em; }
.alldone::before, .alldone::after { content: ""; flex: 1; height: 1px; background: var(--teal); opacity: .45; }
.alldone span { padding: 4px 12px; border: 1px solid var(--teal); border-radius: 999px; background: var(--teal-wash); animation: rise .4s ease-out both; }

/* working: a live pulmonary artery tracing drawn on a canvas by traceTick() in app.js */
.working { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); margin-left: 16px; }
.working .trace { width: 110px; height: 22px; flex-shrink: 0; color: var(--teal); }
.working.bg .trace { opacity: .6; }

/* ---------- composer ---------- */
.composer { position: relative; padding: 10px 20px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--paper) 65%, transparent); }
.jump { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 6px 14px; border: 0; border-radius: 999px;
  background: var(--teal); color: var(--teal-ink); font: inherit; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; }
.jump[hidden] { display: none; }
/* live status strip: liveTick() in app.js */
.live { display: flex; align-items: center; gap: 8px; margin: 0 4px 6px; padding: 5px 12px; border-radius: 999px; background: var(--teal-wash);
  color: var(--ink-2); font-size: 12.5px; cursor: pointer; min-width: 0; }
.live[hidden] { display: none; }
.live b { color: var(--teal); font-weight: 700; flex-shrink: 0; }
.live .t { font: 12px var(--mono); color: var(--muted); flex-shrink: 0; }
.live .step { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); flex-shrink: 0; animation: livepulse 1.4s ease-in-out infinite; }
.live.quiet .pulse { background: var(--muted); }
@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .live .pulse { animation: none; } }
.slash { position: absolute; left: 20px; right: 20px; bottom: calc(100% - 6px); z-index: 3; max-height: 45vh; overflow-y: auto; padding: 6px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--panel); box-shadow: var(--shadow); }
.slash[hidden] { display: none; }
.slash button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; text-align: left; color: var(--ink); font-size: 14px; }
.slash button b { font: 600 13.5px var(--mono); color: var(--teal); }
.slash button i { font-style: normal; font-size: 12px; color: var(--muted); }
.slash button span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-2); }
.slash button.on, .slash button:hover { background: var(--teal-wash); }
.next { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 6px; }
.next button { padding: 7px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--panel); color: var(--ink); font-size: 13.5px;
  opacity: 0; animation: rise .35s ease-out forwards; transition: border-color .15s; }
.next button::before { content: "→ "; color: var(--teal); font-weight: 700; }
.next button:nth-child(2) { animation-delay: .08s; }
.next button:nth-child(3) { animation-delay: .16s; }
.next button:hover { border-color: var(--teal); }
.composer .box {
  max-width: 760px; margin: 0 auto; padding: 10px 10px 10px 16px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--rule-2); border-radius: 18px; background: var(--panel); box-shadow: var(--shadow);
  transition: border-color .15s, box-shadow .15s;
}
.composer .box:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash), var(--shadow); }
.composer textarea { border: 0; background: none; resize: none; outline: none; color: var(--ink); font: 15.5px/1.5 var(--sans); min-height: 26px; max-height: 40vh; }
.composer textarea::placeholder { color: var(--muted); }
.composer .row { display: flex; align-items: center; gap: 8px; }
.vxwarn { max-width: 760px; margin: 0 auto 8px; padding: 8px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.4;
  color: var(--ink-2); background: color-mix(in srgb, #c98a1b 13%, var(--panel)); border: 1px solid color-mix(in srgb, #c98a1b 35%, transparent); }
.vxwarn b { color: var(--ink); }
.vxwarn.high { background: var(--oxblood-wash); border-color: color-mix(in srgb, var(--oxblood) 40%, transparent); }
.engine { appearance: none; -webkit-appearance: none; max-width: 52%; border: 1px solid var(--rule-2); border-radius: 999px;
  padding: 5px 24px 5px 11px; font: 600 12.5px/1.2 var(--sans); color: var(--ink-2); text-overflow: ellipsis;
  background: var(--paper-2) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5'/></svg>") no-repeat right 9px center; }
.engine.vertex { color: var(--teal); border-color: color-mix(in srgb, var(--teal) 45%, transparent); background-color: var(--teal-wash); }
.engine.agy { color: #2c62b8; border-color: color-mix(in srgb, #2c62b8 45%, transparent); background-color: color-mix(in srgb, #2c62b8 12%, var(--paper-2)); }
.vxwarn.agy { background: color-mix(in srgb, #2c62b8 10%, var(--panel)); border-color: color-mix(in srgb, #2c62b8 35%, transparent); }
@media (prefers-color-scheme: dark) { .engine.agy { color: #8db8ea; } }
.engine:disabled { opacity: .6; }
.composer .row > button { flex-shrink: 0; }                 /* Send/Stop/📎 keep their size; the engine pill shrinks instead */
.composer .row .engine { flex: 0 1 auto; min-width: 0; }
.composer .chips { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; background: var(--teal-wash); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.dropzone { position: fixed; inset: 0; z-index: 50; display: none; place-items: center; padding: 16px; pointer-events: none;
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(2px); }
.dropzone div { width: 100%; height: 100%; display: grid; place-content: center; text-align: center; gap: 6px; border-radius: 22px;
  border: 2px dashed var(--teal); }
.dropzone b { font: 600 24px/1.2 var(--serif); color: var(--ink); }
.dropzone span { font-size: 13.5px; color: var(--ink-2); }
body.dragging .dropzone { display: grid; }
.chip img { width: 22px; height: 22px; object-fit: cover; border-radius: 5px; margin: -1px 6px -1px -6px; }
.chip button { border: 0; background: none; padding: 0 0 0 6px; color: var(--muted); }
.send { background: var(--teal); color: var(--teal-ink); border: 0; border-radius: 12px; padding: 8px 18px; font-weight: 700; transition: background .15s, transform .1s; }
.send:hover:not(:disabled) { background: var(--teal-2); }
.send:active:not(:disabled) { transform: scale(.97); }
.send:disabled { opacity: .35; cursor: default; }
.stop { background: var(--oxblood); color: #fff; border: 0; border-radius: 12px; padding: 8px 15px; font-weight: 700; }

.appframe { flex: 1; border: 0; width: 100%; background: var(--paper); }
.main.frame-loading .top { position: relative; }
.main.frame-loading .top::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 30%; background: var(--teal);
  border-radius: 2px; animation: framebar 1.1s ease-in-out infinite; }
@keyframes framebar { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .main.frame-loading .top::after { animation-duration: 3s; } }

/* ---------- login ---------- */
.login { position: relative; z-index: 1; min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.login form {
  width: 100%; max-width: 360px; padding: 34px 30px 28px; border-radius: 20px;
  background: var(--panel); border: 1px solid var(--rule); box-shadow: var(--shadow); animation: rise .5s ease-out both;
}
.login h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; font: 600 26px/1.1 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.015em; }
.login h1::before { content: ""; width: 28px; height: 28px; flex-shrink: 0; background: var(--teal);
  -webkit-mask: var(--wave) center/contain no-repeat; mask: var(--wave) center/contain no-repeat; }
.login input { width: 100%; padding: 11px 13px; margin-bottom: 12px; border-radius: 12px; border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink); font: inherit; }
.login input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-wash); }
.login button.send, .login a.send { width: 100%; padding: 11px 18px; font-size: 15px; }
.login .bad { color: var(--oxblood); background: var(--oxblood-wash); border-radius: 10px; padding: 8px 11px; font-size: 13px; margin-bottom: 12px; }

/* ---------- phones ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 20; width: min(86vw, 320px); transform: translateX(-102%);
    transition: transform .25s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 0 60px rgba(0, 0, 0, .3); }
  .side.open { transform: none; }
  .side { bottom: auto; top: var(--vvt, 0px); height: var(--vvh, 100dvh); }                       /* stay above Safari's bottom toolbar */
  .side footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .menu-btn, .close-side { display: inline-block; }
  .backdrop.show { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(10, 16, 14, .4); backdrop-filter: blur(2px); }
  .top { padding: 10px 14px; }
  .log { padding: 18px 14px 8px; }
  .composer { padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); }
  .composer .send, .composer .stop { padding: 8px 14px; }
  .composer textarea { font-size: 16px; }                    /* iOS zooms into fields under 16px, which broke the keyboard fit */
  .msg.user { max-width: 90%; }
  #archBtn, #delBtn { display: none !important; }              /* also on each sidebar row; frees the title */
  .mode button { padding: 4px 9px; }
  .filter { font-size: 16px; }
  .empty { margin-top: 6vh; }
  .empty h2 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .empty .loop path { stroke-dashoffset: 0; }
  .suggest button { opacity: 1; }
}

/* In-app Markdown viewer for outbox .md links */
.mdview { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--paper); }
.mdview-top { display: flex; align-items: center; gap: 14px; padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--panel); border-bottom: 1px solid var(--rule); }
.mdview-top b { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-weight: 500; font-size: 14px; }
.mdview-top a { color: var(--teal); font-size: 14px; }
.mdview-body { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 20px max(20px, calc((100% - 760px) / 2)) calc(48px + env(safe-area-inset-bottom)); line-height: 1.6; }
.mdview-body h1, .mdview-body h2, .mdview-body h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; margin: 1.2em 0 .4em; }
.mdview-body h1 { font-size: 1.6em; margin-top: .2em; }
.mdview-body h2 { font-size: 1.25em; border-bottom: 1px solid var(--rule); padding-bottom: .2em; }
.mdview-body a { color: var(--teal); }
.mdview-body code { background: var(--code); padding: .1em .35em; border-radius: 4px; font-family: var(--mono); font-size: .9em; }
.mdview-body pre { background: var(--code); padding: 12px; border-radius: 8px; overflow: auto; }
.mdview-body pre code { background: none; padding: 0; }
.mdview-body table { border-collapse: collapse; display: block; overflow: auto; }
.mdview-body th, .mdview-body td { border: 1px solid var(--rule); padding: 6px 10px; text-align: left; }
.mdview-body blockquote { margin: .8em 0; padding: .2em 0 .2em 14px; border-left: 3px solid var(--teal); color: var(--ink-2); }
.mdview-body hr { border: 0; border-top: 1px solid var(--rule); }