/* ---------------------------------------
   Theme tokens (match launch site)
--------------------------------------- */
:root{
  --bg:#0b0b0b;
  --panel: rgba(255,255,255,0.06);
  --panel-strong: rgba(255,255,255,0.12);
  --glass-stroke: rgba(255,255,255,0.18);
  --txt:#f6f6f6;
  --muted:#c7c7c7;
  --orange:#ff7a18;
  --orange-strong:#ff8c32;
  --shadow: 0 10px 30px rgba(0,0,0,0.45);
  --chip-bg: rgba(255,255,255,0.08);
  --chip-ring: rgba(255,255,255,0.18);
  --chip-on: #181818;
  --chip-on-ring: #ff8c32;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color:var(--txt);
  background:var(--bg);
  overflow-x:hidden;
}

.container{ width:min(1200px, 92vw); margin-inline:auto; }

/* ---------------------------------------
   Background (mesh + grid + orbs)
   Same structure as index page
--------------------------------------- */
.bg-mesh{
  position:fixed; inset:-10vmax;
  background:
    radial-gradient(40vmax 40vmax at 15% 15%, rgba(255,122,24,0.15), transparent 60%),
    radial-gradient(50vmax 50vmax at 85% 25%, rgba(255,122,24,0.08), transparent 60%),
    radial-gradient(55vmax 55vmax at 50% 90%, rgba(255,255,255,0.06), transparent 60%),
    linear-gradient(180deg, #0b0b0b 0%, #0a0a0a 100%);
  filter:saturate(1.1);
  z-index:-3;
  animation: meshShift 20s ease-in-out infinite alternate;
}
@keyframes meshShift{ 0%{transform:translateY(0)} 100%{transform:translateY(-2vh)} }

.grid-overlay{
  position:fixed; inset:0; z-index:-2;
  background:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px) 0 0/40px 40px;
  mask-image: radial-gradient(80% 60% at 50% 40%, rgba(0,0,0,0.9), transparent 80%);
  pointer-events:none;
}
.orbs{ position:fixed; inset:0; z-index:-1; pointer-events:none; }
.orb{
  position:absolute; width:28vmax; height:28vmax; border-radius:50%;
  background: radial-gradient(closest-side, rgba(255,122,24,0.20), rgba(255,122,24,0) 70%);
  filter: blur(30px);
  animation: float 14s ease-in-out infinite;
}
.o1{ top:10%; left:-8%; animation-delay:-2s; }
.o2{ bottom:-10%; right:-6%; animation-duration:18s; }
.o3{ top:55%; left:60%; width:22vmax; height:22vmax; animation-duration:16s; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-1.2vh)} }

/* ---------------------------------------
   Header (match index.html)
--------------------------------------- */
.header{ display:flex; align-items:center; justify-content:space-between; padding:24px 0; }
.header-right{ display:flex; align-items:center; gap:12px; }
.brand{ display:flex; gap:.6rem; align-items:center; text-decoration:none; color:var(--txt); font-weight:800; letter-spacing:.2px; }
.logo{ height:100px; width:auto; display:block; }

.nav{ display:flex; gap:1rem; align-items:center; }
.nav a{ color:var(--txt); text-decoration:none; opacity:.9; padding:.6rem .9rem; border-radius:10px; transition:all .25s ease; }
.nav a:hover{ background: rgba(255,122,24,0.12); opacity:1; }

/* Buttons (align to index) */
.btn{ border:none; border-radius:14px; padding:.9rem 1.2rem; cursor:pointer; font-weight:700; color:var(--txt); background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)); border:1px solid var(--glass-stroke); }
.btn.ghost{ background:transparent; border-color:transparent; }
.btn.primary{
  background:
    linear-gradient(135deg, rgba(255,122,24,0.35), rgba(255,122,24,0.10)),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border-color: rgba(255,122,24,0.45); color:var(--txt);
}
.btn.primary:hover{
  background:
    linear-gradient(135deg, rgba(255,122,24,0.50), rgba(255,122,24,0.20)),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  box-shadow: 0 12px 28px rgba(255,122,24,0.25);
  transform: translateY(-1px);
}
.btn.primary:active{ transform: translateY(0); box-shadow:none }
.btn.primary:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }
.btn.tiny{ padding:.5rem .8rem; border-radius:10px; }

