:root {
  --bg: #0b0d10;
  --panel: #12161b;
  --text: #e6edf3;
  --muted: #98a2b3;
  --accent: #7c9cff;
  --border: #1f2630;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif; }
a { color: var(--accent); text-decoration: none; }
header { display:flex; align-items:center; justify-content:space-between; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--panel); position:sticky; top:0; }
header h1 { margin: 0; font-size: 16px; }
header nav { display:flex; align-items:center; gap: 10px; }
header select { min-width: 220px; }
main { padding: 16px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
form { display:flex; flex-direction: column; gap: 8px; background: var(--panel); padding: 12px; border:1px solid var(--border); border-radius: 8px; }
label { display:flex; flex-direction: column; gap: 6px; color: var(--muted); }
input, textarea, select { width: 100%; padding: 8px 10px; border-radius: 6px; border:1px solid var(--border); background:#0f1318; color: var(--text); }
button { padding: 8px 12px; border-radius: 6px; border:1px solid var(--border); background:#19202a; color: var(--text); cursor:pointer; }
button.secondary { background: transparent; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding: 6px 0; border-bottom: 1px dashed var(--border); }
pre { background: #0f1318; border: 1px solid var(--border); border-radius: 6px; padding: 10px; white-space: pre-wrap; }
.hint { color: var(--muted); font-size: 12px; }

/* Chat UI */
.chatbox { border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: #0f1318; max-height: 480px; overflow-y: auto; }
.chat-msg { display: flex; gap: 10px; margin-bottom: 10px; }
.chat-msg .chat-role { font-weight: 600; width: 90px; text-transform: uppercase; color: var(--muted); }
.chat-msg .chat-content { white-space: pre-wrap; }
.chat-msg.system .chat-role { color: #7dd3fc; }
.chat-msg.user .chat-role { color: #fbbf24; }
.chat-msg.assistant .chat-role { color: #86efac; }

/* Viewer UI */
.viewer { display:grid; grid-template-columns: 260px 1fr 0; gap: 12px; transition: grid-template-columns 300ms ease; }
.viewer.side-open { grid-template-columns: 0 1fr 380px; }
.viewer-left, .viewer-center, .viewer-right { border:1px solid var(--border); border-radius:8px; background: var(--panel); overflow: hidden; }
.viewer-left-header, .viewer-center-header, .viewer-right-header { padding:10px 12px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.conv-list { max-height: 70vh; overflow-y: auto; }
.conv-item a { display:block; padding:10px 12px; }
.conv-item.active { background:#0f1318; }
.conv-title { font-weight:600; }
.conv-title { display:block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-sub { color: var(--muted); font-size:12px; }
.conv-sub { display:block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-center { display:flex; flex-direction: column; }
.messages { padding:12px; height: 60vh; overflow-y: auto; background:#0f1318; }
.msg { margin-bottom: 8px; }
.bubble { display:inline-block; padding:8px 10px; background:#19202a; border:1px solid var(--border); border-radius: 10px; max-width: 80%; }
.bubble.has-sender { margin-top: 4px; padding-top: 4px; }
.bubble.no-sender { margin-top: 2px; padding-top: 2px; }
.bubble .sender { color: var(--muted); font-size: 12px; }
.bubble .text { white-space: pre-wrap; }
.bubble.highlight { outline: 2px solid var(--accent); background: #111827; }
.composer { display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); }
.composer input { flex:1; }
.viewer-right { display:flex; flex-direction: column; }
.sidechat-tools { display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); }
.sidechat-log { height: 60vh; overflow-y:auto; padding:12px; background:#0f1318; }
.badge { padding:2px 8px; border-radius:999px; border:1px solid #2a3a2f; background:#0e1a15; color:#86efac; font-size:11px; }
.side-entry { margin-bottom:6px; }
.loading-entry { color: var(--muted); font-size: 12px; }
.typing { display:inline-flex; gap:6px; align-items:center; }
.typing .dot { width:6px; height:6px; border-radius:50%; background: var(--muted); opacity: 0.6; animation: blink 1.2s infinite; }
.typing .dot:nth-child(2) { animation-delay: 0.2s; }
.typing .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40% { opacity: 0.9; transform: translateY(-2px); }
}
.agent-entry { border:1px solid var(--border); border-radius:8px; padding:10px; background:#141927; }
.agent-entry.roleplay { border-color:#6ee7b7; background:#0e1a15; box-shadow: inset 0 0 0 1px rgba(110,231,183,0.2); }
.agent-entry .persona { font-weight: 600; margin-bottom: 6px; color: #86efac; }
.agent-head { color: var(--muted); font-size:12px; margin-bottom:6px; }
.agent-body { white-space: pre-wrap; }
.rp-line { display:block; }
.rp-speaker { font-weight:600; color:#86efac; margin-right:6px; }
.rp-text {}
.agent-body { font-size: 14px; line-height: 1.4; }
.agent-body p { margin: 4px 0; }
.agent-body ul { margin: 6px 0 6px 1.2em; padding: 0; }
.agent-body li { margin: 4px 0; }
.agent-citations { margin-top:8px; }
.agent-citations ol { margin: 4px 0 0 1.2em; padding: 0; }
.agent-citations li { margin: 4px 0; }
.citation-jump, .cite-link, .quote-jump { padding:2px 6px; border-radius:6px; border:1px solid var(--border); background:#19202a; color:var(--text); cursor:pointer; font-size:12px; }
.citation-quote { color: var(--muted); font-size:12px; margin-left:6px; }
.draft-entry { border:1px dashed var(--border); border-radius:8px; padding:8px; background:#0f1318; }
.draft-head { color: var(--muted); font-size:12px; margin-bottom:4px; }
.draft-body { white-space: pre-wrap; }
.sidechat-composer { padding:10px 12px; border-top:1px solid var(--border); }

/* Slide animations */
.viewer-left { transform: translateX(0); transition: transform 300ms ease, opacity 300ms ease; opacity: 1; }
.viewer.side-open .viewer-left { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.viewer-right { transform: translateX(100%); opacity: 0; transition: transform 300ms ease, opacity 300ms ease; }
.viewer.side-open .viewer-right { transform: translateX(0); opacity: 1; }