/* Pocket Chi — site stylesheet (design/EXPERIENCE.md, prototype C).
   Dark and quiet. Chi is a silhouette whose gadgets light up; her words are
   typed. Behind everything a faint neon dial turns slowly. One strong button
   per screen. */

:root {
  color-scheme: dark;
  --void: #020305;
  --ink: #e9f7fb;
  --ink-2: #cfdbe1;
  --dim: #9dacb4;
  --line: rgba(127, 142, 150, 0.18);
  --cyan: #3fe3ff;
  --cyan-soft: rgba(63, 227, 255, 0.14);
  --cyan-line: rgba(63, 227, 255, 0.55);
  --magenta: #ff4fd8;
  --danger: #ff6b82;
  --font: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.85;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}
a { color: var(--dim); text-decoration: none; transition: color 0.2s ease; }
a:hover, a:focus-visible { color: var(--ink); outline: none; }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 3px; }
button { font: inherit; }

header, footer { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px clamp(16px, 3vw, 32px); font-size: 13px; color: var(--dim); }
header nav { display: flex; align-items: center; gap: 22px; }
header nav button { background: none; border: 0; padding: 8px 0; color: var(--dim); cursor: pointer; font-size: 13px; }
header nav button:hover, header nav button:focus-visible { color: var(--ink); outline: none; }
footer { justify-content: center; flex-wrap: wrap; gap: 8px 28px; font-size: 13px; }
.brand { letter-spacing: 0.12em; }

.demo-banner {
  position: relative; z-index: 1; text-align: center; padding: 8px 16px;
  font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-2);
  background: var(--cyan-soft); border-bottom: 1px solid var(--cyan-line);
}
main { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 16px 24px; }

/* ---------- Background: a slow neon dial and a passing scan ---------- */
.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(18, 64, 84, 0.42), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(40, 18, 60, 0.35), transparent 70%),
    var(--void);
}
.sky::before { /* faint dot field, strongest around the middle */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(63, 227, 255, 0.16) 1px, transparent 1.3px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000, transparent 75%);
  mask-image: radial-gradient(ellipse 55% 50% at 50% 45%, #000, transparent 75%);
  opacity: 0.55;
}
.sky svg { position: absolute; left: 50%; top: 44%; width: min(1180px, 160vmin); height: auto; translate: -50% -50%; }
.sky .spin { transform-box: view-box; transform-origin: 50% 50%; animation: spin 150s linear infinite; }
.sky .spin.rev { animation-duration: 220s; animation-direction: reverse; }
.sky .spin.hand { animation-duration: 40s; }
.sky .pulse { animation: pulse 6s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.sky .scan {
  position: absolute; left: 0; right: 0; top: 0; height: 26vh;
  background: linear-gradient(to bottom, transparent, rgba(63, 227, 255, 0.035) 55%, rgba(63, 227, 255, 0.07) 80%, transparent);
  animation: scan 12s linear infinite;
}
@keyframes scan { from { transform: translateY(-30vh); } to { transform: translateY(130vh); } }
.sky.quiet svg { opacity: 0.8; }

/* ---------- Chi: silhouette, gadget lights, two drones on tilted orbits ---------- */
.stage { --s: min(500px, 84vw); position: relative; width: var(--s); aspect-ratio: 1; flex-shrink: 0; }
.stage.small { --s: min(320px, 66vw); }
.stage::after {
  content: ""; position: absolute; left: 15%; right: 15%; bottom: 2%; height: 18%;
  background: radial-gradient(ellipse at center, rgba(63, 227, 255, 0.12), transparent 70%);
  pointer-events: none; transition: opacity 1.2s ease;
}
.stage img { display: block; }
.stage .base { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; transition: filter 1.4s ease;
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); mask-image: linear-gradient(to bottom, #000 80%, transparent 99%); }

.glow { position: absolute; inset: 0; z-index: 2; opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 63, 208, 0.9)); animation: halo 4.2s ease-in-out infinite; }
.glow i { position: absolute; inset: 0; display: block; background: var(--magenta);
  -webkit-mask: var(--m) center / 100% 100% no-repeat; mask: var(--m) center / 100% 100% no-repeat; }
