/* ============================================================
   Knows iOS chat — design tokens, transcribed from knows-ios@develop
   (fc35344c, 2026-09-18). 1rem = 1 iOS point. Nothing invented.

   ChatTheme.defaultAI (dark) = ChatThemeGenerator.neutralDarkPalette
     background   Hct tone 6           -> #131313
     surface      Hct tone 12          -> #1F1F1F   (incoming bubble)
     inverse      luminance 0.99815    -> #FFFFFF   (outgoing bubble)
     onSurface    Hct tone 90          -> #E2E2E2
     inverseOn    Hct tone 10          -> #1B1B1B
     accent       monochromeAccent     -> #E1F800   (ChatHCTPalette)
   ============================================================ */
:root{
  --scr:      #131313;
  --bub-in:   #1F1F1F;
  --bub-out:  #FFFFFF;
  --ink-in:   #E2E2E2;
  --ink-out:  #1B1B1B;
  --ink:      #E2E2E2;                 /* screenForeground */
  --ink-2:    rgba(226,226,226,.64);   /* screenSecondaryForeground */
  --accent:   #E1F800;

  /* UIKit system colors (labels in the header use these); JS swaps them per appearance */
  --label:        #FFFFFF;
  --label-2:      rgba(235,235,245,.60);
  --placeholder:  rgba(235,235,245,.30);
  --material:     rgba(56,56,58,.82);      /* .thinMaterial */
  --material-reg: rgba(40,40,42,.92);      /* .regularMaterial */
  --dim:          rgba(19,19,19,.8);       /* progressive dim = room tint at .8 */

  /* Liquid Glass (iOS 26 .regular) — approximation, per appearance */
  --glass:      rgba(255,255,255,.085);
  --glass-rim:  rgba(255,255,255,.16);
  --glass-shadow: 0 .5rem 1.5rem rgba(0,0,0,.35);

  --font: "SF Pro Rounded", ui-rounded, -apple-system, "SF Pro", system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:1px}
html,body{background:transparent}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision;color:var(--ink)}

/* ---------- the screen (iPhone 15/16 Pro logical 393 x 852) ---------- */
.screen{
  position:relative;width:var(--w,393rem);height:var(--h,852rem);overflow:hidden;isolation:isolate;
  background:var(--scr);color:var(--ink);
  --top:59rem;      /* top safe area (Dynamic Island devices); 20 when the status bar is hidden for a card crop */
  --hdr:144rem;     /* header row: 144 AI Chat selected / 96 Real Chat selected */
  --blurext:0rem;   /* blurExtension: 24 on the Real Chat page */
  --txb:100rem;     /* transcript bottom = composer stack + 28 gap */
}
.screen.rounded{border-radius:var(--corner,34rem)}   /* canvas rule (Paul, 2026-09-19): screens less rounded than the device's 55 */

/* ---------- status bar (top safe area 59) ---------- */
.status{position:absolute;left:0;right:0;top:0;height:59rem}
.status .time{
  position:absolute;left:0;width:133rem;text-align:center;top:15rem;
  font-family:-apple-system,"SF Pro Text","SF Pro",system-ui,sans-serif;   /* the system status bar is not rounded */
  font-size:17rem;font-weight:600;color:var(--label);letter-spacing:-.2rem;
  font-variant-numeric:tabular-nums;
}
.status .island{position:absolute;left:50%;top:11rem;width:126rem;height:37rem;margin-left:-63rem;border-radius:20rem;background:#000}
.status .right{position:absolute;right:0;width:133rem;top:16rem;display:flex;justify-content:center;align-items:center;gap:7rem;color:var(--label)}

/* ---------- native navigation bar band (59..103) ---------- */
.nav{position:absolute;left:0;right:0;top:var(--top);height:44rem}
.glass{
  background:var(--glass);
  box-shadow:inset 0 0 0 .5rem var(--glass-rim), var(--glass-shadow);
  backdrop-filter:blur(20rem) saturate(1.4);-webkit-backdrop-filter:blur(20rem) saturate(1.4);
}
.nav .back{position:absolute;left:16rem;top:0;width:44rem;height:44rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--label)}
.nav .gem{
  position:absolute;right:16rem;top:0;height:44rem;border-radius:22rem;
  display:flex;align-items:center;gap:3rem;padding:0 14rem 0 10rem;
}
.nav .gem img,.nav .gem svg{width:25rem;height:25rem;display:block}
.nav .gem span{font-size:12rem;font-weight:600;letter-spacing:.2rem;color:var(--ink);line-height:1}

