.comb-app, .comb-app * {
    box-sizing: border-box;
}

/* Il canvas del knob DELAY/DISTANCE (CompDisplayKnobs.js) riceve la sua
   dimensione CSS UNA volta sola alla creazione (canvas.style.width/height,
   impostati dentro CompDisplayKnobs.create(96,96) e mai più aggiornati:
   resize() cambia solo la risoluzione interna del bitmap, non la
   dimensione visualizzata). Su desktop il wrapper è anch'esso 96px, quindi
   coincidono per caso; appena il wrapper cambia dimensione (es. su mobile,
   vedi sotto) il canvas resta fisso alla sua dimensione di creazione e si
   vede "schiacciato" nel wrapper più piccolo. Stesso identico fix già
   usato in Compressor/Gate/Limiter (.knob-wrapper canvas in
   apps/CompDisplay/css/style_compDisplay.css): forzare il canvas a
   riempire sempre il 100% del wrapper, qualunque dimensione abbia. */
.cf-knob-wrapper canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
}

.comb-app {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;        /* era 100vh: sbagliato dentro un contenitore già vincolato */
    margin: 0;
    background-color: #000;
    overflow: hidden;    /* Fondamentale: nulla deve uscire da qui */
    border-radius: 15px; /* allineato a Compressor e Overtones Generator */
    border: 1px solid #333;
    color: #eee;
    font-family: 'Lato', sans-serif;
}

/* HEADER: 50px desktop, allineato a CompDisplay/OvertonesGenerator per
   uniformare l'altezza dei 3 loghi dei tool (vedi override mobile/
   landscape sotto). Prima era tutto inline in CombFilterDisplay.js con
   un hack height:180% arbitrario che non si adattava ai breakpoint:
   ora e' l'altezza del contenitore (.header) a governare tutto, il logo
   segue con height:100%. */