/* Fancy upload button */
.upload-cta{
  position:relative; overflow:hidden;
  padding:.8rem 1.1rem .8rem 3rem; /* extra left for icon + gap */
  border-radius:12px;
  background:
    linear-gradient(135deg, rgba(255,122,24,.55), rgba(255,122,24,.20)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border-color: rgba(255,122,24,.55);
  box-shadow: 0 12px 28px rgba(255,122,24,.22), inset 0 0 0 1px rgba(0,0,0,.25);
}
.upload-cta::before{
  content:""; position:absolute; left:.6rem; top:50%; transform:translateY(-50%);
  width:28px; height:28px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 12px rgba(255,122,24,.18);
}
.upload-cta::after{
  content:""; position:absolute; inset:0; transform:translateX(-120%);
  background: linear-gradient(100deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transition: transform .6s ease;
}
.upload-cta:hover{ transform: translateY(-1px); }
.upload-cta:hover::after{ transform:translateX(0); }
.upload-cta:focus-visible{ outline:2px solid var(--orange); outline-offset:2px }

/* tiny up-arrow inside the icon box */
.upload-cta span{ position:relative; z-index:1 }
.upload-cta::before{ mask: none }
.upload-cta .icon{ display:none }

/* Use a pseudo-element to draw the up arrow */
.upload-cta::before{ 
  content:"\2191"; /* upward arrow */
  color:#fff; font-weight:800; font-size:16px; line-height:28px; text-align:center;
}

/* Login button like index */
.login-btn{ flex:0 0 auto; display:flex; align-items:center; gap:0; text-decoration:none; color:var(--txt); font-weight:600; font-size:.95rem; padding:.3rem .6rem; border-radius:50px; background:transparent; border:none; cursor:pointer; position:relative; }
.icon-wrap{
  position:relative; width:38px; height:38px; border-radius:50%;
  background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display:grid; place-items:center; z-index:2;
}
.profile-icon{ font-size:1.2rem; line-height:1; }
.alert{ position:absolute; top:-2px; right:-2px; width:14px; height:14px; background:var(--bg); border-radius:50%; display:flex; align-items:center; justify-content:center; }
.alert::after{ content:""; width:8px; height:8px; background:#ff3b30; border-radius:50%; }
.login-bubble{
  position:relative; transform-origin:left center; margin-left:-10px; max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  padding:.5rem 1rem .5rem 1.1rem; border-radius:0 999px 999px 0; border:1px solid rgba(255,122,24,0.45); border-left:none;
  color:var(--txt);
  background:
    linear-gradient(135deg, rgba(255,122,24,0.18), rgba(255,122,24,0.08)),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(255,122,24,0.25), inset 0 0 24px rgba(255,122,24,0.12);
  transition: max-width .35s ease, opacity .35s ease, transform .35s ease;
  transform: translateX(-6px) scale(.98);
}
.login-bubble::before{
  content:""; position:absolute; left:-18px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(135deg, rgba(255,122,24,0.18), rgba(255,122,24,0.08)), linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  border:1px solid rgba(255,122,24,0.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow: 0 8px 20px rgba(255,122,24,0.22), inset 0 0 18px rgba(255,122,24,0.10);
  z-index:1;
}
.login-btn:hover .login-bubble{ max-width:140px; opacity:1; transform: translateX(0) scale(1); }

/* ---------------------------------------
   Page
--------------------------------------- */
.page{ padding:28px 0 64px; }
.page-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:28px; margin:10px 0 22px;
}
.eyebrow{ color:var(--orange); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.75rem; }
/* Eyebrow chip for page head */
.eyebrow-chip{
  background: linear-gradient(180deg, var(--orange), var(--orange-strong));
  color: #101010;
  border-color: var(--chip-on-ring);
  box-shadow: 0 10px 22px rgba(255,122,24,.18);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  margin-bottom: 8px; /* a little more spacing under Library */
}
h1{ font-size:clamp(28px, 3.2vw, 44px); line-height:1.05; margin:.2rem 0 .6rem; }
.muted{ color:var(--muted); }

/* search row */
.glass{
  background:var(--panel); border:1px solid var(--glass-stroke);
  border-radius:20px; box-shadow:var(--shadow);
}
.search-row{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:18px; padding:14px 16px; margin:6px 0 20px;
}
.search-wrap{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); }
.search-wrap .icon{ opacity:.8; }
.search-wrap input{
  width:min(560px, 60vw); border:none; outline:none; background:transparent; color:var(--txt);
  font-size:16px; padding:6px 2px;
}

.chip-tray{ display:flex; flex-wrap:wrap; gap:10px; min-height:38px; }
.sort-wrap{ display:flex; align-items:center; gap:10px; }
.sort-wrap label{ color:var(--muted); }
.sort-wrap select{ background:#0f0f0f; color:var(--txt); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:10px 12px; }

/* chips */
.chip{
  appearance:none; cursor:pointer; border:none; border-radius:999px;
  padding:10px 16px; background:var(--chip-bg); color:var(--txt);
  border:1px solid var(--chip-ring); font-weight:700;
}
.chips#typeChips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;          /* match notebooks chip spacing */
}
.chip:hover{ border-color:var(--orange); }
.chip.active{
  background:linear-gradient(180deg, var(--orange), var(--orange-strong));
  color:#101010; border-color:var(--chip-on-ring);
  box-shadow:0 10px 22px rgba(255,122,24,.18);
}
.chip.small{ padding:6px 10px; font-weight:700; }
.chip.tag{ background:rgba(255,255,255,.05); }

/* Force the page-head eyebrow chip to use orange style and add spacing */
.chip.eyebrow-chip{
  background: linear-gradient(180deg, var(--orange), var(--orange-strong));
  color: #101010;
  border-color: var(--chip-on-ring);
  box-shadow: 0 10px 22px rgba(255,122,24,.18);
  display: inline-block;    /* allow bottom margin to take effect */
  margin-bottom: 8px;       /* a little spacing under “Library” */
}

/* content layout */
.content{
  display:grid; grid-template-columns: 300px 1fr; gap:18px; align-items:start;
}
.rail{ padding:16px; position:sticky; top:18px; }
.rail-title{ margin:4px 6px 10px; font-size:18px; }
.mt{ margin-top:12px; }

/* notebooks */
.notebooks{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 14px; }
.notebooks .chip{ background:rgba(255,255,255,.06); }
/* When a notebook chip is active, style it like the quick filter chips */
.notebooks .chip.active{
  background:linear-gradient(180deg, var(--orange), var(--orange-strong));
  color:#101010;
  border-color:var(--chip-on-ring);
  box-shadow:0 10px 22px rgba(255,122,24,.18);
}

/* drop zone */
.drop{
  display:flex; align-items:center; gap:14px; padding:14px; margin-top:8px; border-radius:16px;
  border: 2px dotted rgba(255,255,255,.22);
  background: rgba(255,255,255,.04);
}
.drop.active{
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255,122,24,.14) inset;
}
.drop-icon{ font-size:22px; }
.drop-copy{ display:flex; flex-direction:column; gap:2px; color:var(--muted); }
.drop:focus{ outline:2px solid var(--orange); outline-offset:2px; }

/* grid + cards (larger to prevent overlap) */
.grid{
  display:grid; grid-template-columns: repeat( auto-fill, minmax(360px, 1fr) );
  gap:16px; align-items:stretch;
}
.card{
  background:var(--panel); border:1px solid var(--glass-stroke); border-radius:20px; box-shadow:var(--shadow);
  padding:16px 16px 14px; display:flex; flex-direction:column; gap:12px; min-height:150px;
  position:relative;
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-title{
  font-weight:800; font-size:clamp(16px, 1.8vw, 22px); line-height:1.25;
  word-break:break-word; overflow-wrap:anywhere;
}
.file-pill{ padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); font-weight:800; }
.file-pill.PDF{ color:#ffb493; border-color:#ffb49344; }
.file-pill.IMG{ color:#b5f3c6; border-color:#b5f3c644; }
.file-pill.MD, .file-pill.TXT{ color:#c9d9ff; border-color:#c9d9ff44; }
.file-pill.DOC{ color:#ffd9a6; border-color:#ffd9a644; }

.meta{ color:var(--muted); font-size:14px; }
.tags{ display:flex; flex-wrap:wrap; gap:10px; }
.tags .chip{ background:rgba(255,255,255,.06); }

/* Make the card preview button stand out */
.card .btn.ghost.tiny{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.58rem .9rem; border-radius:999px;
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.28);
  font-weight:800; letter-spacing:.2px;
}
.card .btn.ghost.tiny::after{
  content:"→"; transition: transform .2s ease; opacity:.95;
}
.card .btn.ghost.tiny:hover{
  background: linear-gradient(135deg, rgba(255,122,24,.18), rgba(255,122,24,.08));
  border-color: rgba(255,122,24,.45);
  box-shadow: 0 10px 22px rgba(255,122,24,.16);
  transform: translateY(-1px);
}
.card .btn.ghost.tiny:hover::after{ transform: translateX(2px); }
.card .btn.ghost.tiny:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }

/* Delete button (bottom-right of card) */
.card-delete{
  position:absolute; right:10px; bottom:10px;
  width:34px; height:34px; display:grid; place-items:center;
  border-radius:10px; cursor:pointer;
  background: rgba(255,77,77,.12);
  border:1px solid rgba(255,77,77,.45);
  color:#ff6b6b; font-size:16px; line-height:1;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.card-delete:hover{ transform: translateY(-1px); background: rgba(255,77,77,.20); box-shadow: 0 10px 20px rgba(255,77,77,.18); }
.card-delete:focus-visible{ outline:2px solid #ff6b6b; outline-offset:2px }

/* vector trash icon using mask */
.card-delete .trash{ 
  width:18px; height:18px; display:block;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23ff6b6b"><path d="M9 3a1 1 0 0 0-1 1v1H4v2h16V5h-4V4a1 1 0 0 0-1-1H9Zm-3 6h2v9H6V9Zm5 0h2v9h-2V9Zm5 0h-2v9h2V9Z"/></svg>');
  background-size: 18px 18px; background-repeat:no-repeat; background-position:center;
}

/* Delete modal */
/* Sleek glass delete modal with black/orange accents */
.delete-modal{
  width:min(420px, 92vw);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,122,24,.35);
  border-radius:18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.25) inset;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.delete-modal .viewer-head{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,122,24,.35);
  background: linear-gradient(180deg, rgba(255,122,24,.08), rgba(255,122,24,.02));
}
.delete-modal .viewer-title{ margin:0; font-size:18px; letter-spacing:.2px; }
.delete-modal .viewer-body{ padding:14px 16px !important; gap:.6rem !important; }

/* Orange action button for delete */
.btn.danger{
  background:
    linear-gradient(135deg, rgba(255,122,24,.55), rgba(255,122,24,.20)),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,122,24,.55);
  color:#fff;
}
.btn.danger:hover{ box-shadow:0 12px 28px rgba(255,122,24,.25); transform: translateY(-1px); }
.btn.danger:active{ transform: translateY(0); box-shadow:none }

/* Ember AI icon + hover bubble on cards */
.ai-btn{
  display:flex; align-items:center; gap:0; background:transparent; border:none; color:var(--txt);
  cursor:pointer; padding:0; position:relative;
}
.ai-btn .ai-icon{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; margin-right:-8px; }
.ai-btn .ai-bubble{
  position:relative; transform-origin:left center; max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  padding:.45rem .8rem .45rem .9rem; border-radius:0 999px 999px 0; border:1px solid rgba(255,122,24,0.45); border-left:none;
  color:var(--txt);
  background:
    linear-gradient(135deg, rgba(255,122,24,0.18), rgba(255,122,24,0.08)),
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.03));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 22px rgba(255,122,24,0.18), inset 0 0 18px rgba(255,122,24,0.10);
  transition: max-width .3s ease, opacity .3s ease, transform .3s ease;
  transform: translateX(-6px) scale(.98);
}
.ai-btn:hover .ai-bubble{ max-width:180px; opacity:1; transform: translateX(0) scale(1); }
.ai-btn:focus-visible .ai-bubble{ max-width:180px; opacity:1; transform: translateX(0) scale(1); outline:2px solid var(--orange); outline-offset:2px; }
/* keep bubble visible after click */
.ai-btn.pinned .ai-bubble{ max-width:200px; opacity:1; transform: translateX(0) scale(1); z-index:1; }
/* smaller variant for AI button inside modal */
.ai-btn.small .ai-icon{ width:28px; height:28px; margin-left:-8px; margin-right:0; position:relative; z-index:2; }
.ai-btn.small{ display:flex; flex-direction: row-reverse; }
.ai-btn.small .ai-bubble{ font-size:.9rem; padding:.4rem 1rem .4rem .95rem; max-width:260px; border-radius:999px 0 0 999px; border-right:none; border-left:1px solid rgba(255,122,24,0.45); transform:none; margin-right:-8px; z-index:1; }
.ai-btn.small.pinned .ai-bubble{ max-width:260px; }

