/* The phone's screen: a faithful copy of the app's chat (lib/ai_chat_ui), in its own points (402 × 874).
   Every size, colour and type style below is taken from chat_tokens.dart, glass.dart and the widgets that use them. */

/* ── Hero: copy | phone | what the request came to. Both sides are the same width, so the phone sits dead centre. ── */

.hero {
  position: relative; min-height: 100svh;
  width: min(1240px, calc(100% - 28px)); margin: 0 auto; padding: 108px 14px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(32px, 4.5vw, 72px);
}
.copy { display: grid; gap: 26px; align-content: center; justify-self: start; max-width: 440px; }
.copy h1 { font-size: clamp(2.6rem, 4.3vw, 4.2rem); line-height: 1.02; }
.lede { max-width: 34ch; }

/* The App Store line: a small glass capsule with Apple's mark. */
.soon { --r: 999px; justify-self: start; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 16px; font-size: 15px; font-weight: 500; color: var(--ink-700); }
.soon b { font-weight: 700; color: var(--ink); }
.soon .apple { width: 19px; height: 19px; margin-top: -3px; fill: var(--ink); }

/* What started it: the message itself, in soft glass. Under it, quiet dots to move between them; the one playing stretches and fills with light. */
.pick { display: grid; gap: 14px; margin-top: 10px; justify-items: start; }
.said { --r: 26px; width: 100%; padding: 16px 22px 18px; display: grid; gap: 6px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.08) 55%, rgb(255 255 255 / 0.18));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.75), inset 0 0 0 1px rgb(255 255 255 / 0.55), inset 0 0 18px rgb(255 255 255 / 0.35), 0 20px 40px -26px rgb(var(--glass-shadow) / 0.35); }
.said.glass.backdrop { -webkit-backdrop-filter: blur(20px) saturate(1.5) brightness(1.04); backdrop-filter: blur(20px) saturate(1.5) brightness(1.04); }
.said-l { font: 500 13px/1.2 var(--sans); color: var(--muted); }
.said-q { margin: 0; min-height: 2.7em; font: 500 18px/1.35 var(--sans); letter-spacing: -0.012em; color: var(--ink); text-wrap: pretty; }
.steer { display: flex; align-items: center; gap: 6px; margin-left: -4px; }
.nb { all: unset; box-sizing: border-box; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; color: var(--ink-700); opacity: 0.7; transition: opacity 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); }
.nb svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nb:hover { opacity: 1; background: rgb(255 255 255 / 0.35); }
.nb:active { transform: scale(0.92); }
.nb:focus-visible { outline: 2px solid rgb(111 146 237 / 0.6); outline-offset: 2px; }
.asks { list-style: none; margin: 0; padding: 0 2px; display: flex; align-items: center; gap: 7px; }
.asks li { display: flex; }
.asks button { all: unset; box-sizing: border-box; position: relative; overflow: hidden; cursor: pointer; width: 7px; height: 7px; border-radius: 999px;
  background: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.8), 0 1px 4px rgb(var(--glass-shadow) / 0.18);
  transition: width 0.5s var(--ease), background 0.4s var(--ease); }
