:root {
  --bg:#F4F3EC;
  --panel:#fff;
  --ink:#18261F;
  --tx-2:#526157;
  --tx-3:#59665D;
  --line:#D4DBCF;
  --acc:#315C3B;
  --bubble-other:#E9EBE2;
  --bubble-agent:#E5EDDF;
  --amber-bg:#FEF3C7;
  --amber-tx:#92400E;
  --bad:#B3261E;
  --ok:#177245;
  --brand-field:#101714;
  --fs-meta:12px;
  --fs-micro:11px;
  font-family:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.55;
  overflow-wrap:anywhere;
}

.room {
  display:flex;
  flex-direction:column;
}

.room>main {
  flex:1;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

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

button,label:has(input[type=radio]) {
  cursor:pointer;
}

button,select,textarea {
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
}

button,select {
  min-height:44px;
  padding:8px 12px;
}

button:disabled {
  cursor:default;
  opacity:.55;
}

button:hover:not(:disabled) {
  filter:brightness(.92);
}

button:active:not(:disabled) {
  filter:brightness(.84);
}

:focus-visible {
  outline:2px solid var(--acc);
  outline-offset:2px;
}

textarea {
  width:100%;
  padding:11px 12px;
  resize:none;
  line-height:1.55;
}

button.primary {
  background:var(--acc);
  color:#fff;
  border-color:var(--acc);
  font-weight:600;
}

h1,h2,p {
  margin:0;
}

h1 {
  font-size:19px;
}

h2 {
  font-size:15px;
}

.room {
  width:100%;
  margin:auto;
  min-height:100dvh;

}

header {
  position:sticky;
  top:0;
  z-index:2;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:12px 20px;
}

.brand {
  font-size:15px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  min-width:0;
}

.utopia-field {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:var(--brand-field);
}

.utopia-field img {
  display:block;
}

.header-mark {
  width:30px;
  height:30px;
  border-radius:8px;
  margin-left:auto;
}

.pairing-mark {
  width:72px;
  height:72px;
  border-radius:16px;
  margin-bottom:14px;
}

dialog .pairing-brand {
  margin-top:0;
}

.connection {
  font-size:var(--fs-meta);
  font-weight:600;
  max-width:270px;
}

.viewer {
  display:flex;
  gap:6px;
  align-items:center;
  border:0;
  padding:4px 8px;
  font-size:12px;
  min-width:0;
  max-width:100%;
}

.viewer .avatar {
  width:26px;
  height:26px;
  font-size:12px;
}

.actors {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 20px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
}

.actor-chip {
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  font-size:13px;
  padding:4px 8px;
  border-radius:999px;
}

.actor-chip:disabled {
  opacity:1;
}

.avatar {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--actor);
  color:#fff;
  font-weight:600;
}

.avatar.agent {
  border-radius:28%;
}

.avatar img {
  width:21px;
  height:21px;
}

.actor-name {
  color:var(--actor);
  font-weight:600;
  font-size:13px;
}

.agent-badge {
  font-size:var(--fs-micro);
  line-height:1.5;
  font-weight:600;
  background:var(--actor);
  color:#fff;
  border-radius:4px;
  padding:1px 4px;
}

.ocean {
  --actor:#0B6E84;
}

.green {
  --actor:#177245;
}

.violet {
  --actor:#6D28D9;
}

.earth {
  --actor:#92400E;
}

.info {
  padding:10px 20px;
  background:var(--amber-bg);
  color:var(--amber-tx);
  font-size:12px;
  display:flex;
  align-items:center;
  gap:12px;
}

.info button {
  margin-left:auto;
  min-width:44px;
  background:transparent;
  border:0;
  font-size:20px;
  flex-shrink:0;
}

.notice {
  padding:12px 20px;
  color:var(--bad);
  font-size:13px;
}

.demo-note {
  padding:6px 20px;
  background:var(--bubble-agent);
  color:var(--tx-2);
  font-size:var(--fs-meta);
}

