/* Gully-specific additions on top of the Unison design system (styles.css).
   Reuses the same CSS variables so light/dark themes work automatically. */

/* The HTML `hidden` attribute must always win. Component rules like `.impersonate-bar` and
   `.sidebar button.nav` set `display: flex`, which (being author CSS) overrides the user-agent
   `[hidden] { display: none }` — that's why the "Exit view as" bar showed permanently and why a
   capless user could still see a gated nav button. This is the standard normalize.css guard and
   makes `el.hidden = true` reliably hide an element. */
[hidden] { display: none !important; }

/* The ask box */
.ask-textarea {
  width: 100%; min-height: 96px; resize: vertical; line-height: 1.5;
  font-size: 14px; padding: 12px 14px;
}
.samples { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.samples .chip { cursor: pointer; border: 1px solid var(--line); }
.samples .chip:hover { background: var(--tint); color: var(--primary); }

/* Loading card (uses the Unison .spinner + .progress styles) */
.loading-card { display: flex; flex-direction: column; gap: 12px; }
.loading-card .row { color: var(--ink-soft); font-size: 13px; }

/* Rotating "Gully is thinking" phrase. Each swap picks one of several entrance/exit
   styles at random (see app.js), so the indicator feels alive. ~0.3s out, ~0.5s in. */
.thinking-phrase { display: inline-block; will-change: opacity, transform, filter; }

/* exits (play once, hold the hidden end state) */
.tp-out-fade   { animation: tpOutFade   0.3s ease forwards; }
.tp-out-up     { animation: tpOutUp     0.3s ease forwards; }
.tp-out-down   { animation: tpOutDown   0.3s ease forwards; }
.tp-out-left   { animation: tpOutLeft   0.3s ease forwards; }
.tp-out-right  { animation: tpOutRight  0.3s ease forwards; }
.tp-out-pop    { animation: tpOutPop    0.3s ease forwards; }
.tp-out-blur   { animation: tpOutBlur   0.3s ease forwards; }
.tp-out-flip   { animation: tpOutFlip   0.3s ease forwards; }
.tp-out-spring { animation: tpOutPop    0.3s ease forwards; }

/* entrances */
.tp-in-fade    { animation: tpInFade    0.45s ease; }
.tp-in-up      { animation: tpInUp      0.45s cubic-bezier(0.2, 0.75, 0.25, 1); }
.tp-in-down    { animation: tpInDown    0.45s cubic-bezier(0.2, 0.75, 0.25, 1); }
.tp-in-left    { animation: tpInLeft    0.45s cubic-bezier(0.2, 0.75, 0.25, 1); }
.tp-in-right   { animation: tpInRight   0.45s cubic-bezier(0.2, 0.75, 0.25, 1); }
.tp-in-pop     { animation: tpInPop     0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.tp-in-blur    { animation: tpInBlur    0.45s ease; }
.tp-in-flip    { animation: tpInFlip    0.5s ease; }
.tp-in-spring  { animation: tpInSpring  0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }

@keyframes tpOutFade  { to { opacity: 0; } }
@keyframes tpOutUp    { to { opacity: 0; transform: translateY(-12px); } }
@keyframes tpOutDown  { to { opacity: 0; transform: translateY(12px); } }
@keyframes tpOutLeft  { to { opacity: 0; transform: translateX(-16px); } }
@keyframes tpOutRight { to { opacity: 0; transform: translateX(16px); } }
@keyframes tpOutPop   { to { opacity: 0; transform: scale(0.8); } }
@keyframes tpOutBlur  { to { opacity: 0; filter: blur(6px); } }
@keyframes tpOutFlip  { to { opacity: 0; transform: perspective(320px) rotateX(85deg); } }

@keyframes tpInFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes tpInUp     { from { opacity: 0; transform: translateY(14px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes tpInDown   { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes tpInLeft   { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes tpInRight  { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@keyframes tpInPop    { from { opacity: 0; transform: scale(0.8); }        to { opacity: 1; transform: scale(1); } }
@keyframes tpInBlur   { from { opacity: 0; filter: blur(6px); }            to { opacity: 1; filter: blur(0); } }
@keyframes tpInFlip   { from { opacity: 0; transform: perspective(320px) rotateX(-85deg); } to { opacity: 1; transform: perspective(320px) rotateX(0); } }
@keyframes tpInSpring {
  0%   { opacity: 0; transform: scale(0.8) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Reduced motion: collapse every style to a quiet fade. */
@media (prefers-reduced-motion: reduce) {
  [class*="tp-out-"] { animation: tpOutFade 0.25s ease forwards; }
  [class*="tp-in-"]  { animation: tpInFade  0.3s ease; }
}

/* Answer rendered from light markdown */
.answer { font-size: 14.5px; line-height: 1.62; color: var(--ink); }
.answer p { margin: 0 0 10px; }
.answer p:last-child { margin-bottom: 0; }
.answer strong { color: var(--ink-strong); }
.answer h3, .answer h4, .answer h5 { color: var(--ink-strong); margin: 14px 0 6px; font-size: 15px; }
.answer h3 { font-size: 16px; }
.answer h3:first-child, .answer h4:first-child { margin-top: 0; }
.answer hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.answer ul, .answer ol { margin: 8px 0; padding-left: 22px; }
.answer li { margin: 3px 0; }
.answer table { border-collapse: collapse; margin: 10px 0; width: auto; }
.answer th, .answer td {
  border: 1px solid var(--line); padding: 6px 11px; text-align: left; font-size: 13px;
}
.answer th { background: var(--surface-2); color: var(--ink-soft); font-weight: 700; }
.answer code {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 6px; font-family: Consolas, monospace; font-size: 12.5px;
}

/* SQL + data disclosure */
.sql-block {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 15px; overflow: auto; margin: 0 0 14px;
  font-family: Consolas, "Courier New", monospace; font-size: 12.5px;
  color: var(--ink); white-space: pre; line-height: 1.5;
}
.result-meta { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }

/* error panel (inline, complements the toast) */
.error-panel {
  background: var(--danger-tint); color: var(--danger); border: 1px solid var(--danger);
  border-radius: var(--radius-sm); padding: 12px 15px; font-size: 13px; margin-bottom: 12px;
}

/* chat */
.chat-card { display: flex; flex-direction: column; }
.chat-thread {
  display: flex; flex-direction: column; gap: 12px;
  min-height: 220px; max-height: 56vh; overflow-y: auto; padding: 4px 2px 8px;
}
.chat-empty { margin: auto; text-align: center; max-width: 360px; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 13px; font-size: 14px; line-height: 1.55; }
.bubble.user { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; white-space: pre-wrap; }
.bubble.gully { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bubble.gully .answer { font-size: 14px; }
.bubble.thinking { align-self: flex-start; color: var(--ink-soft); display: flex; align-items: center; gap: 9px; }
.chat-toolbar { display: flex; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.chat-input-row { display: flex; gap: 10px; align-items: flex-end; margin-top: 10px; }
.chat-template-panel { margin-top: 8px; padding: 4px 2px 2px; max-height: 320px; overflow-y: auto; }
.chat-input-row .ask-textarea { flex: 1; }
.chat-sql { margin-top: 8px; }
.chat-sql .sql-block { margin: 6px 0 0; }

/* record picker (typeahead) */
.rec-picker { position: relative; }
.rec-toggle { display: flex; gap: 6px; margin-bottom: 8px; }
.rec-toggle .chip { cursor: pointer; border: 1px solid var(--line); }
.rec-toggle .chip:hover { background: var(--tint); color: var(--primary); }
.rec-toggle .chip.rec-active { border-color: var(--primary); color: var(--primary); font-weight: 600; }
.rec-input { width: 100%; }
.rec-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow, 0 6px 24px rgba(0,0,0,0.12)); max-height: 260px; overflow-y: auto;
}
.rec-opt { padding: 8px 12px; cursor: pointer; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.rec-opt:last-child { border-bottom: 0; }
.rec-opt:hover { background: var(--tint); }

/* prompt library */
.prompt-card { transition: border-color 0.12s; }
.prompt-card:hover { border-color: var(--primary); }
.email-draft {
  white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px; margin-top: 6px;
}

/* history rows */
.hist-q { color: var(--ink-strong); font-weight: 600; font-size: 13.5px; margin-bottom: 3px; }
.hist-meta { color: var(--ink-soft); font-size: 11.5px; }

/* feedback (thumbs + corrections -> the learning loop) */
.fb-bar, .hist-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fb-btn { padding: 2px 9px; font-size: 14px; line-height: 1.2; }
.fb-status { margin-left: 2px; }
.fb-form { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 6px; }
.fb-form[hidden] { display: none; }   /* author display:flex would otherwise beat the hidden attr */
.fb-form .fb-note { flex: 1; min-width: 180px; }
.fb-form .fb-sql {
  width: 100%; min-height: 46px; resize: vertical;
  font-family: Consolas, monospace; font-size: 12.5px;
}
.bubble .fb-bar { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; }
/* In the History footer the bar sits inline with chips + the Golden button, so it
   must not add its own top margin (which would drop the thumbs below the button). */
.hist-foot .fb-bar { margin-top: 0; }

.snapshot-stats { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--ink-soft); }
.snapshot-stats b { color: var(--ink-strong); }

/* stat-strip skeleton (shown before stats load) */
.skeleton-bar {
  display: inline-block; width: 68px; height: 24px; border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--line) 50%, var(--surface-2) 100%);
  background-size: 200% 100%; animation: skeleton-shimmer 1.3s ease-in-out infinite;
}
@keyframes skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ---------- Phase 3: saved reports + review queue ---------- */
.report-caveats {
  background: var(--warn-tint); color: var(--warn); border: 1px solid var(--warn);
  border-radius: var(--radius-sm); padding: 10px 13px; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 12px;
}
.report-caveats ul { margin: 0; padding-left: 18px; }
.report-caveats li { margin: 2px 0; }
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-top: 6px; }
.tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl th, .tbl td { border-bottom: 1px solid var(--line); padding: 7px 11px; text-align: left; white-space: nowrap; }
.tbl th { background: var(--surface-2); color: var(--ink-soft); font-weight: 700; position: sticky; top: 0; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--tint); }
/* The Review queue reuses .fb-form / .fb-sql, but rendered WITHOUT the hidden attr so the
   correction box shows open; the .fb-form[hidden] rule above is what keeps History collapsed. */
.review-card .fb-form { margin-top: 8px; }

/* ---------- links: GLOBAL so they read correctly on EVERY page (open blocks, work rights, tables,
   answers, plus tel:/mailto:/profile deep-links) — not just answers/tables, which left other pages
   showing the unreadable browser-default blue on the dark background. --primary is theme-aware (teal
   in both light + dark), so links stay legible on either background. ---------- */
a, a:visited { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }

/* ---------- sync (live refresh log) ---------- */
.sync-log {
  margin-top: 12px; max-height: 340px; overflow: auto; white-space: pre-wrap;
  font-family: Consolas, ui-monospace, monospace; font-size: 12px; line-height: 1.5;
  color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px;
}

/* ---------- definitions (how Gully defines things) ---------- */
.def-item { padding: 12px 0; border-top: 1px solid var(--line); }
.def-item:first-child { padding-top: 0; border-top: 0; }
.def-term { font-weight: 600; margin-bottom: 2px; }
.def-what { margin-bottom: 4px; }
.def-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.def-row input[type="date"], .def-row input[type="number"], .def-row input[type="text"] {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 7px 10px;
  background: var(--surface); color: var(--ink); font-size: 13.5px;
}
.def-row .r-input { flex: 1; text-transform: uppercase; }
.def-row .icon-del {
  cursor: pointer; border: 1px solid var(--line); background: var(--surface-2);
  color: var(--muted); border-radius: var(--radius-sm); width: 30px; height: 30px;
  line-height: 1; font-size: 15px; flex: none;
}
.def-row .icon-del:hover { color: var(--danger, #c0392b); border-color: var(--line-strong); }

/* ---------- accounts & permissions (Users + Roles) ---------- */
.perms-tbl td, .perms-tbl th { white-space: nowrap; vertical-align: top; }
.perms-tbl td:first-child, .perms-tbl th:first-child { white-space: normal; min-width: 230px; }
.perms-tbl th:not(:first-child) { text-align: center; text-transform: capitalize; }
.perms-tbl tr.cat-row td {
  background: var(--surface-2); font-weight: 600; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); padding-top: 9px; padding-bottom: 9px;
}
.perms-tbl code { font-size: 12.5px; }
.user-card { display: block; }
.user-card .field select { padding: 6px 9px; }
.user-card details summary { cursor: pointer; }
.impersonate-bar {
  display: flex; align-items: center; gap: 14px; margin-bottom: 16px;
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; font-weight: 500;
}
.impersonate-bar button { margin-left: auto; }
[data-theme="dark"] .impersonate-bar { background: #3a2410; border-color: #7c4a1d; color: #fed7aa; }

/* ---------- visa work-rights (6-month-per-school cap) ---------- */
.wr-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.wr-over { background: #fde2e1; color: #9a1b1b; }
.wr-approaching { background: #fff3cd; color: #8a5a00; }
.wr-ok { background: #d8f0e0; color: #1a6b3a; }
[data-theme="dark"] .wr-over { background: #4a1717; color: #f6b1ad; }
[data-theme="dark"] .wr-approaching { background: #3d2f10; color: #f0cf7a; }
[data-theme="dark"] .wr-ok { background: #16331f; color: #9fe0b5; }
.wr-covered { background: #e0e7ff; color: #3730a3; }
.wr-none { background: #e5e7eb; color: #4b5563; }
.wr-acked { background: #e5e7eb; color: #6b7280; }
[data-theme="dark"] .wr-covered { background: #27325c; color: #c3cdfa; }
[data-theme="dark"] .wr-none { background: #2a2f37; color: #aab3c0; }
[data-theme="dark"] .wr-acked { background: #2a2f37; color: #9aa3b0; }
.wr-tbl td { white-space: nowrap; vertical-align: middle; }
.wr-row.acked { opacity: .55; }
.wr-stat { display: flex; align-items: center; gap: 6px; }
.wr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: transparent; color: inherit; font: inherit; cursor: pointer; opacity: .42; }
.wr-chip.on { opacity: 1; }
.wr-chip:hover { border-color: var(--primary); }
.wr-section td { background: rgba(127, 127, 127, .09); font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em; text-transform: uppercase; padding-top: 11px; padding-bottom: 6px; }

/* ---------- term-date year groups (Definitions page) ---------- */
.term-year { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 6px; overflow: hidden; }
.term-year-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: rgba(127, 127, 127, .06); border: 0; padding: 7px 11px; cursor: pointer; font: inherit; color: inherit; }
.term-year-head:hover { background: rgba(127, 127, 127, .12); }
.term-caret { display: inline-block; width: 1em; opacity: .7; }
.term-year-rows { padding: 7px 9px; }

/* compact selects (health-check comparison picker) */
.hc-sel { padding: 4px 7px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: inherit; font: inherit; font-size: 13px; }

/* ---------- Configure-prompts split + test panel ---------- */
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .cfg-grid { grid-template-columns: 1fr; } }
.cfg-right { position: sticky; top: 12px; }
.txn-label { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; opacity: .65; margin: 9px 0 3px; }
.txn-pre { white-space: pre-wrap; word-break: break-word; margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45;
  background: rgba(127, 127, 127, .08); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 10px; max-height: 240px; overflow: auto; }
.llm-txn summary { cursor: pointer; font-size: 13px; font-weight: 600; }

/* ---------- Open blocks board ---------- */
.ob-block { margin-bottom: 10px; }
.ob-block.ob-gap { border-left: 3px solid #d99; }
[data-theme="dark"] .ob-block.ob-gap { border-left-color: #a35; }
/* ---------- Demand outlook (forecast) ---------- */
.fc-num { font-size: 22px; font-weight: 700; }
.fc-bars { display: flex; align-items: flex-end; gap: 5px; height: 74px; margin-top: 6px; }
.fc-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.fc-bar { width: 16px; background: #6aa3b5; border-radius: 2px 2px 0 0; opacity: .85; }
.fc-bar-proj { background: #d29a3c; opacity: 1; }
.fc-lbl { font-size: 9.5px; margin-top: 3px; }

/* ---------- History: grouped chat conversation card ---------- */
.conv-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; }
.conv-caret { display: inline-block; width: 1em; opacity: .7; flex: 0 0 auto; }
.conv-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.conv-cmeta { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.conv-snippet { margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-turns { margin-top: 10px; border-top: 1px solid var(--line); }
.conv-turn { padding: 12px 0; border-bottom: 1px solid var(--line); }
.conv-turn:last-child { border-bottom: 0; padding-bottom: 0; }

.ob-school { font-weight: 600; font-size: 14.5px; }
/* fixed layout + shared widths so every block's table lines up column-for-column at a glance */
.ob-tbl { table-layout: fixed; width: 100%; }
.ob-tbl th, .ob-tbl td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-tbl th:nth-child(1), .ob-tbl td:nth-child(1) { width: 32%; white-space: normal; }  /* candidate */
.ob-tbl th:nth-child(2), .ob-tbl td:nth-child(2) { width: 12%; }                        /* status */
.ob-tbl th:nth-child(3), .ob-tbl td:nth-child(3) { width: 14%; }                        /* days here */
.ob-tbl th:nth-child(4), .ob-tbl td:nth-child(4) { width: 11%; }                        /* 12 mo */
.ob-tbl th:nth-child(5), .ob-tbl td:nth-child(5) { width: 16%; }                        /* avail / block */
.ob-tbl th:nth-child(6), .ob-tbl td:nth-child(6) { width: 15%; }                        /* elsewhere */