/* My Meeting — videochiamate: l'ingresso e la regia nel vetro chiaro lilla-azzurro di My Meeting, la chiamata su fondo
   scuro (i video si vedono meglio) coi tasti grandi in basso. Viola per i tasti principali, rosso per uscire. */
@import url("icone.css");  /* relativo: vale sia per meet.businessdesk.it sia per la regia sotto /meet/ */
:root {
  --inchiostro: #1e1e2f;
  --tenue: #5f5b74;
  --accento: #5b23ff;
  --accento-scuro: #4300d2;
  --accento-chiaro: #efecff;
  --verde: #16a34a;
  --rosso: #e03131;
  --bordo: rgba(30, 30, 47, .1);
  --notte: #12121c;
  --piastra: #1f1f2e;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  color: var(--inchiostro);
  background:
    radial-gradient(55% 50% at 10% 0%, rgba(201, 190, 255, .55), transparent 70%),
    radial-gradient(50% 50% at 100% 100%, rgba(186, 228, 255, .6), transparent 70%),
    linear-gradient(160deg, #efeaff 0%, #e6f3ff 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body.in-chiamata { background: var(--notte); color: #fff; overflow: hidden; }
h1 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
p { margin: 0; }
.tenue { color: var(--tenue); font-size: 14px; line-height: 1.45; }
.ic { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.marchio { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; }
.logo { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #7b4dff, #4300d2);
  color: #fff; font-weight: 800; font-size: 15px; }
.tasto { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(30, 30, 47, .14); background: #fff; font: inherit; font-weight: 600; font-size: 15px; color: var(--inchiostro); cursor: pointer; text-decoration: none; }
.tasto:hover { background: #f7f5ff; }
.tasto:disabled { opacity: .6; cursor: default; }
.primario { background: var(--accento); color: #fff; border-color: transparent; box-shadow: 0 6px 16px -6px rgba(91, 35, 255, .6); }
.primario:hover { background: #6a35ff; }
.tasto:focus-visible, input:focus-visible, .comando:focus-visible { outline: 3px solid var(--accento); outline-offset: 2px; }
.errore { padding: 10px 12px; border-radius: 12px; background: #ffe4e4; color: #b42318; font-size: 14px; line-height: 1.4; }

/* ------------------------------------------------------------ l'ingresso */
.ingresso { min-height: 100%; display: grid; place-items: center; padding: 24px 16px; }
.scheda { width: min(520px, 100%); padding: 24px; border-radius: 22px; background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 24px 48px -16px rgba(91, 35, 255, .18); display: grid; gap: 16px; }
.anteprima { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--piastra); }
.anteprima video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.anteprima-vuota { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .7); font-size: 15px; }
.anteprima .pre-tasti { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 10px; }
.tondo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .92); color: var(--inchiostro); }
.tondo.spento { background: var(--rosso); color: #fff; }
.campo { display: grid; gap: 6px; font-size: 14px; font-weight: 600; color: var(--tenue); }
.campo input { min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bordo); background: #fff; font: inherit; font-size: 16px; color: var(--inchiostro); }
.campo input:focus { outline: none; border-color: var(--accento); box-shadow: 0 0 0 3px rgba(91, 35, 255, .2); }
.grande { min-height: 52px; font-size: 16px; }
.nota { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tenue); }
.nota .ic { width: 14px; height: 14px; }

/* ------------------------------------------------------------ la chiamata */
/* a sinistra la colonna di My Meeting (se aperta), poi i video; per intero la colonna prende tutto il posto dei video */
.chiamata { position: fixed; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-columns: auto minmax(0, 1fr); }
.chiamata > .barra, .chiamata > .comandi { grid-column: 1 / -1; }
.chiamata > .palco { grid-column: 2; grid-row: 2; }
.barra { display: flex; align-items: center; gap: 12px; padding: 12px 16px; }
.barra b { font-size: 15px; }
.barra .tenue { color: rgba(255, 255, 255, .6); display: inline-flex; align-items: center; gap: 6px; }
.barra .tenue .ic { width: 16px; height: 16px; }
.riempi { flex: 1 1 auto; }
.rete { padding: 6px 12px; border-radius: 999px; background: #f59e0b; color: #1e1e2f; font-size: 13px; font-weight: 700; }
.barra .tasto { min-height: 36px; padding: 0 12px; font-size: 14px; background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .15); }
.barra .tasto:hover { background: rgba(255, 255, 255, .18); }

.palco { position: relative; display: grid; gap: 12px; padding: 0 16px; min-height: 0; }
.palco.con-schermo { grid-template-columns: minmax(0, 1fr) 240px; }
.schermo-grande { position: relative; min-height: 0; border-radius: 16px; overflow: hidden; background: #000; }
.schermo-grande video { width: 100%; height: 100%; object-fit: contain; }
.schermo-grande .etichetta { left: 12px; bottom: 12px; }
.condivido { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center;
  background: radial-gradient(60% 60% at 50% 40%, rgba(91, 35, 255, .35), transparent 70%), #16161f; }
.condivido .ic { width: 44px; height: 44px; color: #b9a6ff; }
.condivido b { font-size: 20px; }
.condivido span { max-width: 420px; color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.45; }
.griglia { display: grid; gap: 12px; min-height: 0; align-content: center; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); overflow-y: auto; }
.palco.con-schermo .griglia { grid-template-columns: 1fr; align-content: start; }
.piastrella { position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--piastra); box-shadow: 0 0 0 2px transparent; transition: box-shadow .15s; }
.piastrella.parla { box-shadow: 0 0 0 3px var(--verde); }
.piastrella video { width: 100%; height: 100%; object-fit: cover; }
.piastrella.mia video { transform: scaleX(-1); }
.piastrella .faccia { position: absolute; inset: 0; display: grid; place-items: center; }
.piastrella .faccia span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--colore, #5b23ff);
  font-size: 30px; font-weight: 700; color: #fff; }
.etichetta { position: absolute; left: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 20px);
  padding: 5px 10px; border-radius: 9px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 13px; font-weight: 600; }
.etichetta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etichetta .ic { width: 15px; height: 15px; color: #ff8a8a; }

.comandi { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
.comando { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 76px; padding: 10px 12px; border-radius: 14px; border: 0;
  background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.comando:hover { background: rgba(255, 255, 255, .18); }
.comando .ic { width: 22px; height: 22px; }
.comando.spento { background: rgba(224, 49, 49, .2); color: #ff9b9b; }
.comando.acceso { background: var(--accento); }
.comando.esci { background: var(--rosso); }
.comando.esci:hover { background: #c92a2a; }
.pallino { position: absolute; top: 6px; right: 14px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #f56b1a;
  color: #fff; font-size: 11px; line-height: 18px; }

.chat { position: fixed; top: 64px; right: 16px; bottom: 96px; width: min(360px, calc(100% - 32px)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  border-radius: 18px; background: #fff; color: var(--inchiostro); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .5); overflow: hidden; z-index: 5; }
.chat > header { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; border-bottom: 1px solid var(--bordo); }
.chat > header .tasto { min-height: 32px; padding: 0 10px; font-size: 13px; }
.messaggi { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 10px; align-content: start; overflow-y: auto; }
.messaggi li { display: grid; gap: 2px; font-size: 14.5px; line-height: 1.4; overflow-wrap: anywhere; }
.messaggi b { font-size: 13px; color: var(--accento-scuro); }
.messaggi small { color: var(--tenue); font-weight: 400; margin-left: 6px; }
.chat form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--bordo); }
.chat input { flex: 1 1 auto; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--bordo); font: inherit; }
.avviso { position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); padding: 10px 16px; border-radius: 12px; background: #fff;
  color: var(--inchiostro); font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); z-index: 6; }

/* ------------------------------------------------------------ My Meeting nella chiamata */
.logo.mini { width: 22px; height: 22px; border-radius: 7px; font-size: 12px; }
.mm-nota { align-items: flex-start; line-height: 1.45; }
.mm-nota .logo.mini { width: 18px; height: 18px; border-radius: 6px; font-size: 10px; margin-top: 1px; }
.pill-mm { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 12px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(123, 77, 255, .22); color: #d9ceff; font: inherit; font-size: 13px; font-weight: 700; }
.pill-mm:hover { background: rgba(123, 77, 255, .34); }
.punto { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 0 0 rgba(255, 90, 90, .6); animation: batte 1.6s infinite; }
@keyframes batte { 70% { box-shadow: 0 0 0 7px rgba(255, 90, 90, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0); } }
@media (prefers-reduced-motion: reduce) { .punto { animation: none; } }
.comando .logo.mini { margin: -1px 0 1px; }

.mm { grid-column: 1; grid-row: 2; position: relative; width: 352px; margin-left: 16px; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  border-radius: 16px; background: #1a1a28; border: 1px solid rgba(255, 255, 255, .08); overflow: hidden; }
.chiamata.mm-intero > .mm { grid-column: 1 / -1; width: auto; margin: 0 16px; }
.chiamata.mm-intero > .palco { display: none; }
.mm-testa { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mm-testa .logo { width: 26px; height: 26px; border-radius: 8px; font-size: 13px; }
.mm-testa > b:not(.logo) { font-size: 15px; }
.mm-tasto { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; }
.mm-tasto:hover { background: rgba(255, 255, 255, .16); }
.mm-tasto[aria-pressed="true"] { background: var(--accento); }
.mm-tasto .ic { width: 18px; height: 18px; }
.mm-lingue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.mm-lingue span { flex: 1 1 100%; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.mm-lingue button { min-height: 30px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: transparent; color: #fff;
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.mm-lingue button[aria-pressed="true"] { background: #fff; color: var(--inchiostro); border-color: #fff; }
.mm-righe { list-style: none; margin: 0; padding: 12px; display: grid; gap: 12px; align-content: start; overflow-y: auto; overscroll-behavior: contain; }
.mm-righe li { display: grid; gap: 3px; }
.mm-righe .chi { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 700; color: var(--colore, #b9a6ff); }
.mm-righe .chi small { font-weight: 500; color: rgba(255, 255, 255, .45); }
.mm-righe .detto { margin: 0; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.mm-righe .originale { margin: 0; font-size: 12.5px; line-height: 1.4; color: rgba(255, 255, 255, .5); overflow-wrap: anywhere; }
.mm-righe .attesa { color: rgba(255, 255, 255, .45); font-style: italic; }
.chiamata.mm-intero .mm-righe { padding: 20px max(24px, calc((100% - 900px) / 2)); gap: 16px; }  /* testo al centro, barra di scorrimento sul bordo */
.chiamata.mm-intero .mm-righe .detto { font-size: 19px; }
.chiamata.mm-intero .mm-righe .originale { font-size: 14px; }
.mm-vuoto { position: absolute; left: 20px; right: 20px; top: 50%; text-align: center; color: rgba(255, 255, 255, .5); font-size: 14px; line-height: 1.5; }
.mm-ultime { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; min-height: 36px;
  padding: 0 14px; border-radius: 999px; border: 0; background: #fff; color: var(--inchiostro); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .6); }
.mm-ultime .ic { width: 16px; height: 16px; }

/* la striscia: chiara su qualsiasi cosa ci sia sotto, si allarga dall'angolo in basso a destra */
.striscia { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); z-index: 7; width: min(720px, calc(100% - 32px)); min-width: 260px; min-height: 56px;
  max-width: calc(100vw - 16px); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 10px 10px 12px;
  border-radius: 16px; background: rgba(14, 14, 22, .9); color: #fff; box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .12);
  resize: both; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.striscia.mossa { transform: none; }
.striscia.trascino { cursor: grabbing; }
.striscia > .ic { width: 18px; height: 18px; color: rgba(255, 255, 255, .45); }
.striscia-testo { display: grid; gap: 4px; font-size: 17px; line-height: 1.4; max-height: 100%; overflow: hidden; }
.striscia-testo p { margin: 0; }
.striscia-testo b { color: var(--colore, #b9a6ff); margin-right: 6px; font-size: 14px; }
.striscia-testo .vecchia { opacity: .55; font-size: 15px; }

/* alla fine: quello che si è detto, sul fondo chiaro dell'uscita */
.scheda.larga { width: min(720px, 100%); }
.mm-fine { display: grid; gap: 10px; }
.mm-fine h2 { margin: 0; font-size: 17px; }
.mm-righe.chiare { max-height: 46vh; padding: 12px; border-radius: 14px; background: #fff; border: 1px solid var(--bordo); }
.mm-righe.chiare .chi { color: var(--colore-scuro, var(--accento-scuro)); }
.mm-righe.chiare .chi small, .mm-righe.chiare .originale { color: var(--tenue); }
.mm-fine .tasto { justify-self: start; }
.spunta { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--tenue); cursor: pointer; }
.spunta input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accento); flex: none; }
.nuova .spunta { flex: 1 1 100%; }
.stanza .spunta { grid-column: 1; }

@media (max-width: 700px) {
  /* sul telefono la colonna aperta prende il posto dei video (che tornano quando la chiudi): è già «per intero» */
  .mm, .chiamata.mm-intero > .mm { grid-column: 1 / -1; width: auto; margin: 0 8px; }
  .chiamata.mm-aperta > .palco { display: none; }
  #mmGrande { display: none; }
  .barra { gap: 8px; }
  .barra > b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .barra .riempi { display: none; }
  .barra .pill-mm { flex: none; padding: 0 10px; font-size: 12px; white-space: nowrap; }
  .pill-mm .lungo, #copiaLink span { display: none; }
  #copiaLink { padding: 0 10px; }
  .palco.con-schermo { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 120px; }
  .palco.con-schermo .griglia { grid-auto-flow: column; grid-auto-columns: 160px; grid-template-columns: none; overflow-x: auto; }
  .comando { min-width: 60px; padding: 8px; font-size: 11px; }
  .barra .tenue.quanti { display: none; }
}

/* ------------------------------------------------------------ la regia */
.regia { max-width: 760px; margin: 0 auto; padding: 28px 16px 48px; display: grid; gap: 16px; }
.carta { padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .86); border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 24px -8px rgba(91, 35, 255, .1); display: grid; gap: 12px; }
.carta h2 { margin: 0; font-size: 17px; }
.nuova { display: flex; gap: 10px; flex-wrap: wrap; }
.nuova > input { flex: 1 1 240px; min-height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--bordo); font: inherit; font-size: 16px; }
.stanze { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stanza { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--bordo); }
.stanza b { font-size: 16px; }
.stanza code { font-size: 13px; color: var(--accento-scuro); overflow-wrap: anywhere; }
.stanza .tasti { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; grid-column: 2; grid-row: 1 / span 2; }
.stanza .tasto { min-height: 38px; padding: 0 12px; font-size: 14px; }
@media (max-width: 560px) { .stanza { grid-template-columns: 1fr; } .stanza .tasti { grid-column: 1; grid-row: auto; justify-content: flex-start; } }