:root {
  --bg: #0d111b;
  --panel: #141b29;
  --line: #263147;
  --text: #edf2fb;
  --muted: #91a0b7;
  --blue: #5a91ff;
  --green: #3fd39b;
  --warn: #e5b85b;
  --danger: #ec6d78;
  --shadow: 0 18px 48px rgba(0, 0, 0, .38);
  color: var(--text);
  background: var(--bg);
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
button, input, textarea, select { font: inherit; color: var(--text); }
button { cursor: pointer; }
a { color: var(--blue); text-decoration: none; }
.app {
  display: grid;
  grid-template: 58px minmax(0, 1fr) 52px / 248px minmax(0, 1fr) 280px;
  grid-template-areas: "top top top" "left work right" "left dock right";
  height: 100vh;
}
.topbar, .top {
  grid-area: top;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 18px;
  background: #151b2a;
  border-bottom: 1px solid var(--line);
}
.controller .top { height: 74px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 760; }
.brand-mark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: linear-gradient(135deg, #6d74ff, #4c9bff); }
.brand small { padding-left: 8px; border-left: 1px solid var(--line); color: var(--muted); font-weight: 500; }
.stats { display: flex; gap: 8px; }
.stats div { display: grid; min-width: 78px; padding: 5px 9px; border-radius: 7px; background: #101725; }
.stats b { font-size: 16px; }
.stats span, .muted, .sub { color: var(--muted); font-size: 12px; }
.quiet, .btn {
  border: 1px solid var(--line);
  background: #1c273a;
  color: var(--text);
  border-radius: 8px;
  padding: 7px 10px;
}
.leftbar { grid-area: left; overflow: auto; border-right: 1px solid var(--line); background: #101725; }
.sidebar-head, .dock { display: flex; align-items: center; justify-content: space-between; padding: 12px; }
.sidebar-head strong, .dock > span { font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.icon-button { width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: #1c273a; }
.account-row, .conversation {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 10px 12px;
}
.account-row.active, .conversation.active { background: #1b2740; }
.row-top, .conversation-name, .card-head { display: flex; align-items: center; gap: 8px; }
.row-bottom, .conversation-preview, .conversation-meta { color: var(--muted); font-size: 12px; }
.badge { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 99px; background: var(--danger); color: white; font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 99px; background: var(--muted); display: inline-block; }
.dot.online { background: var(--green); }
.dot.degraded { background: var(--warn); }
.workspace { grid-area: work; position: relative; overflow: hidden; }
.rightbar { grid-area: right; border-left: 1px solid var(--line); background: #101725; padding: 16px; }
.dock { grid-area: dock; gap: 8px; border-top: 1px solid var(--line); background: #111827; overflow: auto; }
.dock-item { border: 1px solid var(--line); background: #1c273a; border-radius: 8px; padding: 6px 8px; }
.empty-state, .context-empty, .thread-empty, .empty { color: var(--muted); padding: 24px; }
.account-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 640px;
  height: 460px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.account-card.minimized { display: none; }
.account-card.full { left: 12px !important; top: 12px !important; width: calc(100% - 24px) !important; height: calc(100% - 24px) !important; }
.card-head { padding: 8px 10px; background: #182235; cursor: grab; }
.card-title { display: grid; min-width: 0; }
.card-title span, .card-count { color: var(--muted); font-size: 12px; }
.card-tools { margin-left: auto; display: flex; gap: 4px; }
.card-tools button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: #101725; }
.card-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 0; flex: 1; }
.conversation-list { overflow: auto; border-right: 1px solid var(--line); }
.thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.messages { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; padding: 8px 10px; border-radius: 12px; background: #22304a; font-family: "Segoe UI", "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }
.bubble.outbound { margin-left: auto; background: #2450b2; }
.bubble-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble img.media, .bubble video { display: block; max-width: min(280px, 100%); height: auto; margin-bottom: 6px; border-radius: 8px; }
.bubble img.sticker { display: block; width: 160px; max-width: 100%; height: auto; margin-bottom: 6px; }
.bubble .emoji { font-size: 1.4em; line-height: 1; }
.bubble .meta { display: block; margin-top: 4px; color: #c9d5ea; font-size: 11px; }
.compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); }
.compose textarea { flex: 1; min-height: 44px; max-height: 120px; resize: vertical; border-radius: 10px; border: 1px solid var(--line); background: #0f1623; padding: 8px; }
.send, .attach { border: 0; border-radius: 10px; background: var(--blue); color: white; padding: 0 12px; }
.attach { background: #1c273a; }
.compose-error { color: var(--danger); font-size: 12px; }
.context h2 { margin: 0 0 6px; }
.kv { display: grid; gap: 8px; margin-top: 14px; }
.kv div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.login { display: grid; min-height: 100vh; place-items: center; }
.login-card { display: grid; width: min(390px, calc(100vw - 32px)); gap: 14px; padding: 26px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
.login-card input { padding: 10px; border-radius: 9px; border: 1px solid #34425c; background: #0f1623; }
.login-card button { padding: 10px; border: 0; border-radius: 9px; background: var(--blue); color: white; }
.form-error { min-height: 16px; color: var(--danger); font-size: 12px; }
.controller main { padding: 18px; display: grid; gap: 16px; }
.controller main > * { min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.table-wrap { overflow: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.badge.state-online { background: #164b38; color: var(--green); }
.badge.state-degraded, .badge.state-offline { background: #4a2d22; color: var(--warn); }
.metrics { display: flex; gap: 10px; }
.metric { min-width: 110px; padding: 10px; border-radius: 10px; background: #101725; }
.metric-v { font-size: 22px; }
.logs { max-height: 70vh; overflow: auto; white-space: pre-wrap; background: #0c121d; padding: 12px; border-radius: 10px; }
.tabs { display: flex; gap: 6px; padding: 10px 18px 0; }
.tab { padding: 6px 10px; border-radius: 8px 8px 0 0; color: var(--muted); }
.tab.active { color: var(--text); background: var(--panel); }
.message-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.socket.live { color: var(--green); }
.socket { color: var(--warn); font-size: 12px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.controller .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.controller .num { font-variant-numeric: tabular-nums; }
.controller input[type="text"],
.controller input[type="file"],
.controller textarea,
.controller button.btn { min-height: 40px; }
.controller input[type="text"],
.controller textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0f1623;
}
.controller textarea { resize: vertical; }
.controller input:focus-visible,
.controller textarea:focus-visible,
.controller button:focus-visible,
.controller a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.controller button.btn.primary { background: var(--blue); border-color: transparent; color: white; }
.controller button.btn.danger { background: #3a1d24; border-color: #6a3038; color: #ffb4bc; }
.notice { margin: 0; padding: 10px 12px; border-radius: 10px; background: #143226; color: var(--green); }
.notice.bad { background: #3a1d24; color: #ffb4bc; }
.run-status { display: grid; gap: 10px; }
.run-progress {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #101725;
  border: 1px solid var(--line);
}
.run-progress[hidden] { display: none; }
.run-progress-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
.run-progress-track {
  height: 12px;
  border-radius: 99px;
  background: #0c121d;
  overflow: hidden;
  border: 1px solid var(--line);
}
.run-progress-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background-color: #1f8a5b;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 32%,
    rgba(255, 255, 255, .45) 50%,
    rgba(255, 255, 255, 0) 68%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 220% 100%;
  transition: width .45s ease;
  animation: run-sheen 1.15s linear infinite;
}
.run-progress.is-done .run-progress-fill {
  animation: none;
  background-image: none;
  background-color: var(--green);
}
@keyframes run-sheen {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .run-progress-fill { animation: none; transition: none; }
}
.upload-form, .form-grid { display: grid; gap: 12px; align-items: end; }
.upload-form { grid-template-columns: minmax(0, 1.4fr) minmax(160px, .8fr) auto; margin-top: 12px; }
.form-grid { grid-template-columns: 148px minmax(0, 1fr); align-items: center; max-width: 720px; }
.controller .upload-form label,
.controller .form-grid > label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
fieldset { border: 1px solid var(--line); border-radius: 12px; margin: 0 0 14px; padding: 12px 14px 14px; }
legend { padding: 0 6px; color: var(--text); font-size: 14px; }
.retire-form { display: grid; justify-items: start; gap: 12px; }
.check { display: flex; gap: 8px; align-items: flex-start; max-width: 62ch; }
.check input { margin-top: 2px; }
.badge.state-starting, .badge.state-queued, .badge.state-running { background: #1d3358; color: #b9d0ff; }
.badge.state-retired, .badge.state-deleted_by_user, .badge.state-done { background: #2a3142; color: var(--muted); }
.badge.state-sent { background: #164b38; color: var(--green); }
.badge.state-failed { background: #4a2d22; color: var(--warn); }
.module-nav, .log-switch, .inline-form, .stack-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stack-form { margin-top: 14px; }
.settings-form { display: grid; gap: 14px; margin-top: 14px; }
.settings-form fieldset { margin: 0; }
.settings-form > .btn { justify-self: start; }
.settings-form h3 { margin: 12px 0 8px; font-size: 15px; }
.controller select,
.controller .form-grid input[type="text"],
.controller .form-grid input[type="url"],
.controller .form-grid input[type="password"],
.controller .form-grid input[type="number"],
.controller textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #0f1623;
  color: #edf2fb;
}
.controller textarea { min-height: 88px; resize: vertical; }
.controller select {
  color-scheme: dark;
}
.controller select option,
.controller select optgroup {
  color: #edf2fb;
  background-color: #141b29;
}
.comment-entry { padding: 12px 0; border-bottom: 1px solid var(--line); }
.card h3 { margin: 16px 0 0; font-size: 16px; }
.excerpt {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0f1623;
  color: var(--muted);
  white-space: pre-wrap;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.comment-body { margin: 0; white-space: pre-wrap; }
.log-k { margin: 8px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .02em; }
@media (max-width: 1050px) {
  .app { grid-template-columns: 200px minmax(0, 1fr); grid-template-areas: "top top" "left work" "left dock"; }
  .rightbar { display: none; }
}
@media (max-width: 800px) {
  .controller .top { height: auto; flex-wrap: wrap; padding: 12px 14px; }
  .upload-form, .form-grid { grid-template-columns: 1fr; }
  .metrics { flex-wrap: wrap; }
  body:not(.controller) .app {
    grid-template: auto auto minmax(0, 1fr) auto / minmax(0, 1fr);
    grid-template-areas: "top" "left" "work" "dock";
  }
  body:not(.controller) .leftbar { max-height: 132px; }
  body:not(.controller) .account-card {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0;
  }
  body:not(.controller) .card-body { grid-template-columns: minmax(0, 1fr); }
  body:not(.controller) .conversation-list {
    max-height: 36%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}