:root {
  --bg: #f8fafc;
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-darker: #1e40af;
  --brand-weak: #eff6ff;
  --brand-soft: #dbeafe;
  --brand-soft-strong: #bfdbfe;
  --brand-soft-text: #1d4ed8;
  --surface: #ffffff;
  --surface-muted: #f9fafb;
  --panel: #f3f4f6;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --text: #111827;
  --text-2: #374151;
  --text-3: #6b7280;
  --text-4: #4b5563;
  --text-muted: #9ca3af;
  --radius: 12px;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --sidebar-width: 256px;
  --sidebar-collapsed: 56px;
  --canvas-narrow: 450px;
  --canvas-wide: 720px;
  --transition-fast: 150ms ease;
  --transition-quick: 120ms ease;
  --transition-normal: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-card-strong: 0 1px 2px rgba(17,24,39,.04), 0 2px 6px rgba(17,24,39,.05);
  --shadow-card-hover: 0 4px 14px rgba(17,24,39,.08), 0 2px 4px rgba(17,24,39,.04);
  --shadow-ai-hover: 0 0 0 1px rgba(14,165,233,.25), 0 8px 22px rgba(14,165,233,.15);
  --shadow-popover: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.04);
  --shadow-popover-strong: 0 8px 24px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.25);
  --font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Stage colors for pipeline */
  --stage-1: #64748b;
  --stage-2: #f59e0b;
  --stage-3: #2563eb;
  --stage-4: #0891b2;
  --stage-5: #059669;
  --stage-6: #475569;

  /* AI/accent colors */
  --ai-cyan: #0ea5e9;
  --ai-blue: #2563eb;
  --ai-deep: #0c4a6e;
  --ai-surface: #f0f9ff;
  --ai-surface-2: #e0f2fe;
  --ai-border: #bae6fd;

  --amber: #b45309; --amber-bg: #fef3c7; --amber-strong: #f59e0b;
  --red: #b91c1c; --red-bg: #fee2e2;
  --green: #047857; --green-bg: #d1fae5;
}


/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Lock the page to its designed light palette. Without this, Chrome's
   "Auto dark mode for web contents" (active when the OS is in dark mode)
   can auto-invert tables / form controls / inputs and produce the
   black-table issue we saw on the Team tab. The whole app is light-only
   for now, so we declare it explicitly. */
html { height: 100%; -webkit-text-size-adjust: 100%; color-scheme: light; }
:root { color-scheme: light; }

body {
    height: 100%;
    font-family: var(--font-family, 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif);
    background: #f9fafb;
    color: #111827;
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

/* Force tables to render with the design system's light palette even when
   browser auto-dark heuristics kick in. */
table, thead, tbody, tr, th, td {
    background-color: transparent;
    color: inherit;
}
.stg-data-table,
.stg-data-table thead,
.stg-data-table tbody,
.stg-data-table tr,
.stg-data-table th,
.stg-data-table td {
    background-color: transparent !important;
    color: inherit;
}

/* === Global scrollbar === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Global form element styling — blue checkboxes & radios everywhere */
input[type="checkbox"],
input[type="radio"] {
    accent-color: #2563eb;
    width: 16px;
    height: 16px;
    appearance: none;
    -webkit-appearance: none;
    border: 1.5px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    position: relative;
    transition: background 120ms ease, border-color 120ms ease;
    flex-shrink: 0;
    vertical-align: middle;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background: #2563eb;
    border-color: #2563eb;
}
input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="radio"]:checked {
    background: #fff;
    border-color: #2563eb;
}
input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
}


/* ============================================================
   3-PANE LAYOUT — Sidebar (left) | Center | Canvas (right)
   Uses CSS custom properties from design_tokens.py
   ============================================================ */

/* === 3-Pane container === */
.app-layout-3pane {
    display: flex;
    /* `100vh` includes the mobile browser's address bar so the bottom of
       the layout (composer, suggestion chips) ended up clipped behind
       Chrome's URL bar. `100dvh` (dynamic viewport height) tracks the
       actually-visible area; the 100vh fallback keeps older browsers
       working. */
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow: hidden;
}

/* === Navigation Sidebar (left pane) === */
.nav-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: #f9fafb;
    overflow: hidden;
    transition: width var(--transition-normal), margin-right var(--transition-normal);
    z-index: 40;
}

/* Prevent sidebar flash on page load when collapsed */
html.sidebar-collapsed-preload .nav-sidebar {
    width: var(--sidebar-collapsed);
    transition: none;
}
html.sidebar-collapsed-preload .nav-sidebar .sb-hide {
    display: none !important;
}
html.sidebar-collapsed-preload .nav-sidebar .sb-only-rail {
    display: flex !important;
}
html.sidebar-collapsed-preload .expand-sidebar-btn {
    display: flex;
}

/* Collapsed / rail mode (desktop) */
.nav-sidebar.collapsed {
    width: var(--sidebar-collapsed);
}

/* Hover-expand (desktop): the collapsed rail opens as an OVERLAY while the
   mouse is over it. The negative margin cancels the width gain so the flex
   layout keeps the rail's footprint — the center pane never reflows when
   the pointer brushes the sidebar. JS swaps `collapsed` for `hover-expanded`
   on mouseenter and back on mouseleave; the persisted state stays collapsed. */
.nav-sidebar.hover-expanded {
    width: var(--sidebar-width);
    margin-right: calc(var(--sidebar-collapsed) - var(--sidebar-width));
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.10);
    z-index: 60;
}

/* Elements hidden in rail mode */
.nav-sidebar.collapsed .sb-hide {
    display: none !important;
}

/* Elements only shown in rail mode */
.sb-only-rail {
    display: none;
}
.nav-sidebar.collapsed .sb-only-rail {
    display: flex;
}

/* --- Row 1: Logo + toggle --- */
.sb-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
}
.nav-sidebar.collapsed .sb-row1 {
    justify-content: center;
}

.tendly-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
}
.tendly-logo-text {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    letter-spacing: -0.5px;
    line-height: 1;
}

.sb-toggle-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.sb-toggle-btn:hover {
    background: #e5e7eb;
    color: #4b5563;
}
.sb-toggle-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Row 2: New Chat + Search --- */
.sb-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px 12px;
}
.nav-sidebar.collapsed .sb-row2 {
    flex-direction: column;
    gap: 8px;
    padding: 0 8px 12px;
}

.sb-new-chat {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 10px 8px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.sb-new-chat:hover {
    background: #1d4ed8;
}
.sb-new-chat:active {
    background: #1e40af;
}
.nav-sidebar.collapsed .sb-new-chat {
    width: 40px;
    height: 40px;
    padding: 0;
    flex: none;
}
.nav-sidebar.collapsed .sb-new-chat .sb-new-chat-text {
    display: none;
}

.sb-search-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-3);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.sb-search-btn:hover {
    background: var(--panel);
}

/* --- Scrollable nav area --- */
.sb-nav {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 8px;
    overflow: hidden;
}

/* --- Nav group label (Discovery / Execution) --- */
.nav-group-label {
    padding: 0 8px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.nav-group-list {
    list-style: none;
    padding: 0;
    margin: 0 !important;
}
.nav-group-list li {
    margin-bottom: 1px;
}

/* --- Nav item --- */
.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: 6px;
    font-size: 13.5px;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.nav-item:hover {
    background: #f3f4f6;
    color: #111827;
}
.nav-item.active {
    background: var(--brand-weak);
    color: var(--brand);
    font-weight: 600;
}

.nav-icon {
    width: 16px;
    text-align: center;
    color: var(--text-muted);
    flex-shrink: 0;
    font-size: 13px;
}
.nav-item.active .nav-icon {
    color: var(--brand);
}

.nav-label {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-badge {
    font-size: 10px;
    font-weight: 700;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: auto;
}

/* Collapsed nav items: icon only, centered */
.nav-sidebar.collapsed .sb-nav {
    padding: 8px 0;
    align-items: center;
}
.nav-sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 8px 0;
    width: 40px;
    border-left: none;
}
.nav-sidebar.collapsed .nav-item > .nav-icon {
    margin: 0;
    width: auto;
}
.nav-sidebar.collapsed .nav-item > .nav-label {
    display: none;
}
.nav-sidebar.collapsed .nav-item > .nav-badge {
    display: none;
}

/* --- Chat history section --- */
.chat-history-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.nav-sidebar.collapsed .chat-history-section {
    align-items: center;
}

.chat-history-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    list-style: none;
    padding-left: 0;
    margin: 0 !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.chat-history-list::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}
.chat-history-list:hover {
    scrollbar-width: thin;
}
.chat-history-list:hover::-webkit-scrollbar {
    width: 6px;
}
.chat-history-list:hover::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.chat-history-locked {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 12px;
    text-align: center;
}
.chat-history-locked-text {
    font-size: 13px;
    color: var(--text-muted);
}
.chat-history-login-link {
    color: var(--brand);
    font-weight: 500;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}
.chat-history-login-link:hover {
    color: var(--brand-strong);
}
.chat-history-empty-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* Conversation items */
.chat-item {
    position: relative;
    list-style: none;
}
.conv-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 28px 7px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--text-3);
    font-size: 13px;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast);
    overflow: hidden;
}
.conv-item:hover,
.chat-item:hover .conv-item,
.chat-item.menu-open .conv-item {
    background: #f3f4f6;
    color: var(--text);
}
.conv-item.active {
    background: var(--brand-weak);
    color: var(--brand);
    font-weight: 500;
}
.chat-item:hover .conv-item.active,
.chat-item.menu-open .conv-item.active {
    background: var(--brand-weak);
}
.conv-item-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* Pin marker — shown inline when chat is pinned */
.pin-marker {
    display: none;
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 10px;
    cursor: pointer;
    padding: 0 2px;
    transition: color 120ms ease;
}
.pin-marker:hover {
    color: var(--brand);
}
.chat-item.pinned .pin-marker {
    display: flex;
}
.conv-item.active ~ .chat-actions { }
.chat-item.pinned .conv-item { padding-right: 32px; }

/* Three-dots button — hidden until hover */
.chat-actions {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 120ms ease, background 100ms ease, color 100ms ease;
    z-index: 2;
}
.chat-item:hover .chat-actions,
.chat-item.menu-open .chat-actions {
    opacity: 1;
}
.chat-actions:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-2);
}
.conv-item.active ~ .chat-actions {
    color: var(--brand);
}
.conv-item.active ~ .chat-actions:hover {
    background: rgba(37,99,235,0.1);
}

/* Chat context menu */
.chat-menu {
    position: absolute;
    right: 4px;
    top: 100%;
    margin-top: -2px;
    width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px -6px rgba(15,23,42,0.15);
    padding: 4px;
    z-index: 30;
}
.chat-menu.hidden { display: none; }
.chat-menu-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background 100ms ease;
}
.chat-menu-option:hover { background: #f3f4f6; }
.chat-menu-danger { color: #dc2626; }
.chat-menu-danger:hover { background: #fef2f2; }
.chat-menu-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 3px 0;
}
.conv-empty {
    padding: 24px 12px;
    text-align: center;
}
.conv-empty-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.conv-empty-link:hover {
    background: var(--panel);
}
.conv-empty-link:hover .chat-history-empty-text {
    color: var(--text-2);
}

/* Rename chat modal */
.rename-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
}
.rename-modal.hidden { display: none; }
.rename-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.4);
}
.rename-modal-panel {
    position: relative;
    z-index: 10;
    max-width: 380px;
    margin: 128px auto 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 48px -12px rgba(15,23,42,0.25);
    padding: 20px;
}
.rename-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}
.rename-modal-hint {
    font-size: 12px;
    color: #6b7280;
    margin: 3px 0 0;
}
.rename-modal-input {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    color: #0f172a;
    margin-top: 16px;
    outline: none;
    transition: border-color 150ms;
}
.rename-modal-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.rename-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}
.rename-modal-cancel {
    font-size: 13px;
    color: #4b5563;
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms;
}
.rename-modal-cancel:hover { background: #f3f4f6; }
.rename-modal-save {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: #2563eb;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms;
}
.rename-modal-save:hover { background: #1d4ed8; }

/* --- Delete chat modal --- */
.delete-modal {
    position: fixed;
    inset: 0;
    z-index: 50;
}
.delete-modal.hidden { display: none; }
.delete-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15,23,42,0.4);
}
.delete-modal-panel {
    position: relative;
    z-index: 10;
    max-width: 380px;
    margin: 128px auto 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 16px 48px -12px rgba(15,23,42,0.25);
    padding: 20px;
}
.delete-modal-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.delete-modal-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fef2f2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.delete-modal-text { flex: 1; min-width: 0; }
.delete-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}
.delete-modal-hint {
    font-size: 13px;
    color: #6b7280;
    margin: 4px 0 0;
    line-height: 1.45;
}
.delete-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}
.delete-modal-cancel {
    font-size: 13px;
    color: #4b5563;
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 100ms;
}
.delete-modal-cancel:hover { background: #f3f4f6; }
.delete-modal-confirm {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: #dc2626;
    border: none;
    padding: 6px 16px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms;
}
.delete-modal-confirm:hover { background: #b91c1c; }

/* --- Bottom section (profile + language) --- */
.sb-bottom {
    border-top: 1px solid var(--border);
    padding: 12px;
}
.nav-sidebar.collapsed .sb-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
}

.sidebar-bottom-section {
    margin-bottom: 8px;
}
.sidebar-bottom-section:last-child {
    margin-bottom: 0;
}

/* === Signed-out state (body.signed-out toggles) === */
/* Hide profile group when signed out */
body.signed-out .profile-group { display: none !important; }
/* Show signed-out CTA when signed out */
.signed-out-profile { display: none; }
body.signed-out .signed-out-profile { display: flex !important; flex-direction: column; gap: 6px; }
/* Hide chat history list when signed out */
body.signed-out .chat-history-list { display: none !important; }
/* Show locked prompt when signed out */
.chat-history-locked { display: none; }
body.signed-out .chat-history-locked { display: flex !important; }
/* Hide notification bell when signed out */
body.signed-out .notif-group { display: none !important; }

/* Signed-out buttons */
.signed-out-profile {
    flex-direction: column;
    gap: 6px;
}
.sb-login-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.sb-login-btn:hover {
    background: var(--brand-strong);
}
.sb-signup-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sb-signup-btn:hover {
    border-color: var(--border-strong);
    background: var(--panel);
}
.sb-subscriptions-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    cursor: pointer;
    transition: color var(--transition-fast);
}
.sb-subscriptions-link:hover {
    color: var(--text);
}

/* --- Profile group (hover popover) --- */
.profile-group {
    position: relative;
}
.profile-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}
.profile-trigger:hover {
    background: #f3f4f6;
}
.profile-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dbeafe;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand);
    flex-shrink: 0;
}
.profile-info {
    min-width: 0;
    flex: 1;
}
.profile-company-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.profile-user-name {
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.profile-ellipsis {
    color: var(--text-muted);
    font-size: 12px;
}

/* Profile popover menu */
.profile-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    padding-top: 8px;
    z-index: 30;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
}
.profile-group:hover .profile-menu,
.profile-group:focus-within .profile-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.profile-menu-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover);
    padding: 4px 0;
}
.profile-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-3);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}
.profile-menu-item:hover {
    background: var(--panel);
}
.profile-menu-icon {
    width: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
}
.profile-menu-divider {
    height: 1px;
    background: var(--panel);
    margin: 4px 0;
}

/* Credits row in profile popover (matches Karola's design: bold count + small
   "Credits" label inline, with a compact circular "+" on the right). */
.profile-credits-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    gap: 8px;
}
.profile-credits-info {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.profile-credits-count {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}
.profile-credits-label {
    font-size: 12px;
    color: var(--text-muted);
}
.profile-credits-add {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.profile-credits-add:hover {
    background: var(--brand-weak);
    border-color: var(--brand);
}

/* Subscribe CTA under the credits row (ticket #1397): blue outline + blue
   text with a crown icon, full-width below credits. */
.profile-subscribe-row {
    padding: 0 12px 8px;
}
.profile-subscribe-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    background: var(--surface);
    border: 1px solid var(--brand);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}
.profile-subscribe-btn i {
    color: var(--brand);
    font-size: 11px;
}
.profile-subscribe-btn:hover {
    background: var(--brand-weak);
    border-color: var(--brand-strong);
}

/* Collapsed profile group: trigger only shows avatar, centered */
.nav-sidebar.collapsed .sidebar-bottom-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.nav-sidebar.collapsed .profile-group {
    padding: 0;
    display: flex;
    justify-content: center;
}
.nav-sidebar.collapsed #profile-btn {
    justify-content: center;
    padding: 4px;
    width: 40px;
    gap: 0;
}
.nav-sidebar.collapsed .profile-info {
    display: none;
}
.nav-sidebar.collapsed .profile-avatar {
    width: 32px;
    height: 32px;
}

/* --- Language section --- */
.lang-section {
    position: relative;
}
.sb-lang-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-3);
    text-align: left;
    transition: background var(--transition-fast);
}
.sb-lang-btn:hover {
    background: #f3f4f6;
}
/* Help link (#1539): an <a> so it can open the guide in a new tab, but it
   borrows .sb-lang-btn and must drop the default anchor underline/colour so it
   sits flush with the language button below it. */
.help-section {
    position: relative;
}
a.sb-lang-btn {
    text-decoration: none;
}
a.sb-lang-btn:hover {
    color: var(--text-2);
}
.nav-sidebar.collapsed .help-section {
    display: flex;
    justify-content: center;
}
.nav-sidebar.collapsed .lang-section {
    display: flex;
    justify-content: center;
}
.nav-sidebar.collapsed .sb-lang-btn {
    justify-content: center;
    padding: 4px;
    width: 40px;
}
.lang-globe-icon {
    font-size: 12px;
    color: var(--text-muted);
}

.lang-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin-bottom: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card-hover);
    padding: 4px 0;
    z-index: 30;
    max-height: 240px;
    overflow-y: auto;
}
/* Always-visible scrollbar so users know the language list scrolls.
   NOTE: do NOT set scrollbar-width/scrollbar-color here — modern Chrome
   treats those standard properties as authoritative and then ignores the
   ::-webkit-scrollbar rules below, collapsing the bar to a hairline
   (ticket #1382). WebKit pseudo-elements give a clearly visible 8px bar. */
.lang-menu::-webkit-scrollbar {
    width: 8px;
    -webkit-appearance: none;
}
.lang-menu::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}
.lang-menu::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}
.lang-menu.hidden {
    display: none;
}
.lang-option {
    width: 100%;
    display: block;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-3);
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}
.lang-option:hover {
    background: var(--panel);
}

/* Collapsed sidebar: pop menus out to the right (desktop) */
@media (min-width: 769px) {
    .nav-sidebar.collapsed .profile-menu {
        position: fixed !important;
        left: 62px !important;
        right: auto !important;
        top: auto !important;
        bottom: 72px !important;
        padding-top: 0 !important;
        padding-left: 6px !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        width: 240px !important;
        z-index: 60;
    }
    .nav-sidebar.collapsed .lang-menu {
        position: fixed !important;
        left: 62px !important;
        right: auto !important;
        top: auto !important;
        bottom: 16px !important;
        margin-bottom: 0 !important;
        width: 160px !important;
        z-index: 60;
    }
}

/* --- Expand sidebar floating button --- */
.expand-sidebar-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 40;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.expand-sidebar-btn:hover {
    background: var(--panel);
    color: var(--text-2);
}
.expand-sidebar-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.mobile-menu-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === Center pane === */
.center-pane {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #ffffff;
    transition: all var(--transition-normal);
    overflow: hidden;
    container-type: inline-size;
    container-name: center;
}

/* === Chat main area === */
.chat-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    background: #ffffff;
    overflow: hidden;
}

/* === Canvas pane (right) === */
.canvas-pane {
    width: 0;
    flex-shrink: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: width var(--transition-normal), opacity 200ms ease;
    opacity: 0;
}
.canvas-pane.open {
    opacity: 1;
}
@media (max-width: 1200px) {
    .canvas-pane.open {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 50;
        box-shadow: -4px 0 24px rgba(0,0,0,0.10);
    }
}

.canvas-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.canvas-narrow {
    width: var(--canvas-narrow);
}
.canvas-wide {
    width: var(--canvas-wide);
}

/* Canvas header */
.canvas-header {
    height: 56px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    flex-shrink: 0;
}
.canvas-header-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.canvas-header-left {
    min-width: 0;
}
.canvas-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}
.canvas-close-btn {
    padding: 8px;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
    /* #1557 — on phones this X lands exactly on top of the center-header
       notification bell. Give it its own layer inside the canvas header and a
       44px tap target so the press can only ever hit the X, never the control
       underneath it. `touch-action: manipulation` also drops the 300ms
       double-tap delay that produced the stray second tap. */
    position: relative;
    z-index: 2;
    min-width: 40px;
    min-height: 40px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.canvas-close-btn:hover {
    background: var(--panel);
    color: var(--text-2);
}
.canvas-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background var(--transition-fast);
}
.canvas-source-link:hover {
    background: var(--panel);
}

/* Canvas tab bar.
   #1557 — Overview + Documents + Notes(count) do not fit across a 375px
   phone. They used to be squeezed by flex-shrink until the active tab's
   label and its underline were cut off. The bar now scrolls horizontally
   and every tab keeps its intrinsic width, so the active one is always
   rendered whole (switchCanvasTab scrolls it into view). */
.canvas-tab-bar {
    display: flex;
    gap: 0;
    /* The divider is an inset shadow, not a border: the active tab used to
       overlap a real border-bottom with `margin-bottom:-1px`, and that 1px
       of overhang is exactly what `overflow-y: hidden` (needed for the
       horizontal scroll below) would slice off the blue underline. Drawn
       inside the box, the tab's own 2px border paints over it instead. */
    box-shadow: inset 0 -1px 0 var(--border);
    padding: 0 20px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.canvas-tab-bar::-webkit-scrollbar {
    display: none;
}
.canvas-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 150ms, border-color 150ms;
    /* No negative margin — the bar's divider is an inset shadow now, so the
       2px underline already lands on top of it and stays inside the
       scroll container. */
    margin-bottom: 0;
    flex: 0 0 auto;
    white-space: nowrap;
}
.canvas-tab:hover {
    color: var(--text-2);
}
.canvas-tab.active {
    color: var(--text);
    border-bottom-color: #2563eb;
}
.canvas-tab-count {
    font-size: 11px;
    font-weight: 600;
    background: #eff6ff;
    color: #2563eb;
    padding: 1px 6px;
    border-radius: 999px;
    min-width: 18px;
    text-align: center;
}

/* Canvas notes panel */
.canvas-notes-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.canvas-notes-panel.hidden {
    display: none;
}
/* The scroll region wraps the pinned assessment card AND the notes list, so
   expanding the assessment scrolls this area instead of squeezing the notes
   list or pushing the composer off-screen. */
.canvas-notes-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.canvas-notes-list {
    padding: 16px 20px;
}
/* Pinned expert-assessment card at the top of the Notes tab (ticket TaaS).
   Populated per tender from /api/tender-assessment/{id}; the wrapper stays
   empty (and collapses) when a tender has no expert assessment. */
.canvas-assessment {
    flex: 0 0 auto;
}
.canvas-assessment:empty {
    display: none;
}
.canvas-assess {
    margin: 16px 20px 4px;
    padding: 14px 16px;
    background: var(--brand-weak, #eff6ff);
    border: 1px solid var(--brand-soft, #bfdbfe);
    border-radius: 12px;
}
.ca-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ca-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--brand-strong, #1d4ed8);
}
.ca-eyebrow svg {
    width: 13px;
    height: 13px;
}
.ca-verdict {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ca-vd {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.ca-verdict.good { color: #059669; background: #ecfdf5; border-color: #a7f3d0; }
.ca-verdict.warn { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.ca-verdict.bad  { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.ca-summary {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text, #1f2937);
}
/* Preview: the first detail group shown inline (top facts), separated from the
   prose summary by a hairline. Replaces the old hand-authored chips. */
.ca-preview {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--brand-soft, #bfdbfe);
}
.ca-toggle {
    margin-top: 12px;
}
.ca-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand, #2563eb);
}
.ca-toggle-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.18s ease;
}
.canvas-assess.open .ca-toggle-btn svg {
    transform: rotate(180deg);
}
.ca-lbl-hide { display: none; }
.canvas-assess.open .ca-lbl-show { display: none; }
.canvas-assess.open .ca-lbl-hide { display: inline; }
.ca-detail {
    display: none;
    flex-direction: column;
    gap: 16px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--brand-soft, #bfdbfe);
}
.canvas-assess.open .ca-detail {
    display: flex;
}
.ca-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ca-group-h {
    margin: 0 0 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-3, #6b7280);
}
.ca-row {
    display: flex;
    gap: 12px;
    align-items: baseline;
}
.ca-rk {
    flex: 0 0 40%;
    font-size: 12.5px;
    color: var(--text-2, #4b5563);
}
.ca-rv {
    flex: 1;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text, #1f2937);
}
.ca-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--brand-soft, #bfdbfe);
}
.ca-by {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-3, #6b7280);
}
.ca-av {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--brand, #2563eb);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.ca-docs {
    font-size: 11.5px;
    color: var(--text-3, #6b7280);
}
.canvas-note {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.canvas-note:last-child {
    border-bottom: none;
}
.canvas-note-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    flex-shrink: 0;
}
.canvas-note-body {
    flex: 1;
    min-width: 0;
}
.canvas-note-header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.canvas-note-author {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.canvas-note-time {
    font-size: 11px;
    color: var(--text-muted);
}
.canvas-note-text {
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.5;
    margin-top: 4px;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Markdown elements inside a note (pasted checklists keep their formatting).
   color: inherit beats Pico's element-level colors, same as .message-text. */
.canvas-note-text p, .canvas-note-text li, .canvas-note-text span,
.canvas-note-text td, .canvas-note-text th { color: inherit; }
.canvas-note-text p { margin: 0 0 6px; }
.canvas-note-text p:last-child { margin-bottom: 0; }
.canvas-note-text ul, .canvas-note-text ol { margin: 4px 0 8px; padding-left: 20px; }
.canvas-note-text ul { list-style: disc; }
.canvas-note-text ol { list-style: decimal; }
.canvas-note-text li { margin: 2px 0; display: list-item; }
.canvas-note-text strong { color: var(--text); }
.canvas-note-text code {
    background: #f3f4f6;
    border-radius: 4px;
    padding: 1px 4px;
    font-size: 12px;
}
.canvas-note-text pre {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 8px 10px;
    margin: 6px 0;
    overflow-x: auto;
    white-space: pre;
}
.canvas-note-text table {
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 12px;
    display: block;
    overflow-x: auto;
    max-width: 100%;
}
.canvas-note-text th, .canvas-note-text td {
    border: 1px solid var(--border);
    padding: 4px 8px;
    text-align: left;
}
.canvas-note-text th { background: #f9fafb; font-weight: 600; }
/* Inline edit / delete controls — hidden until the row is hovered/focused
   so the notes list stays clean (ticket #1388). */
.canvas-note-actions-menu {
    margin-left: auto;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 120ms;
}
.canvas-note:hover .canvas-note-actions-menu,
.canvas-note:focus-within .canvas-note-actions-menu {
    opacity: 1;
}
.canvas-note-action-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 11px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
}
.canvas-note-action-btn:hover {
    background: var(--surface-2, #f3f4f6);
    color: #2563eb;
}
.canvas-note-action-btn.canvas-note-action-del:hover {
    background: #fef2f2;
    color: #dc2626;
}
.canvas-note-edit {
    margin-top: 6px;
}
.canvas-note-edit-input {
    width: 100%;
}
.canvas-note-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.canvas-note-edit-save,
.canvas-note-edit-cancel {
    height: 30px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 7px;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
}
.canvas-note-edit-save {
    background: #2563eb;
    color: #fff;
    border: none;
}
.canvas-note-edit-save:hover {
    background: #1d4ed8;
}
.canvas-note-edit-save[disabled] {
    opacity: 0.6;
    cursor: default;
}
.canvas-note-edit-cancel {
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
}
.canvas-note-edit-cancel:hover {
    background: var(--surface-2, #f3f4f6);
}
.canvas-notes-composer {
    border-top: 1px solid var(--border);
    padding: 12px 20px 16px;
    flex-shrink: 0;
    position: relative;
}
/* @mention autocomplete dropdown (anchored above the composer textarea) */
.canvas-mention-dropdown {
    position: absolute;
    bottom: calc(100% - 6px);
    left: 20px;
    right: 20px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
    z-index: 60;
}
.canvas-mention-dropdown.hidden {
    display: none;
}
.canvas-mention-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text, #111827);
    min-width: 0;
}
.canvas-mention-item.active {
    background: #eff6ff;
}
.canvas-mention-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    flex: none;
}
.canvas-mention-name {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.canvas-mention-email {
    color: var(--text-muted, #9ca3af);
    font-size: 11px;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
/* Highlighted "@Full Name" token inside a rendered note */
.canvas-note-mention {
    color: #2563eb;
    background: #eff6ff;
    border-radius: 4px;
    padding: 0 3px;
    font-weight: 600;
}
.canvas-notes-input {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: var(--text);
    background: var(--surface);
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    min-height: 60px;
    max-height: 40vh;
    overflow-y: auto;
}
.canvas-notes-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.canvas-notes-input::placeholder {
    color: var(--text-muted);
}
.canvas-notes-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}
.canvas-notes-attach-btn {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.canvas-notes-attach-btn:hover {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}
/* Files staged in the composer (before the note is posted) */
.canvas-notes-pending {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.canvas-notes-pending.hidden {
    display: none;
}
.canvas-notes-pending-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 6px 4px 10px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    font-size: 12px;
    color: #1d4ed8;
}
.canvas-notes-pending-name {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.canvas-notes-pending-size {
    color: #60a5fa;
    font-size: 11px;
    white-space: nowrap;
}
.canvas-notes-pending-remove {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: #60a5fa;
    font-size: 11px;
    cursor: pointer;
    transition: background 120ms, color 120ms;
    flex-shrink: 0;
}
.canvas-notes-pending-remove:hover {
    background: #dbeafe;
    color: #1d4ed8;
}
/* Downloadable attachments rendered inside a posted note */
.canvas-note-attachments {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}
.canvas-note-attachment {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    padding: 6px 10px;
    background: var(--surface-2, #f9fafb);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-2);
    text-decoration: none;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.canvas-note-attachment:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}
.canvas-note-attachment i {
    color: #2563eb;
    font-size: 14px;
    flex-shrink: 0;
}
.canvas-note-attachment-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.canvas-note-attachment-size {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
    margin-left: auto;
    padding-left: 8px;
    flex-shrink: 0;
}
.canvas-notes-post-btn {
    height: 34px;
    padding: 0 16px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background 150ms;
}
.canvas-notes-post-btn:hover {
    background: #1d4ed8;
}
.canvas-notes-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Canvas documents panel */
.canvas-docs-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.canvas-docs-panel.hidden {
    display: none;
}
.canvas-docs-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.canvas-doc {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}
.canvas-doc:last-child {
    border-bottom: none;
}
.canvas-doc-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.canvas-doc-body {
    flex: 1;
    min-width: 0;
}
.canvas-doc-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 2px;
}
.canvas-doc-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.canvas-doc-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.canvas-doc-view-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #2563eb;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms;
}
.canvas-doc-view-btn:hover {
    background: #dbeafe;
}
/* Ticket #1287: "Generate" button — visually paired with View but
   slightly stronger to signal the primary doc-gen action. */
.canvas-doc-gen-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #fff;
    background: #2563eb;
    border: 1px solid #2563eb;
    border-radius: 6px;
    cursor: pointer;
    transition: background 150ms, border-color 150ms;
    font-family: inherit;
}
.canvas-doc-gen-btn:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}
.canvas-docs-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
    font-size: 13px;
}

/* Canvas states */
.canvas-state {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.canvas-state.hidden {
    display: none;
}

/* Canvas empty state */
.canvas-empty-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
}
.canvas-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: var(--panel);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    margin-bottom: 16px;
}
.canvas-empty-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-2);
    margin: 0 0 4px 0;
}
.canvas-empty-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    max-width: 240px;
    margin: 0;
    line-height: 1.5;
}

/* Canvas body (scrollable content) */
.canvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* === Mobile header === */
.mobile-header {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}
.mobile-header-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
}
.mobile-menu-btn {
    background: none;
    border: none;
    color: var(--text-2);
    cursor: pointer;
    padding: 6px;
    display: flex;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
}
.mobile-menu-btn:active {
    background: var(--panel);
}

/* === Mobile overlay === */
.mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.45);
    z-index: 35;
}
.mobile-overlay.open {
    display: block;
}

/* === Legacy sidebar styles (kept for backward compatibility) === */
.sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
    z-index: 40;
}
.sidebar-header {
    padding: 18px 18px 14px;
    border-bottom: 1px solid #f3f4f6;
}
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.logo-mark {
    width: 32px; height: 32px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 14px; color: #fff;
    flex-shrink: 0;
}
.logo-text {
    font-size: 16px;
    font-weight: 700;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.3px;
}
.logo-badge {
    font-size: 9px;
    font-weight: 600;
    color: #2563eb;
    background: #eff6ff;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.new-chat-btn {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 12px 4px;
    padding: 9px 13px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--brand);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.new-chat-btn:hover {
    background: var(--brand-weak);
    border-color: #93c5fd;
}
.new-chat-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; }
.conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 8px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.conversation-list::-webkit-scrollbar { width: 4px; }
.conversation-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.sidebar-footer {
    padding: 12px 18px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sidebar-footer-lang { width: 100%; }
.sidebar-footer-text {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.2px;
    text-align: center;
}
.language-switcher {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-muted);
    font-size: 12px;
    color: var(--text-2);
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}
.language-switcher:hover {
    border-color: var(--border-strong);
    background: var(--panel);
}

