/* Light Material Dashboard theme with a black brand sidebar and gold accents. */
:root {
  --gold: #d4af37;
  --gold-bright: #e8c65a;
  --gold-dim: #9c7f24;
  --black: #0a0a0b;
  --sidebar-edge: #26262b;
}
* { box-sizing: border-box; }
body {
  font-family: 'Roboto', system-ui, sans-serif; margin: 0;
  background: #eef0f4; color: #3c4858; display: flex; min-height: 100vh;
}

/* ---------- sidebar (black w/ photo backdrop, gold accents) ---------- */
.sidebar {
  width: 250px; flex-shrink: 0; color: #fff; padding: 24px 0;
  background:
    linear-gradient(rgba(6,6,8,.92), rgba(6,6,8,.92)),
    url('sidebar-bg.jpg') center/cover no-repeat,
    var(--black);
  box-shadow: 2px 0 10px rgba(0,0,0,.35);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.logo-wrap { text-align: center; padding: 0 16px 18px; margin-bottom: 14px;
  border-bottom: 1px solid var(--sidebar-edge); }
.logo-wrap img { max-width: 150px; width: 100%; display: block; margin: 0 auto 10px; }
.brand { font-family: 'Playfair Display', serif; font-size: 24px; letter-spacing: .1em;
  color: var(--gold); }
.brand-sub { font-size: 11px; letter-spacing: .42em; color: var(--gold-dim); margin-top: 2px; }
nav#tabs { display: flex; flex-direction: column; gap: 4px; padding: 0 12px; }
nav#tabs button {
  display: block; width: 100%; background: transparent; border: none;
  border-left: 3px solid transparent;
  color: #b9b4a9; padding: 12px 16px; font-size: 14px; letter-spacing: .05em;
  cursor: pointer; border-radius: 4px; text-align: left; text-transform: uppercase;
}
nav#tabs button:hover { background: rgba(212,175,55,.1); color: #fff; }
nav#tabs button.active {
  background: linear-gradient(90deg, rgba(212,175,55,.2), rgba(212,175,55,.05));
  border-left-color: var(--gold); color: var(--gold-bright); font-weight: 500;
}

