/*
 * dialog-pop.css — 住人との会話・注文箱ダイアログ(#resident-dialog、
 * hud.js's showDialog()/hideDialog())をポップ版へ上書きするスキンレイヤー。
 * PART2(docs/feedback-2026-09-18.md §4): residents.js/焼き台ダイアログが
 * 使う #resident-dialog はDOM構造・JS APIとも変更せず、市場と同じ --pop-*
 * トークン(src/pop-tokens.css)で見た目だけ差し替える(market-pop.css と
 * 同じ「スキンレイヤー」方針)。style.css より後に読み込むこと。
 *
 * 対象はこのダイアログだけ — 他のダーク/グラス調UI(ポーズ画面など)には
 * 触れない。
 */

#resident-dialog {
  background: rgba(10, 60, 80, 0.28);
}

#resident-dialog-panel {
  background: var(--pop-cream);
  color: var(--pop-ink);
  font-family: var(--pop-font-body);
  border: var(--pop-border) solid var(--pop-ink);
  border-radius: var(--pop-radius-lg);
  box-shadow: 0 8px 0 rgba(20, 18, 14, 0.45);
  backdrop-filter: none;
  padding: var(--pop-space-5);
  /* §no-scroll(2026-09-19 §設計3): panel height hugs its content — no
     scrollbar, ever (docs/no-scroll-2026-09-19.md's global rule: nothing but
     the market scrolls). */
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.touch #resident-dialog-panel { backdrop-filter: none; max-height: 88vh; }

/* §no-scroll §3: a needs list and/or ≥2 buttons (or §設計4's chip grid)
   need more room than the original single-column 400px card — widen it.
   Plain single-button/no-needs/no-chips dialogs (most of main.js's 焼き台
   placeholder toasts) keep the original narrow width untouched. */
#resident-dialog.two-col #resident-dialog-panel,
#resident-dialog.has-chips #resident-dialog-panel {
  width: min(600px, 92vw);
}

/* -- body: left (name tab already in the header above + speech text) /
   right (needs rows + chips + buttons, stacked) — a single column by
   default (original stacked look), switched to 2 columns via hud.js's
   showDialog() toggling #resident-dialog's own .two-col class. -- */
/* §fix(no-scroll): none of these get `min-height:0` — that's the standard
   trick to let a flex item shrink below its content's auto-min-size, which
   is exactly what we DON'T want here (see #resident-dialog-chips' comment):
   letting natural content height propagate up means any unavoidable
   overflow is clipped once, at the outermost #resident-dialog-panel, instead
   of silently collapsing an interior box first. */
#resident-dialog-body {
  display: flex;
  flex-direction: column;
  gap: var(--pop-space-4);
}
#resident-dialog-left,
#resident-dialog-right {
  display: flex;
  flex-direction: column;
  gap: var(--pop-space-3);
  min-width: 0;
}
#resident-dialog.two-col #resident-dialog-body {
  flex-direction: row;
  align-items: stretch;
}
#resident-dialog.two-col #resident-dialog-left {
  flex: 1 1 auto;
}
#resident-dialog.two-col #resident-dialog-right {
  flex: 0 0 220px;
  width: 220px;
  border-left: var(--pop-border-thin) solid rgba(35, 32, 28, 0.18);
  padding-left: var(--pop-space-4);
}
/* §fix(review item1 follow-up): the 220px-fixed right column above was sized
   for a handful of short "have/count" need lines — fine for text, but a
   chip grid (main.js's 焼き台, up to 8 chips) needs actual horizontal room
   or its columns squeeze under the 44px touch floor. When chips are present,
   flip which side gets the fixed width: the speech text (always short here —
   "焼く魚を選んでください。" and friends) becomes the narrow column instead,
   and the chip grid gets whatever's left. `.has-chips` alone (no `.two-col`)
   never matches this — that combination no longer exists now that
   showDialog() always adds `.two-col` whenever `.has-chips` is set (see its
   own comment) — but the compound selector is kept explicit rather than
   relying on that invariant. */
#resident-dialog.two-col.has-chips #resident-dialog-left {
  flex: 0 0 160px;
  width: 160px;
}
#resident-dialog.two-col.has-chips #resident-dialog-right {
  flex: 1 1 auto;
  width: auto;
}

#resident-dialog-header {
  align-items: center;
  margin-bottom: var(--pop-space-4);
}
#resident-dialog-heading { gap: var(--pop-space-2); }
/* §UI.md/§4: 名前は「黄色いタブ」— ピル状の背景つきラベル。 */
#resident-dialog-name {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 3px 12px;
  font-family: var(--pop-font-display);
  font-weight: 800;
  font-size: var(--pop-fs-name);
  color: var(--pop-ink);
  background: var(--pop-yellow);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: 999px;
  box-shadow: 0 2px 0 var(--pop-ink);
}
#resident-dialog-title {
  font-size: var(--pop-fs-meta);
  font-weight: 800;
  color: #a34a00;
}
#resident-dialog-close {
  color: var(--pop-ink);
  background: var(--pop-coral);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 3px 0 var(--pop-ink);
  padding: 6px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
