/* Site Agent design system — warm charcoal + construction amber.
   Tokens only + shared components. Page-specific rules stay in app.css. */
:root {
  --accent: #f0a832;
  --accent-light: #f6c161;
  --accent-dim: rgba(240, 168, 50, 0.12);
  --accent-border: rgba(240, 168, 50, 0.35);
  --accent-steel: #2b6cb0;
  --accent-hazard: #ff6b35;
  --accent-green: #10b981;
  --bg: #12100d;
  --panel: #171411;
  --panel-hover: #262019;
  --border: #2b2620;
  --text: #d8d2c8;
  --muted: #8a8478;
  --danger: #f56565;
  --gradient-accent: linear-gradient(135deg, #f0a832, #ff6b35, #e5484d);
}

/* ── Panel card (reusable across project/drawing/admin-stat cards) ── */
.panel-card {
  background: linear-gradient(180deg, var(--panel), var(--bg));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.panel-card.panel-card-active {
  border-color: var(--accent-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), 0 0 24px rgba(240, 168, 50, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ── Progress bar with optional shimmer on the in-flight segment ── */
@keyframes ds-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
.progress {
  height: 7px; border-radius: 999px; background: var(--border);
  overflow: hidden; position: relative;
}
.progress-fill {
  position: absolute; inset: 0 auto 0 0; height: 100%; border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); overflow: hidden;
  background: linear-gradient(90deg, var(--accent), var(--accent-hazard));
}
.progress-fill.green { background: linear-gradient(90deg, #0d8a63, var(--accent-green)); }
.progress-fill.shimmer::after {
  content: ""; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: ds-shimmer 2.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .progress-fill.shimmer::after, .badge-spin { animation: none !important; }
}

/* ── Shared bits ────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  font-size: 0.62rem; font-weight: 800;
  background: var(--accent); color: #14100a;
}
.badge-warn { background: var(--danger); color: #fff; }
.badge-spin {
  background: transparent; border: 2px solid var(--muted); border-top-color: var(--accent);
  width: 14px; height: 14px; min-width: 0; padding: 0;
  animation: ds-spin 0.9s linear infinite;
}
@keyframes ds-spin { to { transform: rotate(360deg); } }

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 2.5rem 1.5rem; text-align: center; color: var(--muted);
}
.empty-state strong { color: var(--text); font-size: 1rem; }

/* ── Workspace shell ────────────────────────────────────────── */
main.main-workspace { max-width: none; padding: 0; display: flex; flex-direction: column; }
.workspace { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.ws-crumbbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 1rem; font-size: 0.8rem; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--panel);
}
.ws-crumbbar a { color: var(--accent); text-decoration: none; }

.ws-tabstrip {
  display: flex; gap: 0.4rem; padding: 0.5rem 1rem; overflow-x: auto;
  border-bottom: 1px solid var(--border); background: var(--panel);
  scrollbar-width: thin;
}
.ws-tab {
  display: flex; align-items: center; gap: 0.55rem; flex: 0 0 auto;
  padding: 0.35rem 0.7rem 0.35rem 0.35rem; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; color: var(--muted);
  background: transparent; font-size: 0.78rem; font-weight: 600;
  margin: 0; width: auto;
}
.ws-tab:hover { background: var(--panel-hover); color: var(--text); }
.ws-tab.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent); }
.ws-tab img {
  width: 44px; height: 34px; object-fit: cover; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg); display: block;
}
.ws-tab .ws-tab-title { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.ws-tab .ws-tab-sub { font-size: 0.62rem; font-weight: 500; color: var(--muted); text-transform: capitalize; }

.ws-toolbar {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.45rem 1rem; border-bottom: 1px solid var(--border); background: var(--panel);
}
.ws-tool-btn {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font-size: 1.05rem; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0;
}
.ws-tool-btn:hover { background: var(--panel-hover); }
.ws-tool-btn.active { background: var(--accent); color: #14100a; border-color: var(--accent); }
.ws-tool-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.ws-tool-sep { width: 1px; height: 26px; background: var(--border); margin: 0 0.3rem; }
.ws-tool-status { font-size: 0.72rem; color: var(--muted); min-height: 1em; margin-left: 0.5rem; }
.ws-tool-chips { display: none; gap: 0.35rem; }
.ws-tool-chips.open { display: flex; }
.ws-ai-slot {
  display: inline-flex; align-items: center; gap: 0.4rem; height: 38px;
  padding: 0 0.8rem; border-radius: 9px; border: 1px dashed var(--border);
  color: var(--muted); font-size: 0.75rem; font-weight: 700; cursor: not-allowed;
  background: transparent; margin: 0; width: auto;
}
.ws-ai-slot:hover { background: transparent; }

.ws-body { flex: 1; display: flex; min-height: 0; }
.ws-viewer-wrap { flex: 1; position: relative; min-width: 0; display: flex; }
.ws-viewer { flex: 1; background: var(--bg); }

.ws-legend {
  position: absolute; top: 12px; right: 12px; z-index: 20;
  background: rgba(23, 20, 17, 0.92); border: 1px solid var(--border); border-radius: 10px;
  padding: 0.6rem 0.8rem; font-size: 0.72rem; min-width: 210px;
}
.ws-legend table { border-collapse: collapse; width: 100%; }
.ws-legend th { text-align: right; font-weight: 700; color: var(--muted); padding: 0 0 4px 10px; }
.ws-legend th:first-child { text-align: left; padding-left: 0; }
.ws-legend td { text-align: right; padding: 2px 0 2px 10px; color: var(--text); }
.ws-legend td:first-child { text-align: left; padding-left: 0; }
.ws-legend .swatch {
  display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px;
}

.ws-panel { background: var(--panel); }
.ws-panel-right {
  width: 300px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; min-height: 0;
}
.ws-panel-bottom { border-top: 1px solid var(--border); max-height: 34vh; overflow-y: auto; }
.ws-panel-bottom.collapsed { max-height: 0; border-top: none; overflow: hidden; }

.ws-panel-head {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.9rem; font-size: 0.75rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--panel);
}

.ws-toggle {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg); color: var(--muted); cursor: pointer; font-size: 0.8rem;
  display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0;
}
.ws-toggle:hover { color: var(--accent); background: var(--bg); }

.ws-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.ws-table th {
  text-align: left; padding: 0.45rem 0.9rem; color: var(--muted);
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border); position: sticky; top: 37px; background: var(--panel);
}
.ws-table td { padding: 0.4rem 0.9rem; border-bottom: 1px solid var(--border); color: var(--text); }
.ws-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ── Workspace responsive: ≤1024px — chat is always open (no collapse), so
   it can no longer be a dismissible slide-over drawer. Stack it in normal
   flow below the viewer instead of overlaying the canvas permanently. ── */
@media (max-width: 1024px) {
  .ws-body { flex-direction: column; }
  .ws-viewer-wrap { flex: 1 1 auto; min-height: 30vh; }
  .ws-panel-right {
    width: auto; height: 38vh; max-height: 38vh; flex: 0 0 auto;
    border-left: none; border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .ws-panel-bottom { max-height: 28vh; }
}
/* ── Phone: read-only — hide editing tools, keep pan/zoom + table ── */
@media (max-width: 720px) {
  .ws-tool-btn[data-edit-tool], .ws-tool-chips, .ws-ai-slot { display: none; }
  .ws-legend { display: none; }
  .ws-tab img { display: none; }
}

/* ── AI scan-line overlay (workspace viewer) ─────────────────── */
.ws-scan-line {
  position: absolute; left: 3%; right: 3%; height: 2px; top: 4%; z-index: 15;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 18px 3px rgba(240, 168, 50, 0.35);
  animation: ws-scan 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ws-scan {
  0% { top: 4%; }
  50% { top: 88%; }
  100% { top: 4%; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-scan-line { animation: none; }
}