/* Track 3 — интерфейс рабочей системы, а не набор плавающих панелей */
#app {
  grid-template-columns: 278px minmax(0, 1fr) 342px;
  gap: 0;
  padding: 0;
  background: var(--bg);
}

.sidebar, .rail, main.col {
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
.sidebar { border-width: 0 1px 0 0; background: var(--glass-soft); }
main.col { border-width: 0 1px 0 0; background: var(--glass); }
.rail { border: 0; background: var(--glass-soft); }

.side-head { padding: 20px 16px 13px; }
.side-head .brand {
  height: 30px;
  justify-content: flex-start;
  font-size: 20px;
  letter-spacing: -.04em;
}
.side-head .brand .ic { order: -1; width: 20px; height: 20px; }
.ver-badge { margin-left: auto; }
.ws-row { margin-top: 18px; }
.ws-select { border-radius: 9px; box-shadow: none; }
.new-chat {
  margin-top: 9px;
  min-height: 40px;
  border-radius: 9px;
  justify-content: flex-start;
  padding: 10px 12px;
  box-shadow: none;
}
.side-label {
  padding: 8px 16px 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.side-label-system { border-top: 1px solid var(--line); padding-top: 12px; }
.chats { padding: 3px 9px 10px; }
.chat-item { border-radius: 8px; min-height: 38px; padding: 8px 9px; }
.chat-item.active {
  background: var(--accent-tint);
  color: var(--accent-ink);
  box-shadow: inset 2px 0 var(--accent);
}
.side-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 9px 12px;
  border: 0;
}
.side-btn {
  flex: none;
  width: 100%;
  min-height: 36px;
  justify-content: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--sub);
  font-size: 13px;
}
.side-btn .ic { width: 16px; height: 16px; color: var(--muted); }
.side-btn:hover { background: var(--hover); border: 0; box-shadow: none; color: var(--txt); }
.side-btn-primary { color: var(--accent-ink); background: var(--accent-tint); font-weight: 700; }
.side-btn-primary .ic { color: var(--accent-ink); }
.side-foot { padding: 11px 16px; }

.topbar {
  min-height: 58px;
  padding: 9px 20px;
  background: color-mix(in srgb, var(--glass) 94%, transparent);
}
.topbar .title { font-size: 14px; letter-spacing: -.015em; }
.agent-state { border-radius: 7px; }
.stream { padding: 26px clamp(18px, 4vw, 54px); }
.composer { padding: 12px clamp(18px, 4vw, 54px) 20px; }
.composer-box { border-radius: 14px; box-shadow: 0 10px 35px rgba(0,0,0,.08); }

.rail-heading {
  min-height: 58px;
  padding: 12px 14px 9px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid var(--line);
}
.rail-heading span { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.rail-heading small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.rail-tabs { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; }
.rail-tabs::-webkit-scrollbar { display: none; }
.rail-tab { flex: 0 0 auto; padding: 11px 9px; font-size: 11px; }
.rail-body { padding: 13px; }

/* Центр управления */
.modal:has(.control-center) .modal-card { width: min(1120px, 96vw); }
.control-center { display: flex; flex-direction: column; gap: 18px; }
.cc-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--fill);
}
.cc-health { display: flex; align-items: center; gap: 10px; }
.cc-health-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 15%, transparent); }
.cc-health-dot.bad { background: var(--err); box-shadow: 0 0 0 4px color-mix(in srgb, var(--err) 15%, transparent); }
.cc-health strong { display: block; font-size: 14px; }
.cc-health small, .cc-updated { color: var(--muted); font-size: 11px; }
.cc-metrics { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 10px; }
.cc-metric { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--glass); }
.cc-metric span { display: block; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cc-metric strong { display: block; margin-top: 8px; font: 700 20px/1.1 var(--display); letter-spacing: -.04em; }
.cc-metric small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.75fr); gap: 18px; align-items: start; }
.cc-section { min-width: 0; }
.cc-section + .cc-section { margin-top: 18px; }
.cc-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.cc-section-head h3 { margin: 0; font-size: 13px; letter-spacing: -.01em; }
.cc-count { padding: 2px 7px; border-radius: 99px; color: var(--muted); background: var(--fill); font-size: 10px; }
.cc-run {
  display: grid;
  grid-template-columns: 9px minmax(0,1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.cc-run:first-of-type { border-top: 0; }
.cc-run-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.cc-run-dot.running { background: var(--ok); }
.cc-run-dot.succeeded { background: var(--a2); }
.cc-run-dot.failed, .cc-run-dot.blocked { background: var(--err); }
.cc-run-main { min-width: 0; }
.cc-run-main b { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 12px; white-space: nowrap; }
.cc-run-main small { display: block; margin-top: 3px; color: var(--muted); font: 10px/1.35 var(--mono); }
.cc-actions { display: flex; gap: 5px; }
.cc-actions button { padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--field); color: var(--sub); font-size: 10px; }
.cc-panel { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--fill); }
.cc-goal + .cc-goal, .cc-archive + .cc-archive { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--line); }
.cc-goal b, .cc-archive b { display: block; font-size: 12px; }
.cc-goal small, .cc-archive small { display: block; color: var(--muted); font-size: 10px; margin-top: 3px; }
.cc-progress { height: 5px; margin-top: 8px; border-radius: 5px; overflow: hidden; background: var(--line); }
.cc-progress i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.cc-empty { padding: 16px 0; color: var(--muted); font-size: 12px; text-align: center; }

@media (min-width: 901px) and (max-width: 1200px) {
  #app { grid-template-columns: 238px minmax(0,1fr) 296px; gap: 0; padding: 0; }
  .side-btn { padding: 8px 10px; font-size: 12px; }
}
@media (max-width: 900px) {
  #app { grid-template-columns: 1fr; }
  .rail-heading { min-height: 54px; }
  .cc-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .cc-grid { grid-template-columns: 1fr; }
  .modal:has(.control-center) .modal-card { width: 100vw; max-height: 94vh; border-radius: 18px 18px 0 0; align-self: end; }
}
@media (max-width: 520px) {
  .cc-metrics { grid-template-columns: 1fr 1fr; }
  .cc-metric { padding: 11px; }
  .cc-metric strong { font-size: 17px; }
  .cc-run { grid-template-columns: 8px minmax(0,1fr); }
  .cc-actions { grid-column: 2; }
}

/* ── Лайтбокс: полноэкранный просмотр картинок без ухода со страницы (iOS-PWA) ── */
.lightbox{position:fixed;inset:0;z-index:10000;background:rgba(6,10,16,.94);display:none;flex-direction:column;overscroll-behavior:contain}
.lightbox.open{display:flex}
.lightbox .lb-bar{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px}
.lightbox .lb-dl{display:inline-flex;align-items:center;gap:8px;background:#2f6fed;color:#fff;font-weight:800;font-size:15px;text-decoration:none;padding:11px 18px;border-radius:12px;border:0;cursor:pointer;font-family:inherit}
.lightbox .lb-dl svg{width:18px;height:18px;stroke:#fff}
.lightbox .lb-x{width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;font-size:20px;line-height:1;cursor:pointer}
.lightbox .lb-stage{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:center;justify-content:center;padding:10px calc(env(safe-area-inset-right,0px) + 10px) calc(env(safe-area-inset-bottom,0px) + 14px) calc(env(safe-area-inset-left,0px) + 10px)}
.lightbox .lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:6px}