/* 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(250, 243, 234, .88);
  --hair:         rgba(168, 132, 106, .16);
  --hair-strong:  rgba(168, 132, 106, .3);
  --card:         #FFFCF6;
  --card-hair:    rgba(168, 132, 106, .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);
}

* { 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;
}

body {
  background: var(--paper);
  font-family: 'Zen Maru Gothic', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* dvh tracks the mobile URL bar and on-screen keyboard; vh is the fallback. */
  height: 100vh;
  height: 100dvh;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

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 {
  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: #F7EFE4;
  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%;
  background: linear-gradient(160deg, #E6C9A8, #C89B76);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B4326;
  font-weight: 700;
  flex: none;
}
.avatar-lg {
  width: 40px; height: 40px;
  font-size: 17px;
  box-shadow: inset 0 -2px 4px rgba(107,67,38,.18);
}
.avatar-sm {
  width: 26px; height: 26px;
  font-size: 11px;
  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;
  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: #F3E7D6; color: #6B4326; }

/* ── 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(232,214,190,.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: rgba(139,158,116,.13);
  font-family: 'Newsreader', serif;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  color: #5D6B4C;
  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: #F3E7D6; color: #6B4326; }
.pill.on { background: #F0E0CB; color: #6B4326; border-color: rgba(168,132,106,.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(255,252,246,.72);
  border: 1px dashed rgba(168,132,106,.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 }

.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(168,132,106,.28);
  background: rgba(255,252,246,.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 {
  flex: none;
  min-width: 0;
  padding: 6px 14px calc(10px + var(--safe-bottom));
  display: flex;
  align-items: flex-end;
  gap: 9px;
  background: rgba(250,243,234,.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(168,132,106,.14);
}
.field {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid rgba(168,132,106,.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(255,252,246,.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(255,252,246,.75); }
.contact-avatar { width: 46px; height: 46px; font-size: 18px; }
.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: #F3E7D6; }
.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 11px 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--hair-strong);
  background: rgba(255,252,246,.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);
  transition: all .3s;
}
.clock-chip:hover { background: #FFFCF6; color: #6B4326; }
.clock-chip.night {
  background: rgba(74,60,48,.9);
  border-color: rgba(230,201,168,.35);
  color: #E8D6BE;
}
.clock-icon { display: flex; align-items: center; }
.clock-chip .clock-icon { color: #D89A4E; }
.clock-chip.night .clock-icon { 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; }

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

.tabbar {
  flex: none;
  display: flex;
  padding: 6px 10px calc(8px + var(--safe-bottom));
  background: rgba(250,243,234,.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 {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 13px;
  border-radius: 14px;
  background: rgba(232,214,190,.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(255,252,246,.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: #F3E7D6; color: #6B4326; }

/* ── 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;
}
.world-panel {
  width: min(360px, 100%);
  background: var(--card);
  border: 1px solid var(--card-hair);
  border-radius: 20px;
  box-shadow: 0 14px 40px rgba(74,53,38,.3);
  overflow: hidden;
}
.world-head {
  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);
}
.world-clock-big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 22px 16px 14px;
  font-family: 'Newsreader', serif;
  font-size: 19px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.world-icon { display: flex; color: #D89A4E; }
.world-icon svg { width: 20px; height: 20px; }
.world-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  padding: 0 16px 14px;
}
.world-actions .pill { font-size: 12.5px; padding: 7px 13px; }
.world-note {
  padding: 0 20px 18px;
  text-align: center;
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
  line-height: 1.6;
}

/* ── 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;
}
.world-plans-title {
  font-family: 'Newsreader', serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
}
.world-plan {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink);
  flex-wrap: wrap;
}
.world-plan-when {
  font-family: 'Newsreader', serif;
  font-size: 11px;
  color: var(--clay-deep);
  white-space: nowrap;
}
.world-plan-who { font-weight: 700; color: var(--ink-strong); flex: none; }
.world-plan-title { color: var(--ink-soft); }

/* 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;
}
.prof-body { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.prof-top { display: flex; align-items: center; gap: 13px; }
.prof-avatar { width: 54px; height: 54px; font-size: 22px; }
.prof-name { font-size: 17px; font-weight: 700; color: var(--ink-strong); }
.prof-presence { font-size: 11.5px; color: var(--ink-mute); font-family: 'Newsreader', serif; margin-top: 2px; }
.prof-section { display: flex; flex-direction: column; gap: 6px; }
.prof-sec-title {
  font-family: 'Newsreader', serif;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sand);
}
.prof-row { display: flex; gap: 10px; font-size: 13px; line-height: 1.6; }
.prof-k { flex: none; width: 76px; color: var(--ink-mute); }
.prof-v { color: var(--ink); }
.bond-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(168,132,106,.18);
  overflow: hidden;
}
.bond-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #D8A24E, #C87A54);
  transition: width .5s ease;
}
.bond-label { font-size: 12px; color: var(--ink-soft); }

/* ── 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-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 11px;
  border: none;
  border-radius: 13px;
  background: rgba(232,214,190,.35);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background .15s;
}
.inv-item:hover { background: #F3E7D6; }
.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; }
.item-jp { font-size: 14.5px; line-height: 2; color: var(--ink); white-space: pre-wrap; }
.item-en {
  padding: 10px 13px;
  border-radius: 13px;
  background: rgba(139,158,116,.13);
  font-family: 'Newsreader', serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
  color: #5D6B4C;
  white-space: pre-wrap;
}

.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-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.who-status { white-space: nowrap; }
.who-status .label { 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; }
.field input { 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; }
.act-min {
  font-family: 'Newsreader', serif;
  font-weight: 500;
  font-size: 10.5px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(216,154,78,.25);
  color: #A66A28;
}

/* 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-row { flex-wrap: wrap; }
.friend-btns {
  display: flex;
  gap: 6px;
  width: 100%;
  justify-content: flex-end;
  margin-top: 6px;
}
.friend-wait {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
}