.header {
    height: 50px;
}
.logo-container {
    height: 100%;
    display: flex;
    align-items: center;
    min-width: 0;   /* rete di sicurezza: si restringe se manca spazio */
    overflow: hidden;
}
.comb-display-logo {
    height: 100%;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

.main-view {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 15px;
    background: #000;
    min-height: 0;        /* Permette al flex-item di non espandersi */
    overflow: hidden;     /* Sigilla il contenuto interno */
}

.canvas-wrapper {
    flex: 1;
    position: relative;
    border: 1px solid #fff; /* Riga bianca attorno al canvas */
    background: #050505;
    border-radius: 0px;    /* Rimosso arrotondamento per stile tecnico */
    overflow: hidden;
    min-height: 0;
}

.canvas-wrapper.spectrum {
    flex: 1.5;
}

.canvas-label {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;      /* Box bianco come Overtone */
    color: #000;           /* Testo nero nel box */
    font-size: 9px;
    font-weight: 900;
    padding: 2px 8px;
    letter-spacing: 1px;
    z-index: 5;
    text-transform: uppercase;
}

canvas { 
    width: 100%; 
    height: 100%; 
    display: block; 
}

.control-panel {
    width: 260px;
    background: #1d2424; /* stessa differenziazione di sfondo di .area-knobs
      nel Compressor (CompDisplay), invece del quasi-nero di prima */
    border-left: 1px solid #222;
    display: flex;
    flex-direction: column;
    justify-content: center; /* le 3 righe sono compatte, il pannello no:
      centrarle verticalmente usa lo spazio libero invece di lasciarle
      tutte ammassate in alto (vedi override mobile: li' torna flex-start) */
    padding: 24px 20px;
    gap: 24px;
    flex-shrink: 0;
    min-height: 0;       /* evita overflow verticale */
}

/* =========================================================
   RIGHE ORIZZONTALI DEI CONTROLLI (desktop + mobile: stessa
   organizzazione su richiesta esplicita, non solo su mobile).
   PLAY (1/4) + VOLUME (3/4) sopra; PHASE/MODE/RESET in riga sotto;
   DELAY/DISTANCE affiancati in fondo. Il box "Physics Ref" è stato
   rimosso. Le dimensioni qui sotto sono quelle desktop (respiro
   comodo, il pannello ha molto spazio verticale libero); il blocco
   "GUSCIO MOBILE" più sotto le stringe per il telefono, dove lo
   spazio è invece scarso. */
.row-play-volume {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}
.play-btn {
    /* Dimensioni allineate al pulsante PLAY dell'Overtones Generator
       (#btn-play-audio: height:28px, font-size:11px, niente letter-spacing). */
    flex: 0 0 25%;
    min-width: 0;
    height: 28px;
    background: #0ff;
    color: #000;
    border: none;
    padding: 0 4px;
    font-weight: 900;
    cursor: pointer;
    border-radius: 4px;
    font-size: 11px;
    text-transform: uppercase;
}
.volume-group {
    flex: 1;
    min-width: 0;
}
.volume-group label {
    color: #666;
    font-size: 10px;
    font-weight: 900;
    display: block;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.volume-group input[type="range"] {
    width: 100%;
    accent-color: #0ff;
    cursor: pointer;
}

/* Desktop: PHASE e MODE affiancati (metà riga ciascuno via flex-basis),
   RESET con flex-basis:100% non ci sta più accanto a loro e va a capo da
   solo sulla riga sotto (flex-wrap, nessun HTML diverso tra desktop e
   mobile: solo l'override mobile più sotto forza tutti e 3 sulla stessa
   riga come prima, invariato). */
.row-3btn {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* Stile condiviso di PHASE/MODE/RESET: altezza/font allineati ai pulsanti
   RANDOM TIMBRE/RESET dell'Overtones Generator (.knobs-top-bar button:
   height:36px, font-size:10px). */
.ctrl-btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    height: 36px;
    background: #222;
    color: #0ff;
    border: 1px solid #444;
    padding: 0 4px;
    cursor: pointer;
    font-weight: 900;
    font-size: 10px;
    letter-spacing: 0.5px;
    border-radius: 4px;
    text-align: center;
}

/* Nuovo stile per il tasto Reset (transizioni/hover invariati);
   .row-3btn .reset-btn sovrascrive dimensioni/margini del vecchio
   stile a piena larghezza e forza il wrap (flex-basis:100%) sulla
   propria riga, sotto PHASE/MODE. */
.reset-btn {
    background: transparent;
    color: #0ff; /* Ciano per visibilità */
    border: 1px solid #0ff;
    font-weight: 900;
    cursor: pointer;
    border-radius: 4px;
    text-transform: uppercase;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.row-3btn .reset-btn {
    flex: 1 1 100%;
    height: 36px;
    padding: 0 4px;
    font-size: 10px;
    letter-spacing: 0.5px;
}

.reset-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.2);
    transform: translateY(-1px);
}

.reset-btn:active {
    background: #0ff;
    color: #000;
    transform: translateY(0);
}

/* Reset input number */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] { -moz-appearance: textfield; }

/* =========================================================
   GUSCIO MOBILE (comb filter)
   Stesso pattern degli altri due effetti: da riga (grafici +
   colonna destra) a colonna, canvas ad altezza fissa. Qui non
   c'è drag sui canvas (solo bottoni/slider/input nativi, già
   touch-friendly di default): serve solo il layout.
   .main-view, .canvas-wrapper e .control-panel hanno flex/width
   impostati inline in CombFilterDisplay.js: servono !important
   per sovrascriverli da qui.
   ========================================================= */
