/* ── Ambiente: la stanza dell'avatar dietro la console ─────── */
.ambient {
  position: fixed;
  inset: -60px;
  z-index: -1;
  background-color: var(--void);
  background-image: var(--ambient-img, none);
  background-position: center;
  background-size: cover;
  filter: blur(30px) saturate(1.3) brightness(0.42);
  transition: opacity 600ms var(--ease-out);
}
.ambient.is-off { opacity: 0; }

/* ── Barra di stato ───────────────────────────────────────── */
.statusbar {
  height: var(--statusbar-h);
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 calc(var(--gutter) + 4px);
  background: rgb(5 6 10 / 0.86);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.wordmark {
  font: 800 25px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.wordmark span { color: var(--volt); margin-left: 2px; }
.chip-channel { color: var(--neon); border-color: color-mix(in srgb, var(--neon) 45%, transparent); }

.status-cluster {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 4px 12px;
  border-left: 1px solid var(--line);
}
.status-item:first-child { border-left: 0; }
.status-item.is-fixed { flex-shrink: 0; }
@media (max-width: 1700px) {
  .status-item { padding: 4px 9px; gap: 7px; }
  .status-value { max-width: 16ch; }
}
.status-text { display: grid; min-width: 0; }
.status-label {
  font: 600 10px/1.1 var(--font-ui);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.status-value {
  font: 600 14px/1.25 var(--font-ui);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}
.status-item .icon-btn { width: 28px; height: 28px; color: var(--text-2); }
.status-item .icon-btn:hover { background: var(--hull-3); color: var(--text); }
.status-item.is-speaking .status-value { color: var(--volt); }

.mini-meter {
  position: relative;
  width: 46px;
  height: 6px;
  background: var(--hull-3);
  overflow: hidden;
}
.mini-meter i {
  position: absolute;
  inset: 0;
  background: var(--volt);
  transform-origin: left;
  transform: scaleX(var(--level, 0));
  transition: transform 80ms linear;
}

.statusbar-end { display: flex; align-items: center; gap: 10px; flex: none; }
.account {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 13px/1 var(--font-ui);
  letter-spacing: 0.04em;
}
.account img { width: 28px; height: 28px; }

/* ── Area dei pannelli: disposizioni multiple ─────────────
   I pannelli sono posizionati in assoluto da js/ui/layout.js
   (left/top/width/height inline); qui solo stati e transizioni. */
.grid {
  position: relative;
  height: calc(100vh - var(--statusbar-h));
  height: calc(100dvh - var(--statusbar-h));
  overflow: hidden;
}
.grid > .panel { position: absolute; }
.grid > .panel[data-slot=''] { display: none; }
/* Cambio di disposizione o scambio: i pannelli si "riaccendono" al nuovo
   posto (solo opacità: niente animazioni di dimensione con gli iframe). */
.grid.is-reflow > .panel { animation: panel-settle var(--mid) var(--ease-out); }
@keyframes panel-settle {
  from { opacity: 0.35; }
  to { opacity: 1; }
}

/* ── Pannello: smussato a 45°, fascia colore in testa ─────── */
.panel {
  --tone: var(--line-hi);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--hull);
  box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.panel[data-panel='chat'] { --tone: var(--tone-chat); }
.panel[data-panel='settings'] { --tone: var(--tone-settings); }
.panel[data-panel='preview'] { --tone: var(--tone-preview); }
.panel[data-panel='avatar'] { --tone: var(--tone-avatar); }
.panel[data-panel='events'] { --tone: var(--tone-events); }

/* Filo diagonale sull'angolo smussato in basso a destra */
.panel::after {
  content: '';
  position: absolute;
  right: calc(var(--cut) * -0.2071);
  bottom: calc(var(--cut) * 0.5 - 1px);
  width: calc(var(--cut) * 1.4142);
  height: 2px;
  background: var(--line);
  transform: rotate(-45deg);
  pointer-events: none;
}
.panel:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 55%, var(--line)); }
.panel:focus-within::after { background: color-mix(in srgb, var(--tone) 55%, var(--line)); }

.panel-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--head-h);
  padding: 0 6px 0 4px;
  background: var(--tone);
  color: var(--ink);
}
.panel-head h2 {
  font: 700 14px/1 var(--font-ui);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.panel-head > .icon { width: 17px; height: 17px; stroke-width: 2; }
.head-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  overflow: hidden;
  font: 600 12px/1 var(--font-ui);
  letter-spacing: 0.06em;
}
.head-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.head-actions .icon-btn { color: var(--ink); }
.head-actions .icon { stroke-width: 2; }

