/* UniiChat: black ink on white paper. A block (a summary) is one grey
   box; a message (0x) looks by its kind. The colors are Theme.ts's, put
   in the page at boot: --ink, --mid, --soft, --hair, --paper, --block,
   --hover, --frame, --code, and per kind on .msg.<kind>: --fg, --bg, --it. */

:root {
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --brand: "Avenir Next", Avenir, Futura, var(--sans);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --col: 740px;
  --head: 57px; /* the header's height, where an open block's bar sticks */
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 20px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-anchor: none; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
::selection { background: var(--ink); color: var(--paper); }
a { color: inherit; text-underline-offset: 3px; }
/* no word left alone on a line: short text balanced, paragraphs pretty */
p, li, td { text-wrap: pretty; }
:is(h1, h2, .title, .sub, .cap, .fine, button, label) { text-wrap: balance; }

/* a guest's chat: only the log and the message box; a note alone (the
   terminal signed in) */
body.guest :is(.net, .credits, .all, .menu, .attach, .mic, #pick, #tabs) { display: none !important; }
body.solo main { width: min(420px, 100% - 48px); margin: 18vh auto; text-align: center; }
body.solo h1 { margin: 0; font: 400 46px/1.05 var(--serif); letter-spacing: -.015em; }
.sub { margin: 18px 0 0; color: var(--mid); font-size: 14.5px; }

/* Header: the logo, then buttons: grey chips, no borders. It and the footer keep clear of a phone's notch and
   home bar (safe-area insets: the page is drawn under them) */
header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; height: var(--head); padding: 0 max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); background: var(--paper); border-bottom: 1px solid var(--hair); }
header > button { height: 32px; padding: 0 12px; border-radius: 8px; background: var(--block); font-size: 13.5px; font-weight: 500; }
header > button:hover { background: var(--hover); }
header > .brand { margin-right: auto; display: flex; align-items: center; gap: 10px; height: auto; padding: 0; background: none; font: 600 20px/1 var(--brand); letter-spacing: -.01em; }
header > .brand:hover { background: none; }
.brand img { display: block; width: 26px; height: 26px; }
header .credits { font: 500 12.5px var(--mono); }
header .net { font-size: 13px; color: var(--mid); }

/* Footer: the rule with the pick (a click on a part moves it), the
   images waiting, the message box, the tabs (while agents work), and a
   guest's consent; over the log, as the header, and as low as it goes,
   so a phone with its keyboard up still shows the chat */
footer { position: sticky; bottom: 0; z-index: 2; padding: 18px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: linear-gradient(transparent, var(--paper) 14px); }
#pick { width: min(var(--col), 100%); margin: 0 auto 6px; display: flex; align-items: center; gap: 6px; font: 12.5px/20px var(--sans); color: var(--mid); }
#pick .rule { flex: 1; height: 1px; background: var(--hair); margin-right: 4px; }
#pick button { padding: 0 6px; border-radius: 6px; }
#pick button:hover { background: var(--block); color: var(--ink); }
#pick .dot { color: var(--soft); }

.composer { width: min(var(--col), 100%); margin: 0 auto; display: flex; align-items: flex-end; gap: 10px; border: 1px solid var(--frame); border-radius: 24px; padding: 7px 7px 7px 20px; background: var(--paper); box-shadow: var(--shadow); }
.composer:focus-within { border-color: var(--soft); }
.composer textarea { flex: 1; resize: none; border: 0; outline: 0; background: none; color: var(--ink); font: 16px/1.5 var(--sans); padding: 7px 0; max-height: 40vh; }
.composer textarea::placeholder { color: var(--soft); }
.send, .attach, .mic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; }
.send svg, .attach svg, .mic svg { width: 20px; height: 20px; stroke-width: 2; }
.send { background: var(--ink); color: var(--paper); }
.send.stop { background: var(--block); color: var(--ink); }
/* the send button's icons: an arrow, a square (stop) */
.send:not(.stop) svg + svg, .send.stop svg:first-child { display: none; }
.send.stop svg { fill: currentColor; stroke-width: 0; width: 16px; height: 16px; }
.attach { margin-left: -13px; color: var(--mid); }
.attach:hover { color: var(--ink); background: var(--hover); }
/* the mic: ink while it records; faint while its words are on their way */
.mic { margin-right: -6px; color: var(--mid); }
.mic:hover { color: var(--ink); background: var(--hover); }
.mic.rec { background: var(--ink); color: var(--paper); }
.mic:disabled { opacity: .4; cursor: default; }
/* the voice: while the mic records, the box shows how loud it hears you,
   newest at the right, and the time so far */
