:root{
  --bg:#0d1014; --bg2:#141922; --panel:#171c25; --line:#2a3340;
  --silk:#d4af6e; --silk-soft:#e8d3a6; --ink:#e9eef5; --ink-dim:#9aa6b4;
  --espinho:#6fb3c9; --isca:#c9a86f; --presa:#c96f6f; --falsa:#9b6fc9;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:radial-gradient(1200px 800px at 50% -10%, #182233 0%, var(--bg) 55%);
  color:var(--ink); font-family:Inter,system-ui,sans-serif; font-size:15px;}
button{font-family:inherit;cursor:pointer}
.err{color:#e8a0a0;min-height:1.2em;font-size:13px;margin-top:6px}

/* ---------- login ---------- */
.login-body{display:grid;place-items:center;overflow:hidden}
#bgweb{position:fixed;inset:0;z-index:0}
.login-card{position:relative;z-index:1;width:min(360px,90vw);
  background:rgba(23,28,37,.82);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.mark{font-family:Fraunces,serif;font-size:42px;font-weight:600;letter-spacing:.5px;
  background:linear-gradient(180deg,var(--silk-soft),var(--silk));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--ink-dim);margin:.2em 0 1.6em;font-size:14px}
.login-card label{display:block;font-size:13px;color:var(--ink-dim);margin-bottom:14px}
.login-card input{width:100%;margin-top:6px;padding:11px 12px;border-radius:10px;
  border:1px solid var(--line);background:#0f141b;color:var(--ink);font-size:15px}
.login-card input:focus{outline:none;border-color:var(--silk)}
.login-card button{width:100%;margin-top:8px;padding:12px;border:none;border-radius:10px;
  background:linear-gradient(180deg,var(--silk-soft),var(--silk));color:#1a140a;font-weight:600;font-size:15px}

/* ---------- app shell (desktop) ---------- */
.app{display:grid;grid-template-columns:1fr 380px;grid-template-rows:56px 1fr;height:100vh;height:100dvh}
.topbar{grid-column:1/3;display:flex;align-items:center;gap:18px;padding:0 18px;
  border-bottom:1px solid var(--line);background:rgba(20,25,34,.7)}
.topbar .logo{font-family:Fraunces,serif;font-size:22px;font-weight:600;color:var(--silk-soft)}
.spacer{flex:1}
.seg{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{background:transparent;color:var(--ink-dim);border:none;padding:7px 14px;font-size:13px;white-space:nowrap}
.seg button.on{background:var(--silk);color:#1a140a;font-weight:600}
.who{color:var(--ink-dim);font-size:13px}
.who b{color:var(--ink)}
.linkbtn{background:none;border:none;color:var(--ink-dim);font-size:13px;text-decoration:underline}

.mobiletabs{display:none}

/* ---------- canvas teia ---------- */
.stage{position:relative;overflow:hidden;min-height:0;background:
  radial-gradient(800px 600px at 50% 40%, #131b26 0%, var(--bg) 70%)}
#graph3d{position:absolute;inset:0}
#circles{position:absolute;inset:0;display:none;width:100%;height:100%}
.viewtoggle{position:absolute;top:14px;left:14px;z-index:5}
.legend{position:absolute;bottom:14px;left:14px;z-index:5;display:flex;gap:14px;flex-wrap:wrap;
  background:rgba(13,16,20,.7);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--ink-dim)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
/* texto de vazio: faixa no topo, NUNCA atrás do nó central */
.empty{position:absolute;top:64px;left:50%;transform:translateX(-50%);
  display:flex;justify-content:center;color:var(--ink-dim);text-align:center;
  padding:12px 20px;z-index:4;pointer-events:none;max-width:min(420px,86%);
  background:rgba(13,16,20,.82);border:1px solid var(--line);border-radius:12px;backdrop-filter:blur(4px)}
.empty span{display:block;font-size:13px;line-height:1.5}

/* ---------- painel lateral ---------- */
.side{border-left:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-height:0}
.side .head{padding:14px 16px;border-bottom:1px solid var(--line)}
.side .head h2{margin:0;font-family:Fraunces,serif;font-size:18px;font-weight:600}
.side .head .tag{font-size:12px;color:var(--ink-dim);margin-top:3px}
.chip{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--ink-dim)}
.feed{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.msg{max-width:92%;padding:10px 13px;border-radius:12px;line-height:1.45;font-size:14px;white-space:pre-wrap;word-break:break-word}
.msg.bot{background:#1e2733;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:linear-gradient(180deg,#2a2415,#241f12);border:1px solid #3a3115;color:var(--silk-soft);align-self:flex-end;border-bottom-right-radius:4px}
.composer{border-top:1px solid var(--line);padding:12px;display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;resize:none;min-height:44px;max-height:140px;padding:10px;border-radius:10px;
  border:1px solid var(--line);background:#0f141b;color:var(--ink);font-family:inherit;font-size:16px}
.composer textarea:focus{outline:none;border-color:var(--silk)}
.iconbtn{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:#0f141b;color:var(--ink);font-size:18px;flex:none}
.iconbtn.rec{background:var(--presa);border-color:var(--presa);color:#fff;animation:pulse 1.1s infinite}
.sendbtn{height:44px;padding:0 16px;border-radius:10px;border:none;background:var(--silk);color:#1a140a;font-weight:600}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

.dossie{padding:16px;overflow-y:auto}
.dossie .pat{display:flex;align-items:center;gap:8px;margin:6px 0 12px;font-size:14px}
.dossie .pat i{width:11px;height:11px;border-radius:50%}
.dossie .caminho{background:#1e2733;border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;line-height:1.5;color:var(--silk-soft)}
.dossie h4{margin:18px 0 8px;font-size:13px;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.5px}
.trajeto-btns{display:flex;flex-direction:column;gap:8px}
.trajeto-btns button{text-align:left;padding:11px 12px;border-radius:10px;border:1px solid var(--line);background:#0f141b;color:var(--ink);font-size:14px}
.trajeto-btns button:hover{border-color:var(--silk)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:#1e2733;border:1px solid var(--silk);
  color:var(--silk-soft);padding:10px 16px;border-radius:10px;font-size:13px;z-index:50;opacity:0;transition:.25s;pointer-events:none}
.toast.show{opacity:1}

/* ---------- MOBILE ---------- */
@media (max-width:820px){
  .app{grid-template-columns:1fr;grid-template-rows:52px 44px 1fr}
  .topbar{grid-column:1;gap:10px;padding:0 12px}
  .topbar .who{display:none}
  .mobiletabs{display:flex;grid-column:1;border-bottom:1px solid var(--line);background:var(--bg2)}
  .mobiletabs button{flex:1;background:transparent;border:none;color:var(--ink-dim);font-size:14px;padding:12px;border-bottom:2px solid transparent}
  .mobiletabs button.on{color:var(--silk-soft);border-bottom-color:var(--silk)}
  /* uma área por vez, ocupando a linha 3 */
  .stage,.side{grid-column:1;grid-row:3;min-height:0}
  body.show-mentor .stage{display:none}
  body.show-mentor .side{display:flex}
  body.show-teia .stage{display:block}
  body.show-teia .side{display:none}
  .side{border-left:none}
  .empty{top:14px;font-size:12px}
}

/* editar fio no dossie */
.editform{display:flex;flex-direction:column;gap:10px}
.editform label{display:block;font-size:12px;color:var(--ink-dim)}
.editform input,.editform select{width:100%;margin-top:5px;padding:10px;border-radius:10px;
  border:1px solid var(--line);background:#0f141b;color:var(--ink);font-size:14px;font-family:inherit}
.editform input:focus,.editform select:focus{outline:none;border-color:var(--silk)}
.savebtn{margin-top:4px;padding:11px;border:none;border-radius:10px;background:var(--silk);color:#1a140a;font-weight:600}
.dangerbtn{width:100%;padding:11px 12px;border-radius:10px;border:1px solid var(--presa);
  background:rgba(201,111,111,.12);color:#e8a0a0;font-size:14px}
.dangerbtn:hover{background:rgba(201,111,111,.22)}