/* viewer */
.viewer{
  max-width:min(1100px, 92vw); width:100%; border:none; border-radius:18px; padding:0; background:#111; color:var(--txt);
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}
.viewer::backdrop{ background:rgba(0,0,0,.5); backdrop-filter: blur(6px); }
.ai-modal{ width:1040px !important; max-width:1040px !important; min-width:1040px !important; box-sizing:border-box; contain:inline-size; overflow:hidden; }
.ai-modal .viewer-body{
  padding:18px 22px !important;
  display:block !important;
  overflow:auto;
  max-height:72vh;      /* scroll within the popout */
  min-height:0;         /* override global min-height */
  scrollbar-width:none; /* Firefox: invisible scrollbar */
}
.ai-modal .viewer-body::-webkit-scrollbar{ width:0; height:0; }

/* AI meta chips (source + type) */
.ai-meta{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin:.1rem 0 .4rem; }
.ai-meta .chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .7rem; border-radius:999px; font-weight:800; }
.ai-meta .ai-src{ background: linear-gradient(135deg, rgba(255,122,24,.22), rgba(255,122,24,.10)); border:1px solid rgba(255,122,24,.45); }
.ai-meta .ai-type{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); }
.ai-meta strong{ color:#fff; font-weight:800; }

/* Simple Q&A styling inside AI modal */
.qa-list{ list-style: decimal; margin:0; padding-left:2rem; display:grid; gap:.9rem; width:100%; min-width:100%; }
.qa{ width:100%; background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:.8rem .9rem; }
.qa .q-row{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.6rem; }
.qa .q-row .ai-cta{ margin-left:auto; }
.qa .q{ font-weight:800; margin:0 0 .4rem; }
.qa .ans{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; width:100%; }
.qa .ans li{ padding:.45rem .6rem; border-radius:10px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); white-space:normal; overflow-wrap:anywhere; }
.qa .ans li.correct{ border-color: rgba(64,211,155,.45); background: rgba(64,211,155,.12); }
.qa .explain{ display:none; margin-top:.5rem; padding:.6rem .7rem; border-radius:12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color:var(--muted); overflow-wrap:anywhere; word-break:break-word; width:100%; }
.qa.show-explain .explain{ display:block; }
.qa.show-explain .explain.typing::after{ content:""; display:inline-block; width:8px; height:1em; margin-left:2px; background:rgba(255,255,255,.7); animation: cursorBlink 1s steps(1) infinite; vertical-align:-2px; }
@keyframes cursorBlink{ 50%{ opacity:0 } }