.composer .voice { display: none; flex: 1; align-items: center; gap: 12px; height: 38px; color: var(--ink); }
.composer.rec .voice { display: flex; }
.composer.rec textarea { display: none; }
.voice canvas { flex: 1; height: 28px; min-width: 0; }
.voice span { font: 14px var(--mono); color: var(--mid); font-variant-numeric: tabular-nums; }
.composer.off { border-color: var(--hair); }
.composer.off textarea { color: var(--soft); }
.composer.off .send { background: var(--hair); cursor: default; }
.composer.off :is(.attach, .mic) { visibility: hidden; }
#toast { width: fit-content; max-width: min(560px, 100%); margin: 0 auto 10px; padding: 8px 16px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 13.5px; }

#tabs { width: min(var(--col), 100%); margin: 6px auto 0; display: flex; gap: 16px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font: 13px/20px var(--sans); color: var(--mid); }
#tabs button { flex: none; }
#tabs button:hover, #tabs .here { color: var(--ink); }
#tabs .here { font-weight: 600; }

/* Popovers (the browser's): the menu, the wallet, Import History */
[popover] { inset: 60px 20px auto auto; margin: 0; width: 280px; padding: 10px 14px; border: 1px solid var(--hair); border-radius: 14px; color: var(--ink); background: var(--paper); box-shadow: var(--shadow); }
[popover] p { margin: 8px 0 6px; font-size: 14px; }
[popover] > button { display: block; width: 100%; padding: 8px 4px; text-align: left; font-size: 14.5px; border-radius: 10px; }
[popover] > button:hover { background: var(--hover); }
#menu { width: 180px; padding: 6px; box-shadow: 0 8px 24px rgb(0 0 0 / .12); }
.ai { margin: 6px 0 0; text-align: center; font: 12px var(--sans); color: var(--mid); }
body:not(.guest) .ai { display: none; }
/* the wallet (out of credit) and Import History (also a new account's
   first step): centered over the page. In Import History a model is a
   card (a radio), the one picked framed in ink; a running import's
   progress shows there and, small, in the header */
