/* ============================================================================
   SLAM app header extras (extracted verbatim from base.html's second giant
   inline <style> block during the Phase-2 shell consolidation).
   Cascade position: loaded AFTER the Font Awesome CDN stylesheet and BEFORE
   the slam/components.css override layer — identical to where the inline
   block used to sit.
   Contents: helper omnisearch, notification/menu polish, page progress bar.
   ============================================================================ */

    /* Helper Assistant omnisearch (header) */
    .helper-omnisearch {
      position: relative;
      min-width: 240px;
      max-width: 380px;
      flex: 0 1 300px;
    }
    .helper-omnisearch-input {
      width: 100%;
      padding: 6px 10px 6px 30px;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.15);
      background: rgba(255, 255, 255, 0.9);
      font-size: 0.88rem;
      line-height: 1.2;
    }
    .helper-omnisearch-input:focus {
      outline: none;
      border-color: var(--slam-accent);
      box-shadow: 0 0 0 2px rgba(var(--slam-accent-rgb), 0.18);
      background: #fff;
    }
    .helper-omnisearch-icon {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(0, 0, 0, 0.45);
      pointer-events: none;
    }
    .global-guide-me-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 1px solid rgba(var(--slam-accent-rgb), 0.25);
      background: rgba(var(--slam-accent-rgb), 0.10);
      color: var(--slam-accent);
      border-radius: 8px;
      padding: 5px 9px;
      font-size: 0.84rem;
      line-height: 1.2;
      cursor: pointer;
      white-space: nowrap;
    }
    .global-guide-me-btn[hidden] { display: none !important; }
    /* Infotip: small hoverable info icon used next to labels/headers.
       Usage: <i class="fas fa-circle-info slam-infotip" data-bs-toggle="tooltip" title="..."></i> */
    .slam-infotip {
      font-size: 0.78em;
      color: var(--bs-secondary-color, #6c757d);
      opacity: 0.65;
      cursor: help;
      vertical-align: baseline;
    }
    .slam-infotip:hover { opacity: 1; }
    /* Page guide banner: plain-language "what this page is for / what to do
       next" panel shown at the top of a page. Dismissible per page (a slim
       "Page guide" pill restores it) and can launch the page's Guide Me tour.
       Markup contract:
         <div class="slam-page-guide" data-page-guide>
           <div class="spg-what">…one sentence purpose…</div>
           <div class="spg-flow">…numbered workflow steps…</div>
           <div class="spg-next">…links to the next pages in the workflow…</div>
         </div> */
    .slam-page-guide {
      position: relative;
      border: 1px solid rgba(var(--slam-accent-rgb, 13, 110, 253), 0.25);
      border-left: 4px solid var(--slam-accent, #0d6efd);
      background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.05);
      border-radius: .5rem;
      padding: .65rem .9rem;
      margin-bottom: 1rem;
      font-size: .875rem;
    }
    .slam-page-guide .spg-what { font-weight: 600; }
    .slam-page-guide .spg-what .fa-map-signs { color: var(--slam-accent, #0d6efd); margin-right: .4rem; }
    .slam-page-guide .spg-flow {
      color: var(--bs-secondary-color, #6c757d);
      margin-top: .15rem;
    }
    .slam-page-guide .spg-flow .spg-step {
      display: inline-block;
      margin-right: .35rem;
    }
    .slam-page-guide .spg-flow .spg-step + .spg-step::before {
      content: "\2192"; /* → */
      margin-right: .35rem;
      opacity: .5;
    }
    .slam-page-guide .spg-next { margin-top: .25rem; }
    .slam-page-guide .spg-next a { text-decoration: none; }
    .slam-page-guide .spg-actions {
      position: absolute;
      top: .4rem;
      right: .5rem;
      display: flex;
      gap: .35rem;
      align-items: center;
    }
    .slam-page-guide .spg-guide-btn {
      border: 1px solid rgba(var(--slam-accent-rgb, 13, 110, 253), 0.35);
      background: transparent;
      color: var(--slam-accent, #0d6efd);
      border-radius: .4rem;
      font-size: .76rem;
      padding: .1rem .5rem;
      line-height: 1.4;
    }
    .slam-page-guide .spg-guide-btn:hover { background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.12); }
    .slam-page-guide .spg-dismiss {
      border: 0;
      background: transparent;
      color: var(--bs-secondary-color, #6c757d);
      font-size: .9rem;
      line-height: 1;
      padding: .15rem .3rem;
    }
    .slam-page-guide .spg-dismiss:hover { color: var(--bs-body-color, #000); }
    /* A dismissed guide is drawn as the "Page guide" pill by the banner itself.
       base.html sets the class on <html> from <head>, before first paint: a
       banner that renders full size and then collapses shifts the whole page. */
    html.slam-page-guide-hidden [data-page-guide] {
      display: inline-flex;
      align-items: center;
      gap: .35rem;
      border: 1px dashed rgba(var(--slam-accent-rgb, 13, 110, 253), 0.45);
      color: var(--slam-accent, #0d6efd);
      background: transparent;
      border-radius: 1rem;
      font-size: .76rem;
      padding: .15rem .6rem;
      margin-bottom: .75rem;
      cursor: pointer;
    }
    html.slam-page-guide-hidden [data-page-guide] > * { display: none; }
    html.slam-page-guide-hidden [data-page-guide]::before {
      content: "\f277"; /* fa-map-signs */
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
    }
    html.slam-page-guide-hidden [data-page-guide]::after { content: "Page guide"; }
    html.slam-page-guide-hidden [data-page-guide]:hover { background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.08); }
    /* HSE page toolbar: separates the buttons that CREATE something from the
       buttons that just take you somewhere.

       Users could not tell authoring apart from consuming on HSE pages, and
       button colour alone is not a signal anyone learns. The visible
       "Create & manage" label is what does the work here; the border is there
       to bind the label to the buttons it describes.

       Markup contract:
         <div class="hse-toolbar">
           {% if perms.core.add_x %}
           <div class="hse-toolbar-manage hse-manage-group">
             <span class="hse-toolbar-label">Create &amp; manage</span>
             <a class="btn btn-primary" data-hse-action="create" href="…">…</a>
           </div>
           {% endif %}
           <div class="hse-toolbar-open">…outline navigate buttons…</div>
         </div>

       The manage cluster must always sit inside the permission check, so a
       user who cannot author never sees the label at all.

       hse-manage-group is the marker the convention tests key off. It is a
       separate class from hse-toolbar-manage because a page can group create
       actions without using the inline pill treatment -- the HSE Home tile
       grid does exactly that -- and the invariant being enforced is "every
       create action sits under a visible Create & manage heading", not "every
       create action is in a pill". Pair it with hse-do-group on the sections
       that are not authoring, so the ordering can be checked. */
    .hse-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .75rem;
    }
    .hse-toolbar-manage {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .4rem;
      border: 1px solid rgba(var(--slam-accent-rgb, 13, 110, 253), 0.35);
      background: rgba(var(--slam-accent-rgb, 13, 110, 253), 0.05);
      border-radius: .5rem;
      padding: .3rem .5rem .3rem .6rem;
    }
    .hse-toolbar-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--slam-accent, #0d6efd);
      margin-right: .15rem;
      white-space: nowrap;
    }
    .hse-toolbar-open {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: .4rem;
    }
    /* Narrow screens: the label sits above its buttons rather than being
       squeezed onto a line of its own between two wrapped buttons. */
    @media (max-width: 575.98px) {
      .hse-toolbar-manage { width: 100%; }
      .hse-toolbar-label { width: 100%; margin-bottom: .15rem; }
    }
    .global-guide-me-btn:hover {
      background: rgba(var(--slam-accent-rgb), 0.18);
      border-color: rgba(var(--slam-accent-rgb), 0.45);
    }
    .helper-omnisearch-results {
      display: none;
      /* `position: fixed` keeps the dropdown above every page element —
         absolutely-positioned children get clipped by any ancestor with
         overflow: hidden, which was hiding the dropdown under page
         action bars (New Requisition, Priorities Report, etc.). Top and
         left are set dynamically in JS based on the input's rect. */
      position: fixed;
      min-width: 320px;
      width: 380px;
      max-width: calc(100vw - 24px);
      max-height: 70vh;
      overflow-y: auto;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
      /* Well above any bootstrap modal / dropdown / sticky action bar. */
      z-index: 2147483000;
    }
    .helper-omnisearch-results.is-open { display: block; }
    .helper-omnisearch-group { padding: 4px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
    .helper-omnisearch-group:last-child { border-bottom: none; }
    .helper-omnisearch-group-label {
      display: block;
      font-size: 0.72rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: rgba(0, 0, 0, 0.5);
      padding: 6px 12px 4px;
    }
    .helper-omnisearch-group-link {
      text-decoration: none;
    }
    .helper-omnisearch-group-link:hover {
      color: rgba(0, 0, 0, 0.75);
      text-decoration: underline;
    }
    .helper-omnisearch-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 12px;
      color: #212529;
      text-decoration: none;
      border-left: 3px solid transparent;
    }
    .helper-omnisearch-item:hover,
    .helper-omnisearch-item.is-active {
      background: rgba(var(--slam-accent-rgb), 0.08);
      border-left-color: var(--slam-accent);
      color: #003a7a;
    }
    .helper-omnisearch-item-icon { width: 18px; text-align: center; padding-top: 2px; color: rgba(0, 0, 0, 0.55); }
    .helper-omnisearch-item-body { display: flex; flex-direction: column; min-width: 0; }
    .helper-omnisearch-item-title { font-weight: 500; font-size: 0.9rem; }
    .helper-omnisearch-item-subtitle { font-size: 0.78rem; color: rgba(0, 0, 0, 0.55); }
    .helper-omnisearch-empty { padding: 12px 14px; color: rgba(0, 0, 0, 0.55); font-size: 0.85rem; }
    .helper-omnisearch-suggest-note {
      padding: 10px 14px 6px;
      font-size: 0.82rem;
      color: rgba(0, 0, 0, 0.6);
      border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.02);
    }
    .helper-omnisearch-ask { padding: 8px 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); }

    /* "Ask IntelliSite" row — a real selectable result so Enter routes
       to chat instead of a random navigation target. The primary variant
       shown on top of question-style queries uses the accent colour so
       users immediately see it's the recommended action. */
    .helper-omnisearch-ask-item {
      background: rgba(var(--slam-accent-rgb), 0.04);
    }
    .helper-omnisearch-ask-item .helper-omnisearch-item-title {
      font-weight: 600;
    }
    .helper-omnisearch-ask-item .helper-omnisearch-item-subtitle {
      color: rgba(var(--slam-accent-rgb), 0.85);
    }
    .helper-omnisearch-ask-item .helper-omnisearch-item-icon {
      color: var(--slam-accent);
    }
    .helper-omnisearch-ask-primary {
      border-left-color: var(--slam-accent);
    }

    /* Computed answer row — the figure itself, not a link to a page that
       contains it, so it reads at a glance from across a desk. */
    .helper-omnisearch-item-answer {
      background: rgba(var(--slam-accent-rgb), 0.06);
      border-left-color: var(--slam-accent);
    }
    .helper-omnisearch-item-answer .helper-omnisearch-item-title {
      font-weight: 700;
      font-size: 1rem;
    }
    .helper-omnisearch-item-answer .helper-omnisearch-item-icon {
      color: var(--slam-accent);
    }

    /* A linked record (the work pack opened for a requisition the user
       typed, and so on). The row sits back; the pill says why it matched. */
    .helper-omnisearch-item-related {
      background: rgba(0, 0, 0, 0.03);
    }
    .helper-omnisearch-item-related .helper-omnisearch-item-title,
    .helper-omnisearch-item-related .helper-omnisearch-item-subtitle,
    .helper-omnisearch-item-related .helper-omnisearch-item-icon {
      color: rgba(0, 0, 0, 0.55);
    }
    .helper-omnisearch-item-related:hover .helper-omnisearch-item-title,
    .helper-omnisearch-item-related.is-active .helper-omnisearch-item-title {
      color: #003a7a;
    }
    .helper-omnisearch-relation {
      display: inline-flex;
      align-self: flex-start;
      margin-top: 4px;
      padding: 1px 8px;
      border-radius: 999px;
      font-size: 0.7rem;
      line-height: 1.45;
      color: rgba(0, 0, 0, 0.62);
      background: rgba(0, 0, 0, 0.06);
      max-width: 100%;
      white-space: normal;
    }

    /* IntelliSite "thinking" indicator — shown from Send click until the
       LLM reply lands. The 3 dots pulse so the user knows the chat is
       alive even when OpenAI takes 5-10 seconds. */
    .ai-thinking {
      padding: 4px 0;
      color: rgba(0, 0, 0, 0.7);
      font-style: italic;
    }
    .ai-thinking-label { margin-right: 2px; }
    .ai-thinking-dots { display: inline-block; margin-left: 2px; }
    .ai-thinking-dots > span {
      display: inline-block;
      animation: ai-thinking-pulse 1.2s infinite ease-in-out both;
      opacity: 0.2;
    }
    .ai-thinking-dots > span:nth-child(1) { animation-delay: 0s; }
    .ai-thinking-dots > span:nth-child(2) { animation-delay: 0.2s; }
    .ai-thinking-dots > span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes ai-thinking-pulse {
      0%, 80%, 100% { opacity: 0.2; }
      40%           { opacity: 1.0; }
    }

    /* ===== Guide Me overlay ===== */
    .slam-guide-overlay {
      position: fixed; inset: 0; z-index: 20050;
      pointer-events: none;  /* clicks pass through except on child elements */
    }
    .slam-guide-backdrop {
      position: absolute; inset: 0;
      background: rgba(15, 20, 30, 0.45);
      backdrop-filter: blur(1px);
      pointer-events: auto;
      cursor: pointer;
    }
    .slam-guide-overlay.has-target .slam-guide-backdrop {
      /* When we have a real target, the spotlight's box-shadow already
         dims everything outside the target rectangle. Keeping the full
         backdrop transparent prevents the target itself from looking
         blurred or greyed out. */
      background: transparent;
      backdrop-filter: none;
      pointer-events: none;
    }
    .slam-guide-overlay.is-modal-guide .slam-guide-backdrop {
      /* Modal content is already visually separated by Bootstrap's
         backdrop. Keep modal guides readable instead of double-blurring
         and over-dimming the modal body. */
      background: rgba(15, 20, 30, 0.16);
      backdrop-filter: none;
    }
    .slam-guide-spot {
      position: absolute;
      border-radius: 8px;
      box-shadow: 0 0 0 9999px rgba(15, 20, 30, 0.55);
      outline: 2px solid var(--slam-accent);
      outline-offset: 2px;
      pointer-events: none;
      transition: top .2s, left .2s, width .2s, height .2s;
      animation: slam-guide-pulse 2.2s ease-in-out infinite;
    }
    .slam-guide-overlay.is-modal-guide .slam-guide-spot {
      box-shadow: 0 0 0 9999px rgba(15, 20, 30, 0.18);
      outline-width: 3px;
    }
    @keyframes slam-guide-pulse {
      0%, 100% { outline-color: var(--slam-accent); }
      50%      { outline-color: #60a5fa; }
    }
    .slam-guide-popover {
      position: absolute;
      width: 320px; max-width: calc(100vw - 24px);
      background: #ffffff;
      color: #212529;
      border-radius: 10px;
      box-shadow: 0 12px 32px rgba(15, 20, 30, 0.35);
      padding: 14px 16px 12px;
      pointer-events: auto;
      font-size: 0.92rem;
      line-height: 1.4;
    }
    .slam-guide-header {
      display: flex; align-items: center; justify-content: space-between;
      margin-bottom: 8px;
    }
    .slam-guide-step {
      font-size: 0.75rem; text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--slam-accent);
      font-weight: 600;
    }
    .slam-guide-close {
      background: transparent; border: 0;
      font-size: 1.2rem; line-height: 1;
      padding: 0 4px; cursor: pointer;
      color: rgba(0, 0, 0, 0.55);
    }
    .slam-guide-close:hover { color: #000; }
    .slam-guide-why {
      font-size: 0.82rem;
      background: rgba(59, 130, 246, 0.08);
      border-left: 3px solid var(--slam-accent);
      padding: 8px 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      color: rgba(0, 0, 0, 0.75);
    }
    .slam-guide-text { margin-bottom: 8px; }
    .slam-guide-next-hint {
      font-size: 0.8rem;
      color: rgba(0, 0, 0, 0.55);
      margin-bottom: 10px;
      font-style: italic;
    }
    .slam-guide-progress {
      margin: 8px 0 12px;
      padding: 8px 10px;
      border: 1px solid rgba(59, 130, 246, 0.18);
      border-radius: 8px;
      background: rgba(59, 130, 246, 0.06);
    }
    .slam-guide-progress-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .slam-guide-progress-label,
    .slam-guide-progress-value {
      font-size: 0.75rem;
      color: rgba(0, 0, 0, 0.62);
    }
    .slam-guide-progress-value {
      font-weight: 600;
      white-space: nowrap;
    }
    .slam-guide-slider {
      width: 100%;
      accent-color: var(--slam-accent);
      cursor: pointer;
    }
    .slam-guide-actions {
      display: flex; justify-content: space-between; gap: 8px;
    }
    .slam-guide-btn {
      padding: 6px 14px;
      border-radius: 6px;
      border: 1px solid var(--slam-accent);
      background: var(--slam-accent);
      color: #fff;
      font-size: 0.88rem;
      cursor: pointer;
    }
    .slam-guide-btn:disabled,
    .slam-guide-btn.slam-guide-prev {
      background: transparent; color: var(--slam-accent);
    }
    .slam-guide-btn:disabled { opacity: 0.4; cursor: not-allowed; }
    .slam-guide-btn:hover:not(:disabled) { filter: brightness(1.05); }
    .slam-guide-footer {
      margin-top: 10px; padding-top: 8px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      text-align: center;
    }
    .slam-guide-linklike {
      background: none; border: 0; padding: 0;
      color: rgba(0, 0, 0, 0.55);
      font-size: 0.8rem; cursor: pointer;
      text-decoration: underline dotted;
    }
    .slam-guide-linklike:hover { color: #000; }

    /* Guide Me toasts — pop in bottom-right so they never hide real UI. */
    .slam-guide-toast {
      position: fixed;
      right: 20px;
      bottom: 20px;
      min-width: 220px;
      max-width: 380px;
      padding: 10px 14px;
      border-radius: 8px;
      background: #1f2937;
      color: #f3f4f6;
      box-shadow: 0 8px 24px rgba(15, 20, 30, 0.35);
      font-size: 0.9rem;
      z-index: 2147483000;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .slam-guide-toast.is-shown { opacity: 1; transform: translateY(0); }
    .slam-guide-toast-error { background: #b91c1c; }
    .slam-guide-toast-warn  { background: #b45309; }
    .slam-guide-toast-info  { background: #1f2937; }
    html[data-theme="dark"] .slam-guide-toast-info { background: #374151; }

    /* "Guide me" button inside a chat message */
    .ai-guide-me-btn {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 6px;
      padding: 5px 10px;
      background: var(--slam-accent);
      color: #fff;
      border: 0; border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
    }
    .ai-guide-me-btn:hover { filter: brightness(1.05); }
    .ai-guide-me-btn::before {
      content: '\f4fc';
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
    }

    html[data-theme="dark"] .slam-guide-backdrop { background: rgba(0, 0, 0, 0.6); }
    html[data-theme="dark"] .slam-guide-spot     { box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); }
    html[data-theme="dark"] .slam-guide-popover {
      background: #1f2937;
      color: #f3f4f6;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7);
    }
    html[data-theme="dark"] .slam-guide-step { color: #60a5fa; }
    html[data-theme="dark"] .slam-guide-close { color: rgba(255, 255, 255, 0.65); }
    html[data-theme="dark"] .slam-guide-close:hover { color: #fff; }
    html[data-theme="dark"] .slam-guide-why {
      background: rgba(96, 165, 250, 0.12);
      border-left-color: #60a5fa;
      color: rgba(255, 255, 255, 0.82);
    }
    html[data-theme="dark"] .slam-guide-next-hint { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="dark"] .slam-guide-progress {
      border-color: rgba(96, 165, 250, 0.24);
      background: rgba(96, 165, 250, 0.1);
    }
    html[data-theme="dark"] .slam-guide-progress-label,
    html[data-theme="dark"] .slam-guide-progress-value {
      color: rgba(255, 255, 255, 0.68);
    }
    html[data-theme="dark"] .slam-guide-footer { border-top-color: rgba(255, 255, 255, 0.12); }
    html[data-theme="dark"] .slam-guide-linklike { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="dark"] .slam-guide-linklike:hover { color: #fff; }

    html[data-theme="dark"] .helper-omnisearch-input { background: rgba(30, 30, 30, 0.9); border-color: rgba(255, 255, 255, 0.2); color: #f1f1f1; }
    html[data-theme="dark"] .helper-omnisearch-input:focus { background: #1e1e1e; }
    html[data-theme="dark"] .helper-omnisearch-icon { color: rgba(255, 255, 255, 0.5); }
    html[data-theme="dark"] .global-guide-me-btn { background: rgba(110, 168, 254, 0.14); color: #9ecbff; border-color: rgba(110, 168, 254, 0.28); }
    html[data-theme="dark"] .global-guide-me-btn:hover { background: rgba(110, 168, 254, 0.22); border-color: rgba(110, 168, 254, 0.48); }
    html[data-theme="dark"] .helper-omnisearch-results { background: #1e1e1e; border-color: rgba(255, 255, 255, 0.12); color: #f1f1f1; }
    html[data-theme="dark"] .helper-omnisearch-group { border-bottom-color: rgba(255, 255, 255, 0.08); }
    html[data-theme="dark"] .helper-omnisearch-group-label { color: rgba(255, 255, 255, 0.55); }
    html[data-theme="dark"] .helper-omnisearch-group-link:hover { color: rgba(255, 255, 255, 0.78); }
    html[data-theme="dark"] .helper-omnisearch-item { color: #f1f1f1; }
    html[data-theme="dark"] .helper-omnisearch-item:hover,
    html[data-theme="dark"] .helper-omnisearch-item.is-active { background: rgba(var(--slam-accent-rgb), 0.18); color: #9ecbff; }
    html[data-theme="dark"] .helper-omnisearch-item-icon { color: rgba(255, 255, 255, 0.55); }
    html[data-theme="dark"] .helper-omnisearch-item-subtitle { color: rgba(255, 255, 255, 0.6); }
    html[data-theme="dark"] .helper-omnisearch-empty { color: rgba(255, 255, 255, 0.65); }
    html[data-theme="dark"] .helper-omnisearch-suggest-note {
      color: rgba(255, 255, 255, 0.65);
      border-bottom-color: rgba(255, 255, 255, 0.08);
      background: rgba(255, 255, 255, 0.03);
    }
    html[data-theme="dark"] .helper-omnisearch-ask { border-top-color: rgba(255, 255, 255, 0.08); }
    html[data-theme="dark"] .helper-omnisearch-ask-item { background: rgba(var(--slam-accent-rgb), 0.12); }
    html[data-theme="dark"] .helper-omnisearch-ask-item .helper-omnisearch-item-subtitle { color: rgba(120, 180, 255, 0.9); }
    html[data-theme="dark"] .helper-omnisearch-ask-item .helper-omnisearch-item-icon { color: #9ecbff; }
    html[data-theme="dark"] .helper-omnisearch-item-answer { background: rgba(var(--slam-accent-rgb), 0.16); }
    html[data-theme="dark"] .helper-omnisearch-item-related {
      background: rgba(255, 255, 255, 0.04);
    }
    html[data-theme="dark"] .helper-omnisearch-item-related .helper-omnisearch-item-title,
    html[data-theme="dark"] .helper-omnisearch-item-related .helper-omnisearch-item-subtitle,
    html[data-theme="dark"] .helper-omnisearch-item-related .helper-omnisearch-item-icon {
      color: rgba(255, 255, 255, 0.55);
    }
    html[data-theme="dark"] .helper-omnisearch-item-related:hover .helper-omnisearch-item-title,
    html[data-theme="dark"] .helper-omnisearch-item-related.is-active .helper-omnisearch-item-title {
      color: #9ecbff;
    }
    html[data-theme="dark"] .helper-omnisearch-relation {
      color: rgba(255, 255, 255, 0.72);
      background: rgba(255, 255, 255, 0.08);
    }
    html[data-theme="dark"] .ai-thinking { color: rgba(255, 255, 255, 0.75); }

    @media (max-width: 992px) {
      .helper-omnisearch { max-width: 220px; min-width: 160px; }
    }
    @media (max-width: 768px) {
      .helper-omnisearch { display: none; }
    }

    /* ────────────────────────────────────────────────────────────────
       Phase 11 — global page-transition progress indicator. A 3px bar
       at the very top of the viewport that animates while a navigation
       or form submit is in flight, so heavy pages (scaffold dashboard,
       project status, exports) feel responsive instead of "frozen".
       Pure CSS + 80 LOC of JS — no vendor dependency. Theme-aware via
       data-theme attribute on <html>.
       ──────────────────────────────────────────────────────────────── */
    #slamPageProgress {
      position: fixed;
      top: 0;
      left: 0;
      height: 3px;
      width: 0%;
      background: linear-gradient(90deg, var(--slam-accent) 0%, #6610f2 50%, #0dcaf0 100%);
      box-shadow: 0 0 10px rgba(var(--slam-accent-rgb), 0.55);
      z-index: 99999;
      transition: width 200ms ease-out, opacity 350ms ease-out;
      opacity: 0;
      pointer-events: none;
      will-change: width, opacity;
    }
    html[data-theme="light"] #slamPageProgress {
      box-shadow: 0 0 10px rgba(var(--slam-accent-rgb), 0.35);
    }
    #slamPageProgress.is-active {
      opacity: 1;
    }
    #slamPageProgress.is-done {
      width: 100% !important;
      opacity: 0;
    }
    @media (prefers-reduced-motion: reduce) {
      #slamPageProgress { transition: opacity 100ms linear; }
    }

/* ============================================================================
   Workspace tier chip
   ----------------------------------------------------------------------------
   A non-interactive marker in the top bar naming the tier the user is
   operating in. The project switcher beside it already changes its label, but
   it reads as a control rather than as state -- and at company tier a single
   save can touch every project, so which tier you are in has to be legible
   without reading the sidebar.

   Violet for company, accent for vendor: --slam-violet is the platform token
   reserved for things that are not a workflow status, which is what a tier
   marker is. Both are tokens, so the chip follows light/dark automatically.
   ============================================================================ */
.slam-tier-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.6rem;
  border-radius: var(--slam-radius-pill);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.5;
  cursor: default;
  border: 1px solid transparent;
}

.slam-tier-chip i {
  font-size: 0.82em;
  opacity: 0.9;
}

.slam-tier-chip--company {
  color: var(--slam-violet);
  background: rgba(var(--slam-violet-rgb), 0.14);
  border-color: rgba(var(--slam-violet-rgb), 0.38);
}

.slam-tier-chip--vendor {
  color: var(--slam-accent);
  background: rgba(var(--slam-accent-rgb), 0.14);
  border-color: rgba(var(--slam-accent-rgb), 0.38);
}

/* The rail collapses the scope word first; the tier word never drops. */
@media (max-width: 991.98px) {
  .slam-tier-chip .slam-tier-chip-scope { display: none; }
}