.head-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 7px;
  background: rgb(0 0 0 / 0.82);
  color: var(--tone);
  font: 700 10px/1 var(--font-ui);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 0;
}
button.head-tag { cursor: pointer; }
button.head-tag:hover { background: #000; }
button.head-tag:disabled { cursor: default; }
.head-tag.is-off { background: transparent; color: rgb(7 8 11 / 0.55); box-shadow: inset 0 0 0 1px rgb(7 8 11 / 0.35); }

.grip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(7 8 11 / 0.55);
  cursor: grab;
  touch-action: none;
}
.grip:hover { color: var(--ink); }
.grip .icon { width: 16px; height: 16px; }
.grip:active { cursor: grabbing; }

.panel-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* Pannello ingrandito: copre la griglia senza ricaricare iframe */
.grid > .panel.is-max {
  left: var(--gutter) !important;
  top: var(--gutter) !important;
  width: calc(100% - 2 * var(--gutter)) !important;
  height: calc(100% - 2 * var(--gutter)) !important;
  z-index: 20;
}
.grid.has-max .split-layer { visibility: hidden; }

/* Scambio di quadrante con trascinamento */
.panel.is-dragging { opacity: 0.55; }
.panel.is-drop-target { box-shadow: inset 0 0 0 2px var(--volt); }
.panel.is-drop-target::before {
  content: 'Rilascia per scambiare';
  position: absolute;
  inset: var(--head-h) 0 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgb(5 6 10 / 0.72);
  color: var(--volt);
  font: 700 15px/1 var(--font-ui);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.grid.is-swapping iframe { pointer-events: none; }

/* ── Divisori e nodi d'incrocio (generati dal layout) ──── */
.split-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.split,
.knob { position: absolute; pointer-events: auto; touch-action: none; }
.split-v { cursor: col-resize; }
.split-h { cursor: row-resize; }
.split::after {
  content: '';
  position: absolute;
  background: var(--volt);
  opacity: 0;
  transition: opacity var(--fast);
}
.split-v::after { inset: 18px 4px; }
.split-h::after { inset: 4px 18px; }
.split:hover::after,
.split:focus-visible::after,
.grid.is-resizing .split::after { opacity: 0.6; }
.split:focus-visible { outline: none; }

.knob {
  z-index: 2;
  width: 26px;
  height: 26px;
  padding: 0;
  translate: -50% -50%;
  border: 1px solid var(--line-hi);
  background: var(--void);
  cursor: move;
  transition: background var(--fast), border-color var(--fast), rotate var(--mid) var(--ease-out);
}
.knob::before,
.knob::after {
  content: '';
  position: absolute;
  background: var(--text-2);
}
.knob::before { left: 50%; top: 5px; bottom: 5px; width: 2px; translate: -1px 0; }
.knob::after { top: 50%; left: 5px; right: 5px; height: 2px; translate: 0 -1px; }
.knob:hover,
.knob:focus-visible,
.grid.is-resizing .knob { border-color: var(--volt); background: var(--volt); rotate: 45deg; }
.knob:hover::before, .knob:hover::after,
.knob:focus-visible::before, .knob:focus-visible::after,
.grid.is-resizing .knob::before, .grid.is-resizing .knob::after { background: var(--ink); }

.knob-readout {
  position: absolute;
  z-index: 3;
  padding: 5px 8px;
  background: var(--void);
  border: 1px solid var(--volt);
  color: var(--volt);
  font: 600 12px/1 var(--font-data);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fast);
}
.grid.is-resizing .knob-readout { opacity: 1; }
.grid.is-resizing { user-select: none; }
.grid.is-resizing iframe { pointer-events: none; }

/* ── Schermi stretti: pannelli impilati ───────────────────── */
@media (max-width: 860px) {
  body { overflow: auto; }
  .statusbar { height: auto; min-height: var(--statusbar-h); flex-wrap: wrap; gap: 8px 14px; padding: 8px 12px; }
  .status-cluster { order: 3; flex-basis: 100%; overflow-x: auto; scrollbar-width: none; }
  .status-item { flex: none; }
  .grid {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gutter);
    padding: var(--gutter);
    overflow: visible;
  }
  .grid > .panel {
    position: relative;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    min-height: 70vh;
  }
  .grid > .panel[data-panel='avatar'],
  .grid > .panel[data-panel='preview'],
  .grid > .panel[data-panel='events'] { min-height: 52vh; }
  .split-layer, .grip { display: none; }
  .grid > .panel.is-max { position: fixed; inset: 0; left: 0 !important; top: 0 !important; width: auto !important; height: auto !important; }
}

.account-slot { display: contents; }
.audio-chip { border-color: color-mix(in srgb, var(--amber) 60%, transparent); color: var(--amber); }
.audio-chip:hover { background: var(--amber); border-color: var(--amber); color: var(--ink); }