/* ---------- content (light) ---------- */
.content { flex: 1; min-width: 0; }
.topbar { padding: 18px 26px 0; font-size: 20px; color: #3c4858; font-weight: 400; }
main { padding: 16px 26px 40px; max-width: 1400px; }
h2 { font-weight: 400; margin: 10px 0 14px; } h3 { font-weight: 500; margin: 14px 0 8px; }

/* ---------- stat cards ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin: 14px 0 22px; }
.stat {
  background: #fff; border-radius: 8px; padding: 14px 16px 12px; position: relative;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.stat .icon {
  position: absolute; top: -14px; left: 14px; width: 48px; height: 48px;
  border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: #111;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.stat .label { text-align: right; color: #999; font-size: 13px; }
.stat .value { text-align: right; font-size: 24px; color: #3c4858; margin-top: 2px; }
.stat .foot { border-top: 1px solid #eee; margin-top: 12px; padding-top: 8px;
  font-size: 12px; color: #999; }
.stat.red .value { color: #e53935; }

/* ---------- panels & tables ---------- */
.panel { background: #fff; border-radius: 8px; padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.14); margin-bottom: 20px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid #eef0f4; font-size: 14px; }
th { color: #9aa7b3; font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
tr:hover td { background: #fafbfd; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.totals td { font-weight: 700; background: #f7f4ea; }

/* ---------- pipeline board ---------- */
.board { display: flex; gap: 14px; overflow-x: auto; align-items: flex-start; padding-top: 6px; }
.col { background: #e7eaf0; border-radius: 8px; padding: 10px; min-width: 200px; flex: 1; }
.col h3 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .06em; color: #6b7a89; }
.col > small { color: #8593a2; }
.card { background: #fff; border-radius: 6px; padding: 10px; margin-bottom: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12); cursor: pointer; border-left: 3px solid var(--gold); }
.card b { display: block; } .card small { color: #8593a2; display: block; }

/* ---------- forms & bits ---------- */
form.inline { display: flex; flex-wrap: wrap; gap: 10px; background: #fff; padding: 14px;
  border-radius: 8px; margin: 12px 0; align-items: flex-end; box-shadow: 0 1px 4px rgba(0,0,0,.14); }
.panel form.inline { box-shadow: none; padding: 8px 0 0; margin: 6px 0 0; }
form.inline label { display: flex; flex-direction: column; font-size: 11px; color: #9aa7b3;
  gap: 3px; text-transform: uppercase; letter-spacing: .04em; }
input, select, textarea { padding: 7px 9px; border: 1px solid #d6dce4; border-radius: 5px;
  font-size: 14px; font-family: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); }
button.btn { background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  color: #111; border: none; padding: 9px 18px; border-radius: 6px; cursor: pointer;
  font-weight: 700; letter-spacing: .03em; box-shadow: 0 3px 10px rgba(156,127,36,.35); }
button.btn:hover { filter: brightness(1.08); }
button.btn.small { padding: 5px 10px; font-size: 12px; }
button.danger { background: linear-gradient(135deg, #c0463f, #8f2f2a); color: #fff;
  box-shadow: 0 3px 10px rgba(143,47,42,.3); }
.flag { color: #e53935; font-weight: 700; }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: #f4ecd4; color: #7a621c; font-size: 12px; }
.neg { color: #e53935; } .pos { color: #43a047; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
a.link { color: #9c7f24; cursor: pointer; text-decoration: underline; }

/* ---------- sidebar footer & login ---------- */
.side-footer { padding: 16px 12px 8px; margin-top: 12px; }
.side-card {
  border-radius: 8px; padding: 18px 14px; text-align: center; color: #fff;
  background: linear-gradient(rgba(6,10,16,.55), rgba(6,10,16,.75)),
    url('sidebar-bg.jpg') center/cover no-repeat;
  border: 1px solid var(--sidebar-edge);
}
.side-card div { font-size: 11px; letter-spacing: .3em; color: var(--gold-bright); }
.side-card a { color: #fff; font-size: 19px; font-weight: 700; text-decoration: none; }
.side-user { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 12px; font-size: 12px; color: #9b968c; }
.login-bg {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(6,10,16,.8), rgba(6,10,16,.9)),
    url('sidebar-bg.jpg') center/cover no-repeat #0b1a2b;
}
.login-card { background: #fff; border-radius: 10px; padding: 34px 38px; width: 340px;
  text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.login-card img { width: 120px; margin-bottom: 6px; }
.login-card h2 { margin: 0 0 14px; font-weight: 400; }
.login-card form { display: flex; flex-direction: column; gap: 10px; }
.login-card small { color: #9aa7b3; }

/* ---------- dashboard extras ---------- */
.hbar-row { display: grid; grid-template-columns: 130px 1fr 70px; gap: 10px;
  align-items: center; margin: 7px 0; font-size: 13px; }
.hbar-row b { text-align: right; font-variant-numeric: tabular-nums; }
.hbar { background: #eef0f4; border-radius: 4px; height: 14px; overflow: hidden; }
.hbar > div { height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold-dim)); }
.pill.pending { background: #f0f1f4; color: #9aa7b3; }
code { background: #f4f5f8; padding: 2px 5px; border-radius: 4px; font-size: 12.5px; }
pre { background: #14181d; color: #e6e6e6; padding: 12px; border-radius: 8px;
  overflow-x: auto; font-size: 13px; }

@media (max-width: 900px) {
  body { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; padding: 12px 0; }
  nav#tabs { flex-direction: row; flex-wrap: wrap; }
  .grid2 { grid-template-columns: 1fr; }
}

/* ---------- modal (import wizard + tutorial) ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(20,26,34,.55); z-index: 60;
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal { background: #fff; border-radius: 12px; width: 640px; max-width: 96vw;
  max-height: 88vh; overflow-y: auto; padding: 26px 30px; position: relative;
  box-shadow: 0 18px 60px rgba(0,0,0,.3); }
.modal h2 { margin-top: 0; }
.modal .steps { color: #9aa7b3; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 6px; }
.modal .x { position: absolute; top: 12px; right: 16px; border: none; background: none;
  font-size: 22px; color: #9aa7b3; cursor: pointer; }
.modal .big-emoji { font-size: 42px; margin: 4px 0 8px; }
.modal .actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.bigbtn { display: inline-flex; align-items: center; gap: 8px; font-size: 15px;
  padding: 12px 18px; border-radius: 8px; border: 1px solid #d6dce4; background: #fff;
  cursor: pointer; }
.bigbtn:hover { border-color: var(--gold); background: #fdfaf1; }
.dropzone { border: 2px dashed #c9d2dd; border-radius: 10px; padding: 34px;
  text-align: center; color: #8593a2; cursor: pointer; font-size: 15px; }
.dropzone.drag { border-color: var(--gold); background: #fdfaf1; }
.sheet-toolbar { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.import-preview { max-height: 260px; overflow-y: auto; border: 1px solid #eef0f4;
  border-radius: 6px; margin: 10px 0; }
.ok-badge { color: #43a047; font-weight: 700; }

/* ---------- Ellianna chat ---------- */
.chat-wrap { display: flex; flex-direction: column; height: calc(100vh - 150px);
  background: #fff; border-radius: 8px; box-shadow: 0 3px 12px rgba(20,26,34,.06); }
.chat-log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 76%; padding: 11px 15px; border-radius: 14px; font-size: 15px;
  line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; }
.msg.user { align-self: flex-end; background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  color: #1c1710; border-bottom-right-radius: 4px; }
.msg.ellianna { align-self: flex-start; background: #f1f3f7; color: #2c3644;
  border-bottom-left-radius: 4px; }
.msg.ellianna.thinking { color: #8593a2; font-style: italic; }
.msg .dl { display: inline-block; margin-top: 8px; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid #eef0f4; }
.chat-input textarea { flex: 1; resize: none; height: 46px; font-size: 15px; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 12px 10px; }
.chip { border: 1px solid #d6dce4; background: #fafbfd; border-radius: 999px;
  padding: 5px 12px; font-size: 12.5px; color: #556; cursor: pointer; }
.chip:hover { border-color: var(--gold); }
.file-tag { align-self: flex-end; font-size: 12px; color: #8593a2; }

/* ---------- P&L Job Tracker (big + friendly) ---------- */
.tracker { font-size: 18px; }
.tracker table td { font-size: inherit; padding: 12px 10px; }
.t-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 18px; align-items: center; }
.t-big { min-width: 200px; min-height: 120px; font-size: 22px; line-height: 1.5;
  border-radius: 14px; border: 2px solid #d6dce4; background: #fff; cursor: pointer;
  box-shadow: 0 3px 12px rgba(20,26,34,.08); }
.t-big:hover { border-color: var(--gold); background: #fdfaf1; }
.t-big.green { background: linear-gradient(135deg, #4caf50, #2e7d32); color: #fff; border: none; }
.t-big.green:hover { filter: brightness(1.08); }
.t-hint { color: #8593a2; font-size: 16px; }
.t-wiz input { border-width: 2px; }

/* ---------- coach bubbles ---------- */
.coach { position: fixed; z-index: 80; max-width: 320px; background: #223047; color: #fff;
  border-radius: 10px; padding: 14px 16px; font-size: 15px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.coach p { margin: 0 0 10px; }
.coach-arrow { position: absolute; top: -8px; left: 24px; width: 0; height: 0;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 8px solid #223047; }
.coach-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.coach .chip { background: #fff; }

/* ---------- floating Ask Ellianna bubble ---------- */
#ellBubble { position: fixed; left: 262px; bottom: 22px; z-index: 70;
  display: flex; align-items: center; gap: 8px; padding: 12px 18px; font-size: 16px;
  border-radius: 999px; border: none; cursor: pointer; color: #1c1710;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim));
  box-shadow: 0 8px 24px rgba(0,0,0,.25); }
/* Slides out to the right of the sidebar so the tabs stay reachable. */
#ellPanel { position: fixed; left: 250px; top: 0; bottom: 0; z-index: 71; width: 460px;
  max-width: calc(100vw - 250px); height: 100vh;
  background: #fff; box-shadow: 12px 0 48px rgba(0,0,0,.35);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-102%); transition: transform .22s ease, visibility .22s;
  visibility: hidden; pointer-events: none; }
#ellPanel.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
#ellPanel .ell-head { padding: 12px 16px; background: #223047; color: #fff;
  display: flex; justify-content: space-between; align-items: center; }
#ellPanel .ell-head button { background: none; border: none; color: #fff; font-size: 20px; cursor: pointer; }
#ellPanel .ell-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#ellPanel .chat-wrap { height: 100%; border-radius: 0; box-shadow: none; }

/* ---------- liquid-metal CTA (vanilla port of the LiquidMetalButton) ---------- */
@property --lm-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
/* button.liquid-cta matches button.btn's specificity so the old gold-gradient
   square (background, 6px radius, gold shadow) can't bleed through underneath */
.liquid-cta, button.liquid-cta { position: relative; isolation: isolate; overflow: hidden;
  border: none; border-radius: 100px; padding: 12px 26px; cursor: pointer;
  font-size: 15px; font-weight: 500; color: #ececec; letter-spacing: .03em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #202020 0%, #000 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 20px 12px rgba(0,0,0,.08),
    0 9px 9px rgba(0,0,0,.12), 0 2px 5px rgba(0,0,0,.15);
  transition: transform .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1); }
.liquid-cta::before { content: ''; position: absolute; inset: 0; z-index: -2;
  border-radius: 100px;
  background: conic-gradient(from var(--lm-angle),
    #9aa0a8, #f5f7fa 12%, #6b7178 25%, #d9dde3 40%, #83898f 55%,
    #f0f2f5 70%, #8a9099 85%, #9aa0a8);
  animation: lm-spin 7s linear infinite; }
.liquid-cta::after { content: ''; position: absolute; inset: 2px; z-index: -1;
  border-radius: 100px; background: linear-gradient(180deg, #202020 0%, #000 100%); }
.liquid-cta:hover, button.liquid-cta:hover { transform: translateY(-1px); filter: none; }
.liquid-cta:hover::before { animation-duration: 3.5s; }
.liquid-cta:active, button.liquid-cta:active { transform: translateY(1px) scale(.98);
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3); }
@keyframes lm-spin { to { --lm-angle: 360deg; } }
.lm-ripple { position: absolute; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none; transform: translate(-50%,-50%) scale(0);
  animation: lm-ripple .6s ease-out forwards; }
@keyframes lm-ripple {
  0% { transform: translate(-50%,-50%) scale(0); opacity: .6; }
  100% { transform: translate(-50%,-50%) scale(4); opacity: 0; } }

/* ---------- Ellianna agent interface: chat / calls / email panes ---------- */
.ell-tabs { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ell-tabs .btn.active { outline: 2px solid #223047; }
.em-list tr[data-uid] { cursor: pointer; }
.em-list tr[data-uid]:hover td { background: #f2f5fa; }
.em-unread td { font-weight: 700; }
.em-text { white-space: pre-wrap; font-family: inherit; background: #f7f8fa;
  padding: 12px; border-radius: 8px; margin-top: 10px; }

/* ---------- Dev Dechado (Dev Tools tab only) ---------- */
.dev-panel { background: #14181d; color: #dfe5ec; }
.dev-panel h3 { color: #dfe5ec; }
.dev-panel h3 small { color: #7d8794; font-weight: 400; margin-left: 8px; }
.dev-log { max-height: 320px; min-height: 120px; overflow-y: auto; padding: 8px 0; }
.dev-msg { background: #1e242b !important; color: #dfe5ec !important; }
.dev-panel .chat-input textarea { background: #1e242b; color: #dfe5ec; border-color: #2c343d; }

/* ---------- Geist-style buttons (vanilla port of @vercel/geistcn Button) ----------
   Variants: default / error / warning / secondary / tertiary. Sizes: small /
   (default) / large. Used in Dev Dechado's portal; the liquid-metal CTAs
   elsewhere are untouched. */
.gbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: 6px; cursor: pointer;
  font-size: 14px; font-weight: 500; line-height: 1; padding: 0 12px; height: 36px;
  transition: background .12s ease, color .12s ease, border-color .12s ease; }
.gbtn.small { height: 28px; font-size: 13px; padding: 0 8px; border-radius: 5px; }
.gbtn.large { height: 44px; font-size: 15px; padding: 0 16px; border-radius: 8px; }
.gbtn.default { background: #171717; color: #fafafa; border-color: #171717; }
.gbtn.default:hover { background: #383838; border-color: #383838; }
.gbtn.error { background: #da2f35; color: #fff; border-color: #da2f35; }
.gbtn.error:hover { background: #b7282d; }
.gbtn.warning { background: #f5a623; color: #171717; border-color: #f5a623; }
.gbtn.warning:hover { background: #d99118; }
.gbtn.secondary { background: #fff; color: #171717; border-color: #e2e2e2; }
.gbtn.secondary:hover { border-color: #cacaca; background: #f7f7f7; }
.gbtn.tertiary { background: transparent; color: #171717; border-color: transparent; }
.gbtn.tertiary:hover { background: rgba(0,0,0,.06); }
.dev-panel .gbtn.default { background: #fafafa; color: #14181d; border-color: #fafafa; }
.dev-panel .gbtn.default:hover { background: #d9dee5; border-color: #d9dee5; }
.dev-panel .gbtn.tertiary { color: #dfe5ec; }
.dev-panel .gbtn.tertiary:hover { background: rgba(255,255,255,.08); }

/* ---------- Geist-style context card + copy button (vanilla ports) ---------- */
.ctx-card { position: fixed; z-index: 9999; background: #fff; color: #171717;
  border: 1px solid #e2e2e2; border-radius: 8px; padding: 12px 14px; max-width: 320px;
  box-shadow: 0 8px 30px rgba(0,0,0,.12); font-size: 13px; line-height: 1.45;
  opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease;
  pointer-events: none; }
.ctx-card.open { opacity: 1; transform: none; pointer-events: auto; }
.ctx-card h4 { margin: 0 0 2px; font-size: 14px; }
.ctx-card .ctx-sub { color: #666; margin-bottom: 8px; }
.ctx-card .ctx-row { display: flex; justify-content: space-between; gap: 16px; padding: 2px 0; }
.ctx-card .ctx-row b { font-weight: 500; color: #666; }
[data-ctx] { text-decoration: underline dotted; text-underline-offset: 3px; cursor: default; }

.gcopy { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px;
  border: 1px solid #e2e2e2; border-radius: 5px; background: #fff; color: #171717;
  font-size: 12px; cursor: pointer; transition: border-color .12s ease, background .12s ease; }
.gcopy:hover { border-color: #cacaca; background: #f7f7f7; }
.gcopy.copied { border-color: #0cce6b; color: #0a8f4c; }
.dev-panel .gcopy { background: #1e242b; color: #dfe5ec; border-color: #2c343d; }

/* ---------- Site Scrape embed: crop the embedded app's own chrome ----------
   sitescrape renders its own 250px sidebar (same design family). Inside the
   Control Center that reads as a window inside a window — shift the iframe
   left by exactly that width so only its content area shows. */
.ss-head { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.ss-crop { overflow: hidden; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); height: calc(100vh - 130px); }
.ss-crop iframe { border: 0; display: block; background: #fff;
  width: calc(100% + 250px); height: 100%; margin-left: -250px; }
@media (max-width: 900px) {
  /* sitescrape's sidebar goes static full-width on small screens — no crop */
  .ss-crop iframe { width: 100%; margin-left: 0; }
}

/* ---------- Videos (Mux) ---------- */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.video-card { border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; background: #000; }
.video-card mux-player { width: 100%; aspect-ratio: 16/9; display: block; }
.video-processing { aspect-ratio: 16/9; display: flex; align-items: center;
  justify-content: center; color: #bbb; background: #14181d; }
.video-meta { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; background: #fff; }
mux-uploader { --uploader-background-color: transparent; display: block; min-height: 120px; }

/* ---------- Agent dock: middle pane of the three-pane workspace ----------
   Left: sidebar (manual tools). Middle: this dock, drag-resizable 20–35vw —
   the agent window (chat, progress, uploads for import). Right: content,
   edge to edge. */
#agentDock { position: relative; flex-shrink: 0; display: flex; flex-direction: column;
  background: #101318; color: #dfe5ec; border-right: 1px solid #26262b;
  height: 100vh; position: sticky; top: 0; }
#agentDock .dock-head { display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; font-weight: 500; border-bottom: 1px solid #26262b;
  color: var(--gold-bright, #e8c65a); }
#agentDock .dock-head button { background: none; border: 1px solid #2c343d; color: #7d8794;
  border-radius: 5px; cursor: pointer; padding: 2px 8px; }
#agentDock .dock-head button:hover { color: #dfe5ec; border-color: #7d8794; }
#agentDock .dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px; }
#agentDock .dock-body .chat-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#agentDock .dock-body .chat-log { flex: 1; min-height: 0; overflow-y: auto; }
#agentDock .dock-body .msg { background: #1e242b; color: #dfe5ec; }
#agentDock .dock-body .msg.user { background: #2a3442; }
#agentDock .dock-body textarea,
#agentDock .dock-body input { background: #1e242b; color: #dfe5ec; border: 1px solid #2c343d; }
#agentDock .dock-grip { position: absolute; top: 0; right: -3px; width: 6px; height: 100%;
  cursor: col-resize; z-index: 5; }
#agentDock .dock-grip:hover { background: rgba(232,198,90,.25); }
#dockReopen { position: fixed; left: 262px; bottom: 18px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid #26262b;
  background: #101318; color: var(--gold-bright, #e8c65a); font-size: 18px;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
@media (max-width: 1100px) { #agentDock, #dockReopen { display: none !important; } }