#resident-dialog-close:hover { color: var(--pop-ink); filter: brightness(1.05); }
#resident-dialog-close:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pop-ink); }
/* §fix(review item9): the 32px desktop floor above is too small a touch
   target (WCAG 2.5.5 wants >=44px) — same reasoning as orderbox.css's
   body.touch .ob-chip rule. */
body.touch #resident-dialog-close { min-width: 44px; min-height: 44px; }

#resident-dialog-text {
  color: var(--pop-ink);
  font-size: var(--pop-fs-name);
  line-height: 1.7;
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-md);
  padding: var(--pop-space-4);
  margin-bottom: var(--pop-space-4);
  /* §no-scroll §3: "text can wrap, max ~5 lines" — a hard clamp so a very
     long line (residents.js's longest step text) can never grow the panel
     past its ≤88vh cap; hud.js's showDialog() also adds .is-long past ~70
     chars to shrink the font a touch so more of it is actually legible
     before the clamp kicks in. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
  white-space: normal;
}
#resident-dialog-text.is-long {
  font-size: calc(var(--pop-fs-name) - 1px);
  line-height: 1.5;
}

/* §fix(no-scroll): an empty needs/chips/buttons list used to still reserve
   a flex gap + margin-bottom (an invisible slot with nothing in it) — at the
   tightest viewports (667×375) that wasted space was enough to push real
   content (the chip grid's 2nd row) below the panel's ≤88vh budget. Drop the
   slot entirely when there's nothing to show. */
#resident-dialog-needs:empty,
#resident-dialog-chips:empty,
#resident-dialog-buttons:empty {
  display: none;
}

#resident-dialog-needs {
  gap: var(--pop-space-2);
  margin-bottom: var(--pop-space-4);
  /* §fix(no-scroll): NOT overflow:hidden — see #resident-dialog-chips'
     comment below, same reasoning. */
}
#resident-dialog-needs li {
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  color: var(--pop-ink);
  font-size: var(--pop-fs-name);
  padding: var(--pop-space-2) var(--pop-space-3);
}
#resident-dialog-needs li.need-met {
  color: #2f7d3a;
  border-color: #2f7d3a;
  background: #eaf7ec;
}
#resident-dialog-needs .need-count { color: var(--pop-muted); }
#resident-dialog-needs li.need-met .need-count { color: #2f7d3a; }

/* -- §設計4(main.js's 焼き台ダイアログ、hud.js's showDialog() `chips` field):
   grillable-fish chip grid — 4 columns x 2 rows on phones, up to 5-6
   columns on desktop (below). -- */
#resident-dialog-chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pop-space-2);
  margin-bottom: var(--pop-space-3);
  /* §fix(no-scroll, 2026-09-19): NOT overflow:hidden — a flex item's
     automatic minimum size (the floor flexbox won't shrink it past even
     under flex-shrink:1) collapses to 0 once `overflow` is anything but
     `visible` (CSS Flexbox §4.5). With overflow:hidden here, the tightest
     viewport (667×375) shrank this grid item well below its 2-row content
     height under only ~1px of parent pressure, silently CLIPPING the
     2nd chip row — invisible content instead of the intended "shrink to
     fit, never scroll". Leaving overflow visible keeps that auto-min-size
     floor, so #resident-dialog-panel's own overflow:hidden (the outermost,
     last-resort backstop) is what clips if content still doesn't fit,
     rather than an arbitrary interior box. */
  overflow: visible;
}
.resident-dialog-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  padding: 6px 4px;
  font-family: var(--pop-font-body);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--pop-ink);
  background: var(--pop-paper);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 3px 0 var(--pop-ink);
  cursor: pointer;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.resident-dialog-chip:not(:disabled):hover { filter: brightness(1.05); }
.resident-dialog-chip:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--pop-ink); }
.resident-dialog-chip:disabled { opacity: 0.45; cursor: default; filter: none; }
.resident-dialog-chip-icon svg { width: 18px; height: 18px; }
.resident-dialog-chip-label {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.resident-dialog-chip-count { color: #a34a00; font-variant-numeric: tabular-nums; }

/* §fix(no-scroll): NOT overflow:hidden — same auto-min-size reasoning as
   #resident-dialog-chips above (a 44px-tall button was getting squeezed to
   ~27px and clipped instead of the panel just clipping as a last resort). */
#resident-dialog-buttons { gap: var(--pop-space-3); overflow: visible; }
.resident-dialog-btn {
  font-family: var(--pop-font-display);
  font-weight: 800;
  background: var(--pop-yellow);
  color: var(--pop-ink);
  border: var(--pop-border-thin) solid var(--pop-ink);
  border-radius: var(--pop-radius-sm);
  box-shadow: 0 4px 0 var(--pop-ink);
  font-size: var(--pop-fs-btn);
  padding: 10px 18px;
  min-height: 44px;
  transition: transform 0.06s, box-shadow 0.06s, filter 0.12s;
}
.resident-dialog-btn:not(:disabled):hover { filter: brightness(1.05); background: var(--pop-yellow); }
.resident-dialog-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pop-ink); }
.resident-dialog-btn:disabled { opacity: 0.5; filter: none; box-shadow: 0 4px 0 var(--pop-ink); }
.resident-dialog-btn.secondary {
  background: var(--pop-cream);
  color: var(--pop-ink);
}
.resident-dialog-btn.secondary:not(:disabled):hover { background: var(--pop-cream); }

