/* Portal 0.7 — estilos da tela live (carregado depois de portal-ux.css).
   Telas 14 (Câmeras ao vivo), 15 (Imagem, áudio e gravação) e 16 (Tela cheia). Celular primeiro; só min-width.
   Cores e medidas que o documento dá para estas telas e que não têm variável no projeto entram aqui como --lv-*. */
:root{
 --lv-black:#000;
 --lv-dot:var(--ux-red-fill);
 --lv-thumb-gap:6px;
 --lv-thumb-radius:7px;
 --lv-off-line:var(--ux-track);
 --lv-off-text:#8a97ad;
 --lv-ctrl-bg:var(--ux-deeper);
 --lv-act-h:58px;
 --lv-fs-btn:#141c2c;
 --lv-fs-line:#222e44;
 --lv-glass:rgba(20,28,44,.68);
 --lv-glass-line:rgba(255,255,255,.08);
 --lv-shade:rgba(0,0,0,.72);
 --lv-tab-on:#f2f5fa;
 --lv-tab-on-text:#0b1322;
 --lv-text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.lv{position:relative;min-width:0}
.lv-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------------- Tela 14: cabeçalho ---------------- */
.lv-live .ux-page-head{margin-bottom:var(--space-12)}
.lv-tools{flex:0 0 auto;display:flex;gap:var(--space-8)}
.lv-round{position:relative;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:1px solid var(--ux-control-line);background:var(--ux-control);color:var(--ux-label);display:grid;place-items:center;cursor:pointer}
.lv-round::after{content:"";position:absolute;inset:-2px}
.lv-round:disabled{opacity:.4;cursor:default}
.lv-onair{margin:var(--space-4) 0 0;display:flex;align-items:center;gap:var(--space-8);font-size:12px;line-height:16px;color:var(--ux-muted)}
.lv-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--lv-dot)}
.lv-onair.is-off .lv-dot{background:var(--ux-star)}

/* ---------------- palco ---------------- */
.lv-stage-wrap{position:relative}
.lv-usb-note{margin-bottom:var(--space-12)}
.lv-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-items:start}
.lv-stage.is-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.lv-cell{position:relative;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:zoom-in}
.lv-cell.is-usb{grid-column:1/-1}
.lv-cell.is-enter{animation:lv-in .2s ease-out}
@keyframes lv-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.lv-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:var(--radius-10);overflow:hidden;background:var(--lv-black)}
.lv-frame video{display:block;width:100%;height:100%;object-fit:cover}
.lv-frame-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--ux-star)}
.lv-frame.has-stream>.lv-frame-empty,.lv-fs-frame.has-stream>.lv-frame-empty{display:none}
.lv-cell-name{font-size:12px;line-height:16px;color:var(--ux-label);min-width:0}
.lv-cell-extra{color:var(--ux-muted)}
.lv-cell:focus-visible{outline:2px solid var(--ux-focus);outline-offset:2px;border-radius:var(--radius-10)}
.lv-flash{position:absolute;inset:0;pointer-events:none;background:var(--lv-tab-on);opacity:0;border-radius:var(--radius-10)}
.lv-flash.on{animation:lv-flash .35s ease-out}
@keyframes lv-flash{from{opacity:.55}to{opacity:0}}

/* Câmeras que não abrem / abrindo / acordando: um bloco no lugar das imagens. */
.lv-stage.is-state{display:block}
.lv-state-box{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-8);padding:var(--space-16);border-radius:var(--radius-10);background:var(--ux-card-deep);border:1px solid var(--ux-card-line);text-align:center}
.lv-state-ico{color:var(--ux-muted);display:grid;place-items:center}
.lv-state-title{margin:0;font:500 16px/22px var(--font-display);color:var(--ux-text)}
.lv-state-help{margin:0;max-width:320px;font-size:13px;line-height:20px;color:var(--ux-muted)}
.lv-wake{width:auto;margin-top:var(--space-8);padding:0 var(--space-24)}
.lv-spin{width:24px;height:24px;border-radius:50%;border:2px solid var(--ux-control-line);border-top-color:var(--ux-blue);animation:lv-spin 1s linear infinite}
@keyframes lv-spin{to{transform:rotate(360deg)}}

