/*
    CiaoSchool - https://ciaoschool.com
    Copyright (C) 2026 Jacopo Gorini <info@ciaoschool.com>

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU Affero General Public License as
    published by the Free Software Foundation, either version 3 of the
    License, or any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
    GNU Affero General Public License for more details.

    You should have received a copy of the GNU Affero General Public License
    along with this program. If not, see <https://www.gnu.org/licenses/>.
*/

html, body {
    margin: 0;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #1f2937;
    background: #f8fafc;
}

.wb-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.wb-readonly-badge {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #92400e;
    background: #fef3c7;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

/* --- Finestra flottante fissa in basso a destra: zoom + stato + Copia link
   (vedi _editor_standalone.php) — sostituisce la vecchia barra superiore. --- */
.wb-float-panel {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.14);
    padding: 0.4rem 0.5rem;
}

.wb-float-status {
    font-size: 0.75rem;
    color: #9ca3af;
    white-space: nowrap;
}

.wb-float-copy-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.7rem;
    white-space: nowrap;
}

.wb-float-download-btn {
    width: 32px;
    height: 32px;
}

/* --- Toolbar strumenti --- */
.wb-toolbar {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
    flex-wrap: wrap;
    flex: none;
}

.wb-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.05rem;
    color: #374151;
}

.wb-toolbar-btn:hover { background: #f1f5f9; }

.wb-toolbar-btn[data-active="true"] {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.wb-toolbar-divider {
    width: 1px;
    align-self: stretch;
    background: #e5e7eb;
    margin: 0 0.35rem;
}

.wb-toolbar-dropdown-wrap { position: relative; }

.wb-toolbar-dropdown {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.3rem;
    z-index: 50;
    min-width: 170px;
}

.wb-toolbar-dropdown[data-open="true"] { display: block; }

.wb-toolbar-dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.4rem 0.55rem;
    border: none;
    background: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #374151;
}

.wb-toolbar-dropdown-item:hover { background: #f1f5f9; }

.wb-toolbar-dropdown-sep {
    display: block;
    height: 1px;
    margin: 0.3rem 0.2rem;
    background: #e5e7eb;
}

.wb-font-size {
    height: 34px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    font-size: 0.85rem;
    padding: 0 0.3rem;
}

.wb-colors {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.wb-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    cursor: pointer;
    padding: 0;
}

.wb-color-swatch[data-active="true"] {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

.wb-color-swatch-white {
    border-color: rgba(0,0,0,0.3);
}

.wb-color-custom-holder { margin-left: 8px; }   /* piccolo stacco dai colori fissi */

/* Tondino «personalizzato»: grande come gli altri colori, contorno nero; al clic apre il piccolo pannello per scegliere o azzerare. */
.wb-color-custom-btn {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px dashed #000;
    padding: 0;
    cursor: pointer;
    background: #e2e8f0;
}
/* Selezionato: stesso aspetto degli altri colori (bordo sottile e anello), non più il tratteggio. */
.wb-color-custom-btn[data-active="true"] { border: 1px solid rgba(0,0,0,0.15); outline: 2px solid #4338ca; outline-offset: 2px; }

.wb-color-pop { min-width: 0; width: 224px; padding: 12px; }
.wb-cp-sv {
    position: relative;
    width: 100%;
    height: 130px;
    border-radius: 6px;
    background: linear-gradient(to top, #000, rgba(0,0,0,0)), linear-gradient(to right, #fff, #f00);
    cursor: crosshair;
    touch-action: none;
}
.wb-cp-sv-dot {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5);
    pointer-events: none;
}
.wb-cp-hue {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 14px;
    margin: 10px 0;
    border-radius: 7px;
    background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
    touch-action: none;
}
.wb-cp-hue::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid #334155; cursor: pointer; }
.wb-cp-hue::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid #334155; cursor: pointer; }
.wb-cp-row { display: flex; align-items: center; gap: 8px; }
.wb-cp-hex {
    flex: 1;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font: 0.9rem ui-monospace, Menlo, Consolas, monospace;
    text-transform: uppercase;
    color: #1f2937;
}
.wb-cp-x {
    width: 24px;
    height: 24px;
    flex: none;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    background: #fff;
    color: #475569;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}
.wb-cp-x:hover { background: #f1f5f9; color: #0f172a; }

.wb-fmt-menu { min-width: 0; width: auto; }
.wb-fmt-menu[data-open="true"] { display: flex; gap: 2px; }
.wb-shape-menu { min-width: 0; width: 196px; }
.wb-shape-menu[data-open="true"] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.wb-shape-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    background: none;
    border-radius: 6px;
    cursor: pointer;
    color: #334155;
    padding: 0;
}
.wb-shape-item:hover { background: #f1f5f9; }

.wb-stroke-width-menu {
    display: none;
    flex-direction: column;
    gap: 0.35rem;
    min-width: auto;
    padding: 0.5rem 0.6rem;
}

.wb-stroke-width-menu[data-open="true"] { display: flex; }

.wb-stroke-width-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.wb-stroke-width-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    padding: 0;
}

.wb-stroke-width-item:hover { background: #f1f5f9; }

.wb-stroke-width-item[data-active="true"] {
    border-color: #4338ca;
    background: #eef2ff;
}

.wb-stroke-width-preview {
    display: block;
    width: 18px;
    border-radius: 999px;
    background: #374151;
}

.wb-stroke-width-preview-dash {
    border-radius: 2px;
    background: repeating-linear-gradient(to right, #374151 0 4px, transparent 4px 7px);
}

.wb-zoom {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: auto;
}

.wb-zoom-label {
    font-size: 0.78rem;
    color: #6b7280;
    min-width: 40px;
    text-align: center;
}

/* --- Viewport / canvas --- */
.wb-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    background-color: #f1f5f9;
    background-image: radial-gradient(#d1d5db 1px, transparent 1px);
    background-size: 22px 22px;
    cursor: grab;
}

.wb-viewport[data-panning="true"] { cursor: grabbing; }
.wb-viewport[data-tool="sticky"],
.wb-viewport[data-tool="rect"],
.wb-viewport[data-tool="rectFilled"],
.wb-viewport[data-tool="ellipse"],
.wb-viewport[data-tool="ellipseFilled"],
.wb-viewport[data-tool="text"],
.wb-viewport[data-tool="arrow"] { cursor: crosshair; }
.wb-viewport[data-tool="pen"],
.wb-viewport[data-tool="highlighter"] { cursor: crosshair; }
.wb-viewport[data-tool="eraser"] { cursor: not-allowed; }

.wb-canvas {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

.wb-svg-layer {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
}

.wb-elements-layer {
    position: absolute;
    left: 0;
    top: 0;
}

.wb-el {
    position: absolute;
    box-sizing: border-box;
    cursor: move;
    user-select: none;
}

.wb-el.wb-el-selected {
    outline: 2px solid #4338ca;
    outline-offset: 2px;
}

/* Ogni elemento è un nodo esterno posizionato (drag/resize) con dentro
   un'unica label interna contenteditable (.wb-el-inner) — mai contenteditable
   sul nodo esterno stesso, vedi il commento su createNodeForElement() in
   whiteboard_engine.js. */
.wb-el-inner {
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    cursor: text;
}

.wb-el-sticky {
    border-radius: 6px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.16), 0 1px 3px rgba(0,0,0,0.12);
    padding: 0.4rem;
}

.wb-el-inner-sticky {
    width: 100%;
    height: 100%;
    overflow: auto;
    line-height: 1.35;
}

.wb-el-rect {
    background: transparent;
    border: 2px solid #334155;
    border-radius: 4px;
    padding: 4px;
}

.wb-el-ellipse {
    background: transparent;
    border: 2px solid #334155;
    border-radius: 50%;
    padding: 4px;
}

.wb-el-inner-rect,
.wb-el-inner-ellipse {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 13px;
    overflow: auto;
}

/* Immagine incollata direttamente sulla lavagna (vedi createImageElement() in
   whiteboard_engine.js): bordo sempre trasparente, nessuna label. */
.wb-el-image {
    background: transparent;
    border: none;
    padding: 0;
    line-height: 0;
}

.wb-el-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

/* Il testo libero non ha una scatola fissa: il nodo esterno è width/height
   'auto' (vedi styleShapeNode() in whiteboard_engine.js) e si adatta al
   contenuto della label, senza padding che creerebbe un secondo riquadro
   visibile intorno al testo. */
.wb-el-text {
    background: transparent;
    padding: 0;
    /* Riquadro vuoto un po' più largo del solo testo (che si adatterebbe
       altrimenti a ~20px): la maniglia di spostamento (20px, in basso a
       sinistra) copre quasi per intero un box così piccolo, nascondendo il
       punto dove appare la prima lettera digitata appena creato l'elemento. */
    min-width: 110px;
    min-height: 30px;
    /* Un carattere di margine sopra e sotto: altrimenti i tondini con le frecce (maniglie) coprono la prima lettera. */
    padding: 18px 0;
}

.wb-el-inner-text {
    display: inline-block;
    /* mai pre-wrap: con un genitore anch'esso a larghezza automatica, un
       figlio inline-block che PUÒ andare a capo fa collassare lo
       shrink-to-fit del genitore al solo min-width (bug verificato in
       Chrome) — il testo finiva su una colonna stretta, una lettera per
       riga. "pre" mantiene gli a-capo espliciti ma non va mai a capo da
       solo: coerente con un box che si adatta sempre al contenuto. */
    white-space: pre;
    min-width: 20px;
    min-height: 1.2em;
}

.wb-resize-handle {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #4338ca;
    border: 2px solid #fff;
    cursor: nwse-resize;
    z-index: 2;
}

.wb-move-handle {
    position: absolute;
    left: -5px;
    bottom: -5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #4338ca;
    color: #fff;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: move;
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    z-index: 2;
}

.wb-move-handle svg {
    /* Un <svg> inline dentro un contenitore flex mantiene una propria
       baseline di testo anche con align-items:center — display:block lo
       toglie dal flusso di testo e lo centra davvero nel pallino. */
    display: block;
}

/* --- Timer / Cronometro (template) --- */
.wb-el-timer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    background: #fff;
    border: 2px solid #334155;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    padding: 0.6rem;
    cursor: move;
}

.wb-timer-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #6b7280;
}

.wb-timer-display {
    font-size: 2rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #1f2937;
}

.wb-el-timer.wb-timer-done .wb-timer-display { color: #dc2626; }

.wb-timer-controls {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.wb-timer-btn {
    border: 1px solid #e5e7eb;
    background: #f8fafc;
    border-radius: 6px;
    padding: 0.25rem 0.55rem;
    font-size: 0.78rem;
    cursor: pointer;
    color: #374151;
}

.wb-timer-btn:hover { background: #f1f5f9; }

.wb-timer-btn-primary {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
    font-weight: 600;
}

.wb-timer-btn-primary:hover { background: #372ea8; }

.wb-cursor-hint {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(17,24,39,0.85);
    color: #fff;
    font-size: 0.78rem;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.wb-cursor-hint[data-visible="true"] { opacity: 1; }

/* --- Finestra flottante "Dadi": si sposta dall'intestazione, si ingrandisce/rimpicciolisce dall'angolo in basso a destra
   (resize nativo); i dadi si ridimensionano con la finestra (assets/js/whiteboard-dice.js). --- */
.wb-dice-window {
    position: fixed;
    left: 1rem;
    top: 5rem;
    width: 320px;
    height: 300px;
    min-width: 220px;
    min-height: 240px;
    max-width: 96vw;
    max-height: 92vh;
    z-index: 60;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    resize: both;
    overflow: hidden;
}
.wb-dice-window[hidden] { display: none; }
.wb-dice-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.5rem 0.35rem 0.75rem;
    background: #f1f5f9; border-bottom: 1px solid #e5e7eb;
    font-weight: 600; font-size: 0.9rem; cursor: move; user-select: none; touch-action: none;
}
.wb-dice-head svg { width: 18px; height: 18px; vertical-align: -3px; }
.wb-dice-head-actions { display: inline-flex; align-items: center; gap: 2px; }
.wb-dice-gear { border: none; background: none; font-size: 1.15rem; line-height: 1; cursor: pointer; color: #475569; padding: 0 0.3rem; }
.wb-dice-gear[aria-expanded="true"] { color: #0891b2; }
.wb-dice-controls[hidden] { display: none; }
.wb-dice-close { border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #475569; padding: 0 0.3rem; }
.wb-dice-controls { display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; align-items: flex-end; padding: 0.5rem 0.75rem; font-size: 0.78rem; color: #475569; }
.wb-dice-controls label { display: flex; flex-direction: column; gap: 2px; }
.wb-dice-controls input[type=number] { width: 4.2rem; padding: 0.25rem; font-size: 0.95rem; border: 1px solid #cbd5e1; border-radius: 6px; text-align: center; }
.wb-dice-stepper { display: inline-flex; align-items: center; gap: 2px; }
.wb-dice-stepper button { width: 26px; height: 28px; border: 1px solid #cbd5e1; background: #fff; border-radius: 6px; cursor: pointer; font-size: 1rem; }
.wb-dice-stepper input { width: 3rem !important; }
.wb-dice-presets { display: flex; flex-wrap: wrap; gap: 3px; flex-basis: 100%; }
.wb-dice-presets button { border: 1px solid #cbd5e1; background: #fff; border-radius: 999px; padding: 0.1rem 0.5rem; font-size: 0.75rem; cursor: pointer; }
.wb-dice-presets button.active { background: #e0f2fe; border-color: #0891b2; color: #0e7490; }
.wb-dice-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0.5rem; outline-offset: -3px; }
.wb-dice-tray { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: var(--die-gap, 8px); }
.wb-die {
    box-sizing: border-box; width: var(--die, 64px); height: var(--die, 64px);
    display: grid; place-items: center;
    background: #fff; border: 2px solid #334155; border-radius: calc(var(--die, 64px) * 0.18);
    box-shadow: 0 2px 0 #cbd5e1; font-weight: 700; color: #0f172a;
    font-size: calc(var(--die, 64px) * 0.45); font-variant-numeric: tabular-nums;
}
.wb-die.wb-die-six { grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: calc(var(--die, 64px) * 0.12); }
.wb-die-pip { width: 70%; height: 70%; align-self: center; justify-self: center; border-radius: 50%; background: #0f172a; }
.wb-die.wb-die-n { background: #ecfeff; border-color: #0891b2; }
.wb-die.wb-die-rolled { animation: wbDiceRoll 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes wbDiceRoll { from { transform: rotate(-120deg) scale(0.7); opacity: 0.35; } to { transform: rotate(0) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wb-die.wb-die-rolled { animation: none; } }
.wb-dice-foot { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0.75rem; border-top: 1px solid #e5e7eb; font-size: 0.78rem; color: #64748b; }
.wb-dice-foot strong { color: #0f172a; font-size: 1rem; }

/* --- Cornice "Apri in Lavagna" (assets/js/whiteboard-embed.js): vive dentro la tela, quindi segue pan e zoom; sta SOTTO il livello
   dei tratti (penna, frecce) e sotto note e testi, così si può scrivere sopra e intorno. --- */
.wb-embed-layer { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; }   /* z-index: 0 = contesto proprio, così gli z-index delle cornici non le portano sopra i tratti */
.wb-embed-frame { box-sizing: border-box; position: absolute; display: flex; flex-direction: column; background: #fff; border: 2px solid #0891b2; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.18); overflow: hidden; }
.wb-embed-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 4px 10px; background: #ecfeff; color: #0e7490; font-size: 13px; font-weight: 600; cursor: move; user-select: none; touch-action: none; }
.wb-embed-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-embed-head a, .wb-embed-head button { color: #0e7490; font-size: 12px; font-weight: 500; text-decoration: underline; background: none; border: none; cursor: pointer; padding: 0 4px; }
.wb-embed-head .wb-embed-fit { display: inline-flex; align-items: center; padding: 0 4px; color: var(--color-primary, #0891b2); text-decoration: none !important; }
.wb-embed-head .wb-embed-close { display: inline-flex; align-items: center; padding: 0 4px; text-decoration: none !important; }
.wb-embed-actions { display: inline-flex; align-items: center; gap: 4px; }
.wb-embed-head .wb-embed-fit svg, .wb-embed-head .wb-embed-close svg { display: block; }
.wb-embed-body { flex: 1; min-height: 0; position: relative; }
.wb-embed-body iframe, .wb-embed-body img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.wb-embed-body img { object-fit: contain; }
.wb-embed-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, #0891b2 50%, #0891b2 58%, transparent 58%, transparent 70%, #0891b2 70%, #0891b2 78%, transparent 78%); }
/* Il motore disegna solo se il clic arriva alla tela: la cornice è «trasparente» al mouse (si scrive sopra con qualunque strumento), solo
   intestazione e maniglia restano cliccabili. Con «Scorri pagina» (.wb-embed-live) la cornice diventa interattiva con qualunque strumento
   (si torna a scrivere con «Torna alla lavagna»). */
.wb-embed-frame { pointer-events: none; }
.wb-embed-head, .wb-embed-resize { pointer-events: auto; }
.wb-embed-frame.wb-embed-live { pointer-events: auto; }
.wb-embed-layer[data-moving="true"] iframe { pointer-events: none; }
.wb-embed-mode { display: inline-flex; border: 2px solid var(--color-primary, #0891b2); border-radius: 999px; overflow: hidden; vertical-align: middle; margin: 0 4px; }
.wb-embed-head .wb-embed-mode-btn { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; font-size: 13px; font-weight: 700; text-decoration: none; background: #fff; color: var(--color-primary, #0891b2); border: none; cursor: pointer; }
.wb-embed-head .wb-embed-mode-btn.active { background: var(--color-primary, #0891b2); color: #fff; }

/* "Apri documento": elenco dei documenti dell'insegnante, sopra il pulsante nel pannello in basso a destra. */
.wb-doc-wrap { position: relative; }
.wb-doc-menu { position: absolute; right: 0; bottom: 42px; width: 260px; max-height: 300px; overflow-y: auto; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.16); padding: 4px; z-index: 70; }
.wb-doc-menu[hidden] { display: none; }
.wb-doc-item { display: block; width: 100%; text-align: left; border: none; background: none; padding: 0.45rem 0.6rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wb-doc-item:hover { background: #f1f5f9; }
.wb-doc-empty { margin: 0; padding: 0.5rem 0.6rem; font-size: 0.8rem; color: #64748b; white-space: normal; }
.wb-doc-head { margin: 6px 8px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }

/* --- Tastiera a comparsa (assets/js/whiteboard-keyboard.js) --- */
.wb-keyboard { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); width: 432px; z-index: 1200; background: #fff; border: 1px solid #cbd5e1; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.25); overflow: hidden; user-select: none; touch-action: none; }
.wb-keyboard[hidden] { display: none; }
.wb-kb-inner { width: 720px; }
.wb-kb-resize { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 50%, #94a3b8 50%, #94a3b8 58%, transparent 58%, transparent 70%, #94a3b8 70%, #94a3b8 78%, transparent 78%); }
.wb-kb-fmt { display: flex; align-items: center; gap: 4px; padding: 4px 6px; background: #f8fafc; border-top: 1px solid #cbd5e1; }
.wb-kb-fmt-btn { width: 54px; height: 48px; border: none; background: #fff; border-radius: 8px; color: #0f172a; cursor: pointer; padding: 8px; }
.wb-kb-fmt-btn svg { width: 100%; height: 100%; }
.wb-kb-color-dot { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1.5px #64748b; cursor: pointer; padding: 0; flex: none; margin: 0 4px; }
.wb-kb-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 6px 8px; background: #f8fafc; border-top: 1px solid #e2e8f0; }
.wb-kb-colors[hidden] { display: none; }
.wb-kb-color { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; padding: 0; }
.wb-kb-color[data-active="true"] { outline: 2px solid #4338ca; outline-offset: 2px; }
.wb-kb-fmt-btn:active { background: #e2e8f0; }
.wb-kb-fmt-size { height: 48px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font-size: 18px; padding: 0 6px; }
.wb-kb-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 4px 12px; background: #f1f5f9; color: #475569; font-size: 13px; font-weight: 600; cursor: move; }
.wb-kb-close { border: none; background: none; font-size: 22px; line-height: 1; color: #475569; cursor: pointer; padding: 0 8px; }
.wb-kb-strip { display: flex; height: 52px; border-top: 1px solid #cbd5e1; border-bottom: 1px solid #cbd5e1; }
.wb-kb-strip-cell { flex: 1; border: none; background: #fff; font-size: 28px; font-weight: 400; color: #0f172a; cursor: pointer; }
.wb-kb-strip-cell:active { background: #e2e8f0; }
.wb-kb-keys { padding: 6px 4px 8px; }
.wb-kb-row { display: flex; }
.wb-kb-key { flex: 1; min-width: 0; height: 54px; border: none; background: #fff; border-radius: 8px; font-family: inherit; font-weight: 400; font-size: 26px; line-height: 1; color: #0f172a; cursor: pointer; padding: 0; }
.wb-kb-key:active { background: #e2e8f0; }
.wb-kb-fn { background: #fff; }
.wb-kb-key svg { display: block; margin: 0 auto; }
.wb-kb-space { font-size: 22px; letter-spacing: .08em; }
.wb-kb-space::before { content: ''; }
.wb-kb-enter { font-size: 28px; }

/* Pulsante Modifica in basso a sinistra sulla lavagna pubblica, solo per l'admin loggato. */
.wb-edit-fab { position: fixed; left: 16px; bottom: 16px; z-index: 900; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-primary, #0891b2); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); text-decoration: none; }
.wb-edit-fab svg { width: 12px; height: 12px; }


/* Dito/penna: un riquadro (testo, post-it, forma) si trascina senza che il browser scorra la pagina (vedi whiteboard-touch.js). */
.wb-el { touch-action: none; }


/* Maniglia sul lato destro del testo libero: sceglie la larghezza, le righe vanno a capo dentro. */
.wb-width-handle {
    position: absolute;
    right: -6px;
    top: 50%;
    width: 11px;
    height: 30px;
    margin-top: -15px;
    border-radius: 6px;
    background: #4338ca;
    border: 2px solid #fff;
    cursor: ew-resize;
    z-index: 2;
}

/* Finestra «Immagine da Wikimedia Commons» (assets/js/games-image-picker.js): in basso a sinistra, senza coprire la lavagna con uno sfondo scuro. */
.emoji-picker-overlay { position: fixed; left: 12px; bottom: 12px; z-index: 100000; align-items: flex-end; justify-content: flex-start; }
.emoji-picker-panel {
    display: flex; flex-direction: column; overflow: hidden;
    width: min(36rem, calc(100vw - 24px)); max-height: min(70vh, 560px);
    background: #fff; color: #1f2937; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.3);
}
.emoji-picker-header { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid #eee; }
.emoji-picker-header .form-input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: .9rem; }
.emoji-picker-close { border: none; background: none; font-size: 1.4rem; line-height: 1; cursor: pointer; color: #6b7280; }
.image-picker-filters { display: flex; gap: 6px; padding: 8px 12px 0; }
.image-picker-filter-btn { border: none; background: #f3f4f6; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: .8rem; color: #374151; }
.image-picker-filter-btn[data-active="true"] { background: var(--color-primary); color: #fff; }
.image-picker-results { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; padding: 12px; }
.image-picker-card { border: 1px solid #ddd; border-radius: 8px; padding: 0; overflow: hidden; cursor: pointer; aspect-ratio: 1; background: #f3f4f6; }
.image-picker-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.image-picker-detail { padding: 16px; text-align: center; overflow-y: auto; }
.image-picker-detail .form-actions { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
.image-picker-pager { display: flex; justify-content: space-between; padding: 10px 12px; border-top: 1px solid #eee; }
.emoji-picker-panel .btn { border: none; border-radius: 999px; padding: 8px 16px; font-size: .9rem; font-weight: 600; cursor: pointer; background: #eee; color: #374151; }
.emoji-picker-panel .btn:hover { background: #e2e2e2; }
.emoji-picker-panel .btn-primary { background: var(--color-primary); color: #fff; }
.emoji-picker-panel .empty-state { color: #6b7280; text-align: center; font-size: .85rem; }

/* Schermo intero (barra in alto): due icone, ne compare una sola. */
.wb-toolbar-btn .wb-fs-enter, .wb-toolbar-btn .wb-fs-exit { display: inline-flex; }
.wb-toolbar-btn .wb-fs-exit, #wbFullscreenBtn[data-fs="true"] .wb-fs-enter { display: none; }
#wbFullscreenBtn[data-fs="true"] .wb-fs-exit { display: inline-flex; }
.wb-toolbar-btn[hidden] { display: none; }
.wb-fs-enter svg, .wb-fs-exit svg { width: 20px; height: 20px; display: block; }
/* Sulla riga del cestino ma a destra. */
#wbFullscreenBtn { margin-left: auto; }