/* One scale for colour, type and corners; every rule below draws on it.
   Depth has three levels: the backdrop (--bg), the side panels one step above it (--side), the stage in the middle
   highest (--panel). On a panel, cards use --card and controls --panel-2. */
:root {
  --bg: #06080a;
  --side: #0d1014;          /* Work orders and Co-Space */
  --panel: #13171d;         /* the stage: Visual space, pages, dialogs */
  --card: #181d24;
  --panel-2: #1c2129;       /* controls, the selected item */
  --hover: #1f252e;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .13);
  --text: #eceff3;
  --text-2: #c6ccd5;
  --muted: #9aa3af;
  --faint: #6b7380;
  --on-accent: #06101f;
  --accent: #5aa2ff;
  --accent-dim: rgba(90, 162, 255, .13);
  --accent-line: rgba(90, 162, 255, .42);
  --ok: #3dd6a3;
  --ok-dim: rgba(61, 214, 163, .12);
  --ok-line: rgba(61, 214, 163, .35);
  --warn: #f0b44c;
  --bad: #f47a70;
  --info: #8fb4e8;
  --series-2: #b28cff;
  --shadow: none;
  --lift: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 40px -12px rgba(0, 0, 0, .7);   /* the stage */
  --float: 0 16px 40px -8px rgba(0, 0, 0, .6);                                            /* menus, dialogs */
  --radius: 12px;           /* cards */
  --r-ctl: 7px;             /* buttons, inputs */
  --r-panel: 14px;          /* the three areas */
  --t-xs: 12px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 21px; --t-num: 26px;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="light"] {
  --bg: #e8ebef;
  --side: #f4f5f7;
  --panel: #ffffff;
  --card: #ffffff;
  --panel-2: #eef0f3;
  --hover: #e7eaee;
  --line: rgba(16, 22, 32, .09);
  --line-2: rgba(16, 22, 32, .15);
  --text: #11151b;
  --text-2: #333a45;
  --muted: #515a67;
  --faint: #606874;
  --accent: #2563eb;
  --accent-dim: rgba(37, 99, 235, .09);
  --accent-line: rgba(37, 99, 235, .35);
  --on-accent: #ffffff;
  --ok: #097558;
  --ok-dim: rgba(9, 117, 88, .1);
  --ok-line: rgba(9, 117, 88, .35);
  --warn: #8c540a;
  --bad: #c2372e;
  --info: #3e69a8;
  --series-2: #7c3aed;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --lift: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 16px 36px -14px rgba(20, 28, 40, .22);
  --float: 0 16px 40px -10px rgba(20, 28, 40, .28);
  color-scheme: light;
}
:root { color-scheme: dark; }
:root[data-theme="light"] .modal-backdrop { background: rgba(20, 24, 29, .35); }
:root[data-theme="light"] .kpi, :root[data-theme="light"] .card { box-shadow: var(--shadow); }
/* Keyboard focus is always visible; a mouse click leaves no ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  transition: background .2s, color .2s;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }

/* ---------- Top bar ---------- */
.topbar {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 20px;
  background: var(--bg);
}
/* Brand: quiet "E-Power", strong "LINC"; the only colour is the live node of the mark */
.brand { display: flex; align-items: center; gap: 10px; color: var(--muted); text-decoration: none; font: 400 15px "Geist", var(--sans); }
.brand b { color: var(--text); font-weight: 600; letter-spacing: .05em; }
/* Mark: dark glass tile, the bolt drawn as two linked nodes */
.brand-mark { flex: none; width: 26px; height: 26px; stroke: none; }
.brand-mark .bm-tile { fill: url(#bmTile); }
.brand-mark .bm-rim { fill: none; stroke: url(#bmRim); }
.brand-mark .bm-bolt { fill: none; stroke: #eef3ff; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.brand-mark .bm-node { fill: #eef3ff; }
.brand-mark .bm-live { fill: #5aa2ff; }
.brand-mark .bm-halo { fill: #5aa2ff; opacity: .22; }
.nav { display: flex; gap: 4px; }
.nav-toggle { display: none; }
.nav a {
  padding: 6px 12px;
  border-radius: 7px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); background: var(--panel); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
.nav-item { position: relative; display: flex; }
.nav-item > a { display: inline-flex; align-items: center; gap: 4px; }
.nav-item .chev { width: 13px; height: 13px; transition: transform .15s; }
.nav-item:hover .chev, .nav-item.open .chev { transform: rotate(180deg); }
.nav-menu {
  position: absolute; left: 0; top: 100%; z-index: 40; min-width: 180px; padding-top: 6px; /* hover bridge */
  visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility .12s;
}
.nav-menu::before {
  content: ""; position: absolute; inset: 6px 0 0; z-index: -1;
  border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); box-shadow: var(--float);
}
.nav-item:hover .nav-menu, .nav-item:focus-within .nav-menu, .nav-item.open .nav-menu {
  visibility: visible; opacity: 1; transform: none;
}
.nav-item.suppress:not(.open) .nav-menu { visibility: hidden; opacity: 0; }
.nav-menu a {
  display: flex; flex-direction: column; gap: 2px; margin: 6px; padding: 8px 10px; border-radius: 7px;
  color: var(--text); text-decoration: none;
}
.nav-menu a:hover, .nav-menu a.active { background: var(--panel-2); }
.nav-menu a b { font-weight: 500; font-size: 14px; }
.nav-menu a span { font-size: 12px; color: var(--muted); }
.nav-menu a.active b { color: var(--accent); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--muted); }
.theme-btn { width: 30px; height: 30px; }
.theme-btn .sun { display: none; }
:root[data-theme="light"] .theme-btn .sun { display: block; }
:root[data-theme="light"] .theme-btn .moon { display: none; }
.sys-status { display: flex; align-items: center; gap: 8px; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line-2);
  font-size: 12px; color: var(--text);
}

.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--faint); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-dim); }
.dot.warn { background: var(--warn); box-shadow: 0 0 0 3px rgba(242, 184, 75, .12); }
.dot.bad { background: var(--bad); box-shadow: 0 0 0 3px rgba(240, 106, 106, .12); }

/* ---------- Workspace grid ---------- */
.workspace {
  /* Side panel widths; the drag handles set them inline (app.js) */
  --orders-w: 300px;
  --co-w: 380px;
  height: calc(100vh - 52px);
  height: calc(100dvh - 52px);
  display: grid;
  grid-template-columns: var(--orders-w) minmax(0, 1fr) var(--co-w);
  gap: 10px;                /* the backdrop shows between the three areas */
  padding: 0 10px 10px;
}
.workspace > .orders, .workspace > .co { position: relative; }
.resizer {
  position: absolute; top: 0; bottom: 0; z-index: 25; width: 9px; cursor: col-resize; touch-action: none; outline: 0;
}
.orders > .resizer { right: -10px; }   /* in the gap between two areas */
.co > .resizer { left: -10px; }
.resizer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 3px; border-radius: 2px;
  background: var(--accent); opacity: 0; transition: opacity .12s;
}
.resizer:hover::after, .resizer:focus-visible::after, .resizer.dragging::after { opacity: 1; }
/* Grip in the middle of each divider: shows the edge can be dragged */
.resizer::before {
  content: ""; position: absolute; top: 50%; left: 2px; width: 5px; height: 34px; margin-top: -17px; z-index: 1;
  border-radius: 3px; background: var(--panel); border: 1px solid var(--line-2);
  background-image: radial-gradient(circle, var(--faint) 1px, transparent 1.2px);
  background-size: 3px 6px; background-position: center;
  transition: border-color .12s, background-color .12s;
}
.resizer:hover::before, .resizer:focus-visible::before, .resizer.dragging::before { border-color: var(--accent); background-color: var(--accent-dim); }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing iframe, body.resizing canvas { pointer-events: none; }
.workspace.module-mode { grid-template-columns: 1fr; }
.workspace.module-mode > .panel:not(.module) { display: none; }

/* Each area is a panel on the backdrop. The stage (Visual space, or a page) is the highest and lit; the two side
   panels are one step lower; Co-Space carries a breath of the accent at its top: the live conversation. */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-panel); box-shadow: var(--lift); }
.workspace > .visual, .workspace > .module { overflow: hidden; }
.workspace > .orders, .workspace > .co { background: var(--side); border-color: var(--line); box-shadow: none; }
.workspace > .co { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--side)), var(--side) 150px); }
.orders .search { background: var(--panel-2); }
.co .composer-input { background: var(--card); }
.orders .wo-day { background: var(--side); }
.orders .wo:hover { background: var(--hover); }
.orders .wo.active { background: var(--panel-2); box-shadow: 0 0 0 1px var(--line); }
.co .msg.ai .msg-text { background: var(--card); }
.co .msg-text.md code, .co .msg-text.md pre, .co .msg-text.md th { background: var(--side); }
.panel-head {
  height: 52px; flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px;
}
.visual > .panel-head { border-bottom: 1px solid var(--line); }
.panel-head h2 {
  margin: 0; font-size: 16px; font-weight: 600;
  color: var(--text);
  display: flex; align-items: center; gap: 8px;
}
.count { font-size: 14px; font-weight: 400; color: var(--faint); }

.icon-btn {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted);
  transition: color .15s, background .15s;
}
.icon-btn:hover { color: var(--text); background: var(--hover); }

/* ---------- Work orders ---------- */
.search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 12px 12px; padding: 0 10px; height: 34px;
  border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--panel-2); color: var(--faint);
}
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.search:focus-within { border-color: var(--accent-line); }

