/* 客厅 Lounge — TASK_062 M1 S2. A cozy, mobile-first group-chat view over the
 * lounge channel. Warm 米黄 palette (light-only), ported from the channels room
 * so the family reads as one home. Identity chips reused verbatim; bubbles are
 * the living-room layout. Scoped under .page-lounge so nothing bleeds out.
 */

.page-lounge {
  --lo-bg:        #f5efe6;
  --lo-card:      #ede5d6;
  --lo-elevated:  #faf6ee;
  --lo-input:     #ffffff;

  --lo-ink:       #2c2620;
  --lo-ink-2:     #5a5043;
  --lo-ink-3:     #8a7f6d;
  --lo-ink-faint: #b8ad99;

  --lo-navy:      #2e4d6f;
  --lo-navy-deep: #1f3955;
  --lo-navy-soft: rgba(46, 77, 111, 0.08);
  --lo-rose:      #b8665c;
  --lo-sage:      #6b8068;
  --lo-amber:     #b98a3e;

  --lo-border:      rgba(44, 38, 32, 0.09);
  --lo-border-soft: rgba(44, 38, 32, 0.05);

  background: var(--lo-bg);
  color: var(--lo-ink);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
}

#hearts {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.page-lounge .page.lounge-page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;
  max-width: none;
}

.page-lounge .page__header {
  padding: 14px 20px;
  background: color-mix(in srgb, var(--lo-bg) 88%, transparent);
  border-bottom: 1px solid var(--lo-border-soft);
  backdrop-filter: blur(4px);
}
.page-lounge .brand { color: var(--lo-navy); }
.page-lounge .page__nav a { color: var(--lo-ink-2); }
.page-lounge .page__nav a:hover { color: var(--lo-navy); }
.page-lounge .page__nav a[aria-current="page"] { color: var(--lo-navy); font-weight: 600; }

/* === Shell === */

.lounge {
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* head · 炉边 · stream · composer */
  min-height: 0;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}
/* Explicit rows so the 炉边 strip going display:none (hidden) can never let the
 * stream reflow out of its 1fr track. */
.lounge__head     { grid-row: 1; }
.hearth           { grid-row: 2; }
.lounge__stream   { grid-row: 3; }
.lounge__composer { grid-row: 4; }

.lounge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 8px;
}
.lounge__title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lounge__emoji { font-size: 22px; line-height: 1; }
.lounge__h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--lo-navy-deep);
  margin: 0;
}
.lounge__sub { font-size: 15px; color: var(--lo-ink-3); font-weight: 400; font-style: italic; }
.lounge__status {
  font-size: 13px;
  color: var(--lo-ink-3);
  white-space: nowrap;
  padding: 3px 10px;
  border: 1px solid var(--lo-border);
  border-radius: 999px;
  background: var(--lo-elevated);
}

/* === 炉边 hearth strip (TASK_062 M1.5 S6) === */
/* A warm band between the title and the stream: a small hearth (火候) on the left,
 * then a horizontally-scrolling row of presence orbs. Colours come entirely from the
 * page's established --lo-* palette (米黄, light-only) — no new hardcoded hex. The
 * strip owns its own overflow-x so the page body never scrolls sideways. */