/* ---------------------------------------------------------------------------
 * touch / narrow profile — same two-condition gate as pop-tokens.css/
 * market-pop.css/backpack-pop.css (a narrow WINDOW, or an actual touch
 * device in landscape). Duplicated rule bodies per that convention.
 * ------------------------------------------------------------------------ */
@media (max-width: 700px) {
  #resident-dialog-panel { padding: var(--pop-space-3); max-height: 88vh; }
  #resident-dialog.two-col #resident-dialog-panel,
  #resident-dialog.has-chips #resident-dialog-panel { width: min(480px, 94vw); }
  #resident-dialog.two-col #resident-dialog-right { flex-basis: 150px; width: 150px; padding-left: var(--pop-space-3); }
  /* §fix(review item1 follow-up): see the non-compact rule's own comment —
     a chip dialog needs its narrow/wide sides flipped from the needs-only
     150px right column above, or 4-8 chips get squeezed under 44px wide. */
  #resident-dialog.two-col.has-chips #resident-dialog-left { flex-basis: 110px; width: 110px; }
  #resident-dialog.two-col.has-chips #resident-dialog-right { flex-basis: auto; width: auto; }
  /* §fix(no-scroll): tighter gaps/margins to reclaim vertical room for the
     ≥44px-tall chips/buttons that can't themselves shrink (touch a11y floor,
     see the chip/button rules' own min-height). */
  #resident-dialog-header { margin-bottom: var(--pop-space-2); }
  #resident-dialog-body { gap: var(--pop-space-2); }
  #resident-dialog-left, #resident-dialog-right { gap: var(--pop-space-2); }
  #resident-dialog-text { padding: var(--pop-space-2) var(--pop-space-3); font-size: 12.5px; line-height: 1.4; margin-bottom: 0; }
  #resident-dialog-text.is-long { font-size: 11.5px; }
  #resident-dialog-needs { margin-bottom: 0; }
  #resident-dialog-needs li { font-size: 11.5px; padding: 5px 8px; }
  #resident-dialog-chips { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
  .resident-dialog-chip { font-size: 9.5px; min-height: 44px; }
  .resident-dialog-btn { font-size: 12px; padding: 8px 14px; min-height: 44px; }
}
body.touch {
  @media (max-height: 480px) {
    #resident-dialog-panel { padding: var(--pop-space-3); max-height: 88vh; }
    #resident-dialog.two-col #resident-dialog-panel,
    #resident-dialog.has-chips #resident-dialog-panel { width: min(480px, 94vw); }
    #resident-dialog.two-col #resident-dialog-right { flex-basis: 150px; width: 150px; padding-left: var(--pop-space-3); }
    /* §fix(review item1 follow-up): same flip as the max-width:700px branch —
       this is the branch that actually covers 667×375/844×390 (touch, short
       height rather than narrow width). */
    #resident-dialog.two-col.has-chips #resident-dialog-left { flex-basis: 110px; width: 110px; }
    #resident-dialog.two-col.has-chips #resident-dialog-right { flex-basis: auto; width: auto; }
    #resident-dialog-header { margin-bottom: var(--pop-space-2); }
    #resident-dialog-body { gap: var(--pop-space-2); }
    #resident-dialog-left, #resident-dialog-right { gap: var(--pop-space-2); }
    #resident-dialog-text { padding: var(--pop-space-2) var(--pop-space-3); font-size: 12.5px; line-height: 1.4; margin-bottom: 0; }
    #resident-dialog-text.is-long { font-size: 11.5px; }
    #resident-dialog-needs { margin-bottom: 0; }
    #resident-dialog-needs li { font-size: 11.5px; padding: 5px 8px; }
    #resident-dialog-chips { grid-template-columns: repeat(4, 1fr); margin-bottom: 0; }
    .resident-dialog-chip { font-size: 9.5px; min-height: 44px; }
    .resident-dialog-btn { font-size: 12px; padding: 8px 14px; min-height: 44px; }
  }
}

@media (prefers-reduced-motion: reduce) {
  #resident-dialog *, #resident-dialog *::before, #resident-dialog *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}