.dots{ display:inline-flex; align-items:center; gap:6px; }
.dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.75); animation:bounce .9s ease-in-out infinite; }
.dot:nth-child(2){ animation-delay:.15s }
.dot:nth-child(3){ animation-delay:.3s }
@keyframes bounce{ 0%,80%,100%{ transform:translateY(0); opacity:.5 } 40%{ transform:translateY(-6px); opacity:1 } }

.ai-cta{
  display:inline-flex; align-items:center; gap:.45rem; margin-left:auto;
  padding:.5rem .7rem; border-radius:10px;
  border:1px solid rgba(255,122,24,.45);
  background:
    linear-gradient(135deg, rgba(255,122,24,.18), rgba(255,122,24,.08)),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  color:var(--txt); font-weight:800; cursor:pointer;
}
.ai-cta:hover{ box-shadow:0 8px 20px rgba(255,122,24,.18); }
.ai-cta:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.ai-cta .ai-icon{ width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); }
.ai-cta .label{ white-space:nowrap; }
.ai-cta .spinner{
  display:inline-block;           /* ensure width/height take effect */
  width:14px; height:14px;
  margin-right:6px; vertical-align:middle;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#ff9333; border-right-color:transparent;  /* clearer spinner */
  border-radius:50%; animation:spin .9s linear infinite;
}

