:root {
  --queue-blue: #086bd8;
  --queue-blue-soft: #eef6ff;
  --queue-border: #d9e2ee;
  --queue-muted: #627087;
  --queue-navy: #13213a;
  --queue-surface: #f6f9fc;
}

.app-header {
  height: 64px;
  gap: 14px;
  padding: 7px 16px;
}

.brand { flex: 0 0 auto; gap: 10px; }
.brand img { width: 142px; height: 40px; }
.brand h1 { font-size: 17px; }
.brand p { max-width: 300px; font-size: 10px; }

.header-search {
  position: relative;
  flex: 1 1 520px;
  max-width: 580px;
  min-width: 220px;
}

.header-search input {
  height: 38px;
  padding: 0 34px 0 12px;
  border-color: var(--queue-border);
  font-size: 12px;
}

.header-search span {
  position: absolute;
  right: 10px;
  top: 9px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--queue-border);
  border-radius: 4px;
  color: var(--queue-muted);
  background: #fff;
  font-size: 10px;
}

.header-command {
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--queue-border);
  border-radius: 5px;
  color: var(--queue-navy);
  background: #fff;
  font-size: 11px;
  font-weight: 750;
}

.header-account { display: flex; align-items: center; gap: 10px; }
.operator-badge { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--queue-navy); }
.operator-badge span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--queue-blue); font-size: 10px; font-weight: 850; }
.operator-badge b { font-weight: 700; }

.module-nav {
  height: 42px;
  display: flex;
  align-items: stretch;
  gap: 30px;
  padding: 0 28px;
  border-bottom: 1px solid var(--queue-border);
  background: #fff;
}

.module-nav button {
  position: relative;
  min-width: 56px;
  padding: 0 2px;
  border: 0;
  color: #4f6079;
  background: transparent;
  font-size: 11px;
  font-weight: 650;
}

.module-nav button.active { color: var(--queue-blue); font-weight: 800; }
.module-nav button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--queue-blue); }

.queue-shell {
  height: calc(100vh - 106px);
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 334px;
  overflow: hidden;
  background: #fff;
}

.queue-shell.copilot-expanded { grid-template-columns: minmax(0, 1fr) 430px; }
.queue-shell.inspector-hidden { grid-template-columns: minmax(0, 1fr); }
.queue-shell.inspector-hidden .quote-inspector { display: none; }
.queue-shell[hidden], .workbench-workspace[hidden] { display: none !important; }

.queue-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--queue-border);
  background: #fff;
}

.saved-views {
  min-height: 50px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 0 12px;
  border-bottom: 1px solid var(--queue-border);
  overflow-x: auto;
}

.saved-views button {
  position: relative;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  color: #33445f;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
}

.saved-views button b { margin-left: 5px; color: var(--queue-blue); }
.saved-views button.active { color: var(--queue-navy); }
.saved-views button.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 3px; background: var(--queue-blue); }
.saved-views .danger-text { color: #d52d3f; }
.saved-views .view-spacer { flex: 1 1 auto; }
.saved-views .save-view { color: #40516a; }

.filter-summary {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--queue-border);
  background: #fff;
  overflow-x: auto;
}

.filter-summary > button { flex: 0 0 auto; }
.filter-count, .show-filters, .clear-filter {
  border: 0;
  background: transparent;
  color: var(--queue-navy);
  font-size: 10px;
  font-weight: 800;
}

.show-filters, .clear-filter { color: var(--queue-blue); }
.filter-chips { display: flex; align-items: center; gap: 6px; }
.filter-chips button {
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid #cddcee;
  border-radius: 4px;
  color: #30425f;
  background: #f5f9ff;
  font-size: 10px;
  font-weight: 700;
}
.filter-chips button span { margin-left: 5px; color: #78869a; }

.advanced-filters {
  min-height: 80px;
  display: grid;
  grid-template-columns: repeat(6, minmax(110px, 1fr)) auto;
  gap: 8px;
  align-items: end;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--queue-border);
  background: var(--queue-surface);
}
.advanced-filters[hidden] { display: none; }
.advanced-filters label { gap: 4px; font-size: 9px; }
.advanced-filters input, .advanced-filters select { height: 32px; padding: 0 8px; font-size: 10px; }
.advanced-filter-actions { display: flex; gap: 6px; }

.bulk-bar {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--queue-border);
  background: #fbfdff;
  overflow-x: auto;
}