/* What the list shows: all cases, or only those that need something */
.wo-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.wo-filters:empty { display: none; }
.wo-filters button {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap;
}
.wo-filters button .mono { font-size: 12px; color: var(--faint); }
.wo-filters button:hover { color: var(--text); background: var(--hover); }
.wo-filters button.on { color: var(--text); background: var(--panel-2); font-weight: 500; }
.wo-filters .f-overdue .mono { color: var(--bad); }
.wo-filters .f-todo .mono, .wo-filters .f-dn .mono, .wo-filters .f-hands .mono { color: var(--warn); }
.wo-list { list-style: none; margin: 0; padding: 0 8px 12px; overflow-y: auto; flex: 1; }
.wo {
  position: relative;
  padding: 11px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s;
}
.wo + .wo { margin-top: 2px; }
.wo:hover { background: var(--panel-2); }
.wo.active { background: var(--panel-2); border-color: var(--line-2); }
.wo.active::before {
  content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 2px;
  background: var(--accent); border-radius: 2px;
}
/* First line: the station, its class, and on the right where the case stands, in a word */
.wo-top { display: flex; align-items: center; gap: 8px; }
.wo-station { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.wo-kw { flex: none; font-size: 12px; color: var(--faint); white-space: nowrap; }
.wo-top .tag { flex: none; }
.wo-top .wo-state { margin-left: auto; flex: none; }
.wo-summary { margin-top: 3px; font-size: 13px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wo-meta { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--faint); }
.wo-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wo-meta .warn { color: var(--warn); }
/* Where a case stands: a dot and a word - reported (green), to report (amber), overdue (red), scheduled (blue),
   cancelled (grey, the whole card dimmed) */
.wo-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.wo-state i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; }
.wo-state.ok { color: var(--ok); }
.wo-state.warn { color: var(--warn); }
.wo-state.off { color: var(--faint); }
.wo-state.info { color: var(--info); }
.wo-state.bad { color: var(--bad); }
.wo.st-cancelled { opacity: .6; }
.wo.st-cancelled .wo-station { text-decoration: line-through; }
/* A raised hand: who asks and why, on an amber card with a slow breath around it */
.wo-handnote { margin-top: 8px; display: flex; gap: 6px; font-size: 12px; line-height: 1.4; color: var(--text-2); }
.wo-handnote svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--warn); }
.wo-handnote span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.wo-handnote b { font-weight: 500; color: var(--text); }
.wo.hand { background-color: color-mix(in srgb, var(--warn) 9%, transparent); animation: hand-breath 2.6s ease-in-out infinite; }
@keyframes hand-breath {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn) 0%, transparent); }
  50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 22%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .wo.hand { animation: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 18%, transparent); } }
#handLabel:empty { display: none; }
/* A day of the list: its name and date, and how many of its reports are in */
.wo-day {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: baseline;
  margin: 6px 0 0; padding: 10px 12px 6px; background: var(--side);
  font-size: 12px; color: var(--faint);
}
.wo-day:first-child { margin-top: 0; }
.wo-day b { margin-right: 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.wo-day .part { color: var(--muted); }   /* reports still missing that day */
.wo-empty { padding: 4px 12px 10px; font-size: 12px; color: var(--faint); }
.wo-none { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 16px; text-align: center; font-size: 13px; color: var(--muted); }
.wo-none b { font-size: 14px; font-weight: 600; color: var(--text); }
.wo-none b + span { margin-top: -6px; }
.wo:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.copy-chip.copied, .copy-chip.copied svg { color: var(--ok); }
.wo-more { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 8px; text-align: center; }

/* A tag states a fact (350KW) or a state (Report submitted): quiet fill, no outline, colour only for states */
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px; white-space: nowrap;
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--muted); background: var(--panel-2);
}
.tag.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.tag.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.tag.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.tag.info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.tag.accent { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.live-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: default; }
.live-badge .dot { width: 6px; height: 6px; }
.live-badge .dot.ok { animation: live-pulse 2s ease-in-out infinite; }
.live-badge.off { color: var(--faint); }
.wo-note { margin: 0 4px 8px; padding: 8px 12px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--warn) 11%, transparent); font-size: 12px; line-height: 1.45; color: var(--warn); }   /* no dispatch list */
.wo-note + .wo-day { margin-top: 0; }
/* How old the dispatch list is; amber when the latest email read is over two hours old */
.wo-asof { margin: 0 2px 6px; padding: 0 10px; font-size: 12px; color: var(--faint); }
.wo-asof.stale { color: var(--warn); }
.wo-asof + .wo-day { margin-top: 0; }
/* Hands that are up: one line on top of the list, a click goes to the next such case */
.wo-hands { margin: 0 4px 8px; }
.wo-hands button {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  border: 0; background: color-mix(in srgb, var(--warn) 11%, transparent);
  color: var(--warn); font-size: 12px; font-weight: 500;
}
.wo-hands svg { width: 15px; height: 15px; flex: none; }
.wo-hands + .wo-day { margin-top: 0; }
.home-wo .wo-state { justify-self: end; }
.tag.off { color: var(--faint); }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 5px transparent; } }
.wo.fresh { border-color: var(--accent-line); background: var(--accent-dim); }

/* ---------- Visual space ---------- */
.visual-body {
  flex: 1; overflow-y: auto; padding: 20px 24px 32px;
}
.ov { max-width: 980px; }
.v-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v-title { margin: 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.tag.pill { height: 22px; padding: 0 9px; border-radius: 999px; }
.v-sub { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--muted); font-size: 13px; }
.v-sub .faint { color: var(--faint); }
/* A section of the stage: a quiet title with its source on the right, the content without a box around it */
.sec { margin-top: 28px; min-width: 0; }
.sec-head { margin: 0 0 12px; min-height: 20px; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--faint); }
.sec-head .src { margin-left: auto; min-width: 0; display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; font-weight: 400; text-align: right; overflow-wrap: anywhere; }
.sec-head .tag { height: 18px; padding: 0 6px; }
.grid-2.secs { margin-top: 0; gap: 0 32px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
@container visual (max-width: 640px) { .grid-2.secs { grid-template-columns: minmax(0, 1fr); } .tele { gap: 12px; padding: 12px 14px; } .tele b { font-size: 21px; } .sec.demo .src { display: none; } }
.sec.demo { opacity: .82; }
.sec .grid-2 { margin-top: 10px; }
/* Delta's note, quoted; under it what changed since */
.quote { padding: 2px 0 2px 12px; border-left: 2px solid var(--line-2); }
.steps { list-style: none; margin: 16px 0 0; padding: 0; font-size: 13px; }
.steps li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 5px 0; }
.steps time { padding-top: 1px; font-size: 12px; color: var(--faint); white-space: nowrap; }
.steps small { display: block; font-size: 12px; color: var(--faint); }
.steps li.bad > div { color: var(--bad); }
/* Telemetry at a glance: three figures in one card */
.tele { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 14px 20px; }
.tele span { display: block; font-size: 12px; color: var(--faint); }
.tele b { font: 500 26px/1.3 var(--sans); letter-spacing: -.02em; }
.tele b small { margin-left: 3px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--faint); }

