.webcam-room-wrap{background:#0b1220;border-radius:12px;overflow:hidden;border:1px solid #1e293b}
.webcam-room-toolbar{display:flex;gap:8px;padding:8px 10px;background:#1e293b;align-items:center;color:#fff;font-size:13px}
.webcam-room-toolbar button{background:#3b82f6;border:none;color:#fff;padding:5px 12px;border-radius:6px;cursor:pointer;font-size:12px}
.webcam-room-toolbar button.off{background:#64748b}
.webcam-room-toolbar button.close{background:#ef4444;margin-left:auto}
.webcam-room-grid{display:grid;gap:12px;padding:12px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-height:520px;overflow:auto}
.webcam-room-tile{display:flex;flex-direction:column;background:#0f172a;border:2px solid #334155;border-radius:10px;overflow:hidden;box-shadow:0 4px 12px rgba(0,0,0,.35);transition:border-color .15s}
.webcam-room-tile.self{border-color:#3b82f6}
.webcam-room-tile:hover{border-color:#60a5fa}
.webcam-room-tile .tile-head{display:flex;align-items:center;justify-content:space-between;padding:6px 10px;background:#1e293b;color:#fff;font-size:12px;font-weight:600}
.webcam-room-tile .tile-head .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.webcam-room-tile .tile-head .badge{font-size:10px;background:#3b82f6;padding:2px 6px;border-radius:4px;margin-left:6px}
.webcam-room-tile .video-wrap{position:relative;background:#000;aspect-ratio:4/3}
.webcam-room-tile video{width:100%;height:100%;object-fit:cover;display:block}
.webcam-room-tile .tile-actions{display:flex;gap:6px;padding:6px 8px;background:#0f172a}
.webcam-room-tile .tile-actions button{flex:1;background:#334155;border:none;color:#fff;padding:4px 6px;border-radius:5px;cursor:pointer;font-size:11px}
.webcam-room-tile .tile-actions button:hover{background:#475569}
.popup-close-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none !important;
  border-bottom: none !important;
  border-radius: 50%;
  background: rgba(0,0,0,0.08) !important;
  color: #445 !important;
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: background .15s, opacity .15s;
  min-height: unset !important;
  line-height: 1;
}
.popup-close-btn:hover {
  background: rgb(6 99 167 / 33%) !important;
  opacity: 1;
}
/* bottoni del popup su una riga sola, no wrap */
#optionsPopup.options-popup button:not(.popup-close-btn) {
  display: flex;
  width: 100%;
}
#optionsPopup.options-popup button:not(.popup-close-btn) .options-popup-label {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* ===== Linguetta apri/chiudi box utenti/stanze - SOLO MOBILE ===== */
.side-panel-handle { display: none; }
.side-panel-backdrop { display: none; }

@media (max-width: 760px) {
  /* il pannello deve poter "sporgere" la linguetta fuori dal proprio bordo */
  #sidePanel.side-panel { overflow: visible !important; }

  /* la linguetta compare solo su mobile, agganciata al bordo sinistro del box */
  .side-panel-handle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translateY(-50%);
    width: 30px;
    height: 68px;
    padding: 0;
    border: 1px solid #2b82d7;
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: linear-gradient(#3aa1ff, #1680dc);
    color: #fff;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -4px 0 10px rgba(0,0,0,.25);
    z-index: 10;
  }

  /* la chat principale occupa tutta la larghezza, il box diventa un cassetto */
  .chat-frame { grid-template-columns: minmax(0, 1fr) !important; }

  #sidePanel.side-panel {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 82vw;
    max-width: 320px;
    height: 100%;
    max-height: 100vh;
    z-index: 600;
    box-shadow: -6px 0 18px rgba(0,0,0,.35);
    transform: translateX(100%);
    transition: transform .25s ease;
  }

  /* di default il box è chiuso su mobile: si apre solo con la classe is-open */
  #sidePanel.side-panel.is-open {
    transform: translateX(0);
  }

  .side-panel-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    z-index: 590;
  }
  .side-panel-backdrop[hidden] { display: none; }
}

/* ----------------------------------------------------------------
   CLAUDE LOADING SCREEN — sostituisce il vecchio .app-preloader
   ---------------------------------------------------------------- */
.claude-preloader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#9fb8d0 0%, #c7d6e3 22%, #e7edf2 100%);
  transition: opacity .5s ease;
}
.claude-preloader.is-hidden { opacity: 0; pointer-events: none; }
.claude-preloader-card { display: flex; flex-direction: column; align-items: center; gap: 16px; animation: claudeFadeUp .5s ease; }
@keyframes claudeFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.claude-preloader-logo { width: 175px; height: 75px; object-fit: contain; border-radius: 16px; animation: claudePulse 1.6s ease-in-out infinite; }
@keyframes claudePulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.claude-preloader-bar { width: 180px; height: 5px; border-radius: 6px; background: #eef2f6; border: 1px solid #d7e1ea; overflow: hidden; }
.claude-preloader-bar::after {
  content: ""; display: block; height: 100%; width: 40%; border-radius: 6px;
  background: linear-gradient(90deg,#1f6fb2,#4a6fa5);
  animation: claudeBarSlide 1.1s ease-in-out infinite;
}
@keyframes claudeBarSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(280%); } }
.claude-preloader-text { font-family: 'Segoe UI', Tahoma, Arial, sans-serif; font-size: 12.5px; color: #5b6e80; }
.claude-preloader-version { font-family: monospace; font-size: 10.5px; color: #93a3b2; letter-spacing: .05em; }