/* Grok-style: near-black ground, high-contrast type, almost no chrome. */
:root {
  --bg: #0a0a0b;
  --bg-raised: #131316;
  --bg-input: #16161a;
  --line: #26262b;
  --line-soft: #1c1c20;
  --fg: #f4f4f5;
  --fg-dim: #a1a1a8;
  --fg-faint: #6e6e76;
  --accent: #f4f4f5;
  --ok: #4ade80;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 14px;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Sidebar + content column. --accent is restamped per active bot by app.js. */
body { display: flex; overflow: hidden; }
.column { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* ---------- sidebar ---------- */
.sidebar {
  width: 244px; flex: 0 0 244px;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--line-soft);
  background: #08080a;
}
.side-head {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 18px; border-bottom: 1px solid var(--line-soft);
}
.mark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
  transition: background .2s, box-shadow .2s;
}
.side-org { font-size: 11px; color: var(--fg-faint); letter-spacing: .07em; text-transform: uppercase; }

.bot-list { flex: 1; overflow-y: auto; padding: 10px 8px; }
.bot {
  width: 100%; display: flex; gap: 10px; align-items: flex-start;
  background: none; border: 0; border-radius: 10px;
  padding: 9px 10px; margin-bottom: 2px;
  font-family: inherit; text-align: left; cursor: pointer;
  color: var(--fg-dim); position: relative;
  transition: background .14s, color .14s;
}
.bot:hover { background: var(--bg-raised); color: var(--fg); }
.bot.active { background: var(--bg-raised); color: var(--fg); }
.bot.active::before {
  content: ""; position: absolute; left: 0; top: 11px; bottom: 11px;
  width: 2px; border-radius: 2px; background: var(--bot-accent, var(--fg));
}
.bot .icon { font-size: 15px; line-height: 1.3; flex: 0 0 18px; }
.bot .meta { min-width: 0; }
.bot .n { font-size: 13.5px; font-weight: 500; display: block; }
.bot .t {
  font-size: 11.5px; color: var(--fg-faint); display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bot .empty-badge {
  font-family: var(--mono); font-size: 9.5px; color: var(--warn);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
  border-radius: 4px; padding: 0 4px; margin-top: 3px; display: inline-block;
}
.side-foot { padding: 12px 18px; border-top: 1px solid var(--line-soft); }

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 22px; border-bottom: 1px solid var(--line-soft);
  flex: 0 0 auto;
}
.crumb { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.crumb-icon { font-size: 14px; }
.crumb-name { font-weight: 600; letter-spacing: -0.01em; }
.crumb-tagline {
  font-size: 12px; color: var(--fg-faint); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar-right { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.status { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--fg-faint); font-family: var(--mono); }
.status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faint); flex: 0 0 6px; }
.status.ok .dot { background: var(--ok); }
.status.warn .dot { background: var(--warn); }
.status.err .dot { background: var(--err); }