.bulk-bar .button { flex: 0 0 auto; min-height: 32px; padding: 0 11px; font-size: 10px; }
.select-count { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; color: var(--queue-navy); font-size: 10px; }
.select-count input { width: 16px; height: 16px; }
.select-page-action { flex: 0 0 auto; padding: 3px 5px; border: 0; color: #52627a; background: transparent; font-size: 9px; font-weight: 650; }
.bulk-spacer { flex: 1 1 auto; }
.density-control { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.density-control select { width: 100px; height: 32px; font-size: 10px; }
.copilot-accent { color: var(--queue-blue) !important; border-color: #b8d7fb !important; background: var(--queue-blue-soft) !important; }

.queue-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
.queue-table { width: 100%; min-width: 1050px; border-collapse: collapse; table-layout: auto; color: #1e304d; font-size: 10px; }
.queue-table thead { position: sticky; top: 0; z-index: 2; background: #f8fafc; }
.queue-table th { height: 40px; padding: 0 8px; border-bottom: 1px solid var(--queue-border); text-align: left; color: #253653; font-size: 9px; white-space: nowrap; }
.queue-table th button { padding: 0; border: 0; color: inherit; background: transparent; font: inherit; font-weight: 800; }
.queue-table td { height: 46px; padding: 5px 8px; border-bottom: 1px solid #e5ebf2; vertical-align: middle; white-space: nowrap; }
.queue-table tbody tr { cursor: pointer; }
.queue-table tbody tr:hover { background: #f6faff; }
.queue-table tbody tr.selected { background: #eef6ff; box-shadow: inset 3px 0 var(--queue-blue); }
.queue-table.compact td { height: 40px; }
.queue-table.comfortable td { height: 54px; }
.queue-table .select-col { width: 34px; }
.queue-table .row-check { width: 15px; height: 15px; }
.queue-id { color: var(--queue-blue); font-weight: 850; }
.queue-customer { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.queue-number { font-variant-numeric: tabular-nums; font-weight: 750; }
.owner-cell, .sla-cell { display: grid; gap: 2px; }
.owner-cell span, .sla-cell span { color: var(--queue-muted); font-size: 9px; }
.sla-cell b.good { color: #0a7c58; }
.sla-cell b.warn { color: #c66e00; }
.sla-cell b.bad { color: #c4293e; }
.queue-status, .freshness {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 750;
}
.queue-status.waiting { color: #a85e00; background: #fff3dd; border: 1px solid #f4d29a; }
.queue-status.approved { color: #087754; background: #e8f7f0; }
.queue-status.pending { color: #1765bf; background: #eaf3ff; }
.queue-status.rejected, .queue-status.expired { color: #c1263a; background: #fff0f2; }
.queue-status.draft { color: #5d697b; background: #eef1f5; }
.queue-status.converted { color: #125eb4; background: #eaf3ff; }
.freshness.fresh { color: #087754; background: #e9f7f1; }
.freshness.stale { color: #b66300; background: #fff3dd; }
.freshness.expired { color: #c1263a; background: #fff0f2; }
.approval-count { color: #c1263a; font-weight: 850; }
.approval-count.complete { color: #087754; }
.next-action { padding: 0; border: 0; color: var(--queue-blue); background: transparent; font-size: 10px; font-weight: 750; }

.queue-pagination {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-top: 1px solid var(--queue-border);
  color: #3e4e66;
  background: #fff;
  font-size: 10px;
}
.queue-pagination > div { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.queue-pagination button { height: 30px; padding: 0 9px; border: 1px solid var(--queue-border); border-radius: 4px; color: #30415e; background: #fff; font-size: 9px; }
.queue-pagination > div b { min-width: 30px; height: 30px; display: grid; place-items: center; border-radius: 4px; color: #fff; background: var(--queue-blue); }
.queue-pagination label { display: flex; align-items: center; gap: 6px; font-size: 9px; }
.queue-pagination select { width: 64px; height: 30px; font-size: 9px; }
.demo-data-label { padding: 3px 6px; border-radius: 4px; color: #6d5a1c; background: #fff7db; font-size: 9px; font-weight: 700; }

.quote-inspector {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: #fff;
}
.inspector-main { min-height: 0; overflow: auto; padding-bottom: 6px; }
.inspector-head { min-height: 70px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 14px 14px 8px; }
.inspector-head h2 { margin: 0 0 8px; font-size: 18px; letter-spacing: 0; }
.inspector-head > button { padding: 4px 0; border: 0; color: var(--queue-muted); background: transparent; font-size: 9px; }
.status-line { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.revision-meta { margin: 0; padding: 0 14px 12px; color: var(--queue-muted); font-size: 9px; }
.revision-meta span { margin: 0 5px; }
.inspector-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--queue-border); border-bottom: 1px solid var(--queue-border); }
.inspector-totals div { display: grid; gap: 4px; }
.inspector-totals span { color: var(--queue-muted); font-size: 9px; }
.inspector-totals strong { color: var(--queue-blue); font-size: 18px; }
.inspector-totals div:last-child strong { color: var(--queue-navy); }

.inspector-alert { margin: 10px 12px 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px; border: 1px solid; border-radius: 5px; }
.inspector-alert strong { font-size: 10px; }
.inspector-alert p { margin: 3px 0 0; font-size: 9px; }
.inspector-alert button { flex: 0 0 auto; min-height: 28px; padding: 0 8px; border: 1px solid currentColor; border-radius: 4px; color: inherit; background: #fff; font-size: 9px; font-weight: 750; }
.danger-alert { color: #be2338; background: #fff3f4; border-color: #f1bbc4; }
.warning-alert { color: #ad6200; background: #fff7e8; border-color: #f3d39d; }

.inspector-tabs { margin-top: 10px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--queue-border); border-bottom: 1px solid var(--queue-border); }
.inspector-tabs button { position: relative; min-height: 40px; padding: 0 4px; border: 0; color: var(--queue-muted); background: #fff; font-size: 9px; font-weight: 750; }
.inspector-tabs button.active { color: var(--queue-blue); }
.inspector-tabs button.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--queue-blue); }
.inspector-tabs span { color: inherit; }
.inspector-tab-panel { display: none; padding: 11px 12px; }
.inspector-tab-panel.active { display: block; }
.inspector-tab-panel > h3 { margin: 2px 0 10px; font-size: 12px; }
.preview-summary { display: flex; gap: 10px; color: var(--queue-muted); font-size: 9px; }
.inspector-lines { width: 100%; margin-top: 9px; border-collapse: collapse; font-size: 9px; }
.inspector-lines th, .inspector-lines td { padding: 6px 2px; border-bottom: 1px solid #edf1f5; text-align: left; }
.inspector-lines th:nth-child(n+2), .inspector-lines td:nth-child(n+2) { text-align: right; }
.internal-note { margin: 8px 0 0; color: var(--queue-muted); font-size: 9px; line-height: 1.4; }
.text-action { padding: 0; border: 0; color: var(--queue-blue); background: transparent; font-size: 9px; font-weight: 750; }
#openWorkbench { margin-top: 8px; }

.inspector-card { margin-top: 10px; padding: 10px; border: 1px solid var(--queue-border); border-radius: 5px; background: #fff; }
.inspector-card header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inspector-card h3 { margin: 0; font-size: 11px; }
.inspector-card header span { color: var(--queue-muted); font-size: 8px; text-align: right; }
.approvals-card label { margin-top: 8px; display: flex; grid-template-columns: none; align-items: center; gap: 6px; font-size: 9px; font-weight: 600; }
.approvals-card input { width: 14px; height: 14px; }
.approvals-card label b { margin-left: auto; color: #b86800; font-size: 8px; }
.approvals-card .text-action { margin-top: 9px; }
.exports-card > div { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.exports-card button { min-height: 32px; padding: 0 5px; border: 1px solid var(--queue-border); border-radius: 4px; color: #263955; background: #fff; font-size: 8px; font-weight: 750; }
.exports-card button:disabled { color: #7c889a; background: #f2f4f7; }
.version-card p { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 5px; align-items: center; margin: 8px 0 0; font-size: 8px; }
.version-card p span { color: var(--queue-muted); }
.version-card p em { color: var(--queue-blue); font-style: normal; }
.version-card > .text-action { margin-top: 9px; }
.revision-list { margin: 0; padding-left: 22px; }
.revision-list li { margin-bottom: 14px; }
.revision-list li > * { display: block; }
.revision-list span { margin-top: 3px; color: var(--queue-muted); font-size: 9px; }
.revision-list p, .note-item, .activity-item { margin: 5px 0 0; color: #34455e; font-size: 9px; line-height: 1.5; }
.note-item, .activity-item { padding: 9px; border: 1px solid var(--queue-border); border-radius: 4px; }
.note-item b, .note-item span, .activity-item b, .activity-item span { display: block; }
.note-item span, .activity-item span { margin-top: 3px; color: var(--queue-muted); }

.copilot { border-top: 1px solid var(--queue-border); background: #fff; }
.copilot-dock { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.copilot-dock > div:first-child { display: grid; gap: 2px; }
.copilot-dock b { font-size: 11px; }
.copilot-dock span { color: var(--queue-muted); font-size: 8px; }
.copilot-mode-actions { display: flex; gap: 4px; }
.copilot-mode-actions button, .copilot-full-head button { min-height: 28px; padding: 0 7px; border: 1px solid #bed6f4; border-radius: 4px; color: var(--queue-blue); background: #f2f8ff; font-size: 8px; font-weight: 750; }
.copilot-body { display: none; min-height: 0; flex-direction: column; border-top: 1px solid var(--queue-border); background: #f8fbff; }
.quote-inspector[data-copilot-mode="expanded"] .copilot-body { display: flex; height: min(68vh, 700px); }
.quote-inspector[data-copilot-mode="expanded"] .inspector-main { max-height: 28vh; }
.copilot-full-head { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--queue-border); background: #fff; }
.copilot-full-head h2 { margin: 3px 0 0; font-size: 19px; }
.copilot-full-head > div:last-child { display: flex; gap: 6px; }
.copilot-context { margin: 10px 12px 0; padding: 9px; border: 1px solid #cfe0f5; border-radius: 4px; color: #3f526e; background: #f2f8ff; font-size: 9px; line-height: 1.45; }
.copilot-prompts { display: flex; gap: 6px; padding: 10px 12px 0; overflow-x: auto; }
.copilot-prompts button { flex: 0 0 auto; min-height: 30px; padding: 0 8px; border: 1px solid var(--queue-border); border-radius: 4px; color: #334b69; background: #fff; font-size: 8px; }
.copilot-conversation { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 10px 12px; }
.copilot-message, .copilot-proposal { margin-bottom: 9px; padding: 9px; border: 1px solid var(--queue-border); border-radius: 5px; background: #fff; font-size: 9px; line-height: 1.45; }
.copilot-message span { color: var(--queue-muted); font-size: 8px; font-weight: 750; }
.copilot-message p { margin: 5px 0 0; }
.operator-message { margin-left: 28px; background: #eef6ff; border-color: #c5dcf7; }
.assistant-message { margin-right: 18px; }
.copilot-proposal { border-color: #b9d3f2; }
.copilot-proposal header { display: flex; justify-content: space-between; gap: 8px; }
.copilot-proposal header div { display: grid; gap: 2px; }
.copilot-proposal header span { color: var(--queue-muted); font-size: 8px; }
.copilot-proposal header b { color: #ad6500; }
.copilot-proposal dl { margin: 9px 0; }
.copilot-proposal dl div { min-height: 23px; display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid #edf1f5; }
.copilot-proposal dd { margin: 0; font-weight: 750; text-align: right; }
.copilot-proposal p { color: #ad6500; }
.copilot-proposal button, .copilot-composer button { min-height: 32px; padding: 0 10px; border: 1px solid #1a6fcd; border-radius: 4px; color: #fff; background: var(--queue-blue); font-size: 9px; font-weight: 750; }
.copilot-composer { padding: 10px 12px; border-top: 1px solid var(--queue-border); background: #fff; }
.copilot-composer textarea { width: 100%; resize: vertical; min-height: 62px; padding: 8px; border: 1px solid var(--queue-border); border-radius: 5px; color: var(--queue-navy); font: inherit; font-size: 10px; }
.copilot-composer > div { margin-top: 7px; display: flex; align-items: end; gap: 8px; }
.copilot-composer label { flex: 1 1 auto; gap: 3px; font-size: 8px; }
.copilot-composer select { height: 32px; font-size: 9px; }
.copilot-body > footer { padding: 8px 12px; color: var(--queue-muted); background: #fff; font-size: 8px; }

.quote-inspector[data-copilot-mode="full"] {
  position: fixed;
  z-index: 20;
  inset: 106px 0 0;
  width: auto;
  display: block;
  border-top: 1px solid var(--queue-border);
  background: #fff;
}
.quote-inspector[data-copilot-mode="full"] .inspector-main,
.quote-inspector[data-copilot-mode="full"] .copilot-dock { display: none; }
.quote-inspector[data-copilot-mode="full"] .copilot,
.quote-inspector[data-copilot-mode="full"] .copilot-body { height: 100%; display: flex; }
.quote-inspector[data-copilot-mode="full"] .copilot-body { width: min(1100px, 100%); margin: 0 auto; border-inline: 1px solid var(--queue-border); }
.quote-inspector[data-copilot-mode="full"] .copilot-full-head { display: flex; }
.quote-inspector[data-copilot-mode="full"] .copilot-conversation { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 10px; }
.quote-inspector[data-copilot-mode="full"] .copilot-message,
.quote-inspector[data-copilot-mode="full"] .copilot-proposal { margin: 0; }
.quote-inspector[data-copilot-mode="full"] .copilot-proposal { grid-column: 2; grid-row: 1 / span 2; }

.workbench-workspace { height: calc(100vh - 106px); }
.module-nav.module-disabled { opacity: .72; }
.module-feedback { position: fixed; z-index: 50; left: 50%; bottom: 24px; transform: translateX(-50%); max-width: calc(100% - 30px); padding: 10px 14px; border: 1px solid #bdd4ee; border-radius: 5px; color: #29415f; background: #fff; box-shadow: 0 10px 28px rgb(20 42 72 / 18%); font-size: 10px; }

@media (max-width: 1180px) {
  .queue-shell { grid-template-columns: minmax(0, 1fr) 310px; }
  .queue-shell.copilot-expanded { grid-template-columns: minmax(0, 1fr) 380px; }
  .header-command { display: none; }
  .advanced-filters { grid-template-columns: repeat(3, minmax(120px, 1fr)); }
  .advanced-filter-actions { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  .app-header { height: auto; min-height: 64px; flex-wrap: wrap; }
  .header-search { order: 3; flex-basis: 100%; max-width: none; }
  .module-nav { gap: 16px; padding: 0 14px; overflow-x: auto; }
  .queue-shell { height: auto; min-height: calc(100vh - 148px); grid-template-columns: 1fr; overflow: visible; }
  .queue-main { min-height: 690px; }
  .quote-inspector { position: fixed; z-index: 12; inset: 148px 0 0 22%; display: none; border-left: 1px solid var(--queue-border); box-shadow: -12px 0 28px rgb(31 49 74 / 18%); }
  .quote-inspector.open { display: grid; }
  .quote-inspector[data-copilot-mode="full"] { inset: 148px 0 0; display: block; }
  .workbench-workspace { height: auto; min-height: calc(100vh - 148px); }
}

@media (max-width: 640px) {
  .brand img { width: 110px; }
  .brand h1 { font-size: 14px; }
  .brand p, .operator-badge b { display: none; }
  .header-account { margin-left: auto; }
  .language-switch button { min-height: 30px; padding: 0 7px; font-size: 9px; }
  .module-nav { height: 40px; }
  .queue-shell { min-height: calc(100vh - 146px); }
  .saved-views { min-height: 46px; }
  .saved-views button { padding: 0 10px; }
  .filter-summary { min-height: 50px; }
  .filter-chips { display: none; }
  .advanced-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bulk-bar .button:not(.copilot-accent) { display: none; }
  .select-page-action { display: none; }
  .queue-pagination .demo-data-label, .density-control { display: none; }
  .quote-inspector { inset: 146px 0 0; }
  .quote-inspector[data-copilot-mode="full"] { inset: 146px 0 0; }
  .quote-inspector[data-copilot-mode="full"] .copilot-conversation { display: block; }
  .quote-inspector[data-copilot-mode="full"] .copilot-message,
  .quote-inspector[data-copilot-mode="full"] .copilot-proposal { margin-bottom: 9px; }
  .copilot-mode-actions button { padding-inline: 5px; }
}