/* ArtOne Simuladores — estilos compartilhados do motor */

/* ---------- Tokens ---------- */
:root{
  --bg:#EEF2F6;
  --surface:#FFFFFF;
  --surface-2:#E4EAF1;
  --ink:#0B2239;
  --ink-soft:#4C6076;
  --ink-faint:#7C8DA0;
  --line:#D5DEE8;
  --navy:#001B3D;
  --navy-soft:#0E3560;
  --lime:#C1FF72;
  --lime-ink:#28430A;
  --ok:#1F9D61;
  --ok-soft:#DDF3E7;
  --warn:#B97A18;
  --warn-soft:#F7EBD4;
  --bad:#C24141;
  --bad-soft:#F6DEDE;
  --info:#2F6BC4;
  --info-soft:#DFE9F8;
  --shadow:0 8px 28px rgba(11,34,57,.10);
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#081524;
    --surface:#0E2236;
    --surface-2:#132B44;
    --ink:#E7EEF6;
    --ink-soft:#A3B5C9;
    --ink-faint:#6E8298;
    --line:#1E3A57;
    --navy:#C1FF72;          /* ação primária vira lime no escuro */
    --navy-soft:#9FE04F;
    --lime:#C1FF72;
    --lime-ink:#12250B;
    --ok:#35C783;
    --ok-soft:#123527;
    --warn:#E8B45A;
    --warn-soft:#3A2C12;
    --bad:#E5736F;
    --bad-soft:#3A1717;
    --info:#6FA5EE;
    --info-soft:#12283F;
    --shadow:0 8px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#081524; --surface:#0E2236; --surface-2:#132B44;
  --ink:#E7EEF6; --ink-soft:#A3B5C9; --ink-faint:#6E8298; --line:#1E3A57;
  --navy:#C1FF72; --navy-soft:#9FE04F; --lime:#C1FF72; --lime-ink:#12250B;
  --ok:#35C783; --ok-soft:#123527; --warn:#E8B45A; --warn-soft:#3A2C12;
  --bad:#E5736F; --bad-soft:#3A1717;
  --info:#6FA5EE; --info-soft:#12283F; --shadow:0 8px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:15px; line-height:1.45;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
button:focus-visible, a:focus-visible{outline:2px solid var(--info); outline-offset:2px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ---------- Barra superior ---------- */
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:10px 18px; background:var(--surface); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:baseline; gap:9px}
.brand .logo{
  font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; letter-spacing:-.02em;
  text-decoration:none; color:inherit;
}
.brand .logo em{font-style:normal; background:var(--lime); color:var(--lime-ink);
  padding:1px 6px; border-radius:6px; margin-left:2px; font-size:15px; vertical-align:2px}
.brand .scenario{color:var(--ink-soft); font-size:13px}
.controls{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 16px; border-radius:999px; font-weight:600; font-size:14px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-primary{background:var(--navy); border-color:var(--navy); color:var(--bg)}
.btn-cta{background:var(--lime); border-color:var(--lime); color:var(--lime-ink); font-weight:700}
:root[data-theme="dark"] .btn-primary{color:#0B2239}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .btn-primary{color:#0B2239}
}
.btn[disabled]{opacity:.45; pointer-events:none}
@keyframes nudgePulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--lime) 55%, transparent)}
  50%{box-shadow:0 0 0 9px transparent}
}
.btn-primary.nudge{animation:nudgePulse 1.6s ease-out infinite}
.progress{font-size:12.5px; color:var(--ink-faint); min-width:86px; text-align:right}
.seg{display:flex; gap:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px}
.seg button{padding:6px 13px; border-radius:999px; font-weight:600; font-size:13px; color:var(--ink-soft); white-space:nowrap}
.seg button.on{background:var(--navy); color:var(--bg)}
:root[data-theme="dark"] .seg button.on{color:#0B2239}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .seg button.on{color:#0B2239}
}

/* ---------- Faixa de narração ---------- */
.narration{
  display:flex; align-items:center; gap:10px;
  padding:8px 18px; font-size:13.5px;
  background:var(--surface-2); border-bottom:1px solid var(--line); color:var(--ink-soft);
}
.narration .dot{width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--lime) 30%, transparent)}
.narration strong{color:var(--ink); font-weight:600}

/* ---------- Layout ---------- */
.stage{flex:1; min-height:0; display:grid; grid-template-columns:400px 1fr; gap:18px; padding:16px 18px}
.view-toggle{display:none}