@media (max-width: 768px) {
    /* height:100% (non piu' auto) + overflow:hidden: .comb-app deve riempire
       esattamente il budget dato da #effect-mount (calcolato in
       css/style_page.css), non "adattarsi al contenuto". Con height:auto,
       .main-view (flex:1 inline, mai sovrascritto) e .control-panel
       finivano per sovrapporsi invece di impilarsi puliti — stesso bug gia'
       risolto per Overtones Generator (vedi commento in
       style_OvertonesGenerator.css), qui non era ancora stato applicato. */
    .comb-app {
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    /* Altezza header uniformata a 44px (come CompDisplay/OvertonesGenerator). */
    .header {
        height: 44px;
    }

    /* flex:1 inline (da CombFilterDisplay.js) sovrascritto: .main-view deve
       restare alla sua dimensione naturale (header + 2 canvas ad altezza
       fissa), non contendersi lo spazio con .control-panel — e' questo
       "!important" che elimina la sovrapposizione. */
    .main-view {
        flex: 0 0 auto !important;
        padding: 10px !important;
        gap: 10px !important;
        overflow: hidden;
    }

    .canvas-wrapper {
        flex: none !important;
        height: 140px;
    }

    /* flex:1 + min-height:0: .control-panel prende tutto lo spazio verticale
       rimasto sotto .main-view, entro l'altezza fissa di .comb-app.
       overflow-y:auto è l'UNICO scroll di tutta questa colonna (vedi
       .cf-controls-block/.cf-controls-rows qui sotto): se il contenuto non
       basta, scorre da qui, non prima. */
    .control-panel {
        width: 100% !important;
        border-left: none !important;
        border-top: 1px solid #222;
        justify-content: flex-start; /* su mobile niente centratura: si parte
          dall'alto, come sempre su schermi piccoli */
        padding: 12px !important;
        gap: 10px;
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    /* BUGFIX: .cf-controls-block e .cf-controls-rows hanno inline (da
       CombFilterDisplay.js) flex:1 + min-height:0 + (solo cf-controls-rows)
       overflow-y:auto — pensati per il desktop, dove il pannello ha
       spazio. Su mobile questo creava un secondo scroll ANNIDATO dentro
       .control-panel: cf-controls-rows si schiacciava al poco spazio
       residuo (sotto VIEW OPT, che è flex-shrink:0) e apriva una propria
       barra di scroll minuscola — con "justify-content:center" ereditato
       da cf-controls-rows, la riga PLAY/VOLUME finiva sopra l'area
       visibile e raggiungibile solo scorrendo DENTRO quel riquadro
       piccolo, non nella pagina. Risultato: sembrava "collassato".
       Fix: su mobile questi due contenitori tornano ad altezza naturale
       (flex:0 0 auto, niente overflow proprio) e partono dall'alto — tutto
       il contenuto scorre insieme con l'UNICO scroll di .control-panel. */
    .cf-controls-block {
        flex: 0 0 auto !important;
        min-height: auto !important;
    }
    .cf-controls-rows {
        flex: 0 0 auto !important;
        min-height: auto !important;
        overflow-y: visible !important;
        justify-content: flex-start !important;
    }

    /* Righe PLAY/VOLUME, PHASE/MODE/RESET, DELAY/DISTANCE: stessa
       organizzazione del desktop, ma qui lo spazio è scarso — testo e
       controlli tornano compatti (dimensioni già verificate su device
       reale). */
    .row-play-volume {
        gap: 6px;
    }
    .play-btn {
        height: 30px;
        font-size: 9px;
        padding: 0 3px;
    }
    .volume-group label {
        font-size: 8px;
        margin-bottom: 3px;
    }
    /* Su mobile PHASE/MODE/RESET tornano tutti e 3 sulla stessa riga
       (nessun wrap, un terzo di riga ciascuno) — comportamento già
       approvato, diverso solo dal desktop qui sopra. */
    .row-3btn {
        flex-wrap: nowrap;
        gap: 5px;
    }
    .ctrl-btn,
    .row-3btn .reset-btn {
        flex: 1 1 0;
        height: auto;
        padding: 6px 2px;
        font-size: 8px;
        letter-spacing: 0.3px;
    }
    /* DELAY/DISTANCE (knob) + diagramma a blocchi: su desktop sono
       impilati verticalmente (vedi .cf-knob-diagram-row inline in
       CombFilterDisplay.js); qui diventano una riga per risparmiare
       spazio verticale, che su mobile è quello scarso — knob con i
       selettori ms/cm SOTTO (non più a fianco) a sinistra, diagramma a
       blocchi rimpicciolito a destra. Il diagramma resta comunque solo
       indicativo a quella dimensione, non serve leggibilità piena. */
    .cf-knob-diagram-row {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .cf-knob-row {
        flex-direction: column !important;
        gap: 6px !important;
        flex: 0 0 auto !important;
    }
    .cf-unit-toggle {
        flex-direction: row !important;
        gap: 6px !important;
        justify-content: center !important;
    }
    #blockDiagram {
        width: auto !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: 90px !important;
        border-top: none !important;
        padding-top: 0 !important;
    }

}

/* ============================================================
   TELEFONO/TABLET VERTICALE SOLO — "and (orientation:portrait)" in più
   rispetto al blocco @media (max-width:768px) qui sopra, apposta per non
   toccare mai il landscape (che ha già il suo blocco separato più sotto).

   NB: qui NON tocchiamo più #effect-mount. Un tentativo precedente lo
   rendeva più alto togliendo "chrome" dal calcolo (100svh - Npx con N più
   piccolo): risultato, il tool sforava lo schermo e faceva scorrere la
   PAGINA intera — esattamente il comportamento che il sito è pensato per
   evitare (vedi commento su #effect-mount in css/style_page.css). La
   strada giusta è l'opposto: tenere #effect-mount con il suo budget
   normale e STRINGERE il contenuto interno perché ci stia, lasciando
   all'occorrenza solo lo scroll interno di .control-panel (già presente,
   un solo livello, non più annidato) come rete di sicurezza finale. */
@media (max-width: 768px) and (orientation: portrait) {
    .cf-section-label-bar {
        padding: 3px 0 !important;
        margin-bottom: 2px !important;
    }
    .cf-right-labels {
        font-size: 8px !important;
        padding: 1px 8px !important;
        letter-spacing: 0.5px !important;
    }

    /* Canvas dei grafici (TIME DOMAIN / SPECTRUM): priorità massima su
       mobile verticale, per esplicita richiesta dell'utente — ogni pixel
       recuperato stringendo knob/diagramma e VIEW OPT qui sotto viene
       spostato qui. 116 -> 132px (+16px per canvas, +32px totali su
       .main-view visto che i canvas sono due). */
    .canvas-wrapper {
        height: 132px !important;
    }

    /* Righe/gap del pannello controlli più compatte: l'inline (24px gap,
       24px padding verticale) è pensato per il desktop, dove lo spazio
       non manca. */
    .cf-controls-rows {
        gap: 14px !important;
        padding: 12px 14px !important;
    }

    /* Knob e diagramma ridotti (92 -> 78px / 104 -> 86px): il knob a 92px
       risultava troppo grande rispetto al resto dei controlli. Il
       diagramma resta comunque più largo che a 74px (il valore di
       partenza prima del giro precedente), niente più "letterboxing"
       marcato — solo un po' più compatto per lasciare spazio ai grafici
       sopra, che qui è la priorità. */
    .cf-knob-wrapper {
        width: 78px !important;
    }

    /* PERCHÉ SEMBRAVA "TUTTO A SINISTRA": #blockDiagram era flex:1 1 auto
       (dal blocco @media 768 generale), quindi si allargava a riempire
       TUTTO lo spazio residuo della riga — molto più largo del disegno
       SVG vero e proprio (viewBox 246x108, preserveAspectRatio
       xMidYMid meet), che a parità di altezza resta più stretto. Il
       disegno finiva sì centrato DENTRO quel riquadro invisibile, ma il
       riquadro stesso era enormemente più largo del necessario: il
       risultato visivo era un grande vuoto a destra, letto come "tutto
       convergente a sinistra". Fix: il riquadro ora è largo ESATTAMENTE
       quanto il disegno (flex:0 0 auto + aspect-ratio uguale al viewBox,
       niente più flex:1), e la riga (.cf-knob-diagram-row, sotto) centra
       knob+diagramma insieme nello spazio disponibile. */
    #blockDiagram {
        height: 86px !important;
        flex: 0 0 auto !important;
        width: auto !important;
        aspect-ratio: 246 / 108;
    }
    .cf-knob-diagram-row {
        justify-content: center !important;
    }

    /* VIEW OPT: stessa altezza pulsanti di PHASE/BYPASS/RESET (.ctrl-btn,
       che su mobile è padding:6px + font 8px + bordi, ~24px totali) invece
       del blocco più alto del giro precedente — anche qui i pixel
       recuperati vanno ai canvas, non restano qui. */
    #view-controls-container {
        padding: 8px 10px 10px !important;
        gap: 4px !important;
    }
    .cf-view-btn {
        min-height: 24px !important;
    }
}