.glow.fins i { --m: url(/img/chi/g-fins.png); }
.glow.band { animation-delay: 0.35s; } .glow.band i { --m: url(/img/chi/g-band.png); }
.glow.ear { animation-delay: 0.7s; } .glow.ear i { --m: url(/img/chi/g-ear.png); }
@keyframes halo { 0%, 100% { opacity: 0; } 45%, 60% { opacity: 1; } }

.orbit { position: absolute; left: 50%; top: 52%; width: 0; height: 0; animation: depth 3.5s linear infinite alternate; animation-delay: -1.75s; }
.orbit.a { transform: rotate(-24deg); }
.orbit.b { transform: rotate(32deg); top: 44%; animation-duration: 4.6s; animation-delay: -4.3s; }
@keyframes depth { 0%, 49% { z-index: 0; } 51%, 100% { z-index: 3; } }
.ox { animation: ox 3.5s ease-in-out infinite alternate; }
.oy { animation: oy 3.5s ease-in-out infinite alternate; animation-delay: -1.75s; }
.orbit.b .ox { animation-duration: 4.6s; animation-delay: -2s; }
.orbit.b .oy { animation-duration: 4.6s; animation-delay: -4.3s; }
@keyframes ox { from { transform: translateX(calc(var(--s) * -0.36)); } to { transform: translateX(calc(var(--s) * 0.36)); } }
@keyframes oy {
  0%   { transform: translateY(calc(var(--s) * -0.09)) scale(0.5); opacity: 0.6; filter: blur(1.2px); }
  100% { transform: translateY(calc(var(--s) * 0.09)) scale(1.08); opacity: 1; filter: blur(0); }
}
.drone { position: absolute; width: calc(var(--s) * 0.14); aspect-ratio: 1; transform: translate(-50%, -50%); }
.orbit.a .drone { rotate: 24deg; }
.orbit.b .drone { rotate: -32deg; }

/* Asleep: lights low, drones parked low on each side, breathing slowly */
.stage.asleep .base { filter: brightness(0.38) saturate(0.55); }
.stage.asleep::after { opacity: 0.2; }
.stage.asleep .glow { animation: none; opacity: 0; }
.stage.asleep .orbit { animation: none; z-index: 3; transform: none; }
.stage.asleep .orbit.a { top: 72%; left: 20%; }
.stage.asleep .orbit.b { top: 74%; left: 80%; }
.stage.asleep .ox { animation: none; }
.stage.asleep .oy { animation: doze 5s ease-in-out infinite; }
.stage.asleep .orbit.b .oy { animation-delay: -2.5s; }
.stage.asleep .drone { rotate: 0deg; filter: brightness(0.45) saturate(0.4); transition: filter 1s ease; }
@keyframes doze { 0%, 100% { transform: translateY(0) scale(0.8); } 50% { transform: translateY(calc(var(--s) * 0.015)) scale(0.8); } }