/* ---------------- área de controle: fixa embaixo no celular ---------------- */
/* Logo abaixo do palco e presa à base da tela quando o palco é mais alto (sticky): sem vão nem espaçador. */
.lv-ctrl{position:-webkit-sticky;position:sticky;bottom:0;z-index:20;margin:var(--space-12) calc(var(--ux-side,16px) * -1) 0;background:var(--lv-ctrl-bg);border-top:1px solid var(--ux-control-line);padding:var(--space-12) var(--space-16) calc(var(--space-16) + env(safe-area-inset-bottom,0px))}
.lv-count{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:24px}
.lv-count-text{font:500 11px/16px var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--ux-eyebrow)}
.lv-link{flex:0 0 auto;min-height:44px;margin:-10px calc(var(--space-4) * -1) -10px 0;padding:0 var(--space-4);border:0;background:none;color:var(--ux-link);font:400 13px var(--font-display);cursor:pointer}
.lv-thumbs{margin-top:var(--space-8);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--lv-thumb-gap)}
.lv-thumbs.is-scroll{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;touch-action:pan-x}
.lv-thumbs.is-scroll::-webkit-scrollbar{display:none}
.lv-thumbs.is-scroll>.lv-thumb{flex:0 0 max(80px,calc((100% - 4 * var(--lv-thumb-gap)) / 4.4))}
.lv-thumb{min-width:0;display:flex;flex-direction:column;gap:var(--space-4);padding:0;border:0;background:none;color:var(--lv-off-text);font:inherit;text-align:left;cursor:pointer}
.lv-thumb-img{position:relative;display:block;aspect-ratio:16/10;border-radius:var(--lv-thumb-radius);overflow:hidden;border:2px solid var(--lv-off-line);background:var(--lv-black)}
.lv-thumb-img video{display:block;width:100%;height:100%;object-fit:cover;opacity:.55}
.lv-thumb-ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--ux-star)}
.lv-thumb-img.has-stream>.lv-thumb-ph{display:none}
.lv-thumb-name{display:flex;align-items:center;gap:2px;min-width:0;font-size:11px;line-height:14px;white-space:nowrap;color:var(--lv-off-text)}
.lv-thumb-check{display:none;flex:0 0 auto;color:var(--ux-blue-soft)}
.lv-thumb.is-on .lv-thumb-img{border-color:var(--ux-blue)}
.lv-thumb.is-on .lv-thumb-img video{opacity:1}
.lv-thumb.is-on .lv-thumb-name{color:var(--ux-text);font-weight:500}
.lv-thumb.is-on .lv-thumb-check{display:inline-flex}
.lv-thumb:focus-visible{outline:2px solid var(--ux-focus);outline-offset:2px;border-radius:var(--lv-thumb-radius)}

.lv-vol{margin-top:var(--space-12);padding:var(--space-8) var(--space-16) var(--space-4);border-radius:var(--radius-12);background:var(--ux-card);border:1px solid var(--ux-card-line)}
.lv-vol[hidden]{display:none}
.lv-vol-line{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);font-size:14px;line-height:20px;color:var(--ux-text)}
.lv-vol-value{color:var(--ux-muted)}
.lv-vol-body .ux-ruler{margin:0 calc(var(--space-4) * -1)}
.lv-vol-body .ux-legend{margin:0 0 var(--space-8)}