/* ---------- RelationshipChatModeSegmentedControl ---------- */
/* row anchored at top safe area; expanded height 144 (Ask AI selected) */
.modehdr{position:absolute;left:0;right:0;top:var(--top);height:var(--hdr)}
.modebar{
  position:absolute;left:50%;top:-3rem;margin-left:-74rem;   /* 148 wide, offset y -3 */
  width:148rem;height:96rem;padding:4rem;display:flex;gap:12rem;
}
.cell{width:64rem;height:88rem;display:flex;align-items:center;justify-content:center;transform-origin:50% 50%}
.cell.off{transform:scale(.7)}
.ident{display:flex;flex-direction:column;align-items:center;gap:4rem;width:64rem}
.ident .mark{width:52rem;height:52rem;display:flex;align-items:center;justify-content:center;position:relative}
.ident .lab{display:flex;flex-direction:column;align-items:center;gap:1rem;max-width:64rem}
.ident .p{font-size:14rem;font-weight:600;line-height:17rem;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:64rem}
.cell.off .ident .p{color:var(--label-2)}
.ident .s{font-size:12rem;font-weight:600;letter-spacing:.2rem;line-height:14rem;color:var(--label-2);white-space:nowrap}
/* contact avatar 48 + platform badge 14 (thinMaterial) offset +2,+2 */
.cav{width:48rem;height:48rem;border-radius:50%;overflow:hidden;position:relative}
.cav img,.cav .fb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cav .fb{display:flex;align-items:center;justify-content:center;font-size:19.2rem;font-weight:600;color:rgba(255,255,255,.95)}
.badge{
  position:absolute;right:-2rem;bottom:-2rem;width:14rem;height:14rem;border-radius:50%;
  background:var(--material);backdrop-filter:blur(6rem);-webkit-backdrop-filter:blur(6rem);
  display:flex;align-items:center;justify-content:center;
}
.badge img{width:10rem;height:10rem;display:block}
/* actions row: overlay top of the bar, offset y = 88 + 8 + 6 = 102 */
.actions{position:absolute;left:0;right:0;top:102rem;height:36rem;display:flex;justify-content:center;gap:6rem}
.abtn{width:36rem;height:36rem;border-radius:50%;display:flex;align-items:center;justify-content:center}
/* BackgroundTasksCapsule: 36 tall, h-pad 16, max 160, subheadline 14 semibold;
   GoalThinkingEventLabel = secondary base + a primary shimmer band (34% wide) */
.acap{height:36rem;max-width:160rem;border-radius:18rem;padding:0 16rem;display:flex;align-items:center;overflow:hidden}
.acap .em{font-size:14rem;line-height:17rem;white-space:pre;color:var(--label);-webkit-text-fill-color:initial;background:none}
.acap span{
  font-size:14rem;font-weight:600;line-height:17rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:var(--label-2);
  background:linear-gradient(90deg,var(--label-2) 0%,var(--label-2) 30%,var(--label) 47%,var(--label-2) 64%,var(--label-2) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.swatch{width:18rem;height:18rem;border-radius:50%;background:linear-gradient(135deg,var(--swatch-a,var(--accent)),var(--bub-in))}

/* progressive blur / dim under the top chrome (ChatProgressiveBlur .top):
   height = safeTop 59 + max(44, header 144) + tail 5 = 208; outer half fully
   blurred + dimmed (alpha .8 of the room tint), inner half ramps to zero. */
.topblur,.topdim{position:absolute;left:0;right:0;top:0;height:calc(var(--top) + var(--hdr) + 5rem + var(--blurext));pointer-events:none;z-index:5}
.topblur{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,0) 100%);
  backdrop-filter:blur(2.5rem);-webkit-backdrop-filter:blur(2.5rem);
}
.topdim{background:linear-gradient(180deg,var(--dim) 0%,var(--dim) 50%,transparent 100%)}
.chrome{position:absolute;left:0;right:0;top:0;z-index:6}