/* ============================================================
   TELEFONO IN LANDSCAPE — stesso schema di style_compDisplay.css
   (.area-knobs): il pannello controlli resta a riga accanto ai canvas
   (mai impilato sotto come in portrait) e la sua larghezza è calcolata
   dalla sola ALTEZZA disponibile (unità svh), mai dalla larghezza del
   contenitore — così non si stira/restringe mai al variare dello
   spazio, sono i due canvas-wrapper (flex inline, invariati) a
   guadagnare o perdere la larghezza residua.

   NB: .control-panel, .main-view e i due canvas-wrapper hanno flex/
   padding impostati INLINE in CombFilterDisplay.js (e .cf-view-btn/
   .cf-right-labels sono definiti in un <style> iniettato anch'esso
   dentro CombFilterDisplay.js, quindi più "recente" nel cascade di
   questo file esterno): servono !important per vincere in entrambi i
   casi, esattamente come nel blocco @media (max-width:768px) qui sopra.

   #blockDiagram (il diagramma a blocchi sotto i controlli) viene
   nascosto qui: a un'altezza budget di ~300px totali (vedi
   #effect-mount in css/style_page.css, calc(100svh - 100px)) non c'è
   spazio per tenerlo senza forzare uno scroll — resta visibile su
   desktop e su mobile in portrait, dove lo spazio verticale non manca. */