.asks button:hover { background: rgb(255 255 255 / 0.9); }
.asks button[aria-current="true"] { width: 30px; background: rgb(255 255 255 / 0.4); }
.asks .pg { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #8fc6f6, #6f92ed); box-shadow: 0 0 6px rgb(127 186 243 / 0.7);
  transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.asks button[aria-current="true"] .pg { opacity: 1; transform: scaleX(var(--p, 0)); }

/* ── What it came to: large glass panels, beside the phone ── */
.side { position: relative; align-self: stretch; display: grid; align-items: center; justify-items: end; min-height: 420px; }
.stack { width: min(100%, 360px); display: grid; gap: 14px; }
.sc { --r: 28px; padding: 22px 24px; color: var(--ink); }
.sc.glass { box-shadow: inset 0 0 18px rgb(255 255 255 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.95), inset 0 0 0 1px rgb(255 255 255 / 0.85),
  0 0 22px rgb(255 255 255 / 0.5), 0 30px 50px -30px rgb(var(--glass-shadow) / 0.45); }
.sk { display: flex; align-items: center; gap: 8px; font: 600 14px/20px var(--sans); color: var(--ink-700); }
.sk .glyph { --size: 18px; --tint: #4464d6; }
.sk span { flex: 1; }
.sk em { font-style: normal; font-weight: 600; color: var(--accent-700); font-variant-numeric: tabular-nums; }
.sc .big { margin-top: 10px; font: 600 64px/1 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.sc .big small { margin-left: 6px; font-size: 26px; letter-spacing: -0.02em; color: var(--ink-700); }
.sc .cap { margin-top: 14px; font: 400 14px/20px var(--sans); color: var(--muted); }
.fill { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8fd0f7, #5578e6); transition: width 1.3s cubic-bezier(0.16, 1, 0.3, 1) 0.35s; }
.stack.on .fill { width: var(--w); }

/* Storage: the freed space split by what it was. */
.stack-bar { margin-top: 18px; height: 12px; display: flex; gap: 3px; border-radius: 6px; overflow: hidden; background: rgb(255 255 255 / 0.45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7); }
.stack-bar .fill { border-radius: 3px; flex: none; }
.stack-bar .fill.b { background: linear-gradient(90deg, #6f92ed, #304dbb); }
.stack-bar .fill.c { background: #a9c3f2; }
.legend { margin-top: 14px; display: grid; gap: 8px; }
.legend div { display: flex; align-items: center; gap: 9px; font: 400 14px/19px var(--sans); color: var(--ink-700); }
.legend i { width: 9px; height: 9px; border-radius: 3px; background: #7cc4f5; flex: none; }
.legend i.b { background: #4a6bdc; } .legend i.c { background: #a9c3f2; }
.legend span { flex: 1; }
.legend b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Two small figures side by side. */
.sc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sc.mini { --r: 24px; padding: 18px 18px 16px; }
.mini b { display: block; font: 600 30px/1.05 var(--sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.mini > span { display: block; margin-top: 6px; font: 400 13px/17px var(--sans); color: var(--muted); }

/* A one-line note: a glyph and a sentence. */
.sc.note { --r: 999px; padding: 13px 20px; display: flex; align-items: center; gap: 10px; font: 500 14.5px/20px var(--sans); color: var(--ink-700); justify-self: start; }
.note .glyph { --size: 18px; --tint: #4464d6; }

/* A picture as Photos holds it: the image inset in the glass, its name under it. */
.sc.album { padding: 10px 10px 18px; }
.cover img, .shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; display: block; }
.cover img { aspect-ratio: 1 / 0.9; }
.shot { position: relative; }
.alb { padding: 14px 12px 0; }
.alb b { display: block; font: 600 24px/1.15 var(--sans); letter-spacing: -0.02em; }
.alb > span { display: block; margin-top: 3px; font: 400 14px/19px var(--sans); color: var(--muted); }
.fav { --r: 999px; position: absolute; right: 12px; top: 12px; width: 40px; height: 40px; display: grid; place-items: center; }
.fav svg { width: 20px; height: 20px; fill: #ff5a7a; filter: drop-shadow(0 1px 3px rgb(255 90 122 / 0.4)); }
.play { --r: 999px; position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; }
.play svg { width: 24px; height: 24px; margin-left: 3px; fill: #fff; filter: drop-shadow(0 1px 4px rgb(12 26 87 / 0.4)); }
.dur { position: absolute; right: 12px; bottom: 10px; font: 600 13px/18px var(--sans); color: #fff; text-shadow: 0 1px 4px rgb(0 0 0 / 0.5); font-variant-numeric: tabular-nums; }
.clipline { padding: 16px 12px 0; }
.clipline .track { margin: 0; position: relative; display: block; height: 8px; border-radius: 4px; background: rgb(255 255 255 / 0.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7); }
.clipline .seg { position: absolute; left: var(--l); top: 0; bottom: 0; }
.clipline > div { position: relative; display: flex; justify-content: space-between; margin-top: 7px; font: 400 12.5px/16px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.clipline .at { position: absolute; top: 0; color: var(--accent-700); font-weight: 600; }

/* The sticker, on nothing but the glass. */
.sticker-sc .cut { height: 270px; display: grid; place-items: center; }
.sticker-sc .cut img { max-height: 250px; max-width: 88%; filter: drop-shadow(0 16px 22px rgb(12 26 87 / 0.28)); }
.sticker-sc .alb { padding-top: 4px; }

/* Albums: each with its cover, its share of the library as a bar, the count. */
.bars { margin-top: 14px; display: grid; gap: 10px; }
.bars > div { display: grid; grid-template-columns: 32px 74px 1fr 26px; align-items: center; gap: 10px; font: 500 14px/19px var(--sans); color: var(--ink); }
.bars img { width: 32px; height: 32px; border-radius: 9px; object-fit: cover; }
.bars .track { margin: 0; display: block; height: 7px; border-radius: 4px; background: rgb(255 255 255 / 0.5); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.7); }
.bars b { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bars .add { grid-template-columns: 32px 1fr auto; padding-top: 10px; border-top: 1px solid rgb(126 144 188 / 0.25); }
.bars .add em { font-style: normal; font-weight: 600; color: var(--accent-700); }

/* Flights: a boarding pass per flight. */
.sc.pass { padding: 18px 22px; }
.pt { display: flex; justify-content: space-between; font: 600 13.5px/18px var(--sans); color: var(--ink-700); }
.pt span { font-weight: 500; color: var(--muted); }
.route { margin-top: 10px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.route b { display: block; font: 600 34px/1 var(--sans); letter-spacing: -0.03em; }
.route span { display: block; margin-top: 6px; font: 500 15px/20px var(--sans); color: var(--ink-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.route s { color: var(--dim); font-weight: 400; margin-right: 4px; }
.route .to { text-align: right; }
.fly { display: flex; align-items: center; gap: 6px; margin-top: -24px; }
.fly i { flex: 1; height: 0; border-top: 1.5px dashed rgb(85 120 230 / 0.45); }
.fly svg { width: 20px; height: 20px; fill: #4464d6; transform: rotate(90deg); }
.pf { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgb(126 144 188 / 0.35); display: flex; justify-content: space-between; gap: 10px; font: 400 13px/18px var(--sans); color: var(--muted); }
.pf em { font-style: normal; font-weight: 600; color: var(--accent-700); }

/* Reminders. */
.todo { margin-top: 12px; display: grid; }
.todo div { display: flex; align-items: center; gap: 12px; padding: 10px 0; font: 500 15px/20px var(--sans); }
.todo div + div { border-top: 1px solid rgb(126 144 188 / 0.22); }
.todo i { width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a7b5d6; }
.todo span { flex: 1; }
.todo b { font: 500 13px/18px var(--sans); color: var(--muted); }
.todo b.late { color: #d6453d; font-weight: 600; }

/* Wifi: the network, the password large, where it was found. */
.net { display: flex; align-items: center; gap: 12px; }
.net .stile { width: 44px; height: 44px; border-radius: 14px; }
.net span, .pw span { display: block; font: 500 13px/17px var(--sans); color: var(--muted); }
.net b { display: block; font: 600 17px/22px var(--sans); }
.pw { margin-top: 20px; }
.pw b { display: block; margin-top: 4px; font: 600 40px/1.05 var(--sans); letter-spacing: -0.02em; word-break: break-all; }
.src { margin-top: 20px; padding-top: 14px; border-top: 1px solid rgb(126 144 188 / 0.25); display: flex; align-items: center; gap: 12px; font: 400 13.5px/18px var(--sans); color: var(--muted); }
.src img { width: 46px; height: 46px; border-radius: 11px; object-fit: cover; flex: none; }

@media (max-height: 820px) and (min-width: 901px) { .hero { padding-top: 96px; padding-bottom: 24px; } .copy { gap: 20px; } .pick { margin-top: 2px; } }

/* ── Inside the phone ── */

.ui { font-family: var(--sans); -webkit-font-smoothing: antialiased; }
.ui .glyph { --tint: var(--ink); }
/* Lit tiles carry a white mark (StatusTile: ChatColors.onFill; ShineIcon on the approval tile). */
.ui .glyph.shine { --tint: #fff; }
.tab { font-variant-numeric: tabular-nums; }

/* Header: 44pt glass discs, the thread's title between them. */
.hdr { position: absolute; left: 0; right: 0; top: 54px; height: 60px; padding: 8px 16px; display: flex; align-items: center; gap: 12px; z-index: 4; }
.hdr .disc { --r: 999px; width: 44px; height: 44px; display: grid; place-items: center; flex: none; }
.hdr .glyph { --size: 20px; }
.hdr b { flex: 1; text-align: center; font: 600 16px/24px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.statusbar { z-index: 5; }
.hdr-fade { position: absolute; left: 0; right: 0; top: 0; height: 130px; z-index: 3; pointer-events: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  -webkit-mask: linear-gradient(#000 0 100px, transparent 130px); mask: linear-gradient(#000 0 100px, transparent 130px); }

/* The list scrolls under the header and the composer. */
.list { position: absolute; left: 0; right: 0; top: 114px; bottom: 0; overflow: hidden; z-index: 1; }
.feed { padding-bottom: 214px; transition: opacity 0.5s var(--ease); }
.feed.fade { opacity: 0; }

/* Arrivals: ChatAppear, a short fade and lift. */
@keyframes appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ap { animation: appear 0.42s cubic-bezier(0.33, 1, 0.68, 1) both; }
.instant *, .instant *::before, .instant *::after { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* ── User turn: UserBubble ── */

.u { padding: 24px 20px 4px; display: flex; flex-direction: column; align-items: flex-end; }
.bubble { --r: 30px; transform-origin: 100% 100%; max-width: 307px; padding: 11px 16px; font: 400 14px/20px var(--sans); color: var(--ink); }
.att { display: flex; gap: 6px; margin-bottom: 8px; }
.att img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; }
.att + .msg:empty { display: none; }

/* ── Assistant turn ── */

.a { padding: 10px 22px; }

/* The work: one thread down the marker column. */
.work { position: relative; }
.work::before { content: ""; position: absolute; left: 14.25px; width: 1.5px; top: 15px; bottom: 15px; background: linear-gradient(#fff, rgb(191 227 251 / 0.9)); }

.ph { position: relative; display: flex; align-items: flex-start; min-height: 48px; padding: 6px 0; }
.mk { position: relative; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px;
  background: rgb(244 250 255 / 0.9);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), inset 0 0 7px rgb(255 255 255 / 0.5), 0 0 5px rgb(255 255 255 / 0.5), 0 3px 6px -2px rgb(var(--glass-shadow) / 0.2); }
.mk .glyph { --size: 18px; --tint: #4464d6; }
.ph .tx { flex: 1; min-width: 0; margin-left: 12px; padding-top: 5.25px; }
.ph .t { font: 500 14px/19.5px var(--sans); color: var(--ink); }
.ph .s { font: 400 12.5px/16px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.chev { --g: url(assets/glyphs/chevron_down.png); --size: 14px; --tint: #7e90bc; margin: 8px 0 0 6px; }

/* PhotoPeek: up to three 30pt thumbs, overlapping, on white. */
.peek { position: relative; height: 32px; margin-left: 8px; flex: none; }
.peek img { position: absolute; top: 0; width: 32px; height: 32px; padding: 1.25px; background: #fff; border-radius: 9px; object-fit: cover; box-shadow: 0 1px 4px rgb(66 118 222 / 0.2); }

/* The stage: the star, what's happening in the agent's words, and the time. */
.stage { position: relative; display: flex; align-items: flex-start; padding: 6px 0; }
.star { position: relative; width: 30px; height: 30px; flex: none; }
.star img { position: absolute; left: -5px; top: 2px; width: 40px; height: 40px; max-width: none; }
.stage .tx { flex: 1; min-width: 0; margin-left: 12px; }
.shim {
  font: 600 15.5px/21px var(--sans); letter-spacing: -0.1px;
  background: linear-gradient(90deg, #2c3e7c 0 35%, #081243 50%, #2c3e7c 65% 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 2.2s linear infinite;
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.stage .shim.swap { animation: shimmer 2.2s linear infinite, rise 0.36s cubic-bezier(0.33, 1, 0.68, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.clock { margin-top: 1px; font: 400 12.5px/16px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: pre; }

/* Under the clock: FlowingText thinking (12.5/17 zinc500), _SideStep (ChatRing 15 + 13/18 zinc700), _LiveStep (label, figure, ChatBar 5pt). */
.ex { overflow: hidden; }
.ex .th { padding-top: 5px; font: 400 12.5px/17px var(--sans); color: #51669a; }
.ex .sd { display: flex; align-items: flex-start; gap: 9px; padding-top: 7px; font: 400 13px/18px var(--sans); color: #2c3e7c; }
.ring { position: relative; flex: none; width: 15px; height: 15px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.8px rgb(255 255 255 / 0.8); }
.ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, rgb(95 195 246 / 0) 0 10%, #5fc3f6 72%, #5578e6 100%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.8px), #000 calc(100% - 1.7px)); mask: radial-gradient(closest-side, transparent calc(100% - 1.8px), #000 calc(100% - 1.7px));
  animation: spin 1.3s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.ex .lv { padding-top: 9px; }
.ex .lv .lt { display: flex; align-items: baseline; gap: 10px; font: 400 12.5px/16px var(--sans); color: #2c3e7c; }
.ex .lv .lt span { flex: 1; min-width: 0; }
.ex .lv .lt b { font-weight: 500; font-variant-numeric: tabular-nums; }
.cbar { position: relative; margin-top: 5px; height: 5px; border-radius: 3px; overflow: hidden; background: rgb(255 255 255 / 0.55); box-shadow: inset 0 0 0 0.5px rgb(66 118 222 / 0.2); }
.cbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 1.6%; border-radius: 3px; background: linear-gradient(90deg, #7cd0f7, #5578e6); }

/* TurnStartLine: before anything shows, the larger star where the reply will start. */
.start { display: flex; align-items: center; padding: 4px 0; }
.start img { width: 46px; height: 46px; margin-left: -5px; }
.start .shim { margin-left: 6px; }

/* The answer: ChatText.chat. */
.ans { padding: 2px 0; font: 400 16px/1.5 var(--sans); letter-spacing: -0.05px; color: var(--ink); }
.ans b { font-weight: 600; color: #0c1a57; }
.ans .w { opacity: 0; transition: opacity 0.3s linear; }
.ans.on .w { opacity: 1; }

.payoff { padding-top: 14px; display: grid; gap: 12px; }

/* "What I did · 9 steps · 41s" */
.did { display: flex; align-items: center; min-height: 44px; margin-top: 6px; font: 600 13px/18px var(--sans); color: #2c3e7c; }
.did span { margin-left: 8px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
.did .chev { margin: 0 0 0 4px; --tint: #51669a; }

/* ── Result cards: ResultCard (glass r18), CardHead, FactCard, StatusList ── */

.rc { --r: 18px; padding: 11px 13px; }
.rc.glass { box-shadow: inset 0 0 13px rgb(255 255 255 / 0.62), inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 0 0 1px rgb(255 255 255 / 0.82), 0 0 9px rgb(255 255 255 / 0.5), 0 14px 24px -16px rgb(var(--glass-shadow) / 0.3); }
.head { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.head .glyph { --size: 16px; --tint: #4464d6; }
.head b { flex: 1; font: 600 13px/18px var(--sans); color: var(--ink); }
.head span { font: 400 13px/18px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.rule { height: 0.75px; background: rgb(126 144 188 / 0.3); }

.fact { display: flex; align-items: center; gap: 12px; }
.stile { width: 44px; height: 44px; border-radius: 13.2px; flex: none; display: grid; place-items: center; }
.stile .glyph { --size: 24.6px; }
.fact .f { font: 600 21px/26px var(--sans); letter-spacing: -0.25px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact .ab { font: 500 14px/19.5px var(--sans); color: #1a2a69; }
.fact .de { font: 400 13px/18px var(--sans); color: var(--muted); }

.lrow { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.lrow img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; flex: none; }
.lrow .tx { flex: 1; min-width: 0; }
.lrow .t { font: 600 14px/19.5px var(--sans); color: var(--ink); }
.lrow .s { font: 400 13px/18px var(--sans); color: var(--muted); }
.lrow .v { font: 600 15.5px/21px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.lrow.total .t { font-weight: 600; }
.lrow.total .v { color: #304dbb; }

/* PhotoMosaic: the first large, two beside it, the rest in a row; the last counts what's left. */
.mosaic { display: grid; gap: 3px; grid-template-columns: 219.3px 109.7px; }
.mosaic .big { grid-row: span 2; height: 175.5px; }
.mosaic .sm { height: 86.25px; }
.mosaic .row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.mosaic .row > * { height: 108.2px; }
.mosaic img, .mosaic .rest { width: 100%; object-fit: cover; border-radius: 5px; display: block; }
.mosaic .rest { position: relative; }
.mosaic .rest img { height: 100%; }
.mosaic .rest b { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 5px; background: rgb(12 26 87 / 0.55); color: #fff; font: 600 15.5px/21px var(--sans); font-variant-numeric: tabular-nums; }

/* PhotoHero: glass panel, 5pt in, the photo at r16, its caption. */
.hero-ph { --r: 20px; padding: 5px; }
.hero-ph .img { position: relative; }
.hero-ph img { width: 100%; height: 208px; object-fit: cover; border-radius: 16px; display: block; }
.hero-ph .cap { padding: 9px 10px 6px; font: 500 13px/18px var(--sans); color: var(--ink-600); }
.vid { position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 5px; color: #fff; font: 600 12px/16px var(--sans); text-shadow: 0 1px 4px rgb(0 0 0 / 0.45); font-variant-numeric: tabular-nums; }
.vid .glyph { --size: 13px; --tint: #fff; filter: drop-shadow(0 1px 3px rgb(0 0 0 / 0.4)); }

/* ResultCard's quiet footer. */
.rc .foot { margin: 8px 0 0; font: 400 13px/18px var(--sans); color: var(--muted); }
.rule.gap { margin: 11px 0 9px; }

/* A file in a list: the quiet tile the phases use (accent glyph on pale glass). */
.ftile { width: 36px; height: 36px; flex: none; border-radius: 9px; display: grid; place-items: center; background: rgb(244 250 255 / 0.9);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), 0 0 5px rgb(255 255 255 / 0.5), 0 3px 6px -2px rgb(var(--glass-shadow) / 0.2); }
.ftile .glyph { --size: 19px; --tint: #4464d6; }
.lrow.off .t, .lrow.off .s { color: var(--muted); }
.lrow.off .t { text-decoration: line-through; text-decoration-color: rgb(126 144 188 / 0.6); }

/* _AlarmRow: the time in ChatText.title, its name in meta zinc700, the detail on the right. New ones carry a dot. */
.alrow { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.alrow > div:first-child { flex: 1; }
.alrow .at { font: 600 15.5px/21px var(--sans); letter-spacing: -0.1px; color: var(--ink); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 7px; }
.alrow.new .at::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--deep)); box-shadow: 0 0 5px rgb(85 120 230 / 0.5); }
.alrow .an { font: 400 13px/18px var(--sans); color: #2c3e7c; }
.alrow .ad { flex: 1; padding-top: 2px; text-align: right; font: 400 13px/18px var(--sans); color: var(--muted); }
.alrow.off .at { color: var(--muted); }

/* EventRow: a 44pt white date tile (month in overline, the day at 19), then title, when, where. */
.ev { display: flex; align-items: flex-start; gap: 11px; }
.ev .dt { width: 44px; flex: none; padding: 5px 0; display: grid; justify-items: center; border-radius: 11px; background: rgb(255 255 255 / 0.9); box-shadow: 0 2px 6px rgb(66 118 222 / 0.15); }
.ev .dt i { font: 600 9.5px/12px var(--sans); font-style: normal; letter-spacing: 0.6px; color: #4464d6; }
.ev .dt b { font: 600 19px/22px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.ev .et { font: 600 14px/19.5px var(--sans); color: var(--ink); }
.ev .ew { font: 400 12.5px/16px var(--sans); color: var(--ink-600, #44588e); font-variant-numeric: tabular-nums; }
.ev .ep { font: 400 12.5px/16px var(--sans); color: var(--muted); }

/* _AgendaRow: the time in the gutter (meta, accent600, semibold), the title (tool, semibold), the place (xs). */
.agenda { display: grid; gap: 6px; padding: 2px 0 2px; }
.ag { display: flex; align-items: flex-start; }
.ag > span { width: 48px; flex: none; font: 600 13px/19.5px var(--sans); color: #4464d6; font-variant-numeric: tabular-nums; }
.ag b { display: block; font: 600 14px/19.5px var(--sans); color: var(--ink); }
.ag em { display: block; font: 400 12px/16px var(--sans); font-style: normal; color: var(--muted); }
.ag.on > span, .ag.on b { color: #304dbb; }

/* ResultHeadline: a lit 40pt tile, the figure in ChatText.display, its caption. */
.hl { display: flex; align-items: center; gap: 11px; }
.rtile { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; }
.rtile .glyph { --size: 21px; }
.hlv { font: 600 21px/26px var(--sans); letter-spacing: -0.25px; color: var(--ink); font-variant-numeric: tabular-nums; }
.hlc { font: 400 13px/18px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
/* _Track: the recording end to end, what matters lit, its ends marked. */
.track { margin-top: 12px; }
.trk { position: relative; height: 16px; border-radius: 5px; overflow: hidden; background: rgb(185 203 233 / 0.42); }
.trk i { position: absolute; top: 0; bottom: 0; background: linear-gradient(#8fb4f3, #5578e6); }
.trl { display: flex; justify-content: space-between; margin-top: 4px; font: 400 12px/16px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
/* _SoundRow: the sound, how sure, as a 64pt level. */
.snd { display: flex; align-items: center; gap: 10px; padding: 3px 0; font: 400 13px/18px var(--sans); color: #1a2a69; }
.snd span { flex: 1; }
.snd i { position: relative; width: 64px; height: 5px; border-radius: 3px; overflow: hidden; background: rgb(185 203 233 / 0.5); }
.snd i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--l) * 100%); border-radius: 3px; background: linear-gradient(90deg, #8fb4f3, #5578e6); }
/* ResultFigures: each value over its name. */
.figs { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.figs b { display: block; font: 600 14px/19.5px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.figs span { font: 400 12px/16px var(--sans); color: var(--muted); }
.rtile.lit {
  background:
    radial-gradient(60% 50% at 24% 6%, rgb(180 236 251 / 0.9), rgb(180 236 251 / 0) 72%),
    radial-gradient(110% 80% at 56% 106%, rgb(95 125 234 / 1), rgb(95 125 234 / 0) 80%),
    linear-gradient(165deg, #7fbaf3, #6f92ed);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), inset 0 0 0 2.4px rgb(255 255 255 / 0.14), 0 0 9px rgb(255 255 255 / 0.7), 0 5px 10px -4px rgb(var(--lit-shadow) / 0.6);
}

/* Weather strip: hours across. */
.hours { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); text-align: center; padding: 4px 0 2px; }
.hours div { display: grid; justify-items: center; gap: 5px; }
.hours span { font: 400 12px/16px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.hours b { font: 600 14px/19.5px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.hours .glyph { --size: 22px; --tint: #4464d6; }
.hours .on span { color: #304dbb; font-weight: 600; }

/* NativeApprovalCard: glass panel, a lit warning tile, the question, what it covers, Don't allow / Allow. */
.appr { --r: 20px; padding: 16px 16px 14px; margin: 6px 0 4px; }
.appr .q { display: flex; align-items: center; gap: 12px; }
.appr .q .lt { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.appr .q .glyph { --size: 18px; }
.appr .q b { font: 600 15.5px/21px var(--sans); letter-spacing: -0.1px; color: var(--ink); }
.appr p { margin-top: 10px; font: 400 14px/20px var(--sans); color: #2c3e7c; }
.appr .det { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.appr .det .peek { margin-left: 0; }
.appr .det span { font: 400 13px/18px var(--sans); color: var(--ink-600); }
.appr .undo { margin-top: 10px; font: 400 13px/18px var(--sans); color: var(--muted); }
.appr .btns { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; transition: opacity 0.4s var(--ease); }
.cb { --r: 999px; min-height: 36px; padding: 7px 14px; display: grid; place-items: center; border-radius: 999px; font: 600 13px/18px var(--sans); color: var(--ink); transition: transform 0.14s var(--ease), filter 0.3s; }
.cb.lit { color: #fff; text-shadow: 0 0 10px rgb(255 255 255 / 0.55), 0 0 2px rgb(255 255 255 / 0.28); }
.cb.pressed { transform: scale(0.94); filter: brightness(1.08); }

/* AskUserCard: the question (title 17/23), choices on glass r18 (label 15 semibold, "Recommended" accent600 · detail meta zinc600),
   a hair of accent once chosen, the own-words row last; several choices gather until Send. */
.askq { padding: 10px 0 8px; }
.askq .aq { font: 600 17px/23px var(--sans); letter-spacing: -0.15px; color: var(--ink); }
.askq .am { margin-top: 2px; font: 400 12.5px/16px var(--sans); color: var(--muted); }
.askq .opts { margin-top: 12px; display: grid; gap: 8px; }
.ch { --r: 18px; position: relative; min-height: 54px; padding: 10px 14px 10px 16px; display: flex; align-items: center; gap: 12px; transition: transform 0.14s var(--ease); }
.ch.pressed { transform: scale(0.97); }
.ch img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: none; margin-left: -6px; }
.ch .cx { flex: 1; min-width: 0; }
.ch b { display: block; font: 600 15px/20px var(--sans); color: var(--ink); }
.ch span { display: block; margin-top: 1px; font: 400 12.5px/16.5px var(--sans); color: #3f4f7e; }
.ch em { font-style: normal; font-weight: 600; color: #304dbb; }
.ch .mark { width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c9d3ea; }
.ch .mark.solo { visibility: hidden; }
.ch.on .mark { visibility: visible; box-shadow: none; background: radial-gradient(60% 50% at 24% 6%, rgb(180 236 251 / 0.9), rgb(180 236 251 / 0) 72%), linear-gradient(165deg, #7fbaf3, #6f92ed); }
.ch.on .mark::after { content: ""; display: block; width: 100%; height: 100%; background: #fff; -webkit-mask: url(assets/glyphs/check.png) center / 13px no-repeat; mask: url(assets/glyphs/check.png) center / 13px no-repeat; }
.ch.on::after { content: ""; position: absolute; inset: 0; border-radius: 18px; box-shadow: inset 0 0 0 1.5px #5578e6; pointer-events: none; }
.askq .own { --r: 18px; margin-top: 8px; min-height: 50px; padding: 14px 16px; font: 400 15px/20px var(--sans); color: var(--dim); }
.askq .go { margin-top: 12px; min-height: 44px; font-size: 15px; }

/* The system alert iOS shows for photos_delete: the screen dims, a 270pt alert, Don't Allow · Delete. */
.sys { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; background: rgb(8 16 48 / 0.28); }
.sys .al { width: 270px; border-radius: 22px; overflow: hidden; text-align: center; background: rgb(242 244 250 / 0.86); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: 0 20px 50px -20px rgb(8 16 48 / 0.5); }
.sys b { display: block; padding: 19px 16px 0; font: 600 17px/22px var(--sans); color: #000; }
.sys p { padding: 4px 16px 0; font: 400 13px/17px var(--sans); color: #1c1c1e; }
.sys .ab { margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid rgb(60 60 67 / 0.3); }
.sys .ab span { padding: 11px 0 12px; font: 400 17px/22px var(--sans); color: #0a6cff; transition: background 0.15s; }
.sys .ab span + span { border-left: 0.5px solid rgb(60 60 67 / 0.3); }
.sys .ab .del { color: #ff3b30; font-weight: 600; }
.sys .ab .del.pressed { background: rgb(60 60 67 / 0.12); }

/* RemindersList: the ring, the title, the due line (overdue in red), new ones with a dot. */
.rmrow { display: flex; align-items: flex-start; gap: 11px; padding: 8px 0; }
.rmrow .rg { width: 20px; height: 20px; flex: none; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #a7b5d6; }
.rmrow .tx { flex: 1; min-width: 0; }
.rmrow .t { font: 500 14px/19.5px var(--sans); color: var(--ink); }
.rmrow .s { font: 400 12.5px/16px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }
.rmrow .s.late { color: #d6453d; font-weight: 500; }
.rmrow .fl { font: 600 12px/19.5px var(--sans); color: #d6453d; }

/* AlbumsGrid: each album as Photos shows it, the cover square at r10, its name and count under. */
.albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 8px; padding: 3px 0 2px; }
.albums img { width: 100%; aspect-ratio: 1; border-radius: 10px; object-fit: cover; display: block; }
.albums b { display: block; margin-top: 5px; font: 600 12.5px/16px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.albums span { display: block; font: 400 12px/15px var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; }

/* A cut-out on a soft checker: what's transparent reads as transparent. */
.stk { height: 214px; border-radius: 16px; display: grid; place-items: center;
  background: repeating-conic-gradient(rgb(255 255 255 / 0.95) 0 25%, rgb(226 233 247 / 0.95) 0 50%) 0 0 / 18px 18px; }
.stk img { max-height: 196px; max-width: 86%; filter: drop-shadow(0 6px 10px rgb(12 26 87 / 0.25)); }

/* ── The composer: chips, then the glass bar ── */

.dock { position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 16px 38px; z-index: 4; }
.dock::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask: linear-gradient(to top, #000 0 52%, rgb(0 0 0 / 0.7) 72%, transparent); mask: linear-gradient(to top, #000 0 52%, rgb(0 0 0 / 0.7) 72%, transparent); }
.chips { display: flex; margin-bottom: 11px; }
.chip { --r: 16px; height: 32px; padding: 0 11px; display: inline-flex; align-items: center; gap: 6px; font: 500 13px/18px var(--sans); color: var(--ink-600); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--sky), var(--mid), var(--deep)); }
.chip .glyph { --g: url(assets/glyphs/chevron_down.png); --size: 13px; --tint: #51669a; }
.comp { --r: 27px; }
.tray { display: flex; gap: 8px; padding: 12px 12px 0; }
.tray:empty { display: none; }
.tray img { width: 58px; height: 58px; border-radius: 14px; object-fit: cover; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.9), 0 3px 8px -3px rgb(var(--glass-shadow) / 0.3); }
.bar { display: flex; align-items: center; gap: 10px; padding: 7px; }
.bar.multi { flex-wrap: wrap; row-gap: 4px; }
.bar.multi .field { order: -1; flex: 0 0 calc(100% - 20px); margin: 0 10px; white-space: normal; overflow: visible; max-height: 146px; padding: 8px 0 4px; }
.bar.multi .add { margin-right: auto; }
.bar .add { --r: 999px; width: 40px; height: 40px; display: grid; place-items: center; flex: none; }
.bar .add .glyph { --size: 21px; }
.field { flex: 1; min-width: 0; font: 400 15.5px/24px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 8px 0; }
.field .hint { color: var(--dim); }
.field .caret { display: inline-block; width: 1.5px; height: 19px; margin-left: 1px; vertical-align: -4px; background: #5578e6; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.send { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.send .glyph { --size: 22px; }
/* With text in the field, the mic stays at hand beside Send: a 36pt glass disc (chat_composer.dart). */
.mic2 { --r: 999px; width: 0; height: 36px; margin-right: -10px; border-radius: 50%; display: grid; place-items: center; flex: none; overflow: hidden; opacity: 0; transform: scale(0.6);
  transition: width 0.2s var(--ease), margin 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.mic2 .glyph { --size: 18px; }
.bar.typing .mic2 { width: 36px; margin-right: 0; opacity: 1; transform: none; }
.send .sq { width: 14px; height: 14px; border-radius: 4px; background: #fff; box-shadow: 0 0 6px rgb(255 255 255 / 0.6); }
.homebar { position: absolute; left: 50%; bottom: 9px; width: 136px; height: 5px; margin-left: -68px; border-radius: 3px; background: var(--ink); z-index: 5; }

/* Small lit surfaces (litSmall): thinner rim, deeper blue. */
.stile.lit, .lt.lit, .cb.lit, .send.lit {
  background:
    radial-gradient(60% 50% at 24% 6%, rgb(180 236 251 / 0.9), rgb(180 236 251 / 0) 72%),
    radial-gradient(110% 80% at 56% 106%, rgb(95 125 234 / 1), rgb(95 125 234 / 0) 80%),
    linear-gradient(165deg, #7fbaf3, #6f92ed);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), inset 0 0 0 2.4px rgb(255 255 255 / 0.14), 0 0 9px rgb(255 255 255 / 0.7), 0 5px 10px -4px rgb(var(--lit-shadow) / 0.6);
}

/* ── Small screens: copy, then the phone; the photos stay on the phone. ── */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; justify-items: center; gap: 26px; padding-top: 96px; width: calc(100% - 40px); }
  .copy { text-align: center; justify-items: center; gap: 14px; }
  h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  .lede { font-size: 1.04rem; max-width: 32ch; }
  .pick { display: none; }
  .soon { justify-self: center; }
  .side { display: none; }
  .phone { --ph: min(calc(100svh - 60px), 700px); }
  footer { justify-content: center; text-align: center; }
  footer .tm { margin-left: 0; }
}
/* headline: three fixed lines on desktop, free flow on phones */
.copy { width: min(100%, 460px); }
.copy h1 .ln { display: block; white-space: nowrap; }
.copy h1 em { font-size: 1.12em; line-height: 0; letter-spacing: -0.005em; }
@media (max-width: 900px) { .copy { width: auto; } .copy h1 .ln { display: inline; white-space: normal; } }