/* style.css — Tratoh PWA, space-specific layer on top of the ported M3 system
 * (m3e.css = tokens + components + nav; lg.css = Liquid Glass / navpill).
 * Only what m3e.css does NOT already provide lives here: the fixed chat-app
 * viewport, inline-SVG icon sizing, message bubbles, the composer, empty states. */

/* ---- fixed-viewport app shell (override m3e's scrolling-document .app) ---- */
:root { --tr-navbar-h: 70px; }
html, body { height: 100%; }
body { margin: 0; }
.app {
  display: flex; flex-direction: column;
  height: 100dvh; max-width: 1080px; margin: 0 auto; padding-bottom: 0;
}
.appmain { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 16px; }
/* leave room for the fixed bottom navbar (compact only; rail is on the side >=600) */
@media (max-width: 599.98px) {
  .appmain { padding-bottom: calc(var(--tr-navbar-h) + env(safe-area-inset-bottom)); }
}
@media (min-width: 600px) { .app { padding-left: var(--rail-w, 80px); } }

/* the active view fills the main area; settings scrolls itself, chat scrolls its list */
.appmain > .view.active { flex: 1 1 auto; min-height: 0; }
#view-settings.active { display: block; overflow-y: auto; padding-bottom: 24px; }
/* story view does NOT scroll itself: map region (fixed) + boundary + story region (scrolls) */
#view-story.active { display: flex; flex-direction: column; min-height: 0; padding: 8px 0 0; }
#view-turn.active, #view-chat.active { display: flex; flex-direction: column; }

