/* File: static/style.css */

/* =========================================================
   Base / Globals
   ========================================================= */
:root{ --header-h:56px; --radius:12px; }

*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:#111;
  background:#fafafa;
}

/* Links */
a{ color:#0366d6; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================================================
   App Layout & Header
   ========================================================= */
main.app-main{ padding: calc(var(--header-h) + 14px) 24px 80px; }
/* Remove bottom padding ONLY on chat page (prevents trailing gap) */
main.app-main:has(#chat-main){ padding-bottom:0 !important; }

.container, .wrap, .dash-wrap { max-width:1200px; margin:0 auto; }
.wrap, .dash-wrap { padding:1.25rem; }

header.app-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  z-index:1000; display:flex; align-items:center; justify-content:space-between;
  padding:12px 20px; color:#fff;
}
header.app-header .brand{ font-weight:800; }
header.app-header nav a{ color:#fff; margin-right:20px; font-weight:500; }
header.app-header nav a:hover{ text-decoration:underline; }
header.app-header.student{ background:#003591; }
header.app-header.student nav a { color: #fff; }
header.app-header.student nav a:hover { text-decoration: underline; }
header.app-header.admin{ background:#222; }
header.app-header.admin nav{
  display:flex;
  gap:18px;
  align-items:center;
  flex:1 1 auto;
}
header.app-header.admin nav a:last-child{ margin-left:auto; }
nav a.active-tab{ opacity:.8; text-decoration:underline; text-underline-offset:3px; }

/* Flash messages */
.flash-messages{
  position:fixed; right:16px; bottom:92px; background:#fff; border:1px solid #ddd; border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.08); padding:12px 14px; z-index:1100; max-width:360px;
}

/* =========================================================
   Primitives: Cards, Typography, Grids, Forms, Buttons
   ========================================================= */
.panel{ background:#fafafa; border:1px solid #e5e5e5; border-radius:14px; padding:1rem 1.25rem; margin:1rem 0; }
.panel h2{ font-size:1.25rem; margin:.25rem 0 .6rem; font-weight:800; }
.card{ background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:16px; }
.cardish{
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);
}

.h1,.page-title{ font-size:2rem; font-weight:800; text-align:left; }
.h1{ margin:.25rem 0 .25rem; } .page-title{ margin:.25rem 0 1rem; }
.muted{ color:#6b7280; }
.right{ text-align:right; }
.center{ text-align:center; vertical-align:middle !important; }
.small{ font-size:.9rem; }

h2 {
  display: flex;
  align-items: center;   /* vertical centering */
  gap: 0.5em;            /* space between title and pill */
}

/* Vertically align the “Admin View” pill with the H1 */
.page-title{ display:flex; align-items:center; gap:.5rem; }
/* extra breathing room between H1 and chat on this page only */
#chat-main .page-title{ margin-bottom:1.75rem; }
.page-title .pill{ font-size:.75rem; line-height:1; padding:.2rem .6rem; }

.grid{ display:grid; gap:1rem; }
.grid.two{ grid-template-columns:1fr 1fr; }
.grid.auto{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.stack{ display:flex; flex-direction:column; gap:.75rem; }

label{ display:block; font-weight:600; margin:.5rem 0 .25rem; }
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="url"],textarea,select{
  width:100%; padding:.5rem .6rem; border:1px solid #ccc; border-radius:6px; background:#fff; font:inherit;
}
textarea{ min-height:110px; resize:vertical; }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .9rem; border-radius:10px; border:1px solid #d9d9d9; background:#fff; color:#222; cursor:pointer;
  font-weight:600; line-height:1.2; text-decoration:none;
  transition: box-shadow .15s ease, transform .02s ease, background .15s ease;
}
.btn:hover{ box-shadow:0 1px 0 rgba(0,0,0,.04), 0 2px 10px rgba(0,0,0,.06); }
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:#1f66ff; border-color:#1f66ff; color:#fff; }
.btn-primary:hover{ filter:brightness(1.05); }
.btn.secondary{ background:#fff; color:#222; border-color:#222; }
.btn.ghost{ background:#fff; color:#222; border-color:#bbb; }
.btn.danger{ background:#b91c1c; border-color:#b91c1c; color:#fff; }
.btn.green{ background:#15803d; border-color:#15803d; color:#fff; }
.btn.small{ padding:.4rem .6rem; font-size:.9rem; }
.btn.btn-plain{ background:#fff; border:1px solid #e5e7eb; }
.btn.disabled{ opacity:.6; cursor:not-allowed; }

.pill{ display:inline-block; padding:.2rem .55rem; border:1px solid #e3e3e3; border-radius:999px; font-size:.85rem; color:#6a6a6a; background:#fafafa; }
.badge{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.85rem; border:1px solid transparent; }
.badge.gray{ background:#f4f4f4; color:#444; border-color:#ddd; }
.badge.yellow{ background:#fff6cc; color:#6b5d00; border-color:#e6d98a; }
.badge.green{ background:#e6f6e6; color:#215e21; border-color:#b9e0b9; }

table{ width:100%; border-collapse:collapse; }
th,td{ border:1px solid #e5e5e5; padding:6px 8px; vertical-align:middle; }
th{ text-align:left; background:#f7f7f9; }

/* =========================================================
   Student: Dashboard
   ========================================================= */
.ann-card{ background:#fff; border:1px solid #e8e8e8; border-radius:10px; padding:.75rem .9rem; margin:.6rem 0; }
.ann-title-row{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.ann-title{ margin:0; font-size:1rem; line-height:1.2; font-weight:700; }
.ann-pill{ padding:.15rem .5rem; border-radius:999px; font-size:.75rem; font-weight:700; border:1px solid transparent; }
.ann-info{ background:#eef6ff; color:#0b63c9; border-color:#cfe5ff; }
.ann-warning{ background:#fff7e6; color:#8a5a00; border-color:#ffe3b3; }
.ann-urgent{ background:#ffecec; color:#a30000; border-color:#ffc8c8; }
.ann-meta{ color:#666; font-size:.85rem; margin-top:.15rem; }
.ann-body{ margin-top:.5rem; line-height:1.45; white-space:pre-wrap; }

.module-card{
  border:1px solid #e8e8e8; border-radius:12px; background:#fff; padding:14px 16px; margin:12px 0;
  display:grid; grid-template-columns:1.2fr 1.6fr .85fr; column-gap:22px; align-items:start;
}
.left-col h3{ font-size:1.2rem; margin:0 0 .35rem 0; }
.status-pill{ display:inline-block; padding:.22rem .55rem; border-radius:999px; font-size:.82rem; line-height:1; white-space:nowrap; border:1px solid #dcdcdc; background:#fafafa; color:#555; }
.status-complete{ border-color:#cfeedd; background:#f0fbf4; color:#127c3d; }
.status-progress{ border-color:#ffe7b3; background:#fffaf0; color:#8a5b00; }

.open-btn{
  margin-top:.35rem; display:inline-block; padding:.5rem .9rem; border-radius:10px;
  text-decoration:none; min-width:9.5rem; text-align:center; border:1px solid #d5d5d5; background:#fff; color:#333;
}
.open-btn:hover{ background:#f5f5f5; }
.open-btn[aria-disabled="true"]{ background:#fafafa; color:#9a9a9a; border-color:#e1e1e1; cursor:not-allowed; }

.dates-col{ display:grid; grid-template-columns:repeat(3, minmax(140px, 1fr)); justify-items:center; align-items:start; gap:10px 24px; }
.date-block{ display:grid; grid-template-rows:auto auto auto auto; text-align:center; row-gap:2px; }
.date-label{ font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:#6a6a6a; }
.date-main{ font-weight:800; line-height:1.1; white-space:nowrap; }
.date-dow{ font-size:.9rem; font-weight:600; color:#111; margin-top:2px; }
.date-sub{ margin-top:.15rem; font-size:.85rem; line-height:1.1; min-height:1.1em; }

.ok{ color:#128a38; } .past{ color:#b30000; }

.right-col{
  align-self:stretch; justify-self:end; min-width:180px; min-height:68px;
  display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:right;
}
.right-col .previews-left{ margin-top:auto; }
.module-card .right-col .status-pill{ font-size:.82rem; padding:.18rem .5rem; }

@media (max-width:880px){
  .module-card{ grid-template-columns:1fr; row-gap:10px; }
  .right-col{ justify-self:start; text-align:left; }
  .dates-col{ grid-template-columns:1fr 1fr; justify-items:start; }
}

/* =========================================================
   Student: Module View
   ========================================================= */

/* Grid that tiles when there’s room */
.mv .video-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1rem;
  justify-items: center;
}

/* Video card: never exceed 720px, but fill the cell if it’s narrower */
.mv .video-embed{
  width: min(100%, 720px);
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: #000;
}

.mv .video-embed iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Optional: nudge the whole block down a bit from the section title */
.mv .video-grid{ margin-top: .75rem; }

/* Small screens: allow narrower columns so they stack gracefully */
@media (max-width: 480px){
  .mv .video-grid{
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

.mv .pill-success{
  background: var(--green-soft, #e6f6ea);
  color:#0f5132;
  border: 1px solid var(--green-border, #b8e0c2);
}

.mv .score-row {
  display: flex;
  align-items: baseline;
  gap: .5rem;
  margin: .5rem 0 1rem;
  margin-left: 1rem;
}

.mv .score-row .label { font-weight: 600; color: #444; }
.mv .score-row .value { font-size: 1.6rem; font-weight: 800; letter-spacing: .5px; }

.mv .module-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.5rem;
}

.mv .exercise-head {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.mv .exercise-actions .btn:first-child { margin-left: 0; }

.mv .btn-success{ background: var(--accent-600, #e6f6ea); color:#0f5132; }

.mv .instructions{
  white-space: pre-line;
  margin:.5rem 0 1rem;
  color: var(--text-muted, #555);
}

.mv-due-date {
  color: #9ca3af;
  font-size: .95rem;
  margin-top: .25rem;
}

/* Backdrop */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(17,24,39,.45);
  z-index:9000;
}

/* =========================================================
   Reading modal
   ========================================================= */

/* Modal container */
#reading-modal{
  position:fixed; z-index:9010; background:#fff; border-radius:12px;
  width:65vw; left:50%; top:50%;
  height:auto;
  max-height:85vh;
  overflow:hidden;
  transform:translate(-50%, -50%);
  display:flex; flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
}

/* Sticky header inside modal */
#reading-modal .modal-head{
  position:sticky; top:0; z-index:1; background:#fff;
  padding:14px 18px; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #eee;
}

/* Scrollable body */
#reading-modal .rd-body{
  flex:1 1 auto; min-height:0;
  max-height:calc(85vh - 110px);
  overflow:auto; padding:18px;
  -webkit-overflow-scrolling:touch;
}

/* Close button */
#reading-modal .icon-btn{
  border:none; background:transparent; font-size:1.2rem; line-height:1; cursor:pointer;
}

/* Titles & meta in header */
.rd-title { font-weight:800; font-size:1.15rem; }
.rd-cite  { color:#6b7280; margin-top:.15rem; font-size:.9rem; }

/* Paragraph rhythm */
.rd-body { line-height:1.6; color:#222; }
.rd-body p { margin:.65rem 0; text-indent:0; }

/* Indented primary text blocks */
#reading-modal { --rd-quote-inset: clamp(40px, 7vw, 96px); }
#reading-modal .rd-block{
  margin:.4rem var(--rd-quote-inset);
  font-family: Georgia, "Times New Roman", Times, serif;
  line-height:1.7;
}

/* Comments = normal flow, sans-serif */
#reading-modal .rd-comment{
  margin:.75rem 0 1rem 0;
  font-family: var(--ui-font, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* If any comment is inside a block, cancel outdent rule */
#reading-modal .rd-block .rd-comment{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Section headings */
#reading-modal .rd-sec{
  margin:1.25rem 0 .7rem;
  font-size:1.08rem;
  font-weight:700;
}

/* Footnote markers */
#reading-modal .rd-fn{
  position: relative;
  font-size: .95em;
  vertical-align: super;
  color: #2563eb;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
  font-weight: 600;
}
#reading-modal .rd-fn::after{
  content: attr(data-label) "\A" attr(data-body);
  white-space: pre-wrap;
  position: absolute;
  left: 50%; transform: translateX(-50%); bottom: 1.8em;
  min-width: 260px; max-width: 480px;
  padding: .6rem .75rem; background: #111; color: #fff;
  font-size: .9rem; line-height: 1.45; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); opacity: 0; pointer-events: none;
  transition: opacity .08s linear; z-index: 2;
}
#reading-modal .rd-fn::after { font-weight: normal; }
#reading-modal .rd-fn::after::first-line { font-variant: small-caps; font-weight:700; }
#reading-modal .rd-fn:hover::after{ opacity: 1; }

/* Redaction toggle button produced by \[...\] */
#reading-modal .r-edt{
  border:0; background:transparent; padding:0 .15rem;
  color:#2563eb; cursor:pointer; border-radius:6px;
  text-decoration: underline dotted; text-underline-offset:2px;
  text-align:left; font: inherit;
}
#reading-modal .r-edt:hover{ background:rgba(37,99,235,.08); }

/* Notes section + subtle separator */
#reading-modal .rd-sep{
  width:42%; height:1px; margin:1.25rem auto .5rem;
  background:linear-gradient(90deg, transparent, #e5e7eb, transparent);
}
#reading-modal .rd-notes-h{
  margin:.25rem 0 .5rem; text-align:center;
  font-variant: small-caps; letter-spacing:.06em; color:#6b7280; font-weight:700; font-size:1rem;
}
#reading-modal .rd-notes{ margin:.25rem 0 0 1.25rem; }

/* REAL ITALICS */
#reading-modal .rd-body em,
#reading-modal .rd-body i{
  font-style: italic !important;
  font-weight: inherit;
}

/* Comment ↔ block spacing (placed AFTER base rules; force with !important) */
#reading-modal .rd-comment + .rd-block { margin-top: 1.6rem !important; }
#reading-modal .rd-block + .rd-comment { margin-top: 1.2rem !important; }

/* Deep-indented block quote (\quote{...}) */
#reading-modal .rd-quote{
  margin:.6rem calc(var(--rd-quote-inset) + 1.5rem);
  padding-left:.75rem;
  border-left:3px solid #e5e7eb;
  font-style:italic;
  line-height:1.7;
}
#reading-modal .rd-quote em{ font-style: italic; }

/* Readings list */
.mv-readings{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.mv-reading-item{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.5rem .75rem; border:1px solid #eee; border-radius:10px; background:#fff; }
.mv-reading-title{ font-weight:600; }
.mv-reading-cite{ color:#6b7280; font-size:.9rem; margin-top:2px; }
.mv-reading-actions{
  display:flex; align-items:center; gap:.5rem;
}
.mv-reading-actions .btn,
.mv-reading-actions .btn-pdf {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; line-height: 1; padding: 0 .6rem; font-size: .9rem;
  border-radius: 6px; border: 1px solid #111; background: #fff; cursor: pointer;
}
.mv-reading-actions .btn-pdf .pdf-icon { width:14px; height:14px; margin-right:3px; position:relative; top:0; }
.pdf-ico{ display:inline-block; width:.9em; height:.9em; margin-right:6px; border:1px solid currentColor; border-radius:2px; position:relative; top:1px; }

/* Rubric modal (scoped) */
#rubric-modal[aria-hidden="true"] { display:none; }
#rubric-modal[aria-hidden="false"] { display:block; }

.rubric-backdrop{ position:fixed; inset:0; background:rgba(17,24,39,.45); z-index:9100; }
.rubric-dialog{
  position:fixed; z-index:9110; background:#fff; border-radius:12px;
  width:min(560px, 92vw); left:50%; top:50%; transform:translate(-50%, -50%);
  box-shadow:0 20px 50px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
  overflow:hidden;
}
.rubric-dialog:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
.rubric-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #eee; }
.rubric-title { font-weight: 800; font-size: 1.05rem; }
.rubric-body{ padding:16px; max-height:70vh; overflow:auto; }
.rubric-link{ margin-left:.5rem; font-size:.95rem; color:#2563eb; text-decoration:underline; }
.rubric-list{ list-style:none; margin:.25rem 0 0; padding:0; }
.rubric-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.4rem 0; }
.rubric-desc{ flex:1 1 auto; min-width:0; }
.rubric-pct { font-weight:700; color:#111; font-variant-numeric: tabular-nums; }
.rubric-muted{ color:#6b7280; font-size:.9rem; }

/* =========================================================
   Student: Chat UI
   ========================================================= */
/* Grid wrapper and 2-col toggle when admin panel is present */
.chat-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:1rem;
  max-width:1800px;
  margin:0 auto;
  padding:0 1rem;
}
@media (min-width: 980px){
  .chat-layout.has-admin{
    grid-template-columns: minmax(0, 1fr) 360px; /* chat + admin panel */
    align-items:start;
  }
}

/* --- Student-only width tuning (admin stays the same) --- */
:root{
  /* tweak this to taste; admin layout unaffected */
  --student-chat-max: 800px;          /* try 820–920px depending on preference */
}

/* When there is NO admin panel (no .has-admin), center and cap chat width */
.chat-layout:not(.has-admin) .chat-card{
  max-width: var(--student-chat-max);
  margin: 0 auto;                      /* centers the narrower column */
}


/* Chat card scaffold */
#chat-main { max-width:1200px; margin:0 auto; }

.chat-card{ display:flex; flex-direction:column; height:85dvh; min-height:520px; width:100%;}
.chat-shell{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.chat-body{
  background:#fafafa; border-top-left-radius:10px; border-top-right-radius:10px;
  padding:1rem; overflow:auto; flex:1 1 auto; min-height:0;
}

/* Scroll area (let .chat-body control the scrolling/height) */
#chat-container{
  height: auto; overflow-y:auto; padding:0; background:transparent;
  border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5;
  min-height:0; min-width:0; scroll-behavior:smooth; display: flex;
  flex-direction: column; scrollbar-gutter: stable;
}

#chat-container::before{
  content:"";
  flex:1 0 auto;              /* spacer pushes messages to bottom when short */
}

/* Message bubbles */

.chat-msg{
  display:inline-block;            /* shrink to content width */
  white-space:pre-wrap; padding:.6rem .8rem; margin:.35rem 0;
  border-radius:18px; border:1px solid #eee;
  max-width:min(70%, 680px);
}

.chat-msg:only-child,
.chat-msg:has(br):not(:empty) {
  border-radius: 24px;
}

/* Lawcrates on the left */
.chat-assistant{
  align-self:flex-start;
  margin-right:auto;
  background:#e8f9f0;          /* mint */
  border-color:#bfead6;
  text-align:left;
  margin-left:8px;
}
/* User on the right, but text stays left-aligned */
.chat-user{
  align-self:flex-end;
  margin-left:auto;
  background:#e6f2ff;          /* soft sky */
  border-color:#bcdcff;
  text-align:left;
  margin-right:8px;
}

.chat-system{ align-self:center; margin-left:15px; margin-right:15px; background:#f6f6f6; border:1px dashed #ddd; max-width:820px; }

/* --- Chat window scrollbar: hidden until hover/scroll --- */
/* --- Chat window scrollbar: no layout shift, fade-in thumb --- */
#chat-container{
  /* scrolling & layout */
  height:auto;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  /* reserve gutter so content width never changes */
  scrollbar-gutter: stable;            /* or: stable both-edges if you prefer symmetry */

  /* theming */
  --sb-track: transparent;
  --sb-thumb: rgba(0,0,0,.35);
  --sb-w: 12px;                        /* constant width (prevents reflow) */

  /* Firefox: keep width stable, just hide color until hover */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
#chat-container:hover{
  scrollbar-color: var(--sb-thumb) var(--sb-track);
}
/* WebKit/Blink: constant-width scrollbar; thumb fades in on hover */
#chat-container::-webkit-scrollbar{
  width: var(--sb-w);
  height: var(--sb-w);
}
#chat-container::-webkit-scrollbar-track{
  background: var(--sb-track);
}
#chat-container::-webkit-scrollbar-thumb{
  background: transparent;             /* invisible by default, but width is reserved */
  border-radius: 8px;
}
#chat-container:hover::-webkit-scrollbar-thumb{
  background: var(--sb-thumb);         /* visible on hover without changing width */
}
#chat-input{
  background:#fff; border-top:1px solid #e5e5e5; display:grid; grid-template-columns:1fr auto;
  gap:.6rem; padding:.6rem .8rem; align-items:center; border-bottom-left-radius:10px; border-bottom-right-radius:10px;
}
#chat-input textarea{
  width:100%; resize:none; border:1px solid #d9d9d9; border-radius:var(--radius); padding:.65rem .8rem; font:inherit; outline:none;
}
#chat-input textarea:focus{ border-color:#9cc2ff; box-shadow:0 0 0 3px rgba(156,194,255,.35); }

.chat-composer{
  position:relative;
  padding:.75rem 1rem;          /* match toolbar’s side padding */
  border-top:1px solid #e5e7eb;
  border-bottom-left-radius:10px; border-bottom-right-radius:10px; background:#fff;
}
#input{
  box-sizing: border-box;
  width:100%;
  resize:none;
  overflow-y: hidden;
  min-height:46px;
  padding: .65rem calc(44px + 1.5rem) .65rem .75rem !important; 
  border-radius:8px;
  border:1px solid #e5e7eb;
  font:inherit;
  display:block;
  -webkit-overflow-scrolling: touch;
}
.btn-send{
  position:absolute;
  right:2.5rem;                   /* align with composer padding */
  top:50%; transform:translateY(-50%);   /* vertically centered to textarea */
  width:40px; height:40px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; line-height:1; font-weight:700;
}
.btn-send:active{   
    transform: translateY(calc(-50% + 1px)); /* keeps vertical centering, nudges 1px */
    filter: brightness(0.95); }

/* Subtle / “hidden until hover” scrollbar */
#input::-webkit-scrollbar { width: 8px; }
#input::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
#input:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); }
#input::-webkit-scrollbar-track { background: transparent; }

/* Firefox */
#input { scrollbar-width: thin; scrollbar-color: transparent transparent; }
#input:hover { scrollbar-color: rgba(0,0,0,.25) transparent; }

/* Toolbar beneath composer */
.chat-toolbar{ display:flex; align-items:center; gap:.5rem; padding:0 1rem 1rem; }
.chat-toolbar .spacer{ flex:1; }

.typing-indicator {
  display: inline-block;
  font-style: italic;
  background: #eaf7ef;
  color: #111;
  border-radius: 12px;
  padding: 4px 10px;
  margin: 6px 0;
  max-width: fit-content;
}

/* =========================================================
   Admin Panel (right column)
   ========================================================= */
.admin-panel{
  position: sticky; top:16px; max-width:340px; margin:0 0 0 16px; padding:12px 14px;
  border:1px solid #e6e6e6; border-radius:10px; background:#fafafa; font-size:.95rem;
}
.admin-panel .row{ display:flex; justify-content:space-between; gap:.5rem; margin:.25rem 0; }
.admin-panel h3{ margin:.25rem 0 .5rem; font-size:1rem; }
.admin-panel .knum{ font-variant-numeric:tabular-nums; }
.box{
  background:#f9fafb; border:1px solid #e5e7eb; border-radius:8px; padding:.6rem; margin-bottom:.75rem;
}

.admin-panel details.debug{
  margin-top:.5rem; border:1px solid #e5e7eb; border-radius:6px; background:#fafafa; padding:.4rem .6rem; font-size:.9rem;
}
.admin-panel details.debug summary{ cursor:pointer; font-weight:600; list-style:none; }
.admin-panel details.debug summary::-webkit-details-marker{ display:none; }
.admin-panel details.debug summary::before{
  content:"▶"; display:inline-block; margin-right:6px; font-size:.8rem; transform:rotate(0deg); transition:transform .2s;
}
.admin-panel details[open].debug summary::before{ transform:rotate(90deg); }
.admin-panel details.debug pre{
  margin-top:.4rem; padding:.5rem; background:#fff; border:1px solid #ddd; border-radius:4px; font-size:.8rem;
  overflow:auto; white-space:pre-wrap; max-height:180px;
}

/* =========================================================
   Modals (shared)
   ========================================================= */
.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:999; }
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  width:min(1000px,94vw); max-height:86dvh; overflow: auto;
  padding:1rem; display:none; box-shadow:0 10px 30px rgba(0,0,0,.15); z-index:1000;
}
.modal h3{ margin:0 0 .5rem 0; }
.modal pre{
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  font-size:.9rem; line-height:1.35; white-space:pre-wrap; word-break:break-word;
  max-height:calc(86dvh - 140px); overflow:auto;
}

/* Narrower width for small dialogs */
#assessment-modal,
#no-attempts-modal {
  width: min(480px, 92vw);
  max-width: 480px;   /* cap it even on large screens */
}

/* =========================================================
   Admin: Assessment table
   ========================================================= */
.toolbar .search{ padding:.5rem .75rem; border:1px solid #ccc; border-radius:6px; min-width:260px; }
table.assess{ width:100%; border-collapse:collapse; }
table.assess th, table.assess td{ padding:.6rem .75rem; border-bottom:1px solid #eee; text-align:left; }
table.assess th{ font-weight:600; font-size:.92rem; color:#333; }
.flag{ background:#fee; color:#900; border:1px solid #f9c; padding:.15rem .4rem; border-radius:6px; font-size:.78rem; }
.nowrap{ white-space:nowrap; }

/* =========================================================
   Feedback page
   ========================================================= */
.fb-wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.fb-head { margin: 0 0 .5rem; margin-bottom: 1.5rem;}
.fb-muted { color: #6b7280; }
.fb-grid { display:grid; grid-template-columns: 1fr 320px; gap: 1rem; }
.fb-card { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:1rem; }
.fb-wide { grid-column: 1 / -1; }
.fb-rubric { align-self: start; }
.fb-metrics-table { width:100%; border-collapse:collapse; }
.fb-metrics-table th, .fb-metrics-table td { padding:.6rem .4rem; vertical-align: middle; }
.fb-metrics-table thead th { text-align:left; font-weight:600; color:#374151; border-bottom:2px solid #e5e7eb; }
.fb-metrics-table tbody tr + tr td { border-top:1px solid #f1f5f9; }
.fb-metric-desc { color:#111827; }
.fb-metric-weight { text-align:right; color:#6b7280; }
.fb-bar-wrap { display:grid; grid-template-columns:1fr auto; gap:.6rem; align-items:center; }
.fb-bar { height:10px; background:#eef2ff; border-radius:999px; overflow:hidden; }
.fb-bar > span { display:block; height:100%; background: linear-gradient(90deg,#6366f1,#22c55e); }
.fb-total-row td { border-top:2px solid #e5e7eb; padding-top:.8rem; font-weight:700; }
.fb-feedback { white-space: pre-line; text-indent: 0; line-height: 1.55; color: #111827; }
.fb-rubric h2 { margin: 0 0 .5rem; font-size:1rem; }
.fb-rubric ul { margin: 0; padding-left: 1rem; }
.fb-rubric li { margin: .25rem 0; color: #374151; }
.fb-rubric { align-self: stretch; display:flex; flex-direction:column; }
.fb-rubric h2 { margin:.25rem 0 .25rem; }
.fb-rubric-sub { color:#6b7280; margin: 0 0 .5rem; }
.fb-rubric-list { margin:.25rem 0; margin-top:25%; font-size:.95rem; color: var(--text-muted, #444); }
.fb-rubric-list li { margin:.35rem 0; color:#374151; }
.fb-rubric-list li strong { display:inline-block; width:1.2rem; text-align:center; color:#111827; }

/* =========================================================
   Admin Config page (namespaced)
   ========================================================= */
.admin-config-page .container{ max-width:980px; margin:0 auto; }
.admin-config-page .card{ background:#fff; border:1px solid #e5e5e5; border-radius:12px; padding:16px; margin:18px 0; }
.admin-config-page .card h2{ margin:0 0 12px 0; font-size:1.1rem; }
.admin-config-page .grid{ display:grid; gap:10px; }
.admin-config-page .g3{ grid-template-columns:1fr 1fr 1fr; }
.admin-config-page .g2{ grid-template-columns:1fr 1fr; }
.admin-config-page .g1{ grid-template-columns:1fr; }
.admin-config-page label{ font-size:.9rem; color:#222; display:block; margin:6px 0 4px; }
.admin-config-page input[type="text"],
.admin-config-page input[type="number"],
.admin-config-page input[type="date"],
.admin-config-page select,
.admin-config-page textarea{
  width:100%; box-sizing:border-box; padding:10px; border:1px solid #d6d6d6; border-radius:10px; background:#fafafa;
}
.admin-config-page textarea{ min-height:110px; resize:vertical; }
.admin-config-page .row{ display:flex; align-items:center; gap:12px; }
.admin-config-page .hint{ font-size:.8rem; color:#666; margin-top:6px; }
.admin-config-page .btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid #222;
  background:#222;
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  font-family:inherit;
  font-size:0.95rem;
  font-weight:600;
  line-height:1.2;
}
.admin-config-page .btn.secondary{ background:#fff; color:#222; }
.admin-config-page .btn.ghost{ background:#f5f5f5; color:#222; border-color:#ccc; }
.admin-config-page .btn.red{ background:#b80d0d; border-color:#b80d0d; color:#fff; }
.admin-config-page .btn.green{ background:#15803d; border-color:#15803d; color:#fff; }
.admin-config-page .btn.primary{ background:#0d6efd; border-color:#0d6efd; color:#fff; }
.admin-config-page .icon{ display:inline-flex; width:16px; height:16px; align-items:center; justify-content:center; }
.admin-config-page .item{ border:1px solid #eee; border-radius:10px; padding:12px; background:#fcfcfc; margin:10px 0; }
.admin-config-page .trash{ width:36px; height:36px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #ddd; border-radius:8px; background:#fff; cursor:pointer; }
.admin-config-page .trash:hover{ background:#f8dada; border-color:#c33; }

.admin-config-page .metric-row{ display:grid; grid-template-columns:240px 1fr 40px; column-gap:12px; align-items:center; }
.admin-config-page .metric-row .trash{ align-self:start; margin-top:28px; }

.admin-config-page .objective-row{ display:grid; grid-template-columns:1fr 120px 220px 40px; column-gap:12px; align-items:start; }
.admin-config-page .objective-row .trash{ align-self:start; margin-top:28px; }

.admin-config-page .autogrow-3{ min-height:40px; max-height:72px; overflow-y:auto; }
.admin-config-page textarea.autogrow-3{ resize:none; }

.admin-config-page{ padding-bottom:72px; }

.footerbar{ position:fixed; bottom:0; left:0; right:0; width:100vw; z-index:999; background:#111; border-top:1px solid #000; padding:10px 0; }
.footerbar .footerwrap{ max-width:980px; margin:0 auto; padding:0 14px; display:flex; align-items:center; gap:10px; }
.footerbar select{ min-width:180px; max-width:220px; }
.footerbar .spacer{ flex:1; }
.footerbar .btn{ background:#fff; color:#222; border-color:#222; }
.footerbar .btn.primary{ background:#2b7cff; border-color:#2b7cff; color:#fff; }
.footerbar .btn.red{ background:#b80d0d; border-color:#b80d0d; color:#fff; }
.footerbar .btn.green{ background:#15803d; border-color:#15803d; color:#fff; }
.footerbar .btn.secondary{ background:#fff; color:#222; border-color:#222; }
.footerbar .btn.primary:hover,
.footerbar .btn.red:hover,
.footerbar .btn.green:hover{ filter:brightness(0.95); }
.footerbar .btn:focus{ outline:none; }
.footerbar .btn:focus-visible{ outline:2px solid #ffffff80; outline-offset:2px; }
.footerbar button.btn:disabled,
.footerbar .btn.disabled{ opacity:.6; cursor:not-allowed; filter:none; box-shadow:none; }
.admin-config-page .file-row .btn{ position:relative; top:-1px; }

.row-actions{ display:inline-flex; gap:.5rem; align-items:center; }
.row-actions .btn{ margin:0; }

/* =========================================================
   Utilities
   ========================================================= */
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.mb-1{ margin-bottom:.5rem; } .mb-2{ margin-bottom:1rem; } .mb-3{ margin-bottom:1.5rem; }

.field{ margin-bottom:.75rem; }
.input-error, input.input-error, textarea.input-error, select.input-error{
  border-color:#dc2626 !important; box-shadow:0 0 0 3px rgba(220,38,38,.10);
}
.error-text{ color:#b91c1c; font-size:.9rem; margin-top:.25rem; }
.help-text{ color:#6b7280; font-size:.9rem; }

.kv{ list-style:none; padding:0; margin:0; }
.kv li{ display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px dashed #eee; }
.kv li span{ color:#666; }
.kv li strong{ color:#111; }
.flags{ list-style:square; padding-left:1.25rem; }

@keyframes indet {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(150%); }
  100% { transform: translateX(300%); }
}

/* Admin announcements tweaks */
.admin-annc { max-width: 900px; margin: 0 auto; padding: 0 16px; }
.admin-annc .row-3 { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; align-items:end; }
.admin-annc label{ display:block; margin-bottom:4px; font-weight:600; }
.admin-annc .stack .btn { width:auto; align-self:start; }
@media (max-width: 720px){ .admin-annc .row-3 { grid-template-columns:1fr; } }
.admin-annc .stack button[type="submit"], .admin-annc .stack .btn-primary { width:auto; display:inline-flex; align-self:flex-start; }
.admin-annc .stack input[type="text"], .admin-annc .stack textarea, .admin-annc .stack select { width:100%; }
.admin-annc .annc-list{ list-style:none; padding:0; margin:0; }
.admin-annc .annc-card{ margin-bottom:.75rem; }
.admin-annc .annc-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.admin-annc .annc-title{ font-weight:700; }
.admin-annc .annc-meta{ font-size:.9rem; }
.admin-annc .annc-msg{ margin:.5rem 0 0 0; white-space:pre-wrap; }
.admin-annc .annc-actions{ margin:0; }
.presence-dot{ display:inline-block; width:8px; height:8px; border-radius:999px; background:#d1d5db; margin-right:6px; vertical-align:middle; }
.presence-dot.online{ background:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.15); }

/* Slightly wider gutter for admin pages */
.admin-users-page { padding-left: 50px; padding-right: 50px; }

.chat-error {
  background:#fee2e2; color:#7f1d1d; border:1px solid #fecaca;
  padding:.5rem .75rem; border-radius:8px; margin:.5rem 0; font-size:.95rem;
}

/* explicit vertical spacer from \vspace */
#reading-modal .rd-gap { width: 100%; }

/* --- Admin header: push Logout to the right --- */
header.app-header.admin nav{ display:flex; gap:18px; flex:1; align-items:center; }
header.app-header.admin nav a:last-child{ margin-left:auto; }

/* --- Admin User Detail page tweaks --- */
.admin-user-detail input[type="text"],
.admin-user-detail input[type="password"],
.admin-user-detail input[type="date"]{
  height: 34px;
  padding: 6px 8px;
  font-size: .95rem;
}

/* Keep the small buttons actually compact */
.admin-user-detail .btn.small{
  padding: 6px 10px;
  font-size: .9rem;
  line-height: 1.1;
}

/* Actions column layout */
.admin-user-detail .actions-cell .row-actions{
  display:flex;
  flex-direction:column;
  gap:.45rem;
}
.admin-user-detail .actions-cell .row-top{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;   /* keeps buttons to the right, no awkward wraps */
}
.admin-user-detail .actions-cell .overrides-form{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem .75rem;
  align-items:flex-end;
  justify-content:flex-end;
}
.admin-user-detail .actions-cell .overrides-form label.small{
  display:flex;
  flex:1 1 150px;
  min-width:140px;
  flex-direction:column;
  gap:.2rem;
}
.admin-user-detail .actions-cell .overrides-form label.small.checkbox{
  flex:1 1 240px;
  min-width:200px;
  gap:.4rem;
}
.admin-user-detail .actions-cell .overrides-form .checkbox-row{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  align-items:center;
}
.admin-user-detail .actions-cell .overrides-form button{
  flex:0 0 auto;
  align-self:center;
}

@media (max-width: 1024px){
  .admin-user-detail .actions-cell .overrides-form{
    justify-content:flex-start;
  }
}

@media (max-width: 768px){
  .admin-user-detail .actions-cell .overrides-form button{
    flex-basis:100%;
    justify-content:center;
  }
}

.admin-user-detail table.assess col.col-module{
  width:auto;
}

.admin-user-detail table.assess col.col-status,
.admin-user-detail table.assess col.col-tokens,
.admin-user-detail table.assess col.col-score{
  width:1%;
}

/* Slightly tighter table padding on this page */
.admin-user-detail table.assess th,
.admin-user-detail table.assess td{
  padding: 6px 8px;
}