.kpis { margin-top: 20px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.kpi-label { font-size: 12px; color: var(--faint); }
.kpi-value { margin-top: 6px; font-size: 21px; font-weight: 500; letter-spacing: -.01em; }
.kpi-value small { font-size: 12px; color: var(--muted); margin-left: 2px; }
.kpi-value.kpi-text { font-size: 15px; letter-spacing: 0; overflow-wrap: anywhere; }
.kpi-note { margin-top: 4px; font-size: 12px; color: var(--faint); }
.facts { margin: 0; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 7px 10px; font-size: 13px; }
.facts dt { color: var(--faint); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.note-text { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
/* Overview: the Dispatch card (delivery notes, tracking, Delta's note, updates) */
.dispatch-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; }
.dispatch .facts { grid-template-columns: 104px minmax(0, 1fr); align-items: baseline; align-content: start; }
.station-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.track { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.track a { flex: none; }
.copy-chip { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
.copy-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 7px; border: 0; border-radius: 5px;
  background: var(--panel-2); color: var(--text); font: 12px/1.5 var(--mono); cursor: pointer;
}
.copy-chip svg { width: 12px; height: 12px; flex: none; color: var(--faint); }
.copy-chip:hover { background: var(--hover); }
.copy-chip:hover svg { color: var(--accent); }
.work-text { white-space: pre-wrap; font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.photo-grid a { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.photo-grid a:hover img { transform: scale(1.04); }
.photo-grid a { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(8, 10, 14, .92); display: flex; flex-direction: column; color: #e8ebf0; }
.lightbox[hidden] { display: none; }
.lb-bar { flex: none; height: 52px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 13px; }
.lb-actions { display: flex; align-items: center; gap: 12px; }
.lb-link { color: #c3cad6; font-size: 13px; text-decoration: none; }
.lb-link:hover { color: #fff; text-decoration: underline; }
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 12px 20px; }
.lb-stage img { max-width: calc(100% - 120px); max-height: 100%; object-fit: contain; border-radius: 7px; transition: opacity .15s; }
.lb-stage img.loading { opacity: .35; }
.lb-stage { overflow: hidden; position: relative; }
.lb-stage img { transition: opacity .15s, transform .12s ease-out; cursor: zoom-in; user-select: none; -webkit-user-drag: none; touch-action: none; position: relative; z-index: 0; }
.lb-stage img.zoomed { cursor: grab; }
.lb-stage img.zoomed:active { cursor: grabbing; }
.lb-nav { position: relative; z-index: 1; }
.lb-info { display: flex; align-items: center; gap: 14px; }
.lb-zoom { color: #9aa3b2; font-size: 12px; }
.lb-hint { color: #6f7889; font-size: 12px; }
@media (max-width: 600px) { .lb-hint { display: none; } }
.lb-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .06); color: #e8ebf0; cursor: pointer; }
.lb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .14); }
.lb-btn:disabled { opacity: .25; cursor: default; }
.lb-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lb-nav { flex: none; width: 44px; height: 44px; }
@media (max-width: 600px) {
  .lb-stage { padding: 0 4px 12px; gap: 4px; }
  .lb-stage img { max-width: calc(100% - 80px); }
  .lb-nav { width: 36px; height: 36px; }
}
.history-status { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.visits { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.visit { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.visit.open { border-color: var(--line-2); }
.visit-row {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.visit-row:hover { background: var(--panel-2); border-radius: var(--radius); }
.visit-date { flex: none; font-size: 13px; color: var(--muted); width: 84px; }
.visit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.visit-title { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visit-meta { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visit .chev { flex: none; width: 16px; height: 16px; color: var(--faint); transition: transform .15s; }
.visit.open .chev { transform: rotate(180deg); }
.visit.current .visit-date { color: var(--accent); }
.visit-body { padding: 0 14px 14px; border-top: 1px solid var(--line); }
.visit-body > .kpis { margin-top: 14px; }
.photo-grid .photo-link { display: grid; place-items: center; font-size: 12px; color: var(--muted); position: relative; }
.photo-grid .photo-link::before { content: attr(data-label); position: absolute; }
.photo-grid .photo-link img { position: relative; }

.grid-2 { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.card + .card.full { margin-top: 10px; }
.card.full { margin-top: 10px; }
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.card-title { font-size: 13px; color: var(--muted); font-weight: 500; }
.legend { display: flex; gap: 12px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 2px; margin-right: 6px; vertical-align: middle; }

/* Charger diagram */
.charger { display: flex; gap: 16px; align-items: stretch; }
.charger svg.unit { width: 92px; height: 170px; stroke-width: 1.2; }
.charger:has(.unit-art) { align-items: center; }
.charger .unit-art { height: 200px; width: auto; max-width: 45%; flex: none; object-fit: contain; }
.charger:has(.unit-art) .ports { min-width: 150px; }
.ports { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.port { padding: 10px 12px; border-radius: var(--r-ctl); background: var(--panel-2); }
.port-top { display: flex; align-items: center; gap: 10px; }
.port-name { font-weight: 500; font-size: 13px; white-space: nowrap; }
.port-type { font-size: 12px; color: var(--faint); }
.port-top .wo-state { margin-left: auto; }
.port-detail { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.port.fault { background: color-mix(in srgb, var(--bad) 7%, var(--panel-2)); }

.chart svg { width: 100%; height: 170px; display: block; stroke-width: 1.5; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: -6px; width: 1px; background: var(--line-2); }
.timeline li:last-child::before { display: none; }
.timeline .tl-dot { position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--faint); background: var(--panel); }
.timeline .tl-dot.ok { border-color: var(--ok); }
.timeline .tl-dot.bad { border-color: var(--bad); }
.timeline .tl-dot.warn { border-color: var(--warn); }
.timeline .tl-dot.pending { border-style: dashed; }
.tl-row { display: flex; gap: 12px; align-items: baseline; }
.tl-time { font-size: 12px; color: var(--faint); width: 84px; flex: none; white-space: nowrap; }
.tl-text { font-size: 13px; }
.tl-text .muted { font-size: 12px; }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 500; color: var(--faint); font-size: 12px; padding: 0 8px 8px 0; border-bottom: 1px solid var(--line); }
.table td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table td.mono { font-size: 12px; white-space: nowrap; }

.empty { height: 100%; display: grid; place-items: center; padding: 24px; text-align: center; font-size: 13px; color: var(--muted); }
.empty h3 { margin: 14px 0 4px; color: var(--text); font-weight: 600; font-size: 16px; }
.empty p { margin: 0; }
.empty svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--panel-2); color: var(--faint); stroke-width: 1.4; box-sizing: content-box; }

/* ---------- 3D viewer ---------- */
.panel-head .crumb { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The views of the stage: plain words, the one on show filled */
.seg { display: inline-flex; gap: 2px; }
.seg button { height: 30px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font-size: 14px; }
.seg button:hover { color: var(--text); }
.seg button.active { background: var(--panel-2); color: var(--text); font-weight: 500; }

/* 3D viewer: the studio follows the theme. Dark: a deep studio in the panels' own tone, the white cabinet the
   brightest thing in it. Light: a soft grey, a good step darker than the cabinet's white so its edges hold (a near
   white backdrop looked cleaner but lost the cabinet's top and side edges). The grid colours are read by viewer3d.js,
   which redraws the grid when the theme changes.
   --viewer-ink is the colour of words written straight onto the backdrop; it changes with the backdrop.
   What floats on the view (pickers, the tool bar, the door bar, menus) is one kind of surface, with --chrome-shadow. */
:root { --viewer-bg-1: #2c333d; --viewer-bg-2: #11151a; --viewer-grid-1: #333b46; --viewer-grid-2: #3b4450;
  --viewer-ink: rgba(255, 255, 255, .72); --viewer-ink-shadow: none;
  --chrome-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .12); }
:root[data-theme="light"] { --viewer-bg-1: #dfe3e8; --viewer-bg-2: #b3bac4; --viewer-grid-1: #b9c0ca; --viewer-grid-2: #a2aab5;
  --viewer-ink: rgba(22, 28, 36, .66); }
.viewer { position: relative; flex: 1; min-height: 0; background: radial-gradient(ellipse at 50% 38%, var(--viewer-bg-1) 0%, var(--viewer-bg-2) 78%); }
.viewer-canvas { position: absolute; inset: 0; }
.viewer-canvas canvas { display: block; width: 100%; height: 100%; outline: none; cursor: grab; }
.viewer-canvas canvas:active { cursor: grabbing; }
.viewer-info { position: absolute; left: 16px; top: 16px; display: flex; flex-direction: column; gap: 8px; max-width: calc(100% - 236px); }
.viewer-info select {
  height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--panel); box-shadow: var(--chrome-shadow); font-size: 13px; font-weight: 500; outline: 0; max-width: 100%;
}
.viewer-info select:focus-visible { border-color: var(--accent-line); }
.viewer-info > select { width: 340px; }
.lib-pick { position: relative; width: 340px; max-width: 100%; }
.lib-btn {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 10px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); box-shadow: var(--chrome-shadow); color: var(--text); font: inherit; font-size: 13px; font-weight: 500;
}
.lib-btn svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lib-btn span { flex: 1; text-align: left; }
.lib-btn .lib-chev { color: var(--muted); }
.lib-btn:hover { background: var(--hover); }
.lib-btn[aria-expanded="true"] { border-color: var(--accent-line); }
.lib-menu {
  position: absolute; left: 0; top: 40px; z-index: 30; width: 100%; max-height: min(520px, 62vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--float);
}
.lib-menu[hidden] { display: none; }
.lib-search {
  flex: none; margin: 6px 6px 0; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--r-ctl);
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px;
}
.lib-search:focus { outline: none; border-color: var(--accent-line); }
.lib-tabs { flex: none; display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); }
.lib-tabs button {
  height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; cursor: pointer;
}
.lib-tabs button:hover { color: var(--text); background: var(--hover); }
.lib-tabs button.active { background: var(--panel-2); color: var(--text); font-weight: 500; }
.lib-list { flex: 1; min-height: 0; overflow-y: auto; padding: 4px; overscroll-behavior: contain; }
.lib-item {
  display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; width: 100%; padding: 5px 6px;
  border: 0; border-radius: 7px; background: transparent; color: var(--text); text-align: left; font: inherit; cursor: pointer;
}
.lib-item:hover, .lib-item:focus-visible { background: var(--panel-2); outline: none; }
.lib-item[aria-busy="true"] { opacity: .55; cursor: progress; }
.lib-thumb { width: 40px; height: 40px; border-radius: 7px; background: var(--panel-2); object-fit: contain; display: grid; place-items: center; color: var(--faint); font-size: 12px; }
.lib-name { font-size: 13px; line-height: 1.3; }
.lib-meta { display: block; margin-top: 1px; font-size: 12px; color: var(--muted); }
.lib-note { padding: 8px 8px 6px; font-size: 12px; color: var(--muted); }
.lib-group {
  position: sticky; top: -4px; z-index: 1; margin: 2px -4px 0; padding: 7px 10px 5px; background: var(--panel);
  border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; color: var(--muted);
}
.lib-item.lib-online { grid-template-columns: 40px 1fr auto; }
.lib-online[aria-busy="true"] { opacity: 1; background: var(--panel-2); }
.lib-online[aria-busy="true"] .lib-meta { color: var(--accent); }
.lib-badge {
  padding: 2px 8px; border: 0; border-radius: 5px; background: var(--panel-2); font-size: 12px; color: var(--muted); white-space: nowrap;
}
.oc-motion { display: block; margin: 8px 2px 0; font-size: 12px; }
.lib-badge.have { background: var(--accent-dim); color: var(--accent); }
.lib-peek {
  position: fixed; z-index: 60; width: min(380px, calc(100vw - 16px)); padding: 8px; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--float);
}
.lib-peek[hidden] { display: none; }
.lib-peek img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 7px; background: var(--panel-2); }
.lib-peek-name { margin: 7px 2px 0; font-size: 13px; font-weight: 600; line-height: 1.3; }
.lib-peek-meta { margin: 2px 2px 1px; font-size: 12px; color: var(--muted); }
.viewer-stats { padding-left: 2px; font-size: 12px; color: var(--viewer-ink); line-height: 1.7; text-shadow: var(--viewer-ink-shadow); }
.viewer-stats b { color: inherit; font-weight: 500; }
/* The tools of the view: one bar, the tool in use tinted */
.viewer-tools {
  position: absolute; right: 16px; top: 16px; display: flex; gap: 2px; padding: 3px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--chrome-shadow);
}
.viewer-tools .icon-btn { width: 30px; height: 30px; background: transparent; }
.viewer-tools .icon-btn.on, .viewer-tools .icon-btn.active { color: var(--accent); background: var(--accent-dim); }
.viewer-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; color: var(--viewer-ink); text-shadow: var(--viewer-ink-shadow); pointer-events: none; }
.viewer-status:empty { display: none; }
.viewer-hint { position: absolute; left: 0; right: 0; bottom: 14px; padding: 0 16px; text-align: center; font-size: 12px; color: var(--viewer-ink); text-shadow: var(--viewer-ink-shadow); opacity: .85; pointer-events: none; }
.viewer-doors {
  position: absolute; left: 16px; bottom: 40px; display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--chrome-shadow);
}
.viewer-doors .label { font-size: 12px; color: var(--faint); padding: 0 6px 0 8px; }
.viewer-doors button {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font-size: 13px;
}
.viewer-doors button:hover { color: var(--text); background: var(--hover); }
.viewer-doors button .dot { width: 6px; height: 6px; box-shadow: none; }
.viewer-doors button.open { color: var(--text); background: var(--panel-2); }
.viewer-doors button.open .dot { background: var(--accent); }
.viewer-doors .sep { width: 1px; height: 16px; background: var(--line-2); margin: 0 4px; }
/* Parts */
.viewer.parts-open .part-card { right: 316px; }
.parts-panel {
  position: absolute; right: 16px; top: 62px; bottom: 40px; width: 290px;
  display: flex; flex-direction: column; gap: 8px; padding: 12px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--chrome-shadow);
}
.parts-head { display: flex; align-items: center; justify-content: space-between; }
.parts-title { font-size: 12px; font-weight: 600; color: var(--muted); }
.parts-title .mono { color: var(--faint); font-weight: 400; letter-spacing: 0; text-transform: none; margin-left: 4px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--accent); font-size: 12px; }
.parts-links { display: flex; gap: 12px; }
.part-row .eye {
  width: 26px; padding: 0; display: grid; place-items: center; background: transparent; color: var(--faint);
}
.part-row .eye svg { width: 15px; height: 15px; }
.part-row .eye:hover { background: var(--hover); }
.part-row.hidden-part .nm, .part-row.hidden-part .md { opacity: .45; }
.part-row.hidden-part .eye { color: var(--accent); }
.parts-panel input {
  height: 32px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--panel-2);
  font-size: 13px; outline: 0;
}
.parts-panel input:focus { border-color: var(--accent-line); }
.parts-list { flex: 1; min-height: 0; overflow-y: auto; margin: 0 -4px; }
.parts-group { font-size: 12px; color: var(--faint); padding: 10px 4px 4px; }
.part-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 7px; cursor: pointer;
}
.part-row:hover { background: var(--panel-2); }
.part-row.active { background: var(--accent-dim); }
.part-row .meta { flex: 1; min-width: 0; }
.part-row .nm { font-size: 13px; font-weight: 500; }
.part-row .md { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-row.removed .nm { color: var(--warn); }
.part-row button {
  flex: none; height: 26px; padding: 0 9px; border: 0; border-radius: 5px;
  background: var(--panel-2); color: var(--text-2); font-size: 12px;
}
.part-row:hover button:not(.eye), .part-row.active button:not(.eye) { background: var(--card); }
.part-row button:hover { color: var(--text); background: var(--hover); }
.part-card {
  position: absolute; right: 16px; bottom: 40px; width: 290px; padding: 14px;
  max-height: calc(100% - 100px); overflow-y: auto;
  border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--chrome-shadow);
}
.part-card .pc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.part-card h4 { margin: 0; font-size: 15px; font-weight: 600; }
.part-card .pc-model { margin-top: 2px; font-size: 13px; color: var(--muted); }
.part-card dl { margin: 10px 0 12px; display: grid; grid-template-columns: 64px 1fr; gap: 4px 8px; font-size: 12px; }
.part-card dt { color: var(--faint); }
.part-card dd { margin: 0; font-family: var(--mono); font-size: 12px; word-break: break-word; }
.part-card .pc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.part-card .pc-actions .btn { flex: 1; height: 30px; font-size: 13px; }
.part-card .icon-btn { width: 24px; height: 24px; border: 0; }
/* object card: an added person / prop selected in the 3D view */
.part-card .oc-title { flex: 1; min-width: 0; }
.part-card .oc-name { width: 100%; font: 600 15px/1.3 inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 7px; padding: 2px 4px; margin-left: -5px; }
.part-card .oc-name:hover, .part-card .oc-name:focus { border-color: var(--line-2); outline: none; }
.part-card .oc-tools { display: flex; gap: 2px; }
.part-card .oc-tools .icon-btn svg { width: 15px; height: 15px; }
.part-card .oc-modes { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 12px 0 10px; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; }
.part-card .oc-modes button { height: 30px; border: 0; border-left: 1px solid var(--line-2); background: none; color: var(--muted); font-size: 13px; }
.part-card .oc-modes button:first-child { border-left: 0; }
.part-card .oc-modes button.active { background: var(--accent); color: #fff; }
.part-card .oc-guide { margin: 2px 0 10px; font-size: 13px; line-height: 1.55; color: var(--text-2); }
.part-card .oc-guide kbd { font: 11px var(--mono); padding: 0 4px; border: 1px solid var(--line-2); border-radius: 5px; }
.part-card .oc-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.part-card .oc-quick .btn { flex: 1; height: 30px; font-size: 13px; }
.part-card .oc-note { margin-top: 8px; font-size: 12px; color: var(--faint); }
.part-card .oc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.part-card .oc-chips .chip { height: 28px; padding: 0 10px; font-size: 12px; border: 1px solid var(--line-2); border-radius: 14px; background: none; color: var(--text-2); }
.part-card .oc-chips .chip.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.part-card .oc-swatches { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.part-card .oc-swatches .sw { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-2); padding: 0; }
.part-card .oc-swatches .sw.active { outline: 2px solid var(--accent); outline-offset: 2px; }
.part-card .oc-swatches .sw.orig { grid-column: span 7; aspect-ratio: auto; height: 26px; border-radius: 13px; background: none; color: var(--text-2); font-size: 12px; }
.part-card .oc-axes { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--text-2); }
.part-card .oc-axes i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.part-card .oc-height { margin: 0 0 8px; }
.part-card .oc-tip { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line-2); font-size: 12px; line-height: 1.5; color: var(--faint); }
.part-tip {
  position: fixed; z-index: 30; pointer-events: none; transform: translate(12px, 12px);
  padding: 6px 9px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--panel);
  font-size: 12px; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.part-tip .md { color: var(--faint); font-size: 12px; }
