/* =========================================================================
   SESSÃO EM CAMADAS (04/10/2026)
   O que se usa a cada turno fica sempre à vista, no pé da sessão: a faixa do
   personagem, os atalhos de ação e a caixa de escrita. O que se consulta na
   cena fica no painel com abas (Mesa, Mapa, Diário, Grupo). O raro fica no
   menu da mesa. A arte da campanha sobe até o topo e a barra do título
   assenta sobre ela.
   Carrega depois de app.css e componentes.css: o que está aqui vence.
   ========================================================================= */

/* ---------- grade: conversa + painel ---------- */
#v-sessao .sess{grid-template-columns:minmax(0,1fr) 340px;}
#v-sessao .sess.painel-fechado{grid-template-columns:minmax(0,1fr);}
#v-sessao .sess.painel-fechado > .side{display:none;}
#v-sessao .sess-main{position:relative;isolation:isolate;background:var(--night);}

/* a arte da campanha é o cenário: começa no topo, sob o título, e desce até o chão */
#v-sessao .pane-narr.com-cena::before{content:none;}
#v-sessao .sess-main.com-cena::before{content:"";position:absolute;inset:0 0 auto 0;height:min(60vh,540px);z-index:-1;pointer-events:none;
  background:linear-gradient(to bottom,color-mix(in srgb,var(--night) 42%,transparent) 0%,color-mix(in srgb,var(--night) 76%,transparent) 40%,var(--night) 100%),
    var(--cena) 70% 32%/cover no-repeat;}
:root[data-theme="claro"] #v-sessao .sess-main.com-cena::before{background:linear-gradient(to bottom,rgba(244,243,240,.74) 0%,rgba(244,243,240,.9) 40%,var(--night) 100%),var(--cena) 70% 32%/cover no-repeat;}

/* ---------- barra do título ---------- */
#v-sessao .sess-bar{background:transparent;border-bottom:none;flex-wrap:nowrap;gap:8px;padding:16px clamp(18px,3vw,36px) 6px;}
#v-sessao .sess-bar .tt{font-family:var(--fd);font-size:clamp(18px,1.7vw,22px);font-weight:850;letter-spacing:-.005em;line-height:1.1;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sbtn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;flex:none;border-radius:var(--r);border:1px solid var(--line-2);
  background:color-mix(in srgb,var(--surf) 78%,transparent);color:var(--ink-2);font-size:13px;font-weight:600;
  transition:background-color var(--dur-micro),color var(--dur-micro),border-color var(--dur-micro);}
.sbtn:hover{background:var(--surf-2);color:var(--ink);}
.sbtn.so-icone{width:36px;padding:0;justify-content:center;}
.sbtn[aria-pressed="true"],.sbtn[aria-haspopup][aria-expanded="true"]{background:var(--surf-3);color:var(--ink);border-color:var(--line-2);}

/* busca e filtros: só quando chamados pelo menu da mesa */
#v-sessao .chatfer{margin:4px clamp(18px,3vw,36px) 4px;padding:5px 5px 5px 8px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:var(--surf);flex-wrap:nowrap;gap:6px;}
#v-sessao .chatfer[hidden]{display:none;}
#v-sessao .chatfer #chatBusca{flex:0 1 220px;max-width:220px;min-height:32px;padding:0 10px;font-size:13px;color:var(--ink);background:var(--surf-2);}
#v-sessao .chatfer #chatBusca::placeholder{color:var(--mut-2);}
#v-sessao .chatfer .sbtn{height:32px;width:32px;border:none;background:none;}

#v-sessao .log{padding-top:14px;}

/* ---------- o pé da sessão ---------- */
#v-sessao .sess-pe{flex-shrink:0;position:relative;z-index:2;display:flex;flex-direction:column;gap:9px;
  padding:10px clamp(14px,2.6vw,30px) calc(12px + env(safe-area-inset-bottom, 0px));background:var(--surf);border-top:1px solid var(--line);}
#v-sessao .composer{border-top:none;padding:0;background:none;}

/* faixa do personagem: quem você é e quanto aguenta, sempre à vista */
.pf{display:flex;align-items:center;gap:12px;min-width:0;}
.pf-quem{display:flex;align-items:center;gap:10px;flex:none;min-width:0;max-width:210px;padding:3px 10px 3px 3px;border-radius:var(--r-lg);
  text-align:left;color:var(--ink);transition:background-color var(--dur-micro);}
.pf-quem:hover{background:var(--surf-2);}
.pf-av{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surf-3) center/cover no-repeat;
  color:var(--ink);font-family:var(--fd);font-size:15px;font-weight:850;box-shadow:0 0 0 1px var(--line-2) inset;transition:box-shadow .3s var(--ease);}
.pf-av .i{color:var(--mut);}
.pf-av.vida-ferido{box-shadow:0 0 0 2px color-mix(in srgb,var(--hp) 45%,transparent) inset;}
.pf-av.vida-critico,.pf-av.vida-caido{box-shadow:0 0 0 2px var(--hp) inset;}
.pf-av.vida-caido{filter:grayscale(.85);}
.pf-n{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.pf-n b{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pf-n small{font-size:12px;color:var(--mut);}
.pf.vazia .pf-n small{font-family:var(--fb);}
#v-sessao .pf-vitais{display:flex;flex-direction:row;align-items:stretch;gap:4px;flex:1 1 auto;min-width:0;margin:0;}
.pf-v{flex:1 1 0;min-width:96px;max-width:210px;display:flex;flex-direction:column;gap:6px;padding:6px 9px 7px;border-radius:var(--r);
  text-align:left;transition:background-color var(--dur-micro);}
.pf-v:hover{background:var(--surf-2);}
.pf-v[aria-expanded="true"]{background:var(--surf-2);}
.pf-vh{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0;}
.pf-vh .vn{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pf-vh .vv{font-family:var(--fm);font-size:13px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;}
.pf-vh .vv i{font-style:normal;font-weight:500;color:var(--mut-2);}
.pf-v .bar{height:6px;margin:0;}
.pf-conds{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:44%;overflow-x:auto;scrollbar-width:none;}
.pf-conds::-webkit-scrollbar{display:none;}
.pf-conds .cond{flex:none;}
.pf-add{display:inline-flex;align-items:center;gap:6px;flex:none;height:30px;padding:0 10px;border-radius:var(--r);border:1px dashed var(--line-2);
  color:var(--mut);font-size:12.5px;font-weight:600;white-space:nowrap;transition:color var(--dur-micro),border-color var(--dur-micro);}
.pf-add:hover{color:var(--ink);border-style:solid;}

/* atalhos: as ações do personagem a um clique (e a uma tecla) */
.atalhos{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:1px;
  -webkit-mask-image:linear-gradient(to right,#000 93%,transparent 100%);mask-image:linear-gradient(to right,#000 93%,transparent 100%);}
.atalhos::-webkit-scrollbar{display:none;}
.atalhos[hidden]{display:none;}
.atl{flex:none;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:var(--r);background:var(--surf-2);
  border:1px solid var(--line);color:var(--ink);font-size:13px;
  transition:background-color var(--dur-micro),border-color var(--dur-micro),transform var(--dur-micro) var(--ease);}
.atl:hover{background:var(--surf-3);border-color:var(--line-2);}
.atl:active{transform:translateY(1px);}
.atl b{font-weight:600;white-space:nowrap;}
.atl .d{font-size:12.5px;color:var(--sys);white-space:nowrap;}
.atl kbd{display:grid;place-items:center;min-width:20px;height:20px;margin-left:-4px;padding:0 4px;border-radius:4px;background:var(--surf);
  border:1px solid var(--line-2);font-family:var(--fm);font-size:12px;line-height:1;color:var(--mut);}
.atl.sem{opacity:.55;}
.atl.sem .d{color:var(--mut);}
.atl-t .i{color:var(--sys);}
.atl-t[aria-expanded="true"]{background:var(--surf-3);border-color:var(--line-2);}
.atl-m{color:var(--mut);padding:0 10px;}
.atl-m:hover{color:var(--ink);}

/* caixa de escrita: um campo só, com as ferramentas dentro e o envio ao lado */
#v-sessao .cwrap{display:flex;align-items:flex-end;gap:8px;}
.cfield{flex:1;min-width:0;display:flex;align-items:flex-end;background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  transition:border-color var(--dur-micro),background-color var(--dur-micro);}
.cfield:hover{border-color:color-mix(in srgb,var(--ink) 26%,transparent);}
.cfield:focus-within{border-color:var(--amber);background:var(--surf);}
#v-sessao .cfield textarea{flex:1;min-width:0;min-height:46px;max-height:168px;height:46px;resize:none;border:none;border-radius:var(--r-lg);
  background:transparent;box-shadow:none;padding:12px 4px 12px 14px;font-size:15.5px;line-height:1.45;color:var(--ink);}
#v-sessao .cfield textarea:focus,#v-sessao .cfield textarea:focus-visible{outline:none;box-shadow:none;background:transparent;}
#v-sessao .cfield textarea::placeholder{color:var(--mut-2);}
.cbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;min-width:46px;padding:0 12px;
  border-radius:var(--r-lg);border:1px solid var(--line-2);background:var(--surf-2);color:var(--ink-2);font-size:13px;font-weight:600;white-space:nowrap;
  transition:background-color var(--dur-micro),color var(--dur-micro),border-color var(--dur-micro);}
.cbtn:hover{background:var(--surf-3);color:var(--ink);}
.cbtn[aria-expanded="true"]{background:var(--surf-3);color:var(--ink);}
#btnMais{padding:0;}
#btnMais .i{transition:transform var(--dur-comp) var(--ease-expo);}
#btnMais[aria-expanded="true"] .i{transform:rotate(45deg);}
.cfield .cbtn.emo{height:46px;min-width:42px;padding:0;border:none;background:none;color:var(--mut);}
.cfield .cbtn.emo:hover{color:var(--ink);background:none;}
#v-sessao .send{width:46px;height:46px;border-radius:var(--r-lg);}
#v-sessao .send.parar{background:var(--surf-3);color:var(--ink);}
#v-sessao .send.parar:hover{background:var(--bad-bg);color:var(--hp);}
#v-sessao .cwrap:has(#stopBtn:not([style*="none"])) #sendBtn{display:none;}
.cmeta{display:flex;justify-content:flex-end;margin-top:6px;}
.cmeta:has(#aiMeta:empty){display:none;}
#aiMeta{font-family:var(--fm);font-size:12px;color:var(--mut-2);}
#v-sessao .replybar,#v-sessao .anexobar{margin-bottom:8px;}

/* ---------- menu suspenso (Pop) ---------- */
.pop{position:fixed;z-index:var(--z-pop);min-width:232px;max-width:min(340px,calc(100vw - 16px));display:flex;flex-direction:column;padding:6px;
  background:var(--surf);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);}
.pop.entra{animation:popEntra .2s var(--ease-expo);}
@keyframes popEntra{from{opacity:0;transform:translateY(6px) scale(.985);}to{opacity:1;transform:none;}}
.pop hr{border:none;border-top:1px solid var(--line);margin:5px 6px;}
.pop [role="menuitem"]{display:flex;align-items:flex-start;gap:11px;width:100%;min-height:40px;padding:9px 10px;border-radius:var(--r);
  text-align:left;color:var(--ink-2);transition:background-color var(--dur-micro);}
.pop [role="menuitem"] > .i{flex:none;margin-top:1px;color:var(--mut);}
.pop [role="menuitem"] > span{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.pop [role="menuitem"] b{font-size:13.5px;font-weight:600;color:var(--ink);}
.pop [role="menuitem"] small{font-size:12px;line-height:1.35;color:var(--mut);}
.pop [role="menuitem"] > i{align-self:center;margin-left:auto;font-style:normal;font-size:12.5px;color:var(--sys);}
.pop [role="menuitem"]:hover,.pop [role="menuitem"]:focus-visible{background:var(--surf-2);outline:none;}
.pop [role="menuitem"]:hover > .i,.pop [role="menuitem"]:focus-visible > .i{color:var(--ink);}
.pop [role="menuitem"][disabled]{opacity:.5;cursor:not-allowed;background:none;}
.pop-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 8px 10px;}
.pop-h b{font-family:var(--fd);font-size:13px;font-weight:850;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);}
.pop-h .hint{font-size:12px;}

.pop-testar{width:304px;}
.pop-testar .quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:0 4px 8px;}
.pop-testar .qd{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:50px;padding:6px 4px;
  border-radius:var(--r);background:var(--surf-2);transform:none;}
.pop-testar .qd b{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--mut);}
.pop-testar .qd span{font-family:var(--fm);font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.pop-testar .qd:hover,.pop-testar .qd:focus-visible{background:var(--sys-soft);outline:none;transform:none;}
.pop-testar .qd:hover span,.pop-testar .qd:focus-visible span{color:var(--sys);}
.pop-busca{padding:2px 4px 6px;}
.pop-busca input{width:100%;min-height:38px;font-size:13.5px;}
.pop-lista{display:flex;flex-direction:column;max-height:236px;overflow-y:auto;overscroll-behavior:contain;}
.pop-lista .hint{padding:6px 10px 8px;}

.pop-vital{width:268px;}
.aj-num{display:flex;align-items:center;gap:8px;padding:0 6px 10px;}
.aj-num input{width:0;flex:1;min-height:46px;text-align:center;font-family:var(--fm);font-size:19px;font-weight:700;}
.aj-num span{font-family:var(--fm);color:var(--mut-2);}
.aj-bts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 6px 8px;}
.aj-bts .btn{justify-content:center;min-height:40px;padding:0;font-family:var(--fm);font-size:14px;}
.aj-bts .menos{color:var(--hp);}
.aj-bts .mais{color:var(--good);}
.pop-vital > .hint{padding:0 8px 6px;font-size:12px;}

/* ---------- painel com abas ---------- */
#v-sessao .side{display:flex;flex-direction:column;background:var(--surf);}
.ptabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;flex-shrink:0;padding:8px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1;background:var(--surf);}
.ptabs [role="tab"]{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;border-radius:var(--r);
  color:var(--mut);font-size:12px;font-weight:600;transition:background-color var(--dur-micro),color var(--dur-micro);}
.ptabs [role="tab"]:hover{color:var(--ink);background:var(--surf-2);}
.ptabs [role="tab"][aria-selected="true"]{color:var(--ink);background:var(--surf-3);}
.ptabs .cnt{position:absolute;top:5px;right:8px;font-size:12px;color:var(--mut-2);}
.ppan{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.ppan[hidden]{display:none;}
#pp-mapa{display:flex;flex-direction:column;gap:10px;padding:14px;}
#pp-mapa > .pane-mesa{display:flex;flex-direction:column;max-height:none;border:none;overflow:visible;}
#pp-mapa .mesa{padding:0;gap:10px;overflow:visible;}
#pp-mapa .mesabar{justify-content:center;}
#pp-mapa .stage-t{max-width:none;}
.pp-ampliar{align-self:center;}
.pd-item{display:flex;flex-direction:column;gap:2px;width:calc(100% + 16px);margin:0 -8px;padding:8px;border-radius:var(--r);text-align:left;
  transition:background-color var(--dur-micro);}
.pd-item:hover{background:var(--surf-2);}
.pd-item b{font-size:13.5px;font-weight:600;color:var(--ink);}
.pd-item span{font-size:12.5px;line-height:1.4;color:var(--mut);}
.pd-vazio{padding:20px;}
#painelGrupo{padding:12px 20px 18px;}
.camada[data-camada="mesa"]{width:min(520px,calc(100vw - 40px));}
.cam-b > aside.side.na-camada .ptabs{top:-16px;margin:-16px -16px 0;}

/* ---------- tela estreita ---------- */
@media(min-width:901px) and (max-width:1199px){
  #v-sessao .sess{grid-template-columns:minmax(0,1fr) 300px;}
  .pf-n small{display:none;}
}
@media(max-width:900px){
  /* no celular o painel não fica ao lado: abre por cima, como camada ("Mesa") */
  #v-sessao .sess,#v-sessao .sess.painel-fechado{grid-template-columns:minmax(0,1fr);}
  #v-sessao .sess > .side{display:none;}
  #v-sessao .sess-bar{padding:10px 12px 4px;}
  #v-sessao .sess-bar .tt{font-size:16px;}
  #v-sessao .sbtn{height:40px;}
  #v-sessao .sbtn.so-icone{width:40px;}
  #v-sessao .chatfer{margin:2px 10px 4px;}
  #v-sessao .chatfer #chatBusca{flex:1 1 140px;max-width:none;}
  #v-sessao .chatfer .chatchips{display:none;}
  #v-sessao .chatfer:not(:focus-within) .chatchips{display:flex;}
  #v-sessao .chatfer:not(:focus-within) #chatBusca{flex:0 0 110px;}
  #v-sessao .sess-pe{gap:7px;padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px));}
  .pf{gap:6px;}
  .pf-quem{padding:0;max-width:none;}
  .pf-n{display:none;}
  .pf-av{width:36px;height:36px;}
  .pf-v{min-width:0;padding:4px 6px 5px;gap:5px;}
  .pf-conds{max-width:38%;}
  .pf-add{width:34px;padding:0;justify-content:center;}
  .pf-add span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .atl{height:38px;}
  .cbtn,#v-sessao .send{height:44px;min-width:44px;}
  #v-sessao .send{width:44px;}
  #v-sessao .cfield textarea{min-height:44px;height:44px;padding:11px 6px 11px 12px;font-size:16px;}
  .cbtn.vozbtn span,.cbtn.chamar span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .cbtn.vozbtn,.cbtn.chamar{padding:0;}
}
@media(pointer:coarse){
  .atl kbd{display:none;}
  .cfield .cbtn.emo{display:none;}
  .atl{min-height:var(--toque);}
}
/* teclado aberto ou celular deitado: a escrita e a conversa ficam com a altura */
body.teclado #v-sessao .pf,body.teclado #v-sessao .atalhos{display:none;}
@media(max-height:520px) and (orientation:landscape){
  #v-sessao .pf,#v-sessao .atalhos{display:none;}
  #v-sessao .sess-bar{padding-top:4px;padding-bottom:2px;}
}
@media(prefers-reduced-motion:reduce){
  .pop.entra{animation:none;}
  #btnMais .i{transition:none;}
  .atl:active{transform:none;}
}
/* item de menu que destrói: vermelho só no texto e no ícone */
.pop [role="menuitem"].dgr b,.pop [role="menuitem"].dgr > .i{color:var(--hp);}
/* o nome da campanha virou o título (h1) da tela: mesmo desenho de antes */
#sessTitle{margin:0;}
.cfield .cbtn.gifb{align-self:flex-end;margin:0 2px 9px;background:none;}