/* ---- story page (read-only projection of the turn ledger) ---- */
/* map region: fixed height (draggable via --story-map-h), does NOT scroll (pan/zoom canvas in Phase 2) */
.story-map-region { flex: 0 0 auto; height: var(--story-map-h, 38vh); min-height: 80px; overflow: hidden; }
.story-map-region .story-map { height: 100%; margin: 0; box-sizing: border-box; justify-content: center; }
/* boundary: draggable grip (vertical resize) + left-right scrolling legend strip */
.story-boundary { flex: 0 0 auto; }
.story-split { height: 12px; cursor: row-resize; display: flex; align-items: center; justify-content: center; touch-action: none; }
.story-split::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--md-sys-color-outline-variant); }
.story-split:focus-visible { outline: none; }
.story-split:focus-visible::before { background: var(--md-sys-color-primary); }
.map-legend { display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; padding: 4px 2px; scrollbar-width: thin; }
.map-legend:empty { display: none; }
/* story region: fills the rest, content scrolls, seg pinned at the bottom by flex order */
.story-region { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.story-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.story-tabs { flex: 0 0 auto; align-self: center; margin-top: 8px; }
.story-tab.hidden { display: none; }
.story-empty { color: var(--md-sys-color-on-surface-variant); font-size: 14px; margin: 4px 0; }
.story-sec { border: 1px solid var(--md-sys-color-outline-variant); border-radius: 14px; background: var(--md-sys-color-surface-container-low); margin-bottom: 8px; overflow: hidden; }
.story-sec > summary { padding: 12px 14px; cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 8px; }
.story-sec > summary::-webkit-details-marker { display: none; }
.story-sec > summary::before { content: "▸"; color: var(--md-sys-color-on-surface-variant); transition: transform .15s; }
.story-sec[open] > summary::before { transform: rotate(90deg); }
.story-sec > .md { padding: 0 14px 12px; }
.todo-group { margin-bottom: 14px; }
.todo-label { font-size: .95rem; margin: 0 0 6px; color: var(--md-sys-color-on-surface); }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.todo { display: flex; align-items: flex-start; gap: 9px; line-height: 1.5; }
.todo-box { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--md-sys-color-outline); margin-top: 2px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.todo.done { color: var(--md-sys-color-on-surface-variant); }
.todo.done .todo-txt { text-decoration: line-through; }
.todo-box.checked { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.todo-done { margin-top: 8px; }
.todo-done > summary { cursor: pointer; color: var(--md-sys-color-on-surface-variant); font-size: 13px; list-style: none; }
.todo-done > summary::-webkit-details-marker { display: none; }
.todo-done > summary::before { content: "▸ "; }
.todo-done[open] > summary::before { content: "▾ "; }
.todo-done > .todo-list { margin-top: 8px; padding-left: 4px; }
.story-map { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 16px; border: 1px dashed var(--md-sys-color-outline-variant); border-radius: 14px; }
.story-map-ico { width: 44px; height: 44px; color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.story-map .hint { max-width: 34ch; }

/* ---- pan/zoom grid map (rendered into #storyMapRegion when a map doc arrives) ---- */
.map-viewport { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; cursor: grab; background: var(--md-sys-color-surface-container-lowest); border-radius: 12px; }
.map-viewport:active { cursor: grabbing; }
.map-world { position: absolute; top: 0; left: 0; transform-origin: 0 0; will-change: transform; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.map-cell { position: absolute; box-sizing: border-box; border: 1px solid var(--md-sys-color-outline-variant); display: flex; align-items: center; justify-content: center; gap: 2px; }
.map-cell.survey-unknown { background: repeating-linear-gradient(45deg, var(--md-sys-color-surface-container) 0 4px, transparent 4px 8px); opacity: .55; }
.map-subgrid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.map-subcell { display: flex; align-items: center; justify-content: center; border: .5px solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); }
.map-cell.player-loc, .map-subcell.player-loc { border: 2px solid red; z-index: 2; }
.map-obj { color: var(--md-sys-color-on-surface); font-size: 22px; position: relative; z-index: 1; }
.cell-coord { position: absolute; top: 1px; left: 2px; font-size: 8px; line-height: 1; color: var(--md-sys-color-on-surface-variant); opacity: .45; pointer-events: none; }
.region-center { position: absolute; width: 0; height: 0; }
svg.map-regions { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; }
.region-outline { fill: color-mix(in srgb, var(--md-sys-color-primary) 8%, transparent); stroke: var(--md-sys-color-primary); stroke-width: 2; stroke-dasharray: 6 4; }
.map-label { position: absolute; transform: translate(-50%, -50%); font-size: 11px; line-height: 1.2; padding: 1px 5px; border-radius: 6px; white-space: nowrap; color: var(--md-sys-color-on-surface); background: color-mix(in srgb, var(--md-sys-color-surface) 85%, transparent); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
.map-label.region { font-weight: 700; font-size: 12px; color: var(--md-sys-color-primary); background: color-mix(in srgb, var(--md-sys-color-surface) 72%, transparent); }
.map-legend .item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 12px; color: var(--md-sys-color-on-surface-variant); }
.map-legend .item i { font-size: 15px; color: var(--md-sys-color-on-surface); }
.map-legend .item .swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--md-sys-color-outline-variant); flex: 0 0 auto; }
/* object/building names: tap the icon to toggle a box (collision-avoided, with a leader line) */
.map-obj[data-name] { cursor: pointer; }
.map-label .lbl-name { font-size: 11px; line-height: 1.25; }
.map-label .lbl-probes { font-size: 10px; line-height: 1.2; margin-top: 1px; color: var(--md-sys-color-on-surface-variant); }
svg.map-leaders { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
svg.map-leaders .leader { stroke: var(--md-sys-color-outline); stroke-width: 1.5; stroke-dasharray: 3 3; }

/* ---- appbar extras ---- */
.brand-ico { width: 24px; height: 24px; color: var(--md-sys-color-primary); flex: 0 0 auto; }
.who { color: var(--md-sys-color-on-surface-variant); font-size: .8rem; white-space: nowrap; }

/* ---- inline-SVG icons (we don't ship Font Awesome) ---- */
.ico { width: 1.4em; height: 1.4em; display: inline-block; vertical-align: middle; fill: currentColor; flex: 0 0 auto; }
.ind .ico { width: 24px; height: 24px; }
.sec-head .ico { width: 22px; height: 22px; color: var(--md-sys-color-primary); }
.sec-head .sec-caret { color: var(--md-sys-color-on-surface-variant); }

/* ---- chat contact switcher (one 1:1 sub-channel per contact: M.A.C. + other players) ---- */
.contact-rail { flex: 0 0 auto; display: flex; gap: 8px; overflow-x: auto; padding: 10px 0 8px; scrollbar-width: none; }
.contact-rail::-webkit-scrollbar { display: none; }
.contact-rail:empty { display: none; }
.contact-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--r-full); border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface-variant); font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.contact-chip.active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.contact-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--md-sys-color-error); flex: 0 0 auto; }