[hidden] {
  display:none!important;
}

main {
  padding:12px 20px 24px;
  min-height:240px;
}

.day,.new-divider {
  text-align:center;
  font-size:var(--fs-meta);
  color:var(--tx-3);
  margin:4px 0 16px;
}

.new-divider {
  color:var(--acc);
  border-bottom:1px solid var(--line);
  padding:8px;
}

.group {
  margin:0 0 16px;
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  gap:9px;
  align-items:flex-start;
}

.group.own {
  grid-template-columns:minmax(0,1fr);
  justify-items:end;
}

.group-content {
  width:fit-content;
  min-width:0;
  max-width:100%;
}

.group.own .group-content {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  max-width:100%;
}

.group-heading {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0 0 4px;
}

.group-heading time {
  margin-left:auto;
}

.group time,.receipt,.group-meta {
  font-size:var(--fs-meta);
  color:var(--tx-3);
}

.bubble {
  max-width:100%;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:var(--bubble-other);
  border-radius:4px 16px 16px 16px;
  padding:9px 12px;
  margin-top:2px;
}

.own .bubble {
  background:var(--acc);
  color:#fff;
  border-radius:16px 4px 16px 16px;
}

.agent-message .bubble {
  background:var(--bubble-agent);
  border-left:2px solid var(--actor);
}

.receipt {
  margin:3px 0 0;
  display:block;
  text-align:right;
}

.group-meta {
  display:flex;
  flex-wrap:wrap;
  overflow-wrap:anywhere;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.processing {
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:30px;
  color:var(--tx-3);
  font-size:11px;
  animation:processing-appear 160ms ease-in;
}

.processing-label {
  overflow-wrap:anywhere;
}

.processing-dots {
  display:inline-flex;
  gap:3px;
  margin-left:6px;
  vertical-align:middle;
}

.processing-dots>span {
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  animation:processing-wave 1.2s ease-in-out infinite;
}

.processing-dots>span:nth-child(2) { animation-delay:.15s; }
.processing-dots>span:nth-child(3) { animation-delay:.3s; }
@keyframes processing-wave { 0%,100% { opacity:.25; } 50% { opacity:1; } }
@keyframes processing-appear { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
  .processing,.processing-dots>span { animation:none; opacity:1; }
}

.more {
  border:0;
  background:transparent;
  min-width:44px;
  padding:0;
  font-size:20px;
  color:var(--tx-2);
}

.task {
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--actor);
  border-radius:12px;
  padding:14px;
  margin:0 0 16px;
  overflow-wrap:anywhere;
}

.task-heading {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}

.task-heading .status {
  margin-left:auto;
}

.task-heading .avatar {
  width:26px;
  height:26px;
}

.task p {
  white-space:pre-wrap;
}

.task .meta {
  font-size:var(--fs-meta);
  color:var(--tx-3);
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:8px;
}

.task .result {
  border-top:1px solid var(--line);
  margin-top:12px;
  padding-top:12px;
}

.status {
  font-size:var(--fs-meta);
  font-weight:600;
  border-radius:999px;
  padding:3px 8px;
}

.attention {
  color:var(--amber-tx);
  background:var(--amber-bg);
}

.success {
  color:var(--ok);
}

.danger {
  color:var(--bad);
}

.accent {
  color:var(--acc);
}

.muted {
  color:var(--tx-2);
}

.task-actions {
  display:flex;
  gap:8px;
  margin-top:12px;
}

.reject {
  color:var(--bad);
}

