:root{
  --bg:#0b1220; --panel:#0f172a; --panel-2:#111827; --border:#1f2b43; --text:#e6eef8;
  --muted:#94a3b8; --accent:#3b82f6; --danger:#ef4444; --ok:#22c55e; --radius:18px; --tap:52px;
  --pad:12px; --thumb-h:140px;
}
*{ box-sizing:border-box } html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  display:grid; place-items:center; padding:12px;

  /* Evita che i contenuti scorrano sotto la barra fissa/gradient */
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

.meet-window{
  width:min(1400px,100%); height:min(860px,calc(100vh - 24px));
  background:var(--panel); border:1px solid var(--border); border-radius:22px;
  display:grid; grid-template-rows:auto 1fr auto; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4)
}
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); background:var(--panel-2) }
.topbar .left{ display:flex; align-items:center; gap:10px } .brand{ font-weight:700 } .divider{ width:1px; height:18px; background:var(--border) }
.badge{ padding:3px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted); font-size:12px }
.pill{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border:1px solid var(--border); border-radius:999px; font-size:12px; color:var(--muted) }
.pill.danger{ color:var(--danger); border-color:#3a1f23 }
.link{ color:#c5d4ff; text-decoration:none; border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:13px; display:inline-flex; align-items:center; gap:6px }
.ico{ width:18px; height:18px }
.icon{ inline-size:var(--tap); block-size:var(--tap); display:inline-grid; place-items:center; font-size:20px; border:1px solid var(--border); background:#0f172a; color:#fff; border-radius:12px }
.icon.ghost{ background:transparent } .icon.danger{ background:#2a1316; color:#ffb4b4; border-color:#4b1f24 }
.icon .ico, .icon svg{ width:22px; height:22px }

.content{ position:relative; display:grid; grid-template-columns:1fr; height:100% }
.sidebar{
  position:absolute; right:12px; top:12px; bottom:12px; width:340px;
  background:rgba(15,23,42,.95); border:1px solid var(--border); border-radius:14px;
  padding:10px; z-index:5; transform:translateX(110%); transition:transform .25s ease;
  display:flex; flex-direction:column; gap:10px
}
.sidebar.open{ transform:translateX(0%) }
.sidebar__header{ display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border); padding-bottom:6px }
.sidebar__content{ overflow:auto; display:grid; gap:12px; padding-right:4px }
.card{ background:#0b1220; border:1px solid var(--border); border-radius:12px; padding:10px }
.list{ list-style:none; padding:0; margin:0; display:grid; gap:8px }
.chatlog{ height:240px; overflow:auto; border:1px solid var(--border); border-radius:8px; padding:8px; background:#0b1220 }

.grid{
  display:grid; gap:12px; padding:12px 12px 90px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  align-content:start; grid-auto-flow:dense
}
.tile{ position:relative; border:1px solid var(--border); border-radius:14px; background:#000; overflow:hidden; min-width:160px; min-height:120px; resize:both } /* base */
.tile::before{ content:""; display:block; padding-top:56.25% }
.tile>video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000 }
.label{ position:absolute; left:8px; bottom:8px; background:rgba(0,0,0,.45); color:#fff; padding:4px 8px; border-radius:8px; font-size:12px; backdrop-filter:blur(4px) }
.tile .resizer{ position:absolute; right:3px; bottom:3px; width:14px; height:14px; border:0px; border-radius:0px; cursor:se-resize }

/* === BOTTOM BAR: con safe-area === */
.bottombar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(15,23,42,0.8) 0%, rgba(15,23,42,0.95) 80%);
  backdrop-filter: blur(8px);
  z-index: 10000;
  box-shadow: 0 -2px 12px rgba(0,0,0,.4);
}
/* leggera risalita su desktop per evitare “otticamente basso” */
@media (hover:hover){
  .bottombar{ margin-bottom:6px; border-radius:12px; }
}

/* == MODAL / PREJOIN (verticale, più piccolo) == */
.modal{ position:fixed; inset:0; background:rgba(9,13,23,.6); display:none; place-items:center; padding:16px; z-index:20; animation:fadeIn .2s ease }
.modal.open{ display:grid }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal__panel{
  width:min(720px,94vw); background:var(--panel); border:1px solid var(--border);
  border-radius:18px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.5);
  max-height:min(82dvh,640px); overflow:auto
}
.prejoin__grid{ display:grid; gap:12px; grid-template-columns:1fr } /* <= video sopra, form sotto SEMPRE */
.preview{ position:relative; border:1px solid var(--border); border-radius:14px; overflow:hidden; background:#000; min-height:260px }
.preview video{ width:100%; height:100%; object-fit:cover }
.preview__over{ position:absolute; left:8px; bottom:8px; display:flex; gap:8px }
.form .lbl{ display:block; margin-bottom:6px; color:var(--muted) }
.form input{ width:100%; padding:12px; border-radius:12px; border:1px solid var(--border); background:#0b1220; color:#fff; margin-bottom:8px }
.row{ display:flex; gap:8px } button{ cursor:pointer } .primary{ background:var(--accent); border:1px solid #2b69d9; color:white; border-radius:12px; padding:10px 14px } .ghost{ background:transparent; border:1px solid var(--border); color:#fff; border-radius:12px; padding:10px 14px }
.hint{ color:var(--muted); font-size:13px }

/* === DESKTOP STAGE === */
.stage{ position:relative; padding:12px 12px 0; display:grid; grid-template-columns:1fr; gap:12px; align-content:start }
.stage .tile{ border-width:2px; border-color:#3b455f } .stage .tile::before{ padding-top:56.25% } .stage:empty{ display:none }

/* === Drag & Resize enhancements (v3.4.1) === */
.grid, .stage { position: relative; }
.tile{
  position: absolute; /* override base per drag */
  resize: both;
  overflow: hidden;
  border-radius: 10px;
  background: #0f172a;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  transition: box-shadow .15s ease, transform .05s linear;
  cursor: grab;
  min-width: 160px;
  min-height: 120px;
}
.tile.dragging { cursor: grabbing; box-shadow: 0 0 16px rgba(255,255,255,0.45); }
.tile video { width:100%; height:100%; object-fit: cover; pointer-events: none; }

/* ==== v3.4.3: 16:9 & share tweaks ==== */
#stage{ position: relative; min-height: 56vh; }
body.has-share #stage{ min-height: 72vh; }
#videos{ position: relative; min-height: calc(100vh - 140px); }
.tile[data-autopos="1"]{ width: 320px; height: 180px; } /* 16:9 */
body.has-share .tile.thumb{ height: var(--thumb-h); min-width: 220px; }

/* ==== v3.4.4: bottom controls gradient (opzionale) ==== */
#controls, #toolbar, .controls, .bottom-controls {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* safe-area */
  background: linear-gradient(180deg, rgba(15,23,42,0.0) 0%, rgba(15,23,42,0.85) 35%);
  backdrop-filter: blur(6px);
}

/* === Allegati (dropzone + lista) === */
.dropzone{ border:1px dashed var(--border); border-radius:12px; padding:16px; text-align:center; color:var(--muted); background:rgba(11,18,32,.6); outline: none; }
.dropzone.dragover{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.25) inset; color:#cfe0ff; }
.attach-item{ display:flex; align-items:center; justify-content:space-between; border:1px solid var(--border); border-radius:10px; padding:8px; background:#0b1220; }
.attach-item .meta{ display:grid; gap:4px } .attach-item .actions{ display:flex; gap:6px } .attach-item .name{ font-weight:600; word-break:break-word } .attach-item .size{ color:var(--muted); font-size:12px }

/* === Chat: stile coerente con l'app === */
.sidebar .card .row { align-items: center; }

/* Input chat */
#chat-input {
  flex: 1 1 auto;
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#chat-input::placeholder { color: color-mix(in srgb, var(--text) 45%, transparent); }
#chat-input:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* Bottone "Invia" — stesso stile dei bottoni principali anche senza classe .primary */
.sidebar .card .row > button{
  background: var(--accent);
  border: 1px solid #2b69d9;
  color: #fff;
  border-radius: 12px;
  height: 38px;
  padding: 0 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease, transform .05s ease;
}
.sidebar .card .row > button:hover { filter: brightness(1.1); }
.sidebar .card .row > button:active { transform: translateY(1px); }
.sidebar .card .row > button:disabled { opacity: .6; cursor: not-allowed; }

/* === (1) Evita il "salto" di altezza quando cambia la UI del browser === */
@supports (height: 100dvh) {
  .meet-window{
    height: min(860px, calc(100dvh - 24px)) !important;
  }
  #videos{
    min-height: calc(100dvh - 140px) !important;
  }
}

/* === (2) Prejoin: blocco video con aspect-ratio fisso e altezza limitata === */
.preview{
  aspect-ratio: 16 / 9;
  min-height: 0;
  max-height: clamp(240px, 48vh, 420px); /* un filo più alto */
}
.preview video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === (3) Dettagli: impedisci al video di influenzare layout anche fuori dal prejoin === */
.tile > video{ display: block; }

/* === MOBILE: layout a riquadri + safe-area === */
@media (max-width:900px){
  body{ padding:0 }
  .meet-window{ width:100%; height:100dvh !important; border-radius:0 }
  .content{ display:grid; grid-template-rows:auto 1fr; height:100%; overflow:hidden }
  .grid, .stage { position: static !important; }

  /* più spazio per il video/stage su mobile */
  #stage{ padding:8px 8px 0; max-height:48vh; overflow:hidden }
  body.has-share #stage{ max-height:72vh }

  #videos{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 8px 8px calc(96px + env(safe-area-inset-bottom));
    min-height: 0; max-height: 100%;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain;
  }
  #videos:has(.tile:nth-child(2)){ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .tile{
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    width: auto !important; height: auto !important;
    min-width: 0 !important; min-height: 0 !important;
    resize: none !important; cursor: default !important;
    aspect-ratio: 4 / 5;
    border-radius: 14px; background:#000;
    box-shadow: 0 2px 10px rgba(0,0,0,.3); overflow:hidden;
  }
  .tile::before{ display:none !important }
  .tile>video{
    width:100% !important; height:100% !important;
    object-fit:cover !important; object-position:center !important;
  }

  /* barra in basso su mobile con safe-area */
  .bottombar{
    border-top:1px solid var(--border);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}
/* Allineamento coerente del bottone REC */
#recBtn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, transform .1s ease;
}

/* Leggera animazione di pressione */
#recBtn:active {
  transform: scale(0.94);
}

/* Stato visivo quando la registrazione è attiva */
#recBtn.recording {
  background-color: #dc2626;
  border-color: #b91c1c;
  color: #fff;
}