/* ---- chat ---- */
.chat { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 0 6px; }
.msg { max-width: 84%; padding: 9px 13px; border-radius: 16px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.msg.gm { align-self: flex-start; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); border-bottom-right-radius: 4px; }
.msg .nm { display: block; font-size: 11px; opacity: .7; margin-bottom: 2px; }
/* ---- chat-style avatar+name row (turn channel: a msg-row wraps an avatar badge + the .msg bubble) ---- */
.msg-row { display: flex; gap: 8px; max-width: 92%; }
.msg-row.me { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.gm { align-self: flex-start; }
.msg-row .msg { align-self: auto; max-width: 100%; }
.msg-avatar { flex: 0 0 auto; width: 30px; height: 30px; margin-bottom: 2px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; }
.msg-row.gm .msg-avatar { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); }
.msg-row.me .msg-avatar { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
/* per-turn divider (persisted ␞ turn-end meta), rendered in-stream between turns */
.turn-divider { align-self: stretch; display: flex; align-items: center; gap: 12px; margin: 6px 2px; color: var(--md-sys-color-on-surface-variant); font-size: 12px; letter-spacing: .04em; }
.turn-divider::before, .turn-divider::after { content: ""; flex: 1 1 auto; border-top: 1px solid color-mix(in srgb, var(--md-sys-color-outline) 50%, transparent); }
.turn-divider span { flex: 0 0 auto; white-space: nowrap; }
/* per-message status note (own messages: 已送出 → 已讀 → 已排隊列) */
.msg .msg-status { display: block; margin-top: 3px; font-size: 10px; opacity: .6; text-align: right; }
/* ---- rendered markdown inside a message bubble ---- */
.md { white-space: normal; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md p { margin: 0 0 .5em; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: .5em 0 .3em; line-height: 1.25; font-weight: 700; }
.md h1 { font-size: 1.3em; } .md h2 { font-size: 1.2em; } .md h3 { font-size: 1.1em; }
.md h4, .md h5, .md h6 { font-size: 1em; }
.md ul, .md ol { margin: .3em 0; padding-left: 1.4em; }
.md li { margin: .15em 0; }
.md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; padding: .05em .35em; border-radius: 5px; background: color-mix(in srgb, currentColor 12%, transparent); }
.md blockquote { margin: .4em 0; padding: .1em 0 .1em .8em; border-left: 3px solid color-mix(in srgb, currentColor 35%, transparent); opacity: .9; }
.md hr { border: 0; border-top: 1px solid color-mix(in srgb, currentColor 25%, transparent); margin: .6em 0; }
.md strong { font-weight: 700; }
.md a { color: inherit; text-decoration: underline; }
.chan-status { color: var(--md-sys-color-on-surface-variant); font-size: 13px; min-height: 18px; margin: 0 0 4px; }

/* ---- composer ---- */
.composer { flex: 0 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 8px 0 12px; }
.composer textarea { flex: 1 1 auto; max-height: 120px; resize: none; }
.composer .send { padding: 0; width: 48px; height: 48px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.composer .send .ico { width: 22px; height: 22px; }

/* ---- empty / not-yet-joined state ---- */
.empty { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 24px; }
.empty-ico { width: 48px; height: 48px; color: var(--md-sys-color-on-surface-variant); opacity: .7; }
.empty .t-title { margin: 6px 0 0; }
.empty .hint { max-width: 30ch; }

/* ---- composer "more actions" menu (left of the input, both channels) ---- */
.composer-menu-wrap { position: relative; flex: 0 0 auto; }
.composer-menu-toggle { padding: 0; width: 48px; height: 48px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; }
.composer-menu-toggle .ico { width: 22px; height: 22px; }
.composer-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 190px; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: var(--r-lg); background: var(--md-sys-color-surface-container-high); box-shadow: 0 8px 24px -8px rgb(0 0 0 / .35); }
.composer-menu.hidden { display: none; }
.composer-menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: none; border-radius: 10px; background: none; color: var(--md-sys-color-on-surface); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.composer-menu-item:hover, .composer-menu-item:focus-visible { background: var(--md-sys-color-surface-container-highest); }
.composer-menu-item .ico { width: 20px; height: 20px; flex: 0 0 auto; color: var(--md-sys-color-on-surface-variant); }

/* ---- dice ---- */
.dice-panel { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 14px; margin-bottom: 8px; border-radius: var(--r-lg); background: var(--md-sys-color-surface-container-high); }
.dice-fields { display: flex; flex-direction: column; gap: 12px; }
.dice-row { display: flex; gap: 16px; flex-wrap: wrap; }
.dice-row label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 600; color: var(--md-sys-color-on-surface-variant); }
.dice-row input { width: 76px; }
.dice-stats .chip { cursor: pointer; }
/* one-tap roll button M.A.C. embeds in a request */
.roll-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 8px; }
.roll-cta .ico { width: 18px; height: 18px; }

/* ---- update-available banner (service-worker update prompt) ---- */
.update-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--tr-navbar-h) + env(safe-area-inset-bottom) + 12px); z-index: 60;
  display: flex; align-items: center; gap: 14px; max-width: 92vw;
  padding: 8px 8px 8px 18px; border-radius: var(--r-full);
  background: var(--md-sys-color-on-surface); color: var(--md-sys-color-surface);
  box-shadow: 0 8px 28px -10px rgb(0 0 0 / .5);
}
.update-bar .m3-btn { padding: 8px 18px; }
@media (min-width: 600px) { .update-bar { bottom: 24px; } }

/* ---- settings odds and ends ---- */
.status { color: var(--md-sys-color-on-surface-variant); font-size: 13px; min-height: 18px; margin: 8px 0 0; }
.dev summary { cursor: pointer; }
.dev .field { margin-top: 10px; margin-bottom: 10px; }
.seed-hex { color: var(--md-sys-color-on-surface-variant); font-weight: 600; }

/* ---- identity / avatar picker (settings) ---- */
.avatar-preview { display: flex; align-items: center; gap: 10px; margin: 10px 0 14px; }
.avatar-preview-badge { width: 44px; height: 44px; font-size: 20px; }
.avatar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 8px; margin-top: 12px; }
.avatar-opt {
  width: 48px; height: 48px; border-radius: 14px; font-size: 19px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--md-sys-color-outline-variant); background: var(--md-sys-color-surface-container);
  color: var(--md-sys-color-on-surface-variant);
}
.avatar-opt[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }