/* Placas da Turma — estilo actual: vidro suave, formas arredondadas, luz em gradiente. Tema escuro assumido. */
@font-face{font-family:"Sora";font-weight:500;font-display:swap;src:url("/static/fontes/sora-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:600;font-display:swap;src:url("/static/fontes/sora-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:700;font-display:swap;src:url("/static/fontes/sora-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Sora";font-weight:800;font-display:swap;src:url("/static/fontes/sora-latin-800-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url("/static/fontes/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url("/static/fontes/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url("/static/fontes/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("/static/fontes/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:400;font-display:swap;src:url("/static/fontes/jetbrains-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"JetBrains Mono";font-weight:500;font-display:swap;src:url("/static/fontes/jetbrains-mono-latin-500-normal.woff2") format("woff2")}

/* Layout: coluna larga; painéis de vidro arredondados sobre uma aurora de luz em movimento. */
:root{
  color-scheme:dark;
  --fundo:#060812;
  --vidro:rgba(255,255,255,.045); --vidro-forte:rgba(255,255,255,.075); --borda:rgba(255,255,255,.09); --borda-forte:rgba(255,255,255,.16);
  --texto:#f2f5fc; --texto-2:#a3acc4; --texto-3:#6c7591;
  --ciano:#3ee8d4; --azul:#6d8bff; --violeta:#a77bff; --rosa:#ff6fcf; --ambar:#ffc15e; --ok:#52eba9; --erro:#ff7f8f;
  --grad:linear-gradient(120deg,#3ee8d4 0%,#6d8bff 50%,#a77bff 100%);
  --f-display:"Sora","Segoe UI",system-ui,sans-serif;
  --f-texto:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:24px; --r-m:16px;
  --sombra:0 1px 0 rgba(255,255,255,.06) inset,0 20px 50px -24px rgba(0,0,0,.8);
  --brilho:0 0 0 1px rgba(62,232,212,.35),0 10px 40px -10px rgba(62,232,212,.45);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--fundo);color:var(--texto);font-family:var(--f-texto);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
::selection{background:rgba(109,139,255,.4)}

/* ---------- aurora de fundo ---------- */
.cosmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:var(--fundo)}
.cosmos::before,.cosmos::after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.55}
.cosmos::before{width:60vmax;height:60vmax;left:-15vmax;top:-20vmax;background:radial-gradient(circle,rgba(62,232,212,.55),rgba(62,232,212,0) 65%);animation:deriva1 26s ease-in-out infinite alternate}
.cosmos::after{width:70vmax;height:70vmax;right:-25vmax;top:10vmax;background:radial-gradient(circle,rgba(167,123,255,.55),rgba(109,139,255,.25) 40%,rgba(109,139,255,0) 68%);animation:deriva2 32s ease-in-out infinite alternate}
@keyframes deriva1{to{transform:translate(18vmax,22vmax) scale(1.15)}}
@keyframes deriva2{to{transform:translate(-20vmax,-12vmax) scale(.9)}}

.gut{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.largo{max-width:1180px;margin:0 auto}
main>.largo{width:100%}
h1,h2,h3{font-family:var(--f-display);margin:0;line-height:1.12;text-wrap:balance;letter-spacing:-.02em;font-weight:700}
p{margin:0}
a{color:var(--ciano)}
.eyebrow{font-family:var(--f-texto);font-weight:700;font-size:.8rem;letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px;color:var(--texto-2)}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);box-shadow:0 0 12px rgba(62,232,212,.8)}
.mono{font-size:.8rem;color:var(--texto-3)}
.muted{color:var(--texto-2)}

/* ---------- botões ---------- */
button,.btn{font:inherit;font-family:var(--f-texto);font-weight:700;font-size:.92rem;border:0;border-radius:999px;padding:.7em 1.3em;cursor:pointer;display:inline-flex;align-items:center;gap:.5em;text-decoration:none;color:var(--texto);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s}
.prim{background:var(--grad);color:#061020;box-shadow:0 8px 24px -10px rgba(109,139,255,.8)}
.prim:hover{transform:translateY(-1px);box-shadow:0 12px 30px -10px rgba(62,232,212,.9)}
.sec{background:var(--vidro-forte);box-shadow:inset 0 0 0 1px var(--borda)}
.sec:hover{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px var(--borda-forte)}
.peq{font-size:.8rem;padding:.45em .95em}
.perigo{background:rgba(255,127,143,.08);color:var(--erro);box-shadow:inset 0 0 0 1px rgba(255,127,143,.35)}
button:active{transform:scale(.98)}
button:disabled{opacity:.45;cursor:default;transform:none}
:focus-visible{outline:2px solid var(--ciano);outline-offset:3px}

/* ---------- barra superior ---------- */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:rgba(6,8,18,.9)}
.barra{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;padding-block:12px}
.barra .largo{display:flex;align-items:center;gap:18px;min-height:56px;flex-wrap:wrap;padding:6px 8px 6px 18px;background:rgba(14,18,34,.62);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);border:1px solid var(--borda);border-radius:999px;box-shadow:0 10px 40px -20px rgba(0,0,0,.9)}
.marca{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;white-space:nowrap}
.marca i{width:26px;height:26px;display:block;border-radius:9px;background:var(--grad);position:relative;box-shadow:0 0 18px rgba(62,232,212,.55)}
.marca i::after{content:"";position:absolute;inset:7px;border-radius:4px;background:var(--fundo);opacity:.9}
nav.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap;background:rgba(255,255,255,.04);padding:4px;border-radius:999px}
nav.tabs button{background:transparent;color:var(--texto-2);font-weight:600;font-size:.88rem;padding:.5em 1.05em}
nav.tabs button:hover{color:var(--texto)}
nav.tabs button[aria-current="page"]{background:rgba(255,255,255,.1);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borda-forte)}