.lv-acts{margin-top:var(--space-12);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--space-8)}
.lv-act{min-width:0;height:var(--lv-act-h);min-height:var(--lv-act-h);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);border-radius:var(--radius-12);border:1px solid var(--ux-control-line);background:var(--ux-control);color:var(--ux-text);font:500 12px/16px var(--font-display);cursor:pointer}
.lv-act-ico{display:grid;place-items:center;color:var(--ux-label)}
.lv-act-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-act.is-on{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff}
.lv-act.is-on .lv-act-ico{color:#fff}
.lv-act.is-rec{background:var(--ux-red-deep);border-color:var(--ux-red-fill);color:var(--ux-red-text)}
.lv-act.is-rec .lv-act-ico{color:var(--ux-red)}
.lv-act.is-rec .lv-act-ico svg path{fill:currentColor}
.lv-act-name.is-time,.lv-fsact-name.is-time{font-family:var(--font-mono);letter-spacing:.5px}
.lv-act[aria-busy="true"],.lv-fsact[aria-busy="true"]{opacity:.65}

/* Intermediária: a área de controle acompanha a coluna de 640 px. */
@media (min-width:600px){
 .lv-ctrl{margin-left:0;margin-right:0;border:1px solid var(--ux-control-line);border-bottom:0;border-radius:var(--radius-12) var(--radius-12) 0 0}
}
/* Computador: duas colunas (palco + 360 px presa ao rolar). */
@media (min-width:1024px){
 .lv-cols{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--space-24);align-items:start}
 .lv-stage.is-pair{grid-template-columns:repeat(2,minmax(0,1fr))}
 /* Imagens 16:9 nunca passam de 70 % da altura da janela. */
 .lv-stage.is-single>.lv-cell,.lv-cell.is-usb,.lv-stage:not(.is-grid):not(.is-pair)>.lv-cell{width:100%;max-width:calc(70vh * 16 / 9);justify-self:center}
 .lv-ctrl{position:sticky;top:calc(var(--bar,56px) + var(--space-16));bottom:auto;z-index:1;margin:0;border:1px solid var(--ux-card-line);border-radius:var(--radius-12);padding:var(--space-12) var(--space-16) var(--space-16)}
 .lv-thumbs,.lv-thumbs.is-scroll{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;gap:var(--space-8)}
 .lv-thumbs.is-scroll>.lv-thumb{flex:none}
 .lv-acts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (hover:hover) and (pointer:fine){
 .lv-round:hover,.lv-act:hover:not(.is-on):not(.is-rec){background:var(--ux-hover)}
 .lv-thumb:hover .lv-thumb-img{border-color:var(--ux-blue-line)}
 .lv-thumb.is-on:hover .lv-thumb-img{border-color:var(--ux-blue)}
 .lv-link:hover{text-decoration:underline}
}

/* ---------------- BYD Cloud: fileira embaixo das ações, mesmo estilo, estado atual e um toque para reverter ---------------- */
.lv-cloud{margin-top:var(--space-8)}
.lv-cloud .cloud-bar,.lv-cloud .cloud-bar.is-row,.lv-cloud .cloud-bar.is-column{position:static;display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-8);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;pointer-events:auto;touch-action:pan-x}
.lv-cloud .cloud-bar::-webkit-scrollbar{display:none}
.lv-cloud .cloud-fab{position:relative;flex:0 0 auto;min-width:72px;max-width:none;width:auto;height:var(--lv-act-h);min-height:var(--lv-act-h);margin:0;padding:var(--space-4) var(--space-8);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);border-radius:var(--radius-12);border:1px solid var(--ux-control-line);background:var(--ux-control);box-shadow:none;color:var(--ux-text);font:500 12px/16px var(--font-display);cursor:pointer;pointer-events:auto;animation:none}
.lv-cloud .cloud-fab[hidden]{display:none}
.lv-cloud .cloud-fab>.app-ico{flex:0 0 auto;display:grid;place-items:center;color:var(--ux-label)}
.lv-cloud .cloud-fab>.app-ico svg{width:20px;height:20px}
.lv-cloud-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-cloud .cloud-fab.lv-lit{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff}
.lv-cloud .cloud-fab.lv-lit>.app-ico{color:#fff}
.lv-cloud .cloud-fab.is-locked{color:var(--ux-muted)}
.lv-cloud .cloud-fab.is-locked>.app-ico{color:var(--ux-star)}
.lv-cloud .cloud-fab.is-busy{opacity:.6}
.lv-cloud .cloud-badge{position:absolute;top:var(--space-4);right:var(--space-4);min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ux-blue-deep);color:var(--ux-blue-soft);font:500 11px/18px var(--font-mono);text-align:center;box-shadow:none}
.lv-cloud .cloud-badge[hidden]{display:none}
.lv-cloud .cloud-toast{display:none!important}
@media (hover:hover) and (pointer:fine){.lv-cloud .cloud-fab:hover:not(.lv-lit){background:var(--ux-hover)}}
/* Marcio 20/10: as fileiras da BYD Cloud quebram para baixo, 4 por linha como as ações, sem rolagem lateral. */
.lv-cloud .cloud-bar,.lv-cloud .cloud-bar.is-row,.lv-cloud .cloud-bar.is-column{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
.lv-cloud .cloud-fab{min-width:0;width:auto;height:auto;min-height:var(--lv-act-h)}
.lv-cloud-name{white-space:normal;text-align:center;line-height:14px}
.lv-fs .lv-cloud .cloud-bar,.lv-fs .lv-cloud .cloud-bar.is-row{display:flex;flex-wrap:wrap;justify-content:center;overflow:visible}
/* Com as fileiras da BYD Cloud a área de controle ficou alta: no celular ela segue logo abaixo das câmeras (sem prender na base), para não cobrir a imagem. */
@media (max-width:1023px){.lv-ctrl{position:relative;bottom:auto}}
/* Computador: na coluna de 360 px, grade de 3 colunas (o nome pode quebrar em duas linhas). */
@media (min-width:1024px){
 .lv-ctrl .lv-cloud .cloud-bar,.lv-ctrl .lv-cloud .cloud-bar.is-row,.lv-ctrl .lv-cloud .cloud-bar.is-column{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible}
 .lv-ctrl .lv-cloud .cloud-fab{min-width:0;height:auto;padding:var(--space-8) var(--space-4)}
 .lv-ctrl .lv-cloud-name{white-space:normal;text-align:center}
}
/* ---------------- Gravar agora (painel pequeno) ---------------- */
.lv-rec-legend{margin-top:0}
.ux-sheet .ux-stepper{justify-content:space-between}
.ux-sheet .ux-stepper output{flex:1 1 auto}
.lv-rec-warn{margin:var(--space-12) 0 0;font-size:13px;line-height:20px;color:var(--ux-amber)}
.lv-rec-warn[hidden]{display:none}
.lv-rec-note{margin:var(--space-16) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}

/* ---------------- Tela 15: Imagem, áudio e gravação ---------------- */
.lv-state-host{margin:0 0 var(--space-24)}
.lv-state{display:flex;align-items:flex-start;gap:var(--space-12);padding:var(--space-12) var(--space-16);border-radius:var(--radius-12);border:1px solid var(--ux-card-line);background:var(--ux-notice)}
.lv-state-mark{flex:0 0 auto;display:grid;place-items:center;margin-top:1px}
.lv-state-text{flex:1 1 auto;min-width:0}
.lv-state-head{margin:0;font:500 15px/22px var(--font-display);color:var(--ux-text)}
.lv-state-sub{margin:var(--space-4) 0 0;font-size:13px;line-height:20px;color:var(--ux-muted)}
.lv-state-ok{background:var(--ux-sky-deep);border-color:var(--ux-sky-line)}
.lv-state-ok .lv-state-mark{color:var(--ux-sky)}
.lv-state-err{background:var(--ux-red-deep);border-color:var(--ux-red-line)}
.lv-state-err .lv-state-mark,.lv-state-err .lv-state-head{color:var(--ux-red)}
.lv-state-warn{background:var(--ux-amber-deep);border-color:var(--ux-amber-deep)}
.lv-state-warn .lv-state-mark,.lv-state-warn .lv-state-head{color:var(--ux-amber)}
.lv-fix{width:auto;min-height:44px;margin-top:var(--space-12);padding:0 var(--space-16)}
.lv-state-err .lv-fix{border-color:var(--ux-red-line);color:var(--ux-red-text)}
.lv-tech{margin-top:var(--space-8);font-size:12px;line-height:16px;color:var(--ux-muted)}
.lv-tech summary{min-height:32px;display:flex;align-items:center;cursor:pointer}
.lv-tech code{display:block;margin-top:var(--space-4);font-family:var(--font-mono);word-break:break-all}
.lv-set-body.is-off{opacity:.4;pointer-events:none}
.lv-set .ux-expand-body{padding-bottom:var(--space-8)}
.lv-open{display:block}
.lv-open-pad{padding:var(--space-4) 0 var(--space-8)}
.lv-open-pad .ux-stepper{justify-content:space-between}
.lv-open-pad .ux-stepper output{flex:1 1 auto}
.lv-open-pad .ux-legend{margin:var(--space-8) 0 0}
.lv-card-gap{margin-top:var(--space-16)}
.lv-note{margin:0;font-size:14px;line-height:20px;color:var(--ux-muted)}
.lv-set .ux-section>.ux-card>.ux-switch-row:first-child{border-top:0}
.lv-help{margin:calc(var(--space-16) * 2) 0 var(--space-24);padding:var(--space-16);border-radius:var(--radius-14);background:var(--ux-card-deep);border:1px solid var(--ux-card-line)}
.lv-help-title{margin:0;font:500 16px/22px var(--font-display);color:var(--ux-text)}
.lv-help-sub{margin:var(--space-4) 0 var(--space-12);font-size:13px;line-height:20px;color:var(--ux-muted)}
.lv-help .ux-list-row{min-height:52px}
.lv-help .ux-ico-plain{flex:0 0 18px;color:var(--ux-label)}
.lv-restore{margin-top:0}
.lv-saved{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-4) var(--space-8);margin:var(--space-16) 0 var(--space-24);font-size:12px;line-height:16px;color:var(--ux-muted);text-align:center}
.lv-saved svg{flex:0 0 auto}
.lv-saved span+span{margin-left:calc(var(--space-4) * -1)}
.lv-problem .ux-label .ux-tag{margin-left:auto}
.lv-vol-in{padding:var(--space-8) 0 var(--space-4)}
.lv-all{min-height:44px;padding:0;margin:0 0 var(--space-16)}
.lv-apply .ux-footbar-inner{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-8)}
.lv-apply-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.lv-apply-count{font:500 14px/20px var(--font-display);color:var(--ux-text)}
.lv-apply-sub{font-size:12px;line-height:16px;color:var(--ux-muted)}
.lv-apply .ux-primary{width:100%;padding:0 var(--space-16);font-size:15px}
@media (min-width:600px){.lv-apply .ux-footbar-inner{flex-direction:row;align-items:center;gap:var(--space-12)}.lv-apply .ux-primary{flex:0 0 auto;width:auto}}