.ocky-caption {
  position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); max-width: calc(100% - 64px); z-index: 5;
  padding: 9px 16px; border-radius: 12px; background: rgba(15, 18, 24, .78); color: #fff;
  font-size: 14px; font-weight: 500; text-align: center; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); pointer-events: none;
}
.ocky-caption[hidden] { display: none; }
.seq-caption {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%); max-width: calc(100% - 360px);
  padding: 7px 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--panel);
  color: var(--text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.part-card .pc-steps { margin: 0 0 12px; padding-left: 18px; font-size: 12px; color: var(--text-2); }
.part-card .pc-steps li + li { margin-top: 2px; }
.part-card .pc-steps li:last-child { color: var(--text); font-weight: 500; }
.part-card .pc-pre { margin: -4px 0 10px; font-size: 12px; color: var(--warn); }
.part-card .pc-sub { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.viewer.busy .part-row button, .viewer.busy .part-card [data-toggle] { opacity: .5; }
.viewer.dragover { box-shadow: inset 0 0 0 2px var(--accent); }

/* ---------- Co-Space ---------- */
.co > .panel-head { gap: 8px; }
.co > .panel-head h2 { margin-right: auto; }
.co > .panel-head .btn { height: 30px; padding: 0 10px; }
.participants { display: flex; padding-left: 6px; }
.participants:empty { display: none; }
.participants span {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 600; border: 2px solid var(--side); margin-left: -6px; background: color-mix(in srgb, var(--text) 9%, var(--side)); color: var(--muted);
}
.participants span.ai { color: var(--accent); background: var(--accent-dim); }

.chat { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 16px; scrollbar-width: thin; }
/* A message: who (a round mark), then name, role and time on one quiet line, then the words. OCKY's answer sits in
   a card: it is the long, structured one. */
.msg { display: flex; gap: 10px; }
.msg-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--text) 9%, transparent); font-size: 11px; font-weight: 600; color: var(--muted);
}
.msg.ai .msg-avatar { color: var(--accent); background: var(--accent-dim); }
.msg-body { min-width: 0; flex: 1; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; min-height: 20px; font-size: 13px; }
.msg-name { font-weight: 600; }
.msg-role { font-size: 12px; color: var(--faint); }
.msg-time { margin-left: auto; color: var(--faint); font-size: 12px; white-space: nowrap; }
.msg-text { margin-top: 2px; font-size: 14px; line-height: 1.55; color: var(--text); white-space: pre-wrap; word-wrap: break-word; }
.msg.ai .msg-text { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-top: 6px; }
.msg-text ul { margin: 6px 0 0; padding-left: 18px; }
.msg-stop { margin-left: 8px; padding: 1px 9px; border: 1px solid var(--line, #d0d5dd); border-radius: 999px; background: transparent; color: var(--text-2, #475467); font: inherit; font-size: 12px; cursor: pointer; }
.msg-stop:hover { border-color: #d92d20; color: #d92d20; }
.msg-status { margin-top: 6px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--faint); font-family: var(--mono); }
/* 3D scripts OCKY ran, collapsed under its answer */
.ocky-script { margin-top: 6px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); font-size: 12px; }
.ocky-script summary { padding: 5px 9px; cursor: pointer; color: var(--muted); font-family: var(--mono); list-style: none; }
.ocky-script summary::-webkit-details-marker { display: none; }
.ocky-script summary::before { content: "▸ "; }
.ocky-script[open] summary::before { content: "▾ "; }
.ocky-script.ok summary { color: var(--ok); }
.ocky-script.failed summary { color: var(--bad); }
.ocky-script pre { margin: 0; padding: 8px 10px; max-height: 240px; overflow: auto; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.5; }
.ocky-script .err { padding: 4px 10px; color: var(--bad); font-family: var(--mono); }
/* OCKY Markdown answers */
.msg-text.md { white-space: normal; line-height: 1.55; }
.msg-text.md > :first-child { margin-top: 0; }
.msg-text.md > :last-child { margin-bottom: 0; }
.msg-text.md p { margin: 0 0 8px; }
.msg-text.md h1, .msg-text.md h2, .msg-text.md h3, .msg-text.md h4 { margin: 12px 0 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.msg-text.md ul, .msg-text.md ol { margin: 4px 0 8px; padding-left: 20px; }
.msg-text.md li { margin: 2px 0; }
.msg-text.md code { font-family: var(--mono); font-size: 12px; padding: 1px 4px; border-radius: 5px; background: var(--panel); border: 1px solid var(--line); }
.msg-text.md pre { overflow-x: auto; padding: 8px 10px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); }
.msg-text.md pre code { padding: 0; border: 0; }
.msg-text.md table { border-collapse: collapse; width: 100%; margin: 6px 0 8px; font-size: 12px; display: block; overflow-x: auto; }
.msg-text.md th, .msg-text.md td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; min-width: 84px; overflow-wrap: break-word; }
.msg-text.md th { white-space: nowrap; }
.msg-text.md td:first-child { white-space: nowrap; }   /* a date or an ID stays on one line */
.msg-text.md table { scrollbar-width: thin; }   /* a wide table scrolls sideways inside the message */
.msg-text.md th { background: var(--panel); font-weight: 600; }
.msg-text.md blockquote { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--warn); color: var(--muted); }
.msg-text.md a { color: var(--accent); }
.msg-text.md .sow-fig { margin: 8px 0 10px; }
.msg-text.md .sow-fig img {
  display: block; width: 100%; max-height: 320px; object-fit: contain; cursor: zoom-in;
  background: #fff; border: 1px solid var(--line); border-radius: 7px;
}
.msg-text.md .sow-fig figcaption { margin-top: 4px; font-size: 12px; color: var(--faint); font-family: var(--mono); }
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; margin: 6px 6px 0 0;
  padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 7px; font-size: 12px; font-family: var(--mono); color: var(--muted);
}
.sys { text-align: center; font-size: 12px; color: var(--faint); }
.typing span { display: inline-block; width: 4px; height: 4px; margin-right: 3px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: 1; } }