/* Waking: one bright wave through the gadgets */
.stage.waking .glow { animation: flash 1.3s ease-out 1 both; }
.stage.waking .glow.band { animation-delay: 0.15s; }
.stage.waking .glow.ear { animation-delay: 0.3s; }
@keyframes flash { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Chi's words ---------- */
.say {
  margin: 8px 0 0; min-height: 2.2em; max-width: 30em;
  font-size: clamp(21px, 2.6vw, 29px); font-weight: 400; letter-spacing: 0.02em; line-height: 1.55;
  text-align: center; color: var(--ink);
  text-shadow: 0 0 18px rgba(63, 227, 255, 0.25);
  text-wrap: balance;
}
.say.hush { color: var(--dim); text-shadow: none; }
.say, .words { word-break: auto-phrase; line-break: strict; }
.ch { animation: land 0.5s ease-out both; }
@keyframes land { from { color: var(--cyan); text-shadow: 0 0 14px var(--cyan); } to { color: inherit; } }
.caret { display: inline-block; width: 2px; height: 1em; margin-left: 4px; vertical-align: -0.12em; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Actions ---------- */
.actions { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(6px); transition: opacity 0.8s ease, transform 0.8s ease; }
.actions.on { opacity: 1; transform: none; }
.go {
  font-size: 16px; font-weight: 400; letter-spacing: 0.1em; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 40px; min-height: 48px; border-radius: 999px; cursor: pointer;
  background: var(--cyan-soft); border: 1px solid var(--cyan-line);
  box-shadow: 0 0 28px rgba(63, 227, 255, 0.18), inset 0 0 18px rgba(63, 227, 255, 0.10);
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.go:hover, .go:focus-visible { color: var(--ink); background: rgba(63, 227, 255, 0.22); box-shadow: 0 0 40px rgba(63, 227, 255, 0.35), inset 0 0 22px rgba(63, 227, 255, 0.16); outline: none; }
.go:disabled { opacity: 0.5; cursor: default; }
.go.sm { font-size: 14px; padding: 9px 24px; min-height: 44px; letter-spacing: 0.06em; }
.ask { font-size: 14px; letter-spacing: 0.06em; color: var(--dim); background: none; border: 0; cursor: pointer; padding: 10px 8px; min-height: 44px; }
.ask:hover, .ask:focus-visible { color: var(--ink); outline: none; }
.fine { margin: 0; max-width: 28em; font-size: 12px; line-height: 1.8; color: var(--dim); text-align: center; }
.answer { margin: 4px 0 0; max-width: 28em; min-height: 1.8em; font-size: 15px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-2); text-align: center; }
.danger { color: var(--danger); background: none; border: 1px solid rgba(255, 107, 130, 0.45); border-radius: 999px; padding: 9px 22px; min-height: 44px; cursor: pointer; font-size: 14px; }
.danger:hover, .danger:focus-visible { background: rgba(255, 107, 130, 0.12); outline: none; }

/* ---------- /app dashboard (v2: left sidebar, mock C) ---------- */
main.dash { justify-content: flex-start; align-items: stretch; gap: 0; padding-top: 4px; }
/* Chi stays visible and lit online — smaller than the wake-up hero, but not
   so small the neon linework in the art disappears. */
main.dash .stage.small { --s: min(200px, 46vw); }
main.dash .stage:not(.asleep) .base { filter: drop-shadow(0 0 16px rgba(63, 227, 255, 0.3)); }
.board { width: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 0; }
.board .say { margin: 0 0 20px; text-align: center; }

.lede { display: flex; flex-direction: column; align-items: center; padding: 0 clamp(16px, 4vw, 32px); }

.shell { display: flex; align-items: flex-start; width: 100%; max-width: 1500px; margin: 0 auto; }

.sidebar { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 14px 26px; }
.navitem {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; min-height: 46px; border-radius: 10px;
  background: none; border: 0; color: var(--dim); font-size: 14.5px; text-align: left; cursor: pointer; letter-spacing: 0.02em;
}
.navitem .ic { flex-shrink: 0; width: 18px; text-align: center; font-size: 15px; }
.navitem .lbl { flex: 1 1 auto; }
.navitem .badge { flex-shrink: 0; font-size: 11px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.navitem:hover, .navitem:focus-visible { color: var(--ink); background: rgba(63, 227, 255, 0.06); outline: none; }
.navitem[aria-current="true"] {
  color: var(--ink); background: var(--cyan-soft);
  box-shadow: 0 0 18px rgba(63, 227, 255, 0.16), inset 0 0 0 1px var(--cyan-line);
}
.navitem[aria-current="true"] .badge { color: var(--cyan); border-color: var(--cyan-line); box-shadow: 0 0 8px rgba(63, 227, 255, 0.35); }

.content { flex: 1; min-width: 0; padding: 6px clamp(20px, 3vw, 40px) 80px; }
/* Sidebar is a fixed 232px; the content column takes all the rest, up to a
   readable cap — no more narrow-vs-wide split between panels. */
.panel { max-width: 1100px; }
.panel h1 { margin: 0 0 22px; font-size: 19px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink); text-shadow: 0 0 16px rgba(63, 227, 255, 0.22); }
/* The generic header/footer rule (padding, 13px dim text) would otherwise leak
   into the two panels (返事待ち, 予定) that use a <header> row; reset it here. */
.panel > header { padding: 0; margin: 0 0 22px; font-size: inherit; color: inherit; }
.panel > header h1 { margin: 0; }

.sec { display: flex; flex-direction: column; gap: 10px; }
.sec h3 { margin: 18px 0 0; font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; color: var(--dim); }
.sec > h3:first-of-type { margin-top: 2px; }
.sec .words { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); }
.sec .empty { margin: 4px 0 0; font-size: 15px; color: var(--ink-2); }
.sec .fine { margin: 2px 0 0; text-align: left; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: #3a454b; flex-shrink: 0; }
.dot.on { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dot.warn { background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }

/* A big quiet moment (0 件) gets Chi instead of an empty box. */
.empty-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 52px 16px 44px; text-align: center; }
.empty-hero img { width: 130px; height: 130px; object-fit: contain; filter: drop-shadow(0 0 26px rgba(63, 227, 255, 0.3)); opacity: 0.92; }
.empty-hero p { margin: 0; font-size: 15px; color: var(--ink-2); }
.empty-hero .act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ---------- はじめに (onboarding: what each connection unlocks) ---------- */
.onboard { margin: 0 0 22px; padding: 18px 20px; border: 1px solid var(--cyan-line); border-radius: 14px; background: var(--cyan-soft); display: flex; flex-direction: column; gap: 4px; }
.onboard h2 { margin: 0 0 4px; font-size: 13px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink); }
.onboard-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.onboard-item:first-of-type { border-top: 0; }
.onboard-item .t { flex: 1 1 260px; margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-2); }

