/* Cozy AI Chat — ported from "Cozy AI Chat.dc.html" (Claude Design)
   Palette: warm paper / clay / hojicha

   Responsive web app: full-bleed on phones, a centred column on desktop.
   No device frame — the screen IS the page. */

:root {
  --paper:        #EDE3D6;
  --screen-top:   #FBF4E9;
  --screen-mid:   #F5EBDD;
  --screen-bot:   #F1E4D2;
  --bar:          rgba(var(--bar-rgb), .88);
  --hair:         rgba(var(--sand-rgb), .16);
  --hair-strong:  rgba(var(--sand-rgb), .3);
  --card:         #FFFCF6;
  --card-hair:    rgba(var(--sand-rgb), .22);
  --ink:          #42301F;
  --ink-strong:   #4A3526;
  --ink-soft:     #7A5B41;
  --ink-mute:     #9A7A5F;
  --ink-faint:    #B09274;
  --clay:         #C0714E;
  --clay-deep:    #B4643F;
  --matcha:       #8B9E74;
  --sand:         #A8846A;

  --app-max:      560px;
  --safe-top:     env(safe-area-inset-top, 0px);
  --safe-bottom:  env(safe-area-inset-bottom, 0px);

  /* The surfaces every panel, chip and hover state is built from. Kept as RGB
     triples so the time-of-day themes below can restate them once and have
     every alpha use follow. */
  --card-rgb:   255,252,246;
  --tint-rgb:   232,214,190;
  --bar-rgb:    250,243,234;
  --sand-rgb:   168,132,106;
  --hover:      #F3E7D6;
  --press:      #F0E0CB;
  /* The light in the room when you are actually with someone (see the
     face-to-face block at the bottom): three colours of out-of-focus light,
     and one dial for how much of it survives at this hour. */
  --en-ink:     #5D6B4C;
  --en-bg:      rgba(139,158,116,.13);
  /* The phrase desk: a second card tone for insets, a matcha wash for the
     teaching note, the ink that survives on a clay button, and the scrim the
     sheet comes up over. */
  --card2:      #F7EFE3;
  --sky-a: #DCEAF2;  --sky-b: #F7EFE3;  --wash: rgba(192,113,78,.09);
  /* The shelf gives each kind of thing its own colour, so a glance at the
     badges tells you what sort of shelf you are looking at. */
  --k-film:  #C0714E;  --k-place: #8B9E74;  --k-food:  #A8846A;
  --k-doc:   #6E7896;  --k-event: #96708A;  --k-thing: #7A5B41;
  --note:       rgba(139,158,116,.12);
  --onclay:     #FFF9F2;
  --scrim:      rgba(66,48,31,.42);
  --lamp-rgb:   236,172,110;
  --bloom-rgb:  246,214,180;
  --cast-rgb:   150,168,126;
  --glow-str:   .8;
  --ink-hot:    #6B4326;
}

/* ── The hours of the day ──────────────────────────────────────────────────

   The world has a clock, so the app should look like it knows what time it
   is. Four palettes, set from the world hour on the root element — it has to
   be the root and not .app, because the strip iOS paints behind the status
   bar is the BODY background, which sits outside .app entirely:
   dawn and dusk take the sun's colour, day is the plain warm paper the app
   was designed in, and night puts the lamps on. Every surface in the app
   derives from these tokens, so a theme is a list of colours and nothing
   else changes. */

[data-daypart="dawn"] {
  --screen-top: #FDF0E4; --screen-mid: #FBE4D6; --screen-bot: #F6D6C6;
  --paper:      #EFD9C9;
  --card:       #FFFAF3;  --card-rgb: 255,250,243;
  --tint-rgb:   240,214,196;
  --bar-rgb:    253,240,229;
  --hover:      #F8E2D2;  --press: #F4D6C1;
  --ink:        #4A3226;  --ink-strong: #513628;
  --ink-soft:   #855941;
  --card2:      #F8EBDD;
  --sky-a: #F6D3B4;  --sky-b: #FBEBDA;  --wash: rgba(194,115,75,.10);
  --k-film: #C2694A; --k-place: #8A9A72; --k-food: #AF8570;
  --k-doc: #75799A; --k-event: #9C6E8E; --k-thing: #7E5B4E;
  --scrim:      rgba(74,50,38,.4);
  --lamp-rgb:   246,164,118;
  --bloom-rgb:  252,220,196;
  --cast-rgb:   196,168,152;
  --glow-str:   .85;
  --ink-mute:   #A57A5E;  --ink-faint: #BE9378;
}

[data-daypart="dusk"] {
  --screen-top: #FBE7CD; --screen-mid: #F5D8B7; --screen-bot: #EDC79E;
  --paper:      #E4BC93;
  --card:       #FFF8EC;  --card-rgb: 255,248,236;
  --tint-rgb:   234,204,168;
  --bar-rgb:    251,235,213;
  --hover:      #F6DFC0;  --press: #F0D0A8;
  --ink:        #46311D;  --ink-strong: #4E3620;
  --ink-soft:   #7C5734;  --ink-mute: #9C7749;
  --card2:      #F7E7CF;
  --sky-a: #E8A279;  --sky-b: #F2D5BF;  --wash: rgba(184,95,59,.10);
  --k-film: #C56A4E; --k-place: #85957A; --k-food: #A6816F;
  --k-doc: #6F7492; --k-event: #94687F; --k-thing: #74534F;
  --scrim:      rgba(70,49,29,.44);
  --lamp-rgb:   238,146,74;
  --bloom-rgb:  250,208,158;
  --cast-rgb:   196,156,104;
  --glow-str:   .9;
  --ink-faint:  #B79263;
}

/* Lamps on. The inks invert, and because the whole app speaks in tokens the
   panels, chips and hovers come with them. */
[data-daypart="night"] {
  --screen-top: #2C2233; --screen-mid: #251C2C; --screen-bot: #1F1725;
  --paper:      #181220;
  --card:       #302539;  --card-rgb: 48,37,57;
  --card-hair:  rgba(226,205,232,.16);
  --tint-rgb:   62,49,72;
  --bar-rgb:    38,29,45;
  --bar:        rgba(38,29,45,.9);
  --sand-rgb:   150,128,160;
  --hair:       rgba(226,205,232,.13);
  --hair-strong: rgba(226,205,232,.26);
  --hover:      #3B2F46;  --press: #473854;
  --ink:        #EFE5F2;  --ink-strong: #FAF3FB;
  --ink-soft:   #D2C3D8;  --ink-mute: #AB9AB4;
  --ink-faint:  #8A7A93;
  --ink-hot:    #F6ECF8;
  --sand:       #A192AA;
  --clay:       #D08863;  --clay-deep: #C77950;
  --en-ink:     #C6D5B1;
  --en-bg:      rgba(159,177,135,.12);
  --card2:      #251C2E;
  --sky-a: #2C2038;  --sky-b: #251C2E;  --wash: rgba(208,136,99,.12);
  --k-film: #D08863; --k-place: #9DB388; --k-food: #BE9A80;
  --k-doc: #8E9AC0; --k-event: #BE94B2; --k-thing: #C0AECA;
  --note:       rgba(159,177,135,.13);
  --onclay:     #241826;
  --scrim:      rgba(10,6,16,.6);
  --lamp-rgb:   235,166,96;
  --bloom-rgb:  255,240,220;
  --cast-rgb:   158,142,196;
  --glow-str:   1;
  --matcha:     #9FB187;
}

* { box-sizing: border-box; }

/* Our display:flex rules outrank the UA [hidden] rule — restore it. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  /* The app is a fixed screen, not a document. Without this a drag that
     misses a sheet pulls the whole page around instead. */
  overscroll-behavior: none;
  overflow: hidden;
  /* Never let the browser decide this page's text wants to be bigger — the
     whole layout is sized from it. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* No blue smears from a stray drag, and no iOS callout on a long press —
     which was also cancelling the pointer that press-and-hold undo rides on. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Except what you are actually typing. */
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
  /* Below 16px, iOS zooms the page in when the field takes focus, and the
     zoom pans the viewport — which drags the whole app off the top of the
     screen. Every field here sets 16px of its own; this is the floor, so a
     new one cannot quietly bring the bug back. */
  font-size: 16px;
}

/* Every tap used to wait about three hundred milliseconds while iOS decided
   whether a second one was coming — which is what made every button in the
   app feel a beat slow. "manipulation" keeps panning and pinch-zoom and
   gives up only double-tap-to-zoom, which a messenger has no use for. */
* { touch-action: manipulation; }

body {
  background: var(--paper);
  font-family: 'Zen Maru Gothic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* dvh tracks the mobile URL bar; vh is the fallback. --app-h is measured
     from visualViewport in app.js and is the only one that also tracks the
     on-screen keyboard, so it wins when it is set. */
  height: 100vh;
  height: 100dvh;
  height: var(--app-h, 100dvh);
  /* Follows the visual viewport when iOS pans it for the keyboard, so the
     app stays the same rectangle as the part of the screen you can see. */
  margin-top: var(--vv-top, 0px);
  display: flex;
  justify-content: center;
  overflow: hidden;
  overscroll-behavior: none;
}

a { color: var(--clay-deep); }
a:hover { color: #8E4A2C; }

ruby { ruby-align: center; }
rt {
  font-size: .5em;
  font-weight: 400;
  color: var(--sand);
  letter-spacing: .02em;
}

::-webkit-scrollbar { width: 0; height: 0; }

@keyframes cz-bounce { 0%,60%,100% { transform: translateY(0); opacity: .45 } 30% { transform: translateY(-5px); opacity: 1 } }
@keyframes cz-breathe { 0%,100% { transform: scale(.72); opacity: .35 } 50% { transform: scale(1); opacity: .9 } }
@keyframes cz-bar { 0%,100% { transform: scaleY(.3) } 50% { transform: scaleY(1) } }
@keyframes cz-rise { from { transform: translateY(9px) scale(.985); opacity: .4 } to { transform: translateY(0) scale(1); opacity: 1 } }
@keyframes cz-halo { 0%,100% { box-shadow: 0 0 0 0 rgba(192,113,78,.28) } 50% { box-shadow: 0 0 0 7px rgba(192,113,78,0) } }

/* ── App shell ────────────────────────────────────────────────────────── */

.app {
  /* Hidden until the door has decided whose town this is — otherwise an
     empty frame paints for a moment before the login appears. */
  visibility: hidden;
  width: 100%;
  max-width: var(--app-max);
  /* Without this the nowrap chips row sets a min-content width and pushes
     the whole column wider than a phone screen. */
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  background: var(--screen-mid);
  background-image: radial-gradient(120% 60% at 50% 0%, var(--screen-top) 0%, var(--screen-mid) 55%, var(--screen-bot) 100%);
}

/* On anything wider than the column, lift it off the page a little so the
   warm paper reads as a margin rather than dead space. */
@media (min-width: 600px) {
  body { padding: 0; }
  .app {
    border-left: 1px solid var(--hair);
    border-right: 1px solid var(--hair);
    box-shadow: 0 0 60px rgba(150, 110, 80, .10);
  }
}

/* ── Header ───────────────────────────────────────────────────────────── */

.chat-header {
  flex: none;
  padding: calc(14px + var(--safe-top)) 18px 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bar);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}

.avatar {
  border-radius: 50%;
  /* --av-a/--av-b are set per person in app.js; the sand pair is the
     fallback for anything drawn before an id is known. */
  background: linear-gradient(160deg, var(--av-a, #E6C9A8), var(--av-b, #C89B76));
  display: flex;
  align-items: center;
  justify-content: center;
  /* Dark ink on light tints, at both ends of the day: the circles keep their
     own colour whatever the hour, so this must not follow the theme. */
  color: #3E2C1F;
  text-shadow: 0 1px 0 rgba(255,255,255,.22);
  font-weight: 800;
  letter-spacing: .01em;
  flex: none;
}
.avatar-lg {
  width: 40px; height: 40px;
  font-size: 19px;
  box-shadow: inset 0 -2px 4px rgba(107,67,38,.18);
}
.avatar-sm {
  width: 26px; height: 26px;
  font-size: 13.5px;
  margin-bottom: 2px;
}

.who {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.who-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: .01em;
}
.who-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-mute);
  font-family: 'Newsreader', serif;
  letter-spacing: .02em;
}
.who-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--matcha);
  flex: none;
  transition: background .3s;
}
.who-status.offline .dot { background: #C4A587; }

.lamp {
  width: 34px; height: 34px;
  flex: none;                 /* never squeezed into an oval */
  border-radius: 50%;
  border: 1px solid var(--hair-strong);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sand);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s;
}
.lamp:hover { background: var(--hover); color: var(--ink-hot); }

/* ── Message scroller ─────────────────────────────────────────────────── */

.scroller {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 20px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: none;
}