/* User section */
.sidebar-user-section {
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}
.user-info-row { display: flex; align-items: center; gap: 10px; }
.user-avatar-small {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; font-size: 13px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.user-info-text { min-width: 0; flex: 1; }
.user-name-text {
    font-size: 13px; font-weight: 600; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-email-text {
    font-size: 11px; color: var(--text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-login-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 8px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff; font-size: 13px; font-weight: 500;
    text-decoration: none; transition: opacity 0.15s;
    width: 100%; justify-content: center;
}
.sidebar-login-btn:hover { opacity: 0.9; }

/* === Responsive === */
@media (max-width: 900px) {
    .suggestions-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    /* Legacy sidebar mobile */
    .sidebar {
        position: fixed;
        left: 0; top: 0; bottom: 0;
        transform: translateX(-100%);
        box-shadow: 4px 0 20px rgba(0,0,0,0.1);
    }
    .sidebar.open { transform: translateX(0); }

    /* 3-pane sidebar mobile */
    .nav-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 45;
        width: 280px !important;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.25);
        transition: transform var(--transition-normal);
        /* Start hidden on mobile, JS removes collapsed class to show */
        transform: translateX(-100%);
    }
    /* When sidebar is explicitly opened on mobile (collapsed removed by JS) */
    body.mobile-sidebar-open .nav-sidebar {
        transform: translateX(0) !important;
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.25);
    }
    /* On mobile, collapsed = hidden off-screen (no rail mode) */
    .nav-sidebar.collapsed {
        width: 280px !important;
        transform: translateX(-100%);
        box-shadow: none;
    }
    /* Undo rail-mode overrides on mobile */
    .nav-sidebar.collapsed .sb-hide { display: revert !important; }
    .nav-sidebar.collapsed .sb-only-rail { display: none !important; }
    /* …but don't resurrect the signed-out CTA for users who ARE signed in
       (the rail-mode revert above accidentally un-hid it on mobile —
       report #19). Respect the same body.signed-out toggle desktop uses. */
    .nav-sidebar.collapsed .signed-out-profile { display: none !important; }
    body.signed-out .nav-sidebar.collapsed .signed-out-profile { display: flex !important; flex-direction: column; gap: 6px; }
    body.signed-out .nav-sidebar.collapsed .profile-group { display: none !important; }
    .nav-sidebar.collapsed .sb-row1 { justify-content: space-between !important; }
    .nav-sidebar.collapsed .sb-row2 {
        flex-direction: row !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .nav-sidebar.collapsed .sb-new-chat {
        width: auto !important;
        height: auto !important;
        padding: 10px 8px !important;
        flex: 1 !important;
    }
    .nav-sidebar.collapsed .sb-new-chat .sb-new-chat-text { display: inline !important; }
    .nav-sidebar.collapsed .sb-search-btn { width: 40px !important; height: 40px !important; }
    .nav-sidebar.collapsed .nav-item {
        justify-content: flex-start !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .nav-sidebar.collapsed .nav-item > .nav-label { display: inline !important; }
    .nav-sidebar.collapsed .nav-item > .nav-badge { display: inline !important; }
    .nav-sidebar.collapsed #profile-btn { justify-content: flex-start !important; padding: 8px !important; }
    .nav-sidebar.collapsed .sb-lang-btn { justify-content: flex-start !important; padding: 6px 8px !important; }
    /* #1551: on mobile the WHOLE nav column is the scroll region — Discovery
       + Execution + Chat history scroll together, while the logo/New-chat
       rows above and the profile/language footer below stay put.
       Before this, `.sb-nav` was `overflow:hidden` and only `.chat-history-list`
       scrolled; the two nav groups are ~330px tall on a phone, so the list was
       left with a ~50px strip — the "only the small area under Chat history is
       scrollable" the ticket reports. Letting the list size to its content and
       moving the scroll up to `.sb-nav` makes the whole region draggable. */
    .sb-nav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    .chat-history-section { flex: 0 0 auto; }
    .chat-history-list {
        flex: 0 0 auto;
        overflow-y: visible;
    }

    /* Revert collapsed popover positioning on mobile */
    .nav-sidebar.collapsed .profile-menu {
        left: 12px !important;
        right: 12px !important;
        bottom: 100% !important;
        top: auto !important;
        padding-top: 8px;
        padding-left: 0 !important;
        width: auto !important;
    }
    .nav-sidebar.collapsed .lang-menu {
        left: 0 !important;
        right: 0 !important;
        bottom: 100% !important;
        top: auto !important;
        width: auto !important;
    }
    /* Taller language menu on mobile so the full list is reachable and
       the popup extends up to roughly the Explorer section, with a
       visible scrollbar (ticket #1382). */
    .lang-menu {
        max-height: 60vh !important;
        -webkit-overflow-scrolling: touch;
    }

    /* Canvas mobile: full-screen overlay */
    .canvas-pane {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        max-width: 100vw;
        box-shadow: -10px 0 25px -5px rgba(0,0,0,0.2);
    }
    .canvas-pane.open {
        width: 100vw !important;
    }
    .canvas-pane > div {
        width: 100% !important;
    }

    /* #1557 — tighter tab metrics so Overview + Documents + Notes fit a
       375px phone without the active pill being clipped; the bar still
       scrolls when a translation runs longer than English. */
    .canvas-tab-bar {
        padding: 0 12px;
    }
    .canvas-tab {
        padding: 10px 12px;
        font-size: 12px;
        gap: 5px;
    }
    /* The canvas X sits over the center-header bell on phones — keep it a
       full 44px target and above the header stack. */
    .canvas-header {
        padding: 0 12px;
    }
    .canvas-close-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* Backdrop visible when overlays open */
    body.mobile-sidebar-open .mobile-overlay,
    body.mobile-canvas-open .mobile-overlay {
        display: block;
    }

    /* #1557: the chat composer painted THROUGH the dim backdrop while the
       drawer was open (undimmed, still tappable). The backdrop now sits
       just under the drawer itself (.nav-sidebar / .canvas-pane are 45)
       and above every center-pane layer, and the composer is explicitly
       pinned to the bottom of the stack + made inert while dimmed, so a
       tap on it closes the drawer instead of typing behind it. */
    .mobile-overlay { z-index: 44; }
    .chat-input-area { position: relative; z-index: 0; }
    body.mobile-sidebar-open .chat-input-area { pointer-events: none; }

    .mobile-overlay.open { display: block; }
    .mobile-header { display: none; }
    .expand-sidebar-btn { display: none !important; }

    .suggestions-grid { grid-template-columns: 1fr; }
    .message-inner { padding: 0 16px; }
    /* AI answers (tender cards inside) need the full column on phones —
       the desktop 85% cap leaves cards too narrow to fit their action row. */
    .ai-message .message-content { max-width: 100%; }
    .chat-input-area { padding: 0 12px 12px; }
    .welcome-wrapper { padding: 24px 16px 0; }
    .welcome-title { font-size: 24px; }
    .welcome-subtitle { font-size: 14px; margin-bottom: 24px; }
    .welcome-icon { width: 48px; height: 48px; border-radius: 14px; }
    .welcome-icon svg { width: 24px; height: 24px; }
    .compact-card .cc-body { padding: 0.625rem 0.75rem 0.4rem; }
    .conv-item { padding: 10px 12px; min-height: 40px; }
    .input-shortcut { display: none; }
    .message-actions { opacity: 1; }
    .action-btn-label { display: none; }
}

@media (max-width: 480px) {
    .welcome-title { font-size: 22px; }
    .welcome-subtitle { font-size: 13px; }
    .suggestion-card { padding: 12px; }
    .compact-card .cc-key { gap: 0.5rem; }
    .compact-card .cc-actions { gap: 0.375rem; }
    /* Card actions share the row evenly; if space still runs out a whole
       button drops to its own full-width row instead of wrapping its label. */
    .cc-pipeline-btn, .cc-overview-btn, .cc-askai-btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* === Search Chat History Modal === */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.search-modal.hidden { display: none; }
.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, 0.4);
}
.search-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 560px;
    margin-top: 96px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.search-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #e5e7eb;
}
.search-modal-input {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    color: #111827;
    font-family: inherit;
}
.search-modal-input::placeholder { color: #9ca3af; }
.search-modal-kbd {
    font-size: 10px;
    color: #9ca3af;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 2px 6px;
    font-family: inherit;
}
.search-modal-close {
    background: none;
    border: none;
    padding: 4px;
    border-radius: 4px;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-modal-close:hover { background: #f3f4f6; color: #4b5563; }
.search-modal-results {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}
.search-result-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-bottom: 1px solid #f9fafb;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f9fafb; }
.search-result-icon {
    color: #9ca3af;
    font-size: 12px;
    margin-top: 3px;
    flex-shrink: 0;
}
.search-result-text {
    flex: 1;
    min-width: 0;
}
.search-result-title {
    font-size: 13px;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.search-result-snippet {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 2px 0 0 0;
}
.search-result-time {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
    margin-left: 8px;
}
.search-empty {
    padding: 40px 16px;
    text-align: center;
}
.search-empty.hidden { display: none; }
.search-empty-text {
    font-size: 13px;
    color: #6b7280;
    margin: 8px 0 0 0;
}
.search-empty-text span { font-weight: 600; }
mark.search-highlight {
    background: #dbeafe;
    color: #1e40af;
    border-radius: 2px;
    padding: 0 2px;
}
@media (max-width: 768px) {
    .search-modal-panel {
        margin-top: 48px;
        margin-left: 12px;
        margin-right: 12px;
        max-width: calc(100% - 24px);
    }
}


/* === Badges === */
.detail-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    font-weight: 600;
}
.detail-badge-green { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.detail-badge-eu { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }
.detail-badge-active { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; }

/* === Document items - refined styling with file type icons === */
.detail-doc-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: #4b5563;
    transition: all 0.15s ease;
    cursor: default;
}
.detail-doc-item:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}
.detail-doc-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.detail-doc-icon svg {
    width: 16px;
    height: 16px;
}
.detail-doc-icon-pdf { background: #fef2f2; color: #dc2626; }
.detail-doc-icon-doc { background: #eff6ff; color: #2563eb; }
.detail-doc-icon-xls { background: #f0fdf4; color: #16a34a; }
.detail-doc-icon-zip { background: #fffbeb; color: #d97706; }
.detail-doc-icon-img { background: #eff6ff; color: #2563eb; }
.detail-doc-icon-default { background: #f3f4f6; color: #6b7280; }
.detail-doc-info {
    flex: 1;
    min-width: 0;
}
.detail-doc-name {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.detail-doc-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 1px;
}
.detail-doc-action {
    flex-shrink: 0;
    color: #9ca3af;
    display: flex;
    align-items: center;
}
.detail-doc-action svg {
    width: 14px;
    height: 14px;
}

/* === Quality score ring === */
.quality-score-display {
    display: flex;
    align-items: center;
    gap: 14px;
}
.quality-score-ring {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.quality-score-ring svg {
    transform: rotate(-90deg);
    width: 52px;
    height: 52px;
}
.quality-score-ring .ring-bg {
    fill: none;
    stroke: #f3f4f6;
    stroke-width: 4;
}
.quality-score-ring .ring-fg {
    fill: none;
    stroke-width: 4;
    stroke-linecap: round;
}
.quality-score-number {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #111827;
}
.quality-score-label {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.4;
}

/* === Evaluation criteria progress bars === */
.eval-criteria-item {
    margin-bottom: 10px;
}
.eval-criteria-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.eval-criteria-name {
    font-size: 13px;
    color: #4b5563;
}
.eval-criteria-weight {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}
.eval-criteria-bar {
    height: 4px;
    background: #f3f4f6;
    border-radius: 2px;
    overflow: hidden;
}
.eval-criteria-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #2563eb, #1d4ed8);
}

/* === Winner/result card === */
.detail-winner-card {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 8px;
}
.detail-winner-label {
    font-size: 10px;
    font-weight: 700;
    color: #16a34a;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.detail-winner-label svg {
    width: 12px;
    height: 12px;
}
.detail-winner-name {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
}
.detail-winner-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #4b5563;
}

.detail-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #2563eb;
    text-decoration: none;
    padding: 10px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    transition: all 0.15s;
    width: 100%;
    justify-content: center;
}
.detail-source-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.detail-source-link:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

/* === AI Requirements sections === */
.req-section {
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 8px;
}
.req-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.req-section-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.req-section-icon svg {
    width: 14px;
    height: 14px;
}
.req-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex: 1;
}
.req-section-count {
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    padding: 1px 7px;
}
.req-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #374151;
}
.req-item + .req-item {
    border-top: 1px solid rgba(0,0,0,0.04);
}
.req-item-bullet {
    flex-shrink: 0;
    margin-top: 2px;
    font-weight: 700;
    font-size: 11px;
}
.req-show-more-btn {
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 6px;
    padding: 5px 0;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    width: 100%;
    margin-top: 6px;
    transition: all 0.15s;
}
.req-show-more-btn:hover {
    background: rgba(0,0,0,0.05);
    color: #374151;
}

/* === Save to Pipeline Button (Detail Panel) === */
.detail-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.detail-save-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.detail-save-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}
.detail-save-btn.saved {
    border-color: #2563eb;
    color: #2563eb;
    background: #eff6ff;
}
.detail-save-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* === Toast Notification === */
/* #1557: the toast used to sit at `bottom: 24px`, i.e. directly on top of
   the chat composer (and under the mobile keyboard), covering the input the
   user was about to type in. It now drops in from the TOP centre, so it can
   never overlap the composer on any screen size. */
.toast-notification {
    position: fixed;
    top: 12px;
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-16px);
    max-width: min(92vw, 420px);
    text-align: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.toast-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.toast-success {
    background: #059669;
    color: #fff;
}
.toast-error {
    background: #dc2626;
    color: #fff;
}

/* === Login Modal === */
.login-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.login-modal {
    background: #fff;
    border-radius: 16px;
    padding: 32px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.login-modal-icon {
    margin-bottom: 16px;
}
.login-modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}
.login-modal-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 24px;
}
.login-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.login-modal-btn {
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
    display: inline-block;
}
.login-modal-btn-primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}
.login-modal-btn-primary:hover { opacity: 0.9; }
.login-modal-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.login-modal-btn-secondary:hover { background: #e5e7eb; }
.login-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: flex;
}
.login-modal-close:hover { color: #374151; background: #f3f4f6; }

/* === Logout Button === */
.sidebar-logout-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #9ca3af;
    text-decoration: none;
    flex-shrink: 0;
    transition: all 0.15s;
}
.sidebar-logout-btn:hover {
    color: #dc2626;
    background: #fef2f2;
}

/* === Message Counter === */
.msg-counter {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
    transition: color 0.2s;
}
.msg-counter.low {
    color: #d97706;
}
.msg-counter.exhausted {
    color: #dc2626;
    font-weight: 600;
}
.msg-counter.unlimited {
    display: none;
}

/* === Upgrade Modal (ChatGPT-style) === */
.upgrade-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.upgrade-modal {
    background: #fff;
    border-radius: 20px;
    padding: 36px 32px 28px;
    max-width: 440px;
    width: 92%;
    text-align: center;
    position: relative;
    box-shadow: 0 24px 48px rgba(0,0,0,0.18);
    animation: modalSlideUp 0.3s cubic-bezier(.4,0,.2,1);
}
@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.upgrade-modal-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.upgrade-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}
.upgrade-modal-text {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 24px;
}
.upgrade-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.upgrade-modal-btn-primary {
    display: block;
    width: 100%;
    padding: 12px 24px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.15s;
    cursor: pointer;
}
.upgrade-modal-btn-primary:hover { opacity: 0.9; }
.upgrade-modal-btn-secondary {
    display: block;
    width: 100%;
    padding: 10px 24px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
}
.upgrade-modal-btn-secondary:hover { background: #e5e7eb; }
/* Out-of-credits modal (ticket #1318): a solid gradient coin icon, three
   equally-sized full-width controls (upgrade / amount picker / buy), an "or"
   divider, and a subtle "learn more" pricing link. */
.ooc-modal { padding: 32px 32px 24px; }
.ooc-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 20px rgba(37,99,235,0.32);
}
/* Every action in the modal shares one height + full width so the buttons and
   dropdown line up perfectly. */
.upgrade-modal-actions .ooc-btn,
.ooc-select {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
}
.upgrade-modal-actions .ooc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
}
.ooc-select {
    padding: 0 14px;
    border: 1px solid #d1d5db;
    color: #374151;
    background: #fff;
    cursor: pointer;
    text-align: left;
}
.ooc-select:hover { border-color: #9ca3af; }
.ooc-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
/* "or" divider between the upgrade path and the buy-credits path. */
.ooc-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0;
}
.ooc-divider > span:not(.ooc-divider-label) {
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.ooc-divider-label {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.ooc-learn-more {
    display: inline-block;
    margin-top: 20px;
    font-size: 13px;
    color: #6b7280;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ooc-learn-more:hover { color: #2563eb; }
.upgrade-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
}
.upgrade-modal-close:hover { color: #374151; background: #f3f4f6; }
.upgrade-modal-feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #374151;
    text-align: left;
    padding: 4px 0;
}
.upgrade-modal-feature svg {
    width: 16px;
    height: 16px;
    color: #2563eb;
    flex-shrink: 0;
}
.upgrade-modal-features {
    margin-bottom: 20px;
    padding: 0 8px;
}

/* === Detail Tendly Link === */
.detail-tendly-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: white;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    margin-bottom: 8px;
    width: 100%;
}
.detail-tendly-link:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}
.detail-tendly-link svg {
    width: 14px;
    height: 14px;
}

/* === Match Detail Panel (mdp-*) === */
.mdp-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Title */
.mdp-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.4;
    margin: 0;
}
.mdp-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}
.mdp-ref {
    color: var(--text-muted);
}

/* Action buttons */
.mdp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 6px;
    margin-top: 12px;
}
.mdp-btn-primary {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #2563eb;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background 150ms;
}
.mdp-btn-primary:hover { background: #1d4ed8; }
.mdp-btn-primary.saved {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}
.mdp-btn-secondary {
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms;
}
.mdp-btn-secondary:hover { border-color: #9ca3af; }
.mdp-btn-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid var(--border);
    color: #6b7280;
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 150ms, color 150ms;
}
.mdp-btn-icon:hover { border-color: #9ca3af; color: #374151; }

/* Share popover */
.mdp-share-group { position: relative; }
.mdp-share-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 200px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px -6px rgba(15,23,42,.15);
    padding: 6px;
    z-index: 60;
}
.mdp-share-popover.hidden { display: none; }
.mdp-share-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    padding: 6px 10px 4px;
    margin: 0;
}
.mdp-share-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    cursor: pointer;
    transition: background 100ms;
}
.mdp-share-option:hover { background: #f1f5f9; }
.mdp-share-option i { width: 16px; text-align: center; flex-shrink: 0; }

/* AI Match Analysis card */
.mdp-analysis-card {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px;
}
.mdp-analysis-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.mdp-analysis-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}
.mdp-tier-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    padding: 2px 8px;
    border-radius: 999px;
}

/* Score display */
.mdp-score-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 12px;
}
.mdp-score-display {
    margin: 0;
    line-height: 1;
}
.mdp-score-number {
    font-size: 36px;
    font-weight: 700;
    color: #1d4ed8;
    font-variant-numeric: tabular-nums;
}
.mdp-score-pct {
    font-size: 20px;
    font-weight: 700;
    color: #1d4ed8;
}
.mdp-score-bar-wrap {
    flex: 1;
    min-width: 0;
}
.mdp-score-bar {
    height: 8px;
    background: #fff;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid #bfdbfe;
}
.mdp-score-bar-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
    transition: width 600ms ease;
}
.mdp-score-label {
    font-size: 11px;
    color: #1d4ed8;
    margin: 4px 0 0 0;
}

/* Analysis reason text */
.mdp-analysis-reason {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: #374151;
    line-height: 1.6;
}

/* Facts grid */
.mdp-facts-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mdp-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.mdp-fact {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px;
}
.mdp-fact-full {
    grid-column: 1 / -1;
}
.mdp-fact-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}
.mdp-fact-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin: 4px 0 0 0;
}
.mdp-fact-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin: 2px 0 0 0;
}
.mdp-fact-sub-inline {
    font-size: 11px;
    color: var(--text-muted);
}
.mdp-fact-ok { color: #16a34a; }
.mdp-fact-warning { color: #d97706; }
.mdp-fact-urgent { color: #dc2626; }

/* Section titles */
.mdp-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin: 0 0 8px 0;
}

/* Evaluation criteria */
.mdp-criteria-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mdp-criteria-item {}
.mdp-criteria-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.mdp-criteria-name {
    color: var(--text-2);
}
.mdp-criteria-pct {
    font-weight: 600;
    color: var(--text);
}
.mdp-criteria-bar {
    margin-top: 4px;
    height: 6px;
    background: var(--panel);
    border-radius: 999px;
    overflow: hidden;
}
.mdp-criteria-bar-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 999px;
    transition: width 600ms ease;
}

/* Project timeline */
.mdp-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.mdp-tl-item {
    display: flex;
    gap: 12px;
    position: relative;
}
.mdp-tl-last {
    padding-bottom: 0;
}
.mdp-tl-rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 4px;
    align-self: stretch;
    overflow: visible;
}
.mdp-tl-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px currentColor;
}
.mdp-tl-dot-primary { color: #2563eb; background: #2563eb; }
.mdp-tl-dot-secondary { color: #60a5fa; background: #60a5fa; }
.mdp-tl-dot-muted { color: #d1d5db; background: #d1d5db; }
.mdp-tl-line {
    width: 2px;
    flex: 1;
    background: #e5e7eb;
    margin-top: 4px;
    margin-bottom: -12px;
}
.mdp-tl-last .mdp-tl-line { display: none; }
.mdp-tl-content {
    flex: 1;
    padding-bottom: 12px;
}
.mdp-tl-last .mdp-tl-content {
    padding-bottom: 0;
}
.mdp-tl-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    margin: 0;
}
.mdp-tl-date {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
}

/* Description */
.mdp-description {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
    color: var(--text-2);
    line-height: 1.6;
}


/* === Message area === */
.messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 24px;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
    background: #ffffff;
    /* Ticket #1305: anchor messages to the bottom of the scroll area so a
       short response (e.g. one tender + chips) sits right above the
       composer instead of leaving a big white gap between the answer and
       the input. When content overflows, the auto-margin collapses and
       normal top-anchored scrolling resumes. The pseudo-element variant
       is used (not :first-child) so that dynamically-added/removed
       messages don't shift the anchor while streaming. */
    display: flex;
    flex-direction: column;
}
.messages-container::before {
    content: '';
    margin-top: auto;
}

.messages-container::-webkit-scrollbar { width: 6px; }
.messages-container::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }

.message {
    padding: 12px 0;
}
.message + .message {
    border-top: none;
}
.ai-message,
.user-message {
    background: #ffffff;
    border: none;
}
.message:last-child { border-bottom: none; }
.message-inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 12px;
}

/* User messages right-aligned, AI left-aligned */
.user-message .message-inner {
    flex-direction: row-reverse;
}
.user-message .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
}
.user-avatar {
    background: #e5e7eb;
    color: #4b5563;
    display: none; /* User bubbles in design have no avatar */
}
.ai-avatar {
    background: #2563eb;
    color: #fff;
}

.message-content {
    flex: 1;
    min-width: 0;
    max-width: 85%;
}
.message-sender {
    display: none; /* Design has no sender label */
}

/* AI bubble: white card, rounded-2xl with rounded-tl-md corner */
.ai-message .message-text {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    border-radius: 16px 16px 16px 6px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* User bubble: blue background, rounded-2xl with rounded-tr-md corner, right aligned */
.user-message .message-text {
    background: #eff6ff;
    color: #111827;
    border-radius: 16px 16px 6px 16px;
    padding: 12px 16px;
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 80%;
}

.message-text {
    font-size: 14px;
    line-height: 1.6;
    color: #1f2937;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.message-text p, .message-text li, .message-text span { color: inherit; }
.message-text p { margin-bottom: 10px; }
.message-text p:last-child { margin-bottom: 0; }
.message-text strong { color: #111827; font-weight: 600; }
.message-text em { color: #2563eb; font-style: italic; }
.message-text ul, .message-text ol { margin: 8px 0 8px 20px; }
.message-text li { margin-bottom: 4px; }
.message-text code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    color: #1f2937;
}
.message-text pre {
    background: #f8f9fa;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    overflow-x: auto;
    margin: 10px 0;
}
.message-text pre code { background: none; padding: 0; color: #374151; }
.message-text a { color: #2563eb; text-decoration: none; }
.message-text a:hover { text-decoration: underline; }

/* Markdown tables — shared by the server renderer (python-markdown
   "tables" ext) and the client renderMarkdownToFragment() table branch. */
.message-text table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
}
.message-text th, .message-text td {
    border: 1px solid #e5e7eb;
    padding: 6px 10px;
    text-align: left;
    vertical-align: top;
}
.message-text th { background: #f9fafb; font-weight: 600; color: #111827; }
.message-text tbody tr:nth-child(even) td { background: #fafafa; }

.user-message .message-text { color: #111827; }

/* === Tender results list === */
.tender-results {
    margin-top: 16px;
}
.tender-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.tender-results-title {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}
.tender-results-count {
    font-size: 12px;
    color: #9ca3af;
}
.tender-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tender-show-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 10px 14px;
    background: #f9fafb;
    border: none;
    border-top: 1px solid #f3f4f6;
    color: #2563eb;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.tender-show-more-btn:hover {
    background: #eff6ff;
}
.tender-show-more-btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
}
.tender-show-more-btn.expanded svg {
    transform: rotate(180deg);
}

/* === Message action buttons (copy, link) === */
.message-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 10px;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.message:hover .message-actions,
.message-actions.visible {
    opacity: 1;
}
.msg-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    transition: all 0.15s ease;
    font-family: inherit;
}
.msg-action-btn:hover {
    background: #f3f4f6;
    color: #374151;
}
.msg-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}
.msg-action-btn.copied {
    color: #16a34a;
}
.msg-action-btn.copied:hover {
    background: #f0fdf4;
    color: #16a34a;
}
.action-btn-label {
    pointer-events: none;
}

/* === Tender action chips (Ask AI flow) === */
.tender-action-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.tender-action-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    font-family: inherit;
}
.tender-action-chip:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
}
.tender-action-chip i {
    font-size: 12px;
}
/* Chips-only re-pin of the quick actions under an answer: keep the message
   scaffold (avatar box preserves the left gutter so chips align with the AI
   bubbles) but hide the empty intro bubble and avatar circle. */
.message.tender-chips-only { padding-top: 0; }
.message.tender-chips-only .avatar { visibility: hidden; }
.message.tender-chips-only .message-text { display: none; }
.message.tender-chips-only .tender-action-chips { margin-top: 0; }

/* #1563 — the pinned tender's own card, sitting directly above the
   "You're asking about Tender:X" bubble. Same 896px column as
   .message-inner, indented past the AI avatar gutter (32px avatar + 12px
   gap) so it lines up with the bubble underneath it. */
.tender-ref-card-wrap {
    width: 100%;
    max-width: 896px;
    margin: 12px auto 0;
    padding: 0 24px 0 68px;
}
@media (max-width: 768px) {
    .tender-ref-card-wrap { padding: 0 16px; }
}

/* === Compact tender card (matches design) === */
.compact-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.compact-card:hover {
    border-color: #d1d5db;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.compact-card .cc-body {
    padding: 0.75rem 0.875rem 0.5rem;
}
.compact-card .cc-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.compact-card .cc-badges {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    min-width: 0;
}
.compact-card .cc-save {
    color: #9ca3af;
    padding: 0.25rem 0.375rem;
    border-radius: 0.3rem;
    cursor: pointer;
    background: none;
    border: none;
    font-size: 14px;
}
.compact-card .cc-save:hover {
    color: #2563eb;
    background: #eff6ff;
}
.compact-card .cc-title {
    margin-top: 0.4rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    cursor: pointer;
    transition: color 120ms ease;
}
.compact-card .cc-title:hover {
    color: #2563eb;
}
.compact-card .cc-buyer {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
}
.compact-card .cc-buyer .cc-flag {
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
}
.compact-card .cc-buyer .cc-buyer-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.compact-card .cc-buyer .cc-ref {
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}
.compact-card .cc-buyer .cc-dot {
    color: #d1d5db;
}
.compact-card .cc-key {
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.compact-card .cc-key .cc-kv {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111827;
}
.compact-card .cc-key .cc-kv i {
    color: #2563eb;
    font-size: 0.75rem;
}
.compact-card .cc-key .cc-sep {
    color: #d1d5db;
    font-size: 0.75rem;
}
.compact-card .cc-cpv {
    margin-top: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: #4b5563;
    max-width: 100%;
}
.compact-card .cc-cpv i {
    color: #2563eb;
    font-size: 0.72rem;
}
.compact-card .cc-cpv .cc-cpv-code {
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-weight: 600;
    color: #111827;
    letter-spacing: 0.01em;
}
.compact-card .cc-cpv .cc-cpv-name {
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
}
.compact-card .cc-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: #f9fafb;
    border-top: 1px solid #f3f4f6;
}
/* Button labels must never break mid-word ("Ask / AI" on narrow phones) —
   a whole button wraps to the next row instead. */
.cc-pipeline-btn, .cc-overview-btn, .cc-askai-btn { white-space: nowrap; }
.cc-pipeline-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.cc-pipeline-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}
.cc-pipeline-btn i {
    font-size: 10px;
}
.cc-pipeline-btn.in-pipeline {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}
.cc-pipeline-btn.in-pipeline:hover {
    background: #dbeafe;
}
.cc-overview-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}
.cc-overview-btn:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}
.cc-overview-btn i {
    font-size: 10px;
}
.cc-askai-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #2563eb;
    border: none;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 120ms ease;
}
.cc-askai-btn:hover {
    background: #1d4ed8;
}
.cc-askai-btn i {
    font-size: 10px;
}
/* Empty-state alert CTA (ticket #1230, restyled #1292): markdown /alerts
   links are rendered as a subtle inline chip that matches the chat's
   suggestion-chip aesthetic — no purple gradient. */
.empty-state-alert-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: #f9fafb;
    color: #2563eb !important;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.3125rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 9999px;
    text-decoration: none !important;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
    margin-top: 0.25rem;
    vertical-align: baseline;
}
.empty-state-alert-cta:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.empty-state-alert-cta::before {
    content: "0f3"; /* fa-bell */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: #9ca3af;
}
.empty-state-alert-cta:hover::before {
    color: #2563eb;
}
/* Source portal chip on tender cards (ticket #1236). Same row as the
   flag + buyer name; gray + small so it doesn't compete with primary
   tender info but is always visible for verifiability. */
.cc-source-chip {
    color: #6b7280;
    font-size: 0.7rem;
    font-weight: 500;
    background: #f3f4f6;
    padding: 0.0625rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    margin-left: 0.125rem;
}
.cc-badge-quality {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.cc-badge-quality-high {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.cc-badge-quality-mid {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
}
.cc-badge-quality-low {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.cc-badge-days {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
}
.cc-badge-days-normal {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.cc-badge-days-urgent {
    background: #fef2f2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}
.cc-badge-expired {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #e5e7eb;
}

/* === Tender card (full size) === */
.tender-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    margin-bottom: 8px;
}

/* === Match group toggle === */
.mg-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #ffffff;
    border: 1px dashed #d1d5db;
    color: #2563eb;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    margin-top: 4px;
}
.mg-toggle:hover {
    background: #f0f9ff;
    border-color: #93c5fd;
}

/* === Match badges === */
.match-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    flex-shrink: 0;
}
.match-badge-green {
    background: #f0fdf4;
    color: #15803d;
}
.match-badge-blue {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}
.days-left-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid;
    flex-shrink: 0;
}
.days-left-red { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.days-left-amber { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.days-left-green { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }

/* === Suggestion chips (Try also) === */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}
.suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: all 0.18s ease;
    font-weight: 500;
}
.suggestion-chip:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(37,99,235,0.1);
}
.suggestion-chip svg {
    width: 12px;
    height: 12px;
    color: #9ca3af;
}
/* Debounced: chip group is disabled while a chip click settles */
.suggestion-chip:disabled,
.suggestion-chip.chip-busy {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
    transform: none;
    box-shadow: none;
}