@media (max-width: 860px) {
  .shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 4px clamp(16px, 4vw, 32px) 4px; }
  .navitem { width: auto; }
  .content { padding-top: 18px; }
}

/* ---------- 返事待ち ---------- */
.replies { list-style: none; margin: 0; padding: 0; }
.reply-item + .reply-item { border-top: 1px solid var(--line); }
/* Platform headings. The list used to run as one undifferentiated column;
   mail and chat are read differently and each has its own freshness. */
.group-head {
  display: flex; align-items: baseline; gap: 12px;
  margin: 26px 0 2px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.replies > .group-head:first-child { margin-top: 4px; }
.group-head .g-name { font-size: 12px; letter-spacing: 0.1em; color: var(--ink); }
.group-gmail .g-name { color: var(--cyan); }
.group-messenger .g-name { color: var(--magenta); }
.group-head .g-count { font-size: 12px; color: var(--dim); }
.group-head .g-when { margin-left: auto; font-size: 11.5px; color: var(--dim); }
.group-head + .reply-item { border-top: none; }
.reply-item summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 0 6px; cursor: pointer;
  list-style: none; font-size: 14.5px; color: var(--ink-2); min-height: 44px;
}
.reply-item summary::-webkit-details-marker { display: none; }
.reply-item summary::before { content: "▸ "; color: var(--dim); }
.reply-item details[open] summary::before { content: "▾ "; }
.reply-item .src { flex-shrink: 0; font-size: 11px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.reply-item .src-gmail { color: var(--cyan); border-color: var(--cyan-line); }
.reply-item .src-messenger { color: var(--magenta); border-color: rgba(255, 79, 216, 0.5); }
.reply-item .who { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.reply-item .vtag { flex-shrink: 0; font-size: 11px; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }
.reply-item .vtag-reply { color: var(--cyan); border-color: var(--cyan-line); box-shadow: 0 0 7px rgba(63, 227, 255, 0.3); }
.reply-item .when { flex-shrink: 0; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; min-width: 84px; }
.reply-item .wait { flex-shrink: 0; color: var(--dim); font-size: 12px; }
.reply-item .jump { flex-shrink: 0; font-size: 12px; color: var(--dim); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.reply-item .jump:hover { color: var(--cyan); border-color: var(--cyan-line); }
.reply-item .flag { flex-shrink: 0; font-size: 12px; color: var(--magenta); text-shadow: 0 0 8px rgba(255, 79, 216, 0.4); }
/* Always-visible teaser under the meta row — a wrap-forced full-width line
   inside the (flex, wrapping) summary, so a row can be read without opening it. */
.reply-item summary .preview-line {
  flex-basis: 100%; width: 100%; margin: 0 0 12px; padding-left: 18px;
  font-size: 15px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Open state already shows the full snippet in .reply-body .preview —
   the closed-row teaser would otherwise repeat the same line right above it. */
.reply-item details[open] .preview-line { display: none; }
.reply-body { padding: 4px 0 18px; display: flex; flex-direction: column; gap: 12px; }
.reply-body .preview, .reply-body .verdict, .reply-body .missing { margin: 0; font-size: 15px; line-height: 1.75; color: var(--ink-2); overflow-wrap: anywhere; }
.reply-body .verdict b { color: var(--ink); font-weight: 500; }
.reply-body .missing { color: var(--dim); }
.drafts { display: flex; flex-direction: column; gap: 8px; }
.draft-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 3, 5, 0.4); }
.draft-opt p { flex: 1; margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); overflow-wrap: anywhere; }
.reply-body .act, .todos li .act, .outbox-list li .act, .memories li .act { display: flex; flex-wrap: wrap; gap: 8px; }
/* この並び順の理由: collapsed by default, same drawer language as details.skip
   further down but scoped inside one reply's own body. */
.reply-body details.explain summary {
  cursor: pointer; font-size: 13px; color: var(--dim); list-style: none;
  min-height: 32px; display: flex; align-items: center;
}
.reply-body details.explain summary::-webkit-details-marker { display: none; }
.reply-body details.explain summary::before { content: "▸ "; }
.reply-body details.explain[open] summary::before { content: "▾ "; }
.explain-body { display: flex; flex-direction: column; gap: 8px; padding: 6px 0 2px 18px; }
.explain-score { margin: 0; font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.explain-why { margin: 0; font-size: 13px; color: var(--dim); }
.explain-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.explain-facts li { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.explain-facts .own-q {
  font-size: 10.5px; letter-spacing: 0.04em; color: var(--cyan); border: 1px solid var(--cyan-line);
  border-radius: 999px; padding: 1px 6px; margin-right: 6px;
}
.explain-more { margin: 0; font-size: 12px; color: var(--dim); }
/* .pending / .pending.skip / details.skip are defined once, further down. */

/* ---------- 用事 / ちーの発信: simple rows with inline actions ---------- */
.todos, .outbox-list, .memories { list-style: none; margin: 0; padding: 0; }
.todos li, .outbox-list li, .memories li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 0;
  font-size: 15px; color: var(--ink-2); border-top: 1px solid var(--line);
}
.todos li .t, .outbox-list li .t, .memories li .t { flex: 1 1 auto; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }
.todos li .w, .outbox-list li .w { flex-shrink: 0; color: var(--dim); font-size: 13px; }
.outbox-list li.failed .t { color: var(--danger); }
.memories li .k { flex-shrink: 0; font-size: 11px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); }

/* ---------- 予定 ---------- */
.range { display: flex; gap: 6px; }
.range button[aria-pressed="true"] { color: var(--ink); background: var(--cyan-soft); border-radius: 999px; }

/* ---------- ちーのこと: connections ---------- */
.conn { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.conn .dot { margin-top: 6px; }
.conn-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.conn-body .who { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.conn-body .state { margin: 0; font-size: 13.5px; color: var(--dim); }
.conn-body .act { display: flex; flex-wrap: wrap; gap: 10px; }
.capabilities { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 5px; }
.capability { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink-2); }
.capability strong { flex-shrink: 0; font-size: 12px; font-weight: 500; color: var(--dim); }
.capability.available strong { color: var(--cyan); }
.capability.missing strong { color: var(--magenta); }
.usage-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; }
.usage-dl dt { color: var(--dim); }
.usage-dl dd { margin: 0; }
.ops-diagnostics { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.ops-diagnostics h3 { margin-top: 0; }
.ops-summary { margin-top: 10px; display: grid; gap: 6px; }
.ops-summary p { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.answer { margin: 4px 0 0; max-width: 28em; min-height: 1.8em; font-size: 15px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-2); text-align: left; overflow-wrap: anywhere; }

/* ---------- Dialogs and toasts ---------- */
dialog {
  width: min(92vw, 440px); padding: 28px; color: var(--ink);
  background: rgba(8, 16, 22, 0.96); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 0 60px rgba(63, 227, 255, 0.08);
}
dialog::backdrop { background: rgba(2, 3, 5, 0.72); backdrop-filter: blur(3px); }
dialog h2 { margin: 0 0 12px; font-size: 18px; font-weight: 400; letter-spacing: 0.06em; }
dialog p { margin: 0 0 8px; color: var(--ink-2); font-size: 14px; }
dialog dl { margin: 0 0 20px; display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 14px; }
dialog dt { color: var(--dim); }
dialog dd { margin: 0; overflow-wrap: anywhere; }
dialog .row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; }
dialog .zone { padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); }
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 380px); }
.toast { padding: 10px 16px; font-size: 14px; color: var(--ink); background: rgba(8, 16, 22, 0.96); border: 1px solid var(--line); border-radius: 12px; }
.toast.ok { border-color: var(--cyan-line); }
.toast.err { border-color: rgba(255, 79, 216, 0.6); }