/* ---------- painéis de vidro ---------- */
.painel{position:relative;background:var(--vidro);border:1px solid var(--borda);border-radius:var(--r);padding:22px;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:var(--sombra)}
.aviso{background:linear-gradient(135deg,rgba(255,193,94,.10),rgba(255,255,255,.03));border-color:rgba(255,193,94,.25)}

/* ---------- herói ---------- */
.heroi{position:relative;overflow:hidden}
.heroi canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.8}
.heroi .largo{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;padding-block:56px 70px}
.heroi h1{font-size:clamp(2.4rem,5.6vw,4.1rem);font-weight:800;letter-spacing:-.035em;margin-top:16px;line-height:1.02}
.heroi h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroi .lead{margin-top:18px;color:var(--texto-2);max-width:50ch;font-size:1.08rem}
.heroi .acoes{margin-top:28px}
.metricas{display:flex;gap:10px;margin-top:30px;flex-wrap:wrap}
.metricas div{display:grid;padding:12px 18px;background:var(--vidro);border:1px solid var(--borda);border-radius:var(--r-m);min-width:110px}
.metricas b{font-family:var(--f-display);font-size:1.7rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.metricas .mono{color:var(--texto-2)}
@media (max-width:860px){.heroi .largo{grid-template-columns:1fr;padding-block:30px 44px}}

/* placa 3D */
.palco{perspective:1300px;display:grid;place-items:center;min-height:300px}
.tenda{position:relative;width:min(100%,440px);aspect-ratio:1.55;transform:rotateX(14deg) rotateY(-18deg) rotateZ(1deg);transform-style:preserve-3d;animation:flutua 8s ease-in-out infinite}
@keyframes flutua{50%{transform:rotateX(10deg) rotateY(-12deg) rotateZ(0deg) translateY(-10px)}}
.face{position:absolute;inset:0;border-radius:28px;background:linear-gradient(145deg,rgba(40,52,100,.85),rgba(14,18,40,.92) 55%,rgba(30,22,64,.9));border:1px solid rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(62,232,212,.25),0 30px 80px -30px rgba(109,139,255,.7),inset 0 1px 0 rgba(255,255,255,.2);padding:24px 26px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.face::after{content:"";position:absolute;top:-50%;left:-70%;width:55%;height:200%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.12),transparent);transform:rotate(14deg);pointer-events:none;animation:varre 7s ease-in-out infinite}
@keyframes varre{0%,55%{left:-70%}100%{left:140%}}
.face .topo-face{display:flex;justify-content:space-between;align-items:center}
.face .topo-face .mono{color:var(--texto-2);font-size:.7rem!important;letter-spacing:.08em!important}
.pill{font-size:.7rem;font-weight:700;padding:3px 10px;border-radius:999px;background:rgba(82,235,169,.12);color:var(--ok);display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.face .nome{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1;letter-spacing:-.03em;align-self:center;overflow-wrap:anywhere}
.face .sub{font-size:.8rem;color:var(--texto-2);margin-top:8px}
.face .rodape-face{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.face .qr-mini{width:78px;height:78px;background:#fff;padding:6px;border-radius:14px;box-shadow:0 8px 24px -8px rgba(62,232,212,.7)}
.face .qr-mini svg{width:100%;height:100%;display:block}
.nfc{display:flex;align-items:center;gap:8px;color:var(--ciano);font-size:.74rem;font-weight:700}
.base{display:none}
.poca{position:absolute;left:10%;right:10%;bottom:-70px;height:60px;background:radial-gradient(closest-side,rgba(109,139,255,.45),transparent);filter:blur(10px)}

/* ---------- secções ---------- */
main{display:grid;gap:40px;padding-block:28px 80px}
.cab{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cab h2{font-size:1.9rem;margin-top:8px}
.cab p{color:var(--texto-2);margin-top:6px;max-width:60ch}
input,textarea,select{font:inherit;color:var(--texto);background:rgba(255,255,255,.04);border:1px solid var(--borda);border-radius:14px;padding:.75em .95em;width:100%;transition:border-color .2s,box-shadow .2s,background .2s}
input:focus,textarea:focus{outline:none;border-color:rgba(62,232,212,.6);box-shadow:0 0 0 4px rgba(62,232,212,.12);background:rgba(255,255,255,.06)}
input::placeholder,textarea::placeholder{color:var(--texto-3)}
textarea{min-height:6em;resize:vertical}
.busca{max-width:340px;border-radius:999px;padding-left:1.2em}

/* cartões de colegas */
.grelha{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.cartao{position:relative;display:grid;gap:12px;padding:20px;text-decoration:none;color:inherit;cursor:pointer;background:var(--vidro);border:1px solid var(--borda);border-radius:var(--r);transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s,background .3s;overflow:hidden;box-shadow:var(--sombra)}
.cartao::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .3s;pointer-events:none}
.cartao:hover,.cartao:focus-visible{transform:translateY(-4px);background:var(--vidro-forte);box-shadow:0 24px 50px -24px rgba(109,139,255,.6)}
.cartao:hover::before{opacity:1}
.cartao.sugerido{border-color:rgba(255,193,94,.45)}
.cartao .linha1{display:flex;gap:14px;align-items:center;min-width:0}
.cartao strong{font-family:var(--f-display);font-size:1.1rem;font-weight:700;display:block;line-height:1.2;letter-spacing:-.01em}
.cartao .cg{font-size:.86rem;color:var(--texto-2)}
.cartao .desafio{font-size:.9rem;color:var(--texto-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cartao .idc{display:none}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font-size:.76rem;font-weight:600;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.06);color:var(--texto-2);text-decoration:none;border:0}
.tag.ciano{background:rgba(62,232,212,.12);color:var(--ciano)}
.tag.ambar{background:rgba(255,193,94,.13);color:var(--ambar)}
.tag.ok{background:rgba(82,235,169,.12);color:var(--ok)}
.tag.rosa{background:rgba(255,111,207,.12);color:var(--rosa)}
.tag.violeta{background:rgba(167,123,255,.14);color:#cdb7ff}
a.tag:hover,button.tag:hover{filter:brightness(1.25)}

/* avatar: "squircle" com gradiente */
.av{flex:none}
.avatar{flex:none;width:46px;height:46px;border-radius:36%;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:.95rem;color:#061020;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.avatar.g{width:96px;height:96px;font-size:1.8rem;border-radius:34%}
.avatar.p{width:40px;height:40px;font-size:.82rem}
.avatar.pp{width:28px;height:28px;font-size:.6rem}
.vazio{border:1px dashed var(--borda-forte);border-radius:var(--r);padding:32px;text-align:center;color:var(--texto-2);display:grid;gap:12px;justify-items:center}

/* sugestões */
.sug-lista{display:grid;gap:10px;margin-top:16px}
.sug-item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;background:rgba(255,193,94,.06);border:1px solid rgba(255,193,94,.2);border-radius:var(--r-m)}
.sug-item p{font-size:.9rem;color:var(--texto-2)}

/* ---------- perfil ---------- */
.perfil-topo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:26px;align-items:center}
.perfil-topo h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;letter-spacing:-.035em}
@media (max-width:760px){.perfil-topo{grid-template-columns:1fr}}
.qr-g{background:#fff;padding:10px;width:136px;height:136px;border-radius:20px;box-shadow:0 10px 40px -12px rgba(62,232,212,.7)}
.qr-g svg{width:100%;height:100%;display:block}
.campos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px}
.campo-v{display:grid;gap:6px;align-content:start;min-width:0}
.campo-v h3{font-family:var(--f-texto);font-size:.8rem;font-weight:700;color:var(--ciano);letter-spacing:.01em}
.campo-v p{white-space:pre-line;overflow-wrap:anywhere}
.dois{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:900px){.dois{grid-template-columns:1fr}}

/* agente */
.agente{display:grid;gap:14px}
.agente .cab-ag{display:flex;gap:14px;align-items:center}
.orb{width:44px;height:44px;border-radius:50%;flex:none;background:radial-gradient(circle at 32% 30%,#ffffff,#9ff6ec 18%,var(--ciano) 38%,var(--azul) 70%,var(--violeta));box-shadow:0 0 30px -4px rgba(62,232,212,.8);position:relative}
.orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(62,232,212,.4);animation:onda 2.6s ease-out infinite}
@keyframes onda{from{transform:scale(.9);opacity:1}to{transform:scale(1.5);opacity:0}}
.orb.ativo{animation:pulsa 1s ease-in-out infinite}
@keyframes pulsa{50%{box-shadow:0 0 44px 6px rgba(62,232,212,.9)}}
.sugs{display:flex;gap:8px;flex-wrap:wrap}
.conversa{display:grid;gap:10px;max-height:400px;overflow-y:auto}
.msg{padding:10px 15px;max-width:88%;white-space:pre-line;overflow-wrap:anywhere;font-size:.95rem;border-radius:18px}
.msg.eu{justify-self:end;background:var(--grad);color:#061020;border-bottom-right-radius:6px;font-weight:500}
.msg.ag{justify-self:start;background:rgba(255,255,255,.07);border-bottom-left-radius:6px}
.linha-form{display:flex;gap:8px;align-items:center}
.linha-form input{flex:1;min-width:0;border-radius:999px;padding-left:1.1em}

/* ---------- PORTAL ---------- */
.portal-cab{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:end}
.portal-cab>*{min-width:0}
.portal-cab h2{font-size:clamp(1.9rem,3.8vw,2.6rem);margin-top:8px;letter-spacing:-.03em}
.ticker{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:100%}
.ticker div{padding:10px 16px;background:var(--vidro);border:1px solid var(--borda);border-radius:var(--r-m);display:grid}
.ticker b{font-family:var(--f-display);font-size:1.4rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ticker .mono{color:var(--texto-2)}
@media (max-width:760px){.portal-cab{grid-template-columns:1fr}}
.portal{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;align-items:start}
.portal .lateral{position:sticky;top:96px;display:grid;gap:16px}
@media (max-width:1000px){.portal{grid-template-columns:1fr}.portal .lateral{position:static;order:-1}}
.coluna{display:grid;gap:16px;min-width:0}
.filtros{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.filtros button{flex:none;background:rgba(255,255,255,.05);color:var(--texto-2);font-weight:600;font-size:.84rem;padding:.45em 1em}
.filtros button:hover{color:var(--texto)}
.filtros button[aria-pressed="true"]{background:var(--texto);color:#0a0e1c}
.filtros .n{font-size:.75rem;opacity:.6;margin-left:4px}
.feed{display:grid;gap:14px}
.post{display:grid;gap:14px;padding:20px 22px}
.post::before{content:"";position:absolute;left:0;top:22px;width:3px;height:34px;border-radius:0 4px 4px 0;background:var(--cor,var(--ciano));box-shadow:0 0 14px var(--cor,var(--ciano))}
.post .autor{display:flex;gap:12px;align-items:center}
.post .corpo{white-space:pre-line;overflow-wrap:anywhere;font-size:1.04rem;line-height:1.6}
.post .rodape-post{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.post .tipo{margin-left:auto;font-size:.76rem;font-weight:700;color:var(--cor,var(--ciano));background:color-mix(in srgb,var(--cor,var(--ciano)) 14%,transparent);padding:4px 11px;border-radius:999px;white-space:nowrap}
.respostas{display:grid;gap:10px}
.resposta{display:grid;gap:6px;padding:12px 14px;background:rgba(255,255,255,.035);border-radius:var(--r-m)}
.resposta p{font-size:.95rem;white-space:pre-line;overflow-wrap:anywhere}
.link-nome{background:none;border:0;padding:0;color:var(--texto);font:inherit;font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;cursor:pointer;text-decoration:none;font-size:.98rem;border-radius:0}
.link-nome:hover{color:var(--ciano)}
.sem-resposta{color:var(--ambar);font-size:.85rem}

/* colmeia */
.colmeia{padding:20px}
.colmeia .cab-c{display:flex;justify-content:space-between;align-items:center;gap:10px}
.colmeia h3{font-size:1.2rem}
.colmeia .tela{position:relative;margin-top:6px}
.colmeia svg{width:100%;height:auto;display:block;overflow:visible}
.hex-vazio{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.06);stroke-width:1;stroke-linejoin:round}
.hex{cursor:pointer;transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hex .forma{stroke-width:1.4;stroke-linejoin:round;transition:stroke-width .2s,filter .3s}
.hex text{font-family:var(--f-display);font-weight:700;font-size:15px;fill:#fff;pointer-events:none}
.hex:hover,.hex:focus-visible,.hex.ativo{transform:scale(1.1)}
.hex:hover .forma,.hex.ativo .forma,.hex:focus-visible .forma{stroke-width:2.4;filter:drop-shadow(0 0 12px var(--h))}
.hex.eu .forma{stroke-width:2.2}
.fio{stroke:rgba(62,232,212,.5);stroke-width:1.4;fill:none;stroke-linecap:round;stroke-dasharray:3 6;animation:corre 2.6s linear infinite}
.fio.mutuo{stroke:rgba(82,235,169,.85);stroke-width:2.2;stroke-dasharray:none;filter:drop-shadow(0 0 5px rgba(82,235,169,.8))}
.fio.sector{stroke:rgba(167,123,255,.35);stroke-dasharray:1 6;animation:none}
@keyframes corre{to{stroke-dashoffset:-18}}
.dica{position:fixed;z-index:50;width:250px;padding:14px 16px;background:rgba(16,20,38,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--borda-forte);border-radius:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);pointer-events:none;display:grid;gap:6px}
.dica strong{font-family:var(--f-display);font-size:1.02rem}
.dica p{font-size:.85rem;color:var(--texto-2)}
.dica .mono{color:var(--texto-2)!important}
.legenda{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:.76rem;color:var(--texto-3)}
.legenda span{display:inline-flex;gap:6px;align-items:center}
.legenda i{width:14px;height:3px;border-radius:2px;display:inline-block}
.lista-temas{display:grid;gap:2px;margin-top:12px;max-height:320px;overflow-y:auto}
.item-tema{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;color:var(--texto);text-decoration:none;border-radius:12px;font-size:.94rem;font-weight:500}
.item-tema:hover{background:rgba(255,255,255,.06)}
.item-tema.ativo{background:rgba(62,232,212,.12);color:var(--ciano)}
.item-tema .n{font-size:.78rem;color:var(--texto-3);background:rgba(255,255,255,.06);padding:1px 8px;border-radius:999px}

/* reacções, emojis, comentários */
.reacoes{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.reac{font-weight:600;font-size:.9rem;padding:.28em .7em;background:rgba(255,255,255,.06);box-shadow:none;gap:.35em}
.reac .n{font-size:.78rem;color:var(--texto-2)}
.reac[aria-pressed="true"]{background:rgba(109,139,255,.2);box-shadow:inset 0 0 0 1px rgba(109,139,255,.6)}
.reac[aria-pressed="true"] .n{color:#c9d4ff}
.reac.mais{color:var(--texto-3);font-size:.85rem}
.reacoes.pequena .reac{font-size:.8rem;padding:.18em .55em}
.paleta{position:absolute;z-index:15;bottom:calc(100% + 8px);left:0;display:grid;grid-template-columns:repeat(6,38px);gap:2px;padding:8px;background:rgba(16,20,38,.95);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--borda-forte);border-radius:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.9)}
.reac-pal{grid-template-columns:repeat(8,38px)}
.emo{padding:0;width:38px;height:38px;justify-content:center;font-size:1.3rem;background:transparent;border-radius:12px}
.emo:hover{background:rgba(255,255,255,.1);transform:scale(1.18)}
.comentarios{display:grid;gap:12px;padding-top:14px;border-top:1px solid var(--borda)}
.link-mais{background:none;padding:0;color:var(--ciano);font-weight:600;font-size:.82rem;justify-self:start;border-radius:0}
.link-mais:hover{text-decoration:underline}

/* compositor */
.comp-fechado{display:grid;gap:12px;padding:16px 18px}
.comp-linha{display:flex;gap:12px;align-items:center}
.comp-nome{font-family:var(--f-display);font-weight:600;font-size:1rem}
.comp-falso{flex:1;font-weight:500;font-size:1rem;color:var(--texto-3);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--borda);padding:.85em 1.2em;justify-content:flex-start}
.comp-falso:hover{background:rgba(255,255,255,.08);color:var(--texto-2)}
.comp-atalhos{display:flex;gap:6px;flex-wrap:wrap;padding-left:52px}
.atalho,.pill-tipo{font-weight:600;font-size:.84rem;padding:.42em .9em;background:rgba(255,255,255,.04);color:var(--texto-2)}
.atalho .g,.pill-tipo .g{color:var(--cor)}
.atalho:hover{color:var(--texto);background:color-mix(in srgb,var(--cor) 14%,transparent)}
.pill-tipo[aria-pressed="true"]{color:#fff;background:color-mix(in srgb,var(--cor) 22%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--cor) 60%,transparent)}
.publicar{display:grid;gap:14px}
.publicar textarea{min-height:7.5em;font-size:1.05rem;border-color:transparent;background:rgba(255,255,255,.03)}
.detalhes{display:grid;gap:10px;padding-top:12px;border-top:1px solid var(--borda)}
.det-linha{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.det-rot{font-size:.78rem;font-weight:700;color:var(--texto-3);width:44px;flex:none}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.tema-campo{display:flex;align-items:center;width:min(100%,260px);background:rgba(255,255,255,.05);border-radius:999px;padding-left:14px;box-shadow:inset 0 0 0 1px var(--borda)}
.tema-campo:focus-within{box-shadow:inset 0 0 0 1px rgba(62,232,212,.6),0 0 0 4px rgba(62,232,212,.12)}
.tema-campo .cardinal{color:var(--ciano);font-weight:700}
.tema-campo input{border:0;background:transparent;padding:.5em .7em;font-size:.92rem;box-shadow:none}
.tema-campo input:focus{box-shadow:none;background:transparent}
.comp-acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ---------- formulários e outros ---------- */
form.ficha{display:grid;gap:18px}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:.9rem}
.campo small{color:var(--texto-3);font-size:.82rem}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.grid2 .campo{align-content:end}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--texto-2)}
.consent input{width:auto;margin-top:.35em;accent-color:var(--ciano)}
.estado{font-size:.9rem}
.estado.ok{color:var(--ok)}.estado.erro{color:var(--erro)}
.confirmar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:10px 14px;background:rgba(255,127,143,.08);border:1px solid rgba(255,127,143,.3);border-radius:var(--r-m)}
.acoes{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.lado{display:grid;gap:16px;align-content:start}
.entrada{display:grid;gap:18px}
.entrada .separadores{display:flex;gap:4px;background:rgba(255,255,255,.05);padding:4px;border-radius:999px}
.entrada .separadores button{flex:1;background:transparent;color:var(--texto-2);justify-content:center}
.entrada .separadores button[aria-selected="true"]{background:rgba(255,255,255,.1);color:var(--texto);box-shadow:inset 0 0 0 1px var(--borda-forte)}
.entrada form{display:grid;gap:14px}
.legal{display:grid;gap:18px;max-width:780px}
.legal h2{font-size:1.3rem;margin-top:8px}
.legal p,.legal li{color:var(--texto-2)}
.legal ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.conta{display:grid;gap:14px}
.conta .linha-acoes{display:flex;gap:10px;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:rgba(16,20,38,.95);backdrop-filter:blur(20px);border:1px solid var(--borda-forte);color:var(--texto);padding:12px 20px;border-radius:999px;box-shadow:0 20px 50px -20px rgba(0,0,0,.9);z-index:40;font-weight:600;font-size:.9rem;max-width:calc(100% - 32px)}
footer{padding-block:24px 44px;color:var(--texto-3);font-size:.85rem}
footer .largo{display:grid;gap:4px;border-top:1px solid var(--borda);padding-top:22px}
footer a{color:var(--texto-2)}

@media (max-width:560px){
  .ticker div{padding:8px 10px}.ticker b{font-size:1.15rem}.ticker .mono{font-size:.68rem}
  .colmeia svg{max-height:320px}.metricas div{min-width:0;padding:10px 14px}
  .comp-atalhos{padding-left:0}.det-rot{width:auto}
  .barra .largo{border-radius:22px;padding:8px 10px}
  nav.tabs{margin-left:0;width:100%;justify-content:space-between}
  .paleta{grid-template-columns:repeat(6,36px)}.reac-pal{grid-template-columns:repeat(4,36px)}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* =====================================================================
   TEMA "ARTEFACTO IA v2.0" — grafite, vidro OLED, arestas ciano, holograma dourado
   (sobrepõe os tokens e componentes acima)
   ===================================================================== */
:root{
  --fundo:#0a0f12;
  --vidro:linear-gradient(180deg,rgba(28,44,52,.55),rgba(12,20,25,.62));
  --vidro-forte:rgba(40,64,74,.45);
  --borda:rgba(70,236,224,.28); --borda-forte:rgba(70,236,224,.55);
  --texto:#eef8fa; --texto-2:#9db3ba; --texto-3:#62777e;
  --ciano:#46ece0; --azul:#3fb8ff; --ouro:#f1c35a;
  --grad:linear-gradient(120deg,#8ff8ff 0%,#46ece0 45%,#18b4c4 100%);
  --sombra:0 0 0 1px rgba(70,236,224,.06),0 0 26px -8px rgba(70,236,224,.45),inset 0 1px 0 rgba(255,255,255,.08),0 24px 50px -28px rgba(0,0,0,.9);
  --r:18px; --r-m:14px;
}
/* sala escura com luz ciano e reflexo da mesa */
.cosmos{background:radial-gradient(120% 70% at 50% -10%,#1d2a31 0%,#0e1519 45%,#090d10 100%)}
.cosmos::before{width:70vmax;height:40vmax;left:15vmax;top:auto;bottom:-22vmax;background:radial-gradient(closest-side,rgba(70,236,224,.28),rgba(70,236,224,0));filter:blur(60px);opacity:.9;animation:respira 9s ease-in-out infinite alternate}
.cosmos::after{width:50vmax;height:50vmax;right:-12vmax;top:-18vmax;background:radial-gradient(closest-side,rgba(63,184,255,.22),rgba(63,184,255,0));filter:blur(70px);opacity:.8;animation:respira 12s ease-in-out infinite alternate-reverse}
@keyframes respira{from{transform:scale(1);opacity:.65}to{transform:scale(1.12);opacity:1}}

/* títulos carregados em maiúsculas, como no infográfico */
h1,h2,h3{text-transform:uppercase;letter-spacing:.005em;font-weight:800}
.heroi h1{font-size:clamp(2.2rem,5vw,3.7rem);letter-spacing:0;line-height:1.02}
.heroi h1 em{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(70,236,224,.45))}
.perfil-topo h1,.portal-cab h2,.cab h2{letter-spacing:0}
.eyebrow{color:var(--ciano);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem}
.eyebrow::before{width:18px;height:2px;border-radius:2px;background:var(--ciano);box-shadow:0 0 10px var(--ciano)}

/* barra de título azul-marinho (como a faixa do topo do infográfico) */
.barra{padding-block:0;background:linear-gradient(180deg,#10233a,#0b1828);border-bottom:1px solid rgba(70,236,224,.35);box-shadow:0 10px 30px -18px rgba(70,236,224,.6)}
.barra .largo{background:none;border:0;box-shadow:none;border-radius:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;min-height:66px}
.marca{text-transform:uppercase;font-weight:800;letter-spacing:.03em;font-size:1.1rem}
.marca i{border-radius:8px;background:transparent;box-shadow:0 0 0 2px var(--ciano),0 0 16px rgba(70,236,224,.7)}
.marca i::after{inset:6px;border-radius:3px;background:var(--ciano);opacity:1;box-shadow:0 0 10px var(--ciano)}
nav.tabs{background:rgba(0,0,0,.25);box-shadow:inset 0 0 0 1px rgba(70,236,224,.2)}
nav.tabs button{text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:700}
nav.tabs button[aria-current="page"]{background:rgba(70,236,224,.14);color:var(--ciano);box-shadow:inset 0 0 0 1px rgba(70,236,224,.6),0 0 14px -4px var(--ciano)}

/* vidro OLED com aresta ciano */
.painel,.cartao,.ticker div,.metricas div{background:var(--vidro);border:1px solid var(--borda);box-shadow:var(--sombra)}
.painel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.07),transparent 35%)}
.cartao::before{background:linear-gradient(120deg,#8ff8ff,#46ece0,#f1c35a)}
.cartao:hover{box-shadow:0 0 0 1px rgba(70,236,224,.5),0 0 34px -6px rgba(70,236,224,.6)}
.ticker b,.metricas b{color:#fff;text-shadow:0 0 14px rgba(70,236,224,.6)}
.ticker .mono,.metricas .mono{text-transform:uppercase;letter-spacing:.08em;font-size:.68rem}

/* botões */
.prim{background:var(--grad);color:#04181b;box-shadow:0 0 22px -4px rgba(70,236,224,.75)}
.prim:hover{box-shadow:0 0 32px -2px rgba(70,236,224,.95)}
.sec{background:rgba(70,236,224,.06);box-shadow:inset 0 0 0 1px rgba(70,236,224,.4)}
.sec:hover{background:rgba(70,236,224,.14);box-shadow:inset 0 0 0 1px var(--ciano)}

/* avatares em vidro com aresta ciano (como os marcadores do infográfico) */
.avatar{background:linear-gradient(160deg,rgba(70,236,224,.28),rgba(12,22,28,.9))!important;color:#e9feff;box-shadow:inset 0 0 0 1.5px rgba(70,236,224,.75),0 0 16px -4px rgba(70,236,224,.8);text-shadow:0 0 8px rgba(70,236,224,.8)}
.av{filter:none!important}

/* placa: ecrã OLED transparente com holograma dourado */
.face{background:linear-gradient(150deg,rgba(60,90,100,.35),rgba(10,20,26,.55) 55%,rgba(20,40,46,.45));border:1.5px solid rgba(110,245,236,.75);box-shadow:0 0 0 1px rgba(70,236,224,.25),0 0 50px -10px rgba(70,236,224,.75),inset 0 0 40px -10px rgba(70,236,224,.35);backdrop-filter:blur(6px)}
.face .nome{text-transform:uppercase;letter-spacing:.01em;color:#fff;text-shadow:0 0 18px rgba(70,236,224,.6)}
.face .sub{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem}
.face::before{content:"";position:absolute;right:120px;top:40%;width:70px;height:70px;border-radius:50%;background:radial-gradient(circle,rgba(241,195,90,.55),rgba(241,195,90,0) 70%);filter:blur(4px);animation:holo 4s ease-in-out infinite;pointer-events:none}
@keyframes holo{50%{transform:translateY(-6px) scale(1.15);opacity:.7}}
.poca{background:radial-gradient(closest-side,rgba(70,236,224,.6),transparent)}
.pill{background:rgba(70,236,224,.14);color:var(--ciano)}
.pill::before{background:var(--ciano);box-shadow:0 0 8px var(--ciano)}

/* tags e tipos */
.tag.ciano{background:rgba(70,236,224,.10);color:var(--ciano);box-shadow:inset 0 0 0 1px rgba(70,236,224,.4)}
.post::before{box-shadow:0 0 16px var(--cor)}
.filtros button[aria-pressed="true"]{background:var(--ciano);color:#04181b;box-shadow:0 0 16px -4px var(--ciano)}

/* colmeia: vidro ciano, eu em dourado */
.hex .forma{stroke:rgba(110,245,236,.85)!important}
.hex.eu .forma{stroke:var(--ouro)!important;stroke-dasharray:none}
.hex:hover .forma,.hex.ativo .forma{filter:drop-shadow(0 0 12px rgba(70,236,224,.95))}
.hex-vazio{fill:rgba(70,236,224,.03);stroke:rgba(70,236,224,.14)}
.fio{stroke:rgba(70,236,224,.6)}
.fio.mutuo{stroke:var(--ouro);filter:drop-shadow(0 0 5px rgba(241,195,90,.9))}
.legenda i[style*="--ok"]{background:var(--ouro)!important}

/* processo em 4 etapas (faixa inferior do infográfico) */
.processo{display:grid;gap:14px}
.processo h3{font-size:1.05rem;text-align:center;letter-spacing:.06em}
.etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;align-items:stretch}
.etapa{position:relative;padding:14px 26px 14px 18px;display:grid;gap:4px}
.etapa:not(:last-child)::after{content:"→";position:absolute;right:2px;top:50%;transform:translateY(-50%);color:var(--ciano);font-size:1.3rem;text-shadow:0 0 10px var(--ciano)}
.etapa b{font-family:var(--f-display);font-weight:800;font-size:1.02rem;color:#fff}
.etapa b span{color:var(--ciano);margin-right:6px}
.etapa p{font-size:.85rem;color:var(--texto-2)}
@media (max-width:760px){.etapas{grid-template-columns:1fr 1fr;gap:6px}.etapa:nth-child(2)::after{display:none}}

/* edição, QR por placa, cartão público, NFC */
.editado{color:var(--texto-3);font-size:.8em}
.acoes-com{margin-left:auto;display:inline-flex;gap:12px}
.rodape-post{gap:16px}
.editor{display:grid;gap:12px}
.qr-cartao{flex:none;width:54px;height:54px;background:#fff;padding:4px;border-radius:10px;box-shadow:0 0 14px -4px rgba(70,236,224,.7)}
.qr-cartao svg{width:100%;height:100%;display:block}
.publico{display:grid;gap:18px;max-width:520px;justify-items:stretch;padding-top:30px}
.cartao-publico{display:grid;gap:12px;justify-items:center;text-align:center;padding:34px 26px}
.cartao-publico h1{font-size:clamp(1.8rem,6vw,2.4rem)}
.nfc-ajuda{display:grid;gap:10px;width:100%;margin-top:4px}
.passos-nfc{margin:0;padding-left:1.2em;display:grid;gap:4px;color:var(--texto-2)}

/* turmas grandes: docentes, colmeia ampliada */
.tag.ouro{background:rgba(241,195,90,.13);color:var(--ouro);box-shadow:inset 0 0 0 1px rgba(241,195,90,.4)}
.hex.docente .forma{stroke:var(--azul)!important;stroke-width:2.2}
.colmeia .cab-c{flex-wrap:wrap}
.colmeia .cab-c .pill{order:3}
body.sem-scroll{overflow:hidden}
.colmeia.grande{position:fixed;z-index:45;inset:max(16px,4vh) max(16px,4vw);overflow:auto;box-shadow:0 0 0 100vmax rgba(3,6,9,.82),var(--sombra);background:linear-gradient(180deg,rgba(18,30,36,.97),rgba(9,14,18,.98))}
.colmeia.grande .tela{max-width:min(1000px,100%);margin:10px auto 0}
.colmeia.grande svg{max-height:none!important}

/* ---------- mensagens e grupos ---------- */
nav.tabs button .bolha{margin-left:6px}
.bolha{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ciano);color:#04181b;font-size:.72rem;font-weight:800;box-shadow:0 0 10px -2px var(--ciano)}
.mensagens{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.lista-msg{display:grid;gap:10px;padding:14px;max-height:calc(100vh - 220px);overflow:hidden;grid-template-rows:auto auto minmax(0,1fr)}
.lista-topo{display:grid;gap:8px}
.lista-topo input{border-radius:999px}
.lista-conv,.resultados{display:grid;gap:2px;overflow-y:auto;align-content:start}
.item-conv{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;color:var(--texto);text-decoration:none;background:transparent;font-weight:400;text-align:left;width:100%}
.item-conv:hover{background:rgba(70,236,224,.07)}
.item-conv.ativo{background:rgba(70,236,224,.13);box-shadow:inset 0 0 0 1px rgba(70,236,224,.35)}
.ic-txt{display:grid;min-width:0;flex:1}
.ic-txt strong{font-family:var(--f-display);font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ic-txt span{font-size:.84rem;color:var(--texto-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-conv.por-ler .ic-txt span{color:var(--texto);font-weight:600}
.ic-meta{display:grid;justify-items:end;gap:4px;flex:none}
.avatar.grupo{background:linear-gradient(160deg,rgba(241,195,90,.35),rgba(12,22,28,.9))!important;box-shadow:inset 0 0 0 1.5px rgba(241,195,90,.8),0 0 14px -4px rgba(241,195,90,.8);color:#fff6dd}
.chat{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:12px;height:calc(100vh - 220px);min-height:440px;padding:16px}
.vazio-chat{place-content:center;text-align:center;gap:14px;grid-template-rows:none}
.novo-grupo{grid-template-rows:none;height:auto;align-content:start;gap:16px}
.chat-cab{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--borda);min-width:0}
.chat-nome{font-family:var(--f-display);font-size:1.02rem}
.chat-cab .mono{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.voltar-chat{display:none}
.fio-msg{overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.bolha-msg{position:relative;max-width:min(78%,560px);padding:9px 14px 20px;border-radius:18px;font-size:.96rem;line-height:1.45}
.bolha-msg p{white-space:pre-line;overflow-wrap:anywhere}
.bolha-msg.eu{align-self:flex-end;background:linear-gradient(135deg,rgba(70,236,224,.32),rgba(24,180,196,.28));box-shadow:inset 0 0 0 1px rgba(70,236,224,.45);border-bottom-right-radius:6px}
.bolha-msg.ele{align-self:flex-start;background:rgba(255,255,255,.07);border-bottom-left-radius:6px}
.bolha-msg.com-nome{margin-top:6px}
.autor-msg{display:block;font-size:.78rem;font-weight:700;margin-bottom:2px}
.bolha-msg .hora{position:absolute;right:12px;bottom:4px;font-size:.68rem;color:var(--texto-3)}
.bolha-msg .visto{position:absolute;left:12px;bottom:4px;font-size:.68rem;color:var(--ciano)}
.apagar-msg{position:absolute;top:-8px;right:-8px;width:22px;height:22px;padding:0;justify-content:center;font-size:.7rem;background:rgba(10,15,18,.95);box-shadow:inset 0 0 0 1px var(--borda-forte);opacity:0;transition:opacity .2s}
.bolha-msg:hover .apagar-msg,.apagar-msg:focus-visible{opacity:1}
.msg-sistema{align-self:center;font-size:.78rem;color:var(--texto-2);background:rgba(255,255,255,.05);padding:4px 12px;border-radius:999px;margin:6px 0;text-align:center}
.chat-form{display:flex;gap:8px;align-items:flex-end}
.chat-form textarea{flex:1;min-height:0;resize:none;border-radius:22px;padding:.7em 1.1em;max-height:140px}
.gestao-grupo{display:grid;gap:10px;padding:12px;border-radius:var(--r-m);background:rgba(255,255,255,.035);max-height:42vh;overflow-y:auto}
.membros{display:grid;gap:4px}
.membro{display:flex;gap:10px;align-items:center;font-size:.92rem;padding:4px 0}
.acrescentar summary{cursor:pointer;color:var(--ciano);font-weight:700;font-size:.88rem;padding:4px 0}
.acrescentar{display:grid;gap:8px}
.seletor{display:grid;gap:8px}
.seletor-lista{display:grid;gap:2px;max-height:300px;overflow-y:auto;padding-right:4px}
.item-sel{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer}
.item-sel:hover{background:rgba(70,236,224,.07)}
.item-sel input{width:18px;height:18px;accent-color:var(--ciano);flex:none}
@media (max-width:860px){
  .mensagens{grid-template-columns:1fr}
  .mensagens.com-chat .lista-msg{display:none}
  .mensagens:not(.com-chat) .chat{display:none}
  .voltar-chat{display:inline-flex}
  .chat{height:calc(100vh - 190px)}
  .lista-msg{max-height:none}
}
@media (max-width:560px){
  nav.tabs{gap:2px;padding:3px}
  nav.tabs button{font-size:.66rem;padding:.55em .6em;letter-spacing:.03em}
  .cab-chat{display:none}
  main:has(.mensagens.com-chat){padding-block:8px 20px}
  .chat{height:calc(100dvh - 150px);padding:12px}
  .chat-form .sec{padding:.5em .7em;font-size:0}
  .chat-form .sec::before{content:"☺";font-size:1.1rem}
  .bolha-msg{max-width:86%}
}