.explain-btn{
  display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .65rem;
  border-radius:999px; border:1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08);
  color:var(--txt); cursor:pointer; font-weight:700;
}
.explain-btn:hover{ border-color: rgba(255,122,24,.45); box-shadow: 0 6px 16px rgba(255,122,24,.16); }
.explain-btn.loading{ opacity:.9; cursor:default; }
.explain-btn .spinner{ width:14px; height:14px; border:2px solid rgba(255,255,255,.28); border-top-color:#ff9333; border-radius:50%; animation:spin .9s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.viewer-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.12); gap:12px; }
.viewer-title{ margin:0; font-size:18px; }
.viewer-body{ padding:0; min-height:60vh; display:grid; place-items:center; background:#0b0b0b; }
.viewer-embed, .viewer-img, .viewer-text{ width:100%; height:100%; max-height:80vh; border:none; }
.viewer-text{ padding:18px; white-space:pre-wrap; overflow:auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:14px; }

/* footer (match index.html) */
.footer{ display:flex; align-items:center; justify-content:space-between; padding: 18px 0 40px; color:var(--muted); }
.foot-nav{ display:flex; gap:1rem; }
.foot-nav a{ color:var(--muted); text-decoration:none; }
.foot-nav a:hover{ color:var(--txt); }

/* responsive tweaks */
@media (max-width: 980px){
  .content{ grid-template-columns: 1fr; }
  .rail{ position:static; }
}

/* mobile footer layout (match index) */
@media (max-width: 640px){
  .footer{ flex-direction:column; gap:.6rem; }
}