a {
  color:var(--acc);
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.empty {
  min-height:260px;
  max-width:400px;
  margin:auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:12px;
  color:var(--tx-2);
}

.empty img {
  width:68px;
  height:68px;
}

.empty-brand {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:13px;
}

.empty-mark {
  width:24px;
  height:24px;
  border-radius:6px;
}

.empty-mark img {
  width:18px;
  height:18px;
}

.empty h1 {
  font-size:17px;
  font-weight:650;
  color:var(--ink);
}

.composer {
  position:sticky;
  bottom:0;
  background:var(--panel);
  border-top:1px solid var(--line);
  padding:12px 20px max(12px,env(safe-area-inset-bottom));
  z-index:1;
}

.composer fieldset {
  margin:0;
  padding:0;
  border:0;
  min-width:0;
}

.composer legend {
  font-size:var(--fs-meta);
  color:var(--tx-3);
  margin-bottom:6px;
}

.types input { position:absolute; opacity:0; width:1px; height:1px; }
.types label:has(:focus-visible) { outline:2px solid var(--acc); outline-offset:2px; }

.types {
  display:flex;
  margin:10px 0!important;
  gap:2px;
}

.types label {
  position:relative;
  min-height:44px;
  display:flex;
  align-items:center;
  font-size:12px;
}

.types span {
  padding:8px 16px;
  border-radius:8px;
  background:var(--bg);
}

.types input:checked+span {
  background:var(--bubble-agent);
  color:var(--acc);
  font-weight:600;
}

.input-row {
  display:flex;
  align-items:flex-end;
  gap:8px;
}

.input-row textarea {
  max-height:142px;
  min-width:0;
}

.input-row button {
  flex-shrink:0;
}

.composer small {
  display:block;
  font-size:var(--fs-meta);
  color:var(--tx-3);
  margin-top:5px;
}

dialog {
  border:1px solid var(--line);
  border-radius:16px;
  max-width:540px;
  width:calc(100% - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
  padding:24px;
  color:var(--ink);
  background:var(--panel);
}

dialog::backdrop {
  background:#1c1f2466;
}

.dialog-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dialog-heading button {
  min-width:44px;
}

dialog p,dialog label,dialog select,dialog>button,dialog h2 {
  margin-top:14px;
}

dialog select {
  width:100%;
}

dialog label {
  display:block;
  font-size:13px;
}

dialog pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  max-width:100%;
  overflow:auto;
  font-size:var(--fs-meta);
}

.mono,pre {
  font-family:ui-monospace,"SF Mono",Consolas,monospace;
}

.fingerprint {
  overflow-wrap:anywhere;
  background:var(--bg);
  padding:10px;
}

dialog p {
  font-size:13px;
  color:var(--tx-2);
}

#login input {
  display:block;
  width:100%;
  min-width:0;
  min-height:44px;
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
  color:var(--ink);
}

#login button,#login details {
  margin-top:14px;
}

#login-submit {
  width:100%;
}

#login summary,#pairing summary {
  min-height:44px;
  padding:10px 0;
  cursor:pointer;
}

#login-error {
  color:var(--bad);
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

@media(prefers-reduced-motion:no-preference) {
  .connection.connecting {
    animation:connecting 1.2s ease-in-out infinite;
  }
  @keyframes connecting {
    50% {
      opacity:.6;
    }
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important;
  }
}