/* === Welcome screen === */
.welcome-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,0.04) 0%, transparent 60%);
}
.welcome-content {
    max-width: 640px;
    width: 100%;
    text-align: center;
}
.welcome-icon {
    width: 56px;
    height: 56px;
    background: #2563eb;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 16px rgba(37,99,235,0.2);
}
.welcome-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
    stroke: #fff;
    fill: none;
}
.welcome-title {
    font-size: 30px;
    font-weight: 800;
    color: #111827;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    line-height: 1.2;
}
.welcome-title-gradient {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.welcome-subtitle {
    font-size: 15px;
    color: #6b7280;
    margin-bottom: 36px;
    line-height: 1.6;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    text-align: left;
}
.suggestion-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    position: relative;
    overflow: hidden;
}
.suggestion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.suggestion-card:hover {
    border-color: #93c5fd;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(37,99,235,0.1), 0 2px 6px rgba(0,0,0,0.04);
}
.suggestion-card:hover::before {
    opacity: 1;
}
.suggestion-card:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37,99,235,0.08);
}
.suggestion-icon {
    width: 36px; height: 36px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.suggestion-icon svg {
    width: 18px; height: 18px;
}
.suggestion-icon-blue { background: #eff6ff; color: #2563eb; }
.suggestion-icon-purple { background: #eff6ff; color: #2563eb; }
.suggestion-icon-green { background: #f0fdf4; color: #16a34a; }
.suggestion-icon-amber { background: #fffbeb; color: #d97706; }
.suggestion-text-wrap { flex: 1; min-width: 0; }
.suggestion-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}
.suggestion-desc {
    font-size: 12px;
    color: #9ca3af;
    line-height: 1.4;
}

/* === Chat input area === */
.chat-form { width: 100%; }
.chat-textarea:focus { box-shadow: none !important; outline: none !important; }
/* Disabled look lives with the composer (COMPOSER_STYLES, loaded after this
   file): grey pill, no hover. Only the transform reset belongs here. */
.send-btn:disabled { cursor: not-allowed; transform: none; }

.input-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 10px;
}
.input-disclaimer {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
}
.input-shortcut {
    font-size: 11px;
    color: #b0b5bf;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
}
.input-shortcut kbd {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    font-family: inherit;
    color: #9ca3af;
    line-height: 1.6;
}

/* === Thinking indicator === */
.thinking-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    min-height: 24px;
}
.thinking-dots {
    display: flex;
    align-items: center;
    gap: 4px;
}
.thinking-dots span {
    width: 8px;
    height: 8px;
    background: #9ca3af;
    border-radius: 50%;
    animation: thinkingBounce 1.4s ease-in-out infinite;
}
.thinking-dots span:nth-child(2) { animation-delay: 0.16s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.32s; }
@keyframes thinkingBounce {
    0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
    40% { opacity: 1; transform: translateY(-4px); }
}

/* Rotating loading message that sits next to the dots. The fade class is
   toggled briefly while the text swaps so the change feels smooth. */
.thinking-label {
    color: #6b7280;
    font-size: 13px;
    line-height: 20px;
    opacity: 1;
    transition: opacity 220ms ease;
}
.thinking-label.thinking-label-fade {
    opacity: 0;
}

/* Disabled composer while AI is responding (Claude/ChatGPT-style lock) */
.chat-textarea:disabled {
    cursor: not-allowed;
    color: #9ca3af;
    background: transparent;
}

/* Interrupted turn marker (#1557): a stored user message with no assistant
   reply (stopped mid-stream) renders this instead of leaving a bare orphan
   bubble in the thread. */
.stopped-turn-message { padding: 2px 0 10px; }
.stopped-turn {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 10px;
    border: 1px dashed #e5e7eb;
    border-radius: 8px;
    background: #fafafa;
}
/* Same marker appended live under a partially-streamed answer the user
   stopped, so the text they already received is preserved instead of being
   wiped by an error bubble. */
.stopped-turn-inline {
    display: inline-flex;   /* hug the label instead of spanning the bubble */
    max-width: 100%;
    margin-top: 10px;
}
.stopped-turn-text {
    font-size: 12px;
    color: #6b7280;
}
.stopped-turn-retry {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.stopped-turn-retry:hover { color: #1d4ed8; }

/* Streaming cursor */
.streaming-cursor::after {
    content: '|';
    animation: blink 0.8s step-end infinite;
    color: #2563eb;
    font-weight: 300;
}
@keyframes blink { 50% { opacity: 0; } }


/* === Badges === */
.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
  line-height: 1;
}
.badge-xs { font-size: 10px; padding: 2px 6px; }
.badge-sm { font-size: 11px; padding: 3px 8px; }
.badge-md { font-size: 12px; padding: 4px 10px; }

.badge-default { background: #f3f4f6; color: #374151; }
.badge-success { background: var(--green-bg); color: var(--green); }
.badge-warning { background: var(--amber-bg); color: var(--amber); }
.badge-danger { background: var(--red-bg); color: var(--red); }
.badge-info { background: var(--brand-weak); color: var(--brand-strong); }
.badge-brand { background: var(--brand); color: #fff; }
.badge-match-score {
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  padding: 0;
}

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-family);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.btn-sm { font-size: 12px; padding: 6px 12px; }
.btn-md { font-size: 13px; padding: 8px 16px; }
.btn-lg { font-size: 14px; padding: 10px 20px; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

.btn-secondary {
  background: var(--surface);
  color: var(--text-2);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--surface-muted); border-color: var(--border-strong); }

.btn-ghost {
  background: transparent;
  color: var(--text-3);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--surface-muted); color: var(--text-2); }

.btn-danger {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-danger:hover { background: #991b1b; border-color: #991b1b; }

.btn-icon-only {
  padding: 0;
  aspect-ratio: 1;
}
.btn-icon-only.btn-sm { width: 28px; }
.btn-icon-only.btn-md { width: 34px; }
.btn-icon-only.btn-lg { width: 40px; }

.btn-icon { display: inline-flex; align-items: center; }
.btn-icon svg { width: 16px; height: 16px; }

.btn-loading { opacity: 0.6; pointer-events: none; }

/* Checkout hand-off feedback (#1557) — shared by every entry point that calls
   tendlyCheckoutNav() (profile billing tab, out-of-credits modal, workspace
   paywall). Stripe session creation takes seconds; the pressed control says so
   immediately instead of looking dead. */
.tly-ck-busy {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: progress !important;
  pointer-events: none;
  opacity: 0.92;
}
.tly-ck-dim { opacity: 0.5; pointer-events: none; }
.tly-ck-spin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: tlyckspin 0.7s linear infinite;
  flex-shrink: 0;
}
/* Secondary/outline buttons have a light background — a white spinner would
   be invisible, so tint it with the brand blue instead. */
.btn-secondary .tly-ck-spin,
.btn-ghost .tly-ck-spin,
.btn-danger-outline .tly-ck-spin,
.upgrade-modal-btn-secondary .tly-ck-spin {
  border-color: rgba(37, 99, 235, 0.25);
  border-top-color: var(--brand, #2563eb);
}
@keyframes tlyckspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .tly-ck-spin { animation-duration: 2.4s; }
}
/* #1566: Pico draws its OWN loading icon on anything carrying aria-busy=true
   ([aria-busy=true]:not(input,select,textarea,html,form)::before), so a
   checkout button showed TWO spinners side by side — Pico's plus ours. Keep
   aria-busy (it is the correct announcement for a busy control, and Pico's
   pointer-events:none with it) and suppress only Pico's glyph. The attribute
   selector is deliberate: it out-specifies Pico's rule regardless of load
   order. Covers the shared helper (.tly-ck-busy) and the /plans CTAs, which
   have the same conflict with their own .plan-cta-spin. */
.tly-ck-busy[aria-busy="true"]::before,
.plan-cta.loading[aria-busy="true"]::before { content: none; }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* === Cards === */
.card {
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
}
.card-pad-sm { padding: 12px; }
.card-pad-md { padding: 16px; }
.card-pad-lg { padding: 24px; }
.card-shadow { box-shadow: var(--shadow-card); }
.card-hover { transition: box-shadow var(--transition-fast); }
.card-hover:hover { box-shadow: var(--shadow-card-hover); }

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.card-header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
.card-header-subtitle {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 2px;
}
.card-header-action { flex-shrink: 0; }

.card-body { }

/* === Empty State === */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 12px;
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--text-muted);
}
.empty-state-icon svg { width: 100%; height: 100%; }
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.empty-state-subtitle {
  font-size: 13px;
  color: var(--text-3);
  max-width: 320px;
}

/* === Modal === */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  padding: 24px;
}
.modal-card {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
}
.modal-sm { max-width: 400px; }
.modal-md { max-width: 560px; }
.modal-lg { max-width: 720px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.modal-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-3);
  padding: 4px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.modal-close-btn:hover { color: var(--text); background: var(--surface-muted); }

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* === Avatar === */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-sm { width: 28px; height: 28px; }
.avatar-md { width: 36px; height: 36px; }
.avatar-lg { width: 48px; height: 48px; }

.avatar-img { width: 100%; height: 100%; object-fit: cover; }
.avatar-initials {
  color: #fff;
  font-family: var(--font-family);
  font-weight: 600;
  line-height: 1;
  user-select: none;
}
.avatar-sm .avatar-initials { font-size: 11px; }
.avatar-md .avatar-initials { font-size: 13px; }
.avatar-lg .avatar-initials { font-size: 16px; }

/* === Country Flags === */
.country-flag { display: inline-flex; align-items: center; line-height: 1; }
.country-flag-xs { font-size: 12px; }
.country-flag-sm { font-size: 16px; }
.country-flag-md { font-size: 20px; }
.country-flag-lg { font-size: 24px; }

/* === Pagination === */
.load-more-wrapper {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
.load-more-btn { min-width: 140px; }

.pagination-info {
  font-family: var(--font-family);
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  padding: 8px 0;
}

/* === Shared Responsive === */
@media (max-width: 640px) {
  .modal-backdrop { padding: 12px; }
  .modal-card { max-height: calc(100vh - 24px); }
  .modal-header { padding: 12px 16px; }
  .modal-body { padding: 16px; }
  .modal-footer { padding: 10px 16px; }

  .empty-state { padding: 32px 16px; }
  .empty-state-icon { width: 40px; height: 40px; }
}


/* ========================================
   MATCHING PAGE — Scope Card
   ======================================== */
.scope-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}
.scope-card .scope-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #eff6ff;
  color: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.scope-flags {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 1rem; line-height: 1;
}
/* #1528: the chip strip carries role="button" (click-to-change-countries),
   which Pico styles as a real button (solid #0172ad background + padding) —
   reset it back to a plain inline flag strip. */
.scope-flags[role="button"] {
  background: transparent; border: none; box-shadow: none;
  padding: 0; border-radius: 6px; color: inherit;
}
.scope-flags .flag-chip {
  display: inline-flex; width: 22px; height: 22px; border-radius: 9999px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  align-items: center; justify-content: center;
  font-size: 13px; margin-right: -6px; position: relative; z-index: 1;
}
.scope-flags .flag-chip:last-child { margin-right: 0; }
.scope-flags .flag-more {
  width: 22px; height: 22px; border-radius: 9999px;
  background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0;
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: 4px;
}
.scope-freshness {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; color: #64748b;
}
.scope-freshness .freshness-dot {
  width: 7px; height: 7px; border-radius: 9999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}
.scope-card.is-running {
  background: linear-gradient(90deg, #eff6ff 0%, #ffffff 100%);
  border-color: #bfdbfe;
}
.scope-card.is-running #scope-title { color: #1d4ed8; }
.scope-running-spinner {
  display: inline-flex; width: 16px; height: 16px; border-radius: 9999px;
  background: rgba(37,99,235,.12); color: #2563eb;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.scope-running-text {
  font-size: 11px; color: #1d4ed8; font-weight: 500;
}
.scope-cta-btn {
  height: 36px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #2563eb; color: #fff;
  font-size: 0.875rem; font-weight: 500;
  border-radius: 8px; border: none; cursor: pointer; flex-shrink: 0;
  transition: background 120ms ease;
}
.scope-cta-btn:hover { background: #1d4ed8; }
@media (max-width: 639px) {
  .scope-card {
    flex-direction: column; align-items: stretch; gap: 0.75rem;
    padding: 0.875rem 0.875rem 1rem;
  }
  .scope-card .scope-cta-btn { width: 100%; justify-content: center; }
  .scope-card .scope-icon { display: none; }
}

/* ========================================
   MATCHING PAGE — Tier Tabs
   ======================================== */
.tier-tabs-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.tier-tabs-bar {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; padding-bottom: 4px;
  margin: 0 -4px; padding-left: 4px; padding-right: 4px;
  min-width: 0;
  scrollbar-width: thin;
}
.tier-tabs-bar::-webkit-scrollbar { height: 6px; }
.tier-tabs-bar::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.tier-tab {
  display: inline-flex; align-items: center; gap: 0.5rem;
  height: 36px;
  padding: 0 0.875rem;
  border: 1px solid #e5e7eb; background: #ffffff;
  border-radius: 9999px;
  font-size: 0.8125rem; font-weight: 500;
  color: #475569;
  cursor: pointer; white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.tier-tab:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.tier-tab.active { background: #0f172a; border-color: #0f172a; color: #fff; }
.tier-tab.active .tier-count { background: rgba(255,255,255,0.18); color: #fff; }
.tier-tab .tier-dot {
  width: 8px; height: 8px; border-radius: 9999px; flex-shrink: 0;
}
.tier-dot-perfect { background: #10b981; }
.tier-dot-strong { background: #3b82f6; }
.tier-dot-possible { background: #f59e0b; }
.tier-dot-weak { background: #d1d5db; }
.tier-tab .tier-count {
  font-size: 11px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: #f1f5f9; color: #475569;
  padding: 2px 7px; border-radius: 9999px;
}
.tier-tab.tier-tab-neutral { color: #64748b; }
.tier-tab.tier-tab-neutral:hover { color: #0f172a; background: #f1f5f9; }
.tier-tab.tier-tab-neutral.active { background: #475569; border-color: #475569; color: #fff; }
.tier-tab.tier-tab-neutral.active .tier-count { background: rgba(255,255,255,.18); color: #fff; }
.tier-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 639px) {
  .tier-tabs-bar { gap: 4px; width: 100%; overflow-x: visible; padding-bottom: 0; margin: 0; padding-left: 0; padding-right: 0; }
  .tier-tabs-bar .tier-tab {
    flex: 1 1 0; min-width: 0;
    height: 32px; padding: 0 0.25rem;
    font-size: 0.75rem; gap: 3px;
    justify-content: center;
  }
  .tier-tab {
    height: 28px; padding: 0 0.3125rem;
    font-size: 0.6875rem; gap: 3px;
  }
  .tier-tab .tier-dot { display: none; }
  .tier-tab .tier-count { display: none; }
}

/* ========================================
   MATCHING PAGE — Profile Banner
   ======================================== */
.match-profile-banner {
  display: flex; align-items: center; gap: 0.5rem;
  background: #eff6ff; border: 1px solid #dbeafe;
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
}
.match-profile-banner-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: #ffffff; border: 1px solid #dbeafe;
  display: inline-flex; align-items: center; justify-content: center;
  color: #2563eb; font-size: 12px; flex-shrink: 0;
}
.match-profile-banner-text {
  font-size: 0.75rem; font-weight: 500; color: #0f172a;
  margin: 0;
}
.match-profile-banner-hint {
  color: #64748b; font-weight: 400;
}
button .match-profile-banner-hint {
  color: inherit;
}
@media (min-width: 640px) {
  .match-profile-banner { gap: 0.75rem; padding: 0.75rem 1rem; }
  .match-profile-banner-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 14px; }
  .match-profile-banner-text { font-size: 0.875rem; }
}
@media (max-width: 639px) {
  .match-profile-banner-hint { display: none; }
  /* Touch-friendly CTA on phones: let the banner wrap so the "Complete
     profile" button drops onto its own full-width row with a 44px tap
     target (was a cramped 32px button wedged next to the dismiss X, which
     caused mis-taps on mobile/tablet — ticket #1391). */
  .match-profile-banner { flex-wrap: wrap; row-gap: 0.5rem; }
  .match-profile-banner-cta {
    height: 44px !important;
    order: 3;
    flex: 1 1 100% !important;
  }
  /* The CTA is now full-width, so keep the "profile" word on the button
     even though the inline text hint stays hidden. */
  .match-profile-banner-cta .match-profile-banner-hint { display: inline !important; }
  .match-profile-banner-dismiss {
    order: 2;
    width: 40px; height: 40px;
    margin: -4px -4px -4px 0;
  }
}
/* Tablets/touch devices keep the desktop banner layout but still need a
   reachable tap target — bump the CTA and dismiss to 44px on any coarse
   pointer (covers iPads in the wider desktop layout). */
@media (pointer: coarse) {
  .match-profile-banner-cta { min-height: 44px !important; height: auto !important; }
  .match-profile-banner-dismiss {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ========================================
   MATCHING PAGE — Filter Bar
   ======================================== */
.match-filter-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.match-search-wrap {
  position: relative; flex: 1; min-width: 200px;
}
.match-search-input {
  width: 100%; height: 36px !important;
  padding: 0 0.75rem 0 2.25rem !important;
  border: 1px solid #e5e7eb; border-radius: 8px;
  font-size: 0.875rem; color: #0f172a;
  background: #ffffff;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  -webkit-appearance: none;
  appearance: none;
  margin: 0 !important;
}
.match-search-input::-webkit-search-decoration,
.match-search-input::-webkit-search-cancel-button,
.match-search-input::-webkit-search-results-button,
.match-search-input::-webkit-search-results-decoration {
  -webkit-appearance: none; display: none;
}
.match-search-input:focus {
  border-color: #3b82f6;
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.10);
}
.match-search-input::placeholder { color: #9ca3af; }
.match-search-wrap .search-icon {
  position: absolute; left: 0.75rem; top: 50%;
  transform: translateY(-50%);
  color: #9ca3af; font-size: 12px;
  pointer-events: none;
}

/* Filter chip buttons */
.filter-chip {
  display: inline-flex; align-items: center; gap: 0.375rem;
  height: 34px; padding: 0 0.75rem;
  border: 1px solid #e5e7eb; background: #ffffff;
  border-radius: 8px;
  font-size: 0.8125rem; font-weight: 500; color: #334155;
  cursor: pointer; white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease;
  margin: 0 !important;
}
.filter-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.filter-chip.active {
  border-color: #2563eb; background: #eff6ff; color: #1d4ed8;
}
.filter-chip .chevron { font-size: 10px; color: #94a3b8; }
.filter-chip.has-active {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.filter-chip.has-active .filter-count-badge {
  background: #2563eb; color: #fff;
}
.filter-count-badge {
  font-size: 10px; font-weight: 600;
  background: #dbeafe; color: #1d4ed8;
  padding: 2px 6px; border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.match-count-summary {
  grid-column: 1 / -1;
  font-size: 0.75rem; color: #64748b;
  text-align: center;
  margin-top: -0.5rem;
  padding: 0 0 0.5rem;
}
.match-count-summary strong { color: #0f172a; font-weight: 600; }

@media (max-width: 639px) {
  .match-search-wrap { min-width: 100%; flex-basis: 100%; }
}

/* Sort dropdown */
.sort-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px;
  background: #ffffff; border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px -6px rgba(15,23,42,.15);
  padding: 4px; z-index: 40;
}
.sort-dropdown.hidden { display: none; }
.sort-option {
  display: flex; align-items: center; gap: 0.5rem;
  width: 100%; padding: 0.5rem 0.625rem;
  border-radius: 6px; font-size: 0.8125rem;
  color: #334155; text-align: left;
  cursor: pointer; border: none; background: none;
  transition: background 100ms ease;
}
.sort-option:hover { background: #f1f5f9; color: #0f172a; }
.sort-option i { font-size: 11px; color: #94a3b8; width: 14px; }
.sort-option.active { background: #eff6ff; color: #1d4ed8; }
.sort-option.active i { color: #2563eb; }
.sort-option.active::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: auto; color: #2563eb; font-size: 10px;
}
@media (max-width: 639px) {
  .sort-dropdown { left: 0; right: auto; min-width: 200px; }
}

/* Active filter chips row */
.active-filters-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-size: 12px;
}
.active-filters-row.hidden { display: none; }
.active-filters-row .af-label {
  color: #475569; font-weight: 500; padding: 2px 4px;
}
.active-filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 12px; font-weight: 500;
}
.active-filter-chip .af-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 9999px;
  color: #1d4ed8; font-size: 9px;
  background: none; border: none; cursor: pointer;
  transition: background 100ms ease;
  margin-left: 2px;
}
.active-filter-chip .af-remove:hover { background: #dbeafe; }
.active-filters-row .af-clear {
  font-size: 12px; font-weight: 500; color: #64748b;
  padding: 2px 6px; border-radius: 4px;
  background: none; border: none; cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.active-filters-row .af-clear:hover { background: #f1f5f9; color: #0f172a; }

/* ========================================
   MATCHING PAGE — Match Cards Grid
   ======================================== */
.match-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0.75rem;
  padding-bottom: 2rem;
}
@container center (min-width: 560px) { .match-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container center (min-width: 840px) { .match-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container center (min-width: 1120px) { .match-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ========================================
   MATCHING PAGE — Match Cards
   ======================================== */
.match-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
  cursor: pointer;
  position: relative;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0;
  max-width: 100%;
  container-type: inline-size;
  container-name: card;
}
.match-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px -4px rgba(15,23,42,.08);
}
.match-card.selected {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.match-card .no-card-click { cursor: default; }

/* Card body wrap (for swipe support) */
.match-card .card-body-wrap {
  transition: transform 120ms ease;
  background: #ffffff;
  border-radius: inherit;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100%;
  text-align: left;
}
.match-card.swiping .card-body-wrap { transition: none; }
.match-card .card-body-wrap > .bid-section { margin-top: auto; }
.match-card .card-body-wrap:not(:has(> .bid-section)) > .match-card-footer {
  margin-top: auto;
}

/* Swipe hints (mobile) */
.match-card .swipe-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 120ms ease;
}
.match-card .swipe-hint.yes {
  justify-content: flex-start;
  background: linear-gradient(90deg, #22c55e, #86efac 90%, transparent);
  color: #065f46;
}
.match-card .swipe-hint.no {
  justify-content: flex-end;
  background: linear-gradient(90deg, transparent, #fecaca 10%, #ef4444);
  color: #7f1d1d;
}

/* Dismiss-fade animation */
@keyframes dismissFade {
  to { opacity: 0; transform: translateY(-4px) scale(0.98); }
}
.match-card.dismissing {
  animation: dismissFade 220ms ease forwards;
  pointer-events: none;
}

/* Pulse for skeleton/progress feedback */
@keyframes pulse-bar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.pulse { animation: pulse-bar 1.8s ease-in-out infinite; }

/* Top row: tier badge + action buttons */
.match-card-top {
  padding: 0.75rem 1rem 0.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem;
}
/* Badge wrapper — markup uses Tailwind-style "flex items-center gap-1.5
   flex-wrap min-w-0" classes; define them so the tier badge can wrap and
   the action cluster on the right doesn't get clipped by overflow:hidden. */
.match-card-top > div:first-child {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0; flex: 1 1 auto;
}
.match-card-top-actions {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}

/* Tier badge styles */
.tier-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 9999px;
  border: 1px solid;
  white-space: nowrap;
}
.tier-badge-perfect { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.tier-badge-strong { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.tier-badge-possible, .tier-badge-moderate { background: #fffbeb; color: #a16207; border-color: #fde68a; }
.tier-badge-weak { background: #f9fafb; color: #4b5563; border-color: #e5e7eb; }

/* Score dial */
.score-dial {
  --p: 0; --c: #2563eb;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #e5e7eb 0);
  display: grid; place-items: center;
  position: relative; flex-shrink: 0;
}
.score-dial::before {
  content: ""; position: absolute; inset: 4px;
  background: #ffffff; border-radius: 50%;
}
.score-dial > span {
  position: relative; z-index: 1;
  font-size: 0.75rem; font-weight: 700; color: #111827;
}

/* Title + dial row */
.match-card-title-row {
  padding: 0 1rem 0.75rem;
  display: flex; align-items: flex-start; gap: 0.75rem;
}
/* The flex child holding the title + buyer needs min-width:0 so the title
   can shrink and trigger the line-clamp wrap (classes "flex-1 min-w-0" in
   the markup are not Tailwind here — define the behaviour explicitly). */
.match-card-title-row > .flex-1 {
  flex: 1 1 0%;
  min-width: 0;
}
.match-card-title {
  font-size: 0.875rem; font-weight: 600;
  color: #0f172a; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  transition: color 120ms ease;
  margin: 0;
  cursor: pointer;
  text-align: left;
}
.match-card:hover .match-card-title { color: #2563eb; }
.match-card-buyer {
  font-size: 0.75rem; color: #64748b; margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  text-align: left;
}
.match-card-buyer .sep {
  color: #d1d5db; margin: 0 2px;
}

/* Key facts row */
.match-card-facts {
  padding: 0 1.25rem 0.5rem;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
}
/* Markup uses Tailwind-style "flex-shrink-0" on each fact column — define it
   so the columns hold their natural width and the row distributes evenly. */
.match-card-facts > div { flex-shrink: 0; min-width: 0; }
.match-card-fact-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 500; color: #9ca3af;
  margin: 0;
}
.match-card-fact-value {
  font-size: 0.875rem; font-weight: 600; color: #111827;
  font-variant-numeric: tabular-nums; margin: 2px 0 0 0;
}

/* AI Reason block */
.ai-reason {
  margin: 0.25rem 1rem 0.5rem;
  padding: 0.625rem 0.75rem;
  background: linear-gradient(180deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid #dbeafe;
  border-radius: 8px;
  display: flex; gap: 0.5rem; align-items: flex-start;
  font-size: 11.5px; line-height: 1.4; color: #334155;
}
.ai-reason p {
  margin: 0;
  color: #334155;
  overflow-wrap: anywhere;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ai-reason-icon {
  flex-shrink: 0;
  width: 18px; height: 18px; border-radius: 6px;
  background: #ffffff; border: 1px solid #dbeafe;
  color: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; margin-top: 1px;
}
.ai-reason .ai-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2563eb;
  margin-right: 4px;
}

/* Bid (interest) section */
.bid-section {
  border-top: 1px dashed #e5e7eb;
  margin: 0 1rem;
  padding: 0.625rem 0 0.5rem;
}
.bid-prompt {
  font-size: 11px; color: #475569;
  margin: 0 0 0.375rem; font-weight: 500;
  text-align: left;
}
.interest-group {
  display: flex;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 3px; gap: 3px; width: 100%;
}
.interest-btn {
  position: relative; flex: 1; min-width: 0;
  height: 36px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 8px; color: #475569;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, transform 60ms ease;
  font-size: 13px; font-weight: 500;
  border: none; background: transparent;
}
.interest-btn i { font-size: 13px; }
.interest-btn:active { transform: scale(0.97); }
.interest-btn::after {
  content: ''; position: absolute; inset: -6px;
}
.interest-btn:hover { color: #0f172a; background: #fff; }
.interest-btn.active-yes { background: #dcfce7; color: #15803d; }
.interest-btn.active-maybe { background: #fef3c7; color: #a16207; }
.interest-btn.active-no { background: #ffe4e6; color: #b91c1c; }
.interest-btn.active-hide { background: #eff6ff; color: #1d4ed8; }
.interest-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }

/* Pipeline/bookmark button */
.pipeline-btn {
  color: #94a3b8;
  /* 8x10 padding => ~34x30px hit target (was 26x22 — near-misses on mobile
     registered as dead clicks in Clarity). */
  padding: 8px 10px; border-radius: 6px;
  cursor: pointer; border: none; background: none;
  transition: color 120ms ease, background 120ms ease;
  font-size: 14px;
}
/* .focus-ring is applied across both card types but had NO rule anywhere —
   give keyboard users a visible focus indicator. */
.focus-ring:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 6px;
}
.pipeline-btn:hover { color: #2563eb; background: #eff6ff; }
.pipeline-btn.in-pipeline { color: #2563eb; }
.pipeline-btn.in-pipeline:hover { color: #1d4ed8; background: #dbeafe; }

/* Hide-similar button */
.hide-similar-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 7px; border-radius: 6px;
  font-size: 11px; font-weight: 500;
  color: #94a3b8; background: transparent;
  cursor: pointer; border: none;
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.hide-similar-btn i { font-size: 13px; }
.hide-similar-btn:hover { color: #2563eb; background: #eff6ff; }
.hide-similar-btn.is-active { color: #2563eb; }
.hide-similar-btn.is-active:hover { color: #1d4ed8; background: #dbeafe; }
@container card (max-width: 300px) {
  .hide-similar-btn .hide-similar-label { display: none; }
  .hide-similar-btn { padding: 0 6px; width: 26px; justify-content: center; }
}
@media (max-width: 380px) {
  .hide-similar-btn .hide-similar-label { display: none; }
  .hide-similar-btn { padding: 0 6px; width: 26px; justify-content: center; }
}

/* Assignee initials badge */
.assignee-badge {
  width: 24px; height: 24px; border-radius: 9999px;
  background: #dbeafe; color: #1d4ed8;
  font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

/* Card footer.
   #1557 M16: three labelled buttons + the assignee badge do not fit a card in
   the 4-column desktop grid (~290px), and `.match-card { overflow: hidden }`
   silently CLIPPED the primary "Ask AI" button by ~28px. The footer is now
   allowed to shrink and wrap, and the card's own container query drops the
   secondary labels before anything can overflow. */
.match-card-footer {
  padding: 0.625rem 0.75rem;
  background: #f9fafb; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem; flex-wrap: wrap; row-gap: 6px;
  min-width: 0;
}
.match-card-footer-actions {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end;
}
.match-footer-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: #ffffff; border: 1px solid #e5e7eb;
  color: #334155; font-size: 0.75rem; font-weight: 500;
  padding: 0.375rem 0.625rem; border-radius: 6px;
  cursor: pointer;
  min-width: 0; max-width: 100%; white-space: nowrap;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.match-footer-btn .mfb-label {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* Narrow cards (4-column desktop grid, split panes): tighten, then drop the
   secondary labels — icons keep their title/aria-label. */
@container card (max-width: 340px) {
  .match-card-footer { padding: 0.5rem 0.625rem; gap: 0.375rem; }
  .match-card-footer-actions { gap: 4px; }
  .match-footer-btn { padding: 0.3125rem 0.5rem; font-size: 0.6875rem; gap: 4px; }
}
@container card (max-width: 300px) {
  .match-footer-btn:not(.match-footer-btn-primary) .mfb-label { display: none; }
  .match-footer-btn:not(.match-footer-btn-primary) { padding: 0.3125rem 0.5rem; }
}
@container card (max-width: 230px) {
  .match-card-footer .assignee-badge { display: none; }
}
.match-footer-btn:hover { border-color: #cbd5e1; background: #f8fafc; color: #0f172a; }
.pipeline-footer-btn.in-pipeline {
  background: #eff6ff; border-color: #bfdbfe; color: #2563eb;
}
.pipeline-footer-btn.in-pipeline:hover {
  background: #dbeafe; border-color: #93c5fd; color: #1d4ed8;
}
.match-footer-btn-primary {
  background: #2563eb; border-color: #2563eb;
  color: #fff;
}
.match-footer-btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }

/* "Assign to expert" CTA (#1515) — full-width blue button, visually consistent
   with the pipeline card's btn-delegate. Blue only (purple is banned). */
.match-delegate-row {
  padding: 0 0.75rem 0.75rem; margin-top: 2px;
}
.match-delegate-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.8125rem; font-weight: 600;
  padding: 0.5rem 0.75rem; border-radius: 8px;
  color: #fff; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  box-shadow: 0 1px 2px rgba(37,99,235,.25);
  transition: box-shadow 160ms ease, transform 80ms ease;
}
.match-delegate-btn:hover { box-shadow: 0 4px 14px rgba(37,99,235,.30); }
.match-delegate-btn:active { transform: translateY(1px); }
.match-delegate-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* ========================================
   MATCHING PAGE — Filters Side Panel
   ======================================== */
.filters-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 360px; max-width: 100vw;
  background: #ffffff; border-left: 1px solid #e5e7eb;
  box-shadow: -12px 0 32px -12px rgba(15,23,42,.15);
  z-index: 55;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.22,1,.36,1);
  display: flex; flex-direction: column;
}
.filters-panel.open { transform: translateX(0); }
.filters-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.35);
  opacity: 0; pointer-events: none;
  transition: opacity 200ms ease;
  z-index: 54;
}
.filters-backdrop.open { opacity: 1; pointer-events: auto; }
.filters-panel-header {
  height: 56px; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem; flex-shrink: 0;
}
.filters-panel-header button {
  margin: 0 !important;
}
.filters-panel-body {
  flex: 1; overflow-y: auto;
  padding: 1.25rem; display: flex; flex-direction: column; gap: 1.5rem;
  scrollbar-width: thin;
}
.filters-panel-body::-webkit-scrollbar { width: 6px; }
.filters-panel-body::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.filters-section-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: #6b7280; margin: 0 0 0.5rem;
}
.filters-section-hint {
  font-size: 11px; color: #6b7280; margin: 0 0 0.5rem;
}
.filters-panel-footer {
  padding: 0.75rem 1.25rem;
  border-top: 1px solid #f1f5f9; background: #f9fafb;
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  flex-shrink: 0;
}

/* Filter checkboxes/radios */
.filter-radio-group {
  display: flex; flex-direction: column; gap: 6px;
}
.filter-checkbox-group {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.filter-radio-label, .filter-checkbox-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: #374151;
  cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
  transition: background 100ms ease;
  margin: 0 !important;
}
.filter-radio-label:hover, .filter-checkbox-label:hover { background: #f9fafb; }
.filter-radio-label input, .filter-checkbox-label input, .filter-nobid-label input {
  width: 16px !important; height: 16px !important;
  flex-shrink: 0;
  appearance: none !important; -webkit-appearance: none !important;
  border: 1.5px solid #d1d5db !important;
  background: #fff !important;
  cursor: pointer;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
  margin: 0 !important;
  padding: 0 !important;
}
.filter-checkbox-label input[type="checkbox"], .filter-nobid-label input[type="checkbox"] {
  border-radius: 4px;
}
.filter-radio-label input[type="radio"] {
  border-radius: 50%;
}
.filter-checkbox-label input:checked, .filter-nobid-label input:checked {
  background: #2563eb !important; border-color: #2563eb !important;
}
.filter-checkbox-label input:checked::after, .filter-nobid-label input:checked::after {
  content: '';
  position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-radio-label input:checked {
  background: #fff !important; border-color: #2563eb !important;
}
.filter-radio-label input:checked::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2563eb;
}
.filter-checkbox-label .flag-chip {
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 16px; margin: 0;
  background: none; border: none;
}
.filter-value-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.filter-value-input {
  width: 100%; height: 36px !important; padding: 0 0.5rem !important;
  border: 1px solid #e5e7eb; border-radius: 6px;
  font-size: 0.875rem; color: #0f172a; background: #fff;
  transition: border-color 120ms ease;
  margin: 0 !important;
}
.filter-value-input:focus {
  border-color: #3b82f6; outline: none;
}
.filter-value-label {
  font-size: 0.75rem; color: #6b7280; margin: 0 0 4px;
  display: block;
}
.filter-nobid-label {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; color: #374151; cursor: pointer;
  margin: 0 !important;
}
.filter-nobid-label .ml-auto-count {
  margin-left: auto; font-size: 11px; color: #9ca3af;
}

/* Reset button */
.filters-reset-btn {
  font-size: 12px; font-weight: 500; color: #4b5563;
  background: none; border: none; cursor: pointer;
  padding: 0.25rem 0.5rem; border-radius: 4px;
  transition: color 120ms ease, background 120ms ease;
  margin: 0 !important;
}
.filters-reset-btn:hover { color: #0f172a; background: #f1f5f9; }
.filters-cancel-btn, .filters-apply-btn {
  height: 32px; padding: 0 12px;
  font-size: 12px; font-weight: 500;
  border-radius: 6px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  margin: 0 !important;
}
.filters-cancel-btn {
  background: transparent; color: #374151; border: none;
}
.filters-cancel-btn:hover { background: #f1f5f9; }
.filters-apply-btn {
  background: #2563eb; color: #fff; border: none;
}
.filters-apply-btn:hover { background: #1d4ed8; }

/* ========================================
   MATCHING PAGE — Run-matching popover
   ======================================== */
.run-matching-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 80vh;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15,23,42,.18);
  z-index: 50;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.run-matching-popover.hidden { display: none; }
.run-matching-popover header {
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid #f1f5f9;
}
.run-matching-popover .rm-header-row {
  display: flex; align-items: center; justify-content: space-between;
}
.run-matching-popover .rm-title {
  font-size: 0.875rem; font-weight: 600; color: #0f172a; margin: 0;
}
.run-matching-popover .rm-close {
  padding: 4px; margin: 0 -4px 0 0 !important;
  border-radius: 6px; background: none; border: none; cursor: pointer;
  color: #9ca3af;
  transition: color 120ms ease, background 120ms ease;
}
.run-matching-popover .rm-close:hover { color: #374151; background: #f1f5f9; }
.run-matching-popover .rm-plan-hint {
  font-size: 12px; color: #6b7280; margin: 4px 0 0;
}
.run-matching-popover .rm-country-list {
  padding: 0.5rem 0.75rem;
  overflow-y: auto;
  max-height: 360px;
  scrollbar-width: thin;
}
.run-matching-popover .rm-country-list::-webkit-scrollbar { width: 6px; }
.run-matching-popover .rm-country-list::-webkit-scrollbar-thumb {
  background: #e5e7eb; border-radius: 3px;
}
.country-row {
  display: flex; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 100ms ease;
  font-size: 0.8125rem;
  color: #1e293b;
  margin: 0 !important;
}
.country-row:hover { background: #f8fafc; }
.country-row.disabled { color: #94a3b8; cursor: not-allowed; }
.country-row.disabled:hover { background: transparent; }
.country-row input[type="checkbox"],
.country-row input[type="radio"] {
  width: 16px !important; height: 16px !important; accent-color: #2563eb;
  flex-shrink: 0; cursor: inherit;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background: none !important;
  border: revert !important;
  margin: 0 !important;
  padding: 0 !important;
}
.country-row .flag { font-size: 1rem; flex-shrink: 0; line-height: 1; }
.country-row .lock {
  margin-left: auto; font-size: 10px; color: #94a3b8;
  display: inline-flex; align-items: center; gap: 3px;
}
.run-matching-popover footer {
  border-top: 1px solid #f1f5f9; background: #f9fafb;
}
.run-matching-popover .rm-footer-actions {
  padding: 0.75rem 1rem;
  display: flex; align-items: center; justify-content: flex-end; gap: 0.5rem;
}
.run-matching-popover .rm-cancel {
  height: 32px; padding: 0 12px;
  border-radius: 6px;
  font-size: 12px; font-weight: 500;
  color: #374151; background: transparent;
  border: none; cursor: pointer;
  margin: 0 !important;
}
.run-matching-popover .rm-cancel:hover { background: #f1f5f9; }
.run-matching-popover .rm-run-btn {
  height: 32px; padding: 0 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: #2563eb; color: #fff;
  font-size: 12px; font-weight: 500;
  border-radius: 6px; border: none; cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
  margin: 0 !important;
}
.run-matching-popover .rm-run-btn:hover { background: #1d4ed8; }
.run-matching-popover .rm-run-btn:disabled {
  background: #93c5fd; color: #fff; cursor: not-allowed;
}
.run-matching-popover .rm-upgrade-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.75rem 1rem 0;
  font-size: 12px; font-weight: 500;
  color: #2563eb; text-decoration: none;
}
.run-matching-popover .rm-upgrade-link:hover { color: #1d4ed8; }
.run-matching-popover .rm-upgrade-link.hidden { display: none; }
@media (max-width: 767px) {
  .run-matching-popover {
    position: fixed;
    top: auto;
    left: 12px;
    right: 12px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0));
    width: auto;
    max-width: none;
    max-height: 72vh;
  }
}

/* ========================================
   MATCHING PAGE — Toast
   ======================================== */
.match-toast {
  position: fixed; left: 50%; bottom: 24px;
  transform: translateX(-50%) translateY(24px);
  background: #0f172a; color: #fff;
  padding: 10px 14px; border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(15,23,42,.35);
  font-size: 0.8125rem;
  display: flex; align-items: center; gap: 0.75rem;
  z-index: 100;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.22,1,.36,1);
  max-width: calc(100vw - 32px);
}
.match-toast.visible {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.match-toast button {
  color: #93c5fd; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  background: none; border: none; cursor: pointer;
  transition: background 120ms ease;
}
.match-toast button:hover { background: rgba(147,197,253,.12); }

/* ========================================
   MATCHING PAGE — Mobile Action Bar
   ======================================== */
.mobile-action-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  box-shadow: 0 -8px 20px -6px rgba(15,23,42,.08);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-action-bar-inner {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.625rem 0.875rem;
}
.mobile-action-bar-scope {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  font-size: 11px; color: #64748b; line-height: 1.25;
}
.mobile-action-bar-scope strong { color: #0f172a; font-weight: 600; }
.mobile-action-bar-flags {
  display: inline-flex; align-items: center; gap: 2px;
  margin-top: 2px;
}
.mobile-action-bar-flags .flag-chip {
  display: inline-flex; width: 18px; height: 18px; border-radius: 9999px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  align-items: center; justify-content: center;
  font-size: 11px; margin-right: -4px; position: relative; z-index: 1;
}
.mobile-action-bar-run {
  flex-shrink: 0;
  height: 44px; padding: 0 1.125rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: #2563eb; color: #fff;
  font-size: 0.875rem; font-weight: 600;
  border-radius: 10px; border: none; cursor: pointer;
  box-shadow: 0 4px 10px -2px rgba(37,99,235,.35);
}
.mobile-action-bar-run:hover { background: #1d4ed8; }
.mobile-action-bar-run:active { transform: scale(0.98); }

@media (max-width: 767px) {
  .mobile-action-bar { display: block; }
  .match-page-content { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0)) !important; }
  .scope-card-section { display: none !important; }

  /* Sticky filter bar so search/sort/filters stay visible while scrolling */
  .match-filter-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #ffffff;
    padding-top: 0.5rem;
    margin: 0 -1rem;
    padding-left: 1rem; padding-right: 1rem;
    border-bottom: 1px solid #f1f5f9;
    gap: 6px;
  }

  /* Larger tier tabs that meet Apple's 44x44 minimum */
  .tier-tabs-bar .tier-tab {
    height: 42px !important;
    font-size: 13px !important;
    padding: 0 0.5rem !important;
  }
  .tier-matches-text { display: none !important; }
}

/* ========================================
   MATCHING PAGE — Empty state override
   ======================================== */
.match-empty-grid {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 1rem;
  border: 1px dashed #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}
.match-empty-grid .empty-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: #ffffff; border: 1px solid #e5e7eb;
  display: inline-flex; align-items: center; justify-content: center;
  color: #9ca3af; margin: 0 auto 0.75rem;
  font-size: 14px;
}
.match-empty-grid .empty-title {
  font-size: 0.875rem; font-weight: 500; color: #374151; margin: 0;
}
.match-empty-grid .empty-sub {
  font-size: 0.75rem; color: #64748b; margin: 4px auto 0;
  max-width: 24rem;
}
.match-empty-grid .empty-reset-btn {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  background: #ffffff; border: 1px solid #e5e7eb;
  color: #374151; font-size: 12px; font-weight: 500;
  border-radius: 6px; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.match-empty-grid .empty-reset-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
/* Profile-gate empty state (#1557 H4b): the fix is an action, not a filter
   reset, so its CTA is the primary brand button. */
.match-empty-grid .empty-reset-btn-primary,
.match-empty-grid a.empty-reset-btn-primary {
  background: #2563eb; border-color: #2563eb; color: #ffffff;
  text-decoration: none;
}
.match-empty-grid .empty-reset-btn-primary:hover {
  background: #1d4ed8; border-color: #1d4ed8; color: #ffffff;
}

/* ========================================
   MATCHING PAGE — Loading skeletons (#1557)
   ======================================== */
.match-skeleton-card {
  border: 1px solid #e5e7eb; border-radius: 12px;
  background: #ffffff; padding: 0.875rem 0.75rem;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 0;
}
.match-skeleton-card .sk-line {
  display: block; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e8edf3 37%, #f1f5f9 63%);
  background-size: 400% 100%;
  animation: matchSkeletonShimmer 1.4s ease infinite;
}
.match-skeleton-card .sk-badge { width: 40%; height: 16px; border-radius: 9999px; }
.match-skeleton-card .sk-title { width: 92%; height: 14px; }
.match-skeleton-card .sk-sub { width: 60%; }
.match-skeleton-card .sk-facts { width: 100%; height: 30px; border-radius: 8px; }
.match-skeleton-card .sk-reason { width: 100%; height: 34px; border-radius: 8px; }
.match-skeleton-card .sk-footer { width: 75%; height: 24px; border-radius: 8px; }
@keyframes matchSkeletonShimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .match-skeleton-card .sk-line { animation: none; }
}
/* Tier bar while a tier fetch is in flight */
.tier-tabs-bar.is-loading { opacity: 0.72; pointer-events: none; }
.tier-tabs-bar.is-loading .tier-tab.active .tier-count {
  animation: matchSkeletonShimmer 1.4s ease infinite;
  background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
  background-size: 400% 100%; color: transparent;
}
/* Full-page skeleton painted while the browser navigates to /matching */
.match-nav-skeleton {
  position: fixed; inset: 0; z-index: 45;
  background: #f9fafb;
  padding: 84px 1rem 1rem;
  overflow: hidden;
  pointer-events: none;
}
.match-nav-skeleton .match-card-grid {
  max-width: 1180px; margin: 0 auto;
}

/* ========================================
   MATCHING PAGE — "You joined {org}" banner (CONTRACT C3)
   ======================================== */
.match-joined-banner {
  display: flex; align-items: center; gap: 0.625rem;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  border-radius: 12px; padding: 0.625rem 0.75rem;
}
.match-joined-banner-icon {
  width: 28px; height: 28px; border-radius: 8px;
  background: #ffffff; border: 1px solid #a7f3d0;
  display: inline-flex; align-items: center; justify-content: center;
  color: #059669; flex-shrink: 0;
}
.match-joined-banner-text {
  flex: 1 1 0%; min-width: 0;
  font-size: 0.8125rem; font-weight: 500; color: #065f46; line-height: 1.35;
}
.match-joined-banner-dismiss {
  background: none; border: 0; cursor: pointer; color: #059669;
  padding: 6px; border-radius: 6px; flex-shrink: 0;
  min-width: 32px; min-height: 32px;
}
.match-joined-banner-dismiss:hover { background: #d1fae5; }
@media (max-width: 639px) {
  .match-joined-banner { padding: 0.5rem 0.625rem; }
  .match-joined-banner-text { font-size: 0.75rem; }
}

/* ========================================
   MATCHING PAGE — Not-interested sections / Learning card
   ======================================== */
.ni-section-header {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 0.625rem;
  margin-top: 0.5rem;
}
.ni-section-header:first-child { margin-top: 0; }
.ni-section-header .ni-title {
  font-size: 12px; font-weight: 600; color: #0f172a;
  letter-spacing: 0.01em;
}
.ni-section-header .ni-sub { font-size: 11px; color: #64748b; font-weight: 400; }
.ni-section-header .ni-count {
  font-size: 10px; font-weight: 600;
  background: #f1f5f9; color: #475569;
  padding: 2px 7px; border-radius: 9999px;
}
.ni-section-header .ni-divider { flex: 1; height: 1px; background: #e5e7eb; }
.ni-section-header .ni-badge-learning {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600;
  color: #1d4ed8; background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 7px; border-radius: 9999px;
}
.ni-section-header .ni-badge-learning i { font-size: 9px; }

/* Learning card */
.learning-card {
  grid-column: 1 / -1;
  display: flex; gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}
.learning-card .learning-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  background: #fff; border: 1px solid #e2e8f0;
  color: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
}
.learning-card .learning-body {
  flex: 1; min-width: 0;
}
.learning-card .learning-title {
  font-size: 14px; font-weight: 600; color: #0f172a; margin: 0;
}
.learning-card .learning-text {
  font-size: 12px; color: #4b5563; margin-top: 2px;
}
.learning-card .learning-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-radius: 9999px;
  font-size: 11px; font-weight: 500;
  margin: 2px 4px 2px 0;
}
.learning-card .learning-chip i { font-size: 9px; color: #94a3b8; }
.learning-card.editing .learning-chip { padding-right: 2px; }
.learning-chip .chip-remove {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px;
  background: none; border: none; cursor: pointer;
  color: #94a3b8;
  font-size: 9px;
  margin-left: 2px;
  transition: background 100ms ease, color 100ms ease;
}
.learning-chip .chip-remove:hover { background: #fef2f2; color: #b91c1c; }
.learning-chip.removed { opacity: 0.4; text-decoration: line-through; }
.learning-edit-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  border-radius: 6px;
  background: none; border: none; cursor: pointer;
  font-size: 11px; font-weight: 500;
  color: #475569;
  transition: background 100ms ease, color 100ms ease;
}
.learning-edit-btn:hover { background: #e2e8f0; color: #0f172a; }
.learning-edit-btn.editing { background: #0f172a; color: #fff; }
@media (max-width: 639px) {
  .learning-card { flex-wrap: wrap; gap: 0.75rem; padding: 0.875rem; }
  .learning-card .learning-controls { width: 100%; justify-content: flex-end; }
}

/* ========================================
   MATCHING PAGE — Match Strength Strip
   ======================================== */
.match-strip { height: 6px; border-radius: 9999px; background: #f1f5f9; overflow: hidden; display: flex; }
.match-strip > span { height: 100%; }
.match-strip .seg-perfect { background: #10b981; }
.match-strip .seg-strong  { background: #3b82f6; }
.match-strip .seg-possible { background: #f59e0b; }
.match-strip .seg-weak    { background: #e5e7eb; }

/* ========================================
   MATCHING PAGE — Card Title Link
   ======================================== */
.card-title-link { cursor: pointer; transition: color 120ms ease; }
.card-title-link:hover { color: #2563eb; }

/* ========================================
   MATCHING PAGE — Timeline
   ======================================== */
.timeline-item { display: flex; gap: 0.75rem; padding-bottom: 0.875rem; }
.timeline-rail { display: flex; flex-direction: column; align-items: center; padding-top: 4px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 0 0 2px currentColor; }
.timeline-line { width: 2px; flex: 1; background: #e5e7eb; margin-top: 4px; min-height: 16px; }
.timeline-last .timeline-line { display: none; }

/* Utility: generic hidden class */
.hidden { display: none !important; }

/* ========================================
   MATCHING PAGE — Page Layout
   ======================================== */
.match-page-content {
  padding: 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 1024px) {
  .match-page-content { padding: 1.25rem 1.25rem; }
}

/* Load more button wrapper */
.load-more-wrapper {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0.5rem 0 0;
}
.load-more-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 16px;
  background: #ffffff; border: 1px solid #e5e7eb;
  color: #334155; font-size: 13px; font-weight: 500;
  border-radius: 8px; cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.load-more-btn:hover { border-color: #cbd5e1; background: #f8fafc; }

/* ========================================
   MATCHING PAGE — Not Interested Section
   ======================================== */
.ni-section {
  display: flex; flex-direction: column; gap: 1rem;
}

/* AI learning card */
.ni-ai-card {
  display: flex; gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
}
@media (max-width: 639px) {
  .ni-ai-card { flex-wrap: wrap; gap: 0.75rem; padding: 0.875rem; }
}
.ni-ai-card-inner {
  display: flex; gap: 0.875rem; width: 100%;
}
.ni-ai-icon {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 9px;
  background: #fff; border: 1px solid #e2e8f0;
  color: #2563eb;
  display: inline-flex; align-items: center; justify-content: center;
}
.ni-ai-title {
  font-size: 0.875rem; font-weight: 600; color: #0f172a;
  margin: 0 !important;
}
.ni-ai-desc {
  font-size: 0.75rem; color: #4b5563;
  margin: 2px 0 0 0 !important;
  line-height: 1.5;
}
.ni-ai-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 8px;
}
.ni-ai-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
  border-radius: 9999px;
  font-size: 11px; font-weight: 500;
}
.ni-ai-edit-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; height: auto;
  border-radius: 6px; border: none;
  font-size: 11px; font-weight: 500;
  color: #475569; background: transparent;
  cursor: pointer; flex-shrink: 0; align-self: flex-start;
  transition: background 100ms ease, color 100ms ease;
  margin: 0 !important;
}
.ni-ai-summary {
  font-size: 0.75rem; line-height: 1.6;
  color: #334155; font-style: italic;
  margin: 6px 0 0 0 !important;
  padding: 8px 10px;
  background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.ni-ai-edit-btn:hover { background: #e2e8f0; color: #0f172a; }
.ni-ai-save-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px; height: auto;
  border-radius: 6px; border: none;
  font-size: 11px; font-weight: 500;
  color: #fff; background: #2563eb;
  cursor: pointer; flex-shrink: 0; align-self: flex-start;
  transition: background 100ms ease;
  margin: 0 !important;
}
.ni-ai-save-btn:hover { background: #1d4ed8; }
.ni-ai-actions {
  display: flex; flex-direction: column; gap: 4px;
  flex-shrink: 0; align-self: flex-start;
}
.ni-ai-textarea {
  width: 100% !important; margin: 6px 0 0 0 !important;
  padding: 8px 10px !important; border: 1px solid #cbd5e1 !important;
  border-radius: 8px; font-size: 0.75rem; line-height: 1.5;
  color: #334155; background: #fff !important;
  resize: vertical; font-family: inherit;
  height: auto !important;
}

/* Section headers */
.ni-section-header {
  display: flex; align-items: center; gap: 0.625rem;
  margin-top: 0.5rem;
}
.ni-section-header:first-child { margin-top: 0; }
.ni-section-header strong {
  font-size: 12px; font-weight: 600;
  color: #0f172a; letter-spacing: 0.01em;
}
.ni-section-header > span {
  font-size: 11px; color: #64748b; font-weight: 400;
}
.ni-section-count {
  font-size: 10px !important; font-weight: 600 !important;
  background: #f1f5f9; color: #475569 !important;
  padding: 2px 7px; border-radius: 9999px;
}
.ni-teaches-badge {
  display: inline-flex !important; align-items: center; gap: 4px;
  font-size: 10px !important; font-weight: 600 !important;
  color: #1d4ed8 !important; background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: 2px 7px; border-radius: 9999px;
}
.ni-teaches-badge i { font-size: 9px; }
.ni-divider {
  flex: 1; height: 1px; background: #e5e7eb;
}

/* ========================================
   MATCHING PAGE — Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  .match-card, .filters-panel, .match-toast { transition: none !important; }
  .pulse { animation: none; }
}


/* === Alerts Page Layout === */
/* Scroll wrapper — fills the center pane and scrolls vertically.
   Needed because .center-pane is overflow:hidden + flex column. */
.alerts-page-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}
/* Wider page so we can show 3 alert cards per row and the explorer-style
   tender card grid below (ticket #1224). */
.alerts-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 32px 48px;
  width: 100%;
}

.alerts-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
/* #1557 — the page heading block (h1 + subtitle) sits left of the
   "New alert" button and must be able to shrink on small screens. */
.alerts-page-heading {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.alerts-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.3;
}
.alerts-page-subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin: 4px 0 0;
}

/* === Alert List === */
/* Grid layout: 3 cards per row on desktop, 2 on tablet, 1 on mobile.
   Ticket #1224 — set alerts used to stack one per row, wasting space. */
.alert-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
@media (max-width: 900px) {
  .alert-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}
@media (max-width: 600px) {
  .alert-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* === Tender Notifications section (ticket #1224) === */
.notif-section {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}
.notif-section-header {
  margin-bottom: 16px;
}
.notif-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
.notif-section-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin: 4px 0 0;
}
.notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  color: #6b7280;
  text-align: center;
}
.notif-empty-icon { color: #d1d5db; margin-bottom: 8px; }
.notif-empty-title { font-size: 15px; font-weight: 600; color: #374151; margin: 4px 0 0; }
.notif-empty-subtitle { font-size: 13px; color: #6b7280; margin: 4px 0 0; }

/* Card grid mirrors the explorer's compact tender layout. */
.notif-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .notif-card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (max-width: 600px) {
  .notif-card-grid { grid-template-columns: 1fr; }
}
.notif-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.notif-card:hover {
  border-color: #c7d2fe;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}
.notif-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.notif-card-flag {
  font-size: 16px;
  line-height: 1;
}
.notif-card-alert-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #2563eb;
  background: #eff6ff;
  padding: 3px 8px;
  border-radius: 999px;
}
.notif-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.3;
  /* Clamp to 2 lines so cards stay uniform height. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-card-authority {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  /* single-line truncation */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.notif-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 12px;
  color: #4b5563;
  margin-top: auto;
}
.notif-card-value {
  font-weight: 600;
  color: #111827;
}
.notif-card-deadline,
.notif-card-cpv {
  color: #6b7280;
}
.notif-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #f3f4f6;
  gap: 8px;
}
.notif-card-sent {
  font-size: 11px;
  color: #9ca3af;
}
.notif-card-cta {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease;
}
.notif-card-cta:hover { background: #1d4ed8; }

/* === Alert Card === */
/* Equal-height saved alert cards on desktop — cards inside the grid stretch
   to fill the row, so a card with fewer criteria pills doesn't shrink and
   misalign with its taller neighbours. */
.alert-card-wrap {
  display: flex;
  height: 100%;
}
.alert-card {
  transition: box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
}
.alert-card .alert-criteria {
  flex: 1 1 auto;
}

.alert-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.alert-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}

.alert-card-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.alert-card-icon {
  display: inline-flex;
  color: var(--text-3);
  flex-shrink: 0;
}
.alert-card-icon svg { width: 16px; height: 16px; }

.alert-card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* === Toggle Switch === */
.alert-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
}
.alert-toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.alert-toggle-slider {
  width: 36px;
  height: 20px;
  background: var(--border-strong);
  border-radius: 10px;
  transition: background var(--transition-fast);
  position: relative;
}
.alert-toggle-slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--transition-fast);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.alert-toggle-input:checked + .alert-toggle-slider {
  background: var(--brand);
}
.alert-toggle-input:checked + .alert-toggle-slider::after {
  transform: translateX(16px);
}
.alert-toggle-input:focus-visible + .alert-toggle-slider {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* === Filter Criteria === */
.alert-criteria {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.alert-criteria-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.alert-criteria-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 72px;
  flex-shrink: 0;
  padding-top: 3px;
}

.alert-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.alert-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 9999px;
  line-height: 1.4;
}
.alert-pill-keyword {
  background: var(--brand-weak);
  color: var(--brand-strong);
}
.alert-pill-cpv {
  background: #f3f4f6;
  color: #374151;
}

.alert-flags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* === Card Footer === */
.alert-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.alert-footer-left {
  flex: 1;
  min-width: 0;
}
.alert-last-notified {
  font-size: 11px;
  color: var(--text-muted);
}

.alert-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.alert-action-btn {
  color: var(--text-3);
}
.alert-action-btn:hover {
  color: var(--text);
}
.alert-action-delete:hover {
  color: var(--red);
}

/* === Alert Form === */
.alert-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.alert-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.alert-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}

.alert-form-input {
  font-family: var(--font-family);
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color var(--transition-fast);
  width: 100%;
  box-sizing: border-box;
}
.alert-form-input:focus {
  border-color: var(--brand);
}
.alert-form-input:disabled {
  background: var(--surface-muted);
  cursor: not-allowed;
}
.alert-form-input-half {
  flex: 1;
  min-width: 0;
}

.alert-form-hint {
  font-size: 11px;
  color: var(--text-muted);
}

/* Country checkboxes grid */
.alert-countries-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.alert-country-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}
.alert-country-option:hover {
  background: var(--surface-muted);
}
.alert-country-name {
  font-size: 13px;
}
.alert-form-checkbox {
  accent-color: var(--brand);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Value range row */
.alert-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-range-sep {
  color: var(--text-muted);
  font-size: 14px;
  flex-shrink: 0;
}

/* Frequency radios */
.alert-freq-row {
  display: flex;
  gap: 16px;
}
.alert-freq-option {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-2);
}
.alert-form-radio {
  accent-color: var(--brand);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

/* Form footer */
.alert-form-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
}

/* === Responsive === */
@media (max-width: 640px) {
  .alerts-page {
    padding: 20px 16px 32px;
  }
  .alerts-page-header {
    flex-direction: column;
    gap: 12px;
  }
  .alerts-page-header .btn {
    align-self: flex-start;
  }
  /* Compact alert (notification setting) cards on mobile — collapse the
     criteria rows onto one stacked block per pill row so the card no
     longer eats half the screen vertically. */
  .alert-criteria {
    gap: 6px;
    padding-top: 8px;
    margin-bottom: 8px;
  }
  .alert-criteria-item {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
  }
  .alert-criteria-label {
    min-width: unset;
    padding-top: 0;
  }
  .alert-card-header {
    margin-bottom: 8px;
  }
  .alert-card-footer {
    padding-top: 8px;
  }
  .alert-countries-grid {
    grid-template-columns: 1fr;
  }
  .alert-freq-row {
    flex-direction: column;
    gap: 8px;
  }
  .alert-range-row {
    flex-direction: column;
    gap: 6px;
  }
  .alert-range-sep {
    display: none;
  }

  /* Tender notification cards must never overflow the viewport — the long
     authority strings and CPV labels were pushing the card past the right
     edge on small screens. Force every text node to wrap, and clamp the
     grid to a single column with the page padding budget. */
  .notif-card-grid {
    grid-template-columns: 1fr;
    width: 100%;
    min-width: 0;
  }
  .notif-card {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .notif-card-title,
  .notif-card-authority,
  .notif-card-meta,
  .notif-card-cpv,
  .notif-card-alert-tag {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  /* Allow the authority line to wrap to two lines instead of single-line
     ellipsis — the single-line variant clipped non-trivial buyer names. */
  .notif-card-authority {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .notif-card-footer {
    flex-wrap: wrap;
    gap: 6px;
  }
}

/* === Form footer & error message === */
.alert-form-footer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: 8px;
}
.alert-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.alert-form-error {
  color: #b91c1c;
  font-size: 13px;
  min-height: 18px;
}
.alert-form-error:empty {
  display: none;
}

/* === Toast === */
.alerts-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translate(-50%, 12px);
  background: #111827;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 10000;
  max-width: 90vw;
}
.alerts-toast-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
.alerts-toast-error {
  background: #b91c1c;
}


/* ── Explorer page ── */

.explorer-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px;
    gap: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Anchors the .explorer-loading overlay (#1557). */
    position: relative;
}

/* ── Search row ── */

.explorer-search-form { flex-shrink: 0; }

.explorer-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* ── Input fields ── */

.explorer-field {
    flex: 1;
    min-width: 0;
}

.explorer-field-input {
    width: 100%;
    height: 44px !important;
    padding: 0 14px !important;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text);
    outline: none;
    margin: 0 !important;
    box-shadow: none;
    touch-action: manipulation;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.explorer-field-input:hover {
    border-color: var(--border-strong);
}

.explorer-field-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.explorer-field-input::placeholder { color: var(--text-muted); }

/* ── Tag input field ── */

.explorer-field-tags {
    flex: 2;
}

.explorer-tag-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 44px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: text;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}

.explorer-tag-container:hover {
    border-color: var(--border-strong);
}

.explorer-tag-container:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.explorer-tag-container.explorer-tag-container-invalid,
.explorer-tag-container.explorer-tag-container-invalid:focus-within {
    border-color: #dc2626;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
    animation: explorerTagShake 320ms ease-in-out;
}

@keyframes explorerTagShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    50% { transform: translateX(3px); }
    75% { transform: translateX(-2px); }
}

.explorer-tag-input {
    flex: 1;
    min-width: 80px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-family: var(--font-family);
    font-size: 14px;
    color: var(--text);
    padding: 4px 4px !important;
    margin: 0 !important;
    box-shadow: none !important;
    line-height: 1.4;
    height: auto !important;
}

.explorer-tag-input::placeholder { color: var(--text-muted); }

/* Tags */

.explorer-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 9999px;
    font-family: var(--font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    max-width: 200px;
}

.explorer-tag-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.explorer-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 50%;
    font-size: 10px;
    line-height: 1;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 100ms ease;
    /* 14px visual glyph, ~30px real hit target — near-misses on the pill
       body were registering as dead clicks. */
    position: relative;
}
.explorer-tag-remove::after {
    content: '';
    position: absolute;
    inset: -8px;
}

.explorer-tag-remove:hover { opacity: 1; }

/* Positive tag — blue */
.explorer-tag-pos {
    background: var(--brand-weak);
    color: var(--brand-strong);
}

.explorer-tag-pos .explorer-tag-remove { color: var(--brand-strong); }

/* Negative tag — red */
.explorer-tag-neg {
    background: var(--red-bg);
    color: var(--red);
}

.explorer-tag-neg .explorer-tag-text {
    text-decoration: line-through;
}

.explorer-tag-neg .explorer-tag-remove { color: var(--red); }

.explorer-tag-neg .explorer-tag-prefix {
    font-weight: 700;
    margin-right: 1px;
}

/* ── Search button ── */

.explorer-search-form .explorer-search-btn {
    flex-shrink: 0;
    width: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    margin: 0;
    box-shadow: none;
    touch-action: manipulation;
    transition: background var(--transition-fast);
}

.explorer-search-form .explorer-search-btn:hover {
    background: var(--brand-strong);
}

.explorer-search-form .explorer-search-btn:active {
    transform: scale(0.95);
}

.explorer-search-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── CPV autocomplete dropdown ── */

.explorer-field-cpv {
    position: relative;
}

.explorer-field-cpv .explorer-tag-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.explorer-field-cpv .explorer-tag-container::-webkit-scrollbar {
    display: none;
}

.cpv-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.cpv-dropdown.cpv-dropdown-open {
    display: block;
}

.cpv-dropdown-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.04));
}

.cpv-dropdown-item:last-child {
    border-bottom: none;
}

.cpv-dropdown-item:hover,
.cpv-dropdown-item-active {
    background: var(--surface-muted, #f5f5f5);
}

.cpv-dropdown-code {
    font-family: var(--font-mono, 'SF Mono', 'Fira Code', monospace);
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    white-space: nowrap;
    flex-shrink: 0;
}

.cpv-dropdown-desc {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpv-dropdown-desc mark {
    background: var(--brand-weak);
    color: var(--brand-strong);
    border-radius: 2px;
    padding: 0 1px;
}

/* ── Filter chips bar ── */

.filter-chips-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 4px 0;
    flex-wrap: wrap;
}

/* ── Filter dropdowns ── */

.explorer-dd {
    position: relative;
    flex-shrink: 0;
}

.explorer-dd-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 8px 12px !important;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3);
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    min-height: 36px;
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    touch-action: manipulation;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.explorer-dd-toggle:hover {
    background: var(--surface-muted) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-2);
}

.explorer-dd-toggle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform var(--transition-fast);
}

.explorer-dd.explorer-dd-open .explorer-dd-toggle {
    border-color: var(--brand) !important;
    color: var(--brand-strong);
}

.explorer-dd.explorer-dd-open .explorer-dd-toggle svg {
    transform: rotate(180deg);
}

.explorer-dd-toggle.explorer-dd-has-value {
    background: var(--brand-weak) !important;
    border-color: var(--brand) !important;
    color: var(--brand-strong);
}

.dd-label-short { display: none; }

.explorer-dd-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    padding: 4px 0;
    max-height: 300px;
    overflow-y: auto;
}

.explorer-dd.explorer-dd-open .explorer-dd-menu {
    display: block;
}

.explorer-dd-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-family: var(--font-family);
    font-size: 13px;
    color: var(--text-2);
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.explorer-dd-item:hover {
    background: var(--surface-muted, #f5f5f5);
}

.explorer-dd-item-active {
    color: var(--brand-strong);
    font-weight: 600;
}

.explorer-dd-item-multi {
    margin: 0 !important;
}

.explorer-dd-check {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

/* ── Clear all button ── */

.explorer-clear-all {
    display: none;
    align-items: center;
    gap: 4px;
    padding: 8px 12px !important;
    font-family: var(--font-family);
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 9999px;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.3;
    min-height: 36px;
    width: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    touch-action: manipulation;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.explorer-clear-all:hover {
    color: var(--red, #dc2626) !important;
    background: var(--red-bg, rgba(220, 38, 38, 0.06)) !important;
}

.explorer-clear-all svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.explorer-clear-all.explorer-clear-visible {
    display: inline-flex !important;
}

/* ── Sort dropdown ── */

.explorer-sort-dd {
    margin-left: auto;
}

.explorer-sort-toggle {
    color: var(--text-muted) !important;
    border-color: transparent !important;
    background: transparent !important;
    gap: 4px !important;
}

.explorer-sort-toggle:hover {
    color: var(--text-2) !important;
    background: var(--surface-muted) !important;
}

.explorer-sort-toggle svg:first-child {
    display: none;
}

/* ── Country dropdown (#1384 — same control on desktop and mobile) ── */

.explorer-country-toggle {
    padding: 7px 10px !important;
    gap: 6px !important;
    color: var(--text-muted) !important;
}

.explorer-country-toggle:hover {
    color: var(--text-2) !important;
}

/* Blue globe = every country selected; gray globe = none selected. */
.explorer-country-toggle.explorer-dd-has-value {
    color: var(--brand-strong) !important;
}

.explorer-country-globe {
    display: inline-flex;
    align-items: center;
}

/* The generic toggle rules size + rotate every svg in the button — the
   chevron should do both, the globe neither. */
.explorer-country-globe svg,
.explorer-country-item-globe svg {
    width: 18px !important;
    height: 18px !important;
    transform: none !important;
}

.explorer-country-flags {
    font-size: 15px;
    line-height: 1;
    letter-spacing: 1px;
    white-space: nowrap;
    color: var(--text-2);
}

.explorer-country-flags:empty { display: none; }

.explorer-country-item-globe {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
}

.explorer-country-item-flag {
    font-size: 15px;
    line-height: 1;
}

/* "All countries" sits above the market list, separated so it reads as the
   master toggle rather than one more country. */
.explorer-dd-item-all {
    border-bottom: 1px solid var(--border);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    font-weight: 500;
}

.explorer-country-menu {
    min-width: 210px;
    max-height: 320px;
}

.explorer-sort-menu {
    right: 0;
    left: auto;
}

/* ── Organisation add/remove buttons (hidden on desktop/tablet) ── */

.explorer-add-org,
.explorer-remove-org {
    display: none;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-sm);
    background: var(--surface) !important;
    color: var(--text-muted) !important;
    cursor: pointer;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    touch-action: manipulation;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.explorer-add-org:hover,
.explorer-remove-org:hover {
    border-color: var(--border-strong) !important;
    color: var(--text-2) !important;
}

.explorer-add-org svg,
.explorer-remove-org svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── Welcome state ── */

.explorer-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.explorer-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    max-width: 480px;
}

.explorer-suggestion-chip {
    display: inline-flex;
    align-items: center;
    padding: 10px 18px;
    font-family: var(--font-family);
    font-size: 14px;
    font-weight: 500;
    color: var(--brand);
    background: var(--brand-weak);
    border: 1px solid transparent;
    border-radius: 9999px;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    touch-action: manipulation;
    min-height: 44px;
}

.explorer-suggestion-chip:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.explorer-suggestion-chip:active {
    transform: scale(0.97);
}

/* ── Results ── */

.explorer-results {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 0;
}

/* ── Empty state ── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px 24px 16px;
    gap: 12px;
}

.empty-state-icon { width: 48px; height: 48px; color: var(--text-muted); }
.empty-state-icon svg { width: 100%; height: 100%; }
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text); line-height: 1.4; }
.empty-state-subtitle { font-size: 14px; color: var(--text-3); max-width: 340px; line-height: 1.5; }

/* ── Responsive: tablet landscape ── */

@media (max-width: 1024px) {
    .explorer-page { padding: 20px; }
}

/* ── Responsive: tablet portrait & below ── */

@media (max-width: 768px) {
    /* `padding-bottom` respects the iOS safe-area + Chrome bottom toolbar
       so the bottom row of cards isn't cut off on phones. */
    .explorer-page {
        padding: 16px 16px max(24px, env(safe-area-inset-bottom));
        gap: 12px;
    }

    .explorer-search-row {
        flex-wrap: wrap;
        gap: 8px;
    }

    .explorer-field-tags {
        flex: 1 1 100%;
    }

    .explorer-field-cpv,
    .explorer-field:not(.explorer-field-tags):not(.explorer-field-cpv) {
        flex: 1 1 0;
        min-width: 120px;
    }

    .explorer-field-input {
        height: 48px;
        font-size: 16px;
    }

    .explorer-tag-container {
        min-height: 48px;
        padding: 6px 8px;
    }

    .explorer-tag-input { font-size: 16px; }

    .explorer-search-form .explorer-search-btn {
        flex: 0 0 48px;
        width: 48px;
    }

    .filter-chips-bar { gap: 6px; }

    .explorer-suggestions { max-width: 100%; padding: 0 8px; }
}

/* ── Responsive: mobile ── */

@media (max-width: 480px) {
    .explorer-page {
        padding: 12px 12px max(20px, env(safe-area-inset-bottom));
        gap: 10px;
    }

    .explorer-search-row { gap: 6px; }

    /* Reorder: Keywords + Search on row 1, CPV + Plus on row 2, Org + Minus on row 3 */
    .explorer-field-tags {
        order: 1;
        flex: 1 1 0 !important;
        min-width: 0;
    }

    .explorer-search-form .explorer-search-btn {
        order: 2;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
    }

    .explorer-field-cpv {
        order: 3;
        flex: 1 1 calc(100% - 46px) !important;
    }

    .explorer-add-org {
        display: inline-flex !important;
        order: 4;
        flex: 0 0 40px;
        width: 40px !important;
        height: 48px;
    }

    .explorer-field-org {
        order: 5;
        display: none !important;
        flex: 1 1 calc(100% - 46px) !important;
    }

    .explorer-remove-org {
        display: none !important;
        order: 6;
        flex: 0 0 40px;
        width: 40px !important;
        height: 48px;
    }

    /* When org is expanded */
    .explorer-search-row.org-expanded .explorer-add-org {
        display: none !important;
    }

    .explorer-search-row.org-expanded .explorer-field-org {
        display: block !important;
    }

    .explorer-search-row.org-expanded .explorer-remove-org {
        display: inline-flex !important;
    }

    .explorer-field-input {
        height: 48px;
        font-size: 16px;
        padding: 0 12px;
    }

    .filter-chips-bar { gap: 6px; flex-wrap: wrap; }

    .dd-label-full { display: none !important; }
    .dd-label-short { display: inline !important; }

    .explorer-dd-toggle.explorer-dd-has-value {
        background: var(--surface) !important;
        border-color: var(--border) !important;
    }
    .explorer-dd-toggle.explorer-dd-has-value .dd-label-short {
        color: var(--brand);
        font-weight: 600;
    }

    /* The country toggle has no text label to tint — keep the blue pill so
       "all countries selected" still reads as active on phones. */
    .explorer-country-toggle.explorer-dd-has-value {
        background: var(--brand-weak) !important;
        border-color: var(--brand) !important;
    }

    .explorer-dd-toggle {
        font-size: 12px !important;
        padding: 6px 10px !important;
        min-height: 40px;
        gap: 4px !important;
    }

    .explorer-dd-toggle svg {
        width: 12px;
        height: 12px;
    }

    .explorer-country-globe svg {
        width: 16px !important;
        height: 16px !important;
    }

    .explorer-country-toggle {
        padding: 6px 8px !important;
    }

    /* Sort: icon-only on mobile */
    .explorer-sort-toggle svg:first-child {
        display: block !important;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    .explorer-sort-label,
    .explorer-sort-toggle svg:last-child {
        display: none !important;
    }

    .explorer-sort-toggle {
        padding: 6px 8px !important;
    }

    .explorer-sort-dd {
        margin-left: auto;
        flex-basis: auto;
    }

    .explorer-clear-all {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .explorer-country-flags {
        font-size: 13px;
    }

    .explorer-suggestion-chip {
        padding: 10px 16px;
        font-size: 13px;
        min-height: 44px;
    }

    .explorer-suggestions { gap: 6px; padding: 0; }

    .empty-state { padding: 24px 16px 12px; }
    .empty-state-icon { width: 36px; height: 36px; }
    .empty-state-title { font-size: 15px; }
    .empty-state-subtitle { font-size: 13px; max-width: 280px; }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    .explorer-dd-toggle,
    .explorer-suggestion-chip,
    .explorer-search-row {
        transition: none;
    }
    .explorer-suggestion-chip:active {
        transform: none;
    }
    .explorer-dd.explorer-dd-open .explorer-dd-toggle svg {
        transition: none;
    }
}

/* ── Explorer card overrides ── */

.explorer-result-count {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-3, #64748b);
    margin: 0 0 8px;
}

.explorer-card-grid {
    padding-bottom: 1rem;
}

.explorer-card-title-row {
    padding: 0 1rem 0.75rem !important;
}

.explorer-desc-block {
    gap: 0 !important;
}

.explorer-card-footer {
    justify-content: flex-end !important;
}

.explorer-card-footer .match-card-footer-actions {
    width: 100%;
    display: flex;
    gap: 6px;
}

.explorer-card-footer .match-footer-btn {
    flex: 1;
    justify-content: center;
}

/* #1557 — "+N similar" chip: this card stands in for N further lots of the
   same framework that the server collapsed into it. */
.explorer-grouped-chip {
    color: #1d4ed8;
    font-size: 0.7rem;
    font-weight: 600;
    background: #eff6ff;
    padding: 0.0625rem 0.4rem;
    border-radius: 9999px;
    border: 1px solid #bfdbfe;
    margin-left: 0.125rem;
    white-space: nowrap;
}

/* ── Search loading indicator (#1557) ──
   The first explorer search takes seconds against the live DB and the page
   simply sat there with no feedback, so users re-clicked Search. The overlay
   is rendered server-side (localized) and shown by explorer.js the moment a
   search starts; the following navigation tears it down. */
.explorer-loading {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 40;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(1px);
}
.explorer-loading.is-active { display: flex; }
.explorer-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: explorer-spin 0.9s linear infinite;
}
.explorer-loading-text {
    font-size: 13px;
    font-weight: 500;
    color: #4b5563;
    max-width: 260px;
}
@keyframes explorer-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .explorer-loading-spinner { animation-duration: 2.4s; }
}


/* ── Categories page shell ── */
/* The center pane is a fixed-height flex cell with overflow hidden, so the
   page itself must be the scroll container (mirrors .explorer-page). Without
   height:100% + overflow-y:auto the content overflowed and the page couldn't
   scroll. */
.categories-page {
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 24px 64px;
  width: 100%;
}
.categories-page > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* #1557 — real 404 body for an unknown /categories/{slug}. Centred in the
   pane so it reads as a deliberate state, not a broken page. */
.categories-not-found {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 64px;
}
.categories-not-found .empty-state {
  max-width: 460px;
}

/* Card grid: drive columns by available card width, NOT the global
   `@container center` query (which measures the full center pane and forced 4
   squished columns inside this narrower wrapper). minmax keeps cards readable
   so the VALUE / DEADLINE / TIME LEFT row never clips ("Due toda"). */
.category-detail-page .match-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
@media (max-width: 640px) {
  .category-detail-page .match-card-grid { grid-template-columns: 1fr; }
}

/* ── Index hero ── */
.categories-hero { margin-bottom: 28px; }
.categories-hero-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}
.categories-hero-subtitle {
  font-size: 0.95rem;
  color: var(--text-3);
  margin: 0;
  max-width: 640px;
}

/* ── Groups ── */
.category-groups { display: flex; flex-direction: column; gap: 28px; }
.category-group-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin: 0 0 12px;
}
.category-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

/* ── Category tile (index card) ── */
.category-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  min-height: 104px;
}
.category-tile:hover {
  border-color: var(--brand-soft-strong);
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
  transform: translateY(-1px);
}
.category-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--brand-weak);
  color: var(--brand);
  font-size: 16px;
}
.category-tile-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
}
.category-tile-cta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand);
  margin-top: auto;
}
.category-tile-count {
  font-size: 0.78rem;
  color: var(--text-3);
  margin-top: auto;
}

/* ── Detail hero ── */
.category-detail-hero { margin-bottom: 16px; }
.category-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  margin-bottom: 14px;
  transition: color var(--transition-fast);
}
.category-back-link:hover { color: var(--brand); }
.category-detail-heading { display: flex; align-items: center; gap: 14px; }
.category-detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--brand-weak);
  color: var(--brand);
  font-size: 20px;
  flex-shrink: 0;
}
.category-detail-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.02em;
  margin: 0;
}
.category-detail-count { font-size: 0.85rem; color: var(--text-3); margin: 2px 0 0; }

/* ── Country filter ── */
.category-country-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.category-country-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition-fast);
}
.category-country-chip:hover { border-color: var(--brand-soft-strong); color: var(--brand); }
.category-country-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.category-country-chip-label { line-height: 1; }

/* ── Result filters: time left + hide "No" (#1559) ── */
.category-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
}
/* Pico styles <details>/<summary> as an accordion (margin-bottom + its own
   ::after chevron) — neutralize both so the pills sit flush and aligned. */
.category-dd { position: relative; display: inline-flex; margin: 0; }
.category-filter-row .category-dd-toggle,
.category-filter-row .category-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  box-sizing: border-box;
  line-height: 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: all var(--transition-fast);
}
.category-dd-toggle::after { display: none !important; }
.category-dd-toggle::-webkit-details-marker { display: none; }
.category-dd-toggle:hover,
.category-filter-chip:hover { border-color: var(--brand-soft-strong); color: var(--brand); }
.category-dd-toggle i { font-size: 10px; transition: transform var(--transition-fast); }
.category-dd[open] > .category-dd-toggle { border-color: var(--brand); color: var(--brand); }
.category-dd[open] > .category-dd-toggle i { transform: rotate(180deg); }
.category-dd-name { color: var(--text-3); font-weight: 500; }
.category-dd-value { color: var(--text); }
.category-dd-toggle.has-value {
  background: var(--brand-weak);
  border-color: var(--brand);
  color: var(--brand-strong);
}
.category-dd-toggle.has-value .category-dd-name,
.category-dd-toggle.has-value .category-dd-value { color: inherit; }
.category-dd-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 100;
  min-width: 160px;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.category-dd-item {
  display: block;
  padding: 9px 14px;
  font-size: 0.82rem;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast);
}
.category-dd-item:hover { background: var(--surface-muted); }
.category-dd-item.active { color: var(--brand-strong); font-weight: 600; }
.category-filter-chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.category-filter-chip.active:hover { color: #fff; }
.category-filter-chip i { font-size: 11px; }

/* ── Empty state ── */
.category-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 56px 24px;
}
.category-empty-title { font-size: 1.05rem; font-weight: 700; color: var(--text); margin: 6px 0 0; }
.category-empty-subtitle { font-size: 0.9rem; color: var(--text-3); margin: 0; max-width: 420px; }
.category-empty-cta {
  margin-top: 10px;
  padding: 9px 18px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--transition-fast);
}
.category-empty-cta:hover { background: var(--brand-strong); }

/* Mobile */
@media (max-width: 768px) {
  .categories-page { padding: 16px 14px 56px; }
  .category-tile-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .categories-hero-title { font-size: 1.4rem; }
  .category-detail-title { font-size: 1.25rem; }
}


/* === Hero / Welcome section === */
.hero-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 24px;
}

.hero-coverage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 14px;
    color: #6b7280;
}

.hero-covering-label {
    color: #6b7280;
}

.hero-flags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    line-height: 1;
}

.hero-flag {
    cursor: default;
}

.hero-title {
    margin: 40px 0 0 0;
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.5px;
    line-height: 1.15;
}
@media (min-width: 768px) {
    .hero-title { font-size: 48px; }
}

.hero-subtitle {
    margin: 20px 0 0 0;
    font-size: 18px;
    color: #4b5563;
    max-width: 640px;
    line-height: 1.5;
}

.hero-cycle-line {
    margin: 4px 0 0 0;
    font-size: 18px;
    line-height: 1.5;
}

/* Quick-start example prompts */
.hero-prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
    margin-top: 32px;
    width: 100%;
    max-width: 720px;
}
.hero-prompt-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    color: #1f2937;
    font-size: 13.5px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease;
    line-height: 1.35;
}
.hero-prompt-chip:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.12);
}
.hero-prompt-chip:active {
    transform: scale(0.985);
}
/* Debounced: chip group is disabled while a chip click settles */
.hero-prompt-chip:disabled,
.hero-prompt-chip.chip-busy {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.hero-prompt-icon {
    color: #2563eb;
    font-size: 14px;
    flex-shrink: 0;
}
.hero-prompt-label {
    flex: 1;
    min-width: 0;
}

/* Cycling word animation: 500ms fade + translateY */
.cycle-word {
    display: inline-block;
    color: #2563eb;
    font-weight: 600;
    transition: opacity 500ms ease, transform 500ms ease;
}
.cycle-word.fading {
    opacity: 0;
    transform: translateY(-6px);
}

/* Mobile responsive — center-aligned hero overflows the top on phones
   because the full content (coverage + title + subtitle + cycle + 6 chips)
   is taller than a typical mobile viewport. Switch to top-aligned with
   internal scrolling so the user always sees the title first AND can
   scroll down to the chips. Composer stays pinned outside this box. */
@media (max-width: 640px) {
    .hero-section {
        padding: 16px 16px 24px;
        justify-content: flex-start;
        flex: 1 1 auto;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
    }
    /* Hide the country coverage flag strip on mobile — it overflows the
       viewport width and looks broken on phones (ticket #1382). Flags stay
       on desktop where there is room for the full row. */
    .hero-coverage {
        display: none;
    }
    .hero-title {
        margin-top: 16px;
        font-size: 24px;
    }
    .hero-subtitle {
        margin-top: 12px;
        font-size: 15px;
    }
    .hero-cycle-line {
        font-size: 16px;
    }
    .hero-flags-row {
        font-size: 15px;
        gap: 4px;
    }
    .hero-prompt-grid {
        margin-top: 20px;
        gap: 8px;
        grid-template-columns: 1fr;
    }
    .hero-prompt-chip {
        padding: 10px 12px;
        font-size: 13px;
    }
}


/* === Enhanced Composer === */
.chat-input-area {
    border-top: none;
    background: #ffffff;
    padding: 8px 24px 16px;
    flex-shrink: 0;
    width: 100%;
}

.chat-input-area .chat-form,
.chat-input-area > div,
.chat-input-area > p {
    max-width: 896px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.composer-bar {
    position: relative;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 8px 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.composer-bar:hover {
    border-color: #d1d5db;
}
.composer-bar:focus-within {
    border-color: #93c5fd;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.08);
}

.composer-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.composer-upload-btn,
.composer-tools-btn {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
    padding: 0;
}
.composer-upload-btn:hover,
.composer-tools-btn:hover {
    background: #f3f4f6;
    color: #374151;
}

.chat-textarea {
    flex: 1;
    min-width: 0;
    resize: none;
    background: transparent;
    border: 0;
    outline: none;
    font-size: 14px;
    line-height: 1.5;
    color: #111827;
    padding: 8px 0;
    font-family: inherit;
    max-height: 168px;
    overflow-y: auto;
}
.chat-textarea::placeholder {
    color: #9ca3af;
}

/* Send button - blue square inside the bar, same height as other icons */
.send-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px;
    max-width: 36px;
    flex-shrink: 0;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms ease;
    padding: 0;
}
.send-btn:hover {
    background: #1d4ed8;
}
.send-btn svg { width: 14px; height: 14px; }
.send-btn:active {
    background: #1e40af;
}
/* Empty composer: the send button is inert, and it has to LOOK inert
   (#1557 — pressing it used to be a silent no-op). Grey instead of brand
   blue reads as "nothing to send" at a glance. */
.send-btn:disabled {
    background: #e5e7eb;
    color: #9ca3af;
    opacity: 1;
    cursor: not-allowed;
}
.send-btn:disabled:hover {
    background: #e5e7eb;
}

/* Composer pill area */
.composer-pill {
    margin-bottom: 6px;
}
.composer-pill.hidden {
    display: none;
}

/* Attachment area */
.composer-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}
.composer-attachments.hidden {
    display: none;
}

/* Suggestion chips below composer */
.composer-suggestion-chips {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    overflow-x: auto;
    flex-wrap: wrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.composer-suggestion-chips::-webkit-scrollbar {
    display: none;
}
.composer-suggestion-chips:empty {
    display: none;
}
.composer-suggestion-chips.hidden {
    display: none;
}

.composer-suggestion-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border: 1px solid #bfdbfe;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    font-family: inherit;
}
.composer-suggestion-chip:hover {
    background: #eff6ff;
}
/* Debounced: chip group is disabled while a chip click settles */
.composer-suggestion-chip:disabled,
.composer-suggestion-chip.chip-busy {
    opacity: 0.55;
    cursor: default;
    pointer-events: none;
}
.composer-suggestion-chip i,
.composer-suggestion-chip svg {
    font-size: 10px;
    width: 12px;
    height: 12px;
}

/* === Reference pill === */
.ref-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 9999px;
    margin-right: 6px;
}
.ref-pill button {
    background: none;
    border: none;
    color: #1d4ed8;
    opacity: 0.7;
    font-size: 10px;
    cursor: pointer;
    padding: 0 2px;
}
.ref-pill button:hover {
    opacity: 1;
}

/* === Attachment chips === */
.attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 6px 8px 6px 10px;
    font-size: 12px;
    color: #374151;
    max-width: 224px;
}
.attachment-chip .att-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.attachment-chip button {
    color: #9ca3af;
    opacity: 0.85;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: none;
    border: none;
    cursor: pointer;
}
.attachment-chip button:hover {
    color: #ef4444;
    background: #fee2e2;
}

/* === User-message attachment chips (shown on the user bubble) === */
.user-msg-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    justify-content: flex-end;
}
.user-msg-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #1e40af;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-msg-attachment-chip i {
    font-size: 11px;
    color: #2563eb;
    flex-shrink: 0;
}
.user-msg-attachment-size {
    font-size: 10px;
    color: #6b7280;
}

/* === Drag-and-drop overlay === */
#chat-dropzone {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(239, 246, 255, 0.92);
    backdrop-filter: blur(2px);
    pointer-events: none;
    padding: 24px;
}
#chat-dropzone.active {
    display: flex;
}
#chat-dropzone .dropzone-card {
    border: 2px dashed #60a5fa;
    border-radius: 16px;
    padding: 32px 40px;
    background: white;
    text-align: center;
    color: #1d4ed8;
    box-shadow: 0 10px 30px -10px rgba(37, 99, 235, 0.25);
}
#chat-dropzone .dropzone-card svg {
    margin-bottom: 8px;
}
#chat-dropzone .dropzone-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}
#chat-dropzone .dropzone-subtitle {
    font-size: 12px;
    color: #2563eb;
    margin: 4px 0 0 0;
}

/* === Thin scrollbar utility === */
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 640px) {
    .chat-input-area {
        /* Respect the iOS/Android safe area + Chrome's bottom toolbar so
           the suggestion chips and composer stay above the browser UI on
           mobile. The fallback is the original 12px padding. */
        padding: 12px 8px max(16px, env(safe-area-inset-bottom));
    }
    .composer-bar {
        padding: 6px 8px;
    }
    .composer-input-row {
        gap: 4px;
        flex-wrap: nowrap;  /* keep textarea on the same row as buttons so it stretches */
    }
    .composer-upload-btn,
    .composer-tools-btn {
        /* Slimmer side buttons on small screens so the textarea gets more width */
        width: 32px;
        height: 32px;
    }
    .send-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px;
        max-width: 32px;
    }
    .chat-textarea {
        font-size: 16px;  /* prevents iOS auto-zoom on focus */
        padding: 6px 0;
    }
    .composer-suggestion-chips {
        /* On phones, single horizontal scroll row keeps the composer
           compact — three chips stacked would eat ~150px of the viewport
           and push the hero out of view. */
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        padding-bottom: 4px;
        margin-top: 8px;
        -webkit-overflow-scrolling: touch;
    }
    .composer-suggestion-chip {
        font-size: 11px;
        padding: 5px 10px;
        white-space: nowrap;
    }
}