/* ---------- Documents (privacy, support, Slack) ---------- */
main.doc { display: block; width: min(760px, 100%); margin: 0 auto; padding: 24px 16px 72px; }
.doc h1 { margin: 12px 0 8px; font-size: clamp(26px, 3.4vw, 34px); font-weight: 400; letter-spacing: 0.08em; }
.doc h2 { margin: 44px 0 10px; font-size: 19px; font-weight: 500; letter-spacing: 0.05em; }
.doc p, .doc li, .doc td { color: var(--ink-2); }
.doc p { margin: 10px 0; }
.doc .lead { font-size: 16px; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc a { color: var(--cyan); }
.doc a:hover { color: var(--ink); }
.doc b { font-weight: 500; color: var(--ink); }
.doc code { font-size: 0.92em; color: var(--ink); }
.doc .summary { margin: 22px 0 10px; display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 14px; background: rgba(8, 16, 22, 0.6); }
.doc .summary dt { color: var(--cyan); letter-spacing: 0.1em; }
.doc .summary dd { margin: 0; color: var(--ink-2); }
.doc .table-wrap { overflow-x: auto; }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px; border-bottom: 1px solid var(--line); }
.doc th { font-weight: 400; color: var(--ink); white-space: nowrap; }

@media (max-width: 480px) {
  .say { font-size: 19px; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .glow, .ox, .oy, .orbit, .caret, .ch, .stage.asleep .oy, .sky .spin, .sky .pulse, .sky .scan { animation: none !important; }
  .sky .scan { display: none; }
  .orbit { z-index: 3; }
  .orbit.a .ox { transform: translateX(calc(var(--s) * -0.34)); }
  .orbit.b .ox { transform: translateX(calc(var(--s) * 0.34)); }
}

/* ---------- Forms ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.field { display: block; margin-top: 14px; }
.field textarea {
  width: 100%; resize: vertical; min-height: 140px; padding: 12px 14px;
  font: inherit; font-size: 15px; line-height: 1.7; color: var(--ink);
  background: rgba(2, 3, 5, 0.6); border: 1px solid var(--line); border-radius: 12px;
}
.field textarea:focus { outline: none; border-color: var(--cyan-line); box-shadow: 0 0 18px rgba(63, 227, 255, 0.15); }
.field > span:not(.visually-hidden) { display: block; margin-bottom: 6px; font-size: 13px; color: var(--dim); }
.field input[type="text"], .field input[type="number"], .field select {
  padding: 10px 14px; font: inherit; font-size: 15px; color: var(--ink);
  background: rgba(2, 3, 5, 0.6); border: 1px solid var(--line); border-radius: 12px;
}
.field input[type="text"] { width: 100%; max-width: 420px; }
.field input[type="number"] { width: 88px; }
.field input[type="text"]:focus, .field input[type="number"]:focus, .field select:focus { outline: none; border-color: var(--cyan-line); box-shadow: 0 0 18px rgba(63, 227, 255, 0.15); }
.check-row { display: flex; flex-wrap: wrap; gap: 10px 18px; }
.check-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-2); cursor: pointer; }

/* ---------- ちーに聞いてほしいこと (F2 owner questions) ---------- */
.questions { list-style: none; margin: 0; padding: 0; }
.questions li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 0;
  border-top: 1px solid var(--line);
}
.questions li input[type="text"] {
  flex: 1 1 220px; min-width: 160px; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink);
  background: rgba(2, 3, 5, 0.6); border: 1px solid var(--line); border-radius: 10px;
}
.questions li select, .questions li input[type="number"] {
  padding: 8px 10px; font: inherit; font-size: 13px; color: var(--ink);
  background: rgba(2, 3, 5, 0.6); border: 1px solid var(--line); border-radius: 10px;
}
.questions li input[type="number"] { width: 72px; }
.questions li .act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }

