/* ORi Whisper mode-whisper viewport chrome (Child B of #14).
 *
 * mode-whisper strips the UI to a single Signal at a time, optimized
 * for the "phone in pocket / earbuds in" use case. Hides the renderer
 * surfaces (#card-stream, #bubble-field) and the bottom panel; shows
 * the Signal slot prominently and the whisper-rail (Commit 6) below.
 *
 * Companion to styles-render-mode.css which carries the visibility
 * rules. This file carries the mode-whisper-specific chrome — large
 * fonts, centered layout, generous spacing.
 */

/* Container layout — centered, generous padding */
body.mode-whisper .content-area {
  align-items: center;
  justify-content: center;
}

body.mode-whisper .panels {
  flex: 0 0 auto;
  width: 100%;
  max-width: 640px;
  padding: 24px 16px;
}

/* The Signal slot — promote to the visual centerpiece.
   Override the base .signal-slot { display: contents } from
   styles-signals.css so the slot gets its own box that we can
   constrain to the panels' max-width. Without this, the .signal
   would lay out as a direct child of .content-area (full viewport
   width) regardless of any max-width we set on the panels container. */
body.mode-whisper .signal-slot {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

body.mode-whisper .signal-slot.empty {
  display: block;  /* Override the styles-signals.css `.empty { display: none }` */
}

body.mode-whisper .signal-slot.empty::before {
  content: "Listening for Signals…";
  display: block;
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-lg);
  padding: 32px 0;
}

/* Each individual Signal renders larger in whisper mode. Override
   flex-shrink:0 from the base so width:100% on the parent actually
   constrains, and let text wrap inside. */
body.mode-whisper .signal {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  padding: 24px;
  font-size: var(--fs-lg);
  border-radius: var(--radius-lg);
  border-width: 2px;
  white-space: normal;
  word-break: break-word;
}

body.mode-whisper .signal .sig-label {
  font-size: var(--fs-md);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.mode-whisper .signal .sig-text {
  font-size: var(--fs-lg);
  line-height: 1.4;
  margin-top: 8px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* Hide TTL countdown + suppress button + arrow in whisper mode —
   too cluttered for the in-pocket use case. The close X (.sig-close)
   STAYS visible so users can manually dismiss a Signal that's
   sticking around (TTL auto-clear in this mode is unreliable because
   the Signal fills most of the screen and the cursor usually hovers it,
   which triggers the existing hover-to-pin behavior). */
body.mode-whisper .signal .sig-ttl,
body.mode-whisper .signal .sig-suppress,
body.mode-whisper .signal .sig-arrow {
  display: none;
}

/* Promote the close X to a large, finger-friendly target in mode-whisper. */
body.mode-whisper .signal .sig-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  cursor: pointer;
}
body.mode-whisper .signal .sig-close:hover {
  background: var(--surface);
  color: var(--text);
}

/* Whisper rail (Commit 6 will populate) — placeholder layout */
.whisper-rail {
  display: none;  /* hidden by default; mode-whisper shows it */
  flex-direction: row;
  gap: 12px;
  width: 100%;
  max-width: 640px;
  padding: 16px;
  margin-top: 24px;
}

body.mode-whisper .whisper-rail {
  display: flex;
}

.whisper-rail-btn {
  flex: 1;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--surface-hi);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--duration-fast);
}

.whisper-rail-btn:hover { background: var(--surface); }
.whisper-rail-btn:active { transform: scale(0.97); }

.whisper-rail-btn.keep   { background: rgba(76, 175, 80, 0.12); color: var(--green); border-color: rgba(76, 175, 80, 0.3); }
.whisper-rail-btn.repeat { background: rgba(167, 139, 250, 0.12); color: var(--purple); border-color: rgba(167, 139, 250, 0.3); }
.whisper-rail-btn.mute   { background: rgba(255, 183, 77, 0.12); color: var(--amber); border-color: rgba(255, 183, 77, 0.3); }