/* ---------- Celular ---------- */
.phone-col{display:flex; align-items:center; justify-content:center; min-height:0}
.phone{
  width:100%; max-width:372px; height:100%; max-height:740px;
  background:#111B21; border-radius:34px; padding:10px;
  box-shadow:var(--shadow), inset 0 0 0 2px #2A3942;
  display:flex; flex-direction:column;
}
.phone-screen{flex:1; min-height:0; border-radius:26px; overflow:hidden; display:flex; flex-direction:column; background:#ECE5DD}
.wa-header{
  background:#008069; color:#fff; padding:10px 12px;
  display:flex; align-items:center; gap:10px; flex:none;
}
.wa-avatar{width:36px; height:36px; border-radius:50%; background:#C1FF72; color:#28430A;
  display:grid; place-items:center; font-weight:700; font-size:14px; flex:none}
.wa-title{font-weight:600; font-size:15px; line-height:1.15}
.wa-sub{font-size:11.5px; opacity:.85}
.wa-chat{flex:1; min-height:0; overflow-y:auto; padding:14px 10px 10px; display:flex; flex-direction:column; gap:7px;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.025) 0 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(0,0,0,.02) 0 2px, transparent 2px),
    #ECE5DD;
  background-size:90px 90px, 120px 120px, auto;
}
.bubble{max-width:82%; padding:7px 10px 5px; border-radius:10px; font-size:13.5px; line-height:1.4;
  color:#111B21; box-shadow:0 1px 1px rgba(0,0,0,.08); animation:pop .22s ease}
.bubble .who{font-size:11px; font-weight:700; color:#008069; margin-bottom:2px}
.bubble .t{display:block; text-align:right; font-size:10px; color:#667781; margin-top:2px}
.from-them{align-self:flex-start; background:#FFFFFF; border-top-left-radius:2px}
.from-me{align-self:flex-end; background:#D9FDD3; border-top-right-radius:2px}
.wa-sys{align-self:center; background:#FDF3D0; color:#54656F; font-size:11.5px; padding:5px 12px;
  border-radius:8px; text-align:center; max-width:90%; box-shadow:0 1px 1px rgba(0,0,0,.06); animation:pop .22s ease}
.wa-card{border-left:4px solid #008069; background:#F0F6F4; border-radius:6px; padding:6px 8px; margin:4px 0; font-size:12.5px}
.wa-card b{display:block; margin-bottom:2px}
.wa-file{display:flex; align-items:center; gap:8px; background:#F0F6F4; border-radius:8px; padding:8px 10px; margin:4px 0; font-size:12.5px}
.wa-file .ic{font-size:20px}

/* remetentes variados em grupos (cores estilo WhatsApp) */
.bubble .who.w1{color:#D81B60}
.bubble .who.w2{color:#8E24AA}
.bubble .who.w3{color:#E65100}
.bubble .who.w4{color:#1E88E5}

/* Flow / catálogo dentro da bolha */
.wa-flow{background:#fff; border:1px solid #E0E0E0; border-radius:10px; overflow:hidden; margin:4px 0; font-size:12.5px}
.wa-flow .fhead{background:#008069; color:#fff; padding:6px 10px; font-weight:600}
.wa-flow .fitem{display:flex; justify-content:space-between; gap:10px; padding:6px 10px; border-bottom:1px solid #F0F0F0}
.wa-flow .fitem:last-child{border-bottom:none}
.wa-flow .fprice{font-family:"IBM Plex Mono",ui-monospace,monospace; color:#008069; font-weight:600; white-space:nowrap}
.wa-flow .fbtn{display:block; text-align:center; color:#008069; font-weight:700; padding:7px; border-top:1px solid #E0E0E0; background:#F7FBFA}

/* localização / mapa dentro da bolha */
.wa-loc{border-radius:10px; overflow:hidden; margin:4px 0; border:1px solid #E0E0E0}
.wa-loc .map{height:84px; position:relative;
  background:linear-gradient(120deg,#CBE6D8 0 40%,#BFDCCB 40% 70%,#D4EADD 70%)}
.wa-loc .map::before{content:''; position:absolute; left:10%; top:45%; width:80%; height:7px;
  background:#fff; border-radius:4px; transform:rotate(-8deg)}
.wa-loc .map::after{content:'📍'; position:absolute; left:56%; top:18%; font-size:22px}
.wa-loc .laddr{background:#fff; padding:6px 10px; font-size:12px; color:#54656F}

/* mensagem de voz dentro da bolha */
.wa-audio{display:flex; align-items:center; gap:8px; padding:6px 2px 4px; min-width:190px}
.wa-audio .play{width:30px; height:30px; border-radius:50%; background:#008069; color:#fff;
  display:grid; place-items:center; font-size:12px; flex:none}
.from-me .wa-audio .play{background:#1FA855}
.wa-audio .wave{flex:1; display:flex; align-items:center; gap:2px; height:22px}
.wa-audio .wave i{width:3px; border-radius:2px; background:#8696A0; height:35%}
.wa-audio .wave i:nth-child(2n){height:65%}
.wa-audio .wave i:nth-child(3n){height:85%}
.wa-audio .wave i:nth-child(5n){height:50%}
.wa-audio .wave i:nth-child(7n){height:95%}
.wa-audio .dur{font-size:10.5px; color:#667781; flex:none}

/* pagamento dentro da bolha */
.wa-pay{display:flex; align-items:center; gap:9px; background:#EDF7EF; border:1px solid #B7E0C0;
  border-radius:10px; padding:8px 10px; margin:4px 0; font-size:12.5px; color:#111B21}
.wa-pay .pic{font-size:20px}
.wa-pay b{display:block}
.wa-pay .ok{margin-left:auto; color:#1F9D61; font-weight:700; font-size:11px; white-space:nowrap}
.typing{display:inline-flex; gap:4px; padding:10px 12px}
.typing i{width:7px; height:7px; border-radius:50%; background:#8696A0; animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.18s}.typing i:nth-child(3){animation-delay:.36s}
.qr-row{display:flex; flex-wrap:wrap; gap:7px; align-self:flex-start; max-width:90%; animation:pop .22s ease}
.qr{background:#FFFFFF; border:1.5px solid #008069; color:#008069; font-weight:600; font-size:13px;
  padding:7px 13px; border-radius:999px; box-shadow:0 1px 1px rgba(0,0,0,.06)}
.qr:hover{background:#E7F5F1}
.wa-input{flex:none; display:flex; gap:8px; padding:8px 10px; background:#F0F2F5; align-items:center}
.wa-input .field{flex:1; background:#fff; border-radius:999px; padding:8px 14px; color:#8696A0; font-size:13px}
.wa-input .send{width:38px; height:38px; border-radius:50%; background:#008069; color:#fff; display:grid; place-items:center; font-size:16px}

@keyframes pop{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}
@keyframes blink{0%,80%,100%{opacity:.3} 40%{opacity:1}}

/* ---------- Console do operador ---------- */
.console{min-height:0; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.console-head{
  display:flex; align-items:center; gap:12px; padding:9px 14px;
  background:var(--surface-2); border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.ws{display:flex; align-items:center; gap:8px; font-weight:600; font-size:13.5px}
.ws .sq{width:24px; height:24px; border-radius:7px; background:var(--navy); color:var(--bg);
  display:grid; place-items:center; font-family:"Archivo"; font-size:12px; font-weight:700}
:root[data-theme="dark"] .ws .sq{color:#0B2239}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ws .sq{color:#0B2239} }
.tabs{display:flex; gap:4px; margin-left:auto}
.tab{position:relative; padding:7px 14px; border-radius:9px; font-weight:600; font-size:13.5px; color:var(--ink-soft)}
.tab:hover{background:var(--surface)}
.tab.active{background:var(--navy); color:var(--bg)}
:root[data-theme="dark"] .tab.active{color:#0B2239}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tab.active{color:#0B2239} }
.tab .ping{position:absolute; top:4px; right:6px; width:8px; height:8px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent);
  display:none}
.tab.has-ping .ping{display:block; animation:ping 1.2s ease-out infinite}
@keyframes ping{from{box-shadow:0 0 0 0 color-mix(in srgb, var(--lime) 60%, transparent)}
  to{box-shadow:0 0 0 9px transparent}}
.op-user{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft)}
.op-user .av{width:26px; height:26px; border-radius:50%; background:var(--info-soft); color:var(--info);
  display:grid; place-items:center; font-weight:700; font-size:11px}

.panels{flex:1; min-height:0; position:relative}
.panel{position:absolute; inset:0; overflow:hidden; display:none}
.panel.active{display:flex}

/* --- Atendimento --- */
#panel-atendimento{display:none}
#panel-atendimento.active{display:grid; grid-template-columns:250px 1fr}
.inbox{border-right:1px solid var(--line); overflow-y:auto; min-height:0}
.inbox h3, .colhead{font-family:"Archivo"; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); padding:12px 14px 6px}
.sess{display:flex; gap:9px; padding:10px 12px; border-bottom:1px solid var(--line); cursor:default; align-items:flex-start}
.sess.active-sess{background:var(--surface-2)}
.sess .av{width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:12.5px; background:var(--info-soft); color:var(--info)}
.sess .nm{font-weight:600; font-size:13.5px; display:flex; align-items:center; gap:6px}
.sess .pv{font-size:12px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px}
.sess .meta{margin-left:auto; text-align:right; flex:none}
.sess .tm{font-size:10.5px; color:var(--ink-faint)}
.sess .unread{width:16px; height:16px; margin:3px 0 0 auto; border-radius:50%; background:var(--ok); color:#fff;
  font-size:10px; font-weight:700; display:grid; place-items:center}
.chip{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:1.5px 7px;
  border-radius:999px; text-transform:uppercase}
.chip-ia{background:var(--info-soft); color:var(--info)}
.chip-humano{background:var(--warn-soft); color:var(--warn)}
.chip-fim{background:var(--ok-soft); color:var(--ok)}
.chip-urg{background:var(--bad-soft); color:var(--bad)}
.ktag{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.05em; padding:1.5px 7px;
  border-radius:999px; background:var(--bad-soft); color:var(--bad); text-transform:uppercase; margin-bottom:3px}

.opchat{display:flex; flex-direction:column; min-height:0}
.opchat-head{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line)}
.opchat-head .nm{font-weight:600}
.opchat-head .st{font-size:12px; color:var(--ink-faint)}
.opchat-body{flex:1; min-height:0; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--bg)}
.om{max-width:70%; padding:8px 12px; border-radius:11px; font-size:13.5px; animation:pop .22s ease}
.om .who{font-size:11px; font-weight:700; margin-bottom:2px; color:var(--ink-faint)}
.om.client{align-self:flex-start; background:var(--surface); border:1px solid var(--line)}
.om.agent{align-self:flex-end; background:var(--info-soft)}
.om.human{align-self:flex-end; background:var(--warn-soft)}
.oev{align-self:center; display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft);
  background:var(--surface-2); border:1px dashed var(--line); padding:4px 12px; border-radius:999px; animation:pop .22s ease;
  text-align:center}
.opchat-input{flex:none; display:flex; gap:8px; padding:10px 14px; border-top:1px solid var(--line)}
.opchat-input .field{flex:1; border:1px solid var(--line); border-radius:9px; padding:8px 12px; font-size:13px; color:var(--ink-faint); background:var(--surface)}
.empty-note{margin:auto; color:var(--ink-faint); font-size:13.5px; text-align:center; padding:30px}

/* --- Kanban --- */
#panel-painel.active{display:flex; flex-direction:column}
.kanban{flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:14px; overflow:auto}
.kcol{background:var(--surface-2); border-radius:12px; padding:4px 8px 10px; min-width:150px; display:flex; flex-direction:column; gap:8px; align-content:start}
.kcol .colhead{padding:9px 6px 2px; display:flex; justify-content:space-between; align-items:baseline}
.kcount{font-family:"IBM Plex Mono"; font-size:11px; color:var(--ink-faint)}
.kcard{background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:13px;
  box-shadow:0 1px 3px rgba(11,34,57,.06); transition:box-shadow .3s}
.kcard b{display:block; font-size:13.5px}
.kcard .kd{color:var(--ink-faint); font-size:11.5px; margin-top:2px}
.kcard.hot{box-shadow:0 0 0 2px var(--lime), var(--shadow)}

/* --- Agenda --- */
#panel-agenda.active{display:flex; flex-direction:column}
.agenda{flex:1; min-height:0; overflow:auto; padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px}
.day{background:var(--surface-2); border-radius:12px; padding:10px 10px 12px; min-width:170px}
.day h4{font-family:"Archivo"; font-size:13px; margin:2px 4px 9px; display:flex; justify-content:space-between}
.day h4 span{color:var(--ink-faint); font-weight:500; font-size:11.5px}
.ev{background:var(--surface); border-left:4px solid var(--info); border-radius:8px; padding:7px 9px; font-size:12.5px; margin-bottom:7px}
.ev .et{font-family:"IBM Plex Mono"; font-size:11px; color:var(--ink-soft)}
.ev.dra{border-left-color:var(--info)} .ev.drp{border-left-color:var(--warn)}
.ev.new{border-left-color:var(--ok); box-shadow:0 0 0 2px var(--lime)}
.ev.urg{border-left-color:var(--bad)}
.ev .doc{font-size:10.5px; color:var(--ink-faint)}

/* --- Gestor --- */
#panel-gestor.active{display:block; overflow-y:auto}
.gwrap{padding:16px; display:grid; gap:14px}
.tiles{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}
.tile{background:var(--surface-2); border-radius:12px; padding:13px 15px}
.tile .tl{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-faint); font-family:"Archivo"}
.tile .tv{font-family:"IBM Plex Mono"; font-size:27px; font-weight:500; margin-top:3px; font-variant-numeric:tabular-nums}
.tile .td{font-size:11.5px; color:var(--ok); margin-top:1px}
.tile.bumped .tv{color:var(--ok)}
.gcols{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.gcard{background:var(--surface-2); border-radius:12px; padding:14px 16px}
.gcard h4{font-family:"Archivo"; font-size:13.5px; margin-bottom:12px}
.frow{display:flex; align-items:center; gap:10px; margin-bottom:9px; font-size:12.5px}
.frow .fl{width:150px; color:var(--ink-soft); flex:none}
.fbar{flex:1; height:18px; background:var(--surface); border-radius:5px; overflow:hidden}
.fbar i{display:block; height:100%; background:var(--navy); border-radius:5px; transition:width .6s ease}
.frow .fv{font-family:"IBM Plex Mono"; font-size:12px; width:34px; text-align:right; flex:none}
.bars{display:flex; align-items:flex-end; gap:10px; height:110px; padding-top:6px}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; color:var(--ink-faint)}
.bar i{display:block; width:100%; max-width:38px; background:var(--info-soft); border-radius:6px 6px 0 0; transition:height .5s ease}
.bar.today i{background:var(--navy)}
.bar b{font-family:"IBM Plex Mono"; font-weight:500; font-size:11.5px; color:var(--ink-soft)}
.occ .frow .fbar i{background:var(--info)}

/* ---------- Mobile ---------- */
@media (max-width:960px){
  body{overflow:auto}
  .topbar{padding:8px 12px; gap:6px}
  .brand .scenario{display:none}
  .controls{margin-left:0; gap:6px; width:100%}
  .btn{padding:6px 12px; font-size:13px}
  .seg{padding:2px; flex-wrap:wrap; max-width:100%}
  .seg button{padding:5px 10px; font-size:12px}
  .progress{min-width:auto; margin-left:auto; order:9}
  .narration{font-size:12.5px; padding:7px 12px}
  .stage{display:block; padding:10px 10px 200px; height:auto; overflow:visible}
  .phone-col, .console{display:none; height:calc(100vh - 270px); min-height:430px}
  .stage.show-phone .phone-col{display:flex}
  .stage.show-console .console{display:flex}
  .phone{max-height:none}
  .qr{padding:12px 16px; font-size:14px}
  .view-toggle{
    display:flex; background:var(--surface-2); border:1px solid var(--line);
    border-radius:999px; padding:4px; gap:4px; flex:none;
  }
  .view-toggle button{padding:8px 14px; border-radius:999px; font-weight:600; font-size:13px; color:var(--ink-soft); position:relative; white-space:nowrap}
  .view-toggle button.on{background:var(--navy); color:var(--bg)}
  .view-toggle button .ping{position:absolute; top:2px; right:4px; width:8px; height:8px; border-radius:50%; background:var(--lime); display:none}
  .view-toggle button.has-ping .ping{display:block; animation:ping 1.2s ease-out infinite}
  #panel-atendimento.active{grid-template-columns:1fr}
  .inbox{display:none}
  .kanban{grid-template-columns:repeat(2,1fr)}
  .agenda{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .gcols{grid-template-columns:1fr}
  .tabs{margin-left:0; width:100%; overflow-x:auto}
  .op-user{display:none}
}
:root[data-theme="dark"] .view-toggle button.on{color:#0B2239}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .view-toggle button.on{color:#0B2239} }

/* ---------- Barra de ação mobile (narração + avançar no alcance do polegar) ---------- */
.mobile-bar{display:none}
@media (max-width:960px){
  .mobile-bar{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:60;
    background:var(--surface); border-top:1px solid var(--line);
    padding:8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow:0 -8px 28px rgba(11,34,57,.14);
  }
  .mobile-bar .narration{
    background:none; border:0; padding:0 2px 8px; font-size:12.5px;
    max-height:76px; overflow-y:auto; align-items:flex-start;
  }
  .mobile-bar .narration .dot{margin-top:5px}
  .mb-row{display:flex; gap:8px; align-items:stretch}
  .mb-row #btnNext{flex:1; justify-content:center; font-size:15px; padding:12px 14px}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important}
}