/* Sentra • Intelligence — UI, loader, and inline sign-in gate (CSP-safe) */
:root{
  --bg:#0a0e16; --bg2:#0d1320; --card:#0f1826; --ink:#eef3ff; --muted:#9fb0c8;
  --line:rgba(231,210,150,.16);
  --gold:#c7a647; --gold2:#e5cc7a; --accent:#d8bd5a; --danger:#ff6b6b;
  --radius:16px; --shadow:0 20px 50px rgba(0,0,0,.45);
}
html.light{
  --bg:#f7f8fb; --bg2:#ffffff; --card:#ffffff; --ink:#0b1220; --muted:#4b5563;
  --line:rgba(13,18,32,.12); --gold:#b08a2f; --gold2:#d8bd5a; --accent:#d8bd5a;
}
*{box-sizing:border-box} html,body{height:100%}
body{
  margin:0; background:
    radial-gradient(1200px 700px at 72% -10%, rgba(199,166,71,.10), transparent 70%),
    linear-gradient(180deg, rgba(16,22,34,.85), transparent 26%), var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ===== Loader (full-bleed) ===== */
.loader{position:fixed; inset:0; z-index:9999; opacity:0; pointer-events:none; transition:opacity .5s ease; overflow:hidden}
.loader.show{opacity:1; pointer-events:auto}
.loader.hide{opacity:0; pointer-events:none}
.loader .bg{position:absolute; inset:0; background:center/cover no-repeat; filter:saturate(1.05) contrast(1.05) brightness(.9)}
.loader::before{content:""; position:absolute; inset:0;
  background:radial-gradient(60% 80% at 80% 0%, rgba(8,12,22,.3), transparent 60%),
             linear-gradient(180deg, rgba(8,12,22,.55) 0%, rgba(8,12,22,.85) 65%)}
.loader::after{content:""; position:absolute; inset:-2px;
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 4px);
  mix-blend-mode:overlay; opacity:.15; pointer-events:none; animation:scan 2.8s linear infinite}
@keyframes scan{0%{transform:translateY(-20%)}100%{transform:translateY(20%)}}
.load-info{position:absolute; left:5vw; bottom:6vh; max-width:min(720px,90vw); color:#fff; text-shadow:0 6px 30px rgba(0,0,0,.55)}
.load-title{font-weight:900; font-size:min(48px,10vw); margin:0 0 4px}
.load-sub{opacity:.9}
.load-bar{height:10px; width:min(520px,70vw); border-radius:999px; margin:16px 0 4px;
  border:1px solid rgba(231,210,150,.25); background:rgba(10,14,22,.55); overflow:hidden}
.load-fill{display:block; height:100%; width:28%;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  box-shadow:0 0 20px rgba(231,210,150,.35) inset; animation:slide 1.6s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-120%)}50%{transform:translateX(30%)}100%{transform:translateX(220%)}}