.day-divider {
  text-align: center;
  font-family: 'Newsreader', serif;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.row { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.row.fresh > * { animation: cz-rise .3s ease both; }

/* Outgoing */

.row-me { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.bubble-me {
  max-width: 78%;
  padding: 11px 15px 12px;
  border-radius: 20px 20px 6px 20px;
  background: linear-gradient(165deg, #C87A54, var(--clay-deep));
  color: #FFF7EE;
  font-size: 15.5px;
  line-height: 1.65;
  box-shadow: 0 3px 10px rgba(140,80,50,.18);
  white-space: pre-wrap;
  word-break: break-word;
}
.receipt {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--ink-faint);
  font-family: 'Newsreader', serif;
  letter-spacing: .04em;
  padding-right: 4px;
}

/* Incoming */

.row-ai { display: flex; gap: 9px; align-items: flex-end; }
.ai-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 82%;
}
.bubble-ai {
  padding: 12px 16px 13px;
  border-radius: 20px 20px 20px 6px;
  background: var(--card);
  border: 1px solid var(--card-hair);
  box-shadow: 0 3px 12px rgba(150,110,80,.09);
  font-size: 15.5px;
  line-height: 1.9;
  color: var(--ink);
  word-break: break-word;
}
.bubble-ai.with-kana { line-height: 2.4; }

.panel-kana {
  padding: 8px 13px;
  border-radius: 13px;
  background: rgba(var(--tint-rgb),.5);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-soft);
  animation: cz-rise .26s ease both;
}
.panel-kana .label {
  font-family: 'Newsreader', serif;
  font-size: 9.5px;
  letter-spacing: .14em;
  color: var(--sand);
  display: block;
  margin-bottom: 2px;
}

.panel-en {
  padding: 9px 13px;
  border-radius: 13px;
  background: var(--en-bg);
  font-family: 'Newsreader', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: var(--en-ink);
  animation: cz-rise .26s ease both;
}

.audio-meter {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 4px;
}
.audio-meter .bars { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.audio-meter .bars span {
  width: 2.5px; height: 16px;
  border-radius: 2px;
  background: var(--clay);
  animation: cz-bar .7s ease-in-out infinite;
}
.audio-meter .bars span:nth-child(2) { animation-delay: .1s }
.audio-meter .bars span:nth-child(3) { animation-delay: .2s }
.audio-meter .bars span:nth-child(4) { animation-delay: .3s }
.audio-meter .bars span:nth-child(5) { animation-delay: .15s }
.audio-meter .cap {
  font-family: 'Newsreader', serif;
  font-size: 11px;
  color: var(--clay-deep);
  letter-spacing: .03em;
}

.actions { display: flex; gap: 6px; padding: 1px 2px 2px; flex-wrap: wrap; }
.pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: #8A6A50;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: all .18s;
}
.pill:hover { background: var(--hover); color: var(--ink-hot); }
.pill.on { background: var(--press); color: var(--ink-hot); border-color: rgba(var(--sand-rgb),.5); }
.pill:disabled { opacity: .5; cursor: default; }

/* Thinking / typing */

.thinking, .typing {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  animation: cz-rise .3s ease both;
}
.thinking .avatar-sm { animation: cz-halo 1.8s ease-in-out infinite; }
.thinking .box {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: 20px 20px 20px 6px;
  background: rgba(var(--card-rgb),.72);
  border: 1px dashed rgba(var(--sand-rgb),.4);
}
.thinking .dots { display: flex; gap: 4px; }
.thinking .dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sand);
  animation: cz-breathe 1.7s ease-in-out infinite;
}
.thinking .dots span:nth-child(2) { animation-delay: .28s }
.thinking .dots span:nth-child(3) { animation-delay: .56s }
.thinking .cap {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}

.typing .box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 14px 17px;
  border-radius: 20px 20px 20px 6px;
  background: var(--card);
  border: 1px solid var(--card-hair);
  box-shadow: 0 3px 12px rgba(150,110,80,.09);
}
.typing .box span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay);
  animation: cz-bounce 1.1s ease-in-out infinite;
}
.typing .box span:nth-child(2) { animation-delay: .16s }
.typing .box span:nth-child(3) { animation-delay: .32s }

/* In the room there is nothing to type on. The container goes and the dots
   sit on the page, the way the speech around them does. */
.view.irl .typing .box {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 6px 4px;
}
.view.irl .typing .box span { background: var(--clay); opacity: .75; }

.act-wait {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: cz-rise .22s ease both;
}
.act-wait-label {
  max-width: 78vw;
  font-size: 17px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink);
}
.act-wait-dots { display: flex; gap: 7px; }
.act-wait-dots span {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--clay);
  animation: cz-bounce 1.1s ease-in-out infinite;
}
.act-wait-dots span:nth-child(2) { animation-delay: .16s }
.act-wait-dots span:nth-child(3) { animation-delay: .32s }

.act-run-tap {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  color: var(--ink-mute);
  animation: cz-fade 1.6s ease-in-out infinite alternate;
}
.act-run-tap i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  opacity: .75;
}

.tail { height: 4px; flex: none; }

/* ── Suggestion chips ─────────────────────────────────────────────────── */

.chips {
  flex: none;
  min-width: 0;
  padding: 10px 14px 6px;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chip {
  flex: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--sand-rgb),.28);
  background: rgba(var(--card-rgb),.7);
  color: var(--ink-soft);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .18s;
}
.chip:hover { background: var(--card); color: var(--ink-strong); }

/* ── Composer ─────────────────────────────────────────────────────────── */