.hearth {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px 10px;
  margin: 0 0 2px;
  border-bottom: 1px solid var(--lo-border-soft);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.hearth[hidden] { display: none; }

/* --- the hearth (火候) --- */
.hearth__fire {
  flex: none;
  width: 42px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid var(--lo-border);
  border-radius: 7px 7px 9px 9px;
  background: var(--lo-card);
  overflow: hidden;
}
.flame {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  filter: blur(2px);
  /* --flame-core (per 火候 below) is a hue from the page palette; the highlight is
   * mixed toward --lo-elevated so nothing leaves the 米黄 system. */
  background: radial-gradient(
    circle at 50% 64%,
    color-mix(in srgb, var(--flame-core, var(--lo-amber)) 82%, var(--lo-elevated)) 0%,
    var(--flame-core, var(--lo-amber)) 50%,
    transparent 72%
  );
  opacity: var(--flame-op, 0.9);
  animation: flame-flicker var(--flick, 1.6s) var(--ease-soft) infinite;
}
.hearth__fire[data-fire="blaze"] .flame {
  --flame-core: color-mix(in srgb, var(--lo-amber) 72%, var(--lo-rose));
  --flame-op: 1; --flick: 0.9s; transform: scale(1.16);
}
.hearth__fire[data-fire="coals"] .flame {
  --flame-core: var(--lo-amber);
  --flame-op: 0.85; --flick: 1.5s; transform: scale(1);
}
.hearth__fire[data-fire="ember"] .flame {
  --flame-core: color-mix(in srgb, var(--lo-amber) 58%, var(--lo-ink-3));
  --flame-op: 0.62; --flick: 2.7s; transform: scale(0.82);
}
.hearth__fire[data-fire="cold"] .flame {
  --flame-core: var(--lo-ink-faint);
  --flame-op: 0.4; --flick: 0s; transform: scale(0.68);
  animation: none;
}
@keyframes flame-flicker {
  0%, 100% { opacity: var(--flame-op, 0.9); }
  42%      { opacity: calc(var(--flame-op, 0.9) * 0.72); }
  68%      { opacity: var(--flame-op, 0.9); }
}

/* --- fire label + note --- */
.hearth__meta {
  flex: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  min-width: 0;
}
.hearth__fire-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--lo-navy-deep);
}
.hearth__fire-label:empty { display: none; }
.hearth__note {
  font-size: 12px;
  color: var(--lo-ink-3);
  font-style: italic;
  white-space: nowrap;
}

/* --- orbs --- */
.hearth__orbs {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.hearth__orbs[hidden] { display: none; }

.orb-item {
  flex: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
.orb {
  --orb-tint: var(--lo-ink-3);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--orb-tint) 55%, transparent);
  background: var(--lo-elevated);
  font-size: 17px;
  line-height: 1;
  animation: orb-breath var(--breath, 0.85s) var(--ease-soft) infinite;
}
.orb--ambient { opacity: 0.82; }        /* 在座 — present but calmer than 围炉 */
.orb__emoji { display: block; }
.orb__badge {
  position: absolute;
  right: -5px;
  bottom: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--lo-navy);
  color: #fdfbf6;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}
.orb.is-ceo       { --orb-tint: var(--lo-rose); }
.orb.is-cto       { --orb-tint: var(--lo-navy); }
.orb.is-worker    { --orb-tint: var(--lo-sage); }
.orb.is-crso      { --orb-tint: var(--lo-amber); }
.orb.is-architect { --orb-tint: var(--lo-navy-deep); }
.orb.is-yu        { --orb-tint: var(--lo-navy-deep); }

.orb__label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  white-space: nowrap;
}
.orb__name  { font-size: 13px; font-weight: 700; color: var(--lo-ink); }
.orb__state { font-size: 11px; color: var(--lo-ink-3); }
.orb__state--attentive { color: var(--lo-rose); }   /* 围炉 — the warm one */

/* Breathing pulse: a gentle scale + glow, one cycle per --breath (60/bpm seconds).
 * A felt-presence flourish, not live telemetry (see lounge-hearth.js). */
@keyframes orb-breath {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 color-mix(in srgb, var(--orb-tint) 20%, transparent); }
  50%      { transform: scale(1.05); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--orb-tint) 28%, transparent); }
}

/* === Stream === */

.lounge__stream {
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px 20px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.lounge__state {
  text-align: center;
  color: var(--lo-ink-3);
  font-style: italic;
  padding: 40px 20px;
  line-height: 1.7;
}

.lounge-day {
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--lo-ink-3);
  margin: 18px 0 10px;
  position: relative;
}
.lounge-day::before,
.lounge-day::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 90px);
  height: 1px;
  background: var(--lo-border-soft);
}
.lounge-day::before { left: 0; }
.lounge-day::after  { right: 0; }