/* === Tools Menu Popover === */
.tools-menu {
    position: absolute;
    right: 8px;
    bottom: 100%;
    margin-bottom: 8px;
    width: 224px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 6px 0;
    z-index: 20;
    font-size: 14px;
}

.tools-menu.hidden {
    display: none;
}

.tools-menu-header {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.tools-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    color: #374151;
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    transition: background 100ms ease;
    text-align: left;
}

.tools-menu-item:hover {
    background: #f9fafb;
}

.tools-menu-icon {
    color: #2563eb;
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}

/* Tender-only tools are hidden by default */
.tools-menu-tender-only {
    display: none;
}
.tools-menu.tender-mode .tools-menu-tender-only {
    display: flex;
}

@media (max-width: 640px) {
    .tools-menu {
        width: 200px;
        right: 4px;
    }
}


/* ══════════════════════════════════════════
   CALENDAR PAGE LAYOUT
   ══════════════════════════════════════════ */
.cal-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 24px;
  overflow: hidden;
}
.cal-page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}
.cal-page-subtitle {
  font-size: 13px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.cal-body {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 16px;
  /* Anchors the day-detail panel when it switches to an overlay on narrow
     viewports (#1557). */
  position: relative;
}
.cal-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
}

/* ══════════════════════════════════════════
   HEADER NAV
   ══════════════════════════════════════════ */