.ghost-btn {
  background: transparent; color: var(--fg-dim);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 13px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.ghost-btn:hover:not(:disabled) { color: var(--fg); border-color: #3a3a42; background: var(--bg-raised); }
.ghost-btn:disabled { opacity: .35; cursor: not-allowed; }

.primary-btn {
  background: var(--fg); color: #0a0a0b; border: 0; border-radius: 999px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.primary-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- main ---------- */
#main { flex: 1; overflow-y: auto; min-height: 0; }

.empty {
  max-width: 720px; margin: 0 auto; padding: 16vh 24px 40px; text-align: center;
}
.empty-icon { font-size: 30px; margin-bottom: 12px; }
.empty h1 {
  font-size: 34px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 14px;
}
.empty .sub { color: var(--fg-dim); font-size: 14px; margin: 0 auto 30px; max-width: 520px; }
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.scope {
  margin: 26px auto 0; font-family: var(--mono); font-size: 11px;
  color: var(--fg-faint); letter-spacing: .02em;
}
.chip {
  background: var(--bg-raised); color: var(--fg-dim);
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 8px 15px; font-size: 13px; font-family: inherit; cursor: pointer;
  text-align: left; transition: color .15s, border-color .15s;
}
.chip:hover { color: var(--fg); border-color: var(--line); }

/* ---------- thread ---------- */
.thread { max-width: 760px; margin: 0 auto; padding: 32px 24px 24px; }
.turn { margin-bottom: 30px; }

.turn.user { display: flex; justify-content: flex-end; }
.turn.user .body {
  background: var(--bg-input); border: 1px solid var(--line-soft);
  border-radius: var(--radius) var(--radius) 4px var(--radius);
  padding: 11px 15px; max-width: 78%; white-space: pre-wrap;
}

.turn.agent .body { max-width: 100%; }
.turn.agent .body > *:first-child { margin-top: 0; }
.turn.agent .body > *:last-child { margin-bottom: 0; }
.turn.agent h3 { font-size: 15px; font-weight: 600; margin: 22px 0 8px; }
.turn.agent p { margin: 0 0 14px; }
.turn.agent ul, .turn.agent ol { margin: 0 0 14px; padding-left: 22px; }
.turn.agent li { margin-bottom: 5px; }
.turn.agent code {
  font-family: var(--mono); font-size: .88em;
  background: var(--bg-input); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 1px 5px;
}
.turn.agent pre {
  background: var(--bg-input); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 13px 15px; overflow-x: auto; font-size: 13px;
}
.turn.agent pre code { background: none; border: 0; padding: 0; }
.turn.agent a { color: var(--fg); text-decoration: underline; text-decoration-color: #4a4a55; }
.turn.agent a:hover { text-decoration-color: var(--fg); }
.turn.agent strong { font-weight: 600; }
.turn.agent .flag {
  display: inline-block; font-family: var(--mono); font-size: 12px;
  color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border-radius: 5px; padding: 0 6px;
}

.stage {
  display: flex; align-items: center; gap: 9px;
  color: var(--fg-faint); font-size: 13px; font-family: var(--mono);
}
.stage .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--fg-dim);
  animation: pulse 1.1s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }

.cites { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.cites .label { font-size: 11px; color: var(--fg-faint); font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em; align-self: center; margin-right: 3px; }
.cite {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--fg-dim); text-decoration: none;
  background: var(--bg-raised); border: 1px solid var(--line-soft);
  border-radius: 7px; padding: 4px 9px; max-width: 320px;
}
.cite:hover { color: var(--fg); border-color: var(--line); }
.cite .src { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); text-transform: uppercase; }
.cite .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.error {
  color: var(--err); font-size: 13px; font-family: var(--mono);
  border: 1px solid color-mix(in srgb, var(--err) 35%, transparent);
  background: color-mix(in srgb, var(--err) 8%, transparent);
  border-radius: 9px; padding: 10px 13px;
}

/* ---------- composer ---------- */
.composer-wrap {
  position: sticky; bottom: 0;
  background: linear-gradient(to top, var(--bg) 55%, transparent);
  padding: 12px 24px 14px;
}
.composer {
  max-width: 760px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 9px;
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: 22px; padding: 9px 9px 9px 17px;
  transition: border-color .15s;
}
.composer:focus-within { border-color: #43434e; }
.composer textarea {
  flex: 1; background: none; border: 0; outline: none; resize: none;
  color: var(--fg); font-family: inherit; font-size: 15px; line-height: 1.55;
  max-height: 200px; padding: 5px 0;
}
.composer textarea::placeholder { color: var(--fg-faint); }
.send {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex: 0 0 34px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: var(--fg); color: #0a0a0b;
  transition: opacity .15s;
}
.send:disabled { opacity: .3; cursor: not-allowed; }
.disclaimer {
  max-width: 760px; margin: 9px auto 0; text-align: center;
  font-size: 11px; color: var(--fg-faint);
}

/* ---------- brief modal ---------- */
.modal {
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg-raised); color: var(--fg);
  width: min(820px, 92vw); padding: 0; max-height: 82vh;
}
.modal::backdrop { background: rgba(0,0,0,.65); backdrop-filter: blur(3px); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 20px; border-bottom: 1px solid var(--line-soft);
}
.modal-head h2 { margin: 0; font-size: 15px; font-weight: 600; }
.modal-controls {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px; color: var(--fg-dim);
}
.modal-controls label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.brief-out {
  margin: 0; padding: 18px 20px; overflow: auto; max-height: 52vh;
  font-family: var(--mono); font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; color: var(--fg-dim);
}

@media (max-width: 640px) {
  .empty { padding-top: 10vh; }
  .empty-icon { font-size: 24px; }
  .empty h1 { font-size: 26px; }
  .brand-org { display: none; }
}

/* Active bot accent applied to focus affordances. */
.composer:focus-within { border-color: color-mix(in srgb, var(--bot-accent, #43434e) 55%, var(--line)); }
.send { background: var(--bot-accent, var(--fg)); }
.turn.agent .body h3 { color: var(--fg); }

@media (max-width: 860px) {
  body { flex-direction: column; overflow: auto; }
  .sidebar {
    width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center;
    border-right: 0; border-bottom: 1px solid var(--line-soft);
    overflow-x: auto; gap: 6px; padding: 8px 10px;
  }
  .side-head, .side-foot { border: 0; padding: 0 8px; flex: 0 0 auto; }
  .side-org { display: none; }
  .bot-list { display: flex; flex: 1; padding: 0; gap: 6px; }
  .bot { width: auto; flex: 0 0 auto; padding: 7px 12px; border: 1px solid var(--line-soft); }
  .bot .t, .bot .empty-badge { display: none; }
  .bot.active::before { display: none; }
  .bot.active { border-color: var(--bot-accent, var(--fg)); }
  .crumb-tagline { display: none; }
}

/* ---------- idea log ---------- */
.modal-head-right { display: flex; align-items: center; gap: 14px; }
.log-scope { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-dim); cursor: pointer; }
.log-body { padding: 8px 0; overflow-y: auto; max-height: 64vh; }

.log-empty { padding: 26px 20px; color: var(--fg-faint); font-size: 13px; }
.log-sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 20px; font-size: 12px; color: var(--fg-faint);
  font-family: var(--mono); border-bottom: 1px solid var(--line-soft);
}

.log-entry { border-bottom: 1px solid var(--line-soft); }
.log-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  width: 100%; background: none; border: 0; cursor: pointer;
  padding: 13px 20px; font-family: inherit; text-align: left; color: var(--fg-dim);
  transition: background .14s;
}
.log-head:hover { background: var(--bg-input); color: var(--fg); }
.log-bot {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-family: var(--mono);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px;
}
.log-date { font-size: 12px; font-family: var(--mono); }
.log-mode { font-size: 10.5px; font-family: var(--mono); color: var(--fg-faint); text-transform: uppercase; letter-spacing: .05em; }
.log-count { font-size: 11.5px; color: var(--fg-faint); margin-left: auto; font-family: var(--mono); }

.log-ideas { margin: 0; padding: 0 20px 14px 20px; list-style: none; }
.log-ideas li {
  font-size: 13px; color: var(--fg); padding: 3px 0 3px 15px; position: relative;
}
.log-ideas li::before {
  content: ""; position: absolute; left: 2px; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--bot-accent, var(--fg-faint));
}
.log-full {
  margin: 0 20px 16px; padding: 14px 16px;
  background: var(--bg); border: 1px solid var(--line-soft); border-radius: 10px;
  font-family: var(--mono); font-size: 12px; line-height: 1.65;
  white-space: pre-wrap; color: var(--fg-dim); max-height: 320px; overflow-y: auto;
}
.log-meta { padding: 0 20px 14px; font-size: 11px; font-family: var(--mono); color: var(--fg-faint); }