/* ---------- transcript (ChatBubbleKit / ChatStandardRowMetrics) ---------- */
.tx{
  position:absolute;left:0;right:0;top:0;bottom:var(--txb);
  padding:calc(var(--top) + var(--hdr) + var(--txtop,25rem)) 16rem 0;overflow:hidden;   /* chrome reservation + transcript padding; earlier rows scroll under the blur */
  display:flex;flex-direction:column;justify-content:var(--txalign,flex-end);
}
.run{display:flex;flex-direction:column;gap:4rem}          /* continuationSpacing */
.run+.run{margin-top:16rem}                                 /* runSpacing */
.run.in{align-items:flex-start}
/* Real Chat incoming rows carry the contact avatar (.assistantMessage gutter 25 + 5) */
.run.av{position:relative;padding-left:30rem}
.run .rav{position:absolute;left:0;bottom:0;width:25rem;height:25rem;border-radius:50%;overflow:hidden}
.run .rav img{width:100%;height:100%;object-fit:cover;display:block}
/* ChatReplyQuote inside a bubble: 3pt bar, tint .14 fill, r9 (insetCornerRadius), author 14 semibold, snippet 13 */
.quote{position:relative;border-radius:9rem;padding:6rem 8rem 6rem 19rem;margin:0 0 6rem 0;overflow:hidden;background:var(--qbg)}
.quote::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3rem;background:var(--qtint)}
.quote .qa{font-size:14rem;font-weight:600;line-height:17rem;color:var(--qtint);white-space:nowrap}
.quote .qs{font-size:13rem;line-height:16rem;color:var(--qsnip);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.run.in  .bub{--qtint:var(--ink-in);--qbg:color-mix(in srgb,var(--ink-in) 14%,transparent);--qsnip:var(--ink-in-2,var(--ink-in))}
.run.out .bub{--qtint:var(--ink-out);--qbg:color-mix(in srgb,var(--ink-out) 14%,transparent);--qsnip:var(--ink-out)}
/* ChatScheduledSendWidgetContent inside a user ChatWidgetBubble: messages, then linear progress + Cancel */
.bub.widget{width:calc(var(--w,393rem) * 0.72)}
.bub.widget .wm{display:block}
.bub.widget .wm+.wm{margin-top:6rem}
.bub.widget .wrow{display:flex;align-items:center;gap:10rem;margin-top:8rem}
.bub.widget .prog{flex:1;height:4rem;border-radius:2rem;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden}
.bub.widget .prog i{display:block;height:100%;border-radius:2rem;background:currentColor}
.bub.widget .cancel{font-size:14rem;font-weight:600;line-height:17rem}
.receipt.sending{opacity:.3}
/* Agent widget, in the app's own widget language (widget-design-references/passes/*_in_thread.jpg):
   overline in tracked caps (chatContextOverline 10/600/.2), message text, a slightly lighter dark panel with
   monogram rows, a serif-italic editorial line (the verdict/ticket voice), and a white full-width capsule CTA
   in tracked caps with an arrow. Bubble fill = incoming (#1F1F1F), r18. */
.aw{border-radius:18rem;background:#1F1F1F;color:#E2E2E2;padding:16rem;font-family:var(--font);position:relative;
    box-shadow:inset 0 0 0 .5rem rgba(255,255,255,.08)}
.aw .cols{display:grid;grid-template-columns:1.05fr 1fr;gap:18rem;align-items:stretch}
.aw .ov{font-size:10rem;font-weight:600;letter-spacing:.6rem;text-transform:uppercase;color:rgba(226,226,226,.55);line-height:12rem;white-space:nowrap}
.aw .ovrow{display:flex;align-items:center;justify-content:space-between;gap:10rem}
.aw .live{display:flex;align-items:center;gap:5rem}
.aw .live i{width:6rem;height:6rem;border-radius:50%;background:#34C759;display:block}
.aw .say{font-family:"New York","Times New Roman",Georgia,serif;font-style:italic;font-size:21rem;line-height:26rem;color:#F2F2F2;margin-top:9rem;letter-spacing:-.1rem}
.aw .msg{font-size:15rem;line-height:20rem;color:#E2E2E2;margin-top:8rem}
.aw .sub{margin-top:auto;padding-top:12rem}
.aw .panel{background:#2A2A2A;border-radius:12rem;padding:6rem;display:flex;flex-direction:column;gap:2rem}
.aw .row{display:flex;align-items:center;gap:10rem;height:36rem;padding:0 8rem;border-radius:8rem}
.aw .row .mono{width:24rem;height:24rem;border-radius:50%;background:#3A3A3A;color:#E2E2E2;font-size:9rem;font-weight:700;letter-spacing:.2rem;display:flex;align-items:center;justify-content:center;flex:none}
.aw .row .al{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem}
.aw .row .al b{font-size:13rem;font-weight:600;line-height:16rem;color:#F2F2F2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aw .row .al span{font-size:11rem;line-height:13rem;color:rgba(226,226,226,.55);font-variant-numeric:tabular-nums;white-space:nowrap}
.aw .row .pr{font-size:13rem;font-weight:600;color:#F2F2F2;font-variant-numeric:tabular-nums}
.aw .cta{margin-top:10rem;height:36rem;border-radius:18rem;background:#FFFFFF;color:#111;display:flex;align-items:center;justify-content:center;gap:8rem;font-size:11rem;font-weight:600;letter-spacing:.9rem;text-transform:uppercase}
.aw .cta .spin{width:12rem;height:12rem}
.aw-slot{width:100%}
.spin{width:14rem;height:14rem;display:block}
/* DiscoverWidgetPost (Knows/Widgets/Discover/DiscoverWidgetContent.swift): square cover with the fluid artwork over the
   incoming fill, 24pt bold rounded title bottom-leading (padding 24), hairline, footer "Discover" (15) + DiscoverActionChip
   (36pt .ultraThinMaterial capsule, arrow.right at .body 16 medium), corner radius 22 (DiscoverWidgetMetrics) */
.dpost{border-radius:22rem;overflow:hidden;background:var(--bub-in);color:var(--label);font-family:var(--font)}
.dpost .cover{position:relative;overflow:hidden}
.dpost .cover canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dpost .ttl{position:absolute;left:24rem;right:24rem;bottom:24rem;font-size:24rem;font-weight:700;line-height:26rem;letter-spacing:-.2rem;color:var(--label);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dpost .cover canvas[data-photo]~.ttl{color:#fff}   /* over a photo the title is always white */
.dpost .scrim{display:none}   /* the gradient is painted inside the mask by DiscoverFluid.renderPhoto */
.dpost .foot.one{padding:4rem}
.dpost .btn{flex:1;height:36rem;border-radius:18rem;background:var(--btn-bg,var(--label));display:flex;align-items:center;justify-content:center;font-size:16rem;font-weight:500;color:var(--btn-fg,var(--on-label))}   /* the Genie's theme colour, like the mark */
.dpost .opening{position:absolute;right:16rem;top:16rem;width:20rem;height:20rem;color:var(--label-2)}
.dpost .opening svg{width:20rem;height:20rem;display:block}
.dpost .hair{height:.5rem;background:color-mix(in srgb,var(--label) 1.2%,transparent)}
.dpost .foot{display:flex;align-items:center;justify-content:space-between;height:44rem;padding:4rem 4rem 4rem 14rem}
.dpost .foot span{font-size:15rem;line-height:19rem;color:var(--label)}
.dpost .chip{width:36rem;height:36rem;border-radius:18rem;background:var(--glass);display:flex;align-items:center;justify-content:center;color:var(--label)}
.dpost .chip svg{width:16rem;height:16rem}
.dpost-slot{display:block}
/* ChatAssistantTypingBubble: incoming shell with .typing insets (14+1 / 16+1), ChatAnimatedDotsView 3 x 10pt, spacing 4,
   colour = theme.typingDots (the incoming foreground) pulsing between .28 and .85 */
.bub.typing{padding:15rem 17rem;display:inline-flex;gap:4rem;align-items:center}
.bub.typing i{width:10rem;height:10rem;border-radius:50%;background:var(--ink-in);display:block}
.typing-slot{display:block}
/* GenieReplyCallout: material callout hanging from the Knows tab while you are in the Real Chat */
.callout{position:absolute;z-index:8;filter:drop-shadow(0 6rem 14rem rgba(0,0,0,.16))}
.callout .cbody{position:relative;display:flex;align-items:center;gap:12rem;padding:25rem 18rem 15rem;background:var(--material-reg,rgba(255,255,255,.9));backdrop-filter:blur(20rem);-webkit-backdrop-filter:blur(20rem)}
.callout .ct{flex:1;font-size:14rem;font-weight:600;line-height:20rem;color:var(--label);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.callout .cc{width:8rem;height:13rem;color:var(--label-2);flex:none}
.callout svg.cstroke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.run.out{align-items:flex-end}
.bub{
  max-width:calc(var(--w,393rem) * 0.72);                    /* viewportFraction .72 */
  border-radius:18rem;padding:9rem 15rem;                    /* insets 10+1 / 14+1, line-height compensated */
  font-size:15rem;line-height:22rem;font-weight:400;         /* chatBubblePrimary + lineSpacing 4 */
  white-space:pre-wrap;overflow-wrap:break-word;
}
.run.in  .bub{background:var(--bub-in);color:var(--ink-in)}
.run.out .bub{background:var(--bub-out);color:var(--ink-out)}
.run.in  .bub:last-of-type{border-bottom-left-radius:2rem}   /* radiusTail */
.run.out .bub:last-of-type{border-bottom-right-radius:2rem}
.receipt{font-size:12rem;font-weight:600;letter-spacing:.2rem;line-height:14rem;color:var(--ink);opacity:.4;margin-top:0}
.run.out .receipt{align-self:flex-end}
.sep{font-size:10rem;font-weight:600;letter-spacing:.4rem;text-transform:uppercase;color:var(--label-2);text-align:center;padding:20rem 0;line-height:12rem}

/* ---------- composer (ChatInputChrome, unfocused: h-inset 28, bottom 28) ---------- */
.composer{position:absolute;left:28rem;right:28rem;bottom:28rem;height:44rem;display:flex;align-items:center;gap:5rem}
.ctl{width:44rem;height:44rem;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:var(--label)}
.ctl svg{width:22rem;height:22rem;display:block}
.field{flex:1;height:44rem;border-radius:22rem;display:flex;align-items:center;padding-left:14rem;font-size:15rem;color:var(--placeholder);white-space:nowrap;overflow:hidden}
.field.on,.field .on{color:var(--label)}
.field.typed{padding-right:6rem;justify-content:space-between}
.sendpill{width:48rem;height:32rem;border-radius:16rem;background:var(--accent);color:var(--on-accent,#fff);display:flex;align-items:center;justify-content:center;flex:none}

.composer.bar{position:relative;left:auto;right:auto;bottom:auto}
/* Real Chat composer: NativeInboxMessageComposer = editor row + actions row in one r22 glass, then the context footer */
.composer.direct{height:auto;bottom:var(--dbottom,39rem);flex-direction:column;align-items:stretch;gap:5rem}
.dfield{border-radius:22rem;padding:0 6rem;display:flex;flex-direction:column}
.drow{height:44rem;display:flex;align-items:center;padding-left:8rem;font-size:15rem;color:var(--placeholder)}
.drow.acts{gap:12rem;padding-left:8rem}
.drow .igm{width:17rem;height:17rem;color:var(--label-2);display:block;flex:none}
.drow .sp{flex:1}
.aipill{height:32rem;border-radius:16rem;padding:0 14rem;background:#2A2A2A;color:#fff;   /* Paul 2026-09-19: light black, not systemPurple */font-size:14rem;font-weight:700;display:flex;align-items:center;white-space:nowrap}
.dfoot{font-size:12rem;font-weight:500;letter-spacing:.2rem;line-height:14rem;color:var(--label-2);text-align:center;padding:0 20rem}

/* ---------- home indicator ---------- */
.home{position:absolute;left:50%;bottom:8rem;width:134rem;height:5rem;margin-left:-67rem;border-radius:3rem;background:var(--label)}