.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 12px;
  flex-wrap: wrap;
}
.cal-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cal-header-month {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-left: 4px;
}
.cal-nav-btn {
  width: 32px;
  height: 32px;
  font-size: 12px;
}

/* View toggle */
.cal-view-toggle {
  display: flex;
  align-items: center;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.cal-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  height: 32px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms, color 150ms;
  border-right: 1px solid var(--border);
}
.cal-view-btn:last-child { border-right: none; }
.cal-view-btn:hover { color: var(--text-2); background: var(--border); }
.cal-view-btn-active {
  background: var(--surface);
  color: var(--brand);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* ══════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════ */
.cal-filter-bar {
  padding: 0 0 8px;
}
.cal-filter-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Search input */
.cal-filter-search {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  height: 32px;
  min-width: 240px;
  flex: 0 1 400px;
  cursor: text;
  margin: 0;
}
.cal-filter-input {
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 12px;
  color: var(--text);
  padding: 0 !important;
  margin: 0 !important;
  height: 30px !important;
  min-height: 0 !important;
  flex: 1;
}
.cal-filter-input::placeholder { color: var(--text-3); }

/* Chips */
.cal-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
  height: 32px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms, border-color 150ms, color 150ms;
  margin: 0;
}
.cal-chip:hover { border-color: var(--border-strong); color: var(--text); }
.cal-chip.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.cal-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cal-chip-dot-submission { background: #2563eb; }
.cal-chip-dot-questions { background: #f59e0b; }

/* Dropdown filters */
.cal-filter-group { position: relative; }
.cal-chip-dropdown { padding-right: 6px; }
.cal-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-height: 280px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  margin-top: 4px;
  display: none;
  flex-direction: column;
}
.cal-dropdown.open { display: flex; }
.cal-dd-search-wrap { padding: 8px 8px 4px; }
.cal-dd-search {
  width: 100% !important;
  height: 30px !important;
  min-height: 0 !important;
  font-size: 12px !important;
  padding: 0 8px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface-muted) !important;
  margin: 0 !important;
}
.cal-dd-list {
  overflow-y: auto;
  max-height: 180px;
  padding: 0 4px;
}
.cal-dd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  transition: background 100ms;
}
.cal-dd-row:hover { background: var(--surface-muted); }
.cal-dd-check { width: 14px; height: 14px; flex-shrink: 0; margin: 0 !important; }
.cal-dd-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-dd-cpv { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.cal-dd-footer {
  padding: 6px 8px;
  border-top: 1px solid var(--border);
}
.cal-dd-action {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
}
.cal-dd-action:hover { color: var(--brand); }

/* Active filter chips */
.cal-active-chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  min-height: 0;
  margin-top: 12px;
}
.cal-active-chips:empty { display: none; }
.cal-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #1d4ed8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  line-height: 1.4;
}
.cal-active-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: #60a5fa;
  padding: 0;
  line-height: 1;
}
.cal-active-chip-x:hover { color: #1d4ed8; }
.cal-chip-clear-all {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
}
.cal-chip-clear-all:hover { color: var(--text); }

/* ══════════════════════════════════════════
   LEGEND
   ══════════════════════════════════════════ */
.cal-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 0 10px;
}
.cal-legend-item { display: flex; align-items: center; gap: 5px; }
.cal-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.cal-legend-submission { background: #2563eb; }
.cal-legend-questions { background: #f59e0b; }
.cal-legend-saved { background: #0ea5e9; }
.cal-legend-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════
   MONTH VIEW — Calendar Grid
   ══════════════════════════════════════════ */
.cal-grid {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.cal-grid-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
.cal-day-name {
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cal-week-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border);
}
.cal-week-row:last-child { border-bottom: none; }

/* Day cells — clean white, no heavy backgrounds */
.cal-day-cell {
  min-height: 82px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid var(--border);
  color: inherit;
  transition: background 150ms;
  cursor: default;
  background: transparent !important;
  text-decoration: none !important;
}
.cal-day-cell:last-child { border-right: none; }
.cal-day-cell:hover { background: var(--surface-muted) !important; }
.cal-day-empty { background: var(--surface-muted) !important; }
.cal-day-empty:hover { background: var(--surface-muted) !important; }
.cal-day-has-deadlines { cursor: pointer; }
.cal-day-has-deadlines:hover { background: #f0f4ff !important; }
.cal-day-filtered-out { opacity: 0.35; }

.cal-day-top { display: flex; align-items: center; justify-content: space-between; }
.cal-day-number { font-size: 13px; font-weight: 500; color: var(--text-2); line-height: 1; }
.cal-day-count {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-3);
  background: var(--surface-muted);
  border-radius: 8px;
  padding: 1px 5px;
  line-height: 1.4;
}
.cal-day-today .cal-day-number {
  background: var(--brand);
  color: #fff;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.cal-day-selected {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-radius: 4px;
  background: #f0f4ff !important;
}

/* Deadline type indicators */
.cal-day-indicators {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}
.cal-type-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 4px;
  width: fit-content;
}
.cal-type-dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}
.cal-type-dot.cal-type-submission { background: #2563eb; }
.cal-type-pill-submission { color: #1e40af; background: #eff6ff; }
.cal-type-dot.cal-type-questions { background: #f59e0b; }
.cal-type-pill-questions { color: #92400e; background: #fffbeb; }
.cal-type-pill-saved { color: #0369a1; background: #f0f9ff; font-size: 10px; }

/* ══════════════════════════════════════════
   DETAIL PANEL (right side)
   ══════════════════════════════════════════ */
/* #1557 — the panel used to be a plain flex sibling of the month grid: in a
   narrow center pane (sidebar + canvas open, or a small laptop) it collapsed
   to ~130px, the date wrapped onto three lines and every tender title was
   clipped mid-word. It is now width-locked (`flex: 0 0 <w>`, explicit
   min-width so it can never be squeezed by the grid) and, below 1100px where
   a side-by-side split stops fitting, it floats over the grid instead of
   stealing width from it. */
.cal-detail-panel {
  width: 0;
  min-width: 0;
  overflow: hidden;
  background: var(--surface);
  border-left: none;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  transition: width 250ms ease;
}
.cal-detail-panel.open {
  width: 340px;
  min-width: 340px;
  max-width: 100%;
}

.cal-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cal-detail-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-detail-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--text-3);
  border-radius: var(--radius-sm);
  transition: background 100ms;
}
.cal-detail-close:hover { background: var(--surface-muted); color: var(--text); }

.cal-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: var(--text-3);
  font-size: 13px;
  text-align: center;
}

.cal-detail-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  align-items: flex-start;
}
.cal-detail-item:hover { background: var(--surface-muted); border-color: var(--border-strong); }
.cal-detail-item-body { flex: 1; min-width: 0; }
.cal-detail-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 4px;
  /* Long single-token procurement names ("Purchase-of-…") used to be cut
     mid-character instead of wrapping (#1557). */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.cal-detail-saved-icon { color: #0ea5e9; font-size: 10px; flex-shrink: 0; }
.cal-detail-item-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-detail-item-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.cal-detail-item-value { font-size: 12px; font-weight: 600; color: var(--text); }
.cal-detail-item-cpv {
  font-size: 10px;
  font-family: var(--font-mono, monospace);
  color: var(--text-3);
  background: var(--surface-muted);
  padding: 1px 4px;
  border-radius: 3px;
}

/* ══════════════════════════════════════════
   WEEK VIEW
   ══════════════════════════════════════════ */
.cal-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 12px;
  gap: 8px;
}
.cal-week-nav-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cal-week-nav-btn:hover { color: var(--brand); }
.cal-week-range { font-size: 14px; font-weight: 600; color: var(--text); }

.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-week-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.cal-week-col-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

.cal-week-day-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-muted);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.cal-week-day-today { background: #eff6ff; }
.cal-week-day-name { font-size: 11px; font-weight: 600; color: var(--text-3); text-transform: uppercase; }
.cal-week-day-num { font-size: 16px; font-weight: 700; color: var(--text); }
.cal-week-day-today .cal-week-day-num { color: var(--brand); }
.cal-week-day-month { font-size: 10px; color: var(--text-3); text-transform: uppercase; }

.cal-week-day-body {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.cal-week-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms;
}
.cal-week-item:hover { background: var(--surface-muted); }
.cal-week-type-badge {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  margin-top: 1px;
}
.cal-week-type-submission { background: #dbeafe; color: #1e40af; }
.cal-week-type-questions { background: #fef3c7; color: #92400e; }

.cal-week-item-info { min-width: 0; flex: 1; }
.cal-week-item-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cal-week-item-authority {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-week-empty { font-size: 11px; color: var(--text-3); padding: 12px 0; text-align: center; }

/* ══════════════════════════════════════════
   YEAR VIEW
   ══════════════════════════════════════════ */
.cal-year-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cal-year-month { display: flex; flex-direction: column; gap: 6px; }
.cal-year-month-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  padding: 4px 0;
}
.cal-year-month-title:hover { color: var(--brand); }
.cal-year-day-header { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-year-day-letter { font-size: 9px; font-weight: 600; color: var(--text-3); text-align: center; padding: 2px 0; text-transform: uppercase; }
.cal-year-grid { display: flex; flex-direction: column; }
.cal-year-week { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-year-cell {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-2);
  text-align: center;
  padding: 3px 0;
  border-radius: 3px;
  cursor: default;
}
.cal-year-cell-empty { visibility: hidden; }
.cal-year-cell-today { font-weight: 700; color: var(--brand); outline: 1.5px solid var(--brand); outline-offset: -1px; border-radius: 50%; }
.cal-year-cell-submission { background: #dbeafe; color: #1e40af; font-weight: 600; cursor: pointer; }
.cal-year-cell-questions { background: #fef3c7; color: #92400e; font-weight: 600; cursor: pointer; }
.cal-year-cell-both { background: linear-gradient(135deg, #dbeafe 50%, #fef3c7 50%); color: #1e40af; font-weight: 600; cursor: pointer; }
.cal-year-cell-filtered-out { opacity: 0.3; background: none; color: inherit; font-weight: 400; cursor: default; }

/* ══════════════════════════════════════════
   DEADLINE LIST & ITEMS
   ══════════════════════════════════════════ */
.cal-deadline-list { display: flex; flex-direction: column; gap: 16px; }
.cal-group { display: flex; flex-direction: column; gap: 6px; }
.cal-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.cal-group-date { font-size: 14px; font-weight: 600; color: var(--text); }
.cal-group-count { font-size: 12px; color: var(--text-3); }

.cal-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.cal-item:hover { background: var(--surface-muted); border-color: var(--border-strong); }
.cal-item-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.cal-item-flag { flex-shrink: 0; }
.cal-item-info { min-width: 0; flex: 1; }
.cal-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-item-authority {
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.cal-item-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cal-item-value { font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }

/* ══════════════════════════════════════════
   MISC
   ══════════════════════════════════════════ */
.cal-selected-date-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--brand-weak);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.cal-selected-date-label { font-size: 13px; font-weight: 500; color: var(--brand-strong); }
.cal-clear-date { font-size: 12px; color: var(--brand); text-decoration: none; font-weight: 500; }
.cal-clear-date:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   MOBILE BOTTOM SHEET
   ══════════════════════════════════════════ */
.cal-bottom-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
}
.cal-bottom-sheet.open { display: flex; flex-direction: column; justify-content: flex-end; }
.cal-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.cal-sheet-content {
  position: relative;
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.12);
}
.cal-sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  margin: 10px auto 0;
  flex-shrink: 0;
}
.cal-sheet-content .cal-detail-header { border-bottom: 1px solid var(--border); padding: 12px 16px 10px; }
.cal-sheet-content .cal-detail-body { overflow-y: auto; padding: 12px 16px; }

/* Hide bottom sheet on desktop */
@media (min-width: 641px) {
  .cal-bottom-sheet { display: none !important; }
}

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
/* #1557 — below 1100px a 340px panel plus a readable month grid no longer
   fit side by side, so the panel floats above the grid (full height of the
   calendar body, its own shadow) instead of squeezing it. It keeps a real
   min-width at every step down to the phone breakpoint, where the bottom
   sheet takes over. */
@media (max-width: 1100px) {
  .cal-detail-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
  }
  .cal-detail-panel.open {
    width: min(340px, calc(100% - 24px));
    min-width: min(300px, 100%);
    border-left: 1px solid var(--border);
    border-radius: var(--radius-md, 10px) 0 0 var(--radius-md, 10px);
    box-shadow: -8px 0 24px -12px rgba(15, 23, 42, 0.28);
  }
}

@media (max-width: 900px) {
  .cal-year-container { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cal-week-grid { grid-template-columns: 1fr; gap: 6px; }
  .cal-week-col { min-height: auto; }
}

@media (max-width: 640px) {
  .cal-page { padding: 12px 12px; }
  .cal-header { padding: 8px 0 4px; }
  .cal-header-month { font-size: 15px; }
  .cal-page-title { font-size: 17px; }
  .cal-year-container { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .cal-day-cell { min-height: 56px; padding: 4px 4px; }
  .cal-day-name { font-size: 10px; padding: 6px 2px; }
  .cal-day-number { font-size: 12px; }
  .cal-day-today .cal-day-number { width: 20px; height: 20px; font-size: 11px; }
  .cal-type-pill { font-size: 9px; padding: 1px 3px; }
  .cal-type-dot { width: 5px; height: 5px; }
  .cal-day-count { font-size: 9px; padding: 0 3px; }
  .cal-item { padding: 8px 10px; }
  .cal-item-title { font-size: 12px; }
  .cal-item-value { display: none; }
  .cal-view-btn { padding: 0 8px; font-size: 11px; }
  .cal-legend { gap: 10px; }

  .cal-filter-search { width: 100%; flex: 1 1 100%; min-width: 0; }

  /* Hide side panel on mobile, use bottom sheet instead */
  .cal-detail-panel { display: none !important; }
}

@media (max-width: 480px) {
  /* Two-column year overview on phones */
  .cal-year-container { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}


/* === Settings Page Root (flex child of center-pane) === */
.settings-page-root {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* === Settings Scroll Wrapper (fills remaining space, enables scroll) === */
.settings-scroll-wrapper {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}
.settings-scroll-wrapper::-webkit-scrollbar { width: 6px; }
.settings-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* === Settings Page Container === */
.settings-container { max-width: 820px; margin: 0 auto; padding: 24px; overflow-x: hidden; }
.settings-header { margin-bottom: 24px; }
.settings-header h1 { font-size: 22px; font-weight: 700; color: var(--text); }
.settings-header p { font-size: 13px; color: var(--text-3); margin-top: 4px; }

/* === Tab Navigation === */
.settings-tabs {
    border-bottom: 1px solid var(--border);
    margin-bottom: 24px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tabs-inner { display: flex; gap: 0; min-width: max-content; }
.settings-tab {
    display: flex; align-items: center; gap: 6px;
    padding: 12px 16px; font-size: 13px; font-weight: 500;
    color: var(--text-3); text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap; cursor: pointer;
}
.settings-tab:hover { color: var(--text-2); }
.settings-tab-active { color: var(--brand); border-bottom-color: var(--brand); }
.settings-tab-icon { font-size: 13px; width: 16px; text-align: center; }

.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }

/* === Section within a tab === */
.stg-section { margin-bottom: 20px; min-width: 0; overflow: hidden; }
.stg-section:last-child { margin-bottom: 0; }
.stg-section-title {
    font-size: 14px; font-weight: 600; color: var(--text);
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.stg-section-title i { color: var(--text-3); font-size: 13px; }
.stg-section-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }

/* === Form Elements === */
.stg-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.stg-form-grid-full { grid-column: 1 / -1; }
.stg-form-group { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stg-form-label { font-size: 12px; font-weight: 500; color: var(--text-3); }
.stg-form-input, .stg-form-select, .stg-form-textarea {
    font-family: var(--font-family); font-size: 13px; color: var(--text);
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 6px 10px !important;
    margin: 0 !important;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline: none; width: 100%; max-width: 100%; min-width: 0;
    line-height: 1.4; box-sizing: border-box;
}
.stg-form-input, .stg-form-select { height: auto !important; }
.stg-form-input:focus, .stg-form-select:focus, .stg-form-textarea:focus {
    border-color: var(--brand); box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.stg-form-input-readonly {
    background: var(--surface-muted); color: var(--text-3); cursor: not-allowed;
}
/* Allow vertical drag-resize. The shared rule above intentionally omits
   `height: auto !important` for textareas so the user's drag can take
   effect — that flag was killing the resize handle. */
.stg-form-textarea { resize: vertical; min-height: 80px; line-height: 1.5; }
.stg-form-select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; padding-right: 28px !important;
}
.stg-form-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* === Toggle Switch === */
.stg-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.stg-toggle-row:last-child { border-bottom: none; }
.stg-toggle-label { font-size: 13px; color: var(--text-2); }
.stg-toggle-sublabel { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.stg-toggle {
    position: relative !important; display: inline-block !important;
    width: 36px !important; min-width: 36px !important; height: 20px !important;
    flex-shrink: 0; margin: 0 !important; padding: 0 !important;
}
.stg-toggle input {
    opacity: 0 !important; width: 0 !important; height: 0 !important;
    position: absolute !important; margin: 0 !important; padding: 0 !important;
}
.stg-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: var(--border-strong); border-radius: 10px;
    transition: background var(--transition-fast);
}
.stg-toggle-slider::before {
    content: '' !important; position: absolute !important; left: 2px; top: 2px;
    width: 16px !important; height: 16px !important; background: #fff !important;
    border-radius: 50% !important; transition: transform var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); transform: none;
}
.stg-toggle input:checked + .stg-toggle-slider { background: var(--brand); }
.stg-toggle input:checked + .stg-toggle-slider::before { transform: translateX(16px) !important; }

/* === Bid-profile "from company profile" key/value rows === */
.bp-kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.bp-kv-k { font-size: 12px; color: var(--text-3); }
.bp-kv-v { font-size: 13px; color: var(--text); font-weight: 500; text-align: right; }
@media (max-width: 480px) {
  .bp-kv { flex-direction: column; align-items: flex-start; gap: 2px; }
  .bp-kv-v { text-align: left; }
}

/* === Progress Bar === */
.stg-progress-bar-wrapper { width: 100%; }
.stg-progress-bar-track {
    width: 100%; height: 8px; background: var(--panel);
    border-radius: 4px; overflow: hidden;
}
.stg-progress-bar-fill {
    height: 100%; border-radius: 4px;
    transition: width 0.4s ease;
}
.stg-progress-bar-fill-brand { background: var(--brand); }
.stg-progress-bar-fill-green { background: var(--green); }
.stg-progress-bar-fill-amber { background: var(--amber); }
.stg-progress-bar-label {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 12px; color: var(--text-3); margin-bottom: 6px;
}
.stg-progress-bar-label strong { color: var(--text); font-weight: 600; }

/* === Profile tag fields (reuse explorer-tag-container CSS) === */
.stg-form-group .explorer-tag-container {
    min-height: 38px;
    padding: 4px 8px;
    max-width: 100%; min-width: 0; box-sizing: border-box;
    flex-wrap: wrap;
}
.stg-form-group .explorer-tag-container .explorer-tag-input {
    font-size: 12px !important;
}
.stg-form-group .explorer-field-cpv {
    position: relative;
    min-width: 0; max-width: 100%;
}
.stg-form-group .explorer-field-cpv .explorer-tag-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}
.stg-form-group .explorer-field-cpv .explorer-tag-container::-webkit-scrollbar {
    display: none;
}
@media (max-width: 640px) {
    .stg-form-group .explorer-field-cpv .explorer-tag-container {
        flex-wrap: wrap !important;
        overflow-x: visible;
    }
}

/* === Checkbox Grid === */
.stg-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.stg-checkbox-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-2); cursor: pointer;
    white-space: nowrap;
}
.stg-checkbox-item input[type="checkbox"] {
    width: 14px !important; height: 14px !important; min-width: 14px;
    accent-color: var(--brand); cursor: pointer;
    margin: 0 !important; padding: 0 !important;
    flex-shrink: 0;
}

/* === Sub-tabs === */
.stg-sub-tabs {
    display: flex; gap: 0; margin-bottom: 20px;
}
.stg-sub-tab {
    padding: 8px 14px; font-size: 12px; font-weight: 500;
    color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent;
    text-decoration: none !important;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.stg-sub-tab:hover { color: var(--text-2); }
.stg-sub-tab-active { color: var(--brand); border-bottom-color: var(--brand); }
.stg-sub-content { display: none; }
.stg-sub-content.active { display: block; }

/* === File Upload Zone === */
.stg-upload-zone {
    border: 2px dashed var(--border); border-radius: var(--radius-md);
    padding: 32px 20px; text-align: center; cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.stg-upload-zone:hover { border-color: var(--brand); background: var(--brand-weak); }
.stg-upload-zone-icon { font-size: 28px; color: var(--text-muted); margin-bottom: 8px; }
.stg-upload-zone-text { font-size: 13px; color: var(--text-3); }
.stg-upload-zone-text strong { color: var(--brand); }
.stg-upload-zone-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* === File List === */
.stg-file-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
}
.stg-file-item:last-child { border-bottom: none; }
.stg-file-icon {
    width: 32px; height: 32px; border-radius: var(--radius-xs);
    background: var(--red-bg); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stg-file-icon i { font-size: 14px; color: var(--red); }
.stg-file-icon-blue { background: var(--brand-weak); }
.stg-file-icon-blue i { color: var(--brand); }
.stg-file-info { flex: 1; min-width: 0; }
.stg-file-name { font-size: 13px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stg-file-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.stg-file-actions { display: flex; gap: 4px; }

/* === Knowledge Base: deep-matching controls (kind + use-for-matching) === */
.stg-kb-row {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px;
}
.stg-kb-select {
    font: inherit; font-size: 11px; color: var(--text); background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-xs);
    padding: 2px 6px; max-width: 100%;
}
.stg-kb-chip {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
    padding: 2px 7px; border-radius: 999px; white-space: nowrap;
    background: var(--surface-muted); color: var(--text-3); border: 1px solid var(--border);
}
.stg-kb-chip-ok { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.stg-kb-chip-wait { background: var(--brand-weak); color: var(--brand-strong); border-color: var(--brand-soft); }
.stg-kb-chip-bad { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.stg-kb-toggle {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; color: var(--text-3); cursor: pointer; user-select: none;
}
.stg-kb-toggle input { margin: 0; accent-color: var(--brand); }
@media (max-width: 640px) {
    .stg-file-item { align-items: flex-start; }
    .stg-kb-row { gap: 6px; }
    .stg-kb-select { max-width: 150px; }
}

/* === Facts from your documents (deep matching, Phase 1) === */
.stg-fact { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0;
    border-bottom: 1px solid rgba(0,0,0,0.04); }
.stg-fact:last-child { border-bottom: none; }
.stg-fact-main { flex: 1; min-width: 0; }
.stg-fact-label { font-size: 12.5px; font-weight: 500; color: var(--text); }
.stg-fact-detail { font-size: 11px; color: var(--text-3); margin-top: 2px;
    overflow-wrap: anywhere; }
.stg-fact-src { font-size: 10.5px; color: var(--text-muted); margin-top: 2px; }
.stg-fact-actions { display: flex; gap: 4px; flex-shrink: 0; }
.stg-fact-btn {
    font: inherit; font-size: 11px; line-height: 1; cursor: pointer;
    padding: 5px 8px; border-radius: var(--radius-xs);
    border: 1px solid var(--border); background: var(--surface); color: var(--text-3);
}
.stg-fact-btn:hover { border-color: var(--brand); color: var(--brand); }
.stg-fact-btn.on-yes { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.stg-fact-btn.on-no { background: var(--red-bg); border-color: var(--red); color: var(--red); }
.stg-fact-group-h {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted); margin: 14px 0 2px;
}
.stg-db-chip {
    font: inherit; font-size: 11.5px; cursor: pointer; text-align: left;
    padding: 5px 10px; border-radius: 999px; margin: 0 6px 6px 0;
    border: 1px dashed var(--brand-soft); background: var(--brand-weak);
    color: var(--brand-strong);
}
.stg-db-chip:hover { border-style: solid; }
.stg-db-chip[disabled] { opacity: .55; cursor: default; border-style: solid; }

/* === Mobile show/hide helpers === */
.stg-mobile-subtitle { display: none; font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* === Data Table === */
.stg-data-table { width: 100%; border-collapse: collapse; }
.stg-data-table th {
    text-align: left; font-size: 11px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em;
    padding: 8px 12px; border-bottom: 1px solid var(--border);
}
.stg-data-table td {
    font-size: 13px; color: var(--text); padding: 12px;
    border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle;
}
.stg-data-table tr:last-child td { border-bottom: none; }
.stg-data-table-member { display: flex; align-items: center; gap: 10px; }
.stg-data-table-member-info { min-width: 0; }
.stg-data-table-member-name { font-size: 13px; font-weight: 500; color: var(--text); }
.stg-data-table-member-email { font-size: 11px; color: var(--text-3); }

/* Scrollable table wrapper (#1557). The team table used to sit in a bare
   `overflow-x:auto` div with a hidden scrollbar, so STATUS/ACTIONS simply
   vanished off the right edge with nothing telling the user to swipe. Here
   the scrollbar is deliberately VISIBLE, and the wrapper is focusable so it
   can also be scrolled from the keyboard. */
.stg-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.stg-table-scroll::-webkit-scrollbar { height: 6px; }
.stg-table-scroll::-webkit-scrollbar-track { background: transparent; }
.stg-table-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.16); border-radius: 3px;
}
.stg-table-scroll:focus-visible {
    outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px;
}

/* === Billing history (#1579) === */
.stg-billing-loading, .stg-billing-error, .stg-billing-empty {
    font-size: 13px; color: var(--text-3);
}
.stg-billing-loading { display: flex; align-items: center; gap: 6px; padding: 6px 0; }
.stg-billing-error {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 12px; background: #fffbeb; border: 1px solid #fde68a;
    border-radius: 8px; color: #92400e;
}
.stg-billing-empty { text-align: center; padding: 18px 8px; }
/* Description takes every spare pixel; the other columns hug their content. */
.stg-billing-table th:not(.stg-billing-th-desc),
.stg-billing-table td:not(.stg-cell-primary) { white-space: nowrap; width: 1%; }
.stg-billing-table th.stg-billing-th-desc, .stg-billing-table td.stg-cell-primary { width: auto; }
.stg-billing-desc { font-size: 13px; font-weight: 500; color: var(--text); }
.stg-billing-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; }
.stg-billing-amount { text-align: right; white-space: nowrap; }
.stg-billing-links { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; }
.stg-billing-links a { text-decoration: none; white-space: nowrap; }
.stg-billing-scope {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border);
    font-size: 11px; color: var(--text-muted);
}

/* === Stat Cards Row === */
.stg-stats-row { display: flex; gap: 12px; margin-bottom: 20px; }
.stg-stat-card {
    flex: 1; background: var(--surface-muted); border-radius: var(--radius-sm);
    padding: 14px 16px; border: 1px solid var(--border);
}
.stg-stat-card-value { font-size: 20px; font-weight: 700; color: var(--text); line-height: 1.2; }
.stg-stat-card-label { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* === Plan Card === */
.stg-plan-overview {
    display: flex; align-items: flex-start; gap: 20px;
    padding: 20px; background: linear-gradient(135deg, var(--brand-weak) 0%, #f0f4ff 100%);
    border: 1px solid var(--brand-soft); border-radius: var(--radius-md); margin-bottom: 20px;
}
.stg-plan-icon {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: var(--brand); display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stg-plan-icon i { color: #fff; font-size: 18px; }
.stg-plan-details { flex: 1; }
.stg-plan-name { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
.stg-plan-name .badge { margin-left: 8px; vertical-align: middle; }
.stg-plan-price { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.stg-plan-price strong { color: var(--text); font-weight: 600; font-size: 18px; }
.stg-plan-meta { font-size: 12px; color: var(--text-3); margin-top: 8px; display: flex; gap: 16px; }
.stg-plan-meta-item { display: flex; align-items: center; gap: 4px; }
.stg-plan-meta-item i { font-size: 11px; }

/* === Referral Banner === */
.stg-referral-banner {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #bfdbfe; border-radius: var(--radius-md);
    padding: 20px; display: flex; align-items: flex-start; gap: 16px;
}
.stg-referral-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: #2563eb; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stg-referral-icon i { color: #fff; font-size: 16px; }
.stg-referral-info { flex: 1; }
.stg-referral-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.stg-referral-desc { font-size: 12px; color: var(--text-3); margin-bottom: 12px; line-height: 1.5; }
.stg-referral-link-box { display: flex; gap: 8px; align-items: center; }
.stg-referral-link-input {
    flex: 1; font-family: var(--font-family); font-size: 12px; color: var(--text-3);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 6px 10px !important; margin: 0 !important; height: auto !important; outline: none;
}
.stg-referral-stats { display: flex; gap: 16px; margin-top: 12px; }
.stg-referral-stat { font-size: 12px; color: var(--text-3); }
.stg-referral-stat strong { color: var(--text); }

/* === TaaS Section === */
.stg-taas-status-card {
    display: flex; align-items: center; gap: 16px;
    padding: 20px; background: var(--surface-muted);
    border: 1px solid var(--border); border-radius: var(--radius-md);
}
.stg-taas-icon {
    width: 44px; height: 44px; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, #059669, #10b981);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stg-taas-icon i { color: #fff; font-size: 18px; }
.stg-taas-info { flex: 1; }
.stg-taas-title { font-size: 14px; font-weight: 600; color: var(--text); }
.stg-taas-desc { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* === Settings Card (matches .card from shared but adds padding variants) === */
.stg-card {
    background: var(--surface); border-radius: var(--radius-md);
    border: 1px solid var(--border); overflow: hidden;
    box-shadow: var(--shadow-card);
    min-width: 0; max-width: 100%; box-sizing: border-box;
}
.stg-card-pad { padding: 20px; }
.stg-card-pad-lg { padding: 24px; }

/* === Settings Modal === */
.stg-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 20px;
}
.stg-modal-overlay.active { display: flex; }
.stg-modal {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15); width: 100%; max-width: 440px;
    overflow: hidden;
}
.stg-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px 0; margin-bottom: 16px;
}
.stg-modal-title { font-size: 16px; font-weight: 600; color: var(--text); }
.stg-modal-close {
    width: 28px; height: 28px; border-radius: 50%; border: none;
    background: var(--panel); cursor: pointer; display: flex;
    align-items: center; justify-content: center; color: var(--text-3);
    transition: background var(--transition-fast);
}
.stg-modal-close:hover { background: var(--border); }
.stg-modal-body { padding: 0 24px 24px; }
.stg-modal-footer {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 16px 24px; border-top: 1px solid var(--border); background: var(--surface-muted);
}

/* === Extra button variants === */
.btn-xs { font-size: 11px; padding: 4px 10px; }
.btn-danger-outline { background: var(--surface); color: var(--red); border-color: var(--red-bg); }
.btn-danger-outline:hover { background: var(--red-bg); }

/* === Extra badge variants === */
.badge-purple { background: #eff6ff; color: #2563eb; }

/* === Responsive row helper — stacks on mobile === */
.stg-responsive-row {
    display: flex; align-items: center; justify-content: space-between;
}

/* === Responsive — Tablet === */
@media (max-width: 768px) {
    .settings-container { padding: 20px; }
    .stg-form-grid { grid-template-columns: minmax(0, 1fr); }
    .stg-stats-row { flex-wrap: wrap; }
    .stg-stats-row .stg-stat-card { flex: 1 1 calc(50% - 6px); min-width: 120px; }
    .stg-plan-meta { flex-wrap: wrap; }
}

/* === Responsive — Mobile === */
@media (max-width: 640px) {
    .settings-container { padding: 16px; }
    /* #1557 M28: the labels used to be hidden here, leaving six unlabelled
       glyphs with no accessible name. The strip already scrolls horizontally,
       so keep the text and just tighten it. */
    .settings-tab { padding: 10px 10px; font-size: 12px; gap: 5px; }
    .settings-tab-icon { font-size: 13px; }
    .stg-stats-row { flex-direction: column; }
    .stg-stats-row .stg-stat-card { flex: none; }
    .stg-plan-overview { flex-direction: column; gap: 12px; }
    .stg-plan-meta { flex-direction: column; gap: 6px; }
    .stg-referral-link-box { flex-direction: column; }
    .stg-referral-stats { flex-direction: column; gap: 4px; }
    .stg-hide-mobile { display: none !important; }
    .stg-mobile-subtitle { display: block !important; }
    .stg-checkbox-grid { grid-template-columns: 1fr 1fr; }
    .stg-taas-status-card { flex-direction: column; text-align: center; }
    .stg-taas-status-card .stg-taas-icon { align-self: center; }
    .stg-card-pad-lg { padding: 16px; }
    .settings-container { padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)); }
    .stg-upload-zone { padding: 24px 16px; }
    .stg-modal { max-width: 100%; }
    .stg-modal-overlay { padding: 12px; }
    .stg-responsive-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
    .stg-data-table td { padding: 10px 8px; font-size: 12px; }
    .stg-data-table th { padding: 6px 8px; font-size: 10px; }
    /* #1557: stack `.stg-data-table-stack` into one block per row at phone
       widths. The header row is dropped and every cell prints its own column
       name from data-label, so STATUS and ACTIONS are fully visible at 375px
       with zero horizontal scrolling. */
    .stg-data-table-stack thead { display: none; }
    .stg-data-table-stack tbody, .stg-data-table-stack tr { display: block; }
    .stg-data-table-stack tr {
        padding: 12px 0; border-bottom: 1px solid var(--border);
    }
    .stg-data-table-stack tr:last-child { border-bottom: none; }
    .stg-data-table-stack td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; padding: 5px 0; border-bottom: none;
    }
    .stg-data-table-stack td[data-label]::before {
        content: attr(data-label);
        font-size: 10px; font-weight: 600; text-transform: uppercase;
        letter-spacing: 0.04em; color: var(--text-muted); flex: 0 0 auto;
    }
    .stg-data-table-stack td.stg-cell-primary {
        display: block; padding-bottom: 8px;
    }
    .stg-data-table-stack td.stg-billing-amount { text-align: left; }
    .stg-billing-links { flex-wrap: wrap; justify-content: flex-end; }
    .stg-billing-table td:not(.stg-cell-primary) { width: auto; white-space: normal; }
    .stg-taas-contact { flex-direction: column !important; gap: 4px !important; }
}

/* === Inline save status (ticket #1259) === */
.stg-save-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.stg-save-status:not(:empty) { opacity: 1; }
.stg-save-status.stg-save-ok { color: #059669; }
.stg-save-status.stg-save-err { color: var(--red, #dc2626); }
.stg-save-status i { font-size: 13px; }


/* ─────────── Pipeline Kanban Board (pixel-perfect from mockup) ─────────── */

/* Pipeline page-scoped resets */
body.pipeline-page {
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body.pipeline-page .i { width: 14px; height: 14px; stroke-width: 2; }
body.pipeline-page button { font: inherit; }

/* Center pane backdrop matches design */
body.pipeline-page #center-pane,
body.pipeline-page .center-pane {
  background: var(--bg, #f8fafc);
}
/* The wrapper div between center-pane and pl-root must pass height constraints through */
body.pipeline-page .center-pane > *:not(.center-header):not(.mobile-header) {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Thin scrollbar */
.pipeline-page .thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.pipeline-page .thin-scroll::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 3px; }
.pipeline-page .thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* Pipeline root wrapper — fills the center-pane */
.pl-root {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  position: relative;
}

/* ─────────── Top bar ─────────── */
body.pipeline-page .center-header { display: none; }
body.pipeline-page .mobile-header { display: none; }

/* #1557 (M27): the top bar was `flex-wrap: nowrap` with no scrollable
   ancestor, so between the mobile breakpoint (767px) and ~1100px the primary
   "View matches" button was pushed clean off-screen and could not be reached
   at any scroll position. It now wraps onto a second row instead. */
.pl-root .topbar {
  display: flex; align-items: center; gap: 10px; row-gap: 8px;
  padding: 10px 20px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-wrap: wrap; flex-shrink: 0;
}
/* Keep the actions together when the bar wraps: the spacer only stretches
   while everything still fits on one row. */
.pl-root .topbar .spacer { min-width: 0; }
.pl-root .topbar button,
.pl-root .topbar label {
  margin: 0 !important;
}
.pl-root .topbar-header-actions {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0; height: 36px;
}
.pl-root .topbar-header-actions .center-header-btn {
  width: 36px; height: 36px;
}
.pl-root .page-title {
  font-size: 1rem; font-weight: 600;
  color: #0f172a; white-space: nowrap;
}

.pl-root .search {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px;
  background: var(--surface-muted); border: 1px solid var(--border);
  min-width: 180px; max-width: 260px; color: var(--text-2);
  transition: border-color 160ms, background 160ms;
  height: 36px;
}
.pl-root .search:focus-within { border-color: var(--brand); background: #fff; color: var(--text); }
.pl-root .search input {
  border: 0; background: transparent; outline: none; flex: 1; font: inherit; color: inherit; font-size: 13px;
  padding: 0; margin: 0; height: auto; line-height: 1;
}
.pl-root .search kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3);
}
.pl-root .spacer { flex: 1; }
.pl-root .topbar-break { display: none; }

.pl-root .btn {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 8px 12px; border-radius: 8px; height: 36px; box-sizing: border-box;
  color: var(--text); font-weight: 500; font-size: 13px;
  transition: background 160ms, border-color 160ms;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-root .btn:hover { background: var(--surface-muted); border-color: var(--border-strong); }
.pl-root .btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.pl-root .btn-primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

.pl-root .meta-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; height: 36px; box-sizing: border-box;
  background: var(--surface-muted); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.pl-root .meta-pill strong { color: var(--text); font-weight: 700; }
.pl-root .meta-pill.ai {
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
  color: #fff; border-color: transparent;
  position: relative; overflow: hidden;
}
.pl-root .meta-pill.ai strong { color: #fff; }
.pl-root .meta-pill.ai::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation: shimmer 3.5s linear infinite;
}

/* Stages picker (topbar button + popover) */
.pl-root .stages-wrap { position: relative; }
.pl-root .stages-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 8px; height: 36px; box-sizing: border-box;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
  white-space: nowrap;
}
.pl-root .stages-btn:hover { background: var(--surface-muted); border-color: var(--border-strong); color: var(--text); }
.pl-root .stages-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .stages-btn.has-hidden {
  background: var(--brand-weak);
  border-color: rgba(37,99,235,.25);
  color: var(--brand-strong);
}
.pl-root .stages-btn .sb-count { font-size: 11.5px; font-weight: 600; opacity: .7; }
.pl-root .stages-btn.has-hidden .sb-count { opacity: 1; }
.pl-root .stages-btn kbd {
  font: inherit; font-size: 10.5px; font-weight: 600;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-3);
}
.pl-root .stages-btn.has-hidden kbd { background: rgba(255,255,255,.6); border-color: transparent; }

.pl-root .stages-popover {
  position: absolute;
  top: calc(100% + 6px); right: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(17,24,39,.14);
  padding: 6px; min-width: 280px;
  z-index: 50;
  opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.7,.3,1);
}
.pl-root .stages-popover.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.pl-root .stages-popover h5 {
  margin: 6px 10px 4px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
}
.pl-root .sp-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
  border: 0; background: transparent; width: 100%; text-align: left;
  color: var(--text); font-weight: 500;
  transition: background 140ms;
}
.pl-root .sp-toggle:hover { background: var(--surface-muted); }
.pl-root .sp-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.pl-root .sp-toggle .sp-check {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); border-radius: 5px;
  display: grid; place-items: center;
  background: var(--surface);
  transition: background 140ms, border-color 140ms;
  font-size: 0; color: transparent; overflow: hidden;
}
.pl-root .sp-toggle[aria-checked="true"] .sp-check {
  background: var(--brand); border-color: var(--brand);
}
.pl-root .sp-toggle[aria-checked="true"] .sp-check::after {
  content: "";
  width: 10px; height: 6px;
  border: 2px solid #fff;
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.pl-root .sp-toggle .sp-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pl-root .sp-toggle .sp-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-root .sp-toggle .sp-num { font-size: 11.5px; color: var(--text-3); font-weight: 600; }
.pl-root .sp-toggle .sp-key {
  font-size: 10.5px; color: var(--text-3); font-weight: 600;
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-muted); border: 1px solid var(--border);
  font-family: inherit; flex-shrink: 0;
}
.pl-root .sp-toggle[aria-checked="false"] .sp-label,
.pl-root .sp-toggle[aria-checked="false"] .sp-num { color: var(--text-3); }
.pl-root .sp-toggle[aria-checked="false"] .sp-dot { opacity: 0.35; }
.pl-root .sp-sep { height: 1px; background: var(--border); margin: 6px 8px; }
.pl-root .sp-actions { display: flex; gap: 6px; padding: 2px 6px 4px; }
.pl-root .sp-action {
  flex: 1;
  padding: 6px 10px; border-radius: 6px;
  border: 0; background: transparent;
  color: var(--text-2); font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.pl-root .sp-action:hover { background: var(--surface-muted); color: var(--text); }
.pl-root .sp-action:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ─────────── Value distribution bar (hidden — removed from UI) ─────────── */
.pl-root .value-bar {
  display: none;
}
.pl-root .value-bar-label {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--text-3); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.pl-root .value-bar-label strong {
  color: var(--text); font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.pl-root .bar-track {
  display: flex; height: 8px; border-radius: 6px; overflow: hidden;
  background: var(--panel);
}
.pl-root .bar-seg { height: 100%; transition: flex 220ms ease; position: relative; }
.pl-root .bar-seg:hover { filter: brightness(1.1); }
.pl-root .bar-seg + .bar-seg { border-left: 2px solid var(--surface); }
.pl-root .bar-s1 { background: var(--stage-1); }
.pl-root .bar-s2 { background: var(--stage-2); }
.pl-root .bar-s3 { background: var(--stage-3); }
.pl-root .bar-s4 { background: var(--stage-4); }
.pl-root .bar-s5 { background: var(--stage-5); }

/* ─────────── Filter bar ─────────── */
.pl-root .filter-bar {
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 10px 20px; flex-shrink: 0;
}
.pl-root .filter-summary {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.pl-root .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-2); font-size: 12.5px; font-weight: 500;
  cursor: pointer; transition: all 140ms;
}
.pl-root .chip:hover { border-color: var(--border-strong); color: var(--text); }
.pl-root .chip .count {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-muted); color: var(--text-3); font-weight: 700;
  border: 1px solid var(--border);
}
.pl-root .chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.pl-root .chip.active .count { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.pl-root .chip.chip-ai.active {
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.pl-root .chip.chip-urgent.active {
  background: var(--amber-strong);
  border-color: var(--amber-strong); color: #fff;
}

.pl-root .af-pills-row {
  display: none; flex-wrap: wrap; gap: 6px;
  align-items: center; margin-top: 8px;
}
.pl-root .af-pills-row.has-filters { display: flex; }
.pl-root .af-pills {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-width: 0;
}
.pl-root .af-lead {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-3); flex-shrink: 0;
}
.pl-root .af-pill-text {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 220px;
}

.pl-root .af-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 4px 3px 10px; border-radius: 999px;
  background: var(--brand-weak); color: var(--brand-strong);
  border: 1px solid rgba(37,99,235,.2);
  font-weight: 500; font-size: 12px;
}
.pl-root .af-pill button {
  width: 22px; height: 22px; border-radius: 999px; border: 0;
  background: transparent; color: var(--brand-strong); cursor: pointer;
  display: grid; place-items: center; font-size: 14px;
  position: relative;
}
.pl-root .af-pill button:hover { background: rgba(37,99,235,.15); }
.pl-root .af-pill button::before { content: ""; position: absolute; inset: -8px; }
@media (hover: none) {
  .pl-root .af-pill button { width: 26px; height: 26px; background: rgba(37,99,235,.08); }
}

.pl-root .af-clear {
  cursor: pointer; background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); border-radius: 999px;
  font-size: 12px; padding: 4px 12px; font-weight: 600;
  margin-left: auto; min-height: 30px; flex-shrink: 0;
}
.pl-root .af-clear:hover { color: var(--brand-strong); border-color: var(--brand); background: var(--brand-weak); }
.pl-root .af-clear:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.pl-root .filter-toggle {
  margin-left: auto;
  cursor: pointer; background: var(--surface-muted); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  position: relative;
}
.pl-root .filter-toggle:hover { background: #fff; border-color: var(--border-strong); }
/* Active-filter state on the pill itself (#1557 / M12) — a filtered board is
   now visible even with the panel collapsed. */
.pl-root .filter-toggle.is-filtered {
  background: var(--brand-weak); border-color: var(--brand);
  color: var(--brand-strong); font-weight: 600;
}
.pl-root .filter-toggle .ft-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
}
.pl-root .filter-toggle .ft-count[hidden] { display: none; }
.pl-root .filter-toggle kbd {
  font-size: 10.5px; padding: 1px 5px; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--border); color: var(--text-3); font-weight: 600;
}

.pl-root .filter-expanded { display: none; margin-top: 10px; gap: 8px; flex-wrap: wrap; }
.pl-root .filter-bar.is-open .filter-expanded { display: flex; }
.pl-root .filter-bar.is-open .filter-toggle {
  background: var(--brand-weak);
  border-color: rgba(37,99,235,.25); color: var(--brand-strong);
}

.pl-root .filter-group { position: relative; }
.pl-root .dropdown {
  position: absolute; top: calc(100% + 6px); left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(17,24,39,.10);
  padding: 10px; min-width: 240px; z-index: 25; display: none;
}
.pl-root .filter-group.open .dropdown { display: block; }
/* 23 markets don't fit in a popover — scroll inside it instead of running off
   the bottom of the viewport. */
.pl-root .dropdown.dropdown-scroll { max-height: min(58vh, 420px); overflow-y: auto; }
.pl-root .dropdown h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3);
}
.pl-root .check-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.pl-root .check-row:hover { background: var(--surface-muted); }
.pl-root .check-row input[type="checkbox"],
.pl-root .check-row input[type="radio"] {
  width: 16px; height: 16px; flex-shrink: 0;
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid #d1d5db; background: #fff;
  cursor: pointer; position: relative;
  transition: background 120ms ease, border-color 120ms ease;
  border-radius: 4px;
}
.pl-root .check-row input[type="radio"] { border-radius: 50%; }
.pl-root .check-row input:checked {
  background: #2563eb; border-color: #2563eb;
}
.pl-root .check-row input[type="checkbox"]:checked::after {
  content: ''; position: absolute; top: 2px; left: 5px;
  width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.pl-root .check-row input[type="radio"]:checked {
  background: #fff; border-color: #2563eb;
}
.pl-root .check-row input[type="radio"]:checked::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: #2563eb;
}
.pl-root .range-row { display: flex; gap: 8px; align-items: center; }
.pl-root .range-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 13px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
}

/* ─────────── Board ─────────── */
.pl-root .board-scroll {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  overflow-x: auto; overflow-y: hidden;
}
.pl-root .board {
  flex: 1; min-height: 0;
  display: flex;
  gap: 12px;
  padding: 14px 20px 40px;
  align-items: stretch;
  min-width: max-content;
}
.pl-root .column {
  /* Fixed width — columns must not stretch to fill the viewport when only a
     few stages are visible (cards were ballooning horizontally). */
  flex: 0 0 300px;
  min-width: 300px;
  max-width: 300px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 10px 12px;
  display: flex; flex-direction: column;
  transition: flex-basis 240ms cubic-bezier(.2,.7,.3,1);
  min-height: 0; overflow: hidden;
}
.pl-root .column.stage-hidden { display: none !important; }

.pl-root .col-head {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 6px 10px;
  border-bottom: 1px dashed var(--border-strong);
  margin-bottom: 10px;
}
.pl-root .col-title { font-weight: 700; font-size: 13px; color: var(--text); letter-spacing: -0.005em; }
.pl-root .col-meta { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.pl-root .col-count {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--surface); color: var(--text-2); border: 1px solid var(--border);
}
.pl-root .col-value { font-size: 11px; color: var(--text-3); }
.pl-root .col-menu {
  width: 28px; height: 28px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text-3); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative; font-size: 16px; line-height: 1;
  padding: 0; margin: 0 !important;
}
.pl-root .col-menu:hover { background: var(--surface); color: var(--text); }
.pl-root .col-menu:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; border-radius: 6px; }
.pl-root .col-menu::before { content: ""; position: absolute; inset: -8px; }
@media (hover: none) {
  .pl-root .col-menu { width: 36px; height: 36px; background: var(--surface); }
  .pl-root .col-menu::before { inset: -4px; }
}
.pl-root .col-body { display: flex; flex-direction: column; gap: 10px; min-height: 40px; flex: 1; overflow-y: auto; min-height: 0; }

.pl-root .c-saved   { border-top: 3px solid var(--stage-1); }
.pl-root .c-qualify { border-top: 3px solid var(--stage-2); }
.pl-root .c-draft   { border-top: 3px solid var(--stage-3); }
.pl-root .c-review  { border-top: 3px solid var(--stage-4); }
.pl-root .c-submit  { border-top: 3px solid var(--stage-5); }
.pl-root .c-results { border-top: 3px solid var(--stage-6); }

/* ─────────── Card ─────────── */
.pl-root .card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 12px 10px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 180ms, transform 120ms, border-color 180ms;
  cursor: grab;
  flex-shrink: 0;
}
.pl-root .card:active { cursor: grabbing; }
.pl-root .card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
  border-color: var(--border-strong);
}
.pl-root .card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Drag-handle dots removed to avoid overlapping card content */
.pl-root .grip { display: none !important; }

.pl-root .card.needs-you::before {
  content: ""; position: absolute;
  top: 0; left: 10px; right: 10px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--amber-strong);
}