.brief-modes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.brief-modes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ---------- context panel ---------- */
.context-form { padding: 16px 20px; border-bottom: 1px solid var(--line-soft); }
.ctx-row { display: flex; gap: 12px; margin-bottom: 11px; flex-wrap: wrap; }
.ctx-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ctx-field.grow { flex: 1; }
.ctx-field > span {
  font-size: 10.5px; font-family: var(--mono); color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.ctx-field input, .ctx-field select, .ctx-field textarea {
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--line); border-radius: 9px;
  padding: 8px 11px; font-family: inherit; font-size: 13.5px; outline: none;
  min-width: 0; resize: vertical;
}
.ctx-field textarea { font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.ctx-field input:focus, .ctx-field select:focus, .ctx-field textarea:focus {
  border-color: color-mix(in srgb, var(--bot-accent, #43434e) 55%, var(--line));
}
.ctx-actions { display: flex; align-items: center; gap: 12px; margin-top: 13px; }
.ctx-msg { font-size: 12px; font-family: var(--mono); color: var(--fg-faint); }
.ctx-msg.ok { color: var(--ok); }
.ctx-msg.err { color: var(--err); }

.context-body { padding: 4px 0 10px; overflow-y: auto; max-height: 38vh; }
.ctx-group-head {
  padding: 12px 20px 6px; font-size: 10.5px; font-family: var(--mono);
  color: var(--fg-faint); text-transform: uppercase; letter-spacing: .06em;
}
.ctx-doc {
  display: flex; align-items: center; gap: 11px;
  padding: 8px 20px; font-size: 13px;
}
.ctx-doc + .ctx-doc { border-top: 1px solid var(--line-soft); }
.ctx-doc .tag {
  font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; flex: 0 0 auto;
}
.ctx-doc .name {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--fg-dim);
}
.ctx-doc a.name:hover { color: var(--fg); }
.ctx-doc .n { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); flex: 0 0 auto; }
.ctx-del {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg-faint); font-family: var(--mono); font-size: 11px;
  padding: 2px 7px; cursor: pointer; flex: 0 0 auto;
}
.ctx-del:hover { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.ctx-empty { padding: 10px 20px 14px; font-size: 12.5px; color: var(--fg-faint); }

/* ---------- login ---------- */
.login-body {
  display: grid; place-items: center; min-height: 100vh;
  overflow: auto; padding: 24px;
}
.login-card {
  width: min(380px, 100%);
  background: var(--bg-raised); border: 1px solid var(--line-soft);
  border-radius: 16px; padding: 26px 26px 22px;
}
.login-head { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.login-head h1 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.login-org {
  margin: 2px 0 0; font-size: 11px; font-family: var(--mono);
  color: var(--fg-faint); letter-spacing: .04em;
}
.login-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.login-field > span {
  font-size: 10.5px; font-family: var(--mono); color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: .06em;
}
.login-field input {
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; outline: none;
}
.login-field input:focus { border-color: #43434e; }
.login-btn { width: 100%; padding: 10px 16px; margin-top: 4px; }
.login-msg {
  margin: 13px 0 0; min-height: 1.2em; font-size: 12px;
  font-family: var(--mono); color: var(--fg-faint); line-height: 1.5;
  overflow-wrap: anywhere;
}
.login-msg.err { color: var(--err); }
.login-msg.warn { color: var(--warn); }

.side-user { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.who {
  flex: 1; min-width: 0; font-size: 11.5px; font-family: var(--mono);
  color: var(--fg-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ghost-btn.tiny { padding: 3px 9px; font-size: 11.5px; }
@media (max-width: 860px) { .side-user { margin-top: 0; } }

/* ---------- agent tool steps ---------- */
.steps { margin-bottom: 14px; display: flex; flex-direction: column; gap: 5px; }
.step {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-faint);
  padding: 3px 9px; border-left: 2px solid var(--line);
}
.step.running { border-left-color: var(--bot-accent, var(--fg-dim)); color: var(--fg-dim); }
.step.ok { border-left-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.step.failed { border-left-color: color-mix(in srgb, var(--err) 60%, transparent); color: var(--err); }
.step .tname { color: var(--fg-dim); }
.step.writes .tname::after { content: " ✎"; color: var(--warn); }
.step .targ { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .75; }

/* ---------- right panel: routines & tasks ---------- */
.rightpanel {
  width: 306px; flex: 0 0 306px;
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line-soft); background: #08080a;
}
.rightpanel.collapsed { display: none; }

.rp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 13px 14px 13px 16px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto;
}
.rp-title { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.rp-head-actions { display: flex; align-items: center; gap: 10px; }
.rp-scope { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-faint); cursor: pointer; }

.icon-btn {
  background: none; border: 0; cursor: pointer; color: var(--fg-faint);
  font-size: 15px; line-height: 1; padding: 3px 5px; border-radius: 6px;
}
.icon-btn:hover { color: var(--fg); background: var(--bg-raised); }

.rp-open {
  position: fixed; right: 12px; top: 62px; z-index: 6;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  color: var(--fg-dim); font-size: 14px; line-height: 1; padding: 6px 9px; cursor: pointer;
}
.rp-open:hover { color: var(--fg); border-color: #3a3a42; }

.rp-body { flex: 1; overflow-y: auto; min-height: 0; padding-bottom: 18px; }
.rp-section { padding: 14px 16px 4px; }
.rp-section + .rp-section { border-top: 1px solid var(--line-soft); margin-top: 6px; }
.rp-section-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; font-family: var(--mono); color: var(--fg-faint);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 8px;
}
.rp-add {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg-dim); font-family: var(--mono); font-size: 10.5px;
  padding: 2px 7px; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.rp-add:hover { color: var(--fg); border-color: #3a3a42; }
.rp-hint { margin: 0 0 10px; font-size: 11.5px; color: var(--fg-faint); line-height: 1.5; }

/* inline create forms */
.rp-form {
  display: flex; flex-direction: column; gap: 7px;
  background: var(--bg-input); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px; margin-bottom: 11px;
}
.rp-form input, .rp-form textarea, .rp-form select {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-soft); border-radius: 7px;
  padding: 6px 8px; font-family: inherit; font-size: 12.5px; outline: none;
  min-width: 0; resize: vertical;
}
.rp-form textarea { font-family: var(--mono); font-size: 11.5px; line-height: 1.55; }
.rp-form #rp-r-cron { font-family: var(--mono); }
.rp-form input:focus, .rp-form textarea:focus, .rp-form select:focus {
  border-color: color-mix(in srgb, var(--bot-accent, #43434e) 55%, var(--line));
}
.rp-form-row { display: flex; gap: 7px; }
.rp-form-row > * { flex: 1; }
.rp-form-actions { display: flex; align-items: center; gap: 7px; }
.tiny-btn { padding: 5px 11px; font-size: 12px; }
.rp-msg { margin: 2px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint); line-height: 1.45; }
.rp-msg.ok { color: var(--ok); }
.rp-msg.err { color: var(--err); }

/* item cards */
.rp-list { display: flex; flex-direction: column; gap: 7px; }
.rp-item {
  border: 1px solid var(--line-soft); border-radius: 10px;
  padding: 9px 10px; background: var(--bg-raised);
  border-left: 2px solid var(--bot-accent, var(--line));
}
.rp-item .rp-item-top { display: flex; align-items: baseline; gap: 7px; }
.rp-item .rp-name {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-item.done .rp-name { color: var(--fg-faint); text-decoration: line-through; }
.rp-item .rp-meta {
  margin-top: 4px; font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
  line-height: 1.5; overflow-wrap: anywhere;
}
.rp-item .rp-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.rp-btn {
  background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--fg-faint); font-family: var(--mono); font-size: 10.5px;
  padding: 2px 7px; cursor: pointer;
}
.rp-btn:hover:not(:disabled) { color: var(--fg); border-color: #3a3a42; }
.rp-btn.danger:hover:not(:disabled) { color: var(--err); border-color: color-mix(in srgb, var(--err) 45%, transparent); }
.rp-btn:disabled { opacity: .4; cursor: not-allowed; }

.pill {
  font-family: var(--mono); font-size: 9.5px; padding: 1px 6px;
  border: 1px solid var(--line); border-radius: 4px; color: var(--fg-faint); flex: 0 0 auto;
}
.pill.on { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.pill.off { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rp-empty { font-size: 11.5px; color: var(--fg-faint); line-height: 1.5; }

@media (max-width: 1180px) {
  .rightpanel { width: 268px; flex-basis: 268px; }
}
@media (max-width: 980px) {
  /* Below this the chat column needs the room; the panel is opt-in only. */
  .rightpanel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 8; width: 300px; flex-basis: auto;
                box-shadow: -18px 0 40px rgba(0,0,0,.5); }
}

/* ---------- schedule builder ---------- */
.rp-sched {
  display: flex; flex-direction: column; gap: 7px;
  padding: 8px; border: 1px dashed var(--line); border-radius: 8px;
}
.rp-days { display: flex; gap: 4px; }
.rp-day {
  flex: 1; padding: 5px 0; text-align: center; cursor: pointer;
  background: var(--bg); color: var(--fg-faint);
  border: 1px solid var(--line-soft); border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px;
}
.rp-day:hover { color: var(--fg-dim); }
.rp-day.on {
  color: #0a0a0b; background: var(--bot-accent, var(--fg));
  border-color: var(--bot-accent, var(--fg));
}
.rp-sched-preview {
  margin: 1px 0 0; font-size: 11.5px; color: var(--fg-dim); line-height: 1.45;
}
.rp-sched-preview .cronish {
  display: block; font-family: var(--mono); font-size: 10px; color: var(--fg-faint); margin-top: 2px;
}
.rp-sched-preview.bad { color: var(--err); }

/* ---------- conversation history ---------- */
.side-chats {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  border-top: 1px solid var(--line-soft); padding: 10px 8px 4px;
}
.side-chats-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 7px; font-size: 10px; font-family: var(--mono);
  color: var(--fg-faint); text-transform: uppercase; letter-spacing: .07em;
}
.chat-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.chat-item {
  display: flex; align-items: center; gap: 6px;
  border-radius: 8px; padding: 6px 8px; cursor: pointer;
  color: var(--fg-faint); background: none; border: 0;
  font-family: inherit; text-align: left; width: 100%;
}
.chat-item:hover { background: var(--bg-raised); color: var(--fg-dim); }
.chat-item.active { background: var(--bg-raised); color: var(--fg); }
.chat-item.active::before {
  content: ""; width: 2px; align-self: stretch; border-radius: 2px;
  background: var(--bot-accent, var(--fg)); margin-right: 2px;
}
.chat-item .ct {
  flex: 1; min-width: 0; font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chat-item .cn { font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); flex: 0 0 auto; }
.chat-del {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  color: var(--fg-faint); font-size: 13px; line-height: 1; padding: 0 2px;
  opacity: 0; transition: opacity .12s;
}
.chat-item:hover .chat-del, .chat-item.active .chat-del { opacity: .6; }
.chat-del:hover { opacity: 1; color: var(--err); }
.chat-empty { padding: 4px 8px; font-size: 11.5px; color: var(--fg-faint); line-height: 1.45; }

@media (max-width: 860px) {
  /* The sidebar is a horizontal strip here; history moves into the panel row. */
  .side-chats { display: none; }
}