/* === Message rows === */

.lounge-msg {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  margin: 12px 0;
  align-items: start;
}
.lounge-msg.is-cont { margin-top: 3px; }

.lounge-msg__avatar { grid-column: 1; }
.lounge-msg__col { grid-column: 2; min-width: 0; }

/* Self (Yu) — right aligned, no avatar column, warm bubble. */
.lounge-msg--self {
  grid-template-columns: minmax(0, 1fr);
  justify-items: end;
}
.lounge-msg--self .lounge-msg__col { display: flex; flex-direction: column; align-items: flex-end; }

.lounge-ava {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--lo-border);
  background: var(--lo-elevated);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--lo-ink-2);
}
.lounge-ava.has-emoji { font-family: var(--font-body); font-weight: 400; font-size: 19px; }
.lounge-ava.is-ceo    { color: var(--lo-rose); border-color: var(--lo-rose); }
.lounge-ava.is-cto    { color: var(--lo-navy); border-color: var(--lo-navy); }
.lounge-ava.is-worker { color: var(--lo-sage); border-color: var(--lo-sage); }
.lounge-ava.is-yu     { background: var(--lo-navy); color: var(--lo-elevated); border-color: var(--lo-navy); }

.lounge-msg__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 3px;
  font-size: 13px;
}
.lounge-msg__name { font-weight: 700; color: var(--lo-ink); }
.lounge-msg__tag  { font-size: 11px; color: var(--lo-ink-3); font-style: italic; }
.lounge-msg__instance {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--lo-ink-faint);
  padding: 0 4px;
  border: 1px solid var(--lo-border-soft);
  border-radius: 4px;
}
.lounge-msg__time { font-size: 11px; color: var(--lo-ink-faint); }

.lounge-msg__bubble {
  background: var(--lo-elevated);
  border: 1px solid var(--lo-border-soft);
  border-radius: 4px 14px 14px 14px;
  padding: 8px 13px;
  color: var(--lo-ink);
  max-width: min(100%, 640px);
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.lounge-msg__bubble p { margin: 0 0 0.5em; }
.lounge-msg__bubble p:last-child { margin-bottom: 0; }
.lounge-msg__bubble a { color: var(--lo-navy); }
.lounge-msg__bubble .mention,
.lounge-msg__bubble mark.mention {
  background: var(--lo-navy-soft);
  color: var(--lo-navy-deep);
  border-radius: 4px;
  padding: 0 3px;
  font-weight: 600;
  font-style: normal;
}

.lounge-msg--self .lounge-msg__bubble {
  background: var(--lo-navy);
  color: #fdfbf6;
  border-color: var(--lo-navy);
  border-radius: 14px 4px 14px 14px;
}
.lounge-msg--self .lounge-msg__bubble a { color: #d9e6f2; }
.lounge-msg--self .lounge-msg__bubble .mention { background: rgba(255,255,255,0.18); color: #fdfbf6; }

/* The 🛋️ 客厅编排 marker (.lounge-orch) sits in the meta row right after the
 * identity chip — persona attribution AND the orchestration fact, both at a
 * glance. Its shared styling lives in components.css (rendered on /channels too).
 * CRSO ch63 #763 (b): visible shaping stays visible. */

/* === 'pass' placeholder — dignified "先听大家说", never an empty post. === */
.lounge-msg--pass { margin: 8px 0; }
.lounge-pass {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--lo-ink-3);
  background: transparent;
  border: 1px dashed var(--lo-border);
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 15px;
}
.lounge-pass__icon { font-size: 14px; opacity: 0.7; }
.lounge-pass__text { font-style: italic; }

/* === Composer === */

.lounge__composer {
  border-top: 1px solid var(--lo-border);
  background: color-mix(in srgb, var(--lo-bg) 92%, transparent);
  padding: 8px 16px calc(12px + env(safe-area-inset-bottom));
  backdrop-filter: blur(4px);
}
.lounge__hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0 0 7px;
  font-size: 12.5px;
  color: var(--lo-ink-3);
  line-height: 1.5;
}
.lounge__hint b { color: var(--lo-navy); font-weight: 700; }
.lounge__hint .mono { font-family: var(--font-mono); font-size: 11.5px; }
.lounge__hint-sep { color: var(--lo-ink-faint); }
.lounge__hint-runner {
  color: var(--lo-amber);
  border: 1px solid color-mix(in srgb, var(--lo-amber) 30%, transparent);
  background: color-mix(in srgb, var(--lo-amber) 9%, transparent);
  border-radius: 999px;
  padding: 1px 9px;
  cursor: help;
}

.lounge__box {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--lo-input);
  border: 1.5px solid var(--lo-border);
  border-radius: 16px;
  padding: 6px 6px 6px 14px;
  transition: border-color var(--duration-fast) var(--ease-soft);
}
.lounge__box:focus-within { border-color: var(--lo-navy); }