/* ---------- /app: pending list inside a section ---------- */
.pending { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pending li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); padding: 6px 0; border-top: 1px solid var(--line); }
.pending li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pending li span:last-child { color: var(--dim); white-space: nowrap; }

/* ---------- /app: "流したもの" (triage skip) fold-out ---------- */
details.skip { margin-top: 2px; }
details.skip summary { cursor: pointer; font-size: 13px; color: var(--dim); list-style: none; min-height: 44px; display: flex; align-items: center; }
details.skip summary::-webkit-details-marker { display: none; }
details.skip summary::before { content: "▸ "; }
details.skip[open] summary::before { content: "▾ "; }
.pending.skip li { flex-wrap: wrap; }
.pending.skip li span:last-child { white-space: normal; text-align: right; max-width: 60%; }

/* A reply draft is meant to be taken: big target to copy, editable in place. */
.draft-opt { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(63, 227, 255, 0.04); }
.draft-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.draft-tag { font-size: 13px; letter-spacing: 0.06em; color: var(--cyan); }
.draft-body {
  width: 100%; resize: vertical; padding: 14px 16px; border-radius: 10px;
  border: 1px solid rgba(63, 227, 255, 0.22); border-left: 3px solid var(--cyan);
  background: #061019; color: var(--ink);
  font-family: var(--font); font-size: 15px; line-height: 1.85;
  box-shadow: inset 0 1px 0 rgba(63, 227, 255, 0.06);
}
.draft-body:focus { outline: none; border-color: var(--cyan-line); }

/* An opened mail should feel like a drawer: set in from the list, with air
   before the next one, so the eye never mixes the two. */
.reply-item details[open] {
  display: block; margin: 10px 0 24px; padding-bottom: 6px;
  background: rgba(63, 227, 255, 0.035); border-radius: 14px;
}
/* The drawer's own inset is applied once, on the panel. Padding the summary as
   well pushed an opened row's name to the right of every closed row, and the
   body was then indented a second time on top of that. */
.reply-item details[open] { padding-left: 12px; padding-right: 12px; }
.reply-item details[open] + * { margin-top: 10px; }
.reply-body {
  margin: 4px 0 0; padding: 10px 0 20px 16px;
  border-left: 2px solid rgba(63, 227, 255, 0.3);
}