/* =========================
   Brand tokens
   ========================= */
:root{
  --si-red:#be0e2e;
  --ink:#111;
  --muted:#6b7280;
  --bg:#f6f7fb;       /* app background */
  --paper:#fff;       /* card background */
  --maxw:1100px;
  --radius:12px;
  --shadow:0 8px 28px rgba(0,0,0,.08);

  /* buttons */
  --btn-bg:#ffffff;
  --btn-border:#d1d5db;
  --btn-hover-bg:#f3f4f6;
  --btn-active-bg:#e5e7eb;
}

/* =========================
   Global reset
   ========================= */
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* ===== Header (banner) ===== */
.site-header{
  background:var(--bg);
  border-bottom:4px solid var(--si-red);
}

/* 3-column grid: left | center | right */
.header-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 20px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:12px;
}

/* Anchor each zone */
.header-inner .left   { justify-self:start; }
.header-inner .center { justify-self:center; }
.header-inner .right  { justify-self:end; }

/* SI logo (left) */
.si-logo{ height:60px; width:auto; }

/* Athena block (center) */
.athena-block{
  display:inline-flex;
  align-items:center;
  gap:12px;
  will-change:transform;
  animation:athena-float 6s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){
  .athena-block{ animation:none !important; }
}
@keyframes athena-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-2px); }
}
.athena-logo{ height:42px; width:auto; }
.athena-text{ display:flex; flex-direction:column; line-height:1.1; }
.athena-main{
  font-size:clamp(20px,2.2vw,28px);
  font-weight:700;
  letter-spacing:.035em;
  color:#1155cc;
}
.athena-sub{
  margin-top:2px;
  font-size:clamp(11px,1.2vw,14px);
  font-weight:500;
  letter-spacing:.02em;
  color:#3b3b3b;
  opacity:.9;
}

