/* layout.css — sezioni regolabili nella pagina stenotipista.
   Nato da una segnalazione precisa: con la finestra di output affiancata su uno
   schermo piccolo, l'area di scrittura restava alta due righe. Regola: l'area in
   cui si scrive ha SEMPRE la precedenza sullo spazio, tutto il resto si stringe. */

:root { --sp-width: 320px; }

/* ---- pannello Power Tools a larghezza regolabile ---- */
.sp-panel { width: var(--sp-width); }
.sp-panel.sp-minimized { width: 160px; }
body.lay-dragging .sp-panel { transition: none; }
body.lay-dragging, body.lay-dragging * { cursor: ew-resize !important; user-select: none !important; }

body.sp-panel-open .typing-section { padding-right: calc(var(--sp-width) + 24px) !important; }
body.sp-panel-open .stenografa-controls { right: calc(var(--sp-width) + 24px) !important; }

.lay-sp-handle {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 5;
  background: transparent;
}
.lay-sp-handle:hover, body.lay-dragging .lay-sp-handle { background: rgba(0, 123, 255, 0.45); }
.sp-panel.sp-minimized .lay-sp-handle { display: none; }

/* ---- dopo la connessione i campi di setup si chiudono da soli ---- */
body.lay-connected:not(.lay-setup-open) .compact-controls,
body.lay-connected:not(.lay-setup-open) .instructions-column {
  display: none !important;
}
body.lay-connected .input-layout { margin-bottom: 8px; }
body.lay-connected .typing-section { padding-top: 62px !important; }

.status-bar { flex-wrap: wrap; gap: 6px; }
body.lay-connected .status-bar { padding: 6px 8px; margin-bottom: 0; }
body.lay-connected .status-bar > span[data-i18n="connected_status"] {
  flex: 1 1 140px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.lay-btn {
  background: #495057;
  color: white;
  border: none;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
}
.lay-btn:hover { background: #343a40; }
.lay-btn.lay-on { background: #007bff; }

/* ---- SOLO SCRITTURA: via tutto cio' che non serve a scrivere ---- */
body.lay-focus .language-selector,
body.lay-focus .corner-logo,
body.lay-focus .compact-controls,
body.lay-focus .instructions-column {
  display: none !important;
}
body.lay-focus .typing-section {
  padding-top: 40px !important;
  padding-left: 8px !important;
  padding-bottom: 8px !important;
  height: 100vh !important;
}
body.lay-focus:not(.sp-panel-open) .typing-section { padding-right: 8px !important; }
body.lay-focus .connection-status { top: 8px; left: 8px; right: auto; }
body.lay-focus.lay-no-video .video-section { display: none; }
body.lay-focus .stenografa-controls { top: 4px; }

/* ---- finestre strette (output affiancato, schermo piccolo) ---- */
@media (max-width: 1100px) {
  .typing-section { padding-left: 10px !important; padding-bottom: 10px !important; }
  body:not(.sp-panel-open) .typing-section { padding-right: 10px !important; }
  #liveTypingArea { padding: 10px; }
  .compact-controls { padding: 10px; }
  .copy-room-btn, .cp-open-btn, .sg-open-btn, .lay-btn { padding: 5px 8px; font-size: 11px; }
}