/* Concierge Desk — center job workspace (header, thread, composer). */

.work {
  display: grid; grid-template-rows: auto auto auto 1fr auto;
  flex: 1; min-height: 0; background: var(--ha-surface);
}
.work-empty {
  display: grid; place-items: center; text-align: center; padding: 48px;
  flex: 1; color: var(--ha-ink-muted); font-size: 14px; background: var(--ha-surface);
}

.job-head { padding: 16px 24px; border-bottom: 1px solid var(--ha-border); }
.job-head .top { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.job-head h1 {
  font-size: 18px; font-weight: var(--ha-weight-bold); margin: 0; letter-spacing: -0.005em;
}
.job-head .sub { color: var(--ha-ink-muted); font-size: 13px; margin-top: 3px; }
.job-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.job-head form { display: inline; }

.pill.s-new { background: var(--ha-status-new); }
.pill.s-contacted { background: var(--ha-status-contacted); }
.pill.s-collecting_details { background: var(--ha-status-collecting); }
.pill.s-ready_to_offer { background: var(--ha-status-ready); }
.pill.s-offered { background: var(--ha-status-offered); }
.pill.s-quoted { background: var(--ha-status-quoted); }
.pill.s-presented { background: var(--ha-status-presented); }
.pill.s-accepted { background: var(--ha-status-accepted); }
.pill.s-scheduled { background: var(--ha-status-scheduled); }
.pill.s-fulfilled { background: var(--ha-status-fulfilled); }
.pill.s-on_hold { background: var(--ha-status-onhold); }
.pill.s-closed_lost { background: var(--ha-status-lost); }

.advance-select, .reason-select {
  height: 34px; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-pill);
  padding: 0 14px; font: inherit; font-size: 13px; color: var(--ha-ink);
  background: var(--ha-surface);
}

.close-lost-fields { display: none; align-items: center; gap: 8px; }
.close-lost-fields.open { display: inline-flex; }
.reason-text {
  height: 34px; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  padding: 0 12px; font: inherit; font-size: 13px; color: var(--ha-ink); min-width: 180px;
}

.thread-filter {
  display: flex; align-items: center; gap: 8px; padding: 10px 24px;
  border-bottom: 1px solid var(--ha-border-strong); background: var(--ha-surface);
}
.thread-filter .lbl { font-size: 12px; color: var(--ha-ink-muted); margin-right: 2px; }
.tag-toggle {
  height: 26px; padding: 0 11px; border-radius: var(--ha-radius-pill); font: inherit;
  font-size: 12px; font-weight: var(--ha-weight-medium); border: 1px solid var(--ha-border);
  background: var(--ha-surface); color: var(--ha-ink-muted); cursor: pointer;
}
.tag-toggle.active {
  background: var(--ha-blue-primary); color: var(--ha-surface);
  border-color: var(--ha-blue-primary);
}

.reply-banner {
  margin: 12px 24px 0; padding: 10px 14px; border-radius: var(--ha-radius-md);
  background: var(--ha-success-tint); border: 1px solid var(--ha-success-edge);
  color: var(--ha-ink); font-size: 13px; display: flex; align-items: center; gap: 9px;
}
.reply-banner svg { color: var(--ha-success); flex: none; }

.thread {
  overflow-y: auto; padding: 16px 24px 8px;
  display: flex; flex-direction: column; gap: 14px;
}
.thread-empty { color: var(--ha-ink-muted); font-size: 13px; text-align: center; padding: 24px; }
.msg[hidden] { display: none; }
.msg { max-width: 78%; }
.msg .bubble { padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 20px; }
.msg.in .bubble {
  background: var(--ha-surface-subtle); border: 1px solid var(--ha-border);
  border-bottom-left-radius: 5px;
}
.msg.out { align-self: flex-end; }
.msg.out .bubble {
  background: var(--ha-blue-primary); color: var(--ha-surface); border-bottom-right-radius: 5px;
}
.msg .foot {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-size: 11px; color: var(--ha-ink-muted);
}
.msg.out .foot { justify-content: flex-end; }
.jobtag {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
  border-radius: var(--ha-radius-pill); font-size: 11px; font-weight: var(--ha-weight-medium);
  background: var(--ha-accent-tint); color: var(--ha-blue-text);
}
.sys-note {
  align-self: center; font-size: 11px; color: var(--ha-ink-muted);
  background: var(--ha-surface-subtle); border: 1px solid var(--ha-border-strong);
  padding: 3px 10px; border-radius: var(--ha-radius-pill);
}

/* ============================================================
   Homeowner-anchored workspace: shared thread (left) + job lanes
   (right). The lane is a stack of full-width zones split by
   hairlines -- no nested cards, no side stripes. Navy leads; the
   single solid next-action CTA carries emphasis. All colors are
   existing --ha-* tokens; every status/SLA hue is paired with a
   text label in the markup.
   ============================================================ */