.lounge__input {
  flex: 1;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--lo-ink);
  font-family: var(--font-body);
  font-size: 16px;             /* >=16px so iOS Safari doesn't zoom on focus */
  line-height: 1.5;
  max-height: 40vh;
  padding: 5px 0;
}
.lounge__input::placeholder { color: var(--lo-ink-faint); font-style: italic; }
.lounge__input:disabled { color: var(--lo-ink-faint); }

.lounge__send {
  flex: none;
  border: none;
  border-radius: 12px;
  background: var(--lo-navy);
  color: #fdfbf6;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  padding: 8px 18px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-soft), opacity var(--duration-fast);
}
.lounge__send:hover:not(:disabled) { background: var(--lo-navy-deep); }
.lounge__send:disabled { opacity: 0.45; cursor: not-allowed; }

.lounge__foot { min-height: 14px; margin-top: 5px; font-size: 12px; color: var(--lo-rose); }

/* @-mention autocomplete pop (composer.js emits .ch-mention-* classes; those
 * base styles live in channels.css, which /lounge/ doesn't load — restyle here). */
.lounge__mention {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 6px;
  z-index: 20;
  min-width: 200px;
  max-height: 240px;
  overflow-y: auto;
  background: var(--lo-elevated);
  border: 1px solid var(--lo-border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 4px;
}
.lounge__mention[hidden] { display: none; }
.lounge__mention .ch-mention-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.lounge__mention .ch-mention-item:hover,
.lounge__mention .ch-mention-item.is-active { background: var(--lo-navy-soft); }
.lounge__mention .ch-mention-item__name { font-weight: 600; color: var(--lo-ink); }
.lounge__mention .ch-mention-item__tag  { font-size: 12px; color: var(--lo-ink-3); font-style: italic; }

/* === Mobile === */
@media (max-width: 600px) {
  .page-lounge { font-size: 16px; }
  .page-lounge .page__header { padding: 12px 14px; }
  .lounge__head { padding: 10px 14px 6px; }
  .lounge__h1 { font-size: 22px; }
  .lounge__stream { padding: 6px 12px 16px; }
  .lounge-msg { grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
  .lounge-ava { width: 30px; height: 30px; font-size: 13px; }
  .lounge-ava.has-emoji { font-size: 16px; }
  .lounge__composer { padding: 7px 12px calc(10px + env(safe-area-inset-bottom)); }
  .lounge-day::before, .lounge-day::after { width: calc(50% - 70px); }
  .hearth { padding: 6px 14px 8px; gap: 10px; }
  .hearth__orbs { gap: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .lounge__stream { scroll-behavior: auto; }
  /* No breathing / flicker — the orbs and hearth hold their steady state. */
  .orb, .flame { animation: none; }
}