/* Utopia's mark lives on the continuous ink masthead. */
header { background:var(--brand-field); color:#E8EEE9; padding:22px clamp(16px,4vw,64px); gap:16px; }
.brand { flex-direction:column; align-items:flex-start; gap:0; order:1; white-space:nowrap; }
.brand-kicker { font-size:10px; letter-spacing:.18em; font-weight:500; color:#B8C7BA; white-space:normal; }
.brand-title { font:48px/1.05 Georgia,"Times New Roman",serif; letter-spacing:-2px; }
.brand-dot { color:#9BD184; }
.header-mark { order:0; width:48px; height:48px; margin:0; border-radius:0; }
.connection { order:2; font-size:12px; max-width:260px; }
header .success { color:#9BD184; }
header .danger { color:#FFB8AD; }
header .attention { color:#F6DCA3; background:transparent; }
.viewer { order:3; background:#23342B; color:#E8EEE9; border:1px solid #526157; padding:8px 12px; }
.viewer:disabled { opacity:1; }
header :focus-visible { outline-color:#9BD184; }
.people { padding:20px clamp(16px,4vw,64px); border-bottom:1px solid var(--line); background:#ECEEE5; }
.section-label { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:var(--fs-meta); text-transform:uppercase; letter-spacing:.1em; color:var(--tx-2); margin-bottom:12px; }
.section-label span { text-transform:none; letter-spacing:0; }
.actors { padding:0; background:transparent; border:0; gap:8px; }
.actor-chip { border-radius:8px; padding:7px 10px; background:transparent; gap:8px; flex-wrap:wrap; }
.actor-chip[aria-pressed="true"] { background:#D9EBCF; border-color:#315C3B; box-shadow:inset 0 -2px #315C3B; }
.actor-context { color:#315C3B; font-size:var(--fs-micro); }
.conversation-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:28px clamp(16px,4vw,64px) 14px; }
.conversation-heading h1 { font:30px/1.2 Georgia,"Times New Roman",serif; letter-spacing:-.6px; }
#backlog { font-size:12px; color:#315C3B; }
main { padding:16px max(24px,calc((100vw - 980px)/2)) 36px; }
.group { margin-bottom:24px; }
.group-content { max-width:min(100%,680px); }
.group.own .group-content { max-width:min(100%,680px); }
.bubble { padding:13px 16px; border-radius:2px 12px 12px 12px; }
.own .bubble { background:#233E2D; border-radius:12px 2px 12px 12px; color:#F4F3EC; }
.agent-message .bubble { border-left-color:#607D55; }
.task { border-radius:4px 12px 12px 4px; padding:20px; }
.day { display:flex; align-items:center; gap:16px; text-transform:uppercase; letter-spacing:.1em; }
.day::before,.day::after { content:""; height:1px; background:var(--line); flex:1; }
.composer { padding:16px max(24px,calc((100vw - 980px)/2)) max(16px,env(safe-area-inset-bottom)); background:#F4F3EC; }
.compose-target { font-size:12px; font-weight:600; color:#315C3B; }
.types { margin:8px 0!important; }
.types span { background:transparent; border-radius:4px; padding:6px 12px; }
.types input:checked+span { background:#DDE5D5; }
.input-row textarea { background:#FEFEFA; border-color:#A8B5A4; border-radius:8px; padding:14px; }
button.primary { background:#9BD184; border-color:#6D995B; color:#18261F; padding:12px 20px; }
.empty { min-height:330px; max-width:440px; gap:18px; align-items:flex-start; text-align:left; }
.empty-symbol { font:52px/1 Georgia,serif; color:#315C3B; }
.empty h1 { font:36px/1.15 Georgia,serif; font-weight:400; letter-spacing:-1px; }
.empty-brand { font-size:var(--fs-meta); letter-spacing:.04em; }
.demo-note { background:#E5E8DC; padding-inline:clamp(16px,4vw,64px); }
.info { padding-inline:clamp(16px,4vw,64px); font-size:13px; }
dialog { padding:28px; background:#F4F3EC; border-radius:12px; }
dialog h1 { font:30px/1.15 Georgia,serif; }
#pairing { background:linear-gradient(#101714 0 120px,#F4F3EC 120px); padding-top:24px; }
.pairing-mark { border-radius:0; margin-bottom:32px; }
#pairing>button.primary { width:100%; }
dialog::backdrop { background:#101714b3; }
@media(min-width:1100px) { .people { display:flex; align-items:center; gap:40px; } .section-label { flex-direction:column; margin:0; min-width:130px; } }
@media(max-width:540px) {
  header { padding:18px 16px; gap:12px; }
  /* Reserve the first row beside the 48px mark and 12px gap. */
  .brand { flex:1 0 calc(100% - 60px); }
  .brand-title { font-size:40px; }
  .brand-kicker { font-size:9px; }
  .connection { flex:1 1 120px; min-width:0; }
  .viewer { max-width:100%; flex:0 1 auto; }
  .people { padding:16px; }
  .actor-chip { padding:6px; gap:5px; }
  .actor-name { font-size:12px; }
  .actor-context { font-size:var(--fs-micro); }
  .conversation-heading { padding:22px 16px 10px; }
  main { padding:12px 16px 24px; }
  .composer { padding:12px 16px max(12px,env(safe-area-inset-bottom)); }
  .task { padding:14px; }
  .task-heading .status { margin-left:0; }
  .bubble { padding:11px 12px; }
  .empty { min-height:290px; }
  dialog { padding:20px; }
}


/* Chat extras: time, copy, quote reply. Existing ink/paper/green/lime tokens only. */
.group:not(.own) .group-meta { justify-content:flex-start; }
.receipt.seen,.task .meta .seen { color:var(--acc); }
.msg-action { border:0; background:transparent; min-width:44px; padding:0 6px; font-size:12px; color:var(--acc); }
.msg-action:disabled { color:var(--tx-3); }
.copy-note { color:var(--acc); font-weight:600; }
.quote { display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; max-width:100%; min-height:44px; margin-top:2px; padding:7px 12px; text-align:left; background:#ECEEE5; border:0; border-left:3px solid var(--acc); border-radius:2px 8px 8px 2px; font-size:12px; color:var(--tx-2); overflow-wrap:anywhere; }
.quote-author { font-weight:600; color:var(--acc); }
.quote-text { white-space:pre-wrap; }
.task>.quote { margin:0 0 10px; }
[data-bubble-id]:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.reply-chip { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:8px 0; padding:4px 4px 4px 12px; background:#ECEEE5; border:1px solid var(--line); border-left:3px solid var(--acc); border-radius:8px; font-size:12px; }
.reply-chip[hidden] { display:none; }
.reply-chip-body { display:flex; flex-direction:column; min-width:0; }
.reply-chip-name { font-weight:600; color:var(--acc); }
.reply-chip-text { color:var(--tx-2); overflow-wrap:anywhere; }
.reply-chip button { border:0; background:transparent; min-width:44px; padding:0; font-size:20px; color:var(--tx-2); }

/* Sticky masthead. The page is the scroll container: header and composer pin to its edges and
   scroll-padding keeps anchored or focused content clear of both. app.js publishes their heights
   and marks html[data-chrome=tall] when pinning would leave too little room for the thread
   (landscape phone, keyboard open, large text); the header then scrolls away as before. */
html { scroll-padding-top:var(--header-h,0px); scroll-padding-bottom:var(--composer-h,0px); }
html[data-chrome="tall"] header { position:relative; }
.notice { position:sticky; top:var(--header-h,0px); z-index:1; background:var(--bg); border-bottom:1px solid var(--line); padding-inline:clamp(16px,4vw,64px); }

/* Borderless buttons have no fill to darken, so hover and press tint them with an existing surface token. */
.more:hover:not(:disabled),.msg-action:hover:not(:disabled),.info button:hover:not(:disabled),.reply-chip button:hover:not(:disabled),
.more:active:not(:disabled),.msg-action:active:not(:disabled),.info button:active:not(:disabled),.reply-chip button:active:not(:disabled) { background:var(--bubble-other); }

/* Safe-area: keep content clear of the notch, rounded corners and home indicator. env() is 0 without cutouts. */
header { padding-top:max(22px,env(safe-area-inset-top)); }
header,.people,.conversation-heading,.demo-note,.info,.notice { padding-left:max(clamp(16px,4vw,64px),env(safe-area-inset-left)); padding-right:max(clamp(16px,4vw,64px),env(safe-area-inset-right)); }
main,.composer { padding-left:max(24px,calc((100vw - 980px)/2),env(safe-area-inset-left)); padding-right:max(24px,calc((100vw - 980px)/2),env(safe-area-inset-right)); }
@media(max-width:540px) {
  header { padding-top:max(18px,env(safe-area-inset-top)); }
  header,.people,.conversation-heading,main,.composer { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
}