.composer { flex: none; padding: 0 12px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; container: composer / inline-size; }
.composer select, .composer input, .composer textarea, .field input, .field select, .field textarea {
  background: var(--panel-2); border: 1px solid transparent; border-radius: var(--r-ctl); outline: 0; height: 32px; padding: 0 10px; font-size: 13px;
}
/* Who writes: one quiet line. Signed in, it is the account's name and role and reads as plain text. */
.composer-row { display: flex; align-items: center; gap: 2px; padding: 0 4px; font-size: 12px; color: var(--faint); }
.composer-row .as-label { flex: none; margin-right: 2px; white-space: nowrap; }
.composer-row input, .composer-row select { height: 24px; padding: 0 6px; background: transparent; font-size: 12px; color: var(--text-2); }
.composer-row input { flex: 0 1 132px; min-width: 56px; }
@supports (field-sizing: content) { .composer-row input { field-sizing: content; flex: 0 1 auto; max-width: 160px; } }   /* as wide as the name */
.composer-row select { flex: none; width: auto; max-width: 150px; }
.composer-row input:hover:not(:disabled), .composer-row select:hover:not(:disabled),
.composer-row input:focus, .composer-row select:focus { background: var(--panel-2); }
.composer-row input:focus, .composer-row select:focus { border-color: var(--accent-line); }
.composer-row :disabled { opacity: 1; -webkit-text-fill-color: currentColor; appearance: none; }
/* The message box: the words on top, under them what can go with the message and the two ways to send it */
.composer-input {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 8px 8px 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .5);
  transition: border-color .15s;
}
.composer-input:focus-within { border-color: var(--accent-line); }
.composer-input textarea { width: 100%; border: 0; background: transparent; height: auto; min-height: 40px; max-height: 120px; padding: 0; resize: none; font-size: 14px; line-height: 1.5; }
.composer-tools { display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.tool {
  min-width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0;
  border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font-size: 12px; font-weight: 500;
  transition: color .15s, background .15s;
}
.tool svg { width: 16px; height: 16px; flex: none; }
#sendModeBtn svg { stroke-width: 2.6; }
.tool:hover:not(:disabled) { color: var(--text); background: var(--hover); }
.tool:disabled { opacity: .4; cursor: default; }
.tool-label, .tool #handLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool.call { color: var(--accent); }
.tool.call.on { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.tool.hand.on { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
@container composer (min-width: 400px) {   /* room to say it: "Hand raised" / "Lower hand" */
  .tool.hand.on { padding: 0 9px 0 7px; }
  .tool.hand.on #handLabel { position: static; width: auto; height: auto; clip-path: none; }
}
.send-group { position: relative; margin-left: auto; flex: none; display: flex; align-items: center; gap: 6px; }
.send-group .btn { height: 30px; padding: 0 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
  border: 0; border-radius: var(--r-ctl); background: var(--panel-2); color: var(--text-2); font-size: 13px;
  transition: color .15s, background .15s;
}
.chip svg { width: 14px; height: 14px; }
.chip:hover { color: var(--text); background: var(--hover); }
.chip.accent { color: var(--accent); background: var(--accent-dim); }
.chip.accent:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
.send-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 30; width: 250px; padding: 4px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--float);
}
.send-menu[hidden] { display: none; }
.send-menu [data-mode], .send-menu [data-opkey] {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-align: left;
  border: 0; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer;
}
.send-menu [data-mode]:hover, .send-menu [data-opkey]:hover { background: var(--panel-2); }
.send-menu [data-mode] svg, .send-menu [data-opkey] svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.send-menu [data-mode] span, .send-menu [data-opkey] span { display: flex; flex-direction: column; }
.send-menu [data-mode] b, .send-menu [data-opkey] b { font-size: 13px; font-weight: 600; }
.send-menu [data-mode] small, .send-menu [data-opkey] small { font-size: 12px; color: var(--faint); }
.send-menu [aria-checked="true"] { background: var(--accent-dim); }
.send-menu [aria-checked="true"] svg { color: var(--accent); }
.send-menu-hint { padding: 6px 10px 4px; font-size: 12px; color: var(--faint); border-top: 1px solid var(--line); margin-top: 4px; }
.chip.on { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.chip .mono { font-size: 12px; }

/* ---------- Module placeholder ---------- */
.module { padding: 0; }
/* ---------- Home ---------- */
.home { flex: 1; overflow-y: auto; padding: 40px 32px; }
.home-inner { max-width: 1040px; margin: 0 auto; }
.home .eyebrow { font-size: 13px; color: var(--faint); font-weight: 500; }
.home h1 { margin: 8px 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -.2px; }
.home .lede { margin: 0; color: var(--muted); max-width: 640px; font-size: 15px; line-height: 1.55; }
.home-inner.narrow { max-width: 760px; }
.home-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home-card {
  display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--text); text-decoration: none; transition: border-color .15s, background .15s;
}
a.home-card:hover { border-color: var(--line-2); background: var(--hover); }
.home-card .hc-top { display: flex; align-items: center; justify-content: space-between; }
.home-card .hc-area { font-size: 12px; color: var(--faint); }
.home-card h3 { margin: 4px 0 0; font-size: 16px; font-weight: 600; }
.home-card p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.home-card .hc-go { margin-top: auto; padding-top: 12px; font-size: 13px; font-weight: 500; color: var(--accent); }
.home-card .hc-top { min-height: 20px; }
.home-card.soon h3, .home-card.soon p { color: var(--muted); }
.home-card.soon .hc-go { color: var(--muted); }
/* Home: a warning when the dispatch list is behind, and the week's figures (each opens the list narrowed to it) */
.home-alert { margin-top: 18px; padding: 10px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); font-size: 13px; line-height: 1.45; }
.home-kpis { margin-top: 22px; }
.home-kpi { display: block; color: inherit; text-decoration: none; transition: border-color .15s; }
.home-kpi:hover { border-color: var(--line-2); }
.home-kpi .kpi-value { font-size: 26px; letter-spacing: -.02em; }
.home-kpi .kpi-value small { font-size: 13px; font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.home-kpi.bad .kpi-value { color: var(--bad); }
.home-kpi.warn .kpi-value { color: var(--warn); }
@media (max-width: 700px) { .home-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.home h2 { margin: 32px 0 10px; font-size: 13px; color: var(--muted); font-weight: 500; }
.home-list { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.home-wo {
  display: grid; grid-template-columns: 190px minmax(0, 1fr) 150px auto; gap: 16px; align-items: center; padding: 12px 16px;
  color: var(--text); text-decoration: none; font-size: 13px;
}
.home-wo + .home-wo { border-top: 1px solid var(--line); }
.home-wo:hover { background: var(--panel-2); }
.home-wo .who { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.home-wo .who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-wo .tech { color: var(--faint); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-wo .sk { margin: 4px 0; }
/* Data Center: what is planned, as plain rows */
.plan-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 16px; padding: 14px 16px; font-size: 13px; }
.plan-row + .plan-row { border-top: 1px solid var(--line); }
.plan-row b { font-weight: 600; }
.plan-row span { color: var(--muted); }
.plan-note { margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--muted); }
.plan-note a { color: var(--accent); text-decoration: none; white-space: nowrap; }
.plan-note a:hover { text-decoration: underline; }
@media (max-width: 600px) { .plan-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.home-wo .sum { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Modal ---------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(5, 6, 8, .72); display: grid; place-items: center; padding: 16px; z-index: 50; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-panel); box-shadow: var(--float); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.modal-foot:empty { display: none; }
.btn { height: 32px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: var(--r-ctl); border: 0; background: var(--panel-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background .15s; }
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { background: var(--hover); }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 13px; color: var(--muted); }
.field input, .field select { height: 36px; font-size: 13px; }
.field textarea { height: 80px; padding: 8px 10px; resize: vertical; font-size: 13px; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row.three { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr); }
.field-row .field { min-width: 0; }
.field-row .field input, .field-row .field select { width: 100%; }
/* Tools: knowledge upload */
.tools .home-inner { max-width: 860px; }
.tool-card { margin-top: 24px; }
.drop {
  display: grid; justify-items: center; gap: 4px; padding: 28px 16px; border: 1.5px dashed var(--line-2); border-radius: 12px;
  color: var(--muted); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.drop svg { width: 26px; height: 26px; margin-bottom: 4px; }
.drop b { color: var(--text); font-size: 14px; font-weight: 600; }
.drop:hover, .drop.over { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.tool-chosen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tool-chosen:empty { display: none; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 4px 4px 10px; border: 0; border-radius: var(--r-ctl); background: var(--panel-2); font-size: 13px; overflow-wrap: anywhere; }
.file-chip .mono { color: var(--faint); font-size: 12px; white-space: nowrap; }
.file-chip button { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 5px; background: none; color: var(--muted); cursor: pointer; }
.file-chip button:hover { color: var(--text); background: var(--line); }
.file-chip button svg { width: 11px; height: 11px; }
.tool-row { margin-top: 14px; display: grid; grid-template-columns: 130px 170px minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.tool-row .field { margin-bottom: 0; }
.tool-jobs { display: grid; gap: 8px; }
.tool-jobs .doc-job { margin-top: 0; background: var(--card); border-color: var(--line); padding: 14px 16px; }
@media (max-width: 720px) {
  .tool-row { grid-template-columns: 1fr 1fr; }
  .tool-row .field:nth-child(3), .tool-row .btn { grid-column: 1 / -1; }
}
.kb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kb-head input { width: 260px; max-width: 100%; height: 32px; margin-bottom: 8px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--panel-2); font-size: 13px; outline: 0; }
.kb-head input:focus { border-color: var(--accent-line); }
.kb-title { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.kb-title .mono, .kb-sows summary .mono { margin-left: 4px; font-weight: 400; color: var(--faint); font-size: 12px; }
.kb-sows { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.kb-sows summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.kb-sows[open] summary { margin-bottom: 10px; }
#toolDocs { overflow-x: auto; }
/* Report preview: OCKY's draft of the technician's report, every field editable */
.modal.wide { width: min(880px, 100%); }
.modal-foot .foot-gap { flex: 1; }
.report-wait { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px 0; color: var(--muted); font-size: 13px; }
.report-mode { margin-bottom: 12px; padding: 7px 10px; border-radius: var(--r-ctl); background: color-mix(in srgb, var(--warn) 11%, transparent); color: var(--warn); font-size: 12px; font-weight: 500; text-align: center; }
.report-note { margin-bottom: 12px; padding: 8px 12px; border-radius: var(--r-ctl); background: var(--panel-2); color: var(--text-2); font-size: 13px; line-height: 1.5; }
.report-missing { margin-bottom: 12px; padding: 10px 12px; border-radius: var(--radius); background: color-mix(in srgb, var(--warn) 11%, transparent); font-size: 13px; }
.report-missing b { color: var(--warn); font-weight: 600; }
.report-missing ul { margin: 6px 0 0; padding-left: 18px; }
.report-missing li button { padding: 2px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.report-missing li button:hover { text-decoration: underline; }
.report-ok { margin-bottom: 12px; font-size: 13px; color: var(--ok); }
.report-form textarea, .report-parts input {
  width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-ctl); background: var(--panel-2); font-size: 13px; outline: none;
}
.report-form textarea { display: block; resize: vertical; line-height: 1.5; }
.report-form textarea:focus, .report-parts input:focus { border-color: var(--accent); }
.report-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; }
.report-grid .field { margin-bottom: 0; }
.report-grid .field.wide { grid-column: span 2; }
.report-parts { display: grid; gap: 6px; justify-items: start; }
.rp-head, .rp-row { width: 100%; display: grid; grid-template-columns: 2fr 1.3fr 1.3fr .6fr 1.2fr 28px; gap: 6px; align-items: center; }
.rp-head { font-size: 12px; color: var(--faint); }
.rp-row input { height: 32px; padding: 0 8px; min-width: 0; }
.rp-row .icon-btn svg { width: 14px; height: 14px; }
.report-photos { display: flex; flex-wrap: wrap; gap: 8px; }
.rph { position: relative; width: 84px; height: 84px; border: 1px solid var(--line-2); border-radius: 7px; overflow: hidden; background: var(--panel-2); }
.rph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rph button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(10, 12, 15, .7); color: #fff; cursor: pointer; }
.rph button svg { width: 11px; height: 11px; }
.report-result { margin-top: 14px; padding: 8px 12px; border-radius: 7px; font-size: 13px; line-height: 1.5; border: 1px solid var(--line-2); }
.report-result.ok { color: var(--ok); border-color: var(--ok-line); }
.report-result.bad { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.report-handin p { margin: 0; }
.report-result.report-real { border-color: var(--warn); border-width: 2px; }
.report-handin ul { margin: 8px 0 0; padding-left: 18px; color: var(--warn); }
.report-handin-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.report-handin-go a.btn { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: default; }
@media (max-width: 720px) {
  .report-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-head { display: none; }
  .rp-row { grid-template-columns: 1fr 1fr; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .rp-row input:first-child { grid-column: 1 / -1; }
  .rp-row .icon-btn { grid-column: 1 / -1; justify-self: end; }
  .modal-foot { flex-wrap: wrap; }
}
.report { font-size: 13px; }
.report h4 { margin: 18px 0 8px; font-size: 12px; color: var(--muted); }
.report h4:first-child { margin-top: 0; }
.report p { margin: 0; color: var(--text-2); }
.report dl { margin: 0; display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; }
.report dt { color: var(--faint); }
.report dd { margin: 0; font-family: var(--mono); font-size: 13px; }
.report ol { margin: 0; padding-left: 18px; color: var(--text-2); }

/* ---------- Toast ---------- */
/* The same dark slip in both themes, so it stands off a light page too */
.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: min(520px, calc(100vw - 32px));
  background: #20262f; color: #eceff3; border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius); box-shadow: var(--float);
  padding: 10px 14px; font-size: 13px; line-height: 1.45; z-index: 60; cursor: pointer;
}
.toast.ok::before, .toast.bad::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; vertical-align: 1px; }
.toast.ok::before { background: #3dd6a3; }
.toast.bad::before { background: #f47a70; }

/* ---------- While something loads: its shape, breathing ---------- */
.sk, .sk-block {
  display: block; border-radius: 5px;
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--hover) 37%, var(--panel-2) 63%) 100% 50% / 400% 100%;
  animation: sk 1.4s ease infinite;
}
.sk { height: 12px; margin: 8px 0; }
.sk-block { margin-top: 24px; border-radius: var(--radius); }
.wo.sk-card { cursor: default; pointer-events: none; }
.wo.sk-card + .wo.sk-card { margin-top: 6px; }
@keyframes sk { to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .sk, .sk-block { animation: none; } }

/* ---------- Scrollbars ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ---------- Responsive ---------- */
.pane-switch { display: none; }

@media (max-width: 1280px) {
  .workspace { --orders-w: 260px; --co-w: 340px; }
}

/* Visual Space adapts to its own width (panels are resizable), not the window's */
.workspace > .visual { container: visual / inline-size; }
.panel-head h2, .seg button { white-space: nowrap; }
@container visual (max-width: 1000px) {
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
@container visual (max-width: 640px) {
  .dispatch-cols { grid-template-columns: minmax(0, 1fr); }
}
@container visual (max-width: 760px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-head .crumb { display: none; }
}
@container visual (max-width: 560px) {
  .visual .panel-head { padding: 0 12px; gap: 8px; }
  .visual .panel-head h2 { display: none; }
  .visual-body { padding: 14px 14px 24px; }
  .v-title { font-size: 21px; flex-wrap: wrap; }
  .kpis { gap: 8px; }
  .kpi { padding: 10px 12px; }
  .card { padding: 12px; }
  .charger { flex-direction: column; align-items: stretch; }
  .charger .unit-art { align-self: center; max-width: 100%; height: 170px; }
  .charger:has(.unit-art) .ports { min-width: 0; }
  .card-head { flex-wrap: wrap; gap: 6px; }
  .tl-row { flex-direction: column; gap: 2px; }
  .tl-time { width: auto; }
  .facts { grid-template-columns: 70px minmax(0, 1fr); }
  .table { display: block; overflow-x: auto; }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .workspace { gap: 0; padding: 0; }
  .workspace > .panel { border: 0; border-radius: 0; box-shadow: none; }
  .topbar { gap: 12px; padding: 0 16px; }
  .nav { overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .nav::-webkit-scrollbar { display: none; }
  .nav-menu { position: fixed; left: 16px; right: 16px; top: 52px; min-width: 0; }
  .home { padding: 24px 16px; }
  .home-grid { grid-template-columns: 1fr; }
  .home-wo { grid-template-columns: 1fr auto; }
  .home-wo .sum, .home-wo .tech { display: none; }
  .nav a { white-space: nowrap; padding: 6px 8px; }
  .topbar-right .sys-status, .topbar-right .clock { display: none; }
  .pane-switch {
    display: flex; gap: 2px; padding: 8px 12px 9px;
  }
  .pane-switch button {
    flex: 1; height: 36px; border: 0; border-radius: var(--r-ctl); background: transparent; color: var(--muted); font-size: 14px;
  }
  .pane-switch button.active { color: var(--text); background: var(--panel); font-weight: 500; box-shadow: 0 0 0 1px var(--line); }
  .workspace { grid-template-columns: 1fr; height: calc(100vh - 52px - 53px); height: calc(100dvh - 52px - 53px); }
  .workspace.module-mode { height: calc(100vh - 52px); height: calc(100dvh - 52px); }   /* a page has no area tabs above it */
  .workspace > .panel { display: none; border-left: 0; }
  .resizer { display: none; }
  .workspace[data-pane="orders"] > .orders,
  .workspace[data-pane="visual"] > .visual,
  .workspace[data-pane="co"] > .co { display: flex; }
  .workspace.module-mode > .module { display: flex; }
  .visual-body { padding: 16px; }
  .panel-head .crumb, .viewer-hint { display: none; }
  .parts-panel { left: 16px; right: 16px; width: auto; top: 110px; bottom: 96px; }
  .part-card { left: 16px; right: 16px; width: auto; bottom: 96px; }
  .viewer.parts-open .part-card { right: 16px; }
  .seq-caption { max-width: calc(100% - 32px); top: 110px; }
  .charger svg.unit { width: 70px; }
}

/* Narrow screens: all five sections in a panel under the top bar, opened by the menu button */
@media (max-width: 640px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 10px;
    border: 1px solid var(--line-2); border-radius: 7px; background: transparent; font-size: 14px; font-weight: 500;
  }
  .nav-toggle svg { width: 16px; height: 16px; flex: none; }
  .nav-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-toggle[aria-expanded="true"] { background: var(--panel-2); }
  .topbar-right { margin-left: auto; }
  .nav {
    position: fixed; left: 0; right: 0; top: 52px; z-index: 45; display: none; flex: none; flex-direction: column; gap: 2px;
    padding: 8px 12px 12px; overflow: visible; mask-image: none; background: var(--panel); border-bottom: 1px solid var(--line-2);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .2);
  }
  .nav.open { display: flex; }
  .nav a { padding: 10px 12px; font-size: 15px; }
  .nav-item { display: block; }
  .nav-item .chev { display: none; }
  /* EV Program's one entry sits under it, always on show */
  .nav-menu, .nav-item.suppress:not(.open) .nav-menu { position: static; visibility: visible; opacity: 1; transform: none; padding: 0 0 0 14px; }
  .nav-menu::before { display: none; }
  .nav-menu a { margin: 0; padding: 8px 12px; }
  .nav-menu a b { font-size: 14px; }
}

@media (max-width: 560px) {
  .brand span { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-right .avatar { display: none; }
  /* 3D: toolbar on the first row, the model picker under it; mesh statistics are for desktop */
  .viewer-info { top: 56px; max-width: calc(100% - 32px); }
  .viewer-stats { display: none; }
}

/* ---------- SOW walkthrough (3D) ---------- */
.walk-menu {
  position: absolute; top: 44px; right: -1px; z-index: 30; width: 340px; max-width: calc(100vw - 32px); max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--float);
}
.walk-menu[hidden], .walk-menu [hidden] { display: none; }
.light-menu {
  position: absolute; top: 44px; right: -1px; z-index: 30; width: 270px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; gap: 10px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: var(--float);
}
.light-menu[hidden] { display: none; }
.light-head { display: flex; align-items: center; justify-content: space-between; }
.light-title { font-size: 12px; font-weight: 600; color: var(--muted); }
.light-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: baseline; }
.light-row label { font-size: 13px; color: var(--text); }
.light-row .mono { font-size: 12px; color: var(--muted); }
.light-row .light-note { grid-column: 1 / -1; font-size: 12px; color: var(--faint); line-height: 1.35; }
.light-row input[type=range] { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.walk-search {
  flex: none; margin: 6px; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px;
}
.walk-search:focus { outline: none; border-color: var(--accent); }
.walk-list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 4px 4px; overscroll-behavior: contain; }
.walk-group-head {
  position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 8px 10px 4px;
  background: var(--panel); color: var(--muted); font-size: 12px; font-weight: 600;
}
.walk-count { font-family: var(--mono); font-weight: 400; }
.walk-menu button {
  display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: baseline; width: 100%; padding: 6px 10px;
  text-align: left; border: 0; border-radius: 7px; background: transparent; color: var(--text); font-size: 13px; line-height: 1.35; cursor: pointer;
}
.walk-menu button .mono { color: var(--muted); font-size: 12px; }
.walk-menu button:hover { background: var(--panel-2); }
.walk-menu button.current { background: var(--accent-dim); }
.walk-menu button.current .mono { color: var(--accent); }
.walk-empty { padding: 10px; }
.walk {
  position: absolute; left: 12px; top: 12px; bottom: 12px; width: 340px; z-index: 20; display: flex; flex-direction: column; gap: 12px;
  padding: 12px 14px 14px; overflow-y: auto; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.walk[hidden] { display: none; }
.viewer.walk-open .viewer-info, .viewer.walk-open .viewer-doors { left: 364px; }
.viewer.walk-open .viewer-hint { left: 352px; }
.walk-grip { display: none; }
.walk-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.walk-prog {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 8px; margin-left: -8px;
  border: 0; border-radius: 7px; background: transparent; color: var(--muted); font-size: 13px; cursor: pointer;
}
.walk-prog:hover { background: var(--panel-2); }
.walk-prog .mono { color: var(--accent); font-size: 12px; }
.walk-prog svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.walk-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; flex: none; }
.walk-bar i { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.walk-steps { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 12px; flex: none; }
.walk-steps li { display: flex; gap: 10px; padding: 9px 10px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--line); }
.walk-steps li:last-child { border-bottom: 0; }
.walk-steps li span:first-child { flex: none; width: 40px; color: var(--faint); font-size: 12px; padding-top: 2px; }
.walk-steps li:hover { background: var(--panel-2); }
.walk-steps li.done span:last-child { color: var(--muted); }
.walk-steps li.on { background: var(--accent-dim); }
.walk-steps li.on span { color: var(--accent); font-weight: 600; }
.walk-now { display: flex; flex-direction: column; gap: 8px; }
.walk-short { font-size: 21px; font-weight: 650; line-height: 1.3; }
.walk-short .mono { margin-right: 8px; font-size: 13px; font-weight: 500; color: var(--accent); vertical-align: 2px; }
.walk-tool { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.walk-tool svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.walk-dots { display: flex; gap: 6px; }
.walk-dots i { width: 22px; height: 5px; border-radius: 3px; background: var(--line-2); }
.walk-dots i.past { background: var(--accent-line); }
.walk-dots i.on { background: var(--accent); }
.walk-say { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.walk-cta { display: flex; gap: 8px; align-items: stretch; }
.viewer.walk-open .part-card { display: none; }
.walk-back {
  flex: none; width: 48px; height: 48px; align-self: flex-end; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer;
}
.walk-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.walk-next {
  flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 0; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); font-size: 16px; font-weight: 600; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.walk-next:hover { filter: brightness(1.08); }
.walk-back:disabled, .walk-next:disabled, .walk-opt:disabled, .walk-more .chip:disabled { opacity: .45; cursor: default; filter: none; }
.walk-branch { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.walk-q { font-size: 15px; font-weight: 600; }
.walk-opt {
  min-height: 46px; padding: 8px 14px; text-align: left; border: 1px solid var(--accent-line); border-radius: 12px;
  background: var(--accent-dim); color: var(--text); font-size: 15px; cursor: pointer;
}
.walk-opt:hover { border-color: var(--accent); }
.walk-more { display: flex; flex-wrap: wrap; gap: 6px; }
.walk-more .chip { height: 34px; padding: 0 10px; font-size: 13px; border-radius: 12px; }
.walk-more .chip.on-x { color: var(--text); background: var(--panel-2); border-color: var(--line-2); }
.walk-note { font-size: 14px; line-height: 1.55; padding: 10px 12px; border-left: 3px solid var(--warn); border-radius: 0 12px 12px 0; background: var(--panel-2); color: var(--text-2); }
.walk-text { font-size: 14px; line-height: 1.55; padding: 10px 12px; border-radius: 12px; background: var(--panel-2); color: var(--text-2); }
.walk-assets { font-size: 13px; border-top: 1px solid var(--line); padding-top: 10px; margin-top: auto; }
.walk-assets summary { cursor: pointer; color: var(--muted); }
.walk-asset { margin-top: 10px; }
/* Phone-sized viewer: the panel becomes a bottom sheet with the 3D above it */
@container visual (max-width: 640px) {
  .walk {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62%; gap: 10px;
    padding: 4px 16px calc(14px + env(safe-area-inset-bottom)); border-radius: 16px 16px 0 0; border-bottom: 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, .22);
  }
  .walk-grip { display: grid; place-items: center; flex: none; height: 18px; margin: 0 -16px; border: 0; background: transparent; cursor: pointer; }
  .walk-grip span { width: 40px; height: 4px; border-radius: 2px; background: var(--line-2); }
  .walk.min .walk-more, .walk.min .walk-note, .walk.min .walk-text, .walk.min .walk-assets,
  .walk.min .walk-steps, .walk.min .walk-tool, .walk.min .walk-dots { display: none; }
  .walk-short { font-size: 21px; }
  .walk-more { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; }
  .walk-more .chip { flex: none; }
  .walk-assets { margin-top: 0; }
  .viewer.walk-open .viewer-info, .viewer.walk-open .viewer-doors, .viewer.walk-open .viewer-hint { display: none; }
}

/* ---------- OCKY new-document job card (chat) ---------- */
.doc-job { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel-2); font-size: 13px; }
.doc-head { display: flex; align-items: center; gap: 6px; font-weight: 600; margin-bottom: 6px; }
.doc-head svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; }
.doc-stages { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.doc-stages li { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.doc-stages li .ic { width: 14px; text-align: center; font-family: var(--mono); }
.doc-stages li .t { margin-left: auto; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.doc-stages li.running { color: var(--text); }
.doc-stages li.running .ic { color: var(--accent); animation: doc-spin 1s linear infinite; display: inline-block; }
.doc-stages li.done .ic { color: var(--ok); }
.doc-stages li.failed, .doc-stages li.failed .ic { color: var(--bad); }
@keyframes doc-spin { to { transform: rotate(360deg); } }
.doc-note { color: var(--muted); line-height: 1.45; }
.doc-note.ok { color: var(--text-2); }
.doc-note.ok::before { content: "✓ "; color: var(--ok); }
.doc-note.bad { color: var(--bad); }
.doc-note.warn { color: var(--warn); }
.doc-errs.warn { color: var(--warn); }
.doc-about { margin: -2px 0 6px 21px; font-size: 12px; color: var(--muted); }
.doc-errs { margin: 4px 0 0; padding-left: 18px; color: var(--bad); font-family: var(--mono); font-size: 12px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.doc-actions .btn { height: 28px; padding: 0 10px; font-size: 12px; }

.msg-role.operator { color: var(--warn); border-color: var(--warn); }
.msg-commit { margin-top: 6px; font-size: 12px; color: var(--muted); }
.msg-commit .mono { color: var(--text-2); }

/* Photos for OCKY: waiting above the message box, and in chat messages */
.pending-photos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.pending-photos[hidden] { display: none; }
.pending-photo { position: relative; }
.pending-photo img { width: 52px; height: 52px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line-2); display: block; }
.pending-photo button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: var(--bad); color: #fff; font-size: 12px; line-height: 18px; padding: 0; cursor: pointer; }
.pending-hint { font-size: 12px; color: var(--muted); }
.msg-photos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-photo { width: 120px; height: 90px; object-fit: cover; border-radius: 7px; border: 1px solid var(--line-2); cursor: zoom-in; }

/* Feedback under OCKY answers */
.msg-fb { display: flex; gap: 4px; margin-top: 6px; }
.msg-fb button { height: 24px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: 7px; background: transparent;
  color: var(--muted); font-size: 12px; cursor: pointer; }
.msg-fb button:hover { color: var(--text); border-color: var(--muted); }
.msg-fb.done { font-size: 12px; color: var(--muted); }

/* Links inside the workbench panels follow the theme accent instead of the browser default */
.visual-body a:not(.btn), .msg-text a { color: var(--accent); text-decoration: none; }
.visual-body a:not(.btn):hover, .msg-text a:hover { text-decoration: underline; }
/* 3D: which cabinet the model is, when the work order is a different unit */
.viewer-notice {
  position: absolute; left: 16px; bottom: 84px; max-width: min(480px, calc(100% - 32px)); padding: 7px 10px;
  border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--panel); color: var(--text-2);
  font-size: 12px; line-height: 1.4; box-shadow: var(--chrome-shadow);
}
.viewer-notice::before { content: "⚠ "; color: var(--warn); }
.viewer-notice[hidden] { display: none; }
.viewer.walk-open .viewer-notice { display: none; }
.viewer.parts-open .viewer-notice { max-width: min(480px, calc(100% - 360px)); }
/* Co-Space: one-click questions for OCKY on a quiet work order */
.chat-start { margin: 18px auto 0; max-width: 300px; display: flex; flex-direction: column; gap: 6px; text-align: center; }
.chat-start-title { font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 2px; }
.chat-start button {
  padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--text);
  font-size: 13px; cursor: pointer; text-align: left;
}
.chat-start button:hover { border-color: var(--accent-line); background: var(--accent-dim); }
.chat-start-hint { font-size: 12px; color: var(--faint); margin-top: 4px; line-height: 1.4; }
.home-wo > span:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- AI Co-Space (#/ai-co-space): the 3D model and OCKY, no work orders ---------- */
.ai-only { display: none; }
.workspace.ai-mode .ai-only { display: inline-flex; }
.workspace.ai-mode { grid-template-columns: minmax(0, 1fr) var(--co-w); }
.workspace.ai-mode > .orders,
.workspace.ai-mode .visual .seg,
.workspace.ai-mode .visual .crumb,
.workspace.ai-mode #reportBtn,
.workspace.ai-mode #handBtn,
.workspace.ai-mode #participants,
.workspace.ai-mode [data-send="chat"],
.workspace.ai-mode .send-menu-hint { display: none; }
#aiNewChat { margin-left: auto; }
body:has(.workspace.ai-mode) .pane-switch [data-pane="orders"] { display: none; }
@media (max-width: 900px) {
  .workspace.ai-mode { grid-template-columns: 1fr; }
  .workspace.ai-mode > .orders { display: none !important; }
}
/* askText / askConfirm dialogs */
.ask-label { display: block; font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 8px; }
.ask-text { font-size: 13px; color: var(--text-2); line-height: 1.5; margin: 0; }
#askField { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: 13px; resize: vertical; }
#askField:focus { outline: none; border-color: var(--accent); }
.msg-route { font-size: 12px; color: var(--faint); font-family: var(--mono); }

/* ---------- Fingers, not a mouse ----------
   Everything that is tapped is at least about 40 px high, and fields are 16 px so a phone does not zoom into them. */
* { -webkit-tap-highlight-color: transparent; }
@media (pointer: coarse) {
  .tool { min-width: 40px; height: 40px; }
  .tool svg { width: 18px; height: 18px; }
  .send-group .btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .icon-btn, .viewer-tools .icon-btn { width: 36px; height: 36px; }
  .viewer-doors button { height: 36px; }
  .viewer-info select, .lib-btn { height: 40px; }
  .search { height: 40px; }
  .wo-filters { gap: 4px; }
  .wo-filters button { height: 34px; padding: 0 12px; }
  .wo { padding: 13px 12px; }
  .seg button { height: 36px; }
  .chip { height: 36px; padding: 0 12px; }
  .btn { height: 38px; }
  .co > .panel-head .btn { height: 36px; }
  .copy-chip { padding: 5px 9px; }
  .chat-start button { min-height: 42px; }
  .visit-row { padding: 14px; }
}
@media (pointer: coarse) and (max-width: 900px) {
  .search input, .composer-input textarea, .composer-row input, .composer-row select,
  .field input, .field select, .field textarea, .report-form textarea, .report-parts input { font-size: 16px; }
  .composer-row input, .composer-row select { height: 30px; }
}