.composer {
  position: relative;
  flex: none;
  min-width: 0;
  /* The home indicator needs clearance; it does not need clearance plus ten. */
  padding: 8px 14px max(10px, var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  gap: 9px;
  background: rgba(var(--bar-rgb),.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(var(--sand-rgb),.14);
}
.field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid rgba(var(--sand-rgb),.26);
  box-shadow: inset 0 1px 3px rgba(150,110,80,.06);
}
.field input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Zen Maru Gothic', sans-serif;
  /* 16px keeps iOS Safari from zooming in when the field takes focus. */
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.field input::placeholder { color: #C0A98F; }
.field .ime { color: #C4A587; font-size: 14px; }

.send {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  border: none;
  background: linear-gradient(165deg, #C87A54, var(--clay-deep));
  color: #FFF7EE;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(140,80,50,.24);
  transition: filter .18s, opacity .18s;
}
.send:hover { filter: brightness(.92); }
.send:disabled { opacity: .45; cursor: default; filter: none; }

/* ── Notice toast ─────────────────────────────────────────────────────── */

.notice {
  position: absolute;
  left: 16px; right: 16px;
  bottom: calc(96px + var(--safe-bottom));
  z-index: 40;
  padding: 9px 13px;
  border-radius: 13px;
  background: rgba(var(--card-rgb),.96);
  border: 1px solid var(--card-hair);
  box-shadow: 0 6px 18px rgba(150,110,80,.16);
  font-family: 'Newsreader', serif;
  font-size: 12.5px;
  font-style: italic;
  color: var(--ink-soft);
  animation: cz-rise .26s ease both;
}

/* Touch targets deserve a little more room on small screens. */
@media (max-width: 420px) {
  .pill { padding: 6px 11px; }
  .chip { padding: 7px 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Views ────────────────────────────────────────────────────────────── */

.view {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.view.active { display: flex; }

/* ── Contacts view ────────────────────────────────────────────────────── */

.contacts-header {
  flex: none;
  padding: calc(16px + var(--safe-top)) 20px 12px;
  background: var(--bar);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.contacts-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: .01em;
}
.contacts-sub {
  font-family: 'Newsreader', serif;
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: .03em;
  margin-top: 1px;
}

.contact-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: none;
}
.contact {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  border-radius: 16px;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
  min-width: 0;
}
.contact:hover { background: rgba(var(--card-rgb),.75); }
.contact-avatar { width: 46px; height: 46px; font-size: 21px; }
.contact-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-top { display: flex; align-items: baseline; gap: 8px; }
.contact-name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-time {
  flex: none;
  font-family: 'Newsreader', serif;
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .03em;
}
.contact-bottom { display: flex; align-items: center; gap: 8px; }
.contact-preview {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.contact-preview.typing { color: var(--matcha); font-weight: 500; }
.contact-badge {
  flex: none;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: linear-gradient(165deg, #C87A54, var(--clay-deep));
  color: #FFF7EE;
  font-size: 10.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Chat header additions ────────────────────────────────────────────── */

.back-btn {
  width: 34px; height: 34px;
  flex: none;
  border: none;
  background: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay-deep);
  cursor: pointer;
  margin-left: -6px;
}
.back-btn:hover { background: var(--hover); }
.who { pointer-events: none; }

/* Blue double-check, WhatsApp style */
.receipt.read { color: #4FA8DE; }

/* ── Study check (private feedback on the user's Japanese) ────────────── */

.check-dot {
  width: 13px; height: 13px;
  flex: none;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-left: 3px;
  box-shadow: inset 0 -1px 2px rgba(0,0,0,.14);
  transition: transform .15s;
}
.check-dot:hover { transform: scale(1.25); }
.check-dot.on { outline: 2px solid rgba(74,53,38,.25); outline-offset: 1.5px; }
.check-dot.g-green { background: #7FA95C; }
.check-dot.g-orange { background: #E09B4C; }
.check-dot.g-red { background: #C75B4A; }

.panel-check {
  max-width: 78%;
  align-self: flex-end;
  padding: 9px 13px;
  border-radius: 13px;
  font-size: 12.5px;
  line-height: 1.6;
  animation: cz-rise .26s ease both;
}
.panel-check .head {
  font-family: 'Newsreader', serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.panel-check .body {
  font-family: 'Newsreader', serif;
  color: var(--ink-soft);
}
.panel-check.g-green { background: rgba(127,169,92,.14); }
.panel-check.g-green .head { color: #5C7F3E; }
.panel-check.g-orange { background: rgba(224,155,76,.15); }
.panel-check.g-orange .head { color: #A8681F; }
.panel-check.g-red { background: rgba(199,91,74,.13); }
.panel-check.g-red .head { color: #A5402F; }

/* Typing caption */
.typing-col { display: flex; flex-direction: column; gap: 4px; }
.typing-cap {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-mute);
  padding-left: 4px;
}

/* ── World clock chip ─────────────────────────────────────────────────── */

.clock-chip {
  position: absolute;
  top: calc(12px + var(--safe-top));
  right: 12px;
  z-index: 56;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: rgba(var(--card-rgb),.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #8A6A50;
  font-family: 'Newsreader', serif;
  font-size: 12.5px;
  letter-spacing: .05em;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(150,110,80,.14);
  /* Not "all": the clock rewrites its own text every second, and every
     property under transition is one more thing to re-evaluate each time. */
  transition: background .3s, color .3s, border-color .3s;
}
.clock-chip:hover { background: var(--card); color: var(--ink-hot); }
.clock-chip.night {
  background: rgba(74,60,48,.9);
  border-color: rgba(230,201,168,.35);
  color: #E8D6BE;
}
.clock-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.3;
}
.clock-date { font-size: 9.5px; opacity: .78; letter-spacing: .04em; white-space: nowrap; }
.clock-text { font-size: 12px; white-space: nowrap; }

/* Where ライアン is. In the accent colour rather than the chip's own ink,
   because it is the one line on the clock that is about you. */
.clock-where {
  /* Block, not flex: ellipsis only works on a text box. */
  display: block;
  max-width: 132px;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 9.5px;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--clay-deep);
}
.clock-where[hidden] { display: none; }   /* an explicit display beats [hidden] */
.clock-where::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  margin-right: 4px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
}
.clock-chip.night .clock-where { color: #E9B98C; }

/* ── Bottom tab bar (contacts view) ───────────────────────────────────── */

.tabbar {
  flex: none;
  display: flex;
  padding: 6px 10px calc(8px + var(--safe-bottom));
  background: rgba(var(--bar-rgb),.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--hair);
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 4px;
  border: none;
  background: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 10.5px;
  color: var(--ink-faint);
  transition: color .15s;
}
.tab:hover { color: var(--ink-soft); }
.tab.active { color: var(--clay-deep); }

/* ── Settings ─────────────────────────────────────────────────────────── */

.settings-body {
  /* It held three short rows and never needed to scroll; your own details
     pushed it past the panel, and a panel with overflow:hidden simply cut
     them off with no way to reach them. */
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-body::-webkit-scrollbar { display: none; }
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(var(--tint-rgb),.35);
}
.settings-item.danger { background: rgba(199,91,74,.08); border: 1px solid rgba(199,91,74,.22); }
.settings-info { flex: 1; min-width: 0; }
.settings-name { font-size: 14px; font-weight: 700; color: var(--ink-strong); }
.settings-item.danger .settings-name { color: #A5402F; }
.settings-desc {
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-mute);
  margin-top: 2px;
}
.settings-select {
  flex: none;
  padding: 7px 10px;
  border-radius: 11px;
  border: 1px solid var(--hair-strong);
  background: var(--card);
  color: var(--ink-strong);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.danger-btn {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(199,91,74,.5);
  background: rgba(199,91,74,.12);
  color: #A5402F;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
}
.danger-btn:hover { background: #C75B4A; color: #FFF7EE; }

/* ── Time floaty ("+3時間") ───────────────────────────────────────────── */

.floaty-layer {
  position: absolute;
  top: calc(52px + var(--safe-top));
  left: 0; right: 0;
  z-index: 58;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
@keyframes cz-floaty {
  0% { transform: translateY(8px); opacity: 0 }
  15% { transform: translateY(0); opacity: 1 }
  75% { opacity: 1 }
  100% { transform: translateY(-14px); opacity: 0 }
}
.floaty {
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(216,154,78,.16);
  border: 1px solid rgba(216,154,78,.35);
  color: #A66A28;
  font-family: 'Newsreader', serif;
  font-size: 13px;
  letter-spacing: .06em;
  animation: cz-floaty 2.5s ease both;
}

/* ── Incoming-message popup ───────────────────────────────────────────── */

.notif-layer {
  position: absolute;
  top: calc(10px + var(--safe-top));
  left: 12px;
  right: 56px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
@keyframes cz-notif { from { transform: translateY(-14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
.notif {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(var(--card-rgb),.97);
  border: 1px solid var(--card-hair);
  box-shadow: 0 10px 26px rgba(74,53,38,.22);
  cursor: pointer;
  animation: cz-notif .25s ease both;
  transition: opacity .25s, transform .25s;
}
.notif.gone { opacity: 0; transform: translateY(-10px); }
.notif-col { flex: 1; min-width: 0; }
.notif-name { font-size: 12.5px; font-weight: 700; color: var(--ink-strong); }
.notif-text {
  font-size: 12px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-x {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-faint);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}
.notif-x:hover { background: var(--hover); color: var(--ink-hot); }

/* ── World controller ─────────────────────────────────────────────────── */


/* Section headings in the action sheet: what you were invited to, and what
   the world just dealt you. */

/* ── Action confirm step ──────────────────────────────────────────────── */

/* Go and do it, say something on the way out, or say something when you get
   back — all three from one panel. */
.act-confirm-en {
  margin-top: -4px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}
.act-confirm-or {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--hair);
  font-family: 'Newsreader', serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
}
.act-when .pill { flex: 1; justify-content: center; font-size: 12.5px; }
.act-when .pill:disabled { opacity: .4; cursor: default; }
.act-wide { width: 100%; justify-content: center; }
.act-back {
  border-color: transparent;
  background: transparent;
  color: var(--ink-mute);
}

/* Full-bleed on phones: if a rounding difference ever leaves a sliver below
   the app, it should be the app's own colour rather than a dark band. */
@media (max-width: 599px) {
  body { background: var(--screen-bot); }
}

/* ── Profile: what they are doing, and the world around them ──────────── */

.web-row:last-child { border-bottom: none; }

/* ── Phrase helper ────────────────────────────────────────────────────── */



/* The phrase panel holds an answer plus alternatives — give it more room. */
#phrase-overlay .mem-panel { max-height: 88%; }

/* ── The action curtain ───────────────────────────────────────────────── */

/* While an action runs, the screen belongs to it: nothing else is pressable.
   The card inside is the Action Clock design component, which brings its own
   styles — everything below is only the wash it sits on, plus two small
   app-side corrections. */
.act-run {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(24, 16, 10, .8);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  animation: cz-fade .2s ease both;
}
@keyframes cz-fade { from { opacity: 0 } to { opacity: 1 } }

.act-run-mount { width: 100%; }

/* The departure line reads 「08:00 →」, so the arrow pulls the whole line
   off-centre against the big clock underneath. Balance it with an invisible
   arrow on the other side. */
.act-run .ac-from::before {
  content: '→';
  margin-right: .45em;
  visibility: hidden;
}

/* Phones are short: give the clock a little less height to work with. */
@media (max-height: 700px) {
  .act-run .ac-card { --ac-clock-size: 58px; padding: 20px 20px 14px; }
}

/* An action that did not go to plan says so, permanently. */
.action-line.slipped { color: var(--clay-deep); }

/* "Thinking" with dots that actually move. */
.thinking { color: var(--ink-mute); }
.think-dots {
  display: inline-block;
  min-width: 3.2em;
  text-align: left;
  letter-spacing: .12em;
}

/* Your own status in the world panel — the same information the cast is
   given about you. */

.world-me-label {
  font-family: 'Newsreader', serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6F8358;
}
.world-me-jp { font-size: 13px; line-height: 2.1; color: var(--ink); }
.world-me-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* The one action the world will not pick for you. */
/* The row every sheet's list is built from — the action sheet, the memory
   drawer, the friend cards. It went out with a range replacement twice; the
   variants below it survived, which is why an unstyled row still looked
   almost right until you noticed the icon had moved onto its own line. */
.inv-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  border: none;
  border-radius: 13px;
  background: rgba(var(--tint-rgb),.35);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
}
.inv-item:hover { background: var(--hover); }


/* Closeness, moving. Warm when it rises, clay when it falls — the same
   language the bond bar in the profile uses.

   It sits just above the input field rather than up under the clock: that is
   where your eyes already are when a reply lands, and it is a solid pill
   rather than a tinted outline, because a 16%-alpha fill is invisible on the
   day paper and worse on the night one. */
.bond-layer {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% + 2px);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  pointer-events: none;
}
.bond-floaty {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 17px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.3);
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: .04em;
  box-shadow: 0 10px 24px -10px rgba(52,34,20,.55), inset 0 1px 0 rgba(255,255,255,.28);
  animation: cz-bond 3s cubic-bezier(.2,.9,.3,1) both;
}
.bond-floaty.up {
  background: linear-gradient(#A2B489, #83996A);
  color: #FBFFF4;
}
.bond-floaty.down {
  background: linear-gradient(#D08863, #BC6C46);
  color: #FFF4EC;
}
@keyframes cz-bond {
  0%   { transform: translateY(12px) scale(.92); opacity: 0 }
  12%  { transform: translateY(0) scale(1); opacity: 1 }
  82%  { transform: translateY(0) scale(1); opacity: 1 }
  100% { transform: translateY(-10px) scale(.97); opacity: 0 }
}
.bond-arrow { font-size: 14px; }
.bond-who { font-weight: 700; }
.bond-delta {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
}
/* ── Face to face ─────────────────────────────────────────────────────────

   From the Claude Design project "Face to Face", 案B 「台本になる」 — but only
   the part that matters: spoken words shed their bubbles and the chrome gets
   out of the way. The colour of the app stays whatever hour it is; being in
   the room with someone is a change in how the conversation READS, not a
   second theme fighting the first. Everything here is expressed in the day's
   own tokens, so it works at noon and at midnight alike. */

/* What was typed earlier steps back so the conversation you are in is the
   only lit thing. */
.view.irl .row:not(.spoken) { opacity: .42; }

.view.irl .row.spoken { margin-top: 4px; }

/* Speech is just speech: no container, no tail, no shadow.

   Not scoped to the mode. Something said out loud was said out loud whether
   or not you are still in the room — gating this on .view.irl meant walking
   away rewrote the whole evening as text messages. */
.spoken .bubble-ai,
.spoken .bubble-me {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 1px 4px;
}
.spoken .bubble-ai {
  color: var(--ink);
  font-size: 16px;
  line-height: 2.2;
}
.spoken .bubble-me {
  color: var(--clay-deep);
  font-size: 15.5px;
  text-align: right;
}
.spoken .ai-stack { max-width: 88%; }
.spoken .avatar { opacity: .45; }
/* Out of the room, a spoken line reads as something remembered rather than
   something happening — present, but not competing with live text. */
.view:not(.irl) .spoken .bubble-ai,
.view:not(.irl) .spoken .bubble-me { opacity: .82; }
.view:not(.irl) .row.spoken { margin-top: 4px; }

/* Nothing is delivered to someone in the same room — only the time remains. */
.spoken .receipt span:not(.msg-time):not(.check-dot) { display: none; }

/* The chrome retreats. */
.view.irl .chat-header,
.view.irl .composer {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: transparent;
}
.view.irl .field {
  background: transparent;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--hair-strong);
  box-shadow: none;
}
.view.irl .send {
  background: transparent;
  border: 1px solid var(--hair-strong);
  color: var(--clay-deep);
}
.view.irl .who-status .dot { background: var(--clay); }

/* The reading aids are chrome too: in the room they are just a quieter line
   under what was said, in the same ink as the rest of it. */
.view.irl .panel-en,
.view.irl .panel-kana {
  background: transparent;
  padding: 2px 4px;
}
.view.irl .panel-en {
  color: var(--ink);
  opacity: .85;
  font-size: 14.5px;
}
.view.irl .panel-kana { color: var(--ink); opacity: .6; }

/* ── The light in the room ────────────────────────────────────────────────

   The design's .glow layer: a bloom from above and behind, and four blurred
   dots of light that drift the way light does when neither of you is sitting
   still. It is one translucent sheet laid over whatever hour it already is —
   not a second theme — so the same four blobs read as afternoon through a
   window, as dusk, or as a lamp. The palette does the talking; --glow-str
   says how much of it survives. */

.view.irl { overflow: hidden; }

/* Everything the eye actually reads sits above the light. Positioned
   descendants paint after in-flow ones, so without this the sheet would
   wash over the words themselves. */
.view.irl > .chat-header,
.view.irl > .scroller,
.view.irl > .chips,
.view.irl > .undo-ask,
.view.irl > .phrase-ready,
.view.irl > .composer { position: relative; z-index: 1; }

.view.irl::before,
.view.irl::after {
  content: '';
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: var(--glow-str);
}

/* The bloom. */
.view.irl::before {
  inset: 0;
  background:
    radial-gradient(132% 62% at 50% -8%,
      rgba(var(--bloom-rgb), .3), rgba(var(--bloom-rgb), 0) 62%),
    radial-gradient(96% 44% at 78% -4%,
      rgba(var(--lamp-rgb), .22), rgba(var(--lamp-rgb), 0) 70%);
}

/* The dots. */
.view.irl::after {
  inset: -14% -26%;
  background:
    radial-gradient(34% 18% at 16% 24%, rgba(var(--lamp-rgb), .34), rgba(var(--lamp-rgb), 0) 70%),
    radial-gradient(28% 15% at 60% 66%, rgba(var(--bloom-rgb), .42), rgba(var(--bloom-rgb), 0) 70%),
    radial-gradient(24% 13% at 88% 20%, rgba(var(--cast-rgb), .24), rgba(var(--cast-rgb), 0) 70%),
    radial-gradient(20% 11% at 40% 92%, rgba(var(--lamp-rgb), .2), rgba(var(--lamp-rgb), 0) 70%);
  animation: cz-drift 14s ease-in-out infinite;
}

@keyframes cz-drift {
  0%   { transform: translate3d(-4%, -1%, 0); }
  50%  { transform: translate3d(4%,  1%, 0); }
  100% { transform: translate3d(-4%, -1%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .view.irl::after { animation: none; }
}

/* ── Restored ────────────────────────────────────────────────────────────

   These are the rules a range replacement took out along with the old world
   panel: the memory and profile drawers, the chat header identity button,
   the action button, the attachment card. They sit here, before the newer
   sections, so anything rewritten since still wins. */

.clock-chip .clock-icon { color: #D89A4E; }

.clock-chip.night .clock-icon { color: #E8D6BE; }

/* ── World controller ─────────────────────────────────────────────────── */

.world-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: rgba(74,53,38,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  animation: cz-rise .18s ease both;
}

/* ── Memory panel ─────────────────────────────────────────────────────── */

.mem-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: rgba(74,53,38,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
  animation: cz-rise .18s ease both;
}

.mem-panel {
  width: min(420px, 100%);
  max-height: 74%;
  background: var(--card);
  border: 1px solid var(--card-hair);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(74,53,38,.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.mem-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--hair);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink-strong);
}

.mem-x {
  border: none;
  background: none;
  color: var(--sand);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
}

.mem-x:hover { background: #F3E7D6; color: #6B4326; }

.mem-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.mem-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(232,214,190,.35);
}

.mem-topic {
  flex: none;
  font-size: 10.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(139,158,116,.18);
  color: #5D6B4C;
}

.mem-fact {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink);
  word-break: break-word;
}

.mem-del {
  flex: none;
  border: none;
  background: none;
  color: var(--ink-faint);
  cursor: pointer;
  font-size: 11px;
  padding: 2px 5px;
  border-radius: 7px;
}

.mem-del:hover { background: #F0DBC4; color: #8E4A2C; }

.mem-empty {
  padding: 22px 14px;
  text-align: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.7;
}

.mem-foot {
  flex: none;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--hair);
  display: flex;
  justify-content: flex-end;
}

/* World controller: upcoming plans */
.world-plans {
  margin: 0 16px 12px;
  padding: 10px 12px;
  border-radius: 13px;
  background: rgba(232,214,190,.4);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Per-bubble timestamps */
.msg-time {
  font-family: 'Newsreader', serif;
  font-size: 9.5px;
  color: var(--ink-faint);
  letter-spacing: .05em;
  white-space: nowrap;
}

.msg-time-ai {
  margin-left: auto;
  align-self: center;
  padding-right: 2px;
}

/* Failed sends are tappable to retry */
.receipt.failed { color: #C75B4A; cursor: pointer; font-weight: 500; }

.receipt.failed:hover { text-decoration: underline; }

/* Presence */
.contact-avatar { position: relative; }

.presence-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2.5px solid #F7EFE4;
}

.presence-dot.pr-online { background: var(--matcha); }

.presence-dot.pr-busy { background: #D8A24E; }

.presence-dot.pr-sleep { background: #B8A794; }

.who-status.pr-online .dot { background: var(--matcha); }

.who-status.pr-busy .dot { background: #D8A24E; }

.who-status.pr-sleep .dot { background: #B8A794; }

/* ── Profile ──────────────────────────────────────────────────────────── */

.who-btn {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-radius: 12px;
}














/* ── Inventory ────────────────────────────────────────────────────────── */

.inv-btn { position: relative; }

.inv-dot {
  position: absolute;
  top: -2px; right: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #C75B4A;
  border: 2px solid #FAF3EA;
}

.inv-icon { font-size: 20px; flex: none; }

.inv-col { flex: 1; min-width: 0; }

.inv-top { display: flex; align-items: center; gap: 7px; }

.inv-name { font-size: 13.5px; font-weight: 700; color: var(--ink-strong); }

.inv-new {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #C75B4A;
  color: #FFF7EE;
}

.inv-sub { font-size: 11px; color: var(--ink-mute); margin-top: 1px; }

/* ── Attachment card on a message ─────────────────────────────────────── */

.attachment {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 13px;
  border: 1px dashed rgba(168,132,106,.45);
  background: rgba(255,252,246,.8);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
  animation: cz-rise .26s ease both;
}

.attachment:hover { background: #F3E7D6; }

.att-icon { font-size: 19px; flex: none; }

.att-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.att-title { font-size: 12.5px; font-weight: 700; color: var(--ink-strong); }

.att-sub { font-size: 10px; color: var(--ink-faint); font-family: 'Newsreader', serif; }

/* ── Item reader ──────────────────────────────────────────────────────── */

.item-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }

.hspace { flex: 1; min-width: 8px; }

/* Time-jump attention: the clock pulses when the world skips forward */
@keyframes chip-pulse {
  0% { transform: scale(1); box-shadow: 0 3px 10px rgba(150,110,80,.14); }
  25% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(216,154,78,.3); }
  55% { transform: scale(1); box-shadow: 0 0 0 12px rgba(216,154,78,0); }
  100% { transform: scale(1); }
}

.clock-chip.pulse { animation: chip-pulse 1.2s ease 2; }

/* Night ambience: after 18:00 the whole app sits under a gentle dusk veil,
   so midnight actually looks like midnight. */
.app::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 45;
  background: rgba(46, 38, 74, 0);
  transition: background 1.5s ease;
}

.app.night-mode::after { background: rgba(46, 38, 74, .11); }

/* Holidays and seasonal events glow warm on the chip's date line */
.clock-date.is-holiday { color: #C75B4A; opacity: 1; font-weight: 500; }

.clock-chip.night .clock-date.is-holiday { color: #F2B8A0; }

/* ── Phone fixes ──────────────────────────────────────────────────────── */

/* Nothing may widen the document — iOS lets you scroll to overflow even
   with body overflow hidden. */
html, body { overflow-x: hidden; }

/* Header text truncates horizontally instead of wrapping into a column. */
.who { overflow: hidden; }

.who-status .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* iOS: a flex <input> refuses to shrink below its intrinsic size unless the
   flex chain is explicitly allowed to collapse. This is what pushed the send
   button off the right edge. */
.field { min-width: 0; }

/* The paper plane was flying the wrong way. */
.send svg { transform: scaleX(-1); }

/* On narrow screens the clock chip yields space instead of taking it. */
@media (max-width: 520px) {
  .clock-chip { max-width: 48vw; }
  .clock-date, .clock-text {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
}

/* Narrow screens: tighter header furniture so the name keeps real width */
@media (max-width: 520px) {
  .chat-header { gap: 8px; padding-left: 12px; }
  .avatar-lg { width: 36px; height: 36px; font-size: 15px; }
  .back-btn { margin-left: -4px; }
  .who-btn { gap: 8px; }
  .hspace { min-width: 4px; }
  .who-name { font-size: 15px; }
  .who-name .chev { display: none; }
}

/* ── Actions: things you can actually DO ─────────────────────────────── */

.action-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(192,113,78,.45);
  background: rgba(200,122,84,.12);
  color: #8E4A2C;
  font-weight: 700;
}

.action-chip:hover { background: rgba(200,122,84,.22); color: #6B3520; }

.action-chip:disabled { opacity: .5; cursor: default; }


/* The moment an action happened, marked in the history */
.action-line {
  text-align: center;
  font-size: 12px;
  color: #A66A28;
  padding: 4px 12px;
  font-weight: 500;
  letter-spacing: .03em;
}

/* Action button in the composer, with its availability dot */
.act-btn {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(192,113,78,.5);
  background: rgba(200,122,84,.12);
  color: #8E4A2C;
  font-size: 18px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
}

.act-btn:hover { background: rgba(200,122,84,.24); }

.act-btn .inv-dot { top: 0; right: 0; }

/* The old chips row folds away when empty */
.chips:empty { display: none; }

/* Check panels host ruby now */
.panel-check .body { line-height: 1.9; }

/* Friends tab */
.tab { position: relative; }

.tab-dot { top: 2px; right: calc(50% - 16px); }

/* Friend rows: English gloss under the Japanese */
.friend-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: #5D6B4C;
  margin-top: 3px;
  line-height: 1.5;
}

/* Custom action composer inside the action sheet */



.act-field input {
  flex: 1;
  width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: 16px;   /* iOS zooms below 16 */
  color: var(--ink);
}

.act-field input::placeholder { color: #C0A98F; }


/* ── The profile sheet ────────────────────────────────────────────────────

   From the Claude Design project "Profile Sheet". Two answers worth keeping:

   The 訳 button stops being a flip and becomes a dial with three depths —
   furigana only, labels in English, everything in English. Japanese never
   leaves the screen, so one language can always be read against the other,
   which is how the rest of the app works.

   And closeness stops being a progress bar. It is a segmented scale with the
   six bands drawn on it, the confession threshold marked at 78, how far it is
   to the next band, and a fortnight of movement underneath. */

.prof-scrim {
  position: absolute;
  inset: 0;
  z-index: 71;
  background: var(--scrim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: cz-fade .2s ease both;
}
.prof-sheet {
  height: 92%;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -16px 46px rgba(30,18,10,.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cz-sheetup .3s cubic-bezier(.2,.8,.3,1) both;
}
.prof-grip {
  flex: none;
  align-self: stretch;
  padding: 9px 0 5px;
  display: flex;
  justify-content: center;
}
.prof-grip::before {
  content: '';
  width: 44px; height: 5px;
  border-radius: 99px;
  background: var(--hair-strong);
}

.prof-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 16px 12px; }
.prof-bar-gap { flex: 1; }
.prof-back {
  flex: none;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--card2);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.prof-dial-label { font-size: 12px; color: var(--ink-mute); }
.prof-dial {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 99px;
  background: var(--card);
  border: 1px solid var(--hair);
}
.prof-dial button {
  border: none;
  border-radius: 99px;
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 11.5px;
  padding: 4px 10px;
  cursor: pointer;
}
.prof-dial button.on { background: var(--wash); color: var(--clay-deep); font-weight: 500; }

.prof-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px calc(28px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: none;
}

/* Every band announces itself the same way. */
.prof-cap { display: flex; align-items: baseline; gap: 8px; }
.prof-cap-jp { font-size: 12.5px; color: var(--ink-soft); }
.prof-cap-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.prof-jp { font-size: 14px; line-height: 2.05; color: var(--ink); }
.prof-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-mute);
}

/* ── Who they are ─────────────────────────────────────────────────────── */

.prof-top { display: flex; gap: 14px; align-items: flex-start; padding-top: 6px; }
.prof-top .avatar { width: 64px; height: 64px; border-radius: 50%; font-size: 26px; }
.prof-top-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.prof-name { font-size: 21px; font-weight: 500; line-height: 1.9; color: var(--ink); }
.prof-romaji {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
}
.prof-rel-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.prof-rel {
  background: var(--card2);
  border: 1px solid var(--hair);
  border-radius: 99px;
  padding: 3px 11px;
  font-size: 12px;
  color: var(--ink-soft);
}
.prof-rel.partner { background: var(--wash); border-color: var(--clay); color: var(--clay-deep); }
.prof-rel-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}

.prof-now { background: var(--card2); border-radius: 18px; padding: 14px 15px; display: flex; flex-direction: column; gap: 4px; }
.prof-now-top { display: flex; align-items: center; gap: 8px; }
.prof-live { width: 6px; height: 6px; border-radius: 50%; background: var(--matcha); }
.prof-live.busy { background: var(--clay); }
.prof-live.sleep { background: var(--sand); }
.prof-now .prof-jp { font-size: 16px; line-height: 2.1; }
.prof-mood-row { display: flex; gap: 8px; align-items: center; margin-top: 2px; flex-wrap: wrap; }
.prof-mood {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 99px;
  padding: 3px 10px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ── Closeness ────────────────────────────────────────────────────────── */

.prof-meter { background: var(--card); border: 1px solid var(--hair); border-radius: 20px; padding: 15px 16px 14px; }
.prof-meter-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.prof-band { font-size: 19px; font-weight: 500; line-height: 1.7; color: var(--ink); }
.prof-value { display: flex; align-items: baseline; gap: 3px; color: var(--clay); }
/* Below nought the number is not a warm thing. */
.prof-value.cold { color: var(--ink-mute); }
.person-bond-n.cold { color: var(--ink-mute); }
.prof-seg.cold i { background: var(--ink-faint); }
.prof-value b { font-size: 34px; font-weight: 700; line-height: 1; }
.prof-value i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  opacity: .7;
}

.prof-scale { position: relative; padding-top: 16px; }
.prof-segs { display: flex; gap: 3px; height: 16px; align-items: stretch; }
.prof-seg { flex: 1; border-radius: 4px; background: var(--card2); overflow: hidden; }
.prof-seg i { display: block; height: 100%; background: var(--clay); opacity: .8; }
.prof-seg.past i { opacity: .35; }
.prof-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 10.5px;
  color: var(--ink-faint);
}

.prof-delta-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 12px; }
.prof-delta {
  border-radius: 99px;
  padding: 3px 9px;
  font-size: 12px;
  font-weight: 500;
  background: var(--note);
  color: var(--matcha);
  animation: cz-deltain .5s ease both;
}
.prof-delta.down { background: var(--wash); color: var(--clay-deep); }
@keyframes cz-deltain { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
.prof-delta-why { font-size: 11.5px; color: var(--ink-mute); }

.prof-hist { display: flex; gap: 4px; align-items: flex-end; height: 20px; margin-top: 12px; }
.prof-hist i { display: block; width: 5px; border-radius: 2px; background: var(--hair-strong); }
.prof-hist i.up { background: var(--matcha); }
.prof-hist i.down { background: var(--clay); }
.prof-hist span {
  margin-left: 6px;
  align-self: center;
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* ── Rows of facts ────────────────────────────────────────────────────── */

.prof-rows { background: var(--card2); border-radius: 18px; padding: 4px 15px; }
.prof-row { display: flex; gap: 12px; padding: 10px 0; }
.prof-row + .prof-row { border-top: 1px solid var(--hair); }
.prof-k { flex: none; width: 84px; padding-top: 3px; }
.prof-k-jp { font-size: 12px; line-height: 1.9; color: var(--ink-mute); }
.prof-k-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-faint);
}
.prof-v { flex: 1; min-width: 0; }

/* ── More about them ──────────────────────────────────────────────────── */

.prof-disc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 12px 15px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.prof-disc-col { display: flex; flex-direction: column; gap: 1px; }
.prof-disc-jp { font-size: 13.5px; line-height: 1.9; color: var(--ink); }
.prof-disc-r { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-mute); }
.prof-chev { transition: transform .2s; }
.prof-disc.on .prof-chev { transform: rotate(180deg); }
.prof-more { display: flex; flex-direction: column; gap: 18px; animation: cz-discopen .28s ease both; }
@keyframes cz-discopen { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }

.prof-standing { background: var(--note); border: 1px solid var(--hair); border-radius: 18px; padding: 14px 15px; }

.prof-edge { background: var(--card2); border-radius: 18px; padding: 13px 15px 14px; }
.prof-edge + .prof-edge { margin-top: 10px; }
.prof-edge-top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.prof-edge-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.prof-edge-line { flex: 1; min-width: 18px; height: 1px; background: var(--hair); position: relative; }
.prof-edge-line::after {
  content: '';
  position: absolute;
  left: 50%; top: -2px;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--clay);
  opacity: .5;
}
.prof-edge .prof-jp { font-size: 13px; line-height: 2.05; color: var(--ink-soft); }

.prof-around { background: var(--card2); border-radius: 18px; padding: 4px 15px; }
.prof-person { display: flex; gap: 11px; align-items: center; padding: 10px 0; }
.prof-person + .prof-person { border-top: 1px solid var(--hair); }
.prof-person .avatar { width: 32px; height: 32px; border-radius: 50%; font-size: 13px; }
.prof-person-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prof-person-name { font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.prof-person-meta { font-size: 11.5px; color: var(--ink-mute); }

/* ── Promises ─────────────────────────────────────────────────────────── */

.prof-plan {
  display: flex;
  gap: 0;
  align-items: stretch;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
}
.prof-plan + .prof-plan { margin-top: 8px; }
.prof-plan-when {
  flex: none;
  min-width: 60px;
  text-align: center;
  background: var(--clay);
  color: var(--onclay);
  padding: 12px 10px;
}
.prof-plan-when.group { background: var(--matcha); color: #FBFCF7; }
.prof-plan-dm { font-size: 15px; font-weight: 500; line-height: 1.2; }
.prof-plan-wd {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 10.5px;
  opacity: .85;
}
.prof-plan-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; }
.prof-plan-jp { font-size: 14.5px; line-height: 1.9; color: var(--ink); }
.prof-plan-at { font-size: 11.5px; color: var(--ink-mute); }

/* ── What they remember ───────────────────────────────────────────────── */

.prof-mem-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.prof-mem-n {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.prof-mem {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 11px 14px 12px;
}
.prof-mem + .prof-mem { margin-top: 8px; }
.prof-mem-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.prof-tag {
  border-radius: 99px;
  padding: 2px 9px;
  font-size: 11px;
  background: var(--card2);
  color: var(--ink-soft);
}
.prof-mem-when { margin-left: auto; font-size: 10.5px; color: var(--ink-faint); }
.prof-mem .prof-jp { font-size: 13.5px; line-height: 2.05; }
.prof-all {
  width: 100%;
  background: var(--card2);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 11px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.prof-all i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  color: var(--ink-mute);
  margin-left: 7px;
}

/* Everything they remember, as its own page in the same sheet. */
.prof-search {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card2);
  border-radius: 14px;
  padding: 10px 13px;
}
.prof-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 16px;   /* iOS zooms below 16 */
  color: var(--ink);
}
.prof-search input::placeholder { color: var(--ink-faint); }
.prof-chips { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.prof-chip {
  flex: none;
  border: 1px solid var(--hair);
  border-radius: 99px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  padding: 6px 11px;
  cursor: pointer;
}
.prof-chip.on { border-color: var(--clay); background: var(--wash); color: var(--clay-deep); }
.prof-chip i { font-family: 'Newsreader', serif; font-style: italic; opacity: .62; margin-left: 5px; }
.prof-group-head { display: flex; align-items: center; gap: 9px; }
.prof-group-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); opacity: .6; }
.prof-group-rule { flex: 1; height: 1px; background: var(--hair); }

/* ── A group ──────────────────────────────────────────────────────────── */

.prof-cluster { position: relative; width: 64px; height: 64px; flex: none; }
.prof-cluster .avatar { position: absolute; border-radius: 50%; border: 2px solid var(--paper); }
.prof-cluster .avatar:nth-child(1) { left: 0; top: 4px; width: 38px; height: 38px; font-size: 15px; }
.prof-cluster .avatar:nth-child(2) { right: 0; top: 0; width: 34px; height: 34px; font-size: 14px; }
.prof-cluster .avatar:nth-child(3) { right: 6px; bottom: 0; width: 30px; height: 30px; font-size: 12px; }
.prof-member { display: flex; gap: 11px; align-items: center; padding: 11px 0; }
.prof-member + .prof-member { border-top: 1px solid var(--hair); }
.prof-member .avatar { width: 38px; height: 38px; border-radius: 50%; font-size: 15px; }
.prof-member-av { position: relative; flex: none; }
.prof-member-dot {
  position: absolute;
  right: -1px; bottom: -1px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card);
}
.prof-member-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prof-member-name { font-size: 14.5px; line-height: 1.8; color: var(--ink); }
.prof-member-role { font-size: 11.5px; color: var(--ink-mute); }
.prof-member-r { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.prof-member-pr { font-size: 11.5px; color: var(--ink-soft); }
.prof-nothing {
  border: 1px dashed var(--hair-strong);
  border-radius: 18px;
  padding: 14px 15px;
}
.prof-nothing-jp { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }

/* ── The action sheet ─────────────────────────────────────────────────────

   From the Claude Design project "Action Sheet". Two views in one sheet: what
   you could do, and the moment of committing to it.

   The row is the point. A dealt card runs to thirty Japanese characters with
   a reading above every kanji, and the old row put the duration beside the
   title — so a long title wrapped under its own pill and collided with the
   row beneath. Here the title owns a full-width line to itself, the gloss
   sits under it, and the cost is on its own rule below. Nothing shares a line
   with the duration, so nothing can collide. */

.act-scrim {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: cz-fade .2s ease both;
}
.act-sheet {
  max-height: 82%;
  background: var(--card);
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 50px rgba(66,48,31,.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cz-sheetup .28s cubic-bezier(.2,.8,.3,1) both;
}
.act-grip {
  flex: none;
  align-self: stretch;
  padding: 9px 0 4px;
  display: flex;
  justify-content: center;
}
.act-grip::before {
  content: '';
  width: 44px; height: 5px;
  border-radius: 99px;
  background: var(--hair-strong);
}
.act-page { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

.act-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 16px 10px; }
.act-bar-jp { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.act-bar-gap { flex: 1; }
.act-bar-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.act-back, .act-x {
  flex: none;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  background: var(--card2);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.act-x { font-size: 13px; color: var(--ink-mute); }

.act-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 16px calc(20px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
  scrollbar-width: none;
}

/* Each band announces itself in both languages, with a rule between. */
.act-band-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.act-band-jp { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.act-band-jp.heart { color: var(--clay-deep); }
.act-band-rule { flex: 1; height: 1px; background: var(--hair); }
.act-band-rule.heart { background: var(--wash); }
.act-band-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}

/* ── One thing you could do ───────────────────────────────────────────── */

.act-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--hair);
  border-radius: 20px;
  background: var(--card2);
  font-family: inherit;
  padding: 14px 15px 0;
  cursor: pointer;
}
.act-row + .act-row { margin-top: 9px; }
.act-row:active { transform: scale(.995); }
.act-row-top { display: flex; gap: 10px; align-items: flex-start; }
.act-mark {
  flex: none;
  width: 24px; height: 24px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
}
.act-mark.with { background: var(--wash); color: var(--clay); font-weight: 700; }
.act-col { flex: 1; min-width: 0; }
/* Ruby needs the room; a long title gets a whole line to itself. */
.act-title {
  font-size: 17px;
  font-weight: 500;
  line-height: 2.15;
  color: var(--ink);
  text-wrap: pretty;
}
.act-gloss {
  margin-top: 4px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.act-quote {
  margin-top: 6px;
  padding-left: 9px;
  border-left: 2px solid var(--wash);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-mute);
}

/* The cost, on its own rule, where nothing can wrap into it. */
.act-cost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--hair);
}
.act-cost-l { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.act-num { display: flex; align-items: baseline; gap: 2px; color: var(--clay); }
.act-num .plus { font-size: 13px; }
.act-num .n { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.act-num .u { font-size: 13.5px; font-weight: 500; }
.act-tag {
  padding: 3px 8px;
  border-radius: 99px;
  background: var(--note);
  color: var(--ink-soft);
  font-size: 11px;
}
.act-tag.with { background: var(--wash); color: var(--clay-deep); }
.act-back-at { display: flex; align-items: baseline; gap: 4px; flex: none; }
.act-back-at .arrow { font-size: 12px; color: var(--ink-faint); }
.act-back-at .t { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.act-back-at .wd { font-size: 11px; color: var(--ink-mute); }

/* The dealt cards share one card, divided by hairlines. */
.act-deck { background: var(--card); border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; }
.act-deck .act-row {
  border: none;
  border-radius: 0;
  background: transparent;
  margin-top: 0;
  padding: 14px 15px 0;
}
.act-deck .act-row:active { transform: none; background: var(--card2); }
.act-deck .act-row + .act-row { border-top: 1px solid var(--hair); }
.act-deck .act-title { font-size: 16.5px; }
.act-num-i { font-size: 11.5px; color: var(--ink-faint); padding-top: 9px; min-width: 11px; flex: none; }

.act-none {
  border: 1px dashed var(--hair);
  border-radius: 18px;
  padding: 16px;
  text-align: center;
}
.act-none-jp { font-size: 14px; line-height: 1.9; color: var(--ink-mute); }
.act-none-en {
  margin-top: 3px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ── The one you cannot take back ─────────────────────────────────────── */

.act-confess {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1.5px solid var(--clay);
  border-radius: 20px;
  padding: 15px 16px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(180,100,63,.14);
}
.act-confess-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.act-heart-badge {
  flex: none;
  width: 19px; height: 19px;
  border-radius: 50%;
  background: var(--clay);
  color: var(--card);
  font-size: 9.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.act-once { font-size: 11.5px; font-weight: 500; letter-spacing: .03em; color: var(--clay-deep); }
.act-confess-bond { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.act-bond-bar { width: 44px; height: 5px; border-radius: 99px; background: var(--card2); overflow: hidden; }
.act-bond-bar i { display: block; height: 100%; background: var(--clay); }
.act-bond-n { font-size: 11px; color: var(--ink-mute); }
.act-confess .act-title { font-size: 20px; font-weight: 700; line-height: 2.1; }
.act-confess .act-gloss { font-size: 14px; }
.act-confess .act-cost { margin-top: 12px; padding: 11px 0 0; }
.act-warn {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ── Something of your own ────────────────────────────────────────────── */

.act-free {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--card2);
  border-radius: 18px;
  padding: 9px 10px 9px 13px;
}
.act-free input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;   /* iOS zooms below 16 */
  color: var(--ink);
  padding: 6px 0;
}
.act-free input::placeholder { color: var(--ink-faint); }
.act-go {
  flex: none;
  border: none;
  border-radius: 13px;
  background: var(--ink);
  color: var(--card);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 15px;
  cursor: pointer;
}
.act-free-note {
  margin-top: 7px;
  padding: 0 3px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
}

/* ── Committing to it ─────────────────────────────────────────────────── */

.act-what { background: var(--card2); border-radius: 20px; padding: 16px 16px 14px; }
.act-what .act-title { font-size: 21px; font-weight: 700; line-height: 2.1; }
.act-what .act-gloss { font-size: 14.5px; }

/* Cost on the left, the hour you come back on the right. */
.act-split {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
}
.act-split-bar { width: 1px; background: var(--hair); }
.act-split-l { flex: none; }
.act-split-r { flex: 1; min-width: 0; }
.act-cap {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.act-big { display: flex; align-items: baseline; gap: 2px; margin-top: 2px; color: var(--clay); }
.act-big .plus { font-size: 15px; }
.act-big .n { font-size: 27px; font-weight: 700; letter-spacing: -.02em; }
.act-big .u { font-size: 15px; font-weight: 500; }
.act-split-l .act-tag { display: inline-block; margin-top: 5px; }
.act-arrow-row { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.act-from { font-size: 15px; color: var(--ink-faint); }
.act-to { font-size: 24px; font-weight: 700; color: var(--ink); }
.act-when-en {
  margin-top: 3px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.act-say-head { display: flex; align-items: center; gap: 9px; margin: 20px 2px 10px; }
.act-say-jp { font-size: 13.5px; font-weight: 500; color: var(--ink); }
.act-says { display: flex; flex-direction: column; gap: 8px; }
.act-say {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 13px 14px;
  font-family: inherit;
  cursor: pointer;
}
.act-say.on { background: var(--wash); border-color: var(--clay); }
.act-dot {
  flex: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--card2);
}
.act-say.on .act-dot { background: var(--clay); box-shadow: inset 0 0 0 3px var(--card); }
.act-say-col { flex: 1; min-width: 0; }
.act-say-label { font-size: 15px; font-weight: 500; color: var(--ink); }
.act-say-en {
  margin-top: 2px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute);
}

.act-note-box { margin-top: 10px; background: var(--card2); border-radius: 16px; padding: 12px 13px; }
.act-note-hint {
  margin-bottom: 7px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.act-note-box input {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 11px 12px;
  font-family: inherit;
  font-size: 16px;   /* iOS zooms below 16 */
  color: var(--ink);
  outline: none;
}
.act-commit {
  display: block;
  width: 100%;
  margin-top: 16px;
  border: none;
  border-radius: 18px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 16.5px;
  font-weight: 700;
  padding: 16px;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(180,100,63,.24);
}
.act-commit:active { transform: translateY(1px); }
.act-world {
  margin-top: 9px;
  text-align: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ── The world panel ──────────────────────────────────────────────────────

   From the Claude Design project "World Panel". It used to be a card floating
   in the middle of the screen whose inside scrolled while the page behind it
   did not — and the seam between the two was exactly where a thumb lands. It
   is a sheet now: one grab band that moves the whole thing, a clock pinned
   above, and a single scrolling region under it.

   The clock is the reason you opened this, so it is the size of the reason.
   And skipping time is the most consequential press in the game, so the five
   buttons grow with what they cost you and each says what it would skip to. */

.world-scrim {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: cz-fade .2s ease both;
}
.world-sheet {
  height: 93%;
  background: var(--card);
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -14px 44px rgba(30,18,10,.2);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cz-sheetup .3s cubic-bezier(.2,.8,.3,1) both;
}
/* Dragged, not just decorative: this band moves the sheet. */
.world-grab {
  flex: none;
  padding: 9px 0 5px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.world-grab i {
  display: block;
  width: 46px; height: 5px;
  border-radius: 99px;
  background: var(--ink);
  opacity: .18;
}
/* Any sheet, while it is being pulled. The animation has to go: it fills
   forwards, and a filled animation outranks the inline transform the drag
   writes — which is why setting one appeared to do nothing at all. */
.sheet-drag, .sheet-settle { animation: none !important; }
.sheet-drag { transition: none; }
.sheet-settle { transition: transform .26s cubic-bezier(.2,.8,.3,1); }
/* A handle owns its gesture; the browser may not read it as a scroll. */
.sheet-grip { touch-action: none; cursor: grab; }
.sheet-grip:active { cursor: grabbing; }

/* ── The clock, pinned ────────────────────────────────────────────────── */

.world-sky {
  position: relative;
  flex: none;
  padding: 6px 20px 14px;
  background: linear-gradient(180deg, var(--sky-a), var(--sky-b));
  border-bottom: 1px solid var(--hair);
}
.world-x {
  position: absolute;
  top: -2px; right: 14px;
  width: 32px; height: 32px;
  border: none;
  border-radius: 50%;
  background: rgba(var(--card-rgb),.7);
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.sky-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px; }
.sky-year {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--ink-faint);
}
.sky-date { font-size: 13.5px; font-weight: 500; color: var(--ink-soft); }
.sky-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(var(--card-rgb),.6);
  color: var(--ink-soft);
}
.sky-pill.rest { background: var(--wash); color: var(--clay-deep); }

.sky-now { display: flex; align-items: flex-end; gap: 12px; }
.sky-time {
  font-size: 58px;
  line-height: .94;
  font-weight: 500;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.sky-wx { padding-bottom: 6px; display: flex; flex-direction: column; gap: 2px; }
.sky-wx-jp { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ink); }
.sky-wx-jp span:first-child { font-size: 17px; }
.sky-wx-en, .sky-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  color: var(--ink-mute);
}
.sky-wx-en { font-size: 12.5px; }
.sky-en { font-size: 13px; margin-top: 6px; }

.sky-week { display: flex; gap: 4px; margin-top: 11px; }
.sky-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 0 6px;
  border-radius: 12px;
  color: var(--ink-soft);
}
.sky-day b { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sky-day i { font-size: 10.5px; font-style: normal; opacity: .7; }
.sky-day.rest { background: rgba(var(--card-rgb),.55); color: var(--clay-deep); }
.sky-day.today { background: var(--clay); color: var(--onclay); }

/* ── The one scrolling region ─────────────────────────────────────────── */

.world-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 17px 20px calc(30px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: none;
}

.wp-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.wp-head-jp { font-size: 14px; font-weight: 500; color: var(--ink); }
.wp-head-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}
.wp-jp { font-size: 14.5px; line-height: 2.05; color: var(--ink); }
.wp-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-mute);
}

/* ── What you missed ──────────────────────────────────────────────────── */

.wp-digest {
  border: 1px solid var(--clay);
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
}
.wp-digest-head { padding: 13px 16px 11px; background: var(--wash); display: flex; flex-direction: column; gap: 2px; }
.wp-digest-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wp-digest-jp { font-size: 16px; font-weight: 700; color: var(--clay-deep); }
.wp-digest-range { font-size: 12.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.wp-digest-row {
  padding: 11px 16px 12px;
  border-top: 1px solid var(--hair);
  animation: cz-fadeup .45s both;
}
@keyframes cz-fadeup { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }
.wp-src { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.wp-dot { width: 6px; height: 6px; border-radius: 99px; }
.wp-src-jp { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }
.wp-src-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--ink-faint);
}
.wp-read {
  width: 100%;
  border: none;
  border-top: 1px solid var(--hair);
  background: transparent;
  color: var(--clay-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 11px;
  cursor: pointer;
}

/* ── You, and everyone else ───────────────────────────────────────────── */

.world-me {
  border-radius: 18px;
  background: var(--note);
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.world-me-col { flex: 1; min-width: 0; }
.world-me-tag {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--matcha);
}
.world-me .wp-jp { font-size: 16px; line-height: 1.95; }
.world-me-icon { flex: none; font-size: 26px; opacity: .65; }

.wp-faces { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wp-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 2px 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
}
.wp-face.on { border-color: var(--clay); background: var(--card2); }
.wp-face-av { position: relative; }
.wp-face-av .avatar { width: 38px; height: 38px; border-radius: 13px; font-size: 16px; }
.wp-face-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid var(--card);
}
.wp-face-name {
  font-size: 10.5px;
  color: var(--ink-soft);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-face-open {
  margin-top: 8px;
  border-radius: 14px;
  background: var(--card2);
  padding: 11px 13px;
}
.wp-face-top { display: flex; align-items: center; gap: 7px; margin-bottom: 1px; }
.wp-face-top b { font-size: 12.5px; font-weight: 500; color: var(--ink); }
.wp-face-top i { font-size: 11.5px; font-style: normal; color: var(--ink-mute); }

/* ── The town, and what you promised ──────────────────────────────────── */

.wp-town {
  border-radius: 18px;
  background: var(--card2);
  border: 1px solid var(--hair);
  padding: 12px 14px 13px;
}
.wp-town + .wp-town { margin-top: 9px; }
.wp-town-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.wp-town-title { font-size: 14px; font-weight: 500; color: var(--ink); }

.wp-plan {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 16px;
  background: var(--card2);
  padding: 11px 14px;
}
.wp-plan + .wp-plan { margin-top: 7px; }
.wp-plan-when { flex: none; text-align: center; min-width: 52px; }
.wp-plan-dm { font-size: 15px; font-weight: 500; color: var(--clay-deep); font-variant-numeric: tabular-nums; }
.wp-plan-wd { font-size: 10.5px; color: var(--ink-mute); }
.wp-plan-bar { width: 1px; align-self: stretch; background: var(--hair); }
.wp-plan-col { flex: 1; min-width: 0; }
.wp-plan-col .wp-jp { font-size: 14.5px; line-height: 1.9; }
.wp-plan-away { flex: none; font-size: 11.5px; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.wp-none {
  border-radius: 16px;
  border: 1px dashed var(--hair-strong);
  padding: 14px;
  text-align: center;
}
.wp-none-jp { font-size: 13.5px; color: var(--ink-mute); }

/* ── Moving the world forward ─────────────────────────────────────────── */

.wp-section { border-top: 1px solid var(--hair); padding-top: 16px; }
.wp-note {
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.wp-skips { display: flex; flex-direction: column; gap: 7px; }
/* Each button is bigger than the last, because each costs more. */
.wp-skip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--hair);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  padding: 9px 15px;
  cursor: pointer;
}
.wp-skip.w1 { padding: 11px 15px; border-radius: 15px; }
.wp-skip.w2 { padding: 14px 15px; border-radius: 16px; }
.wp-skip.w3 {
  padding: 16px 15px;
  border-radius: 17px;
  background: var(--card2);
  border: 1.5px solid var(--clay);
  color: var(--ink);
}
.wp-skip.w4 {
  padding: 19px 15px;
  border-radius: 18px;
  background: var(--clay);
  border-color: var(--clay-deep);
  color: var(--onclay);
  box-shadow: 0 8px 20px -12px rgba(180,100,63,.9);
}
.wp-skip:disabled { opacity: .5; cursor: default; }
.wp-skip-l { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.wp-skip-label { font-size: 14px; font-weight: 500; }
.wp-skip.w2 .wp-skip-label { font-size: 16px; font-weight: 700; }
.wp-skip.w3 .wp-skip-label { font-size: 17px; font-weight: 700; }
.wp-skip.w4 .wp-skip-label { font-size: 18px; font-weight: 700; }
.wp-skip-cap {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  opacity: .72;
}
.wp-skip-r { display: flex; align-items: center; gap: 9px; }
.wp-skip-to { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.wp-skip-time { font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wp-skip-delta { font-size: 10.5px; opacity: .7; }
.wp-skip-glyph { font-size: 17px; }

/* ── できごと ─────────────────────────────────────────────────────────── */

.wp-filters { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.wp-filter {
  padding: 6px 11px;
  border-radius: 99px;
  border: 1px solid var(--hair);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}
.wp-filter span { opacity: .6; font-variant-numeric: tabular-nums; }
.wp-filter.on { border-color: var(--clay); background: var(--wash); color: var(--clay-deep); }

.wp-days { display: flex; flex-direction: column; gap: 14px; }
.wp-day-head {
  position: sticky;
  top: -18px;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0 7px;
  background: var(--card);
}
.wp-day-jp { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.wp-day-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.wp-day-rule { flex: 1; height: 1px; background: var(--hair); }

.wp-entry { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 9px 0 10px; }
.wp-entry-when { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.wp-entry-time { font-size: 12px; font-weight: 500; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wp-entry-rail { width: 3px; flex: 1; min-height: 14px; border-radius: 99px; opacity: .55; }
.wp-entry-col { min-width: 0; }

/* ── The shared shelf ─────────────────────────────────────────────────────

   From the Claude Design project "Shared Inventory". Two views in one sheet
   rather than two stacked drawers: the shelf, and the thing you opened, with
   a way back. Nothing is ever two panels deep.

   The whole idea of the feature is that an item lives in one of two states,
   and the design makes them different objects rather than different subtitles:

   - a MEMORY fills the row, sits on its own card with a shadow, and shows two
     lines of what was written about it;
   - a PROMISE is half-width and pairs up with its neighbour, has no fill and
     an outlined edge, and ends in the verb it is waiting for — 見てみる,
     行ってみる, 食べてみる. It is something to go and do, so it reads as an
     invitation rather than as a row with data missing. */

.shelf-scrim {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: cz-fade .2s ease both;
}
.shelf-sheet {
  height: 92%;
  background: var(--card);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -14px 40px rgba(30,18,10,.18);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cz-sheetup .28s cubic-bezier(.2,.8,.3,1) both;
}
.shelf-grip {
  flex: none;
  align-self: stretch;
  padding: 11px 0 7px;
  display: flex;
  justify-content: center;
}
.shelf-grip::before {
  content: '';
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--hair-strong);
}
.shelf-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cz-shelfin .3s ease both;
}
@keyframes cz-shelfin { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

.shelf-head { flex: none; display: flex; align-items: flex-start; gap: 10px; padding: 12px 18px; }
.shelf-head-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.shelf-title { font-size: 16.5px; font-weight: 700; letter-spacing: .01em; color: var(--ink); }
.shelf-sub {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.shelf-head-side { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 2px; }
.shelf-count { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .06em; }
.shelf-x {
  width: 28px; height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--card2);
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

.shelf-filters {
  flex: none;
  display: flex;
  gap: 6px;
  padding: 0 18px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.shelf-chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  cursor: pointer;
}
.shelf-chip b { font-size: 12.5px; font-weight: 500; }
.shelf-chip i { font-family: 'Newsreader', serif; font-size: 11px; font-style: normal; }
.shelf-chip.on { background: var(--clay); border-color: var(--clay); color: var(--onclay); }

.shelf-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 18px calc(26px + var(--safe-bottom));
  scrollbar-width: none;
}
.shelf-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }

/* ── One thing on the shelf ───────────────────────────────────────────── */

.thing {
  box-sizing: border-box;
  border: 1px solid transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.thing-top { display: flex; align-items: flex-start; gap: 9px; }
.thing-badge {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.thing-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.thing-title { font-weight: 700; line-height: 1.35; letter-spacing: .01em; color: var(--ink); }
.thing-gloss {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-mute);
}
.thing-new {
  flex: none;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--onclay);
  background: var(--clay);
  border-radius: 7px;
  padding: 2px 6px;
}

/* A memory: the whole row, filled, with the first of what was written. */
.thing.memory {
  flex: 0 0 100%;
  border-radius: 20px;
  padding: 14px 15px 15px;
  background: var(--card2);
  box-shadow: 0 2px 0 var(--hair), 0 8px 20px rgba(40,26,16,.05);
}
.thing.memory .thing-title { font-size: 18px; }
.thing-excerpt {
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* A promise: half the row, unfilled, ending in the verb it is waiting for. */
.thing.promise {
  flex: 0 0 calc(50% - 5px);
  border-radius: 18px;
  padding: 13px 13px 14px;
  background: transparent;
  border-color: var(--hair-strong);
}
.thing.promise .thing-title { font-size: 17px; }
.thing-wait {
  margin-top: 12px;
  padding-top: 9px;
  border-top: 1px dashed var(--hair-strong);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.thing-wait-jp { font-size: 12.5px; font-weight: 500; }
.thing-wait-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ── Nothing on it yet ────────────────────────────────────────────────── */

.shelf-empty {
  padding: 34px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}
.shelf-ghosts { display: flex; gap: 8px; align-items: flex-end; }
.shelf-ghosts i { display: block; width: 52px; border-radius: 14px; border: 1px dashed var(--hair-strong); }
.shelf-ghosts i:nth-child(1) { height: 62px; }
.shelf-ghosts i:nth-child(2) { height: 82px; }
.shelf-ghosts i:nth-child(3) { height: 48px; }
.shelf-empty-jp { font-size: 17px; font-weight: 700; color: var(--ink); }
.shelf-empty-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
}
.shelf-say { max-width: 274px; display: flex; flex-direction: column; gap: 12px; }
.shelf-say-jp { font-size: 14px; line-height: 2; color: var(--ink-soft); }
.shelf-say-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-mute);
}
.shelf-rule-en {
  font-family: 'Newsreader', serif;
  font-size: 11.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── The thing you opened ─────────────────────────────────────────────── */

.shelf-back-row { flex: none; padding: 10px 18px 4px; }
.shelf-back {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.shelf-back-arrow { font-size: 15px; }
.shelf-back em { font-family: 'Newsreader', serif; font-size: 12px; color: var(--ink-faint); }

.read-head { display: flex; flex-direction: column; gap: 9px; padding: 8px 4px 0; }
.read-kind { display: flex; align-items: center; gap: 8px; }
.read-kind .thing-badge { width: 22px; height: 22px; border-radius: 8px; font-size: 11.5px; }
.read-kind-jp { font-size: 12px; font-weight: 500; }
.read-kind-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
}
.read-title { font-size: 28px; font-weight: 700; line-height: 1.3; letter-spacing: .02em; color: var(--ink); }
.read-gloss {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15.5px;
  color: var(--ink-mute);
}
.read-state { font-family: 'Newsreader', serif; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); }
.read-rule { height: 1px; background: var(--hair); margin: 20px 4px; }
.read-wrap { padding: 0 4px; display: flex; flex-direction: column; gap: 18px; }

/* Ruby needs air a normal paragraph does not, and this is the longest stretch
   of Japanese anywhere in the app. */
.read-jp { font-size: 17px; line-height: 2.6; letter-spacing: .015em; color: var(--ink); }

.read-tr-row { display: flex; align-items: center; gap: 10px; }
.read-tr {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  cursor: pointer;
}
.read-tr b { font-size: 13.5px; font-weight: 500; }
.read-tr em { font-family: 'Newsreader', serif; font-size: 12.5px; }
.read-tr.on { background: var(--clay); border-color: var(--clay); color: var(--onclay); }
.read-tr-line { flex: 1; height: 1px; background: var(--hair); }

.read-en {
  background: var(--note);
  border-radius: 16px;
  padding: 16px 17px;
  font-family: 'Newsreader', serif;
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--ink-soft);
  animation: cz-shelfin .26s ease both;
}
.read-when { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.read-when-jp { font-size: 12.5px; color: var(--ink-faint); }
.read-when-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
}

/* A promise, opened: a page with nothing written on it yet. */
.read-blank {
  border: 1px dashed var(--hair-strong);
  border-radius: 20px;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.read-blank-lines { display: flex; flex-direction: column; gap: 5px; width: 100%; align-items: center; }
.read-blank-lines i { display: block; height: 1px; background: var(--hair); }
.read-blank-lines i:nth-child(1) { width: 74%; }
.read-blank-lines i:nth-child(2) { width: 56%; }
.read-blank-lines i:nth-child(3) { width: 66%; }
.read-wait-jp { font-size: 20px; font-weight: 700; }
.read-wait-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
}
.read-promise-jp { font-size: 15px; line-height: 2.1; color: var(--ink-soft); }
.read-promise-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.75;
  color: var(--ink-mute);
}

/* ── The contacts tab ─────────────────────────────────────────────────────

   From the Claude Design project "Contacts Tab". A tab called 連絡先 used to
   open a drawer that showed only pending requests — never your contacts. It
   is a screen now, and the spine of it is the list of people you know.

   Pending business floats above that list as loose cards rather than as a
   section: it is the only thing on the screen that needs you, so it sits
   highest, but it never becomes the whole tab. And each of the four kinds of
   pending is a different feeling, so each gets a different shape — a live
   card with a pulse, a handed card with a stamp, a recessed strip that is out
   of your hands, and a resolved row with one way forward. */

.contacts-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.contacts-head-col { min-width: 0; }
.contacts-count { flex: none; text-align: right; }
.contacts-count-jp { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.contacts-count-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-faint);
}

.people-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 16px 26px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  scrollbar-width: none;
}

/* Every band gets the same two-language heading. */
.band-head { display: flex; align-items: baseline; gap: 8px; padding: 0 4px 8px; }
.band-jp { font-size: 12.5px; font-weight: 500; color: var(--ink-soft); }
.band-jp.due { color: var(--clay-deep); }
.band-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* ── Waiting on you ───────────────────────────────────────────────────── */

.due-band { display: flex; flex-direction: column; gap: 10px; }
.due-band .band-head { padding-bottom: 0; }

/* A stranger is asking. It has a pulse, because it is live. */
.due-in {
  position: relative;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 20px;
  padding: 15px 15px 13px;
  box-shadow: 0 3px 14px rgba(66,48,31,.1);
}
.due-pulse {
  position: absolute;
  top: 14px; right: 15px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--clay);
  animation: cz-breathe-op 2.4s ease-in-out infinite;
}
@keyframes cz-breathe-op { 0%,100% { opacity: .55 } 50% { opacity: 1 } }

/* An introduction, handed to you. It is a piece of paper, so it sits crooked. */
.due-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 14px 15px 12px;
  box-shadow: 0 2px 0 rgba(var(--sand-rgb),.1), 0 10px 22px rgba(66,48,31,.1);
  transform: rotate(-.7deg);
}
.due-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--hair-strong);
}
.due-card-tag {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.due-stamp {
  font-size: 11px;
  color: var(--clay);
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  padding: 2px 9px;
}

/* Each pending shape carries its own avatar size — a live request is the
   biggest thing on the screen, a request you sent is barely there. */
.avatar.due-av { width: 48px; height: 48px; border-radius: 16px; font-size: 20px; }
.avatar.due-av-sm { width: 44px; height: 44px; font-size: 18px; }
.avatar.due-av-mid { width: 40px; height: 40px; font-size: 17px; }
.people-band { display: block; }

.due-row { display: flex; gap: 12px; padding-top: 11px; }
.due-in .due-row { padding-top: 0; }
.due-col { min-width: 0; flex: 1; }
.due-name { font-size: 16px; font-weight: 500; color: var(--ink); }
.due-name span { font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }
.due-via { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.due-quote { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.due-quote-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mute);
  margin-top: 2px;
}

.due-acts { display: flex; gap: 8px; align-items: center; margin-top: 13px; }
.due-yes {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 13px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
}
.due-yes em, .due-ask em {
  font-family: 'Newsreader', serif;
  font-size: 11.5px;
  opacity: .85;
}
.due-ask {
  flex: 1;
  padding: 9px;
  border: 1.5px solid var(--clay);
  border-radius: 12px;
  background: transparent;
  color: var(--clay-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.due-no {
  padding: 10px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 13px;
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.due-card .due-no { border: none; color: var(--ink-faint); font-size: 12.5px; padding: 9px 12px; }

/* You asked, and it has gone quiet. Recessed, because it is out of your hands. */
.due-wait {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  border-radius: 15px;
  background: rgba(var(--sand-rgb),.1);
}
.due-wait-av {
  flex: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px dashed var(--hair-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--ink-mute);
}
.due-wait-col { flex: 1; min-width: 0; }
.due-wait-name { font-size: 13.5px; color: var(--ink-soft); }
.due-wait-name span { font-size: 11.5px; color: var(--ink-faint); }
.due-trail {
  height: 3px;
  border-radius: 2px;
  margin: 6px 0 4px;
  opacity: .5;
  background-image: linear-gradient(90deg, var(--ink-faint) 0 6px, transparent 6px 11px);
  background-size: 11px 3px;
  animation: cz-trail 1.6s linear infinite;
}
@keyframes cz-trail { from { background-position: 0 0 } to { background-position: 22px 0 } }
.due-wait-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.due-nudge {
  flex: none;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

/* They said yes. Resolved, and there is exactly one thing to do about it. */
.due-yes-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 17px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-left: 3px solid var(--matcha);
  box-shadow: 0 2px 10px rgba(66,48,31,.1);
}
.due-yes-col { flex: 1; min-width: 0; }
.due-yes-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.due-yes-name span { font-size: 12px; font-weight: 400; color: var(--ink-faint); }
.due-yes-sub { font-size: 12px; color: var(--matcha); margin-top: 1px; }
.due-go {
  flex: none;
  padding: 9px 13px;
  border: none;
  border-radius: 12px;
  background: var(--matcha);
  color: #FBFCF7;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

/* ── The directory ────────────────────────────────────────────────────── */

.people-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(66,48,31,.1);
  overflow: hidden;
}
.person {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 11px 14px;
  border: none;
  border-top: 1px solid var(--hair);
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.person:first-child { border-top-color: transparent; }
.person.joined { background: rgba(var(--sand-rgb),.1); animation: cz-joinin .6s ease-out both; }
@keyframes cz-joinin {
  0% { opacity: 0; transform: translateY(-14px) scale(.97) }
  60% { opacity: 1 }
  100% { opacity: 1; transform: none }
}

.person-av { position: relative; flex: none; }
/* The rounded square is the directory's own shape — a chat list uses circles,
   so a glance tells you which list you are looking at. */
.person-av .avatar { width: 44px; height: 44px; border-radius: 15px; font-size: 19px; }
.person-dot {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2.5px solid var(--card);
}
.person-dot.pr-online { background: var(--matcha); }
.person-dot.pr-busy { background: var(--clay); }
.person-dot.pr-sleep { background: var(--sand); }

.person-col { flex: 1; min-width: 0; }
.person-top { display: flex; align-items: baseline; gap: 6px; }
.person-jp { font-size: 15.5px; font-weight: 500; color: var(--ink); }
.person-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
}
.person-rel { font-size: 12px; color: var(--ink-soft); margin-top: 1px; }
.person-rel em { font-family: 'Newsreader', serif; color: var(--ink-mute); }
.person-act { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.person-act em { font-family: 'Newsreader', serif; color: var(--ink-faint); }

.person-bond { flex: none; text-align: right; }
.person-bond-n { font-size: 12.5px; color: var(--clay); letter-spacing: .02em; }
.person-bond-bar {
  width: 34px; height: 3px;
  border-radius: 2px;
  background: rgba(var(--sand-rgb),.1);
  margin-top: 4px;
  overflow: hidden;
}
.person-bond-bar i { display: block; height: 3px; border-radius: 2px; background: var(--clay); opacity: .65; }

.group-row { display: flex; gap: 12px; align-items: center; width: 100%; padding: 11px 14px; border: none; border-top: 1px solid var(--hair); background: transparent; font-family: inherit; text-align: left; cursor: pointer; }
.group-row:first-child { border-top-color: transparent; }
.group-icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 13px;
  background: rgba(var(--sand-rgb),.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.group-col { flex: 1; min-width: 0; }
.group-name { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.group-sub { font-size: 11.5px; color: var(--ink-mute); }
.group-sub em { font-family: 'Newsreader', serif; color: var(--ink-faint); }
.group-n { flex: none; font-size: 11.5px; color: var(--ink-faint); }

/* Nothing pending: said once, quietly, and not instead of the list. */
.people-quiet {
  border: 1px dashed var(--hair-strong);
  border-radius: 16px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.people-quiet-jp { font-size: 12.5px; color: var(--ink-mute); line-height: 1.5; }
.people-quiet-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ── The town ─────────────────────────────────────────────────────────── */

.town-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 16px;
  background: rgba(var(--sand-rgb),.1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.town-bar-jp { font-size: 14px; color: var(--ink-mute); }
.town-bar-en {
  flex: 1;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-faint);
}
.town-chev { font-size: 12px; color: var(--ink-faint); }
.town-open { padding: 10px 4px 0; }
.town-note {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-faint);
  padding: 0 10px 8px;
}
.town-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 8px; }
.town-one {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  border-radius: 11px;
  border: 1px solid var(--hair);
  min-width: 0;
}
.town-initial {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 8px;
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--ink-faint);
}
.town-col { min-width: 0; }
.town-jp, .town-en { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.town-jp { font-size: 12px; color: var(--ink-soft); }
.town-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 10.5px;
  color: var(--ink-faint);
}

/* ── One person, close up ─────────────────────────────────────────────── */

.who-scrim {
  position: absolute;
  inset: 0;
  z-index: 72;
  background: var(--scrim);
  display: flex;
  align-items: flex-end;
  animation: cz-fade .2s ease both;
}
.who-grip {
  padding: 10px 0 4px;
  display: flex;
  justify-content: center;
}
.who-grip::before {
  content: '';
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--hair-strong);
}
.who-sheet {
  width: 100%;
  background: var(--paper);
  border-radius: 26px 26px 0 0;
  padding: 20px 20px calc(24px + var(--safe-bottom));
  box-shadow: 0 -10px 40px rgba(66,48,31,.18);
  animation: cz-sheetup .28s ease-out both;
}
.who-top { display: flex; gap: 14px; align-items: center; }
.who-top .avatar { width: 64px; height: 64px; border-radius: 21px; font-size: 27px; }
.who-title { font-size: 20px; font-weight: 500; color: var(--ink); }
.who-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-mute);
}
.who-rel { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; }

.who-bond {
  margin-top: 16px;
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 17px;
  padding: 14px;
}
.who-bond-top { display: flex; justify-content: space-between; align-items: baseline; }
.who-bond-label { font-size: 12.5px; color: var(--ink-soft); }
.who-bond-label em { font-family: 'Newsreader', serif; color: var(--ink-mute); }
.who-bond-n { font-size: 14px; color: var(--clay); }
.who-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(var(--sand-rgb),.1);
  margin-top: 9px;
  overflow: hidden;
}
.who-bar i { display: block; height: 6px; border-radius: 3px; background: var(--clay); }
.who-note { font-size: 12px; color: var(--ink-mute); margin-top: 11px; line-height: 1.55; }
.who-note-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-faint);
  margin-top: 2px;
}
.who-acts { display: flex; gap: 8px; margin-top: 14px; }
.who-send {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 14px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.who-close {
  padding: 12px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ── The phrase desk ──────────────────────────────────────────────────────

   From the Claude Design project "Phrase Desk". It is not a drawer any more:
   it is a sheet that comes up over the chat with its own composer under it,
   and it is the one screen in the app built to teach rather than to play.

   The shape of the answer is the point. The Japanese line you are meant to
   send is the hero and sits in a raised card; the English under it is
   confirmation; the note is a matcha wash, because it is the only thing here
   written for a learner and it must not read as fine print; the alternatives
   are outlined rather than raised, so they are visibly a lower tier. */

.phrase-scrim {
  position: absolute;
  inset: 0;
  z-index: 70;
  background: var(--scrim);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: cz-fade .2s ease both;
}
@keyframes cz-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes cz-sheetup {
  from { transform: translateY(26px); opacity: .4 }
  to   { transform: translateY(0); opacity: 1 }
}

.phrase-sheet {
  height: 92%;
  background: var(--paper);
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -18px 44px -26px rgba(40,26,16,.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: cz-sheetup .28s cubic-bezier(.2,.8,.3,1) both;
}
.phrase-grip {
  flex: none;
  align-self: stretch;
  padding: 12px 0 8px;
  display: flex;
  justify-content: center;
}
.phrase-grip::before {
  content: '';
  width: 38px; height: 4px;
  border-radius: 2px;
  background: var(--hair-strong);
}

.phrase-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 18px 14px;
  border-bottom: 1px solid var(--hair);
}
.phrase-head-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.phrase-head-top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}
.phrase-book { display: flex; color: var(--clay); }
.phrase-book svg { width: 17px; height: 17px; }
.phrase-sub {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-mute);
}
.phrase-clear {
  flex: none;
  align-self: center;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--hair-strong);
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.phrase-clear:active { background: var(--wash); }
.phrase-clear i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--ink-mute);
}

.phrase-x {
  flex: none;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid var(--hair);
  color: var(--ink-mute);
  font-size: 15px;
  cursor: pointer;
}

.phrase-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: none;
}

/* Small caps label, used above every band. */
.phrase-eyebrow {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ── What you asked before ────────────────────────────────────────────── */

.phrase-past { display: flex; flex-direction: column; gap: 7px; }
.phrase-past-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--card2);
  border: 1px solid var(--hair);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.phrase-past-jp {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phrase-ago {
  flex: none;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faint);
}

/* ── Nothing asked yet ────────────────────────────────────────────────── */

.phrase-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
  text-align: center;
}
.phrase-blank-icon {
  width: 56px; height: 56px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--hair);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clay);
}
.phrase-blank-icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.phrase-blank-say {
  max-width: 270px;
  font-family: 'Newsreader', serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.phrase-blank-say em { color: var(--ink); }
.phrase-seeds { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 300px; }
.phrase-seed {
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px dashed var(--hair-strong);
  background: transparent;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-mute);
  cursor: pointer;
}

/* ── While it thinks ──────────────────────────────────────────────────── */

.phrase-think { display: flex; flex-direction: column; gap: 14px; }
.phrase-card {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 22px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 18px 44px -30px rgba(66,48,31,.7);
}
.phrase-quote {
  font-family: 'Newsreader', serif;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
}

/* Four kana breathing out of step, and a pen crossing the page under them. */
.phrase-scan {
  position: relative;
  height: 44px;
  border-radius: 14px;
  background: var(--card2);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.phrase-scan span {
  font-size: 20px;
  color: var(--ink-mute);
  animation: cz-breathe-ink 1.9s ease-in-out infinite;
}
.phrase-scan span:nth-child(2) { animation-delay: .3s }
.phrase-scan span:nth-child(3) { animation-delay: .6s }
.phrase-scan span:nth-child(4) { animation-delay: .9s }
.phrase-pen {
  position: absolute;
  bottom: 9px; left: 0;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--clay);
  animation: cz-penscan 3.6s ease-in-out infinite;
}
@keyframes cz-breathe-ink { 0%,100% { opacity: .18 } 50% { opacity: .62 } }
@keyframes cz-penscan { 0% { left: 2% } 50% { left: 88% } 100% { left: 2% } }

.phrase-waitline { display: flex; align-items: baseline; justify-content: space-between; }
.phrase-waitline b { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.phrase-elapsed {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faint);
}

.phrase-aside {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--note);
  font-family: 'Newsreader', serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.phrase-aside .phrase-book { flex: none; color: var(--matcha); }
.phrase-swap {
  padding-left: 4px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--clay-deep);
}

/* ── It did not come back ─────────────────────────────────────────────── */

.phrase-rule { height: 1px; background: var(--hair); }
.phrase-fail-jp { font-size: 15px; font-weight: 500; color: var(--ink); }
.phrase-fail-en {
  font-family: 'Newsreader', serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ── The answer ───────────────────────────────────────────────────────── */

.phrase-asked {
  display: flex;
  align-items: center;
  gap: 9px;
}
.phrase-asked-q {
  flex: 1;
  min-width: 0;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phrase-main {
  background: var(--card);
  border: 1px solid var(--hair);
  border-radius: 24px;
  padding: 22px 18px 16px;
  box-shadow: 0 18px 44px -30px rgba(66,48,31,.7);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Ruby needs vertical air a normal line does not. */
.phrase-hero {
  font-size: 23px;
  font-weight: 500;
  line-height: 2.15;
  letter-spacing: .01em;
  color: var(--ink);
}
.phrase-kana {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-mute);
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card2);
}
.phrase-gloss {
  font-family: 'Newsreader', serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.phrase-acts { display: flex; align-items: center; gap: 8px; padding-top: 4px; }
.phrase-use {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 999px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.phrase-2nd {
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.phrase-2nd.on {
  border-color: var(--matcha);
  background: var(--note);
  color: var(--matcha);
}

/* The one thing here written for a learner. */
.phrase-why {
  background: var(--note);
  border-radius: 20px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.phrase-why-top { display: flex; align-items: center; gap: 8px; }
.phrase-why-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--matcha); }
.phrase-why-tag {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--matcha);
}
.phrase-why-body {
  font-family: 'Newsreader', serif;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ink);
}
/* Japanese quoted inside English prose keeps its own face. */
.phrase-why-body jp, .phrase-when-body jp {
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .91em;
  font-weight: 500;
  font-style: normal;
}

.phrase-alts { display: flex; flex-direction: column; gap: 10px; }
.phrase-alt {
  border: 1px solid var(--hair);
  border-radius: 18px;
  padding: 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.phrase-alt-jp {
  font-size: 18px;
  font-weight: 400;
  line-height: 2.1;
  color: var(--ink-soft);
}
.phrase-alt-kana { font-size: 14px; line-height: 1.6; color: var(--ink-mute); }
.phrase-when-body {
  font-family: 'Newsreader', serif;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.phrase-alt-acts { display: flex; gap: 7px; }
.phrase-alt-use {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--clay);
  background: transparent;
  color: var(--clay-deep);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.phrase-alt-copy {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ── The composer, pinned under the sheet ─────────────────────────────── */

.phrase-dock {
  flex: none;
  border-top: 1px solid var(--hair);
  background: var(--card);
  padding: 12px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.phrase-once {
  padding-left: 4px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-faint);
}
.phrase-dock-row { display: flex; align-items: flex-end; gap: 10px; }
.phrase-dock textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  min-height: 44px;
  max-height: 96px;
  border-radius: 22px;
  border: 1px solid var(--hair-strong);
  background: var(--paper);
  color: var(--ink);
  padding: 12px 16px;
  font-family: 'Newsreader', serif;
  font-size: 16px;   /* iOS zooms below 16 */
  line-height: 1.45;
  outline: none;
  box-sizing: border-box;
}
.phrase-dock textarea::placeholder { color: var(--ink-faint); }
.phrase-go {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 22px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
/* While one is in flight, asking again replaces it — so the button stops
   looking like the primary thing to do. */
.phrase-go.swap {
  background: transparent;
  border-color: var(--hair-strong);
  color: var(--clay-deep);
}
.phrase-go:disabled { opacity: .45; cursor: default; }

/* ── The book in the chat header ──────────────────────────────────────── */

.ask-btn { position: relative; }
.ask-btn.working, .ask-btn.ready {
  background: var(--note);
  border-color: rgba(139,158,116,.42);
  color: var(--clay-deep);
}
.ask-btn.working::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.6px dashed var(--clay);
  opacity: .75;
  animation: cz-ringspin 4.4s linear infinite;
}
@keyframes cz-ringspin { to { transform: rotate(360deg) } }

/* Taking one back. It sits where the phrase pill sits, and only when there
   is something on the stack for this conversation. */
/* Nothing is drawn until a thumb asks. The only tell is the message dipping
   under the finger, which is feedback for the hold rather than a label. */
.row-me { position: relative; }
.bubble-me.held { transform: scale(.97); opacity: .8; transition: transform .12s ease, opacity .12s ease; }

.msg-menu {
  /* Positioned from the bubble's own rectangle by placeMenu(), so it does not
     depend on an ancestor being position:relative — .ai-stack was not, and the
     menu vanished above the top of the frame. */
  position: fixed;
  z-index: 60;
  padding: 4px;
  border-radius: 14px;
  background: rgba(var(--card-rgb),.98);
  border: 1px solid var(--hair-strong);
  box-shadow: 0 20px 46px -22px rgba(66,48,31,.75);
  animation: cz-rise .14s ease both;
}
.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px 9px 11px;
  border: none;
  border-radius: 11px;
  background: transparent;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.msg-menu-item:active { background: var(--wash); }
.msg-menu-item.off { opacity: .5; }
.msg-menu-item.off i { color: var(--ink-mute); }
.msg-menu-item i { font-style: normal; font-size: 14px; color: var(--clay); }
.msg-menu-item .jp { font-size: 14px; }
.msg-menu-item .en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.undo-arrow { font-size: 13px; color: var(--clay); }
.undo-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}
.undo-ask {
  flex: none;
  margin: 6px 14px 0;
  padding: 13px 15px 12px;
  border-radius: 18px;
  background: rgba(var(--card-rgb),.98);
  border: 1px solid var(--clay);
  box-shadow: 0 18px 44px -24px rgba(66,48,31,.7);
  animation: cz-rise .2s ease both;
}
.undo-ask-top { display: flex; align-items: center; gap: 8px; }
.undo-ask-jp { font-size: 13px; font-weight: 500; color: var(--clay-deep); }
.undo-ask .undo-en { margin-left: auto; }
.undo-what {
  margin-top: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--card2);
  font-size: 14px;
  line-height: 1.9;
  color: var(--ink);
}
.undo-note {
  margin-top: 7px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-mute);
}
.undo-acts { display: flex; gap: 8px; margin-top: 11px; }
.undo-no {
  padding: 10px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 13px;
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.undo-yes {
  flex: 1;
  padding: 10px;
  border: none;
  border-radius: 13px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.undo-yes:disabled { opacity: .55; }

/* And the way back to an answer that landed while you were reading. */
.phrase-ready {
  flex: none;
  align-self: center;
  margin: 6px auto 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(var(--card-rgb),.96);
  border: 1px solid var(--hair-strong);
  box-shadow: 0 18px 44px -26px rgba(66,48,31,.7);
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  animation: cz-rise .22s ease both;
}
.phrase-ready-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }

/* ── The seam left in the history ─────────────────────────────────────── */

.seam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  margin: 18px 8px 4px;
}
.seam-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  letter-spacing: .13em;
  color: var(--sand);
}
.seam-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--clay);
  flex: none;
}
.seam.apart .seam-dot { background: transparent; border: 1px solid var(--ink-faint); }
.seam-tag {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 9.5px;
  font-variant: small-caps;
  letter-spacing: .26em;
  color: var(--ink-faint);
}

/* ── Arriving and leaving ─────────────────────────────────────────────────

   The one place a colour of its own is right: a moment, not a mode. */

.curtain {
  position: absolute;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .9s ease;
}
.curtain.show { opacity: 1; transition: opacity .45s ease; pointer-events: auto; }
.curtain.light.show { transition: opacity .65s ease; }
.curtain.dark { background: radial-gradient(120% 100% at 50% 20%, #2E2013, #1F1509); }
.curtain.light { background: linear-gradient(rgba(251,244,233,.98), rgba(241,228,210,.98)); }

.curtain-card {
  position: absolute;
  text-align: center;
  padding: 0 28px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .65s ease, transform .65s ease;
}
.curtain-card.in { opacity: 1; transform: none; }
.curtain-card.out { opacity: 0; transform: translateY(-9px); transition: opacity .5s ease, transform .5s ease; }

.arrive-jp {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .1em;
  color: #F5EBDD;
}
.arrive-en {
  margin-top: 6px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: rgba(226,196,164,.65);
}
.depart-jp {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .12em;
  color: #4A3526;
}
.depart-en {
  margin-top: 4px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: .06em;
  color: #9A7A5F;
}

@media (prefers-reduced-motion: reduce) {
  .curtain-card, .curtain-card.out { transform: none; }
  .curtain, .curtain.show { transition-duration: .3s; }
}

/* ── Starting a group ─────────────────────────────────────────────────── */

.group-new .group-icon { background: var(--card2); color: var(--clay); font-weight: 700; }
.group-new .group-name { color: var(--clay-deep); }

.gm-scrim {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: var(--scrim);
  display: flex;
  align-items: flex-end;
  animation: cz-fade .18s ease both;
}
.gm-sheet {
  width: 100%;
  max-height: 82%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px max(18px, var(--safe-bottom));
  border-radius: 24px 24px 0 0;
  background: var(--card);
  box-shadow: 0 -18px 50px rgba(66,48,31,.22);
  animation: cz-sheetup .26s cubic-bezier(.2,.8,.3,1) both;
}
.gm-head { font-size: 16px; font-weight: 700; color: var(--ink); }
.gm-sub {
  margin-top: -6px;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-mute);
}
.gm-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scrollbar-width: none;
}
.gm-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border: 1px solid var(--hair);
  border-radius: 15px;
  background: transparent;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
}
.gm-row.on { border-color: var(--clay); background: var(--wash); }
.gm-name { flex: 1; font-size: 15px; color: var(--ink); }
.gm-tick { width: 16px; color: var(--clay); font-weight: 700; }
.gm-sheet input {
  flex: none;
  padding: 11px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 15px;
  background: var(--card2);
  outline: none;
  font-family: inherit;
  color: var(--ink);
}
.gm-acts { flex: none; display: flex; gap: 9px; }
.gm-no {
  padding: 12px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: 15px;
  background: transparent;
  color: var(--ink-mute);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.gm-yes {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 15px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.gm-yes:disabled { opacity: .45; }

/* ── Doing something on your own ──────────────────────────────────────── */

.solo-go {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 14px;
  padding: 13px 15px;
  border: 1px solid var(--hair-strong);
  border-radius: 17px;
  background: var(--card);
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.solo-go:active { background: var(--wash); }
.solo-go span { font-size: 15px; }
.solo-go i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}

.solo-spans { display: flex; flex-wrap: wrap; gap: 7px; }
.solo-span {
  padding: 8px 14px;
  border: 1px solid var(--hair-strong);
  border-radius: 999px;
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.solo-span.on { background: var(--clay); border-color: var(--clay); color: var(--onclay); }

/* ── Your own details ─────────────────────────────────────────────────── */

.settings-me { border-bottom: none; padding-bottom: 4px; }

.me-fields { display: flex; flex-direction: column; gap: 9px; padding: 0 2px 4px; }
.me-row { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.me-row label {
  font-size: 12px;
  color: var(--ink-mute);
  padding-left: 3px;
}
.me-row textarea {
  resize: none;
  line-height: 1.65;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1px solid var(--hair-strong);
  border-radius: 13px;
  background: var(--card);
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.me-row textarea:focus { border-color: var(--clay); }

.me-apply {
  align-self: flex-start;
  margin: 4px 0 8px 3px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 16px;
  border: none;
  border-radius: 13px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  animation: cz-rise .18s ease both;
}
.me-apply:disabled { opacity: .55; }
.me-apply i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  opacity: .85;
}

/* ── Taking a line apart ──────────────────────────────────────────────── */

.ex-wait { padding: 30px 4px; text-align: center; font-size: 14px; color: var(--ink-mute); }

.ex-said {
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--card2);
  border: 1px solid var(--hair);
}
.ex-said-jp { font-size: 17px; line-height: 2.1; color: var(--ink); }
.ex-said-who { margin-top: 6px; font-size: 11.5px; color: var(--ink-mute); }

.ex-cap { display: flex; align-items: baseline; gap: 9px; margin: 20px 2px 8px; }
.ex-cap-jp { font-size: 13px; font-weight: 700; color: var(--clay-deep); }
.ex-cap-en {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}

.ex-gist { font-size: 15px; line-height: 1.75; color: var(--ink); }
.ex-literal {
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--wash);
  font-family: 'Newsreader', serif;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.ex-pieces { display: flex; flex-direction: column; gap: 2px; }
.ex-piece { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.ex-piece:last-child { border-bottom: none; }
.ex-piece-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.ex-piece-jp { font-size: 16px; color: var(--ink); }
.ex-piece-kana { font-size: 12px; color: var(--ink-mute); }
.ex-piece-role {
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--card2);
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--clay-deep);
}
.ex-piece-en { margin-top: 5px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

.ex-gram {
  margin-bottom: 9px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hair-strong);
  background: var(--card);
}
.ex-gram-point { font-size: 15px; color: var(--clay-deep); }
.ex-gram-en { margin-top: 5px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

.ex-note { font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }

/* ── The door ─────────────────────────────────────────────────────────── */

.gate {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--paper);
}
.gate-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 26px 22px 22px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--hair);
  box-shadow: 0 20px 50px -28px rgba(74,53,38,.5);
  animation: cz-rise .3s ease both;
}
.gate-title { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.gate-sub { margin-bottom: 8px; font-size: 12.5px; color: var(--ink-mute); }
.gate-card input {
  padding: 13px 15px;
  border: 1px solid var(--hair-strong);
  border-radius: 14px;
  background: var(--card2);
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  outline: none;
}
.gate-card input:focus { border-color: var(--clay); }
.gate-err { font-size: 12.5px; line-height: 1.5; color: var(--clay-deep); }
.gate-go {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  padding: 13px;
  border: none;
  border-radius: 14px;
  background: var(--clay);
  color: var(--onclay);
  font-family: inherit;
  font-size: 15.5px;
  cursor: pointer;
}
.gate-go:disabled { opacity: .6; }
.gate-go i, .gate-swap i, .gate-note i {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  opacity: .85;
}
.gate-swap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  padding: 8px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}
.gate-note {
  margin-top: 6px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-mute);
}
.gate-note i { display: block; }

.settings-out {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: 12px;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
}
.settings-out:active { background: var(--wash); }