.pl-root .card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; margin-bottom: 6px;
}
.pl-root .needs-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: var(--amber-bg); color: var(--amber);
  text-transform: uppercase; letter-spacing: 0.04em;
}

.pl-root .deadline {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600; color: var(--text-2);
}
.pl-root .deadline .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--stage-5);
}
.pl-root .deadline.d-warn .dot { background: var(--amber-strong); }
.pl-root .deadline.d-crit .dot { background: var(--red); }
.pl-root .deadline.d-crit { color: var(--red); }
.pl-root .deadline.d-ok .dot { background: var(--green); }

.pl-root .kebab {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--text-3);
  cursor: pointer; background: transparent; border: 0;
  transition: opacity 160ms, background 160ms;
  position: relative; padding: 0; margin: 0 !important;
}
.pl-root .kebab:hover { background: var(--surface-muted); color: var(--text); }
.pl-root .kebab:focus-visible { outline: 2px solid var(--brand); outline-offset: 0; }
.pl-root .kebab::before { content: ""; position: absolute; inset: -8px; }
@media (hover: hover) and (pointer: fine) {
  .pl-root .kebab { opacity: 0; }
  .pl-root .card:hover .kebab,
  .pl-root .card:focus-within .kebab { opacity: 1; }
}
@media (hover: none) {
  .pl-root .kebab {
    opacity: 0.75;
    width: 36px; height: 36px;
    background: var(--surface-muted);
    color: var(--text-2);
  }
  .pl-root .kebab::before { inset: -4px; }
}

.pl-root .card-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35;
  margin: 2px 0 4px; color: var(--text); letter-spacing: -0.005em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  cursor: pointer;
}
.pl-root .card-title:hover { color: var(--brand-strong); }

.pl-root .meta-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-3);
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.pl-root .meta-row .dot-sep {
  width: 3px; height: 3px; border-radius: 999px; background: var(--text-3);
}
.pl-root .cpv {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 5px;
  background: var(--brand-weak); color: var(--brand-strong);
  font-weight: 600; font-size: 11px;
  cursor: help;
}
.pl-root .country {
  font-size: 11.5px; color: var(--text-2); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}

.pl-root .card-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 8px; padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.pl-root .value { font-size: 13px; font-weight: 600; color: var(--text); }

.pl-root .assignee-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 4px; border-radius: 999px;
  background: var(--surface-muted); border: 1px solid var(--border);
  color: var(--text-2); font-size: 12px; cursor: pointer;
  min-height: 30px;
  position: relative;
}
.pl-root .assignee-btn:hover { background: #fff; border-color: var(--border-strong); color: var(--text); }
.pl-root .assignee-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .assignee-btn::before { content: ""; position: absolute; inset: -6px; }
@media (hover: none) {
  .pl-root .assignee-btn { min-height: 36px; padding: 5px 12px 5px 5px; }
  .pl-root .assignee-btn::before { inset: -4px; }
}
.pl-root .avatar {
  width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 700;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  flex-shrink: 0;
}
.pl-root .avatar.c2 { background: linear-gradient(135deg, #fbbf24, #d97706); }
.pl-root .avatar.c3 { background: linear-gradient(135deg, #34d399, #059669); }
.pl-root .avatar.c4 { background: linear-gradient(135deg, #f472b6, #be185d); }
.pl-root .avatar.ai {
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
  position: relative; overflow: hidden;
}
.pl-root .avatar.ai::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.4) 50%, transparent 70%);
  animation: shimmer 3s linear infinite;
}
.pl-root .assignee-btn .caret { color: var(--text-3); width: 10px; height: 10px; flex-shrink: 0; }

.pl-root .notes-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--text-2);
  padding: 5px 9px; border-radius: 6px;
  background: var(--surface-muted); border: 1px solid var(--border);
  cursor: pointer;
  min-height: 28px;
  position: relative;
}
.pl-root .notes-chip:hover { background: #fff; border-color: var(--border-strong); color: var(--text); }
.pl-root .notes-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Unread messages nudge the chip itself so it reads as "needs a look".
   Read notes / an assessment alone leave the chip neutral — the corner marks
   carry those signals. */
.pl-root .notes-chip.has-unread { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.pl-root .notes-chip::before { content: ""; position: absolute; inset: -6px; }
/* Ticket #1303: message count badge (top-RIGHT). Neutral grey when everything
   is read; orange when there are unread messages. */
.pl-root .notes-chip-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: #9ca3af;
  border: 1.5px solid #fff; border-radius: 999px;
  position: absolute; top: -6px; right: -6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
  pointer-events: none;
}
.pl-root .notes-chip-badge.unread { background: #ea580c; }
@media (hover: none) {
  .pl-root .notes-chip { min-height: 36px; padding: 6px 10px; }
  .pl-root .notes-chip::before { inset: -4px; }
}

.pl-root .card-actions-right { display: flex; gap: 6px; align-items: center; }

/* AI variant — TaaS cards */
.pl-root .card.ai {
  border-color: rgba(14,165,233,.28);
  background: linear-gradient(180deg, var(--ai-surface) 0%, #fff 38%), #fff;
}
.pl-root .card.ai::after {
  content: ""; position: absolute;
  left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--ai-cyan), var(--ai-blue));
}
.pl-root .card.ai:hover {
  box-shadow: var(--shadow-ai-hover);
  border-color: rgba(14,165,233,.4);
}

@keyframes shimmer {
  0%   { transform: translateX(-60%); }
  100% { transform: translateX(60%); }
}

.pl-root .ai-status {
  display: flex; align-items: center; gap: 8px;
  margin: 6px -2px 0;
  padding: 7px 10px; border-radius: 8px;
  background: var(--ai-surface);
  border: 1px solid var(--ai-border);
  font-size: 11.5px; color: var(--ai-deep);
  font-weight: 500; line-height: 1.3;
}
.pl-root .ai-status .pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--ai-cyan); position: relative; flex-shrink: 0;
}
.pl-root .ai-status .pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 999px;
  background: rgba(14,165,233,.5);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(0.6); opacity: .8; }
  100% { transform: scale(2);   opacity: 0; }
}
.pl-root .ai-status.waiting {
  background: var(--amber-bg); border-color: transparent; color: var(--amber);
}
.pl-root .ai-status.waiting .pulse { background: var(--amber-strong); }
.pl-root .ai-status.waiting .pulse::after { animation: none; }
.pl-root .ai-status .text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600;
}
.pl-root .ai-status time {
  margin-left: auto; font-size: 10.5px; color: var(--text-3); font-weight: 500;
  flex-shrink: 0;
}

.pl-root .delegate-row { margin-top: 10px; display: flex; gap: 6px; }
.pl-root .btn-delegate {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 7px 10px; border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
  border: 0; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,165,233,.3);
  transition: box-shadow 200ms, transform 80ms;
}
.pl-root .btn-delegate:hover { box-shadow: 0 4px 14px rgba(14,165,233,.35); }
.pl-root .btn-delegate:active { transform: translateY(1px); }
.pl-root .btn-delegate:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .btn-delegate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms ease;
}
.pl-root .btn-delegate:hover::after { transform: translateX(100%); }
.pl-root .btn-delegate > * { position: relative; z-index: 1; }

/* "Expert review ready" — shown when a TaaS expert has pinned a review on the
   tender. Deliberately NOT a button: a tinted notification row (expert avatar +
   label + chevron) so it reads as something that arrived for the client, and
   never gets mistaken for the "Assign to Expert" promo button. */