/* ---------------- Tela 16: tela cheia ---------------- */
html.lv-fs-open,html.lv-fs-open body{overflow:hidden}
.lv-fs{position:fixed;inset:0;z-index:160;width:100%;height:100vh;height:100dvh;overflow:hidden;background:var(--lv-black);color:var(--ux-text);outline:none;-webkit-user-select:none;user-select:none}
.lv-fs-in{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden}
.lv-fs-round{position:relative;flex:0 0 40px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;border:1px solid var(--lv-fs-line);background:var(--lv-fs-btn);color:var(--ux-text);display:grid;place-items:center;cursor:pointer}
.lv-fs-round::after{content:"";position:absolute;inset:-2px}
.lv-fs-top{flex:0 0 auto;height:calc(76px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--space-16) 0;display:flex;align-items:center;gap:var(--space-12)}
.lv-fs-title{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.lv-fs-name{font:500 16px/22px var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-fs-live{display:flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--ux-muted)}
.lv-fs-stage{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:2px;align-content:center;touch-action:pan-y}
.lv-fs-cell{position:relative;min-width:0;display:flex;flex-direction:column}
.lv-fs-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--lv-black)}
.lv-fs-frame video{display:block;width:100%;height:100%;object-fit:cover}
.lv-fs-tag{padding:var(--space-4) var(--space-16) var(--space-8);font-size:12px;line-height:16px;color:var(--ux-label)}
.lv-fs-tabs,.lv-fs-arrow,.lv-fs-hint{display:none}
.lv-fs-bottom{flex:0 0 auto;padding:var(--space-12) var(--space-16) calc(22px + env(safe-area-inset-bottom,0px))}
.lv-fs-thumbs{margin-top:0}
.lv-fs-acts{margin-top:22px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--space-8)}
.lv-fsact{min-width:0;padding:0;border:0;background:none;color:var(--ux-text);font:400 12px/16px var(--font-display);display:flex;flex-direction:column;align-items:center;gap:var(--space-8);cursor:pointer}
.lv-fsact-ring{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--lv-fs-btn);border:1px solid var(--lv-fs-line);color:var(--ux-text)}
.lv-fsact-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-fsact.is-on .lv-fsact-ring{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff}
.lv-fsact.is-rec .lv-fsact-ring{border:2px solid var(--ux-red-fill);color:var(--ux-red)}
.lv-fsact.is-rec .lv-fsact-ring svg path{fill:currentColor}
.lv-fsact.is-rec .lv-fsact-name{color:var(--ux-red)}
.lv-fsact:focus-visible{outline:none}
.lv-fsact:focus-visible .lv-fsact-ring{outline:2px solid var(--ux-focus);outline-offset:2px}
.lv-fs-toast{position:absolute;z-index:6;top:calc(var(--space-16) + env(safe-area-inset-top,0px));left:50%;max-width:calc(100% - 32px);padding:var(--space-8) var(--space-16);border-radius:var(--radius-12);background:var(--lv-glass);border:1px solid var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;line-height:20px;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .2s}
.lv-fs-toast.is-on{opacity:1}
.lv-fs>.lv-flash{border-radius:0;z-index:4}
.lv-fs :is(button):focus-visible{outline:2px solid var(--ux-focus);outline-offset:2px}

