/* kraken_scene — layout structurel de la demo pixels. Couleurs via tokens --kr-scene-* (defauts
   neutres, surchargeables par le skin hote). Structure seulement : 3/5 page blanche + 2/5 chat. */
:root {
  --kr-scene-page: #ffffff;      /* la grande page blanche */
  --kr-scene-panel: #f5f6f9;     /* fond du chat */
  --kr-scene-line: #e6e8ee;      /* traits de separation */
  --kr-scene-ink: #1c2230;       /* texte */
  --kr-scene-muted: #6b7280;
  --kr-scene-accent: #0d9488;    /* bulle utilisateur + actions */
}

.kr-scene { display: flex; width: 100%; height: calc(100vh - 88px); min-height: calc(100vh - 88px); color: var(--kr-scene-ink);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; }

/* 3/5 : la grande page blanche (canvas) */
.kr-scene-stage { flex: 3; position: relative; background: var(--kr-scene-page); }
.kr-scene-canvas { display: block; width: 100%; height: 100%; }

/* 2/5 : le chat */
.kr-scene-chat { flex: 2; min-width: 300px; background: var(--kr-scene-panel);
  border-left: 1px solid var(--kr-scene-line); display: flex; flex-direction: column; }
.kr-scene-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.kr-b { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.4; }
.kr-ia { background: #fff; border: 1px solid var(--kr-scene-line); align-self: flex-start; border-bottom-left-radius: 4px; }
.kr-me { background: var(--kr-scene-accent); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.kr-scene-mode { display: flex; gap: 6px; padding: 10px 16px 0; border-top: 1px solid var(--kr-scene-line); }
.kr-scene-mode-btn { border: 1px solid var(--kr-scene-line); background: #fff; color: inherit;
  border-radius: 999px; padding: 4px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.kr-scene-mode-btn.is-active { background: var(--kr-scene-accent); border-color: var(--kr-scene-accent); color: #fff; }
.kr-scene-input-row { display: flex; gap: 8px; padding: 12px 16px; }
.kr-scene-input { flex: 1; border: 1px solid var(--kr-scene-line); border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
.kr-scene-input:focus { border-color: var(--kr-scene-accent); }
.kr-scene-send { border: 0; background: var(--kr-scene-accent); color: #fff; border-radius: 10px; padding: 0 16px; font-weight: 600; cursor: pointer; }

@media (max-width: 720px) { .kr-scene { flex-direction: column; } .kr-scene-stage { min-height: 55vh; } }