/**
 * Research Studio — SGM-2 (Research Studio v1, epic SGM-1).
 * Real app.css tokens only (Gate 3.6) — no raw hex, no invented colors.
 * Scoped under #research-studio-page so class names never leak into other pages.
 */

#research-studio-page { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.rs-layout { display: flex; flex: 1; min-height: 0; gap: 0; }

/* ── Left rail: recent conversations ─────────────────────────────────── */
.rs-history { width: 220px; flex: none; border-right: 1px solid var(--border); padding: 12px 8px; overflow-y: auto; }
.rs-history-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: 6px 8px 8px; }
.rs-history-item { font-size: 12.5px; color: var(--text-secondary); padding: 8px 8px; border-radius: var(--radius); cursor: pointer; display: flex; align-items: center; gap: 7px; }
.rs-history-item:hover { background: var(--bg-card-hover); }
.rs-history-item.active { background: var(--primary-bg); color: var(--primary); font-weight: 600; }
.rs-history-item i { width: 13px; height: 13px; flex: none; color: var(--text-muted); }
.rs-history-item.active i { color: var(--primary); }
.rs-history-empty { font-size: 12px; color: var(--text-dim); padding: 8px; }
.rs-new-btn { width: 100%; margin-bottom: 8px; }

/* ── Main column ──────────────────────────────────────────────────────── */
.rs-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.rs-head { padding: 14px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--bg-card); flex-wrap: wrap; }
.rs-head h2 { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
.rs-head h2 i { width: 18px; height: 18px; color: var(--purple); }

.rs-modes { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 3px; }
.rs-mode { font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; gap: 6px; border: none; background: none; }
.rs-mode i { width: 14px; height: 14px; }
.rs-mode.on { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-xs); }
.rs-mode.on.deep { color: var(--purple); }

.rs-usage { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--text-muted); }
.rs-meter { width: 74px; height: 6px; border-radius: 999px; background: var(--bg-card-hover); overflow: hidden; }
.rs-meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.rs-meter.warn > span { background: var(--warning); }

/* ── Conversation area ────────────────────────────────────────────────── */
.rs-conv { flex: 1; padding: 22px 26px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; background: var(--bg); }

.rs-msg-user { align-self: flex-end; max-width: 70%; background: var(--primary); color: var(--text-inverse); padding: 10px 14px; border-radius: 14px 14px 4px 14px; font-size: 13.5px; white-space: pre-wrap; word-break: break-word; }

.rs-ans { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-xs); }
.rs-ans-role { font-size: 11px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.rs-ans-role i { width: 13px; height: 13px; }
.rs-ans-status { color: var(--text-dim); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.rs-ans-body { font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.rs-ans-body p { margin: 0 0 10px; }
.rs-ans-body p:last-child { margin-bottom: 0; }
.rs-ans-body ul, .rs-ans-body ol { margin: 0 0 10px 20px; }
.rs-cite { font-size: 10.5px; font-weight: 700; color: var(--primary); background: var(--primary-bg); border-radius: 999px; padding: 1px 6px; margin: 0 1px; vertical-align: super; cursor: default; }
.rs-cursor { display: inline-block; width: 7px; height: 14px; background: var(--purple); vertical-align: -2px; animation: rs-blink 1s steps(2) infinite; border-radius: 1px; margin-left: 1px; }
@keyframes rs-blink { 50% { opacity: 0; } }
.rs-ans-error { color: var(--danger); font-size: 13px; display: flex; align-items: center; gap: 7px; }
.rs-ans-error i { width: 14px; height: 14px; flex: none; }

.rs-sources { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.rs-sources-h { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.rs-sources-h i { width: 12px; height: 12px; }
.rs-src { display: flex; gap: 8px; align-items: baseline; font-size: 12px; padding: 3px 0; }
.rs-src-idx { font-weight: 700; color: var(--primary); min-width: 16px; }
.rs-src-link { color: var(--text-secondary); text-decoration: none; }
.rs-src-link:hover { text-decoration: underline; color: var(--primary); }

.rs-empty { display: grid; place-items: center; flex: 1; text-align: center; color: var(--text-muted); }
.rs-empty i { width: 34px; height: 34px; color: var(--text-dim); margin-bottom: 10px; }
.rs-empty-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.rs-empty-sub { font-size: 12.5px; margin-top: 4px; max-width: 320px; }

.rs-banner { font-size: 12.5px; padding: 11px 14px; border-radius: var(--radius); display: flex; align-items: center; gap: 9px; }
.rs-banner i { width: 16px; height: 16px; flex: none; }
.rs-banner.quota { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger); }
.rs-banner-actions { margin-top: 8px; }

/* ── Composer ─────────────────────────────────────────────────────────── */
.rs-composer { padding: 14px 20px; border-top: 1px solid var(--border); background: var(--bg-card); }
.rs-cbox { border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 8px 8px 8px 14px; display: flex; align-items: flex-end; gap: 10px; }
.rs-cbox textarea { flex: 1; font-family: inherit; font-size: 13.5px; color: var(--text); border: none; outline: none; resize: none; min-height: 22px; max-height: 140px; background: transparent; }
.rs-cbox textarea::placeholder { color: var(--text-dim); }
.rs-cbox textarea:disabled { color: var(--text-dim); }
.rs-send { width: 34px; height: 34px; border-radius: 999px; background: var(--primary); color: var(--text-inverse); border: none; display: grid; place-items: center; cursor: pointer; flex: none; }
.rs-send:disabled { background: var(--bg-card-hover); color: var(--text-dim); cursor: not-allowed; }
.rs-send.stop { background: var(--danger); }
.rs-send i { width: 16px; height: 16px; }
.rs-chint { font-size: 11px; color: var(--text-dim); margin-top: 6px; display: flex; justify-content: space-between; }
.rs-chint .live { color: var(--purple); }

.rs-permban { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--text-secondary); font-size: 12.5px; padding: 14px 16px; border-radius: var(--radius); display: flex; align-items: center; gap: 8px; margin: 20px; }
.rs-permban i { width: 15px; height: 15px; flex: none; color: var(--warning); }

/* ── Admin quota surface ──────────────────────────────────────────────── */
.rs-admin { padding: 22px 26px; overflow-y: auto; background: var(--bg); flex: 1; }
.rs-admin-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 4px; }
.rs-admin-title { font-size: 18px; font-weight: 700; }
.rs-admin-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; max-width: 640px; }
.rs-back-link { font-size: 12.5px; color: var(--primary); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 12px; background: none; border: none; padding: 0; }
.rs-back-link i { width: 14px; height: 14px; }

.rs-acard { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-top: 14px; }
.rs-acard h4 { font-size: 13px; font-weight: 700; margin: 0 0 4px; }
.rs-acard .rs-acard-d { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.rs-arow { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; gap: 12px; }
.rs-arow:last-child { border-bottom: none; }
.rs-qin { width: 64px; font-family: inherit; font-size: 13px; border: 1px solid var(--border-light); border-radius: 6px; padding: 5px 8px; text-align: center; background: var(--bg-input); color: var(--text); }

.rs-atable { width: 100%; border-collapse: collapse; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 14px; }
.rs-atable th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--bg); }
.rs-atable td { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.rs-atable tr:last-child td { border-bottom: none; }
.rs-atable .rs-user-email { color: var(--text-dim); font-size: 11px; display: block; }
.rs-atable .rs-remove-btn { background: none; border: none; cursor: pointer; color: var(--text-muted); display: inline-flex; }
.rs-atable .rs-remove-btn i { width: 15px; height: 15px; }

.rs-warnbox { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--text-secondary); font-size: 12px; padding: 10px 13px; border-radius: var(--radius); margin-top: 12px; display: flex; gap: 8px; }
.rs-warnbox i { width: 15px; height: 15px; flex: none; color: var(--warning); margin-top: 1px; }