.workspace {
  display: grid; grid-template-columns: 1fr auto 1fr;
  /* flex: 1 fills the bounded .workspace-frame (after the optional flash banner);
     min-height: 0 lets the two panes' internal scroll regions size correctly so
     the homeowner thread scrolls in place and its composer stays pinned. */
  flex: 1; height: 100%; min-height: 0; min-width: 0; background: var(--ha-surface);
}

/* Full-height structural seam between the two working panes. Uses the
   strongest --ha-* border token (--ha-border, darker than the lane's internal
   --ha-border-strong hairlines) plus a gutter each side, so the panes read as
   separated zones — a neutral divider, never a colored stripe. */
.workspace-seam {
  align-self: stretch;
  width: 1px;
  background: var(--ha-border);
  margin-inline: var(--ha-space-4);
}

/* ---- LEFT: shared thread pane ---- */
.thread-pane {
  display: grid; grid-template-rows: auto auto 1fr auto;
  min-height: 0;
  background: var(--ha-surface);
}
.thread-head { padding: 14px 18px; border-bottom: 1px solid var(--ha-border); }
.thread-head .hh {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.thread-head h1 {
  font-size: 16px; font-weight: var(--ha-weight-bold); margin: 0; letter-spacing: -0.005em;
}
.thread-head .sub { font-size: 12px; color: var(--ha-ink-muted); margin: 2px 0 0; }
.reply-dot {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--ha-ink-muted); flex: none;
}
.reply-dot i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.composer-attr {
  font-size: 11px; color: var(--ha-ink-muted); padding: 10px 24px 0;
  background: var(--ha-surface); display: flex; align-items: center; gap: 6px;
}

/* ---- RIGHT: job lanes ---- */
.lanes {
  display: grid; grid-template-rows: auto 1fr; min-height: 0; min-width: 0;
  background: var(--ha-surface);
}
.lanetabs {
  display: flex; gap: 4px; padding: 10px 18px 0; overflow-x: auto;
  border-bottom: 1px solid var(--ha-border);
}
.tab {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px 11px;
  font-size: 13px; color: var(--ha-ink-muted); text-decoration: none;
  border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
.tab:hover { color: var(--ha-ink); }
.tab.active {
  color: var(--ha-ink); font-weight: var(--ha-weight-medium);
  border-bottom-color: var(--ha-blue-primary);
}
.tab.secondary { opacity: 0.8; }
.tab .sdot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.tab .mini { font-size: 11px; color: var(--ha-ink-muted); }

/* Status dots: each status hue paired with the .mini label text in markup. */
.sdot.s-new { background: var(--ha-status-new); }
.sdot.s-contacted { background: var(--ha-status-contacted); }
.sdot.s-collecting_details { background: var(--ha-status-collecting); }
.sdot.s-ready_to_offer { background: var(--ha-status-ready); }
.sdot.s-offered { background: var(--ha-status-offered); }
.sdot.s-quoted { background: var(--ha-status-quoted); }
.sdot.s-presented { background: var(--ha-status-presented); }
.sdot.s-accepted { background: var(--ha-status-accepted); }
.sdot.s-scheduled { background: var(--ha-status-scheduled); }
.sdot.s-fulfilled { background: var(--ha-status-fulfilled); }
.sdot.s-on_hold { background: var(--ha-status-onhold); }
.sdot.s-closed_lost { background: var(--ha-status-lost); }

.lane { overflow-y: auto; min-height: 0; }
.zone { padding: 18px 22px; border-bottom: 1px solid var(--ha-border-strong); }
.zone:last-child { border-bottom: 0; }

/* ---- next-action band (the loud zone) ---- */
.na {
  background: var(--ha-na-band); border: 1px solid var(--ha-na-edge);
  border-radius: var(--ha-radius-md); padding: 16px 18px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
}
.na .body { min-width: 0; }
.na .eyebrow {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ha-blue-text); font-weight: var(--ha-weight-medium); margin-bottom: 4px;
}
.na .label { font-size: 16px; font-weight: var(--ha-weight-bold); letter-spacing: -0.005em; }
.na .hint { font-size: 13px; color: var(--ha-ink-muted); margin-top: 3px; }
.na .btn { text-decoration: none; }

/* CTA + stepper row: primary CTA left, stepper pushed right via space-between
   (with no CTA the stepper sits left). */
.na-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* Funnel stepper: a secondary segmented control sharing one row with the primary
   CTA. Each half is a button_to form, so the segments are the forms' buttons;
   the divider sits between them. Reuses existing tokens only. */
