:root {
  --page: #f5f7fb;
  --panel: #ffffff;
  --line: #dce4ef;
  --line-soft: #edf1f6;
  --ink: #172033;
  --muted: #667085;
  --blue: #1769e0;
  --blue-soft: #eaf2ff;
  --green: #0f7a55;
  --green-soft: #e9f6ee;
  --amber: #9a5a00;
  --amber-soft: #fff4df;
  --red: #b42318;
  --red-soft: #fff0ef;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--page);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .52; }

.promo-app {
  display: grid;
  grid-template-columns: 278px minmax(0, 1fr);
  min-height: 100vh;
}

.product-rail {
  position: sticky;
  top: 0;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
  height: 100vh;
  min-width: 0;
  overflow: hidden;
  padding: 18px 14px;
  border-right: 1px solid var(--line);
  background: var(--panel);
}

.rail-collapse {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--panel);
  font-size: 23px;
  line-height: 1;
}
.rail-collapse:hover { border-color: #93bdf5; color: var(--blue); }
.promo-app.rail-collapsed { grid-template-columns: 58px 46px minmax(0, 1fr); }
.product-rail.rail-collapsed {
  display: block;
  padding: 12px 7px;
}
.product-rail.rail-collapsed > *:not(.rail-collapse) { display: none; }
.product-rail.rail-collapsed .rail-collapse {
  position: static;
  margin: 0 auto;
}
.promo-app.rail-collapsed .composer { left: 104px; }

.agent-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 22px;
}

.agent-brand img, .agent-avatar img {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  object-fit: cover;
}

.agent-brand strong, .agent-brand span { display: block; }
.agent-brand strong { font-size: 15px; }
.agent-brand span { margin-top: 3px; color: var(--muted); font-size: 12px; }

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  padding: 0 6px;
  color: #344054;
  font-size: 13px;
  font-weight: 700;
}

.icon-control {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #344054;
  background: #fff;
  font-size: 19px;
  line-height: 1;
}