@media (orientation: landscape) and (max-height: 500px) {
    .comb-app {
        flex-direction: row !important;
    }

    .header {
        height: 30px;
    }

    .main-view {
        padding: 8px !important;
        gap: 8px !important;
    }

    .control-panel {
        width: 44svh;
        min-width: 200px;
        max-width: 230px;
        height: 100%;
    }

    .cf-right-labels {
        font-size: 8px !important;
        padding: 1px 8px !important;
    }

    .cf-controls-rows {
        gap: 8px !important;
        padding: 8px 10px !important;
    }

    .row-play-volume {
        gap: 6px;
    }
    .play-btn {
        height: 22px;
        font-size: 8px;
        padding: 0 3px;
    }
    .volume-group label {
        font-size: 7px;
        margin-bottom: 2px;
    }

    .row-3btn {
        flex-wrap: nowrap;
        gap: 4px;
    }
    .ctrl-btn,
    .row-3btn .reset-btn {
        height: 22px;
        font-size: 7px;
        padding: 2px;
        letter-spacing: 0.2px;
    }

    /* Diagramma a blocchi nascosto qui (vedi commento sopra il blocco
       @media): il knob resta l'unico controllo per DELAY/DISTANCE,
       rimpicciolito per stare nel budget verticale ridotto. */
    .cf-knob-wrapper {
        width: 64px !important;
    }
    .cf-unit-btn {
        width: 30px !important;
        min-height: 18px !important;
        font-size: 7px !important;
    }

    #blockDiagram {
        display: none !important;
    }

    #view-controls-container {
        padding: 4px 6px 6px !important;
        gap: 3px !important;
    }
    .cf-view-btn {
        min-height: 20px !important;
        font-size: 7px !important;
        padding: 2px 2px !important;
    }
}