.stepper {
  display: inline-flex; border: 1px solid var(--ha-border);
  border-radius: var(--ha-radius-pill); overflow: hidden; background: var(--ha-surface);
}
.stepper form { display: inline-flex; margin: 0; }
.stepper form + form .stepper-btn { border-left: 1px solid var(--ha-border); }
.stepper-btn {
  font: inherit; font-size: 13px; font-weight: var(--ha-weight-medium);
  color: var(--ha-ink); background: transparent; border: 0;
  padding: 7px 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.stepper-btn:hover:not(:disabled) { background: var(--ha-row-hover); }
.stepper-btn:disabled { color: var(--ha-border); cursor: not-allowed; }
.stepper-btn:focus-visible { outline: none; box-shadow: var(--ha-focus-ring); }

/* ---- change-status disclosure (quiet escape hatch) ---- */
.change { display: flex; flex-direction: column; gap: 0; }
.change > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: 7px; font-size: 13px; color: var(--ha-ink-muted); width: fit-content;
}
.change > summary::-webkit-details-marker { display: none; }
.change > summary .chev { transition: transform 150ms ease; }
.change[open] > summary .chev { transform: rotate(90deg); }
.change[open] > summary {
  color: var(--ha-ink); font-weight: var(--ha-weight-medium); margin-bottom: 12px;
}
.ovr { display: grid; gap: 12px; max-width: 560px; }
.ovr form { display: grid; gap: 12px; }
.ovr-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ctrl {
  height: 36px; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  padding: 0 12px; font: inherit; font-size: 13px; color: var(--ha-ink);
  background: var(--ha-surface);
}
select.ctrl { border-radius: var(--ha-radius-pill); padding-right: 30px; }
.ovr-row .grow { flex: 1; min-width: 200px; }
.ctrl:focus {
  outline: none; border-color: var(--ha-blue-accent); box-shadow: var(--ha-focus-ring);
}
.consequence {
  font-size: 13px; color: var(--ha-ink); background: var(--ha-surface-subtle);
  border: 1px solid var(--ha-border-strong); border-radius: var(--ha-radius-md);
  padding: 11px 13px; line-height: 1.5;
}
.consequence:empty { display: none; }
.logged-note { font-size: 12px; color: var(--ha-ink-muted); }

/* ---- stage-content region ---- */
.stage .stage-h {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ha-ink);
  font-weight: var(--ha-weight-bold); margin-bottom: 14px;
}
.stage .btn { text-decoration: none; }

.note {
  font-size: 12px; color: var(--ha-ink-muted); display: flex; gap: 8px;
  align-items: flex-start; line-height: 1.5;
}
.lane-close { margin-top: 16px; }

/* Record-choice control (presented stage). */
.choice-list { display: grid; gap: 8px; margin-bottom: 12px; }
.choice { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.choice-date {
  display: grid; gap: 4px; margin-bottom: 12px; font-size: 12px;
  color: var(--ha-ink-muted);
}
.choice-date input {
  height: 34px; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  padding: 0 12px; font: inherit; font-size: 13px; color: var(--ha-ink); width: max-content;
}

/* Split-suggestion banner (new/contacted/collecting_details): a QUIET inline
   flag reusing the AI-suggestion treatment. Color is paired with the descriptor
   text, never hue alone. */
.split-banner {
  margin-bottom: 14px; padding: 11px 14px; border-radius: var(--ha-radius-md);
  background: var(--ha-ai-surface); border: 1px solid var(--ha-ai-border);
  display: flex; flex-direction: column; gap: 9px;
}
.split-line {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ha-ink); line-height: 18px;
}
.split-line svg { color: var(--ha-blue-text); flex: none; }
.split-acts { display: flex; gap: 8px; }

/* Uncertain best-guess attribution: a quiet gold ground on the inbound bubble,
   ALWAYS paired with the "(best guess)" label in the selector below it. */
.msg.uncertain .bubble {
  background: var(--ha-uncertain-bg); border-color: var(--ha-uncertain-edge);
}

/* Re-attribution selector under a multi-job inbound bubble. */
.attr-select {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11px; color: var(--ha-ink-muted);
}
.attr-label em { font-style: italic; color: var(--ha-uncertain-edge); }
.attr-input {
  height: 28px; border: 1px solid var(--ha-border); border-radius: var(--ha-radius-md);
  padding: 0 8px; font: inherit; font-size: 12px; color: var(--ha-ink);
  background: var(--ha-surface);
}

/* ---- CTA scroll targets ---- */
/* The Next-action CTAs scroll their target section into the (independently
   scrolling) pane via the cta controller. A little scroll-margin keeps a
   scrolled-to section from tucking under the pane's top chrome (lanetabs /
   thread head). Applies to every in-page CTA destination. */
#composer_form, #homeowner_composer, #scope_what, #quotes_panel,
#routing_shortlist, #record_choice, #brokering_pane, #change_status {
  scroll-margin-top: 16px;
}

/* ---- narrow: stack the two panes (thread first) ---- */
@media (max-width: 1000px) {
  .workspace { grid-template-columns: 1fr; }
  .workspace-seam { display: none; }
  .thread-pane { border-bottom: 1px solid var(--ha-border); }
}