/* ===== Topbar / Layout / Chat — same as before (trimmed for brevity) ===== */
.topbar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.1) blur(6px)}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:28px;height:28px;border-radius:10px;background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:inset 0 0 0 2px rgba(0,0,0,.18)}
.status{display:flex;gap:8px;align-items:center}
.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);padding:6px 10px;border-radius:10px;cursor:pointer;text-decoration:none}
.ghost:hover{border-color:rgba(231,210,150,.35)}
.badge{font-size:12px;color:#0d1220;background:linear-gradient(135deg,var(--gold),var(--gold2));padding:4px 8px;border-radius:999px}

.hero{padding:26px 16px}
.hero-wrap{max-width:1280px;margin:0 auto}
.hero h1{margin:0 0 6px;font-weight:900}
.tag{color:var(--muted);margin:0 0 10px}
.hero-chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{background:transparent;color:var(--gold2);border:1px solid rgba(231,210,150,.35);padding:6px 10px;border-radius:999px;cursor:pointer}
.chip:hover{background:rgba(231,210,150,.08)}

.grid{display:grid;grid-template-columns:360px 1fr;gap:18px;max-width:1280px;margin:0 auto;padding:0 16px 24px}
.stack{display:flex;flex-direction:column;gap:18px}
.card{background:linear-gradient(180deg,rgba(199,166,71,.06),transparent 220px),var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.card h2{margin:0;font-size:18px}
.tip{color:var(--muted);font-size:12px;margin-top:8px}

.chat-col{display:flex;flex-direction:column;height:calc(100vh - 240px)}
.messages{flex:1;overflow:auto;overscroll-behavior:contain;padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:radial-gradient(900px 500px at 90% -20%, rgba(199,166,71,.08), transparent 70%),var(--card);box-shadow:var(--shadow)}
.row{display:flex;gap:12px;margin:10px 0}
.row.user{justify-content:flex-end}
.row.sentra{justify-content:flex-start}
.bubble{max-width:84%;padding:12px 14px;border-radius:18px;box-shadow:0 10px 24px rgba(0,0,0,.28);word-break:break-word;white-space:pre-wrap;border:1px solid rgba(255,255,255,.06)}
.bubble.user{background:linear-gradient(180deg,#1c2634,#141c28);border-color:rgba(169,179,199,.24)}
.bubble.sentra{background:linear-gradient(180deg,rgba(199,166,71,.16),rgba(199,166,71,.07));border-color:rgba(231,210,150,.28)}
.tools{display:flex;gap:8px;margin-top:6px}
.copy{background:transparent;color:var(--gold2);border:1px solid rgba(231,210,150,.35);padding:4px 8px;border-radius:8px;cursor:pointer;font-size:12px}
.meta{font-size:11.5px;color:var(--muted);margin-top:6px}
.composer{display:flex;gap:12px;align-items:flex-end;margin-top:14px}
.field{flex:1;background:#0d1522;border:1px solid rgba(169,179,199,.24);border-radius:14px;padding:6px;display:flex;flex-direction:column}
#prompt{flex:1;resize:none;background:transparent;color:var(--ink);border:none;outline:none;font:inherit;padding:10px;min-height:50px;max-height:180px}
.send{border:none;cursor:pointer;font-weight:800;letter-spacing:.2px;color:#0d1220;background:linear-gradient(135deg,var(--gold),var(--gold2));padding:12px 18px;border-radius:14px;min-width:106px;box-shadow:0 10px 26px rgba(199,166,71,.25)}
.send:hover{transform:translateY(-1px)} .send[disabled]{opacity:.6;cursor:not-allowed}
.meter{align-self:flex-end;color:var(--muted);font-size:11.5px;padding:2px 6px}
.markdown pre{background:#0b0f17;border:1px solid rgba(169,179,199,.28);padding:12px;border-radius:12px;overflow:auto}
.markdown code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:13.5px}
.markdown a{color:var(--accent);text-decoration:none;border-bottom:1px dashed rgba(231,210,150,.35)}
.foot{color:var(--muted);text-align:center;padding:10px}
:focus-visible{outline:2px solid var(--gold2); outline-offset:2px}

/* ===== Inline Sign-in Gate ===== */
.authgate{position:fixed; inset:0; z-index:9998; display:none; align-items:center; justify-content:center;
  background:linear-gradient(180deg,rgba(8,12,22,.65),rgba(8,12,22,.85)); backdrop-filter:blur(8px) saturate(1.15)}
.authgate.show{display:flex}
.authcard{width:min(560px,92vw); background:linear-gradient(180deg,rgba(199,166,71,.07),transparent 260px),var(--card);
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:20px}
.authtitle{margin:0 0 6px; font-weight:900; font-size:22px}
.authsub{margin:0; color:var(--muted)}
.authbtns{display:grid; grid-template-columns:1fr; gap:10px; margin-top:14px}
.btn-auth{display:flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid rgba(231,210,150,.28); border-radius:12px; padding:12px; background:transparent;
  color:var(--ink); cursor:pointer; text-decoration:none}
.btn-auth:hover{background:rgba(231,210,150,.08)}
.btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#0d1220; border-color:transparent; font-weight:800}
.btn-link{background:transparent; border:none; color:var(--muted); text-decoration:underline; cursor:pointer; justify-self:start}
@media (max-width:1080px){ .grid{grid-template-columns:1fr} .chat-col{height:auto} .bubble{max-width:92%} }