.pl-root .assessment-ready {
  flex: 1;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  text-align: left;
  background: var(--brand-weak, #eff6ff);
  border: 1px solid var(--brand-soft, #bfdbfe);
  cursor: pointer;
  transition: background 160ms, border-color 160ms;
}
.pl-root .assessment-ready:hover { background: #e4eeff; border-color: #93c5fd; }
.pl-root .assessment-ready:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .ar-avatar {
  flex: 0 0 auto;
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand, #2563eb); color: #fff;
  font-size: 11px; font-weight: 700;
}
.pl-root .ar-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pl-root .ar-title { font-size: 12px; font-weight: 700; color: var(--brand-strong, #1d4ed8); }
.pl-root .ar-sub {
  font-size: 10.5px; color: var(--text-3, #6b7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-root .ar-chev { flex: 0 0 auto; margin-left: auto; color: var(--brand, #2563eb); }

/* TaaS client decision — Accept / Reject toggle under the review-ready row.
   Wraps onto its own full-width line inside the flex delegate-row. */
.pl-root .delegate-row { flex-wrap: wrap; }
.pl-root .decision-row { flex-basis: 100%; display: flex; gap: 6px; margin-top: 6px; }
.pl-root .dc-opt {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  padding: 6px 10px; border-radius: 8px;
  background: var(--surface, #fff); color: var(--text-2, #4b5563);
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.pl-root .dc-opt:hover { border-color: var(--border-strong, #d1d5db); background: var(--surface-muted, #f9fafb); }
.pl-root .dc-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .dc-accept.active {
  background: #ecfdf5; color: #047857; border-color: #6ee7b7;
}
.pl-root .dc-reject.active {
  background: #fef2f2; color: #b91c1c; border-color: #fca5a5;
}

/* Bulk Accept all / Reject all — Qualifying column header (TaaS clients). */
.pl-root .col-bulk-decision {
  display: flex; gap: 6px;
  padding: 0 2px 10px;
  border-bottom: 1px dashed var(--border-strong, #d1d5db);
  margin-bottom: 10px;
}
.pl-root .bd-btn {
  flex: 1;
  font-size: 11.5px; font-weight: 700;
  padding: 5px 8px; border-radius: 7px;
  background: var(--surface, #fff); color: var(--text-2, #4b5563);
  border: 1px solid var(--border, #e5e7eb);
  cursor: pointer;
  transition: background 140ms, border-color 140ms, color 140ms;
}
.pl-root .bd-accept:hover { background: #ecfdf5; color: #047857; border-color: #6ee7b7; }
.pl-root .bd-reject:hover { background: #fef2f2; color: #b91c1c; border-color: #fca5a5; }

/* #1302 — "TaaS queued..." status replaces the delegate button once a
   tender is assigned to the TaaS agent. */
.pl-root .delegate-row.taas-queued-row { margin-top: 8px; }
.pl-root .taas-queued-text {
  flex: 1;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 6px 10px; border-radius: 8px;
  color: var(--ai-blue, #2563eb);
  background: rgba(37, 99, 235, .06);
  border: 1px dashed rgba(37, 99, 235, .25);
}
.pl-root .taas-queued-text svg { color: var(--ai-blue, #2563eb); }

/* #1302 — modal for non-active-TaaS users (popup form). */
/* #1557: the overlay barely separated the dialog from the page behind it —
   it now dims properly (and blurs where supported) so the modal reads as
   modal, and it never lets the page behind scroll on touch. */
.taas-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(2, 6, 23, .62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  overscroll-behavior: contain;
  z-index: 1000;
  animation: tm-fade-in 150ms ease-out;
}
@keyframes tm-fade-in { from { opacity: 0; } to { opacity: 1; } }
.taas-modal {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff; border-radius: 16px;
  box-shadow: 0 20px 50px rgba(2, 6, 23, .35), 0 1px 0 rgba(255,255,255,.06) inset;
  padding: 20px 22px; position: relative;
  border: 1px solid #e5e7eb;
  /* Thin, inset scrollbar that only appears when needed and stays clear of the
     rounded corners (the default bar rendered flush against the radius and
     looked like it spilled out of the modal). */
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.taas-modal::-webkit-scrollbar { width: 10px; }
.taas-modal::-webkit-scrollbar-track { background: transparent; margin: 16px 0; }
.taas-modal::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 10px;
  border: 3px solid transparent; background-clip: content-box;
}
.taas-modal::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
.taas-modal .tm-close {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: 0; width: 28px; height: 28px;
  border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: #6b7280; font-size: 18px;
}
.taas-modal .tm-close:hover { background: #f3f4f6; color: #111827; }
.taas-modal h2 {
  margin: 0 0 4px 0; font-size: 18px; color: #111827; font-weight: 700;
}
/* When the tender is named, the action becomes a small eyebrow and the tender
   name is the heading (clamped to 2 lines so long names stay compact). */
.taas-modal .tm-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #6b7280; margin: 0 0 3px; padding-right: 28px;
}
.taas-modal h2.tm-title-tender {
  font-size: 16px; line-height: 1.3; margin: 0 0 4px; padding-right: 28px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.taas-modal .tm-subtitle {
  margin: 0 0 12px 0; color: #6b7280; font-size: 13px; line-height: 1.4;
}
.taas-modal .tm-field { margin-bottom: 5px; }
/* Email + phone side by side; stack on narrow screens. */
.taas-modal .tm-row { display: flex; gap: 12px; }
.taas-modal .tm-row .tm-field { flex: 1 1 0; min-width: 0; }
.taas-modal .tm-field label {
  display: block; font-size: 12px; font-weight: 600;
  color: #374151; margin-bottom: 2px;
}
.taas-modal .tm-field input,
.taas-modal .tm-field textarea {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px;
  font: inherit; font-size: 14px; color: #111827; background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.taas-modal .tm-field input:focus,
.taas-modal .tm-field textarea:focus {
  outline: 0; border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.taas-modal .tm-field textarea { resize: vertical; min-height: 56px; }
.taas-modal .tm-actions {
  display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.taas-modal .tm-btn {
  flex: 1; min-width: 130px;
  font: inherit; font-size: 14px; font-weight: 600;
  line-height: 1.4;
  padding: 10px 14px; border-radius: 10px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; box-sizing: border-box;
  border: 1px solid transparent;
  transition: background 120ms, box-shadow 120ms, transform 80ms;
  text-decoration: none;
}
.taas-modal .tm-btn-primary {
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #fff;
}
.taas-modal .tm-btn-primary:hover { box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.taas-modal .tm-btn-secondary {
  background: #fff; color: #111827; border-color: #d1d5db;
}
.taas-modal .tm-btn-secondary:hover { background: #f9fafb; }
.taas-modal .tm-btn:active { transform: translateY(1px); }
.taas-modal .tm-learn-more {
  display: block; text-align: center; margin-top: 10px;
  font-size: 12.5px; color: #2563eb; text-decoration: none;
}
.taas-modal .tm-learn-more:hover { text-decoration: underline; }
.taas-modal .tm-success {
  text-align: center; padding: 16px 4px 4px;
}
.taas-modal .tm-success .tm-success-icon {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(16, 185, 129, .12); color: #059669;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; margin-bottom: 10px;
}
.taas-modal .tm-success h2 { margin-bottom: 8px; }
.taas-modal .tm-success p { color: #6b7280; font-size: 13px; }

/* Planned-offer + live success-fee estimate block (delegate popup) */
.taas-modal .tm-offer {
  margin: 2px 0 8px; padding: 10px 10px 4px;
  border: 1px solid #e5e7eb; border-radius: 10px; background: #f9fafb;
}
.taas-modal .tm-offer > label {
  display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 3px;
}
.taas-modal .tm-budget-hint { font-size: 11px; color: #9ca3af; margin-bottom: 6px; }
.taas-modal .tm-offer-input { position: relative; }
.taas-modal .tm-offer-input input {
  width: 100%; box-sizing: border-box; padding: 8px 12px;
  border: 1px solid #d1d5db; border-radius: 8px; font: inherit; font-size: 14px;
  /* Left-aligned amount with the € inline in the value ("€240,000"); the
     single-line input centres the text vertically on its own. */
  text-align: left;
  color: #111827; background: #fff; transition: border-color 120ms, box-shadow 120ms;
}
.taas-modal .tm-offer-input input:focus {
  outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
.taas-modal .tm-offer-help {
  font-size: 11px; color: #9ca3af; margin: 5px 0 2px; line-height: 1.4;
}
/* Fee readout — contract anchor, fee, net "you keep", no-win-no-fee, covers. */
.taas-modal .tm-fee { margin-top: 10px; padding-top: 9px; border-top: 1px solid #e5e7eb; }
.taas-modal .tm-fee-loading {
  display: flex; align-items: center; gap: 8px; font-size: 13px; color: #6b7280;
  padding-bottom: 8px;
}
.taas-modal .tm-fee-spinner {
  width: 14px; height: 14px; flex: 0 0 auto;
  border: 2px solid #d1d5db; border-top-color: #2563eb; border-radius: 50%;
  display: inline-block; animation: tmspin .7s linear infinite;
}
@keyframes tmspin { to { transform: rotate(360deg); } }
.taas-modal .tm-fee-anchor {
  font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 4px;
}
.taas-modal .tm-fee-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 1px 0;
}
.taas-modal .tm-fee-row-label { font-size: 13px; color: #374151; }
.taas-modal .tm-fee-row-value { font-size: 15px; font-weight: 600; color: #111827; }
.taas-modal .tm-fee-keep .tm-fee-row-label { font-weight: 600; color: #111827; }
.taas-modal .tm-fee-keep .tm-fee-row-value { font-size: 17px; font-weight: 800; color: #059669; }
.taas-modal .tm-fee-reassure {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 8px; padding: 7px 10px; border-radius: 8px;
  background: #eff6ff; color: #1e3a8a; font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
.taas-modal .tm-fee-check {
  flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  background: #2563eb; color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.taas-modal .tm-fee-covers {
  font-size: 11px; color: #9ca3af; margin-top: 6px; line-height: 1.4; padding-bottom: 2px;
}
/* Terms & conditions acceptance row */
.taas-modal .tm-terms {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 10px 0 2px; font-size: 12.5px; color: #374151; line-height: 1.4; cursor: pointer;
}
.taas-modal .tm-terms input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: #2563eb; }
.taas-modal .tm-terms a { color: #2563eb; text-decoration: none; }
.taas-modal .tm-terms a:hover { text-decoration: underline; }
.taas-modal .tm-terms.tm-terms-error { color: #dc2626; }
.taas-modal .tm-terms.tm-terms-error input { outline: 2px solid #dc2626; outline-offset: 1px; }

/* In-modal Calendly scheduler ("Book a meeting" swaps the form for an
   embedded booking view — user stays on the platform). While scheduling the
   modal widens to >=1000px so Calendly renders its SHORT two-column desktop
   layout (~600px every step, incl. "Enter Details"); below that width
   Calendly stacks vertically and inevitably scrolls inside the frame. */
.taas-modal.tm-sched-open { width: min(1060px, calc(100vw - 32px)); }
.taas-modal .tm-scheduler { display: flex; flex-direction: column; gap: 6px; }
.taas-modal .tm-sched-back {
  align-self: flex-start; background: none; border: 0; padding: 4px 0;
  font: inherit; font-size: 13px; font-weight: 600; color: #2563eb; cursor: pointer;
}
.taas-modal .tm-sched-back:hover { text-decoration: underline; }
.taas-modal .tm-sched-frame {
  width: 100%; height: min(640px, calc(100vh - 240px)); min-height: 400px;
  border: 0; border-radius: 12px; background: #fff;
}
.taas-modal .tm-sched-fallback {
  text-align: center; font-size: 11.5px; color: #9ca3af; text-decoration: none; padding-bottom: 2px;
}
.taas-modal .tm-sched-fallback:hover { color: #2563eb; text-decoration: underline; }

@media (max-width: 480px) {
  .taas-modal { padding: 18px; border-radius: 14px; }
  .taas-modal .tm-row { flex-direction: column; gap: 0; }
  .taas-modal .tm-actions { flex-direction: column; }
  .taas-modal .tm-btn { width: 100%; }
}

/* ── Instant "Assign to Expert" dialog: spinner while the prefill loads ── */
.taas-modal.taas-modal-loading { width: min(420px, calc(100vw - 32px)); }
.taas-modal .tm-loading {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 22px 6px 8px; text-align: center;
}
.taas-modal .tm-loading p { font-size: 13px; color: #6b7280; margin: 0; }
.taas-modal .tm-loading-spinner {
  width: 26px; height: 26px;
  border: 3px solid #e5e7eb; border-top-color: #2563eb; border-radius: 50%;
  animation: tmspin .7s linear infinite;
}
/* Busy state on the card button that opened the dialog. */
.pl-root .btn-delegate.is-loading,
.pl-root .btn-appeal.is-loading { opacity: .65; pointer-events: none; }

/* ── App-styled confirm dialog (window.plConfirm) ── */
.taas-modal.pl-confirm { width: min(420px, calc(100vw - 32px)); }
.taas-modal.pl-confirm h2 { font-size: 17px; margin-bottom: 6px; }
.taas-modal.pl-confirm .tm-subtitle { margin-bottom: 16px; }
.taas-modal.pl-confirm .tm-actions { margin-top: 0; }
.taas-modal .tm-btn-danger {
  background: #dc2626; color: #fff; border: 1px solid #dc2626;
}
.taas-modal .tm-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

/* ─────────── Lazy board load: host + skeleton + error ─────────── */
.pl-board-host {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.pl-board-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px 20px; text-align: center; color: var(--text-2);
  font-size: 13px;
}
.pl-board-error .btn { cursor: pointer; }

.pl-skeleton { pointer-events: none; user-select: none; }
.pl-skeleton .pl-skel-topbar { justify-content: space-between; }
.pl-skeleton .pl-skel-filterbar { display: flex; }
.pl-skeleton .pl-skel-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-skeleton .pl-skel-col-body { display: flex; flex-direction: column; gap: 10px; }
.pl-skeleton .pl-skel-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px;
  box-shadow: var(--shadow-card);
}
.pl-skeleton .pl-skel-card-foot {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border);
}
.pl-skel-bar {
  display: block; border-radius: 6px;
  background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
  background-size: 400% 100%;
  animation: pl-skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes pl-skel-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-skel-bar { animation: none; }
  .taas-modal .tm-loading-spinner { animation-duration: 2s; }
}

/* ─────────── Result card (outcome stage) ─────────── */
.pl-root .card.card-result .result-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  padding: 2px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.pl-root .card.card-result.r-won    .result-badge { background: var(--green-bg); color: var(--green); }
.pl-root .card.card-result.r-lost   .result-badge { background: var(--red-bg);   color: var(--red); }
.pl-root .card.card-result.r-appeal .result-badge { background: var(--amber-bg); color: var(--amber); }

.pl-root .card.card-result::before {
  content: ""; position: absolute;
  left: -1px; top: 10px; bottom: 10px; width: 3px;
  border-radius: 2px;
  background: var(--stage-6);
}
.pl-root .card.card-result.r-won::before    { background: var(--stage-5); }
.pl-root .card.card-result.r-lost::before   { background: var(--red); }
.pl-root .card.card-result.r-appeal::before { background: var(--amber-strong); }
.pl-root .card.card-result { min-height: 246px; }

.pl-root .result-toggle {
  display: flex;
  margin: 4px 0 0;
  padding: 3px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  gap: 2px;
}
.pl-root .rt-opt {
  flex: 1;
  padding: 3px 8px;
  margin: 0 !important;
  background: transparent; border: 0;
  border-radius: 999px;
  font: inherit; font-size: 11px; font-weight: 600;
  color: var(--text-3);
  cursor: pointer; transition: all 140ms;
  position: relative; white-space: nowrap;
}
.pl-root .rt-opt::before { content: ""; position: absolute; inset: -4px; }
.pl-root .rt-opt:hover { color: var(--text); }
.pl-root .rt-opt:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .rt-opt.active[data-result="won"]    { background: var(--green-bg);  color: var(--green);  box-shadow: 0 1px 2px rgba(4,120,87,.15); }
.pl-root .rt-opt.active[data-result="lost"]   { background: var(--red-bg);    color: var(--red);    box-shadow: 0 1px 2px rgba(185,28,28,.15); }
.pl-root .rt-opt.active[data-result="appeal"] { background: var(--amber-bg);  color: var(--amber);  box-shadow: 0 1px 2px rgba(180,83,9,.15); }

@media (hover: none) {
  .pl-root .rt-opt { min-height: 36px; font-size: 11.5px; }
}

.pl-root .appeal-row { display: none; margin-top: 10px; gap: 6px; }
.pl-root .card.card-result.r-lost .appeal-row { display: flex; }
.pl-root .btn-appeal {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 7px 10px; border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
  border: 0; cursor: pointer;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 0 rgba(14,165,233,.3);
  transition: box-shadow 200ms, transform 80ms;
  min-height: 34px;
}
.pl-root .btn-appeal:hover { box-shadow: 0 4px 14px rgba(14,165,233,.35); }
.pl-root .btn-appeal:active { transform: translateY(1px); }
.pl-root .btn-appeal:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pl-root .btn-appeal::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 700ms ease;
}
.pl-root .btn-appeal:hover::after { transform: translateX(100%); }
.pl-root .btn-appeal > * { position: relative; z-index: 1; }
@media (hover: none) {
  .pl-root .btn-appeal { min-height: 40px; font-size: 12.5px; }
}

/* ─────────── Density toggle ─────────── */
.pl-root .density-toggle {
  display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--surface);
}
.pl-root .density-toggle button {
  border: 0; background: transparent; padding: 6px 10px;
  color: var(--text-3); cursor: pointer;
}
.pl-root .density-toggle button.active { background: var(--brand-weak); color: var(--brand-strong); }

/* Compact density mode */
body.density-compact .pl-root .col-body { gap: 6px; }
body.density-compact .pl-root .card { padding: 6px 9px 6px; border-radius: 8px; }
body.density-compact .pl-root .card-top { margin-bottom: 2px; }
body.density-compact .pl-root .card-title { font-size: 12.5px; -webkit-line-clamp: 1; line-height: 1.25; margin: 0 0 2px; }
body.density-compact .pl-root .meta-row { margin-bottom: 4px; font-size: 10.5px; gap: 4px; }
body.density-compact .pl-root .meta-row .cpv { font-size: 10px; padding: 0 5px; }
body.density-compact .pl-root .meta-row > span:not(.country):not(.cpv):not(.dot-sep):not(.deadline) { display: none; }
body.density-compact .pl-root .card-meta { padding-top: 5px; margin-top: 4px; }
body.density-compact .pl-root .value { font-size: 11.5px; }
body.density-compact .pl-root .assignee-btn { padding: 1px 6px 1px 2px; font-size: 11px; }
body.density-compact .pl-root .assignee-btn .avatar { width: 16px; height: 16px; font-size: 8px; }
body.density-compact .pl-root .notes-chip { padding: 1px 5px; font-size: 10.5px; }
body.density-compact .pl-root .deadline { font-size: 10.5px; }
body.density-compact .pl-root .needs-pill { font-size: 9.5px; padding: 1px 6px; }
body.density-compact .pl-root .ai-status { padding: 4px 7px; font-size: 10.5px; margin-top: 4px; }
body.density-compact .pl-root .ai-status time { display: none; }
body.density-compact .pl-root .delegate-row { display: none; }
body.density-compact .pl-root .grip { display: none; }
body.density-compact .pl-root .add-card { padding: 5px; font-size: 11.5px; }
body.density-compact .pl-root .empty { padding: 10px 10px; font-size: 11px; }

/* Empty state */
.pl-root .empty {
  padding: 18px 14px; text-align: center;
  font-size: 12px; color: var(--text-3); line-height: 1.5;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.pl-root .empty strong { color: var(--text-2); display: block; margin-bottom: 4px; font-weight: 600; }

/* Filtered-out state: the column has tenders, the active filters hide them
   all (#1557 / M12). Blue-tinted so it reads as "a filter is doing this",
   not "your data is gone". */
.pl-root .col-nomatch {
  padding: 16px 12px; text-align: center;
  font-size: 12px; color: var(--brand-strong); line-height: 1.5;
  border: 1px dashed rgba(37,99,235,.35);
  background: var(--brand-weak);
  border-radius: var(--radius);
}
.pl-root .col-nomatch strong { display: block; margin-bottom: 4px; font-weight: 700; }
.pl-root .col-nomatch[hidden] { display: none; }

/* Add-card placeholder */
.pl-root .add-card {
  width: 100%; padding: 8px; border-radius: 8px;
  background: transparent; border: 1px dashed var(--border-strong);
  color: var(--text-3); font-size: 12.5px; font-weight: 500; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 160ms;
  margin-top: auto; flex-shrink: 0;
}
.pl-root .add-card svg { width: 14px; height: 14px; flex-shrink: 0; }
.pl-root .add-card:hover { background: var(--surface); color: var(--brand); border-color: var(--brand); }

/* ─────────── Toast ─────────── */
.pl-root .toast,
.pl-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 12px);
  background: var(--text); color: #fff;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(17,24,39,.3);
  display: inline-flex; align-items: center; gap: 12px; z-index: 80;
  font-size: 13px; font-weight: 500;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease, transform 200ms cubic-bezier(.2,.7,.3,1);
  max-width: calc(100vw - 32px);
}
.pl-root .toast.visible,
.pl-toast.visible {
  opacity: 1; transform: translate(-50%, 0); pointer-events: auto;
}
.pl-root .toast .toast-text,
.pl-toast .toast-text { color: #fff; }
.pl-root .toast .toast-text strong,
.pl-toast .toast-text strong { font-weight: 600; }
.pl-root .toast-undo,
.pl-toast .pl-toast-undo,
.pl-toast .toast-undo {
  background: transparent; color: #93c5fd; border: 0;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 600;
  min-height: 36px;
}
.pl-root .toast-undo:hover,
.pl-toast .pl-toast-undo:hover,
.pl-toast .toast-undo:hover { background: rgba(147,197,253,.12); }
.pl-root .toast-undo:focus-visible,
.pl-toast .toast-undo:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }

/* ─────────── Bulk action bar ─────────── */
.pl-root .bulk-bar,
.pl-bulk-bar {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--text); color: #fff;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  box-shadow: 0 12px 30px rgba(17,24,39,.3);
  display: none; align-items: center; gap: 10px; z-index: 30;
  font-size: 13px; font-weight: 500;
}
.pl-root .bulk-bar.visible,
.pl-bulk-bar.visible { display: inline-flex; }
.pl-root .bulk-bar .bb-btn,
.pl-bulk-bar .bb-btn {
  background: rgba(255,255,255,.08); color: #fff; border: 0;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  font-size: 12.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.pl-root .bulk-bar .bb-btn:hover,
.pl-bulk-bar .bb-btn:hover { background: rgba(255,255,255,.14); }
.pl-root .bulk-bar .bb-btn.ai,
.pl-bulk-bar .bb-btn.ai {
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
}
.pl-root .bulk-bar .bb-close,
.pl-bulk-bar .bb-close {
  background: transparent; color: rgba(255,255,255,.7); border: 0;
  cursor: pointer; padding: 2px 8px; font-size: 16px;
}
.pl-root .bulk-bar .bb-close:hover,
.pl-bulk-bar .bb-close:hover { color: #fff; }

/* ─────────── Drag-and-drop visual states ─────────── */
.pl-root .card.dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(-1deg) scale(0.98);
  transition: none;
}
.pl-root .column.drop-target {
  background: #e0ecff;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.pl-root .column.drop-target .col-body::after {
  content: "Drop here";
  display: block;
  padding: 18px; text-align: center;
  font-size: 12px; color: var(--brand-strong); font-weight: 600;
  border: 2px dashed var(--brand);
  border-radius: 10px;
  background: rgba(255,255,255,.6);
}

/* ─────────── Generic popover (move-to / sort) ─────────── */
.pl-popover {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(17,24,39,.14);
  padding: 6px;
  min-width: 220px;
  z-index: 50;
  font-size: 13px;
}
.pl-popover h5 {
  margin: 6px 10px 4px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3);
}
.pl-popover .pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  cursor: pointer; color: var(--text);
  border: 0; background: transparent; width: 100%; text-align: left;
  font: inherit; font-size: 13px; margin: 0 !important;
}
.pl-popover .pop-item:hover { background: var(--surface-muted); }
.pl-popover .pop-item .stage-dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.pl-popover .pop-item.current { font-weight: 600; color: var(--brand-strong); background: var(--brand-weak); }
.pl-popover .pop-item.current::after { content: "✓"; margin-left: auto; color: var(--brand); }
.pl-popover .pop-item.danger { color: var(--red); }
.pl-popover .pop-item.danger:hover { background: var(--red-bg); }
/* Armed two-step delete state ("Confirm delete?") */
.pl-popover .pop-item.danger.confirm,
.pl-popover .pop-item.danger.confirm:hover { background: var(--red); color: #fff; font-weight: 600; }
.pl-popover .pop-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* Assign popover (fixed position, appended to body) */
.assign-popover {
  position: fixed;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(17,24,39,.14);
  padding: 6px;
  min-width: 220px;
  z-index: 100;
  font-size: 13px;
}
.assign-popover h5 {
  margin: 6px 10px 4px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3, #6b7280);
}
.assign-popover .pop-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 6px;
  cursor: pointer; color: var(--text, #111827);
  border: 0; background: transparent; width: 100%; text-align: left;
  font: inherit; font-size: 13px; margin: 0 !important;
  transition: background 120ms ease;
}
.assign-popover .pop-item:hover { background: var(--surface-muted, #f9fafb); }
.assign-popover .pop-sep { height: 1px; background: var(--border, #e5e7eb); margin: 4px 6px; }
/* Name + email stacked (#1557): two teammates with the same display name were
   otherwise impossible to tell apart. */
.assign-popover .pop-item-text {
  display: flex; flex-direction: column; line-height: 1.3;
  min-width: 0; flex: 1;
}
.assign-popover .pop-item-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.assign-popover .pop-item-sub {
  font-size: 11px; color: var(--text-3, #9ca3af);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─────────── Comments slide-over panel ─────────── */
.pl-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: transparent;
  z-index: 60;
  pointer-events: none;
}
.pl-backdrop.visible { pointer-events: auto; }

.pl-comments-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(17,24,39,.12);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2,.7,.3,1);
  z-index: 70;
}
.pl-comments-panel.visible { transform: translateX(0); }
.pl-comments-panel .cp-inner { height: 100%; display: flex; flex-direction: column; }
.pl-comments-panel .cp-head {
  padding: 14px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; gap: 10px;
}
.pl-comments-panel .cp-title { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; }
.pl-comments-panel .cp-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.pl-comments-panel .cp-close {
  width: 40px; height: 40px; border-radius: 8px;
  display: grid; place-items: center;
  background: transparent; border: 0; color: var(--text-2); cursor: pointer;
  font-size: 22px; margin-left: auto;
  flex-shrink: 0;
}
.pl-comments-panel .cp-close:hover { background: var(--surface-muted); color: var(--text); }
.pl-comments-panel .cp-close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (hover: none) {
  .pl-comments-panel .cp-close { width: 44px; height: 44px; }
}
.pl-comments-panel .cp-body {
  flex: 1; overflow-y: auto;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.pl-comments-panel .comment { display: flex; gap: 10px; }
.pl-comments-panel .comment .avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
.pl-comments-panel .comment .body { flex: 1; min-width: 0; }
.pl-comments-panel .comment .meta {
  display: flex; gap: 6px; align-items: baseline; font-size: 12px;
}
.pl-comments-panel .comment .author { font-weight: 600; color: var(--text); }
.pl-comments-panel .comment .when { color: var(--text-3); font-size: 11.5px; }
.pl-comments-panel .comment .text {
  margin-top: 2px; font-size: 13px; color: var(--text-2); line-height: 1.5;
}
.pl-comments-panel .comment.ai .author { color: var(--ai-deep); }
.pl-comments-panel .comment.ai .text {
  background: var(--ai-surface); border: 1px solid var(--ai-border);
  padding: 8px 10px; border-radius: 8px; color: var(--ai-deep);
}
.pl-comments-panel .cp-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
}
.pl-comments-panel .cp-footer textarea {
  width: 100%; resize: none;
  font: inherit; font-size: 13px; color: var(--text);
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  outline: none; min-height: 64px; line-height: 1.4;
}
.pl-comments-panel .cp-footer textarea:focus { border-color: var(--brand); }
.pl-comments-panel .cp-actions {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
.pl-comments-panel .cp-hint { font-size: 11.5px; color: var(--text-3); }
.pl-comments-panel .cp-send {
  background: var(--brand); color: #fff; border: 0;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pl-comments-panel .cp-send:hover { background: var(--brand-strong); }

/* ─────────── Tender detail slide-over panel ─────────── */
.pl-tender-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 440px; max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(17,24,39,.12);
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(.2,.7,.3,1);
  z-index: 70;
  display: flex; flex-direction: column;
}
.pl-tender-panel.visible { transform: translateX(0); }
.pl-tender-panel .tp-head {
  padding: 0 16px; height: 56px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.pl-tender-panel .tp-head-title { font-size: 14px; font-weight: 600; color: var(--text); }
.pl-tender-panel .tp-head-actions { display: flex; align-items: center; gap: 4px; }
.pl-tender-panel .tp-open-source {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 6px;
  color: var(--text-2); font-size: 12px; font-weight: 500;
  text-decoration: none;
}
.pl-tender-panel .tp-open-source:hover { background: var(--surface-muted); color: var(--text); }
.pl-tender-panel .tp-close {
  width: 34px; height: 34px; border-radius: 6px;
  background: transparent; border: 0; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-tender-panel .tp-close:hover { background: var(--surface-muted); color: var(--text); }

.pl-tender-panel .tp-tabs {
  display: flex; gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.pl-tender-panel .tp-tab {
  padding: 10px 12px;
  background: transparent; border: 0;
  font-size: 13px; font-weight: 500;
  color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pl-tender-panel .tp-tab:hover { color: var(--text); }
.pl-tender-panel .tp-tab.active {
  color: var(--brand-strong); border-bottom-color: var(--brand); font-weight: 600;
}
.pl-tender-panel .tp-tab-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 10px; font-weight: 600;
  background: var(--surface-muted); color: var(--text-2);
  border-radius: 9999px;
}
.pl-tender-panel .tp-tab.active .tp-tab-badge { background: var(--brand-weak); color: var(--brand-strong); }

.pl-tender-panel .tp-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.pl-tender-panel .tp-pane { display: none; flex: 1; min-height: 0; }
.pl-tender-panel .tp-pane.active { display: flex; flex-direction: column; }
.pl-tender-panel .tp-pane-overview {
  overflow-y: auto;
  padding: 24px;
  gap: 20px;
}

.pl-tender-panel .tp-title {
  font-size: 18px; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0;
}
.pl-tender-panel .tp-match-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600;
  background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0;
  padding: 2px 8px; border-radius: 9999px;
  margin-top: 8px;
}
.pl-tender-panel .tp-cta-row { display: flex; gap: 8px; margin-top: 12px; }
.pl-tender-panel .tp-btn-delegate {
  flex: 1;
  background: linear-gradient(135deg, var(--ai-cyan), var(--ai-blue));
  color: #fff; border: 0; border-radius: 8px; padding: 9px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 2px 6px rgba(14,165,233,.25);
}
.pl-tender-panel .tp-btn-delegate:hover { box-shadow: 0 4px 14px rgba(14,165,233,.35); }
.pl-tender-panel .tp-btn-ask {
  flex: 1;
  background: var(--ai-surface); color: var(--ai-deep);
  border: 1px solid var(--ai-border); border-radius: 8px; padding: 9px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.pl-tender-panel .tp-btn-ask:hover { background: var(--ai-surface-2); }

.pl-tender-panel .tp-match-analysis {
  background: #eff6ff; border: 1px solid #dbeafe; border-radius: 12px; padding: 16px;
}
.pl-tender-panel .tp-match-head { display: flex; align-items: center; justify-content: space-between; }
.pl-tender-panel .tp-match-head h4 {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: #1d4ed8;
}
.pl-tender-panel .tp-match-fit {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600;
  background: #fff; color: #1d4ed8; border: 1px solid #bfdbfe;
  padding: 2px 8px; border-radius: 9999px;
}
.pl-tender-panel .tp-match-score { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px; }
.pl-tender-panel .tp-score-num { font-size: 36px; font-weight: 700; color: #1d4ed8; line-height: 1; }
.pl-tender-panel .tp-score-num .pct { font-size: 18px; }
.pl-tender-panel .tp-score-bar-wrap { flex: 1; }
.pl-tender-panel .tp-score-bar {
  height: 8px; background: #fff; border: 1px solid #dbeafe; border-radius: 9999px; overflow: hidden;
}
.pl-tender-panel .tp-score-bar > div { height: 100%; background: #2563eb; border-radius: 9999px; }
.pl-tender-panel .tp-score-label { font-size: 11px; color: #1d4ed8; margin-top: 4px; }
.pl-tender-panel .tp-score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.pl-tender-panel .tp-score-cell {
  background: #fff; border: 1px solid #dbeafe; border-radius: 8px;
  padding: 6px 10px;
}
.pl-tender-panel .tp-score-cell .lab {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3);
}
.pl-tender-panel .tp-score-cell .val { font-size: 13px; font-weight: 600; color: var(--text); }
.pl-tender-panel .tp-check-list {
  margin-top: 16px; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px; color: var(--text-2); list-style: none;
}
.pl-tender-panel .tp-check-list li { display: flex; gap: 8px; align-items: flex-start; }
.pl-tender-panel .tp-check-list .ok { color: #16a34a; margin-top: 3px; font-size: 10px; }
.pl-tender-panel .tp-check-list .warn { color: #f59e0b; margin-top: 3px; font-size: 10px; }

.pl-tender-panel .tp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pl-tender-panel .tp-fact {
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px;
}
.pl-tender-panel .tp-fact.span-2 { grid-column: span 2; }
.pl-tender-panel .tp-fact .lab {
  font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3);
}
.pl-tender-panel .tp-fact .val { font-size: 13px; font-weight: 600; color: var(--text); margin-top: 4px; }
.pl-tender-panel .tp-fact .sub { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.pl-tender-panel .tp-section h4 {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); margin: 0 0 10px 0;
}
.pl-tender-panel .tp-criteria { display: flex; flex-direction: column; gap: 10px; }
.pl-tender-panel .tp-criteria .row { display: flex; justify-content: space-between; font-size: 13px; }
.pl-tender-panel .tp-criteria .row .n { color: var(--text-2); }
.pl-tender-panel .tp-criteria .row .v { font-weight: 600; color: var(--text); }
.pl-tender-panel .tp-criteria .bar {
  height: 6px; background: #f3f4f6; border-radius: 9999px; overflow: hidden; margin-top: 4px;
}
.pl-tender-panel .tp-criteria .bar > div { height: 100%; border-radius: 9999px; background: var(--brand); }

.pl-tender-panel .tp-timeline { list-style: none; padding: 0; margin: 0; }
.pl-tender-panel .tp-timeline-item { display: flex; align-items: stretch; gap: 12px; }
.pl-tender-panel .tp-timeline-rail {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: 12px; flex-shrink: 0;
}
.pl-tender-panel .tp-timeline-dot {
  width: 12px; height: 12px; border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--surface);
  margin-top: 5px; flex-shrink: 0;
}
.pl-tender-panel .tp-timeline-line { flex: 1; width: 1px; background: var(--border); margin-top: 4px; }
.pl-tender-panel .tp-timeline-content { flex: 1; min-width: 0; padding-bottom: 16px; }
.pl-tender-panel .tp-timeline-content .n { font-size: 13px; font-weight: 500; color: var(--text); }
.pl-tender-panel .tp-timeline-content .d { font-size: 11px; color: var(--text-3); margin-top: 2px; }
.pl-tender-panel .tp-timeline-last .tp-timeline-content { padding-bottom: 0; }

.pl-tender-panel .tp-desc {
  background: var(--surface-muted); border: 1px solid var(--border); border-radius: 8px;
  padding: 14px 16px; font-size: 13px; color: var(--text-2); line-height: 1.6;
}
.pl-tender-panel .tp-desc p { margin: 0; }
.pl-tender-panel .tp-desc p + p { margin-top: 10px; }

.pl-tender-panel .tp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-tender-panel .tp-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 500;
  padding: 2px 8px; border-radius: 9999px;
  border: 1px solid transparent;
}
.pl-tender-panel .tp-tag.blue  { background: #eff6ff; color: #1d4ed8; border-color: #dbeafe; }
.pl-tender-panel .tp-tag.green { background: #f0fdf4; color: #15803d; border-color: #bbf7d0; }
.pl-tender-panel .tp-tag.gray  { background: var(--surface-muted); color: var(--text-2); border-color: var(--border); }

/* Notes pane */
.pl-tender-panel .tp-notes-body {
  flex: 1; overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
}
.pl-tender-panel .tp-notes-empty {
  text-align: center; color: var(--text-3);
  padding: 28px 10px; font-size: 13px;
}
.pl-tender-panel .tp-notes-empty strong { display: block; color: var(--text-2); margin-bottom: 4px; }
.pl-tender-panel .tp-comment { display: flex; gap: 10px; }
.pl-tender-panel .tp-comment .avatar { width: 28px; height: 28px; font-size: 11px; flex-shrink: 0; }
.pl-tender-panel .tp-comment .body { flex: 1; min-width: 0; }
.pl-tender-panel .tp-comment .meta { display: flex; gap: 6px; align-items: baseline; font-size: 12px; }
.pl-tender-panel .tp-comment .author { font-weight: 600; color: var(--text); }
.pl-tender-panel .tp-comment .when { color: var(--text-3); font-size: 11.5px; }
.pl-tender-panel .tp-comment .text { margin-top: 2px; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pl-tender-panel .tp-comment.ai .author { color: var(--ai-deep); }
.pl-tender-panel .tp-comment.ai .text {
  background: var(--ai-surface); border: 1px solid var(--ai-border);
  padding: 8px 10px; border-radius: 8px; color: var(--ai-deep);
}
.pl-tender-panel .tp-notes-footer {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  flex-shrink: 0;
}
.pl-tender-panel .tp-notes-footer textarea {
  width: 100%; resize: none;
  font: inherit; font-size: 13px; color: var(--text);
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  outline: none; min-height: 64px; line-height: 1.4;
}
.pl-tender-panel .tp-notes-footer textarea:focus { border-color: var(--brand); }
.pl-tender-panel .tp-notes-actions {
  display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
}
.pl-tender-panel .tp-notes-hint { font-size: 11.5px; color: var(--text-3); }
.pl-tender-panel .tp-notes-send {
  background: var(--brand); color: #fff; border: 0;
  padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pl-tender-panel .tp-notes-send:hover { background: var(--brand-strong); }

/* ─────────── Mobile stage tabs ─────────── */
.pl-root .stage-tabs {
  display: none;
  gap: 4px; padding: 10px 10px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.pl-root .stage-tab {
  flex: 1 1 0; min-width: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 7px 4px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-2); font-size: 11.5px; font-weight: 500;
  white-space: nowrap; cursor: pointer; overflow: hidden;
}
.pl-root .stage-tab .tab-label {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
/* #1557: the labels used to disappear under 500px, leaving six unlabelled
   numbered circles. The strip now scrolls horizontally instead, so the stage
   NAME is always readable — down to 320px. */
@media (max-width: 560px) {
  .pl-root .stage-tabs {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pl-root .stage-tabs::-webkit-scrollbar { display: none; }
  .pl-root .stage-tab {
    flex: 0 0 auto; padding: 7px 10px; gap: 5px; font-size: 11px;
  }
  .pl-root .stage-tab .tab-label { display: inline; }
}
.pl-root .stage-tab .num {
  width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.pl-root .stage-tab[data-stage="saved"]   .num { background: var(--stage-1); }
.pl-root .stage-tab[data-stage="qualify"] .num { background: var(--stage-2); }
.pl-root .stage-tab[data-stage="draft"]   .num { background: var(--stage-3); }
.pl-root .stage-tab[data-stage="review"]  .num { background: var(--stage-4); }
.pl-root .stage-tab[data-stage="submit"]  .num { background: var(--stage-5); }
.pl-root .stage-tab[data-stage="result"]  .num { background: var(--stage-6); }
.pl-root .stage-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ─────────── Responsive: Mobile (< 768px) ─────────── */
@media (max-width: 767px) {
  body.pipeline-page .center-header { display: flex; }
  body.pipeline-page .mobile-header { display: none; }

  .pl-root .topbar { padding: 8px 12px; gap: 8px; flex-wrap: wrap; }
  .pl-root .topbar-header-actions { display: none; }
  .pl-root .page-title { display: none; }
  .pl-root .search {
    order: 10; flex: 1 1 100%; min-width: 0; margin-top: 4px; max-width: 100%;
  }
  .pl-root .search input { font-size: 14px; }
  .pl-root .topbar .meta-pill:not(.ai) { display: none; }
  .pl-root .density-toggle { display: none; }
  .pl-root .topbar .spacer { display: none; }
  .pl-root .topbar .btn-primary { display: none; }
  .pl-root .topbar .meta-pill.ai { display: none; }
  .pl-root .stages-wrap { display: none; }

  .pl-root .topbar-break {
    display: block; flex-basis: 100%; height: 0; order: 9; width: 100%;
  }

  .pl-root .topbar .filter-toggle {
    order: 11;
    margin: 4px 0 0;
    flex-shrink: 0;
    width: 40px; height: 40px;
    padding: 0;
    justify-content: center;
    background: var(--surface-muted);
  }
  .pl-root .topbar .filter-toggle .ft-label,
  .pl-root .topbar .filter-toggle kbd { display: none; }
  .pl-root .search { flex: 1 1 0 !important; min-width: 0; }

  /* #1552: the pipeline scrolls as ONE page on mobile. It was laid out as a
     desktop-style fixed frame — topbar + (open) filter bar + stage tabs eat
     ~300px of a phone screen and ONLY `.col-body` scrolled, so a touch
     anywhere outside that leftover strip moved nothing and most of the board
     was unreachable. `.pl-root` is now the single scroll container: the bars
     scroll away with the cards, every inner box sizes to its content, and the
     stage tabs stay pinned so switching stage never needs a scroll back up.
     `display: contents` on the topbar wrapper makes the three bars direct
     flex children of .pl-root again (they already declare flex-shrink: 0),
     which is what lets the stage tabs stick to the scroll container. */
  .pl-root {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  .pl-root .pl-topbar-wrap { display: contents; }
  .pl-root .board-scroll { flex: 0 0 auto; overflow: visible; }
  .pl-root .board { flex: 0 0 auto; }
  .pl-root .column { overflow: visible; }
  .pl-root .col-body { flex: 0 0 auto; overflow-y: visible; }
  .pl-root .stage-tabs { position: sticky; top: 0; z-index: 19; }
  /* `relative`, not `static`: the filter dropdowns are absolutely positioned
     with `top: 100%` and use the filter bar as their containing block (it used
     to be `sticky`, which also made it one). Dropping that would send every
     dropdown to the bottom of the page. */
  .pl-root .filter-bar { padding: 10px 12px; position: relative; z-index: 18; }
  .pl-root .filter-summary { gap: 6px; }
  .pl-root .chip { padding: 5px 10px; font-size: 12px; }
  .pl-root .filter-group { position: static; }
  .pl-root .dropdown {
    left: 12px; right: 12px;
    min-width: 0; width: auto;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
  }
  .pl-root .filter-toggle {
    padding: 8px; width: 40px; height: 40px;
    justify-content: center;
  }
  .pl-root .filter-toggle .ft-label,
  .pl-root .filter-toggle kbd { display: none; }
  /* Square icon button on mobile — the active-filter count rides its corner
     instead of widening it. */
  .pl-root .filter-toggle .ft-count {
    position: absolute; top: -6px; right: -6px;
    border: 2px solid var(--surface);
  }
  .pl-root .af-lead { display: none; }
  .pl-root .af-pill-text { max-width: 150px; }
  .pl-root .af-clear { width: 100%; margin-left: 0; margin-top: 2px; }

  .pl-root .board { display: flex; flex-direction: column; gap: 0; padding: 10px; min-width: 0; }
  .pl-root .column { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .pl-root .column:not(.is-active-stage) { display: none; }
  .pl-root .stage-tabs { display: flex; }

  .pl-root .kebab {
    opacity: 1 !important;
    width: 36px; height: 36px;
    background: var(--surface-muted);
    color: var(--text-2);
  }

  .pl-backdrop { display: block; }
  .pl-comments-panel {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    flex: unset;
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2,.7,.3,1);
    z-index: 70;
    box-shadow: none;
    overflow: visible;
    border-left: 0;
  }
  .pl-comments-panel.visible { transform: translateX(0); width: 100%; flex: unset; }
  .pl-comments-panel .cp-inner { width: 100%; }
  .pl-tender-panel {
    width: 100%; max-width: 100%;
    transform: translateX(100%);
    transition: transform 240ms cubic-bezier(.2,.7,.3,1);
    box-shadow: none;
    border-left: 0;
  }
  .pl-tender-panel.visible { transform: translateX(0); width: 100%; }
}

@media (max-width: 520px) {
  .pl-root .toast,
  .pl-toast {
    left: 12px; right: 12px; bottom: 16px;
    transform: translateY(12px); max-width: none;
  }
  .pl-root .toast.visible,
  .pl-toast.visible { transform: translateY(0); }
  .pl-root .toast-undo,
  .pl-toast .pl-toast-undo { min-height: 40px; padding: 8px 14px; }
}

@media (max-width: 420px) {
  .pl-root .topbar { padding: 8px 10px; }
  .pl-root .page-title { font-size: 13.5px; }
  .pl-root .topbar .btn-primary span,
  .pl-root .topbar .btn-primary { white-space: nowrap; }
  .pl-root .board { grid-template-columns: 1fr; padding: 10px; }
  .pl-root .bulk-bar,
  .pl-bulk-bar { left: 10px; right: 10px; transform: none; bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pl-root .meta-pill.ai::before,
  .pl-root .btn-delegate::after,
  .pl-root .ai-status .pulse::after,
  .pl-root .avatar.ai::after { animation: none; }
  .pl-root .card { transition: none; }
}


/* ============================================================
   Canvas Content Styles
   Tender overview, analytics panel, share popover, charts
   ============================================================ */

/* --- Tender Overview --- */
/* #1275: legacy selector — kept harmless. The overview is now a body-only
   fragment (.canvas-tender-overview-body) injected into the shell
   #canvas-body, which owns scroll/height/padding (see layout_styles.py
   .canvas-body). This rule no longer matches the rendered DOM but is left
   in place so any stale references don't break. */
.canvas-tender-overview {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* #1275: body-only tender overview wrapper. Mirrors .mdp-content — plain
   column flow with section gaps; the shell #canvas-body provides the
   scroll container, height and 24px padding. No own header/scroll so
   alerts/chat/calendar/share look identical to explorer/matching. */
.canvas-tender-overview-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.canvas-tender-title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin: 0;
}

.canvas-title-section {
    margin-bottom: 4px;
}

/* --- Match chip --- */
.canvas-match-chip-row {
    margin-top: 8px;
}

.canvas-match-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
    padding: 2px 10px;
    border-radius: 9999px;
}

.canvas-match-chip-icon {
    font-size: 9px;
}

/* --- Action buttons row --- */
.canvas-action-row {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-action-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
    font-family: var(--font-family);
    line-height: 1;
}

.canvas-action-pipeline {
    background: #2563eb;
    color: #fff;
}
.canvas-action-pipeline:hover {
    background: #1d4ed8;
}
.canvas-pipeline-saved {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.canvas-pipeline-saved:hover {
    background: #dcfce7;
}

.canvas-action-ask-ai {
    background: #fff;
    color: #374151;
    border-color: #e5e7eb;
}
.canvas-action-ask-ai:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}
.canvas-ask-ai-icon {
    font-size: 11px;
    color: #2563eb;
}

.canvas-action-share {
    flex: 0;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    background: #fff;
    color: #374151;
    border-color: #e5e7eb;
    font-size: 14px;
}
.canvas-action-share:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

.canvas-action-full {
    flex: 1;
    width: 100%;
}

/* --- Share popover --- */
.canvas-share-group {
    position: relative;
}

.canvas-share-popover {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 8px;
    width: 224px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.04);
    padding: 6px 0;
    z-index: 20;
    font-size: 14px;
}

.canvas-share-popover.hidden {
    display: none;
}

.canvas-share-header {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.canvas-share-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: var(--font-family);
    transition: background 100ms ease;
    text-align: left;
}
.canvas-share-item:hover {
    background: #f9fafb;
}

.canvas-share-icon {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
}
.canvas-share-icon-linkedin { color: #2563eb; }
.canvas-share-icon-x { color: #374151; }
.canvas-share-icon-facebook { color: #2563eb; }
.canvas-share-icon-whatsapp { color: #16a34a; }
.canvas-share-icon-email { color: #6b7280; }

.canvas-share-divider {
    margin: 4px 0;
    border-top: 1px solid #f3f4f6;
}

/* --- Open source link in header --- */
.canvas-open-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: background 100ms ease;
}
.canvas-open-source-link:hover {
    background: #f3f4f6;
}
.canvas-open-source-icon {
    font-size: 11px;
}

/* --- Facts grid --- */
.canvas-facts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.canvas-fact-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

.canvas-fact-full {
    grid-column: span 2;
}

.canvas-fact-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 500;
    margin: 0 0 4px 0;
}

.canvas-fact-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    word-break: break-word;
}

.canvas-fact-value-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.canvas-fact-meta {
    font-size: 11px;
    color: #6b7280;
    margin: 4px 0 0 0;
}

/* --- Deadline badges --- */
.canvas-deadline-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 9999px;
}
.canvas-deadline-normal {
    background: #eff6ff;
    color: #1d4ed8;
}
.canvas-deadline-urgent {
    background: #fef2f2;
    color: #dc2626;
}
.canvas-deadline-expired {
    background: #f3f4f6;
    color: #6b7280;
}

/* --- AI Match Analysis section --- */
.canvas-match-section {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}

.canvas-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.canvas-match-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #1d4ed8;
    margin: 0;
}

.canvas-match-icon {
    font-size: 10px;
}

.canvas-match-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    background: #fff;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
    padding: 2px 8px;
    border-radius: 9999px;
}

.canvas-match-score-row {
    margin-top: 12px;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.canvas-match-score-big {
    font-size: 36px;
    font-weight: 700;
    color: #1d4ed8;
    line-height: 1;
    margin: 0;
}
.canvas-match-score-pct {
    font-size: 20px;
}

.canvas-match-bar-wrap {
    flex: 1;
}
.canvas-match-bar {
    height: 8px;
    background: #fff;
    border-radius: 9999px;
    overflow: hidden;
    border: 1px solid #bfdbfe;
}
.canvas-match-bar-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 9999px;
}
.canvas-match-bar-label {
    font-size: 11px;
    color: #1d4ed8;
    margin: 4px 0 0 0;
}

.canvas-match-subgrid {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.canvas-match-subcard {
    background: #fff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 8px 10px;
}

.canvas-match-sublabel {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

.canvas-match-subvalue {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.canvas-match-insights {
    margin-top: 16px;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.canvas-match-insight {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    color: #374151;
}
.canvas-match-insight-ok {
    color: #16a34a;
    margin-top: 4px;
    font-size: 10px;
    flex-shrink: 0;
}
.canvas-match-insight-warn {
    color: #d97706;
    margin-top: 4px;
    font-size: 10px;
    flex-shrink: 0;
}

/* --- Canvas sections --- */
.canvas-section {
    margin-top: 20px;
}

.canvas-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin: 0 0 8px 0;
}

/* --- Evaluation criteria --- */
.canvas-eval-item {
    margin-bottom: 8px;
}

.canvas-eval-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 4px;
}

.canvas-eval-name {
    color: #374151;
}

.canvas-eval-weight {
    font-weight: 600;
    color: #111827;
}

.canvas-eval-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}

.canvas-eval-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 9999px;
}

/* --- Description (expandable) --- */
.canvas-desc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}
.canvas-desc-header .canvas-section-title {
    margin: 0;
}

/* #1383: on-demand translate toggle next to the Description header */
.canvas-translate-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 12px;
    font-family: var(--font-family);
    transition: background 0.15s ease, color 0.15s ease;
}
.canvas-translate-btn:hover {
    background: #dbeafe;
    color: #1d4ed8;
}
.canvas-translate-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.canvas-desc-wrap {
    position: relative;
}

.canvas-desc-text {
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    /* Descriptions are plain text with real newlines (HTML tags are
       stripped server-side) — keep the paragraph breaks visible. */
    white-space: pre-line;
}

.canvas-desc-collapsed {
    max-height: 120px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}

.canvas-desc-expanded {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.canvas-desc-toggle {
    display: block;
    margin-top: 8px;
    background: none;
    border: none;
    color: #2563eb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-family);
}
.canvas-desc-toggle:hover {
    color: #1d4ed8;
}

/* === Project timeline (vertical with colored dots) === */
.timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.timeline-item {
    display: flex;
    align-items: stretch;
    gap: 12px;
}
.timeline-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 12px;
}
.timeline-dot {
    width: 12px;
    height: 12px;
    border-radius: 9999px;
    box-shadow: 0 0 0 2px #fff;
    margin-top: 5px;
    flex-shrink: 0;
}
.timeline-dot-blue {
    background: #2563eb;
}
.timeline-dot-blue-light {
    background: #60a5fa;
}
.timeline-dot-gray {
    background: #d1d5db;
}
.timeline-line {
    flex: 1;
    width: 1px;
    background: #e5e7eb;
    margin-top: 4px;
}
.timeline-content {
    flex: 1;
    min-width: 0;
    padding-bottom: 16px;
}
.timeline-last .timeline-content { padding-bottom: 0; }
.timeline-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin: 0;
}
.timeline-date {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
}

/* === Match chip row === */
.match-chip-row {
    margin-top: 8px;
}

/* --- Tags --- */
.canvas-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.canvas-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid;
}
.canvas-tag-icon {
    font-size: 9px;
}
.canvas-tag-green {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}
.canvas-tag-eu {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}
.canvas-tag-default {
    background: #f9fafb;
    color: #374151;
    border-color: #e5e7eb;
}

/* ============================================================
   Analytics Panel Styles
   ============================================================ */

.canvas-analytics-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The analytics scroll body reuses the shared `.canvas-body` class, which
   ships a 24px padding meant for the tender-overview content. The analytics
   panel, however, supplies its own internal spacing — the tab bar
   (`.analytics-tabs`, padding 0 20px, full-bleed border + background) and the
   content below (`.canvas-analytics-body-inner`, padding 20px). The inherited
   24px therefore inset the tab bar from the panel edges, leaving a white
   border above and on both sides of the Overview/Contracts/Strategy tabs
   (ticket #1355). Drop the padding so the content fills the right pane edge
   to edge; the inner wrappers keep their own breathing room. */
#analytics-body.canvas-body {
    padding: 0;
}

.canvas-analytics-subtitle {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.2;
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-header-left-analytics {
    min-width: 0;
    flex: 1;
}

.canvas-analytics-body-inner {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.canvas-analytics-footer {
    padding-top: 12px;
}

/* Analytics tabs (inherits from prototype .analytics-tabs).
   #1557 — same fix as .canvas-tab-bar: scroll instead of squeezing, so the
   active tab is never clipped on a phone. */
.analytics-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.analytics-tabs::-webkit-scrollbar {
    display: none;
}
.analytics-tab {
    flex: 0 0 auto;
}

.analytics-tab {
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 100ms ease;
}
.analytics-tab:hover {
    color: #374151;
}
.analytics-tab.active {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.canvas-tab-icon {
    font-size: 10px;
    margin-right: 2px;
}

/* --- KPI cards --- */
.canvas-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.canvas-kpi-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.canvas-kpi-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
}

.canvas-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    font-weight: 500;
    margin: 0;
}

.canvas-kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin: 4px 0 0 0;
}

/* --- Donut chart (CSS conic-gradient) --- */
.canvas-donut {
    --p: 0;
    --c: #2563eb;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--c) calc(var(--p) * 1%), #e5e7eb 0);
    display: grid;
    place-items: center;
    position: relative;
    flex-shrink: 0;
}
.canvas-donut::before {
    content: "";
    position: absolute;
    inset: 18%;
    background: #fff;
    border-radius: 50%;
}
.canvas-donut > .donut-center {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 1;
}
.canvas-donut .donut-value {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
}
.canvas-donut .donut-label {
    font-size: 10px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 3px;
}

/* --- Sector row (donut + bars side by side) --- */
.canvas-sector-row {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}

.canvas-cpv-bars {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Horizontal bar chart --- */
.hbar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.hbar .hbar-track {
    flex: 1;
    height: 6px;
    background: #f3f4f6;
    border-radius: 9999px;
    overflow: hidden;
}
.hbar .hbar-fill {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 9999px;
}
.hbar .hbar-label {
    min-width: 90px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbar .hbar-count {
    width: 64px;
    text-align: right;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.canvas-hbar-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* --- Vertical bar chart --- */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 100%;
}
.bar-chart .bar {
    flex: 1;
    background: linear-gradient(180deg, #3b82f6 0%, #60a5fa 100%);
    border-radius: 4px 4px 0 0;
    position: relative;
    min-height: 4px;
}
.bar-chart .bar::after {
    content: attr(data-value);
    position: absolute;
    top: -18px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #6b7280;
    font-weight: 600;
}
.bar-chart .bar .bar-label {
    position: absolute;
    bottom: -18px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10px;
    color: #9ca3af;
}

.canvas-bar-chart-wrap {
    height: 128px;
    padding: 16px 4px 24px 4px;
}

/* --- Legend --- */
.canvas-legend-list {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.canvas-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
}

.canvas-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.canvas-legend-label {
    flex: 1;
}

.canvas-legend-count {
    color: #6b7280;
}

/* --- List cards (contracts, similar companies, partners) --- */
.canvas-list-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.canvas-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background 100ms ease;
}
.canvas-list-row:last-child {
    border-bottom: none;
}
.canvas-list-row:hover {
    background: #f9fafb;
}

.canvas-list-name {
    font-size: 14px;
    color: #1f2937;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-list-sub {
    font-size: 11px;
    color: #6b7280;
    margin: 2px 0 0 0;
}

.canvas-list-meta {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
    margin-left: 8px;
}

.canvas-list-value-bold {
    font-weight: 600;
    color: #111827;
}

.canvas-list-info {
    min-width: 0;
    flex: 1;
}

/* --- Contract rows --- */
.canvas-contract-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f3f4f6;
}
.canvas-contract-row:last-child {
    border-bottom: none;
}

.canvas-contract-info {
    min-width: 0;
    flex: 1;
}

.canvas-contract-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-contract-meta {
    font-size: 11px;
    color: #6b7280;
    margin: 2px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.canvas-contract-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

.canvas-contract-value-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

/* --- Tender status badges --- */
.canvas-tender-status {
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
}
.canvas-tender-active {
    background: #f0fdf4;
    color: #15803d;
}
.canvas-tender-closed {
    background: #f3f4f6;
    color: #6b7280;
}

/* --- Section header row (with count) --- */
.canvas-section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.canvas-section-count {
    font-size: 11px;
    color: #6b7280;
}

/* --- Characteristics grid --- */
.canvas-char-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.canvas-char-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.canvas-char-icon {
    color: #9ca3af;
    font-size: 12px;
    width: 16px;
    text-align: center;
}

.canvas-char-info {
    flex: 1;
    min-width: 0;
}

.canvas-char-label {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
}

.canvas-char-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.canvas-char-pct {
    font-size: 11px;
    color: #6b7280;
    font-weight: 400;
}

/* --- Authority details --- */
.canvas-auth-details {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.canvas-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: #4b5563;
}

.canvas-auth-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 8px;
}

.canvas-auth-value {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

/* --- Empty state message --- */
.canvas-empty-msg {
    font-size: 14px;
    color: #6b7280;
    text-align: center;
    padding: 40px 20px;
}

/* --- Empty state (no data for whole panel / section) --- */
.canvas-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 56px 24px;
    text-align: center;
}

.canvas-empty-state .canvas-empty-msg {
    padding: 0;
    max-width: 340px;
}

.canvas-empty-icon {
    font-size: 30px;
    color: #cbd5e1;
}

/* --- Chart card --- */
.chart-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 16px;
    background: #fff;
}

/* --- Info chip --- */
.info-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #374151;
}
.info-chip.success {
    background: #ecfdf5;
    border-color: #a7f3d0;
    color: #047857;
}
.info-chip.info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1d4ed8;
}

/* === Horizontal-bar rows for Geographic / Authorities charts === */
.hbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 120ms ease;
}
.hbar-row:hover { background: #f8fafc; }
.hbar-row .hb-label {
    width: 130px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hbar-row .hb-track {
    flex: 1;
    height: 14px;
    background: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}
.hbar-row .hb-fill {
    height: 100%;
    background: #2563eb;
    border-radius: 4px;
    transition: filter 150ms ease;
}
.hbar-row:hover .hb-fill { filter: brightness(1.15); }
.hbar-row .hb-count {
    width: 40px;
    text-align: right;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

/* === Chart tooltip (single global element, follows cursor) === */
.chart-tooltip {
    position: fixed;
    pointer-events: none;
    background: #111827;
    color: #fff;
    font-size: 11px;
    padding: 6px 9px;
    border-radius: 6px;
    box-shadow: 0 8px 20px -6px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translate(-50%, calc(-100% - 10px));
    transition: opacity 120ms ease;
    z-index: 100;
    max-width: 240px;
    line-height: 1.4;
    white-space: normal;
}
.chart-tooltip.visible { opacity: 1; }
.chart-tooltip .tt-label { font-weight: 600; color: #fff; }
.chart-tooltip .tt-sub   { color: #cbd5e1; margin-top: 1px; }
.chart-tooltip .tt-value { color: #93c5fd; font-weight: 700; }
.chart-tooltip::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #111827;
}

/* === Analytics tabs === */
.analytics-tabs {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
    .canvas-open-source-text {
        display: none;
    }

    .canvas-facts-grid {
        grid-template-columns: 1fr;
    }

    .canvas-fact-full {
        grid-column: span 1;
    }

    .canvas-kpi-grid {
        grid-template-columns: 1fr 1fr;
    }
    .canvas-kpi-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .canvas-sector-row {
        flex-direction: column;
        align-items: center;
    }

    .canvas-char-grid {
        grid-template-columns: 1fr;
    }

    .canvas-action-row {
        flex-wrap: wrap;
    }

    .canvas-match-subgrid {
        grid-template-columns: 1fr;
    }
}

/* --- Project timeline --- */
.canvas-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding-left: 8px;
}

.canvas-timeline-item {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    position: relative;
}

.canvas-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: -6px;
    width: 1px;
    background: #e5e7eb;
}

.canvas-timeline-marker {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    z-index: 1;
}

.canvas-timeline-marker-past {
    background: #dcfce7;
    border-color: #86efac;
    color: #16a34a;
}

.canvas-timeline-marker-future {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #6b7280;
}

.canvas-timeline-icon {
    font-size: 10px;
}

.canvas-timeline-content {
    flex: 1;
    padding: 1px 0;
}

.canvas-timeline-date {
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
}

.canvas-timeline-label {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* === Buyer analytics — patterns, efficiency, charts (ticket #1324) === */

/* Procurement patterns — 6 metric cards in a 2-col grid */
.canvas-pattern-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.canvas-pattern-card {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fff;
    transition: border-color 120ms ease;
}
.canvas-pattern-card:hover { border-color: #cbd5e1; }
.canvas-pattern-icon {
    color: #2563eb;
    font-size: 12px;
    width: 16px;
    text-align: center;
    margin-top: 3px;
    flex-shrink: 0;
}
.canvas-pattern-text { flex: 1; min-width: 0; }
.canvas-pattern-label {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
}
.canvas-pattern-value {
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin: 1px 0;
}
.canvas-pattern-sub {
    font-size: 10px;
    color: #9ca3af;
    margin: 0;
}

/* Procurement efficiency — 4 metric cards on a soft background */
.canvas-eff-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.canvas-eff-card {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
}
.canvas-eff-label {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
}
.canvas-eff-value {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin: 1px 0;
}
.canvas-eff-sub {
    font-size: 10px;
    color: #9ca3af;
    margin: 0;
}

/* Chart card — wraps a SVG chart with a title and optional legend */
.canvas-chart-card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
    margin-bottom: 12px;
}
.canvas-chart-card:last-child { margin-bottom: 0; }
.canvas-chart-card-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
}
.canvas-chart-card-sub {
    font-size: 11px;
    color: #6b7280;
    margin: -4px 0 8px 0;
}
.canvas-chart-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.canvas-chart-pie-wrap { flex-shrink: 0; }
.canvas-chart-legend {
    flex: 1;
    min-width: 180px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.canvas-chart-bars {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* SVG segment / dot hover affordances */
.ix-seg { cursor: pointer; transition: opacity 150ms ease; }
.ix-seg:hover { opacity: 0.82; }
.ix-dot-hit { cursor: pointer; fill: transparent; }
.ix-dot-visible { transition: r 120ms ease; }
.ix-dot-hit:hover + .ix-dot-visible,
.ix-dot-visible:hover { r: 5.5; }
.ix-legend {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background 120ms ease;
}
.ix-legend:hover { background: #f3f4f6; }

/* Top suppliers — secondary text list under the bars */
.canvas-supplier-details {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.canvas-supplier-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: #6b7280;
}
.canvas-supplier-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.canvas-supplier-value {
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
}

/* Partnership network header stats ("X partners · Y shared wins") */
.canvas-partners-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
}
.canvas-partners-stat {
    color: #6b7280;
}
.canvas-partners-stat strong,
.canvas-partners-stat b {
    color: #111827;
    font-weight: 600;
}
.canvas-partners-sep {
    color: #d1d5db;
}

/* Performance Analytics block (seller overview, ticket #1325) */
.canvas-perf-section {
    margin-top: 24px;
}
.canvas-perf-header {
    border-left: 4px solid #2563eb;
    padding-left: 12px;
    margin-bottom: 12px;
}
.canvas-perf-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}
.canvas-perf-sub {
    margin: 2px 0 0;
    font-size: 11px;
    color: #6b7280;
}

/* Stacked horizontal bar (Contract Categories) */
.canvas-chart-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.canvas-chart-card-sub-right {
    margin: 0;
    font-size: 11px;
    color: #6b7280;
}
.canvas-chart-card-hint {
    margin-top: 8px;
    font-size: 10px;
    color: #9ca3af;
}
.canvas-stack-bar {
    position: relative;
    height: 24px;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 8px;
}
.canvas-stack-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    cursor: pointer;
    transition: filter 150ms ease;
}
.canvas-stack-seg:hover { filter: brightness(1.12); }
.canvas-stack-legend {
    margin-top: 10px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 16px;
}
.canvas-legend-count-inline {
    color: #6b7280;
    font-weight: 500;
}

/* Share button + popover on the analytics-panel header */
.canvas-share-group { position: relative; display: inline-flex; }
.canvas-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.canvas-share-btn:hover { background: #f3f4f6; color: #111827; }
.canvas-share-icon { font-size: 11px; }
.canvas-share-popover {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
    padding: 6px 0;
    z-index: 60;
}
.canvas-share-popover.hidden { display: none; }
.canvas-share-head {
    padding: 6px 12px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #6b7280;
}
.canvas-share-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #374151;
    font-size: 13px;
    text-align: left;
    text-decoration: none;
    font-family: var(--font-family);
}
.canvas-share-item:hover { background: #f9fafb; }
.canvas-share-link-icon {
    color: #2563eb;
    font-size: 12px;
    width: 18px;
    text-align: center;
}
.canvas-share-sep {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}

@media (max-width: 768px) {
    .canvas-pattern-grid,
    .canvas-eff-grid { grid-template-columns: 1fr; }
    .canvas-chart-row { flex-direction: column; align-items: center; }
    .canvas-chart-legend { width: 100%; }
}


/* ============================================================
   NOTIFICATIONS — Bell, popover, items
   ============================================================ */

/* === Center pane top header bar === */
.center-header {
    height: 56px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 0 20px;
    flex-shrink: 0;
    background: var(--surface);
}

/* #1557 — the canvas (tender detail) panel overlays this header on phones and
   tablets, and its close X lands right on top of the notification bell.
   Closing the panel used to leave the finger over the freshly-exposed bell,
   so the browser's synthesized click/hover opened the notifications popover.
   closeCanvas() stamps this class on the header for a few hundred ms, which
   swallows that one ghost event without affecting anything else. */
.header-tap-shield,
.header-tap-shield * {
    pointer-events: none !important;
}

.center-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.center-header-right {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Mobile menu button inside center header (hidden on desktop) */
.center-header-mobile-menu {
    display: none;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
}
.center-header-mobile-menu:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-2);
}
.center-header-mobile-menu svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Page title inside center header */
.center-header-title {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Generic header icon button (bell, canvas toggle) - text-only, no border */
.center-header-btn {
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
}
.center-header-btn:hover {
    background: #f3f4f6;
    color: #4b5563;
}
.center-header-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* === Notification group (hover container) === */
.notif-group {
    position: relative;
}

/* Hide notifications when user is not authenticated */
.center-header[data-authenticated="false"] .notif-group {
    display: none;
}

/* === Unread dot on bell === */
.notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2563eb;
    box-shadow: 0 0 0 2px #ffffff;
    pointer-events: none;
}
/* Hide unread dot when all-read */
.notif-group.all-read #notif-dot,
.notif-group.all-read .notif-dot {
    display: none;
}
.notif-group.all-read .notif-unread-dot {
    display: none;
}
.notif-group.all-read .notif-item.unread p {
    color: #6b7280;
}
.notif-group.all-read #notif-list .notif-item.unread p.font-semibold {
    font-weight: 500;
}

/* === Notification popover === */
.notif-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    width: 320px;
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    pointer-events: none;
}

/* Reveal on keyboard focus or explicit tap (.open toggled by JS). */
.notif-group:focus-within .notif-menu,
.notif-group.open .notif-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Hover-reveal ONLY on real pointer devices. Touch devices keep a sticky
   :hover on the last-tapped element, so when the canvas "Overview" panel
   (whose close X overlaps the notification bell) is dismissed, the bell
   inherited the stuck hover and the popover popped open on its own. Gating
   hover behind `(hover: hover)` stops that on phones/tablets; touch users
   open the popover by tapping the bell (the `.open` toggle above). */
@media (hover: hover) and (pointer: fine) {
    .notif-group:hover .notif-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }
}

.notif-popover-inner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card-hover);
    font-size: 13px;
    overflow: hidden;
}

/* === Popover header === */
.notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.notif-header-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.notif-mark-read-btn {
    font-size: 11px;
    color: var(--brand);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--transition-fast);
}
.notif-mark-read-btn:hover {
    color: var(--brand-strong);
}

/* === Notification list === */
.notif-list {
    max-height: 320px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

/* === Single notification item === */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: var(--text-3);
    transition: background var(--transition-fast);
    cursor: pointer;
}
.notif-item:hover {
    background: var(--panel);
}

/* Unread item: slightly bolder text */
.notif-item.unread .notif-text {
    color: var(--text-2);
}

/* Unread dot */
.notif-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
    margin-top: 5px;
}

/* Spacer for read items (keeps alignment) */
.notif-spacer {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    margin-top: 5px;
}

/* Notification content */
.notif-content {
    min-width: 0;
    flex: 1;
}

.notif-text {
    font-size: 13px;
    color: var(--text-3);
    line-height: 1.45;
    margin: 0;
}

.notif-bold {
    font-weight: 600;
}

.notif-time {
    font-size: 11px;
    color: var(--text-muted);
    margin: 3px 0 0 0;
}

/* === Empty state === */
.notif-empty {
    padding: 24px 14px;
    text-align: center;
}

.notif-empty-icon {
    font-size: 24px;
    color: var(--border-strong);
    margin-bottom: 8px;
}

.notif-empty-text {
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* Shown when the in-app master switch is off, so the empty bell is
   explained rather than looking broken. */
.notif-empty-link {
    display: inline-block;
    margin-top: 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
}
.notif-empty-link:hover {
    text-decoration: underline;
}

/* === Full-page notification centre (/notifications) === */
.notif-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

.notif-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.notif-page-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.notif-page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin: 4px 0 0 0;
}

.notif-page-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.notif-page-list .notif-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.notif-page-list .notif-item:last-child {
    border-bottom: none;
}

.notif-page-empty {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 48px 20px;
}

@media (max-width: 768px) {
    .notif-page {
        padding: 20px 14px 40px;
    }
    .notif-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
}

/* === Footer === */
.notif-footer {
    border-top: 1px solid var(--border);
}

.notif-show-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--brand);
    text-decoration: none;
    transition: background var(--transition-fast);
}
.notif-show-all:hover {
    background: var(--panel);
}

/* === Mobile responsive === */
@media (max-width: 768px) {
    /* Show the mobile menu button in center header */
    .center-header-mobile-menu {
        display: flex;
    }

    /* Hide canvas toggle on mobile — only one panel button */
    #reopen-canvas-btn {
        display: none;
    }

    /* Adjust popover for small screens */
    .notif-menu {
        width: calc(100vw - 32px);
        right: -8px;
    }
}

@media (max-width: 480px) {
    .notif-menu {
        width: calc(100vw - 24px);
        right: -4px;
    }
}


/* === Company card on the chat results stream === */
.insight-card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  margin-bottom: 8px;
}
.insight-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.insight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #eff6ff;
  color: #2563eb;
  flex-shrink: 0;
}
.insight-icon i { font-size: 14px; }
.insight-name {
  flex: 1;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.insight-role-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  background: #f3f4f6;
  padding: 3px 8px;
  border-radius: 999px;
}
.insight-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}
.insight-kpi-label {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.insight-kpi-value {
  margin: 2px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}
.insight-countries {
  margin: 8px 0 0;
  font-size: 11px;
  color: #6b7280;
}
.insight-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 0;
}

/* When the chat thread is narrow (canvas open or mobile), keep insight
   cards readable by stacking KPIs vertically and letting the long
   company name wrap instead of being truncated. See ticket #1216. */
@container center (max-width: 760px) {
  .insight-card-head {
    flex-wrap: wrap;
  }
  .insight-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
  .insight-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .insight-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .insight-actions .cc-overview-btn,
  .insight-actions .cc-askai-btn {
    width: 100%;
    justify-content: center;
  }
}
@container center (max-width: 480px) {
  .insight-kpis {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .insight-card-head {
    flex-wrap: wrap;
  }
  .insight-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    word-break: break-word;
  }
  .insight-kpis {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .insight-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .insight-actions .cc-overview-btn,
  .insight-actions .cc-askai-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .insight-kpis {
    grid-template-columns: 1fr;
  }
}

/* === Insights Page Layout === */
.insights-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

/* === Insights Hero === */
.insights-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
}

.insights-hero-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: #dbeafe;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1d4ed8;
  margin-bottom: 24px;
}
.insights-hero-badge svg {
  width: 24px;
  height: 24px;
}

.insights-hero-title {
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin: 0;
}

.insights-hero-subtitle {
  margin-top: 16px;
  font-size: 15px;
  color: #6b7280;
  max-width: 440px;
  line-height: 1.6;
}

/* === Insights Input Area === */
.insights-input-area {
  flex-shrink: 0;
  padding: 0 24px 24px 24px;
  width: 100%;
}

/* === Insights Suggestion Chips === */
.insights-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  overflow-x: auto;
  flex-wrap: wrap;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: center;
}
.insights-chips::-webkit-scrollbar {
  display: none;
}

.insights-suggestion-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #bfdbfe;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  line-height: 1.3;
}
.insights-suggestion-chip:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.1);
}

.insights-chip-icon {
  font-size: 11px;
  opacity: 0.8;
}

/* When messages are visible, hero hides */
.insights-main .messages-container:not(.hidden) ~ .insights-input-area {
  padding-top: 0;
}
.insights-main .messages-container:not(.hidden) ~ .insights-input-area .insights-chips {
  justify-content: flex-start;
}

/* === Responsive === */
@media (max-width: 768px) {
  .insights-hero {
    padding: 32px 16px;
  }
  .insights-hero-badge {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    margin-bottom: 20px;
  }
  .insights-hero-badge svg {
    width: 20px;
    height: 20px;
  }
  .insights-hero-title {
    font-size: 26px;
  }
  .insights-hero-subtitle {
    font-size: 14px;
    margin-top: 12px;
  }
  .insights-input-area {
    /* Respect iOS/Android safe-area + Chrome bottom toolbar so the
       composer + chips stay above browser UI. */
    padding: 0 16px max(16px, env(safe-area-inset-bottom)) 16px;
  }
  .insights-chips {
    gap: 6px;
  }
  .insights-suggestion-chip {
    font-size: 12px;
    padding: 6px 12px;
  }
}

@media (max-width: 480px) {
  .insights-hero {
    padding: 24px 12px;
  }
  .insights-input-area {
    padding: 0 12px max(12px, env(safe-area-inset-bottom)) 12px;
  }
  .insights-suggestion-chip {
    font-size: 11px;
    padding: 5px 10px;
  }
}

/* === Analytics canvas bar rows (#1557) ===
   The CPV / sector / supplier bar rows are flex rows of
   [label | track | count]. Both the label and the count are shrinkable by
   default, so inside the narrow mobile canvas the count ("12 (35%)") was
   squeezed below its own text width and clipped. Lock the count to its
   content, let the LABEL absorb the shortfall, and drop the label's desktop
   min-width so the row keeps fitting all the way down to 320px.
   Loaded after canvas_styles.py, so these win at equal specificity. */
.canvas-hbar-list .hbar-count,
.canvas-cpv-bars .hbar-count,
.hbar .hbar-count {
  flex: 0 0 auto;
  white-space: nowrap;
}
.hbar-row .hb-count {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .canvas-cpv-bars {
    min-width: 0;
    width: 100%;
  }
  .hbar .hbar-label {
    min-width: 0;
    flex: 1 1 auto;
  }
  .hbar .hbar-track {
    flex: 1 1 40px;
    min-width: 40px;
  }
  .hbar .hbar-count {
    width: auto;
    min-width: 44px;
  }
  .hbar-row .hb-label {
    width: auto;
    flex: 1 1 45%;
    min-width: 0;
  }
  .hbar-row .hb-track {
    flex: 1 1 40px;
    min-width: 40px;
  }
  .hbar-row .hb-count {
    width: auto;
    min-width: 32px;
  }
}