/* Light theme: invert the existing dark slate/indigo Tailwind utilities.
   Dark remains the default look; html.theme-light opts in. */
html { color-scheme: dark; }
html.theme-light { color-scheme: light; }


/* Shopify-inspired application shell. The product palette remains unchanged;
   this layer only improves hierarchy, spacing, navigation and responsiveness. */
:root {
  --app-header-height: 61px;
  --app-nav-width: 244px;
  --app-content-max: 1440px;
}
.app-header { position: sticky; top: 0; z-index: 45; min-height: var(--app-header-height); box-shadow: 0 1px 0 rgb(15 23 42 / .8); }
.app-navigation { position: fixed; z-index: 40; top: var(--app-header-height); bottom: 0; left: 0; width: var(--app-nav-width); overflow-y: auto; }
.app-navigation-inner { display: flex; min-height: 100%; flex-direction: column; padding: 1rem .75rem; }
.app-navigation .tab-btn { display: flex; width: 100%; align-items: center; gap: .75rem; min-height: 42px; padding: .625rem .75rem; border: 1px solid transparent; border-radius: .625rem; color: #94a3b8; font-size: .875rem; font-weight: 500; text-align: left; transition: background-color .15s, border-color .15s, color .15s; }
.app-navigation .tab-btn:hover { background: #1e293b; color: #e2e8f0; }
.app-navigation .tab-btn.tab-active { border-color: rgb(99 102 241 / .28); background: rgb(49 46 129 / .34); color: #c7d2fe !important; box-shadow: inset 3px 0 0 #6366f1; }
.nav-section-label { margin: 1rem .75rem .35rem; color: #64748b; font-size: .625rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.nav-section-label:first-child { margin-top: .15rem; }
.nav-separator { display: block; height: 1px; margin: .8rem .75rem 0; background: #1e293b; }
.app-nav-footer { margin-top: auto; padding: 1rem .75rem .25rem; border-top: 1px solid #1e293b; color: #64748b; font-size: .6875rem; line-height: 1.4; }
.app-nav-footer p { color: #94a3b8; font-weight: 600; }
.app-main { margin-left: var(--app-nav-width); min-width: 0; }
.mobile-nav-toggle { display: none; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid #334155; border-radius: .5rem; color: #94a3b8; }
.mobile-nav-toggle:hover { background: #1e293b; color: #e2e8f0; }
.app-nav-backdrop { display: none; }
.global-webcall-bar { position: fixed; z-index: 70; right: 1rem; bottom: 1rem; left: calc(var(--app-nav-width) + 1rem); display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .75rem 1rem; border: 1px solid #4f46e5; border-radius: .875rem; background: rgb(15 23 42 / .97); box-shadow: 0 18px 45px rgb(2 6 23 / .48); color: #e2e8f0; backdrop-filter: blur(12px); }
.global-webcall-bar.hidden { display: none; }
.global-webcall-indicator { width: .7rem; height: .7rem; flex: 0 0 auto; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 4px rgb(34 197 94 / .16); animation: pulse 1.8s ease-in-out infinite; }
.global-webcall-copy { min-width: 0; flex: 1; }
.global-webcall-heading { display: flex; align-items: baseline; gap: .75rem; }
.global-webcall-heading strong { color: #f8fafc; font-size: .875rem; }
.global-webcall-heading span { color: #a5b4fc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; }
.global-webcall-copy p { margin-top: .2rem; overflow: hidden; color: #94a3b8; font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.global-webcall-actions { display: flex; align-items: center; gap: .5rem; }
.global-webcall-actions button { min-height: 36px; padding: .45rem .75rem; border: 1px solid #475569; border-radius: .5rem; color: #e2e8f0; font-size: .75rem; font-weight: 600; }
.global-webcall-actions button:hover { border-color: #818cf8; background: #1e293b; }
.global-webcall-actions .global-webcall-end { border-color: #b91c1c; background: #991b1b; color: white; }
.global-webcall-actions .global-webcall-end:hover { border-color: #ef4444; background: #b91c1c; }
#global-webcall-keep-active { border-color: #d97706; background: rgb(146 64 14 / .35); color: #fde68a; }
html.theme-light .global-webcall-bar { border-color: #6366f1; background: rgb(255 255 255 / .97); box-shadow: 0 18px 45px rgb(15 23 42 / .18); color: #0f172a; }
html.theme-light .global-webcall-heading strong { color: #0f172a; }
html.theme-light .global-webcall-copy p { color: #475569; }
body.webcall-active .app-main { padding-bottom: 5.5rem; }
body.webcall-active #toasts { bottom: 6rem !important; z-index: 80; }

/* Reusable, plain-language workspace primitives. */
.workspace-page { width: 100%; max-width: var(--app-content-max); margin-inline: auto; padding: 1.5rem; }
.workspace-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.workspace-eyebrow { color: #818cf8; font-size: .6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.workspace-title { margin-top: .25rem; color: #f8fafc; font-size: 1.5rem; font-weight: 650; line-height: 1.25; }
.workspace-description { max-width: 44rem; margin-top: .4rem; color: #94a3b8; font-size: .875rem; line-height: 1.55; }
.surface-card { border: 1px solid #1e293b; border-radius: .875rem; background: #0f172a; box-shadow: 0 1px 2px rgb(0 0 0 / .16); }
.primary-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .625rem 1rem; border-radius: .625rem; background: #4f46e5; color: white; font-size: .875rem; font-weight: 600; }
.primary-action:hover { background: #6366f1; }
.secondary-action { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; padding: .625rem 1rem; border: 1px solid #334155; border-radius: .625rem; color: #cbd5e1; font-size: .875rem; font-weight: 500; }
.secondary-action:hover { border-color: #6366f1; background: #1e293b; }

html.theme-light .app-header { box-shadow: 0 1px 0 #e2e8f0; }
html.theme-light .app-navigation .tab-btn { color: #475569; }
html.theme-light .app-navigation .tab-btn:hover { background: #f1f5f9; color: #0f172a; }
html.theme-light .app-navigation .tab-btn.tab-active { border-color: #c7d2fe; background: #eef2ff; color: #3730a3 !important; }
html.theme-light .nav-separator { background: #e2e8f0; }
html.theme-light .app-nav-footer { border-color: #e2e8f0; }
html.theme-light .workspace-title { color: #0f172a; }
html.theme-light .surface-card { border-color: #e2e8f0; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / .06); }

@media (max-width: 900px) {
  .mobile-nav-toggle { display: inline-flex; }
  .app-navigation { transform: translateX(-105%); box-shadow: 12px 0 32px rgb(0 0 0 / .28); transition: transform .2s ease; }
  body.app-nav-open .app-navigation { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .global-webcall-bar { left: 1rem; }
  .app-nav-backdrop { position: fixed; z-index: 35; inset: var(--app-header-height) 0 0; background: rgb(2 6 23 / .68); }
  body.app-nav-open .app-nav-backdrop { display: block; }
  .workspace-page { padding: 1rem; }
  .workspace-header { flex-direction: column; }
}
@media (max-width: 640px) {
  .app-header-actions { gap: .4rem; }
  #system-status-summary, #logout-btn span { display: none; }
  #system-status-toggle, #logout-btn { min-width: 2.25rem; justify-content: center; padding-inline: .55rem; }
  .global-webcall-bar { align-items: flex-start; flex-wrap: wrap; }
  .global-webcall-copy { flex-basis: calc(100% - 2rem); }
  .global-webcall-actions { width: 100%; }
  .global-webcall-actions button { flex: 1; }
  .workspace-title { font-size: 1.25rem; }
}

html.theme-light ::-webkit-scrollbar-track { background: #e2e8f0; }
html.theme-light ::-webkit-scrollbar-thumb { background: #94a3b8; }
html.theme-light .tab-active { border-bottom-color: #4f46e5 !important; color: #4338ca !important; }
html.theme-light .bc-radio-label { color: #475569; border-color: #e2e8f0; }
html.theme-light .bc-radio-label:has(input:checked) {
  background: #eef2ff; border-color: #6366f1; color: #3730a3;
}

html.theme-light .bg-slate-950 { background-color: #f1f5f9 !important; }
html.theme-light .bg-slate-900 { background-color: #ffffff !important; }
html.theme-light .bg-slate-800 { background-color: #f1f5f9 !important; }
html.theme-light .bg-slate-700 { background-color: #e2e8f0 !important; }
html.theme-light .bg-slate-600 { background-color: #64748b !important; }
html.theme-light .hover\:bg-slate-800:hover { background-color: #e2e8f0 !important; }
html.theme-light .hover\:bg-slate-700:hover { background-color: #cbd5e1 !important; }
html.theme-light .hover\:bg-slate-600:hover { background-color: #475569 !important; }
html.theme-light .hover\:bg-slate-500:hover { background-color: #64748b !important; }

html.theme-light .bg-slate-950\/20 { background-color: rgb(241 245 249 / 0.85) !important; }
html.theme-light .bg-slate-950\/40 { background-color: rgb(241 245 249 / 0.9) !important; }
html.theme-light .bg-slate-950\/60 { background-color: rgb(248 250 252 / 0.95) !important; }
html.theme-light .bg-indigo-950 { background-color: #eef2ff !important; }
html.theme-light .bg-indigo-950\/20 { background-color: rgb(238 242 255 / 0.8) !important; }
html.theme-light .bg-indigo-950\/30 { background-color: rgb(238 242 255 / 0.9) !important; }
html.theme-light .bg-indigo-950\/40 { background-color: rgb(224 231 255 / 0.9) !important; }
html.theme-light .bg-indigo-950\/50 { background-color: rgb(224 231 255 / 0.95) !important; }
html.theme-light .peer-checked\:bg-indigo-950:checked + span,
html.theme-light .peer:checked ~ .peer-checked\:bg-indigo-950,
html.theme-light .peer:checked + .peer-checked\:bg-indigo-950 { background-color: #e0e7ff !important; }

html.theme-light .from-slate-900 { --tw-gradient-from: #ffffff var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
html.theme-light .to-indigo-950\/40 { --tw-gradient-to: rgb(224 231 255 / 0.7) var(--tw-gradient-to-position); }

html.theme-light .text-slate-100 { color: #0f172a !important; }
html.theme-light .text-slate-200 { color: #1e293b !important; }
html.theme-light .text-slate-300 { color: #334155 !important; }
html.theme-light .text-slate-400 { color: #475569 !important; }
html.theme-light .text-slate-500 { color: #64748b !important; }
html.theme-light .text-slate-600 { color: #475569 !important; }
html.theme-light .hover\:text-slate-100:hover { color: #0f172a !important; }
html.theme-light .hover\:text-slate-300:hover { color: #1e293b !important; }
html.theme-light .placeholder-slate-500::placeholder { color: #94a3b8 !important; }

/* Headings that used text-white on dark cards; keep white on saturated buttons. */
html.theme-light .text-white { color: #0f172a !important; }
html.theme-light [class*="bg-indigo-"].text-white,
html.theme-light [class*="bg-green-"].text-white,
html.theme-light [class*="bg-red-"].text-white,
html.theme-light [class*="bg-orange-"].text-white,
html.theme-light [class*="bg-amber-"].text-white,
html.theme-light [class*="bg-emerald-"].text-white,
html.theme-light [class*="bg-rose-"].text-white,
html.theme-light [class*="bg-slate-6"].text-white,
html.theme-light [class*="bg-slate-7"].text-white,
html.theme-light [class*="bg-indigo-"] .text-white,
html.theme-light [class*="bg-green-"] .text-white,
html.theme-light [class*="bg-red-"] .text-white {
  color: #ffffff !important;
}

html.theme-light .hover\:text-white:hover { color: #0f172a !important; }
html.theme-light [class*="bg-indigo-"]:hover.hover\:text-white,
html.theme-light [class*="bg-indigo-"] .hover\:text-white:hover {
  color: #ffffff !important;
}

html.theme-light .border-slate-800 { border-color: #e2e8f0 !important; }
html.theme-light .border-slate-700 { border-color: #cbd5e1 !important; }
html.theme-light .border-slate-700\/70 { border-color: rgb(203 213 225 / 0.9) !important; }
html.theme-light .border-slate-800\/60 { border-color: rgb(226 232 240 / 0.9) !important; }
html.theme-light .divide-slate-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e2e8f0 !important; }
html.theme-light .divide-slate-800\/60 > :not([hidden]) ~ :not([hidden]) { border-color: rgb(226 232 240 / 0.9) !important; }
html.theme-light .border-indigo-900,
html.theme-light .border-indigo-900\/50,
html.theme-light .border-indigo-900\/70,
html.theme-light .border-indigo-800,
html.theme-light .border-indigo-800\/80 { border-color: #c7d2fe !important; }
html.theme-light .peer:checked + .peer-checked\:border-indigo-800,
html.theme-light .peer:checked ~ .peer-checked\:border-indigo-800 { border-color: #818cf8 !important; }
html.theme-light .peer:checked + .peer-checked\:text-indigo-300,
html.theme-light .peer:checked ~ .peer-checked\:text-indigo-300 { color: #3730a3 !important; }

html.theme-light .text-indigo-200 { color: #3730a3 !important; }
html.theme-light .text-indigo-300 { color: #4338ca !important; }
html.theme-light .text-indigo-400 { color: #4f46e5 !important; }
html.theme-light .hover\:text-indigo-400:hover { color: #4338ca !important; }

html.theme-light .bg-green-900 { background-color: #dcfce7 !important; }
html.theme-light .border-green-700 { border-color: #86efac !important; }
html.theme-light .text-green-200 { color: #166534 !important; }
html.theme-light .bg-red-900 { background-color: #fee2e2 !important; }
html.theme-light .bg-red-950\/40 { background-color: rgb(254 226 226 / 0.8) !important; }
html.theme-light .border-red-700 { border-color: #fca5a5 !important; }
html.theme-light .border-red-900\/50 { border-color: rgb(252 165 165 / 0.8) !important; }
html.theme-light .text-red-200 { color: #991b1b !important; }
html.theme-light .bg-yellow-950 { background-color: #fef9c3 !important; }
html.theme-light .bg-yellow-900\/30 { background-color: rgb(254 249 195 / 0.85) !important; }
html.theme-light .border-yellow-700 { border-color: #fde047 !important; }
html.theme-light .border-yellow-700\/50 { border-color: rgb(253 224 71 / 0.7) !important; }
html.theme-light .text-yellow-200 { color: #854d0e !important; }
html.theme-light .bg-indigo-900 { background-color: #e0e7ff !important; }
html.theme-light .text-emerald-300 { color: #047857 !important; }
html.theme-light .bg-emerald-950\/20 { background-color: rgb(209 250 229 / 0.7) !important; }
html.theme-light .border-emerald-900\/70 { border-color: #6ee7b7 !important; }
html.theme-light .text-amber-300 { color: #b45309 !important; }
html.theme-light .bg-amber-950\/20 { background-color: rgb(254 243 199 / 0.8) !important; }
html.theme-light .border-amber-900\/70 { border-color: #fcd34d !important; }

html.theme-light input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html.theme-light textarea,
html.theme-light select {
  color: #0f172a;
}

#theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: 1px solid #334155;
  color: #94a3b8;
  background: transparent;
  transition: background-color .15s, color .15s, border-color .15s;
}
#theme-toggle:hover { background: #1e293b; color: #e2e8f0; }
html.theme-light #theme-toggle { border-color: #cbd5e1; color: #475569; }
html.theme-light #theme-toggle:hover { background: #e2e8f0; color: #0f172a; }


.workflow-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.workflow-step { display: flex; align-items: center; gap: .75rem; min-height: 68px; padding: .8rem; border: 1px solid #1e293b; border-radius: .75rem; background: rgb(15 23 42 / .7); color: #64748b; }
.workflow-step > span { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: #1e293b; color: #94a3b8; font-size: .75rem; font-weight: 700; }
.workflow-step strong, .workflow-step small { display: block; }
.workflow-step strong { color: #cbd5e1; font-size: .78rem; }
.workflow-step small { margin-top: .15rem; color: #64748b; font-size: .68rem; line-height: 1.35; }
.workflow-step.is-active { border-color: rgb(99 102 241 / .55); background: rgb(49 46 129 / .2); }
.workflow-step.is-active > span { background: #4f46e5; color: #fff; }
.workflow-step.is-complete { border-color: rgb(22 163 74 / .45); }
.workflow-step.is-complete > span { background: #166534; color: transparent; }
.workflow-step.is-complete > span::after { content: '✓'; color: #dcfce7; }
.bc-question { padding: .85rem; border: 1px solid transparent; border-radius: .7rem; transition: border-color .15s, background-color .15s; }
.bc-question:hover, .bc-question:focus-within { border-color: #334155; background: rgb(30 41 59 / .32); }
.segmented-tabs { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid #334155; border-radius: .7rem; background: #0f172a; }
.segmented-tabs button { min-height: 36px; padding: .45rem .9rem; border-radius: .5rem; color: #94a3b8; font-size: .8rem; font-weight: 600; }
.segmented-tabs button:hover { color: #e2e8f0; }
.segmented-tabs button.is-active { background: #312e81; color: #e0e7ff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
html.theme-light .workflow-step { border-color: #e2e8f0; background: #fff; }
html.theme-light .workflow-step strong { color: #334155; }
html.theme-light .workflow-step.is-active { border-color: #a5b4fc; background: #eef2ff; }
html.theme-light .bc-question:hover, html.theme-light .bc-question:focus-within { border-color: #cbd5e1; background: #f8fafc; }
html.theme-light .segmented-tabs { border-color: #cbd5e1; background: #f1f5f9; }
html.theme-light .segmented-tabs button.is-active { background: #fff; color: #3730a3; }
@media (max-width: 700px) {
  .workflow-steps { grid-template-columns: 1fr; }
  .workflow-step { min-height: 56px; }
  .segmented-tabs { display: flex; width: 100%; }
  .segmented-tabs button { flex: 1; }
}


/* Review workspace: saved views, index table and evidence drawer. */
.review-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.review-summary-card { display: flex; min-height: 74px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid #1e293b; border-radius: .75rem; background: #0f172a; }
.review-summary-card span { color: #94a3b8; font-size: .75rem; }
.review-summary-card strong { color: #e2e8f0; font-size: 1.5rem; }
.review-saved-views { display: flex; gap: .25rem; padding: .75rem 1rem 0; overflow-x: auto; border-bottom: 1px solid #1e293b; }
.review-view-chip { flex: 0 0 auto; padding: .55rem .75rem .65rem; border-bottom: 2px solid transparent; color: #94a3b8; font-size: .78rem; font-weight: 600; }
.review-view-chip:hover { color: #e2e8f0; }
.review-view-chip.is-active { border-bottom-color: #6366f1; color: #c7d2fe; }
.review-toolbar { display: flex; align-items: center; gap: .65rem; padding: 1rem; }
.review-search-wrap { display: flex; flex: 1; align-items: center; gap: .6rem; min-height: 40px; padding: 0 .75rem; border: 1px solid #334155; border-radius: .6rem; background: #020617; color: #64748b; }
.review-search-wrap:focus-within { border-color: #6366f1; box-shadow: 0 0 0 2px rgb(99 102 241 / .14); }
.review-search-wrap input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #e2e8f0; font-size: .85rem; }
.filter-count { display: inline-flex; min-width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; border-radius: 999px; background: #4f46e5; color: white; font-size: .65rem; }
.review-filter-panel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; padding: 0 1rem 1rem; border-bottom: 1px solid #1e293b; }
.review-filter-panel label { color: #64748b; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.review-filter-panel select, .review-filter-panel input { display: block; width: 100%; min-height: 40px; margin-top: .35rem; padding: .5rem .65rem; border: 1px solid #334155; border-radius: .55rem; background: #020617; color: #cbd5e1; font-size: .78rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.review-active-filters { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem 1rem; }
.review-active-filters span { padding: .35rem .55rem; border: 1px solid #3730a3; border-radius: 999px; background: rgb(49 46 129 / .2); color: #a5b4fc; font-size: .68rem; }
.review-table-scroll { overflow-x: auto; border-top: 1px solid #1e293b; }
.review-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.review-table th { padding: .75rem 1rem; border-bottom: 1px solid #334155; background: rgb(2 6 23 / .46); color: #64748b; font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.review-table td { max-width: 240px; padding: .85rem 1rem; border-bottom: 1px solid #1e293b; color: #94a3b8; vertical-align: middle; }
.review-row { cursor: pointer; outline: none; transition: background-color .12s; }
.review-row:hover, .review-row:focus, .review-row.is-selected { background: rgb(30 41 59 / .58); }
.review-row.is-selected { box-shadow: inset 3px 0 0 #6366f1; }
.review-primary { display: block; overflow: hidden; color: #cbd5e1; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.review-secondary { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-id { display: block; max-width: 190px; overflow: hidden; color: #94a3b8; font-family: ui-monospace, monospace; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.review-row-arrow { color: #64748b; font-size: 1.3rem; }
.status-pill, .decision-pill { display: inline-flex; align-items: center; max-width: 140px; padding: .25rem .5rem; border: 1px solid #475569; border-radius: 999px; color: #94a3b8; font-size: .65rem; font-weight: 700; line-height: 1.2; text-transform: capitalize; }
.status-pill.is-passed { border-color: #166534; background: rgb(20 83 45 / .25); color: #86efac; }
.status-pill.is-failed { border-color: #991b1b; background: rgb(127 29 29 / .25); color: #fca5a5; }
.status-pill.is-review { border-color: #a16207; background: rgb(113 63 18 / .25); color: #fde047; }
.status-pill.is-running { border-color: #3730a3; background: rgb(49 46 129 / .25); color: #a5b4fc; }
.review-empty { padding: 3rem 1rem !important; color: #64748b; text-align: center; }
.review-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: #64748b; font-size: .72rem; }
.review-pagination > div { display: flex; align-items: center; gap: .65rem; }
.review-pagination button { min-height: 34px; padding: .4rem .7rem; border: 1px solid #334155; border-radius: .5rem; color: #cbd5e1; }
.review-pagination button:hover:not(:disabled) { border-color: #6366f1; background: #1e293b; }
.review-pagination button:disabled { cursor: not-allowed; opacity: .35; }
.review-drawer-shell { position: fixed; z-index: 60; inset: 0; }
.review-drawer-backdrop { position: absolute; inset: 0; width: 100%; background: rgb(2 6 23 / .7); backdrop-filter: blur(2px); }
.review-drawer { position: absolute; top: 0; right: 0; bottom: 0; display: flex; width: min(760px, 92vw); flex-direction: column; border-left: 1px solid #334155; background: #0f172a; box-shadow: -24px 0 60px rgb(0 0 0 / .38); animation: review-drawer-in .18s ease-out; }
@keyframes review-drawer-in { from { transform: translateX(24px); opacity: .7; } }
.review-drawer-topbar { display: flex; min-height: 72px; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid #1e293b; }
.review-drawer-close { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid #334155; border-radius: .55rem; color: #94a3b8; font-size: 1.35rem; }
.review-drawer-close:hover { background: #1e293b; color: white; }
.review-drawer-content { flex: 1; min-height: 0; padding: 1.25rem; overflow-y: auto; }
.review-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.review-detail-heading h2 { color: #f8fafc; font-size: 1.15rem; font-weight: 650; text-transform: capitalize; }
.review-detail-heading p { margin-top: .25rem; color: #64748b; font-family: ui-monospace, monospace; font-size: .68rem; }
.review-detail-tabs { display: flex; gap: .25rem; margin: 1.25rem 0; overflow-x: auto; border-bottom: 1px solid #334155; }
.review-detail-tabs button { flex: 0 0 auto; padding: .65rem .75rem; border-bottom: 2px solid transparent; color: #94a3b8; font-size: .75rem; font-weight: 600; }
.review-detail-tabs button.is-active { border-bottom-color: #6366f1; color: #c7d2fe; }
.review-detail-panel { display: grid; gap: 1rem; }
.review-metadata-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .65rem; }
.review-metadata-grid > div { min-width: 0; padding: .75rem; border: 1px solid #1e293b; border-radius: .65rem; background: #020617; }
.review-metadata-grid span, .review-metadata-grid strong { display: block; }
.review-metadata-grid span { color: #64748b; font-size: .62rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.review-metadata-grid strong { margin-top: .3rem; overflow-wrap: anywhere; color: #cbd5e1; font-size: .74rem; font-weight: 500; }
.review-form, .review-evidence-section { padding: 1rem; border: 1px solid #312e81; border-radius: .75rem; background: rgb(30 27 75 / .2); }
.review-form { display: grid; grid-template-columns: 180px 1fr auto; gap: .75rem; align-items: end; }
.review-form h3 { grid-column: 1 / -1; color: #e2e8f0; font-size: .8rem; font-weight: 650; }
.review-form label { color: #94a3b8; font-size: .68rem; }
.review-form select, .review-form textarea { display: block; width: 100%; margin-top: .35rem; padding: .55rem .65rem; border: 1px solid #334155; border-radius: .55rem; background: #020617; color: #e2e8f0; font-size: .78rem; }
.review-evidence-section h3 { margin-bottom: .75rem; color: #e2e8f0; font-size: .82rem; font-weight: 650; }
.review-helper { margin-top: .4rem; color: #64748b; font-size: .68rem; }
.review-transcript-list { display: grid; gap: .6rem; max-height: calc(100vh - 230px); overflow-y: auto; }
.review-transcript-message { padding: .8rem; border: 1px solid #1e293b; border-radius: .65rem; background: #020617; }
.review-transcript-message span { color: #818cf8; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
.review-transcript-message p { margin-top: .3rem; color: #cbd5e1; font-size: .82rem; line-height: 1.55; white-space: pre-wrap; }
.review-json-block { border: 1px solid #1e293b; border-radius: .65rem; background: #020617; }
.review-json-block summary { cursor: pointer; padding: .85rem; color: #cbd5e1; font-size: .75rem; font-weight: 650; }
.review-json-block pre { max-height: 420px; padding: 0 .85rem .85rem; overflow: auto; color: #94a3b8; font-size: .68rem; white-space: pre-wrap; }
body.review-drawer-open { overflow: hidden; }
html.theme-light .review-summary-card, html.theme-light .review-drawer { border-color: #e2e8f0; background: #fff; }
html.theme-light .review-summary-card strong, html.theme-light .review-detail-heading h2 { color: #0f172a; }
html.theme-light .review-search-wrap, html.theme-light .review-filter-panel select, html.theme-light .review-filter-panel input, html.theme-light .review-metadata-grid > div, html.theme-light .review-form select, html.theme-light .review-form textarea, html.theme-light .review-transcript-message, html.theme-light .review-json-block { border-color: #cbd5e1; background: #f8fafc; }
html.theme-light .review-search-wrap input, html.theme-light .review-metadata-grid strong, html.theme-light .review-transcript-message p { color: #1e293b; }
html.theme-light .review-table th { background: #f8fafc; }
html.theme-light .review-row:hover, html.theme-light .review-row:focus, html.theme-light .review-row.is-selected { background: #f1f5f9; }
@media (max-width: 960px) {
  .review-filter-panel { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review-metadata-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .review-form { grid-template-columns: 1fr; }
  .review-form h3 { grid-column: auto; }
}
@media (max-width: 700px) {
  .review-summary-grid { grid-template-columns: 1fr; }
  .review-summary-card { min-height: 58px; }
  .review-toolbar { flex-wrap: wrap; }
  .review-search-wrap { flex-basis: 100%; }
  .review-filter-panel { grid-template-columns: 1fr; }
  .review-table thead { display: none; }
  .review-table, .review-table tbody, .review-table tr, .review-table td { display: block; width: 100%; }
  .review-table tr { position: relative; padding: .7rem 2.4rem .7rem .8rem; border-bottom: 1px solid #1e293b; }
  .review-table td { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: .65rem; max-width: none; padding: .3rem 0; border: 0; }
  .review-table td::before { content: attr(data-label); color: #64748b; font-size: .62rem; font-weight: 700; text-transform: uppercase; }
  .review-table .review-row-arrow { position: absolute; top: 50%; right: .8rem; display: block; width: auto; transform: translateY(-50%); }
  .review-table .review-row-arrow::before { display: none; }
  .review-id { max-width: none; }
  .review-pagination { align-items: flex-start; flex-direction: column; }
  .review-drawer { width: 100vw; }
  .review-metadata-grid { grid-template-columns: 1fr; }
}


.workspace-page > :not(.workspace-header) + :not(.workspace-header) { margin-top: 1.25rem; }
.conversation-page { min-width: 0; margin-left: var(--app-nav-width); }
.webcall-workspace-card { width: 100%; max-width: none; margin-inline: auto; }
#webcall-card { padding: clamp(1.25rem, 2vw, 2rem) !important; border-color: #334155 !important; box-shadow: 0 18px 48px rgb(2 6 23 / .2); }
#webcall-card h2 { color: #f8fafc; font-size: 1.125rem; line-height: 1.4; }
.webcall-config-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 1rem; margin-bottom: 1.25rem; }
.webcall-section { padding: 1rem; border: 1px solid #334155 !important; border-radius: .75rem; background: rgb(2 6 23 / .34) !important; }
.webcall-history-section { min-height: 100%; }
#webcall-card label, #webcall-card .webcall-section > label { color: #cbd5e1 !important; font-size: .78rem; font-weight: 650; letter-spacing: .01em; }
#webcall-card select { min-height: 44px; border-color: #475569 !important; background: #1e293b !important; color: #f8fafc !important; font-size: .84rem !important; box-shadow: inset 0 1px 0 rgb(255 255 255 / .025); }
#webcall-card select:hover { border-color: #64748b !important; }
#webcall-card select:focus { border-color: #818cf8 !important; box-shadow: 0 0 0 3px rgb(99 102 241 / .16); }
#webcall-card .text-slate-400 { color: #cbd5e1 !important; }
#webcall-card .text-slate-500, #webcall-card .text-slate-600 { color: #94a3b8 !important; }
#webcall-card .border-slate-800 { border-color: #334155 !important; }
#webcall-card .border-slate-700 { border-color: #475569 !important; }
#webcall-call-details { gap: .75rem; }
#webcall-call-details > div { min-width: 0; padding: .7rem; border-radius: .55rem; background: rgb(15 23 42 / .72); }
#webcall-call-details span { display: block; color: #94a3b8 !important; font-size: .7rem; font-weight: 600; }
#webcall-call-details p { color: #e2e8f0 !important; font-size: .75rem; line-height: 1.45; }
.webcall-signal-grid > div { border-color: #334155 !important; background: rgb(2 6 23 / .34) !important; }
#webcall-transcript-card { min-height: 230px; }
#webcall-transcript { max-height: 360px; }
#webcall-refresh-history-btn, #webcall-delete-session-btn { min-width: 44px; min-height: 44px; font-size: .8rem; font-weight: 600; }
.webcall-actions { padding-top: .25rem; }
#webcall-start-btn, #webcall-mute-btn, #webcall-end-btn { min-height: 44px; border: 1px solid transparent; padding-inline: 1.25rem; font-weight: 650; box-shadow: 0 1px 2px rgb(0 0 0 / .18); }
#webcall-start-btn { border-color: #22c55e; background: #15803d; }
#webcall-start-btn:hover { background: #16a34a; }
#webcall-mute-btn { border-color: #475569; background: #1e293b; color: #e2e8f0; }
#webcall-mute-btn:hover { border-color: #818cf8; background: #273449; }
#webcall-end-btn { border-color: #ef4444; background: #7f1d1d; color: #fee2e2; }
#webcall-end-btn:hover { background: #991b1b; }
#webcall-start-btn:focus-visible, #webcall-mute-btn:focus-visible, #webcall-end-btn:focus-visible, #webcall-refresh-history-btn:focus-visible, #webcall-delete-session-btn:focus-visible { outline: 2px solid #a5b4fc; outline-offset: 2px; }
.advanced-settings { border: 1px solid #334155; border-radius: .7rem; background: rgb(2 6 23 / .34); }
.advanced-settings summary { display: flex; min-height: 48px; cursor: pointer; list-style: none; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: #e2e8f0; font-size: .8rem; font-weight: 650; }
.advanced-settings summary::-webkit-details-marker { display: none; }
.advanced-settings summary::after { content: '⌄'; color: #64748b; font-size: 1rem; }
.advanced-settings[open] summary::after { transform: rotate(180deg); }
.advanced-settings summary small { margin-left: auto; color: #94a3b8; font-size: .72rem; font-weight: 400; }
.advanced-settings-body { padding: 0 1rem 1rem; border-top: 1px solid #1e293b; padding-top: 1rem; }
.webcall-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; margin-bottom: 1rem; }
.webcall-step { display: flex; min-height: 50px; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1px solid #334155; border-radius: .65rem; color: #94a3b8; background: rgb(2 6 23 / .22); }
.webcall-step span { display: inline-flex; width: 1.6rem; height: 1.6rem; align-items: center; justify-content: center; border-radius: 999px; background: #273449; color: #cbd5e1; font-size: .7rem; font-weight: 700; }
.webcall-step strong { font-size: .8rem; }
.webcall-step.is-active { border-color: #4f46e5; background: rgb(49 46 129 / .24); color: #c7d2fe; }
.webcall-step.is-active span { background: #4f46e5; color: white; }
html.theme-light .advanced-settings, html.theme-light .webcall-step { border-color: #e2e8f0; background: #fff; }
html.theme-light .advanced-settings-body { border-color: #e2e8f0; }
html.theme-light .webcall-step.is-active { border-color: #818cf8; background: #eef2ff; color: #3730a3; }
html.theme-light #webcall-card { border-color: #cbd5e1 !important; box-shadow: 0 18px 42px rgb(15 23 42 / .08); }
html.theme-light #webcall-card h2 { color: #0f172a; }
html.theme-light .webcall-section, html.theme-light .webcall-signal-grid > div { border-color: #cbd5e1 !important; background: #f8fafc !important; }
html.theme-light #webcall-card label, html.theme-light #webcall-card .webcall-section > label { color: #334155 !important; }
html.theme-light #webcall-card select { border-color: #94a3b8 !important; background: #fff !important; color: #0f172a !important; }
html.theme-light #webcall-card .text-slate-400 { color: #334155 !important; }
html.theme-light #webcall-card .text-slate-500, html.theme-light #webcall-card .text-slate-600 { color: #64748b !important; }
html.theme-light #webcall-call-details > div { background: #fff; }
html.theme-light #webcall-call-details p { color: #0f172a !important; }
html.theme-light #webcall-mute-btn { border-color: #94a3b8; background: #fff; color: #334155; }
@media (max-width: 1050px) { .webcall-config-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .conversation-page { margin-left: 0; } }
@media (max-width: 640px) {
  .webcall-steps { grid-template-columns: 1fr; }
  .advanced-settings summary small { display: none; }
  .webcall-actions > button { flex: 1 1 auto; }
  #webcall-transcript-card { min-height: 190px; }
}


/* The sidebar reduces usable width, so BaseCamp leaves three columns only on
   genuinely wide workstations and progressively stacks on smaller displays. */
@media (max-width: 1500px) and (min-width: 1101px) {
  #panel-basecamp > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #panel-basecamp > .grid > :first-child { grid-row: span 2; }
}
@media (max-width: 1100px) {
  #panel-basecamp > .grid { grid-template-columns: minmax(0, 1fr) !important; }
}