/* ─────────────────────────────────────────────────────────────────
   css/response-aac.css

   2026-06-11 — Response AAC v2: CONVERSATION GRID surface
   (js/builder/response-aac.js). The demo's bilateral loop rendered
   as REAL AAC TILES, not pills.

   Class namespace .raac-* (distinct from .aicm-* used by the
   ai-conversation-mode engine UI). The panel mounts as a SIBLING
   above #tileGrid inside the device-frame preview, so it inherits
   the frame width.

   TILE STYLING mirrors builder.css board tiles on purpose
   (.tile / .tile-emoji-area / .tile-emoji / .tile-label-bar /
   .tile-label — vivid Fitzgerald-style colored body, emoji area,
   dark translucent label bar, bold white uppercase label) so the
   conversation tiles look and feel like the user's board tiles.
   Hardcoded fallback values instead of builder.css custom props so
   the sheet stands alone if load order ever shifts.

   AAC-grade tap targets: every tile is ≥100px tall (board parity,
   well above the 44px WCAG floor); the ➕ add affordance is 44px.

   States mirror the engine state machine on the badge:
     .raac-badge-idle / -listening / -thinking / -suggesting

   LABEL: PILOT-READY pending the real-mic device pass.
───────────────────────────────────────────────────────────────── */

.raac-panel {
  margin: 0 0 12px;
  padding: 14px;
  border: 2px solid #7C3AED;
  border-radius: 14px;
  background: linear-gradient(180deg, #FAF7FF 0%, #FFFFFF 100%);
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
  font-family: system-ui, -apple-system, sans-serif;
}

/* ── Header ─────────────────────────────────────────────── */
.raac-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.raac-title {
  font-weight: 800;
  font-size: 15px;
  color: #3B2A63;
  letter-spacing: 0.01em;
}
.raac-badge {
  font: 700 11px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid #D8CCF4;
  background: #F1EAFE;
  color: #5B21B6;
}
.raac-badge-listening {
  background: #FEE2E2;
  border-color: #FCA5A5;
  color: #B91C1C;
  animation: raac-pulse 1.2s ease-in-out infinite;
}
.raac-badge-thinking {
  background: #FEF3C7;
  border-color: #FCD34D;
  color: #92400E;
}
.raac-badge-suggesting {
  background: #DCFCE7;
  border-color: #86EFAC;
  color: #166534;
}
@keyframes raac-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ── Status + heard line (top of the panel, above the grid) ── */
.raac-status {
  margin: 0 0 4px;
  font: 600 14px/1.4 system-ui, sans-serif;
  color:var(--ink-soft);
  min-height: 1.4em;
}
.raac-unavailable {
  margin: 4px 0 8px;
  padding: 12px;
  border-radius: 10px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  font: 600 14px/1.45 system-ui, sans-serif;
  color: #7F1D1D;
}
.raac-heard-wrap {
  margin: 0 0 8px;
  min-height: 1.2em;
}
.raac-heard-label {
  font: 700 12px/1 system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color:var(--ink-muted);
  margin-right: 6px;
}
.raac-heard {
  font: 600 16px/1.35 system-ui, sans-serif;
  color:var(--ink);
}

/* ── THE CONVERSATION GRID — real AAC tiles ─────────────── */
.raac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

/* One tile — board-tile parity (builder.css .tile). Colored body
   via inline background (Fitzgerald-ish hexes from the demo),
   emoji area on top, translucent label bar pinned to the bottom. */
.raac-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  min-height: 100px;          /* board parity; ≥64px AAC floor met */
  width: 100%;
  padding: 0;
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: #B8A9C9;        /* fallback — JS sets the real color */
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.raac-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}
.raac-tile:active { transform: scale(0.97); }
.raac-tile:focus-visible {
  outline: 3px solid #E8A838;
  outline-offset: 2px;
}
.raac-tile-emoji-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  min-height: 56px;
  pointer-events: none;
}
.raac-tile-emoji {
  font-size: 2.2rem;          /* board .tile-emoji parity */
  line-height: 1;
}
.raac-tile-label-bar {
  display: block;
  padding: 0.35rem 0.4rem;
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.raac-tile-label {
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  word-break: break-word;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Kind accents — controls get a subtle inner ring so the "human
   reactions" row reads as a family; the ended-state Listen tile is
   the lone big affordance. */
.raac-tile--control { border-color: rgba(255, 255, 255, 0.35); }
.raac-tile--listen {
  grid-column: 1 / -1;        /* the single idle tile spans the grid */
  min-height: 112px;
}
.raac-tile--listen .raac-tile-emoji { font-size: 2.6rem; }

/* ── Reply cell: tile + ➕ add-to-board affordance ───────── */
.raac-reply-cell {
  position: relative;
  display: flex;
}
.raac-add-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 44px;                /* 44px hit area, AAC floor */
  height: 44px;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease, background 0.15s ease;
  z-index: 2;
}
.raac-reply-cell:hover .raac-add-btn,
.raac-add-btn:focus-visible {
  opacity: 1;
  background: rgba(0, 0, 0, 0.35);
}
.raac-add-btn:focus-visible {
  outline: 3px solid #E8A838;
  outline-offset: 1px;
}

/* ── Motion safety ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .raac-badge-listening { animation: none; }
  .raac-tile,
  .raac-add-btn { transition: none; }
  .raac-tile:hover { transform: none; }
  .raac-tile:active { transform: none; }
}

/* Small screens: bigger tiles, two columns. */
@media (max-width: 480px) {
  .raac-grid { grid-template-columns: repeat(2, 1fr); }
  .raac-tile { min-height: 108px; }
  .raac-tile-label { font-size: 0.8rem; }
}