/* Deitado (e computador): imersivo; os controles ficam sobre a imagem e somem em 3 s. */
.lv-fs.is-land .lv-fs-stage{position:absolute;inset:auto;overflow:hidden;align-content:stretch;touch-action:none}
.lv-fs.is-land.is-single .lv-fs-tag{display:none}
/* Fileira de baixo, fora da coluna 1: o nome vai para o canto de cima, longe das ações e da BYD Cloud. */
.lv-fs.is-land .lv-fs-cell.is-low .lv-fs-tag{bottom:auto;top:var(--space-12)}
.lv-fs.is-land .lv-fs-cell{display:block;height:100%;min-height:0}
.lv-fs.is-land .lv-fs-frame{height:100%;aspect-ratio:auto}
.lv-fs.is-land .lv-fs-frame video{object-fit:contain}
.lv-fs.is-land .lv-fs-tag{position:absolute;left:var(--space-12);bottom:var(--space-12);padding:0;color:var(--ux-text);text-shadow:var(--lv-text-shadow);transition:opacity .25s}
.lv-fs.is-land .lv-fs-top{position:absolute;z-index:3;left:0;right:0;top:0;height:calc(76px + env(safe-area-inset-top,0px));padding-left:max(var(--space-16),env(safe-area-inset-left,0px));padding-right:max(var(--space-16),env(safe-area-inset-right,0px));background:linear-gradient(var(--lv-shade),transparent);align-items:flex-start;padding-top:calc(var(--space-16) + env(safe-area-inset-top,0px));transition:opacity .25s}
.lv-fs.is-land .lv-fs-round{background:var(--lv-glass);border-color:var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lv-fs.is-land .lv-fs-name,.lv-fs.is-land .lv-fs-rot{display:none}
.lv-fs.is-land .lv-fs-title{flex:0 0 auto}
.lv-fs.is-land .lv-fs-live{min-height:40px;padding:0 var(--space-12);border-radius:20px;background:var(--lv-glass);border:1px solid var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ux-text);text-shadow:var(--lv-text-shadow)}
.lv-fs.is-land .lv-fs-tabs{position:absolute;z-index:4;top:calc(var(--space-16) + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);display:flex;gap:var(--space-4);max-width:calc(100% - 320px);padding:var(--space-4);border-radius:24px;background:var(--lv-glass);border:1px solid var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow-x:auto;scrollbar-width:none;transition:opacity .25s}
.lv-fs-tab{flex:0 0 auto;min-height:36px;padding:0 var(--space-12);border:0;border-radius:18px;background:transparent;color:var(--ux-text);font:500 13px var(--font-display);white-space:nowrap;text-shadow:var(--lv-text-shadow);cursor:pointer}
.lv-fs-tab[aria-pressed="true"]{background:var(--lv-tab-on);color:var(--lv-tab-on-text);text-shadow:none}
.lv-fs.is-land .lv-fs-bottom{position:absolute;z-index:3;left:0;right:0;bottom:0;min-height:96px;padding:var(--space-24) var(--space-16) calc(var(--space-12) + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;justify-content:center;background:linear-gradient(transparent,var(--lv-shade));transition:opacity .25s}
.lv-fs.is-land .lv-fs-thumbs{display:none}
.lv-fs.is-land .lv-fs-acts{margin:0;display:flex;gap:22px}
.lv-fs.is-land .lv-fsact{font-size:11px;line-height:14px;gap:var(--space-4);text-shadow:var(--lv-text-shadow);min-width:48px}
.lv-fs.is-land .lv-fsact-ring{width:48px;height:48px;background:var(--lv-glass);border-color:var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lv-fs.is-land .lv-fsact.is-on .lv-fsact-ring{background:var(--ux-blue);border-color:var(--ux-blue)}
.lv-fs.is-land .lv-fsact.is-rec .lv-fsact-ring{border:2px solid var(--ux-red-fill)}
.lv-fs.is-land .lv-fs-hint{display:block;position:absolute;z-index:5;left:50%;bottom:calc(var(--space-24) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);padding:var(--space-8) var(--space-16);border-radius:20px;background:var(--lv-glass);border:1px solid var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:13px;line-height:20px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s}
.lv-fs.is-land .lv-fs-hint.is-on{opacity:1}
.lv-fs.is-land.is-idle .lv-fs-top,.lv-fs.is-land.is-idle .lv-fs-tabs,.lv-fs.is-land.is-idle .lv-fs-bottom,.lv-fs.is-land.is-idle .lv-fs-tag,.lv-fs.is-land.is-idle .lv-fs-arrow{opacity:0;pointer-events:none}
.lv-fs.is-land.is-idle{cursor:none}
/* Setas ‹ › nas laterais (computador, uma câmera): aparecem ao passar o mouse; ← → também trocam. */
.lv-fs.is-land.is-desk.is-single .lv-fs-arrow{display:grid;position:absolute;z-index:3;top:50%;width:44px;height:44px;margin-top:-22px;opacity:0;transition:opacity .2s;background:var(--lv-glass);border-color:var(--lv-glass-line)}
.lv-fs-arrow.is-prev{left:var(--space-16)}
.lv-fs-arrow.is-next{right:var(--space-16)}
.lv-fs.is-land.is-desk.is-single:hover:not(.is-idle) .lv-fs-arrow,.lv-fs.is-land.is-desk.is-single .lv-fs-arrow:focus-visible{opacity:1}
/* Celular que não gira sozinho (sem trava de orientação): a camada gira 90°. */
.lv-fs.is-forced .lv-fs-in{inset:auto;top:0;left:100%;width:100vh;height:100vw;width:100dvh;height:100dvw;transform-origin:top left;transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.lv-cell.is-enter,.lv-flash.on,.lv-spin{animation:none}.lv-fs *{transition:none!important}}
/* Valor curto ("5 min") nunca é cortado: o nome quebra linha antes. */
.lv-set .ux-value-row>.ux-value{flex-shrink:0}
/* Câmera fechada: último quadro guardado nesta visita (parado), no lugar da imagem ao vivo. */
.lv-still{position:absolute;inset:0;display:none;width:100%;height:100%;object-fit:cover}
.has-still>.lv-still{display:block}
.has-still>.lv-thumb-ph,.has-still>.lv-frame-empty{display:none}
.lv-thumb-img .lv-still{opacity:.55}
.lv-thumb.is-on .lv-thumb-img .lv-still{opacity:1}
.lv-fs.is-land .lv-fs-frame .lv-still{object-fit:contain}
/* Fileira da BYD Cloud na tela cheia: botões redondos como as ações, com o nome embaixo (vai e volta com a tela cheia). */
.lv-fs .lv-cloud{margin-top:var(--space-16)}
.lv-fs .lv-cloud .cloud-fab{min-width:64px;height:auto;min-height:0;padding:0;border:0;background:none;font-weight:400;font-size:11px;line-height:14px;gap:var(--space-4)}
.lv-fs .lv-cloud .cloud-fab>.app-ico{width:46px;height:46px;border-radius:50%;background:var(--lv-fs-btn);border:1px solid var(--lv-fs-line);color:var(--ux-text)}
.lv-fs .lv-cloud .cloud-fab.lv-lit{background:none;color:var(--ux-text)}
.lv-fs .lv-cloud .cloud-fab.lv-lit>.app-ico{background:var(--ux-blue);border-color:var(--ux-blue);color:#fff}
.lv-fs.is-land .lv-fs-bottom{flex-direction:column;align-items:center;justify-content:flex-end}
.lv-fs.is-land .lv-cloud{order:-1;margin:0 0 var(--space-12);max-width:min(100%,640px)}
.lv-fs.is-land .lv-cloud .cloud-fab{text-shadow:var(--lv-text-shadow)}
.lv-fs.is-land .lv-cloud .cloud-fab>.app-ico{width:40px;height:40px;background:var(--lv-glass);border-color:var(--lv-glass-line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lv-fs.is-land .lv-cloud .cloud-fab.lv-lit>.app-ico{background:var(--ux-blue);border-color:var(--ux-blue)}