/* Nav (right) */
.site-nav{
  display:flex;
  align-items:center;
  gap:12px;
}
.site-nav .button{
  border-radius:6px;
  padding:8px 12px;
  font-weight:600;
  font-size:15px;
  text-decoration:none;
}
.site-nav .button.home{ background:var(--si-red); color:#fff; }
.site-nav .button.home:hover{ filter:brightness(.95); }
.site-nav .button.logout{
  background:#f2f2f2; color:var(--ink); border:1px solid #ddd;
}
.site-nav .button.logout:hover{ background:#e5e5e5; }

/* ===== Language switcher (top-left near SI logo) ===== */
.lang-switch {
  display: flex;
  gap: 6px;
  font-size: 13px;          /* smaller font */
  font-weight: 500;
  margin-left: 6px;         /* tight to SI logo */
}

.lang-switch a {
  color: var(--muted);      /* softer gray */
  text-decoration: none;
  padding: 2px 4px;
  border-radius: 3px;
  transition: color 0.2s, background 0.2s;
}

.lang-switch a:hover {
  color: var(--si-red);
  background: rgba(190,14,46,0.06); /* faint SI red background */
}
/* --- Header sizing/polish --- */
.si-logo{
  height: 48px;   /* was 60px -> slightly smaller */
  width: auto;
}

.athena-logo{
  height: 58px;   /* was ~42–56 -> a touch bigger than SI */
  width: auto;
}

.athena-text{
  line-height: 1.05;
}

.athena-main{
  font-size: clamp(22px, 2.3vw, 30px);  /* subtly larger */
  letter-spacing: .035em;               /* gentle tracking for “Athena Hub” */
  font-weight: 750;
}

.athena-sub{
  margin-top: 2px;
  font-size: clamp(12px, 1.25vw, 15px); /* a hair larger */
  opacity: .9;
}

/* keep the center block visually balanced on very wide screens */
.center .athena-block{
  gap: 12px;
  transform-origin: center;
}



/* ===== Mobile: center Athena on row 1, push nav to row 2 (right-aligned) ===== */
@media (max-width:720px){
  .header-inner{
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;       /* two rows */
    row-gap:10px;
  }
  .header-inner .left{
    order:1; justify-self:start;
  }
  .header-inner .center{
    order:2; grid-column: 1 / 4;         /* span full width */
    justify-self:center;
  }
  .header-inner .right{
    order:3; grid-column: 1 / 4;         /* new row */
    justify-self:end;                    /* keep buttons at the right edge */
  }
  .si-logo{ height:44px; }
  .athena-logo{ height:36px; }
}
/* mobile polish: keep proportions nice on small screens */
@media (max-width: 520px){
  .si-logo     { height: 36px; }
  .athena-logo { height: 42px; }
  .athena-main { font-size: 22px; }
  .athena-sub  { font-size: 12px; }
}
/* =========================
   Main area
   ========================= */
.site-main{
  margin:0 auto;
  max-width:var(--maxw);
  padding:24px 20px 40px;
}
h1{
  margin:0 0 12px;
  font-size:clamp(24px,3vw,34px);
}
p.lead{color:var(--muted); margin-top:0}

/* =========================
   Cards (auth & content)
   ========================= */
.auth-page{background:var(--bg)}
.auth-card{
  background:var(--paper);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  padding:20px;
  margin:20px auto;
  max-width:560px;
}
.auth-card h1{
  font-size:1.2rem;
  font-weight:600;
}

/* =========================
   Inputs & buttons
   ========================= */
input[type="email"],
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea{
  width:100%;
  max-width:640px;
  padding:12px 14px;
  border:2px solid var(--si-red);
  border-radius:8px;
  outline:none;
  font-size:16px;
  background:#fff;
}

button,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
  display:inline-block;
  border:none;
  background:var(--si-red);
  color:#fff;
  padding:12px 18px;
  border-radius:8px;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  text-decoration:none;
  appearance:none;
}
button:hover,.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover{filter:brightness(.95)}
button:active,.button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active{filter:brightness(.9)}
button:disabled{opacity:.6; cursor:not-allowed}

.form-row{margin:12px 0}
.form-actions{margin-top:16px}

/* Secondary small utility buttons */
.button-secondary {
  background: #e5e7eb;   /* light grey */
  color: #1d4ed8;        /* blue text */
  border: 1px solid #cbd5e1;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.button-secondary:hover {
  background: #dbeafe;   /* light blueish hover */
  border-color: #93c5fd;
}

.corpus-tools {
  margin: 10px 0;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.corpus-tools .mini-btn {
  font-size: 13px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #f3f4f6;
  color: #111;
  cursor: pointer;
}
.corpus-tools .mini-btn:hover {
  background: #e5e7eb;
}
#corpusOut {
  margin-top: 10px;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  font-size: 13px;
  max-height: 200px;
  overflow-y: auto;
}

/* =========================
   Choices (welcome)
   ========================= */
.choices{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:12px;
}
.choices .button{
  padding:10px 16px;
  border-radius:10px;
  font-size:16px;
}
@media (max-width:700px){
  .choices{gap:10px}
  .choices .button{padding:10px 14px; font-size:15px}
}

/* =========================
   External content frame
   ========================= */
.external-content{
  background:#fff;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:0;
  overflow:hidden;
}
.external-content .frame-wrap{
  position:relative;
  width:100%;
  height:70vh;
  max-height:80vh;
}
.external-content iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* =========================
   Chat UI (NotebookLM)
   ========================= */
.chat{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.msg{ display:flex; gap:10px; align-items:flex-start; }
.msg .avatar{
  width:28px; height:28px; border-radius:50%;
  background:#eee; display:flex; align-items:center; justify-content:center; font-size:14px;
}
.msg.user{ flex-direction:row-reverse; }
.msg.user .bubble{ background:#e8f0ff; }
.msg.ai .avatar{ background:#222; color:#fff; font-weight:600; }
.bubble{ background:#f6f6f6; border-radius:12px; padding:10px 12px; max-width:70%; white-space:pre-wrap; }
.sources{ font-size:.9em; color:var(--muted,#666); }

/* Chat action bar: Clear left, Ask right */
.chat-bar{
  display:flex; align-items:center; gap:8px;
}
.chat-bar .flex-spacer{ flex:1 1 auto; }
.chat-busy{
  color:var(--muted);
  min-width:80px;
  text-align:right;
}
@media (min-width:640px){
  .chat-bar{
    position:sticky; bottom:0; background:#fff;
    padding-top:8px; border-top:1px solid #eee; z-index:2;
  }
}

/* =========================
   Footer
   ========================= */
.site-footer{
  border-top:1px solid #eee;
  margin-top:24px;
  padding:16px 20px 28px;
  color:var(--muted);
  text-align:center;
}

/* =========================
   Favicon helper (optional)
   ========================= */
.link-favicon{ display:none; }

/* --- NotebookLM mini buttons (small, subtle) --- */
.btn-mini {
  display:inline-block; border-radius: 999px; padding: 6px 10px; font-size: 12px;
  font-weight: 600; text-decoration: none; cursor: pointer; user-select: none; line-height:1;
}
.btn-mini.blue  { background: #e7efff; color: #1e40af; border: 1px solid #c7d2fe; }
.btn-mini.gray  { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.btn-mini:hover { filter: brightness(.97); }