/*
 * Workspace chrome added by the governance work: the audience badge, the
 * engine picker, the usage meter, the memory card, and the toast.
 *
 * Built on the variables index.html already defines, so there is one palette.
 * The shared pieces these reuse — `.gov-md` for the acceptable-use text — come
 * from governance.css, which both pages link.
 */

/* ── Audience badge ────────────────────────────────────────────────────
   Says, plainly, which set of rules is in force for this account. A student
   who does not know they are on a guardrailed agent reads a refusal as the
   tool being broken. */
.audience-badge {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 20px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
  cursor: help;
}
.audience-badge:empty { display: none; }
.audience-badge.is-student {
  background: rgba(201, 162, 39, 0.12);
  border-color: rgba(201, 162, 39, 0.32);
  color: var(--accent);
}

/* ── Engine picker ─────────────────────────────────────────────────────
   The Claude / ChatGPT switch, rebuilt on the tenant's own model cards. Same
   segmented shape as the Workspace/Admin switch beside it, deliberately: they
   are both "which of these am I on", and two different shapes for one idea is
   how a topbar starts looking assembled rather than designed. */
.engine-picker {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(0, 0, 0, 0.18);
  transition: opacity 0.15s;
}
.engine-picker.is-saving { opacity: 0.5; pointer-events: none; }
.engine-picker button {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  padding: 5px 13px;
  border-radius: 16px;
  border: none;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.engine-picker button:hover { color: var(--text); background: rgba(201, 162, 39, 0.1); }
.engine-picker button[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--maroon), var(--maroon2));
  color: var(--text);
}

/* ── Usage meter ───────────────────────────────────────────────────────
   Only rendered once this account passes a warning threshold. A percentage,
   never a dollar figure — the status endpoint deliberately withholds the
   amounts so nobody can read the district's budget off their own bar. */
.quota-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(232, 188, 58, 0.3);
  background: rgba(232, 188, 58, 0.08);
  cursor: help;
}
.quota-meter.is-exceeded {
  border-color: rgba(248, 81, 73, 0.35);
  background: rgba(248, 81, 73, 0.1);
}
.quota-meter-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.05em;
  color: var(--accent2);
  white-space: nowrap;
}
.quota-meter.is-exceeded .quota-meter-label { color: #ff8080; }
.quota-meter-track {
  width: 46px; height: 4px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.35);
  overflow: hidden;
  display: inline-block;
}
.quota-meter-fill {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--accent);
}
.quota-meter.is-exceeded .quota-meter-fill { background: #f85149; }

/* ── Sidebar link button ───────────────────────────────────────────────
   Matches the Tech Support link beside it exactly; the only difference is that
   one navigates away and one opens a panel. */
.sidebar-link-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.sidebar-link-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── Memory card ───────────────────────────────────────────────────────
   Rendered inside the shared WRSD modal shell (modal.css), so the frame,
   close behaviour and backdrop are the same as every embedded surface. */
.wrsd-memory { max-width: 660px; margin: 0 auto; padding: 30px 28px; }
.wrsd-memory-lead {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 22px;
}
.wrsd-memory-switches {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 22px;
}
.wrsd-memory-switch-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.wrsd-memory-switch-row + .wrsd-memory-switch-row { border-top: 1px solid var(--border); }
.wrsd-memory-switch-name { font-size: 0.88rem; font-weight: 600; }
.wrsd-memory-switch-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 3px;
}
.wrsd-memory-switch {
  position: relative;
  flex-shrink: 0;
  width: 40px; height: 22px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  padding: 0;
  transition: background 0.18s, border-color 0.18s;
}
.wrsd-memory-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.18s, background 0.18s;
}
.wrsd-memory-switch[aria-checked="true"] {
  background: linear-gradient(135deg, var(--maroon), var(--maroon2));
  border-color: rgba(201, 162, 39, 0.45);
}
.wrsd-memory-switch[aria-checked="true"]::after {
  transform: translateX(18px);
  background: var(--accent);
}

/* Header row above the list: the count, and the one primary action. */
.wrsd-memory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.wrsd-memory-count {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.wrsd-memory-add {
  font-size: 0.78rem;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(201, 162, 39, 0.35);
  background: rgba(201, 162, 39, 0.1);
  color: var(--accent);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s;
}
.wrsd-memory-add:hover { background: rgba(201, 162, 39, 0.18); }

/* Shared by the add form and the per-row editor, so correcting a fact and
   adding one look like the same operation — which they are. */
.wrsd-memory-editor {
  margin-top: 12px;
  border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.2);
}
.wrsd-memory-editor textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  resize: vertical;
  outline: none;
}
.wrsd-memory-editor textarea:focus { border-color: var(--accent); }
.wrsd-memory-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.wrsd-memory-hint {
  flex: 1;
  font-size: 0.72rem;
  color: var(--muted);
}
.wrsd-memory-cancel,
.wrsd-memory-save {
  font-size: 0.76rem;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--font-body);
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  transition: all 0.15s;
}
.wrsd-memory-cancel:hover { color: var(--text); border-color: var(--muted); }
.wrsd-memory-save {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 600;
}
.wrsd-memory-save:hover { opacity: 0.88; }
.wrsd-memory-save[disabled],
.wrsd-memory-cancel[disabled] { opacity: 0.5; cursor: default; }

.wrsd-memory-actions { display: flex; gap: 8px; margin-top: 10px; }
.wrsd-memory-edit {
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}
.wrsd-memory-edit:hover { border-color: var(--accent); color: var(--accent); }

.wrsd-memory-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.14);
}
.wrsd-memory-text { font-size: 0.88rem; line-height: 1.65; }
.wrsd-memory-meta {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-top: 7px;
}
.wrsd-memory-forget {
  font-size: 0.72rem;
  padding: 5px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all 0.15s;
}
.wrsd-memory-forget:hover { border-color: #f85149; color: #f85149; }
.wrsd-memory-forget[disabled] { opacity: 0.5; cursor: default; }
.wrsd-memory-empty {
  text-align: center;
  padding: 34px 20px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

/* ── Terms error ───────────────────────────────────────────────────────
   Acceptance is the record the district relies on, so a failed write must not
   quietly let somebody through. This is where it says so. */
.terms-error {
  display: none;
  background: rgba(248, 81, 73, 0.14);
  border: 1px solid rgba(248, 81, 73, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  color: #ff8080;
  font-size: 0.82rem;
  line-height: 1.6;
  margin-bottom: 12px;
}

/* ── Toast ─────────────────────────────────────────────────────────────── */
.wrsd-toast {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 10000;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 13px 18px;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--text);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.wrsd-toast.is-shown { opacity: 1; transform: translateY(0); }

@media (max-width: 860px) {
  /* The topbar runs out of room first. The engine picker and the meter are
     both optional signals; the view switch is navigation and stays. */
  .engine-picker, .quota-meter, .audience-badge { display: none !important; }
}