@media (max-width: 900px) {
  .rs-history { display: none; }
}

/* Lucide icon sizing (SGM-2 fix) — createIcons() replaces <i data-lucide> with
   an <svg> that defaults to 24px; without these the icons render oversized
   next to 13-14px text. Constrain per context. */
#research-studio-page svg {
  width: 16px;
  height: 16px;
  flex: none;
  vertical-align: middle;
}
#research-studio-page .rs-empty svg { width: 30px; height: 30px; }        /* hero */
#research-studio-page .rs-mode svg { width: 14px; height: 14px; }         /* mode chips */

/* ── Deep Research fan-out progress (SGM-3) ──────────────────────────────
   Page-specific accent using the app's real --purple token, which app.css
   itself documents as "reserved for AI-authored surfaces" — the semantically
   correct fit for both the fan-out progress card and the draft action below. */
.rs-deep { background: var(--bg-card); border: 1px solid var(--purple-border); border-radius: var(--radius); padding: 16px 18px; }
.rs-deep-h { font-size: 12.5px; font-weight: 700; color: var(--purple); display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.rs-deep-h i { width: 15px; height: 15px; }

.rs-stage { display: flex; align-items: center; gap: 10px; font-size: 12.5px; padding: 6px 0; color: var(--text-secondary); }
.rs-stage-icon { width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; flex: none; }
.rs-stage-icon i { width: 12px; height: 12px; }
.rs-stage-icon.done { background: var(--accent-bg); color: var(--accent); }
.rs-stage-icon.wait { background: var(--bg-card-hover); color: var(--text-dim); }

.rs-angles { margin: 8px 0 4px 28px; border-left: 2px solid var(--border); padding-left: 14px; display: flex; flex-direction: column; gap: 7px; }
.rs-angle { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-secondary); }
.rs-angle i { width: 13px; height: 13px; }
.rs-angle .rs-angle-done { color: var(--accent); }
.rs-angle .rs-angle-queued { color: var(--text-dim); }
.rs-angle-label-run { color: var(--warning); }
.rs-angle-label-queued { color: var(--text-dim); }
.rs-spin { width: 13px; height: 13px; border: 2px solid var(--warning-border); border-top-color: var(--warning); border-radius: 999px; display: inline-block; animation: rs-spin 1s linear infinite; flex: none; }
@keyframes rs-spin { to { transform: rotate(360deg); } }

/* ── Deep Research report card ───────────────────────────────────────── */
.rs-report-meta { font-size: 11.5px; color: var(--text-muted); display: flex; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.rs-report-meta b { color: var(--text-secondary); }
.rs-ans-body h2, .rs-ans-body h3 { font-size: 14px; font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.rs-ans-body h2:first-child, .rs-ans-body h3:first-child { margin-top: 0; }
.rs-report-actions { display: flex; gap: 10px; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 14px; }
#research-studio-page .btn-purple { background: var(--purple); color: var(--text-inverse); border-color: var(--purple); }
#research-studio-page .btn-purple:hover { background: var(--purple-hover); border-color: var(--purple-hover); }

/* ── Draft-to-content modal (SGM-4) ──────────────────────────────────── */
.rs-draft-editor { min-height: 320px; max-height: 60vh; overflow-y: auto; border: 1px solid var(--border-light); border-radius: var(--radius); }
.rs-draft-fallback { white-space: pre-wrap; font-size: 13.5px; color: var(--text-secondary); padding: 12px; }