:is(#wallet, #import) { inset: 0; margin: auto; width: min(440px, 100vw - 40px); height: fit-content; max-height: 85vh; overflow: auto; padding: 14px 20px; }
:is(#wallet, #import)::backdrop { background: rgb(0 0 0 / 0.3); }
:is(#wallet, #import) .title { font-weight: 600; font-size: 16px; }
#wallet { width: min(380px, 100vw - 40px); padding: 20px 22px; }
#wallet .title { margin-top: 0; }
#wallet .title { margin-bottom: 16px; }
#import { width: min(480px, 100vw - 40px); padding: 20px 22px; }
#import .title { margin-top: 0; font-size: 17px; }
#import .sub { margin-top: 4px; }
#import :is(code, kbd) { font: .9em var(--mono); background: var(--block); border-radius: 5px; padding: .1em .35em; }
#import kbd { margin-right: 2px; }
#import :is(.found, .guess):empty { display: none; }
#import .found { font-weight: 500; }
#import .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 0; padding: 0; border: 0; }
#import .cards:empty { display: none; }
#import .card { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1.25px solid var(--hair); border-radius: 12px; cursor: pointer; font-size: 13px; color: var(--mid); }
#import .card:has(:checked) { border-color: var(--ink); color: var(--ink); }
#import .card input { position: absolute; opacity: 0; pointer-events: none; }
#import .card b { font-size: 15px; color: var(--ink); }
#import .card .say { font-size: 12px; min-height: 18px; }
#import .card .cost { margin-top: 6px; font: 500 15px var(--mono); color: var(--ink); }
#import .tools { display: block; margin: 10px 0 0; font-size: 13.5px; color: var(--mid); }
#import .topup:not(:empty) { margin: 10px 0 0; }
#import .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin: 16px 0 0; }
#import .acts button { padding: 7px 16px; border-radius: 8px; background: var(--block); font-size: 14px; font-weight: 500; }
#import .acts button:hover { background: var(--hover); }
#import .acts :is(.go, .pickdir) { background: var(--ink); color: var(--paper); }
#import .acts :is(.go, .pickdir):hover { background: var(--ink); opacity: .85; }
#import .acts .pickdir.alt { background: var(--block); color: var(--ink); }
#import .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#import .two button { min-height: 64px; padding: 10px 16px; font-size: 15px; white-space: normal; }
:is(#import .acts, .usd) button { white-space: nowrap; }
#import button:disabled { opacity: 0.4; cursor: default; }
:is(#import, .imping) progress { display: block; width: 100%; height: 6px; margin: 14px 0 6px; appearance: none; border: 0; border-radius: 3px; background: var(--block); overflow: hidden; }
:is(#import, .imping) progress::-webkit-progress-bar { background: var(--block); }
:is(#import, .imping) progress::-webkit-progress-value { background: var(--ink); transition: width .4s; }
:is(#import, .imping) progress::-moz-progress-bar { background: var(--ink); }
header > .imping { width: 72px; padding: 0 10px; }
.imping progress { margin: 0; height: 4px; }
@media (pointer: fine) { #import .phone { display: none; } }
@media not (pointer: fine) { #import .desk { display: none; } }
@media (max-width: 420px) { #import :is(.cards, .two) { grid-template-columns: 1fr; } }

/* The chat */
#log { width: min(var(--col), 100% - 40px); margin: 0 auto; padding: 24px 0 40px; min-height: calc(100vh - 180px); }
#log > * { margin-block: 14px; }
.cap { font: italic 14.5px var(--serif); color: var(--mid); }

/* a block: one summary, its size on the left */
.block { display: flex; gap: 12px; padding: 10px 14px; background: var(--block); border-radius: 10px; font: 15px/1.55 var(--serif); cursor: pointer; overflow-wrap: anywhere; }
.block:hover { background: var(--hover); }
.block .lv { flex: none; min-width: 38px; font: 600 11.5px/24px var(--sans); color: var(--mid); }

/* an open block: its halves inside a frame; a message open (1x) as it
   looks whole, its pill beside Copy, shown as Copy is */
.open { border: 1.25px solid var(--frame); border-radius: 12px; padding: 0 10px 10px; }
.open > * { margin: 10px 0 0; }
.open > .fold { position: sticky; top: var(--head); z-index: 1; display: block; width: 100%; padding: 6px 0; text-align: left; font: 600 12px var(--sans); color: var(--mid); background: var(--paper); border-bottom: 1px solid var(--hair); }
.open > .fold:hover { color: var(--ink); }
.open.one { position: relative; border: 0; border-radius: 0; padding: 0; }
.open.one > * { margin: 0; }
.open.one > .fold { position: absolute; top: calc(100% + 4px); right: 36px; z-index: 1; width: auto; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; font: 600 11.5px/26px var(--sans); opacity: 0; }
.open.one > .fold:hover { background: var(--hover); }
.open.one:hover > .fold { opacity: 1; }
/* a tall message (Html.ts TALL) folded to its head */
.msg:has(> .more:not([open])) > .clip { max-height: 20em; overflow: hidden; }
.more > summary { display: block; margin-top: 6px; font: 13px var(--sans); color: var(--mid); cursor: pointer; }
.more > summary::after { content: "Show all"; }
.more[open] > summary::after { content: "Fold"; }
.more > summary:hover { color: var(--ink); }

/* a message, by kind */
.msg { position: relative; overflow-wrap: anywhere; font: 17.5px/1.68 var(--serif); color: var(--fg); background: var(--bg); font-style: var(--it); }
.msg > :first-child, .msg > .copy + * { margin-top: 0; }
.msg > :last-child { margin-bottom: 0; }
.msg p, .msg ul, .msg ol, .msg pre, .msg blockquote { margin: 0 0 .85em; }
.msg ul, .msg ol { padding-left: 1.3em; }
.msg code { font: .82em var(--mono); background: var(--block); border-radius: 5px; padding: .1em .35em; }
.msg pre { position: relative; font: 13.5px/1.6 var(--mono); white-space: pre-wrap; background: var(--block); border-radius: 10px; padding: 13px 16px; overflow-x: auto; }
.msg pre code { font: inherit; background: none; padding: 0; }
.msg blockquote { padding-left: 1.2em; font: italic 16.5px/1.6 var(--serif); }
.msg table { border-collapse: collapse; font: 15px/1.45 var(--sans); }
.msg td, .msg th { text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--hair); }
.msg.user, .msg.work { margin-left: auto; width: fit-content; max-width: min(82%, 560px); padding: 10px 17px; border: 1.25px solid var(--ink); border-radius: 20px 20px 6px 20px; font: 16px/1.55 var(--sans); }
.msg.user p, .msg.work p, .msg.echo p { white-space: pre-wrap; }
.msg.tool, .msg.echo { padding: 8px 12px; border-radius: 8px; font: 12.5px/1.5 var(--mono); }
.msg.tool p, .msg.echo p { margin: 0; }
/* a tool call's head: its tool's icon, then the call */
.call { margin: 0; font: 12.5px/1.6 var(--mono); }
.call .ic { width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; color: var(--mid); stroke-width: 1.4; }
.msg.echo p + p { margin-top: .85em; }
.msg.tool pre { margin: 6px 0 0; font: inherit; padding: 6px 10px; border-radius: 6px; background: var(--code); color: var(--ink); }
.msg pre .lang { display: block; margin-bottom: 4px; font: 600 11px var(--sans); color: var(--mid); }
.msg.note, .msg.mind { font-size: 14.5px; line-height: 1.6; }
.msg .brand { font: 600 .92em var(--brand); font-style: normal; letter-spacing: -.01em; color: #6d3fd8; }
.msg .name { font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.msg .name:hover { background: var(--ink); color: var(--paper); }

/* Copy: under a message, and in a code block's corner, on hover */
.copy { position: absolute; right: 0; top: calc(100% + 4px); z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; color: var(--mid); background: var(--paper); border-radius: 6px; opacity: 0; user-select: none; }
.copy:hover { color: var(--ink); background: var(--hover); }
.msg pre > .copy { top: 7px; right: 7px; background: var(--block); }
.msg:hover > .copy, .msg pre:hover > .copy { opacity: 1; }
/* a touch screen has no hover: Copy always shows, in room of its own (it
   had covered the next row's first line and a code block's line end) */
@media (hover: none) {
  .copy, .open.one > .fold { opacity: .6; }
  #log .msg:has(> .copy) { margin-bottom: 34px; }
  .msg pre:has(> .copy) { padding-right: 40px; }
  .msg pre > .copy { top: 9px; right: 9px; }
}
/* a touch browser zooms the page into a field whose font is under 16px */
@media (hover: none) { input, select { font-size: 16px; } }
/* a finger needs 44px: small buttons take taps around them (a box
   centered on each, not drawn), links in small print above and below */
@media (pointer: coarse) {
  :is(header > button, #pick button, #tabs button) { position: relative; }
  :is(header > button, #pick button, #tabs button, .copy, .open.one > .fold)::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  :is(.ai, .fine, .foot) a { padding: 14px 0; }
  :is(.chip, .usd button) { height: 44px; }
  [popover] > button { min-height: 44px; }
}

/* images: under a message, each a link; over the box, those waiting to
   be sent (a click drops one) */
.pics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pics img { display: block; height: 120px; max-width: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--hair); }
#pics { width: min(var(--col), 100%); margin: 0 auto 8px; }
#pics:empty { display: none; }
#pics img { height: 64px; cursor: pointer; }

@media (max-width: 600px) {
  :root { --head: 51px; }
  header { padding: 0 14px; }
  .brand span { display: none; }
  header > button { height: 30px; padding: 0 10px; font-size: 13px; }
  #log { width: calc(100% - 28px); }
  footer { padding: 12px 14px max(8px, env(safe-area-inset-bottom)); }
  .composer { padding: 5px 5px 5px 16px; }
  #account { width: calc(100% - 28px); }
  [popover] { left: 12px; right: 12px; width: auto; }
  #menu { left: auto; width: 180px; }
}

/* The account page (/account): one column of sections, each a small
   title over its content; buttons are grey chips (Delete red) */
#account { width: min(var(--col), 100% - 40px); margin: 0 auto; padding: 18px 0 64px; font-size: 15px; }
#account .back { display: inline-block; padding: 8px 0; font-size: 14px; color: var(--mid); text-decoration: none; }
#account .back:hover { color: var(--ink); }
#account h1 { margin: 6px 0 22px; font: 600 30px/1.2 var(--brand); letter-spacing: -.015em; }
#account section { padding: 22px 0; border-top: 1px solid var(--hair); }
#account h2 { margin: 0 0 14px; font: 600 12px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--mid); }
#account section > p { margin: 0 0 10px; }
#account section > p:last-child { margin-bottom: 0; }
#account .big { margin: 0 0 16px; font: 500 36px/1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.usd { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; max-width: 420px; }
.usd button.on { background: var(--ink); color: var(--paper); }
.usd button { height: 40px; padding: 0 8px; border-radius: 10px; background: var(--block); font-weight: 600; }
.usd button:hover { background: var(--hover); }
.credit .fine { margin: 12px 0 0; font-size: 12.5px; color: var(--mid); }
.chip { flex: none; display: inline-grid; place-items: center; height: 36px; padding: 0 14px; border-radius: 9px; background: var(--block); font: 500 14px var(--sans); color: var(--ink); text-decoration: none; }
.chip:hover { background: var(--hover); }
.chip svg { width: 15px; height: 15px; }
.chip.red { color: #b42318; }
.wide { overflow-x: auto; }
#account table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
#account :is(th, td) { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--hair); text-align: left; white-space: nowrap; }
#account th { font-size: 12.5px; font-weight: 500; color: var(--mid); }
#account :is(th, td):not(:first-child) { text-align: right; }
#account :is(th, td):last-child { padding-right: 0; }
#account :is(.days, .buys) :is(th, td):nth-child(2) { text-align: left; }
#account td:nth-child(2) { white-space: normal; }
#account tr:last-child td { border-bottom: 0; }
.item { display: flex; gap: 16px; align-items: center; justify-content: space-between; padding: 12px 0; }
.item + .item { border-top: 1px solid var(--hair); }
#account .item p { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
#account .chip { min-width: 96px; }
.item small { display: block; font-size: 13.5px; font-weight: 400; color: var(--mid); overflow-wrap: anywhere; }
.kill { margin-top: 10px; padding: 16px; border-radius: 12px; background: var(--block); }
.kill input { width: 100%; height: 44px; margin: 8px 0 16px; padding: 0 12px; border: 1px solid var(--frame); border-radius: 9px; background: var(--paper); color: var(--ink); font: 16px var(--sans); }
.kill div { display: flex; gap: 8px; justify-content: flex-end; }
.kill .chip { background: var(--paper); }
.kill .chip.red { background: #b42318; color: #fff; }
.kill p { margin: 0 0 8px; font-size: 14.5px; }
.kill .why { color: #b42318; }
.kill .why:empty { display: none; }
.kill .chip:disabled { opacity: .4; cursor: default; }
#account .foot { margin: 24px 0 0; font-size: 13px; color: var(--mid); }
#account .foot a { text-decoration: none; }
#account .foot a:hover { text-decoration: underline; }

/* The intro (main.ts): its two scenes share one grid cell; the first's
   lines rise .38 s apart, and it fades as the second's logo and name
   rise; `hold` ends the intro after the last, and `.out` fades it. */
#intro { position: fixed; inset: 0; z-index: 9; display: grid; place-items: center; background: var(--paper); color: var(--ink); cursor: pointer; transition: opacity .6s ease; animation: hold 3.05s; }
#intro.out { opacity: 0; pointer-events: none; }
#intro .scene { grid-area: 1 / 1; display: grid; justify-items: center; gap: 4px; padding: 24px; text-align: center; }
#intro .scene:first-child { animation: gone .45s ease 1.5s forwards; }
#intro .scene > * { margin: 0; animation: rise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
#intro .scene > :nth-child(2) { animation-delay: .38s; }
#intro .scene + .scene > :first-child { animation-delay: 1.5s; }
#intro .scene + .scene > :nth-child(2) { animation-delay: 1.88s; }
#intro p { font: 400 clamp(19px, 2.3vw, 25px)/1.35 var(--serif); letter-spacing: -.01em; }
#intro img { display: block; width: 56px; height: 56px; }
#intro h1 { margin-top: 14px; font: 600 28px/1.1 var(--brand); letter-spacing: -.015em; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }
@keyframes gone { to { opacity: 0; } }
@keyframes hold { to { visibility: visible; } }