/* Beforeloud — anteprima: palco, cornice iPhone, elementi condivisi fra piattaforme */

.bl-stage{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:200px;
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Inter',system-ui,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;color:#000}
.bl-fitwrap{position:relative;flex:none;overflow:visible}
.bl-fitwrap>*{position:absolute;left:0;top:0}

/* ── telefono ── */
.bl-phone{position:relative;width:390px;height:844px;border-radius:56px;background:#0b0b0d;padding:12px;
  box-shadow:0 0 0 2px #2a2a2e,0 0 0 4px #4a4a50,0 30px 60px -20px rgba(0,0,0,.55)}
.bl-screen{position:relative;width:100%;height:100%;border-radius:44px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.bl-phone[data-theme="dark"] .bl-screen{background:#000}
.bl-btn-side{position:absolute;background:#2a2a2e;border-radius:2px}
.bl-btn-mute{left:-3px;top:118px;width:3px;height:30px}
.bl-btn-volup{left:-3px;top:174px;width:3px;height:58px}
.bl-btn-voldown{left:-3px;top:244px;width:3px;height:58px}
.bl-btn-power{right:-3px;top:196px;width:3px;height:94px}

/* barra di stato */
.bl-status{position:relative;flex:none;height:54px;display:flex;align-items:center;justify-content:space-between;padding:4px 26px 0 36px;
  font-size:16px;font-weight:600;letter-spacing:-.2px;z-index:3}
.bl-status-dark{color:#000}.bl-status-light{color:#fff}
.bl-status-time{min-width:52px}
.bl-status-time.is-hidden{visibility:hidden}
.bl-island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000}
.bl-status-right{display:flex;align-items:center;gap:6px}
.bl-battery{position:relative;width:27px;height:13px;border:1.5px solid currentColor;border-radius:4px;opacity:.95;display:inline-block;margin-left:2px}
.bl-battery::after{content:"";position:absolute;right:-4px;top:3px;width:1.8px;height:5px;background:currentColor;border-radius:0 1px 1px 0;opacity:.5}
.bl-battery i{position:absolute;left:1px;top:1px;bottom:1px;background:currentColor;border-radius:2px;opacity:.9}
.bl-battery.is-low i{background:#ff3b30}
.bl-battery b{position:absolute;inset:0;display:grid;place-items:center;font-size:9px;font-weight:700;mix-blend-mode:difference;color:#fff}

/* scorrimento del feed */
.bl-scroll{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.bl-scroll::-webkit-scrollbar{display:none}

/* schermo intero (stories, reels): il contenuto riempie lo schermo e la barra di stato ci sta sopra */
.bl-screen-full{display:block}
.bl-screen-full .bl-status{position:absolute;left:0;right:0;top:0;z-index:5}
.bl-screen-full>.bl-full{position:absolute;inset:0;width:auto;height:auto}   /* lo schermo nella cornice è 366×820: a 390×844 il contenuto usciva a destra e in basso */
.bl-full{position:relative;width:390px;height:844px;overflow:hidden;background:#000;color:#fff}
.bl-flat-full{width:390px;height:844px;border-radius:44px;background:#000}
.bl-flat-full .bl-full{border-radius:44px}

/* senza cornice */
.bl-flat{width:390px;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 30px -14px rgba(0,0,0,.25)}
.bl-flat[data-theme="dark"]{background:#000}

/* ── elementi condivisi ── */
.bl-avatar{position:relative;border-radius:50%;overflow:hidden;background:#e5e5e5;display:grid;place-items:center;flex:none;color:#555;font-weight:600;font-size:12px}
.bl-avatar img{width:100%;height:100%;object-fit:cover;display:block}
[data-theme="dark"] .bl-avatar{background:#262626;color:#bbb}

.bl-video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* Media con proporzioni diverse dal riquadro: intero, con lo stesso media sfocato dietro */
.bl-letterbox{position:relative;overflow:hidden;background:#111}
.bl-letterbox>img.bl-blurbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(28px) saturate(1.15) brightness(.85);transform:scale(1.2);pointer-events:none}
.bl-letterbox>img:not(.bl-blurbg),.bl-letterbox>video{position:relative;object-fit:contain!important}
.bl-soundbtn{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(0,0,0,.72);color:#fff;
  display:grid;place-items:center;border:0;cursor:pointer;z-index:2}
.bl-soundbtn .bl-snd-off{display:none}
.bl-soundbtn.is-muted .bl-snd-on{display:none}
.bl-soundbtn.is-muted .bl-snd-off{display:block}

.bl-placeholder{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;padding:40px;color:#7a776f;font:14px Inter,system-ui,sans-serif}
.bl-placeholder b{color:#1c1b19}

/* ── pagina pubblica ── */
body.bl-view{margin:0;height:100vh;height:100dvh;display:flex;flex-direction:column;background:#f3f2ee;font-family:Inter,system-ui,sans-serif;overflow:hidden}
html[data-theme="dark"] body.bl-view{background:#131311}
/* in scuro la cornice del telefono si staccava a fatica dal fondo: bordo più chiaro */
html[data-theme="dark"] .bl-phone{box-shadow:0 0 0 2px #3a3a3e,0 0 0 4px #5a5a60,0 30px 60px -20px rgba(0,0,0,.7)}
body.bl-view .bl-stage{flex:1;min-height:0;height:calc(100vh - 44px);height:calc(100dvh - 44px)}
.bl-viewfoot{flex:none;min-height:44px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:12px;color:#7a776f;padding:6px 16px;text-align:center;flex-wrap:wrap}
.bl-viewfoot-title{font-weight:600;color:#4f4d48}
html[data-theme="dark"] .bl-viewfoot-title{color:#b3b0a7}
.bl-themeswitch{display:inline-flex;padding:3px;border:1px solid #dcdad3;border-radius:8px;background:#fff;gap:2px}
html[data-theme="dark"] .bl-themeswitch{border-color:#33332e;background:#1b1b18}
.bl-themeswitch button{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;min-height:32px;border:0;border-radius:6px;background:none;color:#7a776f;font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.bl-themeswitch button[aria-checked="true"]{background:#2b2a29;color:#fff}
html[data-theme="dark"] .bl-themeswitch button[aria-checked="true"]{background:#eceae4;color:#1c1b19}
.bl-themeswitch button:focus-visible{outline:2px solid #2b2a29;outline-offset:1px}
@media (max-width:560px){
  body.bl-view .bl-stage{height:calc(100vh - 56px);height:calc(100dvh - 56px)}
  .bl-viewfoot{height:56px;min-height:56px;flex-wrap:nowrap;justify-content:space-between;padding:0 14px}
  .bl-viewfoot-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
  .bl-viewfoot-note{display:none}
  /* con il selettore dei canali il titolo lascia spazio alle pillole; il tema resta con le sole icone */
  .bl-viewfoot:has(.bl-chswitch) .bl-viewfoot-title{display:none}
  .bl-viewfoot:has(.bl-chswitch) #themeSwitch button span{display:none}
  .bl-chswitch{overflow-x:auto;max-width:calc(100% - 90px);scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .bl-chswitch::-webkit-scrollbar{display:none}
  .bl-chswitch button{white-space:nowrap}
}

/* Pagina del cliente: invito grande ad attivare l'audio (il browser vieta il suono automatico alla prima apertura) */
.bl-soundprompt{position:fixed;left:50%;bottom:calc(68px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;
  padding:14px 22px;border:0;border-radius:999px;background:#111;color:#fff;font:600 16px/1 Inter,system-ui,sans-serif;white-space:nowrap;
  box-shadow:0 8px 28px rgba(0,0,0,.35);cursor:pointer;-webkit-tap-highlight-color:transparent;animation:blSoundPulse 1.8s ease-in-out infinite}
.bl-soundprompt:focus-visible{outline:3px solid #2fc4b8;outline-offset:3px}
@keyframes blSoundPulse{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
@media (prefers-reduced-motion:reduce){.bl-soundprompt{animation:none}}