.search-box { display: block; padding: 8px 6px; }
.search-box span { display: none; }
.search-box input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: none;
  color: var(--ink);
  background: #fafcff;
  font-size: 12px;
}
.search-box input:focus { border-color: #9abff5; background: #fff; }

.scope-switch { min-width: 0; padding: 4px 2px 6px; }
.scope-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  color: inherit;
  background: transparent;
}
.scope-row:hover { background: #f7faff; }
.scope-row.is-active { border-color: #9dc5ff; background: var(--blue-soft); }
.scope-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #d6e0ed; border-radius: 6px; color: #315b91; background: #edf5ff; font-size: 11px; font-weight: 700; }
.scope-row b, .scope-row small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scope-row b { font-size: 12px; }
.scope-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.scope-divider { display: flex; align-items: center; gap: 7px; margin: 8px 6px 2px; color: var(--muted); font-size: 10px; }
.scope-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.product-list {
  min-height: 110px;
  min-width: 0;
  overflow: auto;
  padding: 4px 2px 8px;
  scrollbar-color: #2b7fc5 #20242a;
  scrollbar-width: thin;
}
.product-list::-webkit-scrollbar { width: 8px; height: 8px; }
.product-list::-webkit-scrollbar-track { background: #20242a; }
.product-list::-webkit-scrollbar-thumb { border: 2px solid #20242a; border-radius: 6px; background: #2b7fc5; }
.product-list::-webkit-scrollbar-thumb:hover { background: #4a9ad7; }

.product-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 9px;
  width: 100%;
  margin: 2px 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 7px;
  text-align: left;
  color: inherit;
  background: transparent;
}
.product-row:hover { background: #f7faff; }
.product-row.is-active { border-color: #9dc5ff; background: var(--blue-soft); }

.product-thumb {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d6e0ed;
  border-radius: 7px;
  color: #315b91;
  background: #edf5ff;
  font-size: 13px;
  font-weight: 700;
}
.product-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.product-row b, .product-row span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.product-row b { font-size: 12px; }
.product-row span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.rail-count { margin: 0; padding: 7px 6px 14px; color: var(--muted); font-size: 12px; }

.agent-stage { min-width: 0; padding: 18px clamp(18px, 4vw, 64px) 138px; }
.stage-head { display: flex; align-items: center; justify-content: space-between; min-height: 34px; }
.stage-head-actions { display: flex; align-items: center; gap: 12px; }
.back-link { color: var(--muted); font-size: 13px; text-decoration: none; }
.back-link:hover { color: #76bdf0; }
.auth-link { padding: 5px 9px; border: 1px solid #3e94d5; border-radius: 5px; color: #f8fbff; background: #267bbb; font-size: 12px; text-decoration: none; }
.auth-link:hover { border-color: #67bdf4; background: #338bd0; }
.agent-state { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.agent-state span { width: 8px; height: 8px; border-radius: 50%; background: #c8d2df; }
.agent-state.is-ready span { background: var(--green); }
.agent-state.is-error span { background: var(--red); }

.agent-intro { display: flex; align-items: center; gap: 14px; max-width: 940px; margin: 52px auto 22px; }
.agent-avatar { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border: 1px solid #cddaf0; border-radius: 8px; background: #fff; }
.agent-avatar img { width: 38px; height: 38px; }
.agent-intro h1 { margin: 2px 0 0; font-size: 24px; line-height: 1.25; }
.agent-intro p { margin: 6px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.agent-intro .eyebrow { color: var(--blue); font-size: 12px; font-weight: 700; }

.conversation-surface { max-width: 940px; min-height: 0; margin: 0 auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 14px 28px rgba(26, 42, 69, .07); }
.conversation-stream { display: grid; align-content: start; gap: 12px; min-height: 244px; max-height: 470px; overflow: auto; padding: 22px; }
.message { max-width: min(740px, 92%); padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fbfcfe; }
.message.user { justify-self: end; border-color: #b7d3ff; background: var(--blue-soft); }
.message.system { border-style: dashed; color: #475467; background: #fff; }
.message header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.message b { color: #344054; font-size: 12px; }
.message p { margin: 7px 0 0; color: #344054; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.analysis-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.analysis-block { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.analysis-block.wide { grid-column: 1 / -1; }
.analysis-block span { display: block; color: var(--muted); font-size: 11px; }
.analysis-block strong { display: block; margin-top: 4px; color: #1d2939; font-size: 14px; line-height: 1.45; }
.analysis-block ul { display: grid; gap: 4px; margin: 7px 0 0; padding-left: 18px; color: #475467; font-size: 12px; line-height: 1.5; }
.analysis-tasks { display: grid; gap: 6px; margin-top: 8px; }
.analysis-task { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.analysis-task:first-child { border-top: 0; }
.analysis-task b, .analysis-task span { display: block; }
.analysis-task span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.task-inline-state { flex: 0 0 auto; color: var(--green); font-size: 11px; font-style: normal; }

.quick-prompts { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 22px 14px; }
.quick-prompts button, .ghost-button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; color: #475467; background: #fff; font-size: 12px; }
.quick-prompts button:hover, .ghost-button:hover { border-color: #a7c8f8; color: var(--blue); }
.composer { position: fixed; right: 0; bottom: 0; left: 336px; z-index: 10; padding: 10px max(18px, 4vw) calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: rgba(29, 32, 37, .97); box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); }
.composer-inner { width: min(940px, 100%); margin: 0 auto; }
.composer-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.composer textarea { width: 100%; min-height: 48px; max-height: 120px; resize: vertical; padding: 11px; border: 1px solid var(--line); border-radius: 7px; outline: none; color: var(--ink); background: #fff; font-size: 13px; line-height: 1.45; }
.composer textarea:focus { border-color: #93bdf5; }
.composer button, .primary-button { align-self: end; min-height: 42px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 7px; color: #fff; background: var(--blue); font-weight: 700; }

.task-board { max-width: 940px; margin: 18px auto 0; border-top: 1px solid var(--line); }
.task-board > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; }
.task-board header b, .task-board header span { display: block; }
.task-board header b { font-size: 14px; }
.task-board header span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.task-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.task-list { border-top: 1px solid var(--line-soft); }
.task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line-soft); }
.task-row b, .task-row span { display: block; }
.task-row b { font-size: 13px; }
.task-row span { margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.task-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.task-status { align-self: center; padding: 4px 8px; border-radius: 999px; color: var(--amber); background: var(--amber-soft); font-size: 11px; white-space: nowrap; }
.task-status.proposal, .task-status.approved_waiting_executor { color: #7250ab; background: #f3edff; }
.task-window, .task-cancel { min-height: 27px; padding: 0 8px; border: 1px solid #4d5864; border-radius: 5px; color: #e7edf3; background: #252a31; font-size: 11px; white-space: nowrap; }
.task-window:hover { border-color: #64aee4; color: #fff; background: #303a45; }
.task-cancel:hover { border-color: #9d5960; color: #ffc0c2; background: #3a2528; }
.empty-row { padding: 22px 2px; color: var(--muted); font-size: 13px; }

.product-dialog { width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); box-shadow: 0 20px 50px rgba(16, 24, 40, .2); }
.product-dialog::backdrop { background: rgba(16, 24, 40, .24); }
.product-dialog form { display: grid; gap: 13px; padding: 18px; }
.product-dialog header, .product-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.product-dialog header b, .product-dialog header span { display: block; }
.product-dialog header b { font-size: 16px; }
.product-dialog header span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.product-dialog label { display: grid; gap: 6px; color: #344054; font-size: 12px; font-weight: 700; }
.product-dialog input { width: 100%; height: 37px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; outline: none; color: var(--ink); font-size: 13px; font-weight: 400; }
.product-dialog input:focus { border-color: #93bdf5; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.product-dialog footer { padding-top: 5px; justify-content: flex-end; }

@media (max-width: 820px) {
  .promo-app { grid-template-columns: 1fr; }
  .product-rail { position: static; height: auto; overflow: visible; grid-template-rows: auto auto auto auto auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .product-list { display: flex; min-height: 0; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
  .product-row { flex: 0 0 210px; }
  .agent-stage { padding: 14px 16px 138px; }
  .agent-intro { margin-top: 30px; }
  .task-board > header { align-items: flex-start; flex-direction: column; }
  .task-actions { justify-content: flex-start; }
}

@media (max-width: 560px) {
  .agent-intro h1 { font-size: 20px; }
  .conversation-stream { padding: 14px; }
  .composer { left: 52px; padding-right: 16px; padding-left: 16px; }
  .quick-prompts { padding: 0 0 8px; }
  .composer-fields { grid-template-columns: minmax(0, 1fr) auto; }
  .composer button { min-width: 58px; }
  .analysis-grid { grid-template-columns: 1fr; }
  .analysis-block.wide { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
}

.rail-head-actions { display: flex; align-items: center; gap: 5px; }
.product-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: 3px; }
.product-item .product-row { min-width: 0; }
.product-delete { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 4px; color: var(--muted); background: transparent; opacity: 0; }
.product-item:hover .product-delete, .product-delete:focus-visible { opacity: 1; }
.product-delete:hover { color: #ff9292; background: #442a2d; }

.data-hub { max-width: 940px; margin: 24px auto 0; border-top: 1px solid var(--line); }
.data-hub-head, .data-hub-body, .trend-panel > header, .report-panel > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.data-hub-head { padding: 14px 0; }
.data-hub-head b, .data-hub-head span { display: block; }
.data-hub-head b { font-size: 14px; }
.data-hub-head span, .trend-panel > header span, .report-panel > header span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.metric-item { min-width: 0; padding: 12px 10px; border-right: 1px solid var(--line-soft); }
.metric-item:last-child { border-right: 0; }
.metric-item span, .metric-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metric-item span { color: var(--muted); font-size: 11px; }
.metric-item strong { margin-top: 5px; color: #f0f4f8; font-size: 17px; font-weight: 700; }
.data-alerts { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); color: #f2c46d; font-size: 11px; }
.data-alerts strong { color: #ffd98a; font-size: 12px; }
.data-alerts span { padding: 3px 7px; border: 1px solid #6a5734; border-radius: 4px; background: #30291f; }
.data-hub-body { align-items: stretch; gap: 16px; padding-top: 16px; }
.trend-panel, .report-panel { min-width: 0; flex: 1 1 0; }
.trend-panel > header, .report-panel > header { justify-content: flex-start; padding-bottom: 9px; }
.trend-panel > header b, .report-panel > header b { font-size: 13px; }
.trend-panel > header span, .report-panel > header span { margin-top: 0; }
.chart-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.chart-toolbar > div { display: flex; gap: 3px; }
.chart-switch { padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; color: var(--muted); background: transparent; font-size: 11px; }
.chart-switch:hover, .chart-switch.is-active { border-color: #3e94d5; color: #e7f5ff; background: #20384c; }
.bar-chart { display: flex; align-items: end; gap: 5px; height: 150px; padding: 12px 4px 0; border-bottom: 1px solid #46505b; overflow-x: auto; }
.bar-point { display: grid; min-width: 24px; height: 100%; grid-template-rows: 20px minmax(12px, 1fr) 18px; align-items: end; text-align: center; }
.bar-value { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.bar { width: 14px; min-height: 4px; justify-self: center; border-radius: 3px 3px 0 0; background: #2b7fc5; }
.bar-point span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.chart-empty { display: grid; min-height: 150px; place-items: center; padding: 20px; border: 1px dashed #46505b; border-radius: 5px; color: var(--muted); font-size: 12px; text-align: center; }
.report-list { display: grid; gap: 0; border-top: 1px solid var(--line-soft); }
.report-row, .trash-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line-soft); }
.report-row b, .report-row span, .trash-row b, .trash-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-row b, .trash-row b { color: #e7edf3; font-size: 12px; }
.report-row span, .trash-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.report-row time { flex: 0 0 auto; color: var(--muted); font-size: 10px; }
.trash-dialog > section { padding: 18px; }
.trash-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }
.trash-dialog header b, .trash-dialog header span { display: block; }
.trash-dialog header b { font-size: 16px; }
.trash-dialog header span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.trash-list { max-height: 360px; overflow: auto; }
.trash-row > span { min-width: 0; }
.report-dialog { max-height: calc(100vh - 32px); overflow: auto; }
.report-dialog select, .report-dialog textarea { width: 100%; border: 1px solid #46505b; border-radius: 5px; outline: none; color: var(--ink); background: #1e2227; }
.report-dialog select { height: 37px; padding: 0 10px; }
.report-dialog textarea { padding: 9px 10px; resize: vertical; font-size: 12px; line-height: 1.45; }
.report-dialog input[type="file"] { padding: 8px; }

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-item:nth-child(3) { border-right: 0; }
  .data-hub-body { flex-direction: column; }
}

@media (max-width: 560px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-item:nth-child(3) { border-right: 1px solid var(--line-soft); }
  .metric-item:nth-child(even) { border-right: 0; }
  .data-hub-head { align-items: flex-start; }
  .data-hub-head .ghost-button { flex: 0 0 auto; }
  .bar-chart { gap: 3px; }
}

/* Keep this agent visually aligned with the site's dark design workbench. */
:root {
  --page: #17191d;
  --panel: #20242a;
  --line: #3a414a;
  --line-soft: #414a55;
  --ink: #eef2f5;
  --muted: #a9b1bb;
  --blue: #2b7fc5;
  --blue-soft: #20384c;
  --green: #5dc28d;
  --green-soft: #1d3a2d;
  --amber: #e6b35d;
  --amber-soft: #3a3020;
}

body {
  background: #17191d;
  color: #eef2f5;
}

.promo-app {
  grid-template-columns: 58px 278px minmax(0, 1fr);
  background: #17191d;
}

.site-rail {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  width: 58px;
  height: 100vh;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 8px;
  border-right: 1px solid #3a414a;
  background: #1d2025;
}

.site-logo {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  margin-bottom: 8px;
  border-radius: 5px;
  color: #f8fbff;
  background: #1976bb;
  font-size: 18px;
  font-weight: 800;
  text-decoration: none;
}

.site-nav-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid #46515d;
  border-radius: 6px;
  color: #a9b1bb;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  text-decoration: none;
}

.site-nav-icon:hover,
.site-nav-icon:focus-visible,
.site-nav-icon.is-active {
  border-color: #3c96dc;
  color: #f7fafc;
  background: #333942;
  outline: 0;
}

.site-nav-icon.is-active { background: #267bbb; }
.site-settings { margin-top: auto; }
.site-rail-divider { width: 26px; height: 1px; margin: 2px 0; background: #3a414a; }

.product-rail {
  border-right-color: #3a414a;
  background: #20242a;
}

.agent-brand strong,
.rail-head,
.product-dialog label { color: #eef2f5; }
.icon-control { border-color: #46505b; color: #eef2f5; background: #292e35; }
.search-box input,
.product-dialog input,
.composer textarea { border-color: #46505b; color: #eef2f5; background: #1e2227; }
.search-box input:focus,
.product-dialog input:focus,
.composer textarea:focus { border-color: #54a9ed; }
.product-row:hover { background: #252a31; }
.product-row.is-active { border-color: #3c96dc; background: #20384c; }
.product-thumb { border-color: #46505b; color: #83ccff; background: #1d2d3b; }
.scope-row:hover { background: #252a31; }
.scope-row.is-active { border-color: #3c96dc; background: #20384c; }
.scope-icon { border-color: #46505b; color: #83ccff; background: #1d2d3b; }
.scope-divider::after { background: #414a55; }
.agent-stage { background: #17191d; }
.agent-intro .eyebrow { color: #76bdf0; }
.agent-avatar { border-color: #46505b; background: #292e35; }
.conversation-surface { border-color: #3a414a; background: #20242a; box-shadow: none; }
.message { border-color: #414a55; background: #252a31; }
.message.user { border-color: #3f6681; background: #20384c; }
.message.system { border-color: #46505b; color: #b9c3ce; background: #20242a; }
.message b { color: #e7edf3; }
.message p { color: #d8e0e7; }
.analysis-block { border-top-color: #414a55; }
.analysis-block strong { color: #f0f4f8; }
.analysis-block ul { color: #b9c3ce; }
.quick-prompts button,
.ghost-button { border-color: #4d5864; color: #e7edf3; background: #252a31; }
.quick-prompts button:hover,
.ghost-button:hover { border-color: #64aee4; color: #fff; background: #303a45; }
.composer { border-top-color: #414a55; background: #1d2025; }
.composer button,
.primary-button { border-color: #3e94d5; color: #f8fbff; background: #267bbb; }
.store-context { display: flex; align-items: center; gap: 7px; }
.store-context label { color: #a9b1bb; font-size: 11px; }
.store-context select { max-width: 170px; height: 30px; padding: 0 24px 0 9px; border: 1px solid #46505b; border-radius: 6px; outline: none; color: #eef2f5; background: #292e35; font-size: 12px; }
.store-context select:focus { border-color: #54a9ed; }
.store-context .icon-control { flex: 0 0 auto; width: 30px; height: 30px; }
.dialog-hint { margin: -3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.task-board { border-top-color: #3a414a; }
.task-list,
.task-row { border-color: #414a55; }
.task-status { color: #e6b35d; background: #3a3020; }
.task-status.proposal,
.task-status.approved_waiting_executor { color: #c8a7f1; background: #302640; }
.product-dialog { border-color: #3a414a; background: #20242a; box-shadow: 0 20px 50px rgba(0, 0, 0, .45); }
.product-dialog::backdrop { background: rgba(0, 0, 0, .62); }

@media (max-width: 820px) {
  .promo-app { grid-template-columns: 52px minmax(0, 1fr); }
  .site-rail { width: 52px; }
  .product-rail { grid-column: 2; grid-row: 1; }
  .agent-stage { grid-column: 2; grid-row: 2; }
  .promo-app.rail-collapsed { grid-template-columns: 52px minmax(0, 1fr); }
  .product-rail.rail-collapsed { grid-column: 2; grid-row: 1; }
  .promo-app.rail-collapsed .composer { left: 52px; }
}

@media (max-width: 560px) {
  .promo-app { grid-template-columns: 1fr; }
  .site-rail { position: static; width: 100%; height: auto; flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid #3a414a; }
  .site-logo { flex: 0 0 auto; margin-bottom: 0; }
  .site-nav-icon { flex: 0 0 auto; }
  .site-settings { margin-top: 0; }
  .site-rail-divider { flex: 0 0 26px; width: 26px; }
  .product-rail,
  .agent-stage { grid-column: auto; grid-row: auto; padding-bottom: 166px; }
  .composer { right: 0; bottom: 0; left: 0; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); }
  .promo-app.rail-collapsed .product-rail { display: block; }
  .promo-app.rail-collapsed .agent-stage { display: block; }
  .composer-fields { grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .composer textarea { min-height: 44px; }
  .composer button { min-width: 54px; padding: 0 12px; }
  .store-context { max-width: 150px; }
  .store-context label { display: none; }
  .store-context select { max-width: 104px; }
}