/* ==========================================================================
   GLYDE® Buddy Pro - Main Stylesheet
   Refactored for maintainability, consistency, and performance.
   Based on Microsoft Fluent 2 Design System.
   ========================================================================== */

/* -------------------------------------------------------------------------- */
/* 1. Variables & Design Tokens                                               */
/* -------------------------------------------------------------------------- */
:root {
  /* -- Typography -- */
  --font-family:
    'Segoe UI Variable', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue',
    sans-serif;

  --font-size-100: 12px;
  --font-size-200: 14px; /* Base Body */
  --font-size-300: 16px; /* Headers */
  --font-size-400: 20px; /* Titles */
  --font-size-500: 24px;
  --font-size-600: 28px;

  --line-height-100: 16px;
  --line-height-200: 20px;
  --line-height-300: 24px;
  --line-height-400: 28px;
  --line-height-500: 32px;
  --line-height-600: 36px;

  /* -- Spacing (8px grid) -- */
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  --spacing-xxxl: 32px;
  --spacing-huge: 40px;
  --spacing-massive: 48px;

  /* -- Colors: Neutrals (Fluent 2) -- */
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #808080;

  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #ebebeb;
  --colorNeutralBackground1Selected: #ebebeb;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #ebebeb;

  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;

  /* Extended Neutral Palette */
  --color-neutral-grey-4: #fafafa;
  --color-neutral-grey-8: #f5f5f5;
  --color-neutral-grey-12: #ebebeb;
  --color-neutral-grey-16: #e0e0e0;
  --color-neutral-grey-20: #d1d1d1;
  --color-neutral-grey-24: #c7c7c7;
  --color-neutral-grey-28: #b3b3b3;
  --color-neutral-grey-32: #a6a6a6;
  --color-neutral-grey-36: #999999;
  --color-neutral-grey-40: #8a8a8a;
  --color-neutral-grey-44: #7a7a7a;
  --color-neutral-grey-48: #6b6b6b;
  --color-neutral-grey-52: #616161;
  --color-neutral-grey-56: #5c5c5c;
  --color-neutral-grey-60: #525252;
  --color-neutral-grey-64: #474747;
  --color-neutral-grey-68: #3d3d3d;
  --color-neutral-grey-72: #333333;
  --color-neutral-grey-76: #292929;
  --color-neutral-grey-80: #242424;
  --color-neutral-grey-84: #1f1f1f;
  --color-neutral-grey-88: #1a1a1a;
  --color-neutral-grey-92: #0f0f0f;
  --color-neutral-grey-96: #0a0a0a;

  /* -- Colors: Brand & Accents -- */
  --color-brand-primary: #6264a7; /* Teams Purple */
  --color-brand-primary-hover: #7b7dbe;
  --color-brand-primary-pressed: #4e5085;
  --color-brand-light: #e7e7f4;
  --color-brand-lighter: #f4f4fb;
  --color-brand-vibrant: #8b8dd6;
  --color-brand-glow: rgba(98, 100, 167, 0.3);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #6264a7 0%, #8b8dd6 100%);
  --gradient-brand-hover: linear-gradient(135deg, #7b7dbe 0%, #9c9ee6 100%);
  --gradient-subtle: linear-gradient(180deg, rgba(98, 100, 167, 0.05) 0%, rgba(98, 100, 167, 0) 100%);
  --gradient-card-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 50%);

  /* Semantic Colors */
  --color-success: #10a210;
  --color-success-light: #d4f5d4;
  --color-success-vibrant: #13cf13;

  --color-warning: #f7630c;
  --color-warning-light: #ffe7d4;
  --color-warning-vibrant: #ff8c42;

  --color-danger: #e73c3e;
  --color-danger-light: #ffe0e0;
  --color-danger-vibrant: #ff5a5c;

  --color-info: #0086f0;
  --color-info-light: #d4e8ff;
  --color-info-vibrant: #4a9eff;

  /* Accent Colors */
  --color-accent-purple: #8b8dd6;
  --color-accent-blue: #4a9eff;
  --color-accent-teal: #00d4aa;
  --color-accent-orange: #ff8c42;
  --color-accent-pink: #ec4899;

  /* -- Surface & Layout -- */
  --color-surface-primary: var(--colorNeutralBackground1);
  --color-surface-secondary: var(--color-neutral-grey-4);
  --color-surface-tertiary: var(--color-neutral-grey-8);
  --color-background: var(--color-neutral-grey-4);

  --card-background: #ffffff;
  --card-border: 1px solid rgba(16, 24, 40, 0.08);

  /* -- Text Colors -- */
  --color-text-primary: var(--color-neutral-grey-84);
  --color-text-secondary: var(--color-neutral-grey-60);
  --color-text-tertiary: var(--color-neutral-grey-48);

  /* -- Shadows -- */
  --shadow-2: 0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13);
  --shadow-4:
    0px 0.3px 0.9px rgba(0, 0, 0, 0.1), 0px 1.6px 3.6px rgba(0, 0, 0, 0.13), 0px 3.6px 7.2px rgba(0, 0, 0, 0.16);
  --shadow-8: 0px 3.2px 7.2px rgba(0, 0, 0, 0.16), 0px 14.4px 28.8px rgba(0, 0, 0, 0.22);
  --shadow-16: 0px 6.4px 14.4px rgba(0, 0, 0, 0.18), 0px 28.8px 57.6px rgba(0, 0, 0, 0.28);
  --shadow-28: 0px 12.8px 28.8px rgba(0, 0, 0, 0.26), 0px 57.6px 115.2px rgba(0, 0, 0, 0.35);

  --shadow-brand: 0px 8px 24px rgba(98, 100, 167, 0.25), 0px 2px 8px rgba(98, 100, 167, 0.15);
  --shadow-brand-strong: 0px 12px 32px rgba(98, 100, 167, 0.35), 0px 4px 12px rgba(98, 100, 167, 0.25);
  --shadow-success: 0px 4px 16px rgba(16, 162, 16, 0.2);
  --shadow-hover: 0px 8px 24px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(98, 100, 167, 0.1);

  /* -- Borders -- */
  --border-radius-small: 4px;
  --border-radius-medium: 8px;
  --border-radius-large: 12px;
  --border-radius-xlarge: 16px;
  --border-radius-circular: 50%;
  --border-radius-pill: 24px;

  /* -- Animations -- */
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-fluent: cubic-bezier(0.33, 0, 0.67, 1);

  /* -- Legacy/Aliases (Maintained for backward compatibility) -- */
  --neutralForeground1: var(--colorNeutralForeground1);
  --neutralForeground2: var(--colorNeutralForeground2);
  --neutralForeground3: var(--colorNeutralForeground3);
  --neutralBackground1: var(--colorNeutralBackground1);
  --neutralBackground2: var(--colorNeutralBackground2);
  --neutralStroke1: var(--colorNeutralStroke1);
  --neutralStroke2: var(--colorNeutralStroke2);
  --brandBackground: var(--color-brand-primary);
  --color-white: #ffffff;
}

/* -------------------------------------------------------------------------- */
/* 2. Reset & Base Styles                                                     */
/* -------------------------------------------------------------------------- */
/*
 * NOTE: This stylesheet is ALSO injected onto arbitrary host pages by the
 * Chrome extension content script (see src/static/manifest.json).
 *
 * To guarantee the injected UI never leaks onto (or inherits from) an
 * arbitrary host page, every rule below is wrapped in a single
 * `@scope (.glyde-app, .glyde-scope, [id^='glyde-'])` block, so styles only
 * apply inside a GLYDE root:
 *   - `.glyde-app`     — every GLYDE-owned HTML page <body>
 *   - `.glyde-scope`   — explicitly-tagged roots (side panel / popout <body>,
 *                        body-appended modals) that lack a `glyde-` id/class
 *   - `[id^='glyde-']` — extension-injected DOM roots (#glyde-chat-modal,
 *                        #glyde-links-launcher, #glyde-toggle-modal-btn, …)
 *
 * The host page is never a scope root, so it opts OUT of every rule below.
 *
 * Kept OUTSIDE the scope (must stay global):
 *   - `:root` design-token blocks (custom properties live on the document root)
 *   - host-body launcher offsets (`.glyde-has-links-launcher …`) whose ancestor
 *     is the host <body>, which is intentionally not a scope root
 *
 * `[class^='glyde-']` is deliberately NOT a scope root: the launcher adds the
 * `glyde-has-links-launcher` class to the HOST <body>, so a class-prefix scope
 * root would re-capture the entire host page.
 */

/* --------------------------------------------------------------------------
 * Scope-root foundational typography (MUST be declared OUTSIDE @scope)
 * --------------------------------------------------------------------------
 * CSS @scope only styles the DESCENDANTS of a scope root — never the scope
 * root element itself — and some embedded webviews do not support @scope at
 * all. On a GLYDE page the <body> (`.glyde-app` / `.glyde-scope` /
 * `.welcome-doc-body`) and the injected `#glyde-ext-host` ARE scope roots, so
 * the scoped reset inside the @scope block below can never set their
 * font-family. Without a global declaration the body inherits the browser
 * default serif (Times) and every descendant inherits it too — this is the
 * cause of the "Times font" on /help and /help/*.
 *
 * These selectors are root-specific and never match an arbitrary Chrome
 * extension host page (a host <body> is not `.glyde-app`/`.glyde-scope`), so
 * they are safe to keep global.
 * ------------------------------------------------------------------------ */
body.glyde-app,
body.glyde-scope,
body.welcome-doc-body {
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* #glyde-ext-host provides the inherited text properties for injected modal UI
 * (see features/shell/modalShell.js). It is a scope root, so — like the bodies
 * above — its own properties must be set outside @scope. `display: contents`
 * means it produces no box; these properties exist solely to inherit into the
 * injected descendants. It is id-specific, so it cannot leak onto a host page. */
#glyde-ext-host {
  color: var(--colorNeutralForeground1);
  font-family: var(--font-family);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* GLYDE app-surface <body> baseline. Scope root, so it must be declared outside
 * @scope. Only matches GLYDE pages (an arbitrary host <body> is never
 * `.glyde-app`), so it is safe to keep global. */
body.glyde-app {
  margin: 0;
  font-weight: 400;
  color: var(--colorNeutralForeground1);
  background-color: var(--colorNeutralBackground1);
}

/* Welcome / help document surface. Scope root, so declared
 * outside @scope; ordered AFTER `body.glyde-app` so the gradient wins over the
 * neutral background for pages that carry both classes. Font is inherited from
 * the "Scope-root foundational typography" block above (var(--font-family)). */
body.welcome-doc-body {
  margin: 0;
  min-height: 100vh;
  padding: 32px 20px 48px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2ff 38%, #ffffff 100%);
  color: #0f172a;
}

@media (max-width: 900px) {
  body.welcome-doc-body {
    padding: 24px 16px 40px;
  }
}

@scope (.glyde-app, .glyde-scope, [id^='glyde-']) {
  /* Box-sizing + font reset — scoped to GLYDE-owned surfaces only */
  .glyde-app,
  .glyde-app *,
  .glyde-app *::before,
  .glyde-app *::after,
  [id^='glyde-'],
  [id^='glyde-'] *,
  [id^='glyde-'] *::before,
  [id^='glyde-'] *::after,
  [class^='glyde-'],
  [class*=' glyde-'] {
    box-sizing: border-box;
    font-family: var(--font-family);
  }

  /* NOTE: Scope-root typography (#glyde-ext-host and the GLYDE / welcome-doc
 * <body> roots) is declared in the "Scope-root foundational typography" block
 * ABOVE, outside @scope — scoped rules cannot style a scope root. Do not
 * re-add those root rules here. */

  /* Scrollbar Styling — scoped to GLYDE-owned surfaces only */
  .glyde-app ::-webkit-scrollbar,
  [id^='glyde-'] ::-webkit-scrollbar,
  [class^='glyde-']::-webkit-scrollbar,
  [class*=' glyde-']::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .glyde-app ::-webkit-scrollbar-track,
  [id^='glyde-'] ::-webkit-scrollbar-track,
  [class^='glyde-']::-webkit-scrollbar-track,
  [class*=' glyde-']::-webkit-scrollbar-track {
    background: var(--colorNeutralBackground3);
  }
  .glyde-app ::-webkit-scrollbar-thumb,
  [id^='glyde-'] ::-webkit-scrollbar-thumb,
  [class^='glyde-']::-webkit-scrollbar-thumb,
  [class*=' glyde-']::-webkit-scrollbar-thumb {
    background: var(--colorNeutralStroke1);
    border-radius: var(--border-radius-small);
  }
  .glyde-app ::-webkit-scrollbar-thumb:hover,
  [id^='glyde-'] ::-webkit-scrollbar-thumb:hover,
  [class^='glyde-']::-webkit-scrollbar-thumb:hover,
  [class*=' glyde-']::-webkit-scrollbar-thumb:hover {
    background: var(--colorNeutralForeground3);
  }

  /* Hide scrollbars for specific containers while keeping functionality */
  .glyde-conversation-list,
  .glyde-chat-messages,
  .glyde-right-pane,
  .glyde-center-pane {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }
  .glyde-conversation-list::-webkit-scrollbar,
  .glyde-chat-messages::-webkit-scrollbar,
  .glyde-right-pane::-webkit-scrollbar,
  .glyde-center-pane::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Opera */
  }

  /* -------------------------------------------------------------------------- */
  /* 3. Layout Containers                                                       */
  /* -------------------------------------------------------------------------- */
  .glyde-app-container {
    margin: 4em auto;
    max-width: 1200px;
  }

  /* Main Panes Configuration */
  .glyde-left-pane,
  .glyde-center-pane,
  .glyde-right-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
  }

  .glyde-left-pane {
    flex: 0 0 var(--pane-left, 25%);
    min-width: 300px;
    border-right: 1px solid var(--neutralStroke2);
    /* Liquid glass panel background */
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .glyde-center-pane {
    flex: 0 0 var(--pane-center, 50%);
    background-color: var(--color-surface-primary);
    position: relative;
  }

  .glyde-right-pane {
    flex: 0 0 var(--pane-right, 25%);
    position: relative;
    border-left: 1px solid var(--color-neutral-grey-16);
    background: linear-gradient(-45deg, #eef2ff, #ffffff, #e6ebf8, #f5f7fa);
    background-size: 400% 400%;
    animation: lavaLamp 15s ease infinite;
    overflow-y: auto;
  }

  @keyframes lavaLamp {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .glyde-resizer {
    /* Resizer style hook for JS */
    flex-basis: 0;
    z-index: 100;
  }

  /* -------------------------------------------------------------------------- */
  /* 4. Modal Styles                                                            */
  /* -------------------------------------------------------------------------- */
  #glyde-chat-modal {
    position: fixed;
    top: 50px;
    left: 50px;
    width: 90vw;
    height: 80vh;
    background: linear-gradient(180deg, var(--colorNeutralBackground1) 0%, rgba(245, 245, 245, 0.5) 100%);
    display: flex;
    flex-direction: column;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-28);
    z-index: 10001;
    overflow: hidden;
    border: 1px solid var(--colorNeutralStroke2);
    animation: fluent-scale-in var(--duration-normal) var(--ease-fluent);
  }

  /* Decorative top bar */
  #glyde-chat-modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0; /* Hidden by default or specific height if needed */
    background: var(--gradient-brand);
  }

  /* Visibility States */
  #glyde-chat-modal.glyde-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  #glyde-registration-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(8px);
    z-index: 10002;
  }

  #glyde-registration-modal.glyde-hidden {
    display: none !important;
  }

  #glyde-registration-modal .glyde-modal-content {
    position: relative;
    width: min(420px, 100%);
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #1f2937);
    border-radius: 16px;
    border: 1px solid var(--colorNeutralStroke2, rgba(0, 0, 0, 0.08));
    box-shadow: var(--shadow-28, 0 24px 48px rgba(0, 0, 0, 0.18));
    padding: 24px;
  }

  #glyde-registration-modal .glyde-modal-content h2 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 600;
  }

  #glyde-registration-modal .glyde-registration-copy {
    margin: 0 0 16px;
    color: var(--colorNeutralForeground2, #4b5563);
    font-size: 14px;
    line-height: 1.5;
  }

  #glyde-registration-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    border: none;
    background: transparent;
    color: var(--colorNeutralForeground2, #6b7280);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  #registration-code-input {
    width: 100%;
    margin: 8px 0 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--colorNeutralStroke2, #d1d5db);
    background: var(--colorNeutralBackground1, #ffffff);
    color: inherit;
    font-size: 14px;
    box-sizing: border-box;
  }

  #submit-registration-code-btn {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    background: var(--brandBackground, #2563eb);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }

  #glyde-microsoft-signin-btn:disabled,
  #submit-registration-code-btn:disabled {
    opacity: 0.7;
    cursor: wait;
  }

  #glyde-chat-modal.fullscreen:not(.glyde-hidden) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Fullscreen Mode (Teams) */
  .glyde-modal.fullscreen {
    width: 100vw !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  .glyde-modal.fullscreen .glyde-modal-body {
    height: 100%;
    width: 100%;
  }

  /* Adjust pane sizes in fullscreen if needed */
  .glyde-modal.fullscreen .glyde-left-pane {
    flex: 0 0 var(--pane-left, 25%);
    height: 100vh;
  }
  .glyde-modal.fullscreen .glyde-center-pane {
    flex: 0 0 var(--pane-center, 50%);
  }
  .glyde-modal.fullscreen .glyde-right-pane {
    flex: 0 0 var(--pane-right, 25%);
  }

  .glyde-modal-body {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 1;
    overflow: hidden;
  }

  /* Modal Header */
  .glyde-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-l) var(--spacing-xl);
    cursor: move;
    font-size: var(--font-size-300);
    font-weight: 600;
    background: var(--gradient-brand);
    color: var(--color-white);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 8px rgba(98, 100, 167, 0.2);
    position: relative;
  }

  .glyde-modal-title {
    font-size: var(--font-size-400);
    font-weight: 600;
  }

  /* -------------------------------------------------------------------------- */
  /* 5. Common UI Elements (Buttons, Pills, Headers)                            */
  /* -------------------------------------------------------------------------- */
  /* Buttons */
  .glyde-close-btn,
  .glyde-header-btn {
    background: none;
    border: none;
    color: var(--color-white);
    cursor: pointer;
    padding: 8px;
    border-radius: var(--border-radius-small);
    transition: background-color var(--duration-fast) var(--ease-fluent);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .glyde-close-btn:hover,
  .glyde-header-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .glyde-header-btn.glyde-hidden {
    display: none;
  }

  /* Section Headers (Floating Pill Style) */
  .glyde-pane-header {
    display: flex;
    flex-direction: column;
    margin: 12px 16px;
    color: var(--colorNeutralForeground1);
    padding: var(--spacing-l);
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent acrylic */
    backdrop-filter: blur(10px); /* Acrylic blur effect */
    font-weight: 600;
    font-size: var(--font-size-300);
    line-height: var(--line-height-300);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--shadow-8);
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle border for acrylic feel */
  }

  /* Left Pane Header Override - Liquid glass sidebar */
  .glyde-left-pane .glyde-pane-header {
    flex-shrink: 0;
    padding: 12px 16px 8px;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    background: transparent;
    border-bottom: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* Center Chat Header Specifics */
  #glyde-chat-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    min-height: 56px;
  }

  .glyde-scope .header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
  }

  .glyde-scope .header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
  }

  /* Prevent header-actions from occupying space when all its buttons are hidden */
  .glyde-scope .header-actions:not(:has(:not(.glyde-hidden))) {
    display: none;
  }

  #candidate-name {
    font-size: 18px;
    font-weight: 600;
  }

  #talent-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--neutralStroke2);
  }

  /* Status Pills */
  .screen-result-pill,
  .message-type-pill,
  .application-status-nested,
  .glyde-conversation-secondary .status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
    text-align: center;
  }

  .screen-result-pill {
    padding: 4px 12px;
    font-size: var(--font-size-100);
    background-color: rgba(245, 245, 245, 0.7); /* Acrylic base */
    backdrop-filter: blur(4px); /* Acrylic blur */
    color: var(--colorNeutralForeground2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all var(--duration-fast) var(--ease-fluent);
    border: 1px solid rgba(0, 0, 0, 0.05); /* Acrylic border */
  }
  .screen-result-pill:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  }

  /* Status Colors (manual_positive/manual_negative = ATS cache, same as screen_result_positive/negative) */
  .screen-result-pill.screen_result_positive,
  .screen-result-pill.manual_positive,
  .screen-result-pill.positive,
  .glyde-scope .internal {
    background-color: rgba(212, 245, 212, 0.7) !important; /* Acrylic success */
    color: var(--color-success-vibrant) !important;
    border-color: var(--color-success) !important;
  }

  .screen-result-pill.screen_result_negative,
  .screen-result-pill.manual_negative,
  .screen-result-pill.negative {
    background-color: rgba(255, 224, 224, 0.7) !important; /* Acrylic danger */
    color: var(--color-danger-vibrant) !important;
    border-color: var(--color-danger) !important;
  }

  .screen-result-pill.pending,
  .screen-result-pill.incomplete,
  .note-pill {
    background-color: rgba(255, 231, 212, 0.7) !important; /* Acrylic warning */
    color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
  }

  /* Raw ATS status note on conversation cards — shows the source-ATS pipeline
     value when it differs from the resolved status pill. */
  .ats-status-note {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 11px;
    background: var(--colorNeutralBackground3, #f0f0f0);
    color: var(--colorNeutralForeground2, #616161);
    border: 1px solid var(--colorNeutralStroke2, #d1d1d1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 150px;
  }

  /* ATS Pipeline Status Pills */
  .screen-result-pill.ats-declined,
  .screen-result-pill.ats-rejected {
    background-color: rgba(255, 224, 224, 0.7) !important;
    color: var(--color-danger-vibrant) !important;
    border-color: var(--color-danger) !important;
  }

  .screen-result-pill.ats-submitted,
  .screen-result-pill.ats-interview,
  .screen-result-pill.ats-shortlisted {
    background-color: rgba(200, 225, 255, 0.7) !important;
    color: var(--color-info, #0078d4) !important;
    border-color: var(--color-info, #0078d4) !important;
  }

  .screen-result-pill.ats-placed,
  .screen-result-pill.ats-hired,
  .screen-result-pill.ats-offer {
    background-color: rgba(180, 230, 180, 0.7) !important;
    color: #0b6623 !important;
    border-color: #0b6623 !important;
  }

  .screen-result-pill.ats-withdrawn,
  .screen-result-pill.ats-closed {
    background-color: rgba(220, 220, 220, 0.7) !important;
    color: #666 !important;
    border-color: #999 !important;
  }

  .email-pill {
    background-color: var(--color-brand-primary) !important;
    color: white !important;
  }

  .sms-pill {
    background-color: rgba(255, 255, 255, 0.25) !important;
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-size: 9px !important;
    padding: 1px 6px !important;
  }

  .screen-chat-pill,
  .glyde-scope .info {
    background-color: var(--color-info) !important;
    color: white !important;
  }

  /* Separator - gradient line between Buddy and conversations */
  .glyde-separator {
    height: 1px;
    width: 100%;
    margin: 8px 0 16px;
    background: linear-gradient(to right, transparent 0%, var(--color-neutral-grey-20) 50%, transparent 100%);
    opacity: 0.6;
    flex-shrink: 0;
  }

  /* -------------------------------------------------------------------------- */
  /* 6. Component: Conversation List                                            */
  /* -------------------------------------------------------------------------- */
  .glyde-conversation-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px 80px;
    margin: 0;
    list-style: none;
    min-height: 0;
  }
  /* Sidebar list scrollbar - thin liquid glass style */
  .glyde-left-pane .glyde-conversation-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
  }
  .glyde-left-pane .glyde-conversation-list::-webkit-scrollbar {
    width: 6px;
    display: block;
  }
  .glyde-left-pane .glyde-conversation-list::-webkit-scrollbar-track {
    background: transparent;
  }
  .glyde-left-pane .glyde-conversation-list::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
  }
  .glyde-left-pane .glyde-conversation-list::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.7);
  }

  .glyde-conversation-item {
    position: relative;
    margin-bottom: 8px;
    cursor: pointer;
  }

  .glyde-buddy-item {
    margin-top: 0;
    margin-bottom: 8px;
  }

  /* Liquid glass conversation card - compact size */
  .glyde-conversation-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-large);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition:
      transform var(--duration-slow) var(--ease-fluent),
      box-shadow var(--duration-normal) var(--ease-fluent);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  }

  .glyde-conversation-card:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: scale(1.01);
  }

  .glyde-conversation-item.active .glyde-conversation-card {
    border-color: var(--brandBackground);
    background: var(--brandBackground);
    color: var(--color-white);
    box-shadow: 0 4px 15px var(--color-brand-glow);
  }

  .glyde-conversation-item.active .glyde-conversation-primary span,
  .glyde-conversation-item.active .glyde-conversation-secondary {
    color: var(--color-white);
  }

  /* GLYDE Buddy card - accent icon circle */
  .glyde-buddy-item .glyde-conversation-card {
    align-items: flex-start;
  }
  .glyde-buddy-item .glyde-conversation-primary {
    width: 100%;
  }
  .glyde-buddy-item .glyde-conversation-primary img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-brand-light);
    border: 1px solid var(--color-brand-primary);
    padding: 3px;
    box-shadow: 0 2px 8px rgba(98, 100, 167, 0.2);
  }

  /* Content Layout */
  .glyde-conversation-primary {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .glyde-conversation-primary img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--neutralStroke2);
    flex-shrink: 0;
  }

  .glyde-conversation-primary span.candidate_name {
    font-weight: 600;
    font-size: 13px;
    line-height: 18px;
    color: var(--neutralForeground1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .glyde-conversation-primary .conversation-date {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-left: auto;
    color: var(--color-text-tertiary);
    gap: 2px;
    flex-shrink: 0;
  }

  .glyde-conversation-secondary {
    margin-top: 4px;
    color: var(--neutralForeground3);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  /* Unread inbound SMS — the row is present on every tab (including Qualified
     for a rejected candidate), so the accent has to carry the "why is this
     here" signal on its own. */
  .glyde-conversation-item--unread .glyde-conversation-card {
    border-color: var(--color-brand-primary);
    box-shadow:
      0 4px 20px rgba(98, 100, 167, 0.18),
      inset 3px 0 0 0 var(--color-brand-primary);
  }

  .glyde-conversation-item--unread .glyde-conversation-primary span.candidate_name {
    font-weight: 700;
  }

  .glyde-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(98, 100, 167, 0.2);
    flex-shrink: 0;
  }

  .glyde-conversation-unread-preview {
    margin-top: 4px;
    color: var(--neutralForeground2);
    font-size: 11px;
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  .glyde-conversation-item.active .glyde-conversation-unread-preview {
    color: var(--color-white);
  }

  /* Compact status pills inside conversation cards */
  .glyde-conversation-card .screen-result-pill,
  .glyde-conversation-card .application-status-nested {
    padding: 2px 8px;
    font-size: 10px;
    border-radius: 9999px;
  }

  /* Stacked Applications - same card, divider-separated rows (no separate cards) */
  .glyde-stacked-applications {
    position: relative;
    margin-top: 6px;
    padding-top: 0;
  }

  /* Each row is a divider line + content; visually part of the same card */
  .glyde-stacked-card {
    position: relative;
    padding: 6px 0 6px 0;
    min-height: 28px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    transition: background-color var(--duration-fast) var(--ease-fluent);
    overflow: hidden;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
    border-radius: 0;
    margin-top: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }
  .glyde-stacked-card:first-child {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .glyde-stacked-card:hover {
    background: rgba(0, 0, 0, 0.03);
  }

  .glyde-stacked-card .stacked-card-content {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    font-size: 11px;
  }

  .glyde-stacked-card .stacked-card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 1;
    min-width: 0;
    font-size: 11px;
    color: var(--colorNeutralForeground2);
  }

  .glyde-stacked-card .stacked-card-date {
    font-size: 10px;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
  }

  .glyde-stacked-card.additional-indicator {
    justify-content: center;
  }
  .glyde-stacked-card.additional-indicator .additional-count-text {
    font-size: 11px;
    color: var(--color-text-tertiary);
  }

  .conversations-loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }

  .conversations-loading-spinner svg {
    animation: rotate 1s linear infinite;
    transform-origin: center;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  .conversations-loading-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
  }

  .conversations-loading-spinner svg {
    animation: rotate 1s linear infinite;
    transform-origin: center;
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* Search area - liquid glass footer */
  .glyde-conversation-search {
    flex-shrink: 0;
    padding: 16px;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.04);
  }
}
/* === pause GLYDE scope: host-body launcher offset must stay global === */
.glyde-has-links-launcher .glyde-conversation-search {
  padding-left: 100px;
}
/* === resume GLYDE scope === */
@scope (.glyde-app, .glyde-scope, [id^='glyde-']) {
  .glyde-conversation-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: none;
    border-radius: var(--border-radius-large);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.5);
    color: var(--colorNeutralForeground1);
    transition: all var(--duration-fast);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
    position: relative;
  }

  .glyde-conversation-search-input::placeholder {
    color: var(--colorNeutralForeground3);
  }

  .glyde-conversation-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-brand-primary);
    background: rgba(255, 255, 255, 0.7);
  }

  /* Search wrapper with icon */
  .glyde-conversation-search .glyde-search-wrapper {
    position: relative;
  }
  .glyde-conversation-search .glyde-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--colorNeutralForeground3);
    pointer-events: none;
  }
  .glyde-conversation-search .glyde-search-wrapper .glyde-conversation-search-input {
    padding-left: 36px;
  }

  /* Logout link in sidebar - primary color */
  .admin-logout-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-brand-primary);
    text-decoration: none;
    transition: color var(--duration-fast);
  }
  .admin-logout-link:hover {
    color: var(--color-brand-primary-hover);
  }

  /* -------------------------------------------------------------------------- */
  /* 7. Component: Chat Area (Messages)                                         */
  /* -------------------------------------------------------------------------- */
  .glyde-chat-messages {
    padding: 20px 16px;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--color-surface-primary);
    min-height: 0; /* Critical for nested flex scrolling */
  }

  /* Add this rule to prevent messages from squashing */
  .glyde-chat-messages > * {
    flex-shrink: 0;
  }

  /* Unified History Card (Email, Notes, Screen Chat groups) */
  .glyde-history-card,
  .glyde-message.note,
  .glyde-message.internal,
  .email-message,
  .screen-chat-group {
    display: block;
    margin: 12px 0;
    border: 1px solid var(--neutralStroke2);
    border-radius: 24px;
    background-color: var(--color-surface-primary);
    box-shadow: var(--shadow-2);
    overflow: hidden;
    transition: all 0.2s ease;
  }

  .glyde-history-card:hover {
    box-shadow: var(--shadow-4);
  }

  /* Accent left border for history cards belonging to the current/selected application */
  .glyde-history-card.current-application {
    border-left: 3px solid var(--color-brand-primary);
  }

  .glyde-scope .expanded {
    box-shadow: var(--shadow-8);
    border-color: var(--color-brand-primary);
  }

  /* ── Unified Card Header ─────────────────────────────────────────────────── */
  /* All expandable history cards (notes, emails, screen-chats) share this.    */
  /* Layout: [type pill] [title] [status pill?] [spacer] [timestamp] [chevron] */
  .card-header {
    padding: 12px 16px;
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    gap: 0;
  }
  .card-header-content {
    display: flex;
    align-items: center;
    gap: var(--spacing-m, 8px);
    overflow: hidden;
    min-width: 0;
  }
  .card-header-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-header-job-link {
    text-decoration: none;
    color: inherit;
  }
  .card-header-job-link:hover .card-header-job-title {
    text-decoration: underline;
  }
  .card-header-job-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card-header-timestamp {
    margin: 0 12px 0 auto;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 400;
    color: var(--colorNeutralForeground3, #999);
  }

  /* ── Unified Card Chevron (down/X swap via opacity) ─────────────────────── */
  .card-chevron {
    width: 24px;
    height: 24px;
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    position: relative;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
  }
  .card-chevron-icon {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease;
  }
  .card-chevron-svg {
    display: block;
    color: currentColor;
  }
  .card-chevron-down {
    opacity: 1;
  }
  .card-chevron-close {
    opacity: 0;
  }
  .card-chevron.expanded .card-chevron-down {
    opacity: 0;
  }
  .card-chevron.expanded .card-chevron-close {
    opacity: 1;
  }
  .card-chevron.expanded .card-chevron-close .card-chevron-svg {
    width: 18px;
    height: 18px;
  }
  .card-chevron.expanded {
    background-color: rgba(0, 0, 0, 0.1);
  }

  /* ── Per-card-type header background colors ──────────────────────────────── */
  .card-header.email-message-header {
    background-color: var(--color-brand-lighter);
    color: var(--color-brand-primary);
  }
  .card-header.screen-chat-header {
    background-color: var(--color-info-light);
    color: var(--color-info-vibrant);
  }
  .card-header.note-header {
    background-color: rgba(255, 248, 240, 0.85); /* Acrylic warning */
    color: var(--color-warning-vibrant);
    backdrop-filter: blur(8px);
  }
  .card-header.note-header.header-positive {
    background-color: rgba(212, 245, 212, 0.7); /* Acrylic success */
    color: var(--color-success-vibrant);
  }
  .card-header.note-header.header-negative {
    background-color: rgba(255, 224, 224, 0.7); /* Acrylic danger */
    color: var(--color-danger-vibrant);
  }
  .card-header.note-header.header-pending {
    background-color: rgba(255, 231, 212, 0.7); /* Acrylic warning */
    color: var(--color-warning-vibrant);
  }
  .card-header.note-header.header-status {
    background-color: rgba(243, 244, 246, 0.9); /* Neutral grey */
    color: var(--color-neutral-foreground, #374151);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .message-type-pill.note-pill-stage {
    background-color: rgba(243, 244, 246, 0.95);
    color: var(--color-neutral-foreground, #374151);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .message-type-pill.note-pill {
    background-color: rgba(255, 248, 240, 0.85);
    color: var(--color-warning-vibrant);
    backdrop-filter: blur(4px);
    border: 1px solid var(--color-warning);
  }

  /* Card Body Content */
  .card-body,
  .screen-chat-messages {
    padding: 16px;
    background-color: white;
    display: none; /* Collapsed by default */
  }

  .card-body.expanded,
  .screen-chat-messages.expanded,
  .screen-chat-group.expanded .screen-chat-messages {
    display: block;
    max-height: 400px;
    overflow-y: auto;
  }

  /* Liquid Glass: Screen Chat messages area only */
  .screen-chat-messages.expanded,
  .screen-chat-group.expanded .screen-chat-messages {
    padding: 24px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }

  /* Standard Chat Bubbles */
  .glyde-message {
    display: flex;
    margin-bottom: 16px;
    align-items: flex-end;
  }

  .glyde-message.assistant {
    justify-content: flex-end;
  } /* Me */
  .message-content.assistant {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .glyde-message.candidate {
    justify-content: flex-start;
  } /* Them */
  .glyde-message.assistant.bot-message {
    justify-content: flex-start;
  } /* Bot acting as user assistant */

  .glyde-message-bubble {
    padding: 12px 16px;
    max-width: 80%;
    width: fit-content;
    font-size: 14px;
    line-height: 1.4;
  }

  .candidate-bubble {
    background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
    color: var(--colorNeutralForeground1);
    border-radius: 18px 18px 18px 4px;
  }

  .assistant-bubble {
    background: var(--gradient-brand);
    color: white;
    border-radius: 18px 18px 4px 18px;
  }

  .avatar img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--neutralStroke2);
  }

  .message-timestamp {
    font-size: 10px;
    color: var(--color-text-tertiary);
    margin-top: 4px;
    text-align: right;
  }

  /* Screen Chat messages: Liquid Glass design (message view only) */
  .screen-chat-messages .glyde-message {
    margin-bottom: 32px;
    align-items: flex-start;
  }
  .screen-chat-messages .glyde-message.talent {
    justify-content: flex-start;
  }
  .screen-chat-messages .glyde-message.user {
    justify-content: flex-end;
  }
  .screen-chat-messages .glyde-message.talent .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .screen-chat-messages .glyde-message.user .message-content {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .screen-chat-messages .message-sender-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
    color: #94a3b8;
  }
  .screen-chat-messages .glyde-message.user .message-sender-label {
    color: #2196f3;
  }
  .screen-chat-messages .talent-bubble {
    background: #ffffff;
    color: #334155;
    border: 1px solid #f1f5f9;
    border-radius: 4px 24px 24px 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 16px;
    max-width: 28rem;
    font-size: 14px;
    line-height: 1.5;
  }
  .screen-chat-messages .user-bubble {
    background: #2196f3;
    color: #fff;
    border-radius: 24px 4px 24px 24px;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.2);
    padding: 16px;
    max-width: 28rem;
    font-size: 14px;
    line-height: 1.5;
  }
  .screen-chat-messages .glyde-message.talent .message-timestamp {
    text-align: left;
    font-size: 10px;
    color: #94a3b8;
    margin-top: 8px;
    padding: 0 4px;
  }
  .screen-chat-messages .glyde-message.user .message-timestamp {
    text-align: right;
    font-size: 10px;
    color: #94a3b8;
    margin-top: 8px;
    padding: 0 4px;
  }
  .screen-chat-messages .avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  .screen-chat-messages .glyde-message.talent .avatar {
    background: #e2e8f0;
  }
  .screen-chat-messages .glyde-message.user .avatar {
    background: #dbeafe;
  }
  .screen-chat-messages .avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: none;
  }

  /* Legacy chevron base (kept for .drawer-chevron and .fluent-chevron; card chevron is in card-header section above) */
  .chevron {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    margin-left: auto;
  }
  .chevron.expanded {
    transform: rotate(180deg);
    background-color: rgba(0, 0, 0, 0.1);
  }

  /* -------------------------------------------------------------------------- */
  /* 8. Component: Input Area                                                   */
  /* -------------------------------------------------------------------------- */
  .glyde-chat-input {
    border-top: 1px solid var(--color-neutral-grey-16);
    background-color: var(--color-surface-primary);
    z-index: 10;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
    margin: 0 16px 12px;
    border-radius: 24px;
    overflow: visible;
    flex-shrink: 0;
    position: relative;
    min-height: 160px;
  }

  .glyde-tab-buttons {
    display: flex;
    padding: 12px 16px 0;
    gap: 8px;
  }

  .glyde-tab-button {
    flex: 1;
    padding: 4px 12px;
    background-color: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--colorNeutralForeground2);
  }

  .glyde-tab-button:hover {
    background-color: var(--colorNeutralBackground1Hover);
  }

  .glyde-tab-button.active {
    background: var(--gradient-brand);
    color: white;
    border-color: transparent;
    font-weight: 600;
    box-shadow: var(--shadow-brand);
  }

  .glyde-tab-contents {
    padding: 16px;
    background-color: var(--color-surface-tertiary);
  }

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

  .glyde-tab-content textarea {
    width: 100%;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid var(--colorNeutralStroke2);
    resize: none;
    background-color: white;
  }

  /* Contextual Input Colors */
  .glyde-tab-content[data-tab-content='notes'] textarea {
    background-color: var(--color-warning-light);
    border-color: var(--color-warning);
  }
  .glyde-tab-content[data-tab-content='internal'] textarea {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
  }
  .glyde-tab-content[data-tab-content='glyde'] {
    background: var(--color-neutral-grey-8);
    border-radius: 12px;
    padding: 16px;
    position: relative; /* Allow absolutely positioned children */
    overflow: visible; /* Allow drawer to overflow upward */
    /* Maintain minimum height based on padding - drawer expansion won't affect this */
    min-height: 100px; /* Minimum height to accommodate drawer toggle when collapsed */
  }
  .glyde-tab-content[data-tab-content='glyde'] .input-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
  }

  /* ACS Chat Drawer Container - Absolutely positioned to overflow without affecting parent height.
   Scoped to the docked in-page modal (#glyde-chat-modal) where the drawer slides up over tab
   content. Must NOT apply to the side panel (#acs-chat-drawer-container lives in the GLYDE
   Buddy accordion section there, where it needs to participate in the flex flow as
   position: relative — see sidepanel.css). Previously this was a bare id selector with the same
   specificity as the sidepanel.css override, so source order decided the winner and the drawer
   could collapse to 0 height in the side panel if styles.css loaded after sidepanel.css. */
  #glyde-chat-modal #acs-chat-drawer-container {
    position: absolute;
    bottom: -10px; /* Anchor to bottom of tab content */
    left: 0;
    right: 0;
    z-index: 100; /* Ensure it appears above other content */
    pointer-events: auto; /* Ensure it's interactive */
    width: 100%; /* Match parent width */
    /* When drawer expands, it will grow upward without affecting tab content height */
    transform-origin: bottom center; /* Expand from bottom */
  }

  /* GLYDE tab expanded mode rules live OUTSIDE the @scope block at the END of
     this file — see "GLYDE tab expanded mode (unscoped tail)". Inside @scope,
     these overrides lost the cascade to the base compose/drawer rules
     (scope-proximity), which clipped the whole ACS chat out of view. */

  /* ✕ button on the ACS drawer header — closes the chat outright (the chevron
     only collapses it). Rendered by generateDefaultDrawerUI when showClose. */
  .drawer-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--colorNeutralForeground2, #616161);
    cursor: pointer;
    flex: 0 0 auto;
  }
  .drawer-close-btn:hover {
    background: var(--colorNeutralBackground1Hover, #f5f5f5);
    color: var(--colorNeutralForeground1, #242424);
  }

  .glyde-send-message-btn {
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--gradient-brand);
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    width: 100%;
    transition: transform 0.1s;
  }
  .glyde-send-message-btn:active {
    transform: scale(0.98);
  }

  /* -------------------------------------------------------------------------- */
  /* 8b. Compose Panel: Liquid Glass (SMS / Email / Notes / GLYDE) – section only */
  /* -------------------------------------------------------------------------- */
  .glyde-chat-input.compose-panel-glass {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.07);
    border-radius: 16px;
    overflow: hidden;
    border-top: 1px solid var(--color-neutral-grey-16);
  }

  .glyde-chat-input.compose-panel-glass .compose-panel-tabs {
    display: flex;
    align-items: center;
    padding: 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    gap: 8px;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button {
    position: relative;
    flex: 0 0 auto;
    padding: 20px 16px;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary, #64748b);
    transition: color 0.2s;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button:hover {
    color: var(--color-text-primary, #111);
    background: transparent;
  }

  /* Active tab: color per type + bottom line (project primary / tab accent) */
  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='sms'].active {
    color: var(--color-success);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='sms'].active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--color-success);
    border-radius: 4px 4px 0 0;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='notes'].active {
    color: var(--color-warning);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='notes'].active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--color-warning);
    border-radius: 4px 4px 0 0;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='email'].active {
    color: var(--color-info);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='email'].active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--color-info);
    border-radius: 4px 4px 0 0;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='glyde'].active {
    color: var(--color-brand-primary);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='glyde'].active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: var(--color-brand-primary);
    border-radius: 4px 4px 0 0;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-contents {
    padding: 24px;
    background: transparent;
    border-radius: 0;
  }

  /** SMS / Notes / Email: only when active; textarea and Send button on one row */
  .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='sms'],
  .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='notes'],
  .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='email'] {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .glyde-chat-input.compose-panel-glass .compose-tab-row {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 12px;
    width: 100%;
  }
  .glyde-chat-input.compose-panel-glass .compose-tab-row textarea {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
    min-height: 88px;
  }
  .glyde-chat-input.compose-panel-glass .compose-tab-row .glyde-send-message-btn {
    margin-top: 0;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    white-space: nowrap;
    align-self: flex-end;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .glyde-chat-input.compose-panel-glass .compose-email-subject {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    color: var(--color-text-primary, #1e293b) !important;
    transition:
      border-color 0.2s ease,
      background 0.2s ease,
      box-shadow 0.2s ease !important;
  }

  .glyde-chat-input.compose-panel-glass .compose-email-subject:focus {
    border-color: var(--color-info, #0086f0) !important;
    background: rgba(255, 255, 255, 0.65) !important;
    box-shadow: 0 0 0 3px rgba(0, 134, 240, 0.15) !important;
    outline: none !important;
  }

  /* Glass inputs: textarea and email subject */
  .glyde-chat-input.compose-panel-glass .glyde-tab-content textarea,
  .glyde-chat-input.compose-panel-glass .glyde-tab-content .email-subject-input {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    padding: 14px 16px;
    transition:
      border-color 0.2s,
      background 0.2s;
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content textarea:focus,
  .glyde-chat-input.compose-panel-glass .glyde-tab-content .email-subject-input:focus {
    outline: none;
    border-color: var(--color-brand-primary);
    background: rgba(255, 255, 255, 0.5);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content .email-subject-input {
    margin-bottom: 12px;
    min-height: 40px;
  }

  /* Tab-specific input border colors (match message type) */
  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='sms'] textarea {
    border-color: rgba(16, 162, 16, 0.35);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='sms'] textarea:focus {
    border-color: var(--color-success);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='notes'] textarea {
    border-color: rgba(247, 99, 12, 0.35);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='notes'] textarea:focus {
    border-color: var(--color-warning);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='email'] textarea,
  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='email'] .email-subject-input {
    border-color: rgba(0, 134, 240, 0.35);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='email'] textarea:focus,
  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='email'] .email-subject-input:focus {
    border-color: var(--color-info);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content[data-tab-content='glyde'] {
    background: transparent;
  }

  /* Glossy send button (project primary) */
  .glyde-chat-input.compose-panel-glass .glyde-send-message-btn {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--color-brand-vibrant) 0%, var(--color-brand-primary) 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 15px var(--color-brand-glow);
    position: relative;
    overflow: hidden;
    transition:
      transform 0.2s,
      box-shadow 0.2s;
  }

  .glyde-chat-input.compose-panel-glass .glyde-send-message-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    transform: rotate(30deg);
    pointer-events: none;
  }

  .glyde-chat-input.compose-panel-glass .glyde-send-message-btn:hover {
    box-shadow: 0 6px 20px var(--color-brand-glow);
  }

  .glyde-chat-input.compose-panel-glass .glyde-more-button {
    color: var(--color-text-tertiary, #94a3b8);
  }

  .glyde-chat-input.compose-panel-glass .glyde-more-button:hover {
    color: var(--color-brand-primary);
  }

  /* -------------------------------------------------------------------------- */
  /* 8c. Compose Panel: channel icons, pill layout, send button polish         */
  /* -------------------------------------------------------------------------- */

  /* Tab buttons: icon + label layout (used in the docked modal compose panel). */
  .glyde-chat-input.compose-panel-glass .glyde-tab-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .glyde-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.85;
  }

  .glyde-tab-icon .channel-icon {
    display: block;
    width: 100%;
    height: 100%;
  }

  .glyde-tab-label {
    font-size: 0.8125rem;
    line-height: 1;
  }

  /* Channel icons pick up the active/inactive tab color via currentColor. */
  .glyde-chat-input.compose-panel-glass .glyde-tab-button:not(.active) .glyde-tab-icon {
    color: var(--color-text-secondary, #64748b);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-button.active .glyde-tab-icon {
    opacity: 1;
  }

  /* SMS active → success-green icon, Notes → warning-orange, Email → info-blue,
   GLYDE → brand-purple. Color cascade automatically applies to both label and icon. */
  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='sms'].active .glyde-tab-icon {
    color: var(--color-success);
  }
  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='notes'].active .glyde-tab-icon {
    color: var(--color-warning);
  }
  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='email'].active .glyde-tab-icon {
    color: var(--color-info);
  }
  .glyde-chat-input.compose-panel-glass .glyde-tab-button[data-tab='glyde'].active .glyde-tab-icon {
    color: var(--color-brand-primary);
  }

  /* Channel-colored send buttons: matches the active tab's accent so the action
   feels connected to the channel the user is composing in. */
  .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='sms'] .glyde-send-message-btn {
    background: linear-gradient(135deg, var(--color-success-vibrant) 0%, var(--color-success) 100%);
    box-shadow: 0 4px 15px rgba(16, 162, 16, 0.28);
  }

  .glyde-chat-input.compose-panel-glass
    .glyde-tab-content.active[data-tab-content='sms']
    .glyde-send-message-btn:hover {
    box-shadow: 0 6px 20px rgba(16, 162, 16, 0.36);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='notes'] .glyde-send-message-btn {
    background: linear-gradient(135deg, var(--color-warning-vibrant) 0%, var(--color-warning) 100%);
    box-shadow: 0 4px 15px rgba(247, 99, 12, 0.28);
  }

  .glyde-chat-input.compose-panel-glass
    .glyde-tab-content.active[data-tab-content='notes']
    .glyde-send-message-btn:hover {
    box-shadow: 0 6px 20px rgba(247, 99, 12, 0.36);
  }

  .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='email'] .glyde-send-message-btn {
    background: linear-gradient(135deg, var(--color-info-vibrant) 0%, var(--color-info) 100%);
    box-shadow: 0 4px 15px rgba(0, 134, 240, 0.28);
  }

  .glyde-chat-input.compose-panel-glass
    .glyde-tab-content.active[data-tab-content='email']
    .glyde-send-message-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 134, 240, 0.36);
  }

  /* Send button now carries an icon alongside its label for a more "action" feel.
   The icon is injected by the compose wiring; style defensively so the button
   stays aligned with or without it. */
  .glyde-send-message-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .glyde-send-message-btn .send-btn-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }

  .glyde-send-message-btn .send-btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* -------------------------------------------------------------------------- */
  /* 8e. Modern Compose Card: Unified card, borderless inputs, footer utility bar */
  /* -------------------------------------------------------------------------- */

  .modern-compose-card {
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    width: 100%;
    box-sizing: border-box;
    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease,
      background 0.2s ease;
    overflow: hidden;
    box-shadow:
      0 4px 20px rgba(0, 0, 0, 0.03),
      0 1px 3px rgba(0, 0, 0, 0.01);
  }

  /* Focus-within states: style the entire card based on which tab is active and focused */
  .glyde-tab-content[data-tab-content='sms'] .modern-compose-card:focus-within {
    border-color: var(--color-success, #10a210);
    background: rgba(255, 255, 255, 0.65);
    box-shadow:
      0 0 0 3px rgba(16, 162, 16, 0.15),
      0 6px 24px rgba(16, 162, 16, 0.06);
  }

  .glyde-tab-content[data-tab-content='notes'] .modern-compose-card:focus-within {
    border-color: var(--color-warning, #f7630c);
    background: rgba(255, 255, 255, 0.65);
    box-shadow:
      0 0 0 3px rgba(247, 99, 12, 0.15),
      0 6px 24px rgba(247, 99, 12, 0.06);
  }

  .glyde-tab-content[data-tab-content='email'] .modern-compose-card:focus-within {
    border-color: var(--color-info, #0086f0);
    background: rgba(255, 255, 255, 0.65);
    box-shadow:
      0 0 0 3px rgba(0, 134, 240, 0.15),
      0 6px 24px rgba(0, 134, 240, 0.06);
  }

  /* Textarea inside the modern card */
  .modern-compose-textarea {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 16px 16px 8px 16px !important;
    min-height: 80px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-primary, #1e293b);
    resize: none !important;
    box-sizing: border-box;
  }

  /* Footer row inside the card */
  .modern-compose-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 12px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    width: 100%;
  }

  /* SMS footer has no utility bar — pin Send to the trailing edge */
  .modern-compose-footer--sms,
  .modern-compose-footer--send-only {
    justify-content: flex-end;
  }

  /* Left utilities bar */
  .modern-compose-utilities {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .utility-icon-btn {
    background: transparent;
    border: none;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary, #94a3b8);
    cursor: pointer;
    transition:
      background 0.15s ease,
      color 0.15s ease;
    padding: 0;
    margin: 0;
  }

  .utility-icon-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-primary, #1e293b);
  }

  .utility-icon-btn svg {
    display: block;
    stroke-width: 2px;
  }

  /* Send button inside the modern footer */
  .modern-send-btn {
    margin-top: 0 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 36px !important;
    min-height: 36px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: auto !important;
    white-space: nowrap !important;
    box-shadow: none;
    transition:
      transform 0.1s ease,
      box-shadow 0.15s ease,
      filter 0.15s ease !important;
  }

  .modern-send-btn:active {
    transform: scale(0.97) !important;
  }

  .modern-send-btn .send-btn-label {
    display: inline-block;
  }

  .modern-send-btn .send-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
  }

  .modern-send-btn .send-btn-icon svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  /* -------------------------------------------------------------------------- */
  /* 8d. History pills + bodies: icons, SMS delivery, email/note typography     */
  /* -------------------------------------------------------------------------- */

  /* Type pills now optionally carry an icon + label; switch to inline-flex so
   the icon and text stay aligned across pill variants. */
  .message-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  .message-type-pill__label {
    line-height: 1;
  }

  .message-type-pill .channel-icon {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
  }

  /* The default `.sms-pill` rule forces white text and a translucent background,
   which works inside the old bubble layout but not the new pill-with-icon.
   Scope it to the legacy placement only. */
  .sms-message-meta .message-type-pill.sms-pill {
    display: none;
  }

  /* New SMS channel badge: small chat-bubble glyph + "SMS" label, sits inline
   with the timestamp and delivery check on the right-aligned outgoing bubble. */
  .sms-channel-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
  }

  .sms-channel-badge .channel-icon {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
  }

  .sms-channel-badge__label {
    line-height: 1;
  }

  /* SMS delivery indicator: replaces the old "✓✓" text glyph with proper SVGs.
   Sent = single check (muted), Delivered/Read = double check (brighter). */
  .sms-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
  }

  .sms-status-icon .sms-delivery-icon {
    display: block;
  }

  .sms-status-icon--sent {
    opacity: 0.7;
  }

  .sms-status-icon--delivered {
    opacity: 0.95;
  }

  /* Outgoing SMS meta row: tighter, right-aligned, clearly secondary. */
  .sms-message-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: 0.1px;
    opacity: 0.92;
  }

  .sms-timestamp {
    font-size: 10.5px;
    opacity: 0.95;
  }

  /* Email body: readable typography once expanded. Email content often arrives
   with embedded <br>/newlines; preserve them and constrain width for comfort. */
  .email-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--colorNeutralForeground1, #242424);
    word-wrap: break-word;
    overflow-wrap: anywhere;
  }

  .email-body p {
    margin: 0 0 10px;
  }

  .email-body p:last-child {
    margin-bottom: 0;
  }

  /* Note body: matches email body treatment but slightly tighter so the
   "Highlights" pills + screening summary reads like a quick brief. */
  .note-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--colorNeutralForeground1, #242424);
  }

  .note-body h3 {
    margin: 12px 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground1, #242424);
  }

  .note-body h3:first-child {
    margin-top: 0;
  }

  .note-body ul {
    margin: 6px 0 10px;
    padding-left: 20px;
  }

  .note-body li {
    margin-bottom: 4px;
  }

  .note-body p {
    margin: 0 0 8px;
  }

  .note-body p:last-child {
    margin-bottom: 0;
  }

  /* -------------------------------------------------------------------------- */
  /* 9. Component: Drawers & Overlays (Refactored for Fluent 2)                 */
  /* -------------------------------------------------------------------------- */
  .glyde-chat-history-drawer {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative; /* Ensure correct stacking context */
    z-index: 5;
  }

  /* The Header/Toggle */
  .glyde-drawer-header-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.33, 1, 0.68, 1);
    user-select: none;
    min-height: 48px;
    box-shadow: var(--shadow-2);
    position: relative;
    z-index: 10; /* Keep header above drawer content */
    margin-bottom: 8px; /* Space between header and next element when closed */
  }

  .glyde-drawer-header-toggle:hover {
    background-color: var(--colorNeutralBackground1Hover);
    box-shadow: var(--shadow-4);
  }

  /* Connected state when open */
  .glyde-chat-history-drawer:has(.acs-chat-drawer:not(.glyde-hidden)) .glyde-drawer-header-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: transparent;
    box-shadow: var(--shadow-4);
    margin-bottom: 0; /* Connect to drawer */
  }

  /* The Drawer Content (Messages) */
  .acs-chat-drawer {
    overflow: hidden;
    transition:
      max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.3s ease,
      margin-top 0.3s ease,
      padding-top 0.3s ease;
    max-height: 500px; /* Approx max height */
    opacity: 1;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-top: none; /* Connect to header */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    box-shadow: var(--shadow-8);
    position: relative; /* In flow, pushing content down */
    z-index: 5;
    padding-top: 0;
    display: flex;
    flex-direction: column;
  }

  /* Messages container in candidate view - Fluent 2 expand animation */
  /* Start with height 1px so expand animation can be implemented per Fluent 2 guidelines */
  .acs-chat-messages,
  .acs-chat-drawer .glyde-drawer-messages.acs-messages-container,
  .acs-chat-drawer #acs-messages.acs-messages-container {
    height: 1px; /* Initial height for expand animation */
    overflow: hidden;
    transition:
      height 0.7s cubic-bezier(0.33, 1, 0.68, 1),
      opacity 0.4s ease;
    opacity: 0;
  }

  /* Expanded state - when drawer is visible */
  .acs-chat-drawer:not(.glyde-hidden) .glyde-drawer-messages.acs-messages-container,
  .acs-chat-drawer:not(.glyde-hidden) #acs-messages.acs-messages-container {
    height: auto;
    min-height: 400px;
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
  }

  /* Expanded state for standalone .acs-chat-messages */
  .acs-chat-messages:not(.glyde-hidden) {
    height: auto;
    min-height: 200px;
    max-height: 400px;
    opacity: 1;
    overflow-y: auto;
  }

  /* Collapsed State */
  .acs-chat-drawer.glyde-hidden {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
    border: none;
    box-shadow: none;
    pointer-events: none; /* Prevent interaction when closed */
    display: none; /* Fully hide to prevent layout gaps */
  }

  .acs-chat-drawer.glyde-hidden {
    display: none !important; /* Keep it simple for now as animation with display:none is hard without JS help */
    /* To animate, we'd need to toggle a 'collapsed' class instead of 'hidden'.
     For now, let's stick to functionality (open/close) and correct layout. */
  }

  /* -------------------------------------------------------------------------- */
  /* Input Area Styling (Unified)                                               */
  /* -------------------------------------------------------------------------- */
  .acs-input-container {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 12px;
    background-color: var(--colorNeutralBackground1);
    border-top: 1px solid var(--colorNeutralStroke2);
    /* This input container is inside the drawer now */
  }

  /* -------------------------------------------------------------------------- */
  /* Fluent 2 Tabs                                                              */
  /* -------------------------------------------------------------------------- */
  .glyde-tab-buttons {
    display: flex;
    padding: 0 16px;
    gap: 16px;
    border-bottom: 1px solid var(--colorNeutralStroke2);
    background: var(--colorNeutralBackground1);
    margin-top: 8px;
  }

  .glyde-tab-button {
    background: none;
    border: none;
    padding: 8px 4px; /* Horizontal padding for touch target */
    font-size: 14px;
    font-weight: 600;
    color: var(--colorNeutralForeground2);
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
    border-radius: 4px; /* Hover radius */
  }

  .glyde-tab-button:hover {
    color: var(--colorNeutralForeground1);
    background-color: var(--colorNeutralBackground1Hover);
  }

  .glyde-tab-button.active {
    color: var(--color-brand-primary);
    background: none;
    border: none;
    box-shadow: none;
  }

  /* Active Indicator (Underline) */
  .glyde-tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0; /* Sit on the border-bottom of container */
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--color-brand-primary);
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
  }

  /* Contextual Colors for Active Tabs (Optional, maintaining existing logic via modifiers if needed, but Fluent prefers uniformity) */
  /* If we want to keep color coding: */
  .glyde-tab-button.active[data-tab='notes'] {
    color: var(--color-warning-vibrant);
  }
  .glyde-tab-button.active[data-tab='notes']::after {
    background-color: var(--color-warning-vibrant);
  }

  .glyde-tab-button.active[data-tab='email'] {
    color: var(--color-brand-primary);
  }
  .glyde-tab-button.active[data-tab='email']::after {
    background-color: var(--color-brand-primary);
  }

  .glyde-tab-button.active[data-tab='glyde'] {
    color: var(--color-info-vibrant);
  }
  .glyde-tab-button.active[data-tab='glyde']::after {
    background-color: var(--color-info-vibrant);
  }

  /* -------------------------------------------------------------------------- */
  /* Fluent 2 Meatballs Menu (More Actions)                                     */
  /* -------------------------------------------------------------------------- */
  .glyde-more-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
  }

  .glyde-more-button {
    background: transparent;
    border: 1px solid transparent; /* Invisible border to prevent layout shift on hover */
    color: var(--colorNeutralForeground1);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.2s ease;
  }

  .glyde-more-button:hover {
    background-color: var(--colorNeutralBackground1Hover);
    color: var(--colorNeutralForeground1);
  }

  .glyde-more-button:active {
    background-color: var(--colorNeutralBackground1Pressed);
  }

  .glyde-more-menu {
    position: absolute;
    right: 16px;
    top: 48px; /* Adjust based on button position */
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--colorNeutralStroke2);
    border-radius: 8px;
    box-shadow: var(--shadow-8);
    padding: 4px;
    z-index: 100;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    animation: fluent-scale-in 0.15s ease-out;
  }

  .glyde-more-action {
    text-align: left;
    background: none;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    color: var(--colorNeutralForeground1);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.1s;
  }

  .glyde-more-action:hover {
    background-color: var(--colorNeutralBackground1Hover);
  }

  /* Fix input area padding inside tabs */
  .glyde-tab-contents {
    padding: 16px;
    background-color: var(--colorNeutralBackground2); /* Slightly distinct from white tabs */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }

  /* -------------------------------------------------------------------------- */
  /* 10. Component: Right Pane (CRM Info)                                       */
  /* -------------------------------------------------------------------------- */
  .glyde-crm-details {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* --- Candidate Header Card --- */
  .candidate-header-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--neutralStroke2);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-2);
  }

  .candidate-avatar {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-circular);
    background: var(--gradient-brand);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    flex-shrink: 0;
    letter-spacing: 0.5px;
  }

  .candidate-header-info {
    flex: 1;
    min-width: 0;
  }

  .candidate-header-name {
    font-size: var(--font-size-300);
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    line-height: var(--line-height-300);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .candidate-header-name a {
    color: var(--color-brand-primary);
    text-decoration: none;
    transition: color var(--duration-fast);
  }

  .candidate-header-name a:hover {
    color: var(--color-brand-primary-hover);
    text-decoration: underline;
  }

  .candidate-header-sub {
    font-size: var(--font-size-100);
    color: var(--colorNeutralForeground3);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .ats-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: var(--border-radius-pill);
    background: var(--color-brand-lighter);
    color: var(--color-brand-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all var(--duration-fast);
  }

  a.ats-badge:hover {
    background: var(--color-brand-primary);
    color: white;
    box-shadow: var(--shadow-2);
  }

  /* --- Contact Info Section --- */
  .candidate-contact-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--neutralStroke2);
    border-radius: var(--border-radius-medium);
  }

  .candidate-contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--font-size-200);
    color: var(--colorNeutralForeground2);
    line-height: var(--line-height-200);
    min-height: 24px;
  }

  .candidate-contact-row .contact-icon {
    width: 16px;
    text-align: center;
    color: var(--colorNeutralForeground4);
    font-size: 14px;
    flex-shrink: 0;
  }

  .candidate-contact-row a {
    color: var(--color-brand-primary);
    text-decoration: none;
  }

  .candidate-contact-row a:hover {
    text-decoration: underline;
  }

  /* --- ATS Record Links --- */
  .ats-links-section {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ats-record-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--border-radius-pill);
    border: 1px solid var(--neutralStroke2);
    background: var(--colorNeutralBackground1);
    color: var(--color-brand-primary);
    font-size: var(--font-size-100);
    font-weight: 500;
    text-decoration: none;
    transition: all var(--duration-normal);
    cursor: pointer;
  }

  .ats-record-link:hover {
    background: var(--color-brand-lighter);
    border-color: var(--color-brand-primary);
    box-shadow: var(--shadow-2);
  }

  .ats-record-link .link-icon {
    font-size: 12px;
  }

  .ats-record-link.disabled {
    color: var(--colorNeutralForeground4);
    cursor: default;
    opacity: 0.6;
  }

  .ats-record-link.disabled:hover {
    background: var(--colorNeutralBackground1);
    border-color: var(--neutralStroke2);
    box-shadow: none;
  }

  /* --- Quick Actions Bar --- */
  .quick-actions-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--neutralStroke2);
    background: var(--colorNeutralBackground1);
    color: var(--colorNeutralForeground2);
    font-size: var(--font-size-100);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-normal);
    white-space: nowrap;
  }

  .quick-action-btn:hover {
    background: var(--colorNeutralBackground1Hover);
    border-color: var(--colorNeutralStroke1);
    box-shadow: var(--shadow-2);
  }

  .quick-action-btn:active {
    background: var(--colorNeutralBackground1Pressed);
    transform: scale(0.97);
  }

  .quick-action-btn .action-icon {
    font-size: 14px;
    flex-shrink: 0;
  }

  .quick-action-btn.action-advance {
    color: var(--color-success);
    border-color: rgba(16, 162, 16, 0.25);
  }

  .quick-action-btn.action-advance:hover {
    background: var(--color-success-light);
    border-color: var(--color-success);
  }

  .quick-action-btn.action-reject {
    color: var(--color-danger);
    border-color: rgba(231, 60, 62, 0.25);
  }

  .quick-action-btn.action-reject:hover {
    background: var(--color-danger-light);
    border-color: var(--color-danger);
  }

  .quick-action-btn.action-hotlist {
    color: var(--color-warning);
    border-color: rgba(247, 99, 12, 0.25);
  }

  .quick-action-btn.action-hotlist:hover {
    background: var(--color-warning-light);
    border-color: var(--color-warning);
  }

  .quick-action-btn.action-apply {
    color: var(--color-info);
    border-color: rgba(0, 134, 240, 0.25);
  }

  .quick-action-btn.action-apply:hover {
    background: var(--color-info-light);
    border-color: var(--color-info);
  }

  /* --- Accordion Sections (Application History, Timeline) --- */
  .accordion-section {
    border: 1px solid var(--neutralStroke2);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    background: var(--colorNeutralBackground1);
  }

  .accordion-title {
    padding: 10px 12px;
    background-color: var(--colorNeutralBackground2);
    font-weight: 600;
    font-size: var(--font-size-100);
    color: var(--colorNeutralForeground2);
    border-bottom: 1px solid var(--neutralStroke2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    user-select: none;
    transition: background-color var(--duration-fast);
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }

  .accordion-title:hover {
    background-color: var(--colorNeutralBackground3);
  }

  .accordion-title::after {
    content: '▾';
    font-size: 12px;
    color: var(--colorNeutralForeground4);
    transition: transform var(--duration-normal);
  }

  .accordion-content.glyde-hidden + .accordion-title::after,
  .accordion-title.collapsed::after {
    transform: rotate(-90deg);
  }

  .accordion-content {
    padding: 10px 12px;
    background-color: var(--colorNeutralBackground1);
  }

  .accordion-content.glyde-hidden {
    display: none;
  }

  /* --- Application History Items --- */
  .app-history-item {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-neutral-grey-8);
    gap: 4px;
  }

  .app-history-item:last-child {
    border-bottom: none;
  }

  .app-history-item-clickable {
    cursor: pointer;
    margin: 0 -8px;
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 6px;
    transition: background-color 0.12s ease;
  }

  .app-history-item-clickable:hover,
  .app-history-item-clickable:focus-visible {
    background-color: var(--color-neutral-grey-8);
    outline: none;
  }

  .app-history-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .app-history-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
  }

  .app-action-sm {
    padding: 3px 8px !important;
    font-size: 11px !important;
    border-radius: var(--border-radius-small) !important;
  }

  .app-action-sm .action-icon {
    font-size: 10px !important;
  }

  .app-history-title {
    font-size: var(--font-size-200);
    font-weight: 500;
    color: var(--colorNeutralForeground1);
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-history-title a {
    color: var(--color-brand-primary);
    text-decoration: none;
  }

  .app-history-title a:hover {
    text-decoration: underline;
  }

  .app-history-title .crm-record-link,
  .job-candidate-name .crm-record-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    font-weight: 500;
    color: var(--color-brand-primary);
    cursor: pointer;
    text-align: left;
    text-decoration: none;
  }

  .app-history-title .crm-record-link:hover,
  .job-candidate-name .crm-record-link:hover {
    text-decoration: underline;
  }

  .crm-detail-list-truncation {
    margin: var(--spacing-xs, 8px) 0 0;
    font-size: var(--font-size-100, 12px);
    color: var(--colorNeutralForeground3, #616161);
    text-align: center;
  }

  .app-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--border-radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .app-status-pill.status-active,
  .app-status-pill.status-advance,
  .app-status-pill.status-qualified {
    background: var(--color-success-light);
    color: var(--color-success);
  }

  .app-status-pill.status-rejected,
  .app-status-pill.status-negative {
    background: var(--color-danger-light);
    color: var(--color-danger);
  }

  .app-status-pill.status-new,
  .app-status-pill.status-pending {
    background: var(--color-info-light);
    color: var(--color-info);
  }

  .app-status-pill.status-default {
    background: var(--color-neutral-grey-8);
    color: var(--colorNeutralForeground3);
  }

  /* --- Timeline --- */
  .timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 4px;
  }

  .timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background-color: var(--color-neutral-grey-16);
  }

  .timeline-item {
    position: relative;
    margin-bottom: 12px;
  }

  .timeline-item:last-child {
    margin-bottom: 0;
  }

  .timeline-dot {
    position: absolute;
    left: -21px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--color-brand-primary);
    border: 2px solid white;
    box-shadow: 0 0 0 1px var(--color-neutral-grey-20);
    z-index: 1;
  }

  .timeline-card {
    background: var(--colorNeutralBackground1);
    border: 1px solid var(--neutralStroke2);
    border-radius: var(--border-radius-medium);
    padding: 10px 12px;
    box-shadow: var(--shadow-2);
  }

  .timeline-card p {
    margin: 2px 0;
    font-size: var(--font-size-100);
    color: var(--colorNeutralForeground2);
    line-height: var(--line-height-100);
  }

  .timeline-card a {
    color: var(--color-brand-primary);
    text-decoration: none;
  }

  .timeline-card a:hover {
    text-decoration: underline;
  }

  .timeline-date {
    font-size: 11px;
    color: var(--colorNeutralForeground4);
  }

  .no-timeline {
    padding: 12px;
    text-align: center;
    color: var(--colorNeutralForeground4);
    font-style: italic;
    font-size: var(--font-size-100);
  }

  .no-data-message {
    color: var(--colorNeutralForeground4);
    font-style: italic;
    font-size: var(--font-size-100);
    text-align: center;
    padding: 8px;
  }

  /* --- Section Divider --- */
  .details-section-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--colorNeutralForeground4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px;
  }

  /* --- Job Details Panel --- */
  .job-header-card {
    position: relative;
  }

  .job-avatar {
    background: var(--color-info);
  }

  .job-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: var(--border-radius-pill);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .job-status-pill.status-advance {
    background: var(--color-success-light);
    color: var(--color-success);
  }

  .job-status-pill.status-rejected {
    background: var(--color-danger-light);
    color: var(--color-danger);
  }

  .job-status-pill.status-new {
    background: var(--color-info-light);
    color: var(--color-info);
  }

  .job-status-pill.status-default {
    background: var(--color-neutral-grey-8);
    color: var(--colorNeutralForeground3);
  }

  .job-archived-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 8px;
    border-radius: var(--border-radius-pill);
    background: var(--color-danger-light);
    color: var(--color-danger);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .job-cohorts-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .job-cohort-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-neutral-grey-8);
  }

  .job-cohort-item:last-child {
    border-bottom: none;
  }

  .job-cohort-count {
    font-size: var(--font-size-200);
    font-weight: 600;
    color: var(--colorNeutralForeground1);
    min-width: 28px;
    text-align: right;
  }

  .job-description-text {
    font-size: var(--font-size-200);
    color: var(--colorNeutralForeground2);
    line-height: var(--line-height-200);
    word-break: break-word;
    white-space: pre-wrap;
  }

  .job-description-full {
    white-space: normal;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 4px;
  }

  .job-description-full p {
    margin: 0 0 8px;
  }

  .job-description-full ul,
  .job-description-full ol {
    margin: 0 0 8px;
    padding-left: 20px;
  }

  .job-description-full h1,
  .job-description-full h2,
  .job-description-full h3,
  .job-description-full h4,
  .job-description-full h5,
  .job-description-full h6 {
    font-size: var(--font-size-200);
    font-weight: 600;
    margin: 8px 0 4px;
  }

  /* --- Job Company Name --- */
  .job-company-name {
    font-size: var(--font-size-200);
    color: var(--colorNeutralForeground3);
    margin-top: 2px;
  }

  /* --- Job Candidate Application List --- */
  .job-candidate-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 8px;
    border-top: 1px solid var(--color-neutral-grey-8);
    padding-top: 8px;
  }

  .job-candidate-row {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-neutral-grey-8);
    gap: 4px;
  }

  .job-candidate-row:last-child {
    border-bottom: none;
  }

  .job-candidate-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .job-candidate-name {
    font-size: var(--font-size-200);
    font-weight: 500;
    color: var(--colorNeutralForeground1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
  }

  .job-candidate-name a {
    color: var(--color-brand-primary);
    text-decoration: none;
  }

  .job-candidate-name a:hover {
    text-decoration: underline;
  }

  .job-candidate-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--colorNeutralForeground4);
  }

  .job-candidate-ats-status {
    font-style: italic;
  }

  .job-candidate-date {
    color: var(--colorNeutralForeground4);
  }

  .job-candidate-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
  }

  .quick-action-btn.action-search-candidates {
    color: var(--color-brand-primary);
    border-color: rgba(0, 95, 184, 0.25);
  }

  .quick-action-btn.action-search-candidates:hover {
    background: var(--color-brand-lighter);
    border-color: var(--color-brand-primary);
  }

  .quick-action-btn.action-share-job {
    color: var(--color-info);
    border-color: rgba(0, 134, 240, 0.25);
  }

  .quick-action-btn.action-share-job:hover {
    background: var(--color-info-light);
    border-color: var(--color-info);
  }

  /* -------------------------------------------------------------------------- */
  /* 10b. CRM Details Glass Card                                                */
  /* -------------------------------------------------------------------------- */
  .crm-details-section-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--colorNeutralForeground4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 4px;
    margin-bottom: 8px;
  }

  .crm-details-glass {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--border-radius-large, 12px);
    padding: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
  }

  .crm-details-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }

  .crm-details-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--colorNeutralForeground1);
  }

  .crm-details-divider {
    height: 1px;
    background: linear-gradient(to right, transparent 0%, var(--color-neutral-grey-20) 50%, transparent 100%);
    opacity: 0.5;
    margin: 12px 0;
  }

  .crm-details-fields {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .crm-details-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }

  .crm-details-icon-wrap {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(98, 100, 167, 0.08);
  }

  .crm-details-svg {
    width: 16px;
    height: 16px;
    color: var(--color-brand-primary);
  }

  .crm-details-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .crm-details-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--colorNeutralForeground4);
  }

  .crm-details-value {
    font-size: 13px;
    color: var(--colorNeutralForeground1);
    word-break: break-word;
  }

  .crm-details-cta {
    margin-top: 12px;
  }

  .crm-details-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-white);
    background: linear-gradient(135deg, var(--color-brand-vibrant) 0%, var(--color-brand-primary) 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--color-brand-glow);
    transition:
      box-shadow 0.2s,
      transform 0.2s;
  }

  .crm-details-btn:hover {
    box-shadow: 0 6px 20px var(--color-brand-glow);
    transform: translateY(-1px);
  }

  /* CRM Details Accordion - glass style */
  .crm-details-accordion {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-medium, 8px);
    overflow: hidden;
    margin-top: 12px;
  }

  .crm-details-accordion .accordion-title {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }

  .crm-details-accordion .accordion-title:hover {
    background: rgba(0, 0, 0, 0.02);
  }

  .crm-details-accordion .accordion-content {
    background: transparent;
  }

  /* CRM Details Timeline - glass style */
  .glyde-crm-details .timeline {
    position: relative;
    padding-left: 20px;
    margin-top: 4px;
  }

  .glyde-crm-details .timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 4px;
    bottom: 4px;
    width: 2px;
    background: linear-gradient(to bottom, var(--color-brand-primary), rgba(98, 100, 167, 0.2));
  }

  .glyde-crm-details .timeline-dot {
    background-color: var(--color-brand-primary);
    border: 2px solid white;
    box-shadow: 0 0 0 1px rgba(98, 100, 167, 0.3);
  }

  .glyde-crm-details .timeline-card {
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-medium, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  /* Loading/error glass panels */
  .crm-details-loading,
  .crm-details-error {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-large, 12px);
    padding: 24px;
    text-align: center;
    color: var(--colorNeutralForeground3);
  }

  .crm-details-error {
    color: var(--color-danger);
  }

  /* No-ATS placeholder */
  .crm-details-no-ats {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--border-radius-large, 12px);
    padding: 24px;
    text-align: center;
    color: var(--colorNeutralForeground4);
    font-style: italic;
  }

  /* -------------------------------------------------------------------------- */
  /* 11. Utilities & Mobile                                                     */
  /* -------------------------------------------------------------------------- */
  /*
 * `.glyde-hidden` (not `.hidden`) — the bare `.hidden` class collides with
 * Tailwind's `.hidden` utility on sites like glydeunity.com and (because of
 * `!important`) breaks responsive variants like `lg:flex`.
 */
  .glyde-hidden {
    display: none !important;
  }

  /* Mobile Navigation Icons (Only visible on small screens handled by media queries if needed) */
  .mobile-nav-icon {
    display: none !important; /* Default hidden - use !important to override fluent-icon-btn */
    background: none;
    border: none;
    font-size: 16px;
    color: var(--color-text-tertiary);
    cursor: pointer;
    padding: 6px;
  }

  /* Ensure mobile nav icons are hidden on desktop even when they have fluent-icon-btn class */
  .mobile-nav-icon.fluent-icon-btn {
    display: none !important; /* Override fluent-icon-btn's display: flex on desktop */
  }

  /* Utility to ensure resizers work */
  .glyde-resizer[data-resizer='left'],
  .glyde-resizer[data-resizer='right'] {
    width: 4px;
    cursor: col-resize;
    background-color: transparent;
    transition: background-color 0.2s;
  }
  .glyde-resizer:hover {
    background-color: var(--color-brand-light);
  }

  /* Conversation List Tabs - Liquid glass pill container */
  .glyde-conversation-tabs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 0;
    flex: 1;
    min-width: 0;
    padding: 6px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .glyde-conversation-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    color: var(--colorNeutralForeground2);
    transition: all var(--duration-normal) var(--ease-fluent);
  }

  /* Unread badge. Collapsed to zero width when empty so an unbadged tab strip
     measures exactly as it did before this feature. */
  .glyde-tab-unread-badge:empty {
    display: none;
  }

  .glyde-tab-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9999px;
    background: var(--color-brand-primary);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
  }

  .glyde-conversation-tab.active .glyde-tab-unread-badge {
    background: var(--color-white);
    color: var(--color-brand-primary);
  }
  .glyde-conversation-tab:hover {
    background: rgba(255, 255, 255, 0.4);
    color: var(--colorNeutralForeground1);
  }
  .glyde-conversation-tab.active {
    background: rgba(98, 100, 167, 0.85);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 15px var(--color-brand-glow);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  /* ==========================================================================
   Mobile Layout & Responsiveness (Restored & Enhanced)
   ========================================================================== */

  /* Mobile Layout States */
  .mobile-layout {
    --pane-left: 0%;
    --pane-center: 100%;
    --pane-right: 0%;
  }

  .mobile-layout .glyde-left-pane {
    position: fixed;
    top: 0;
    left: 0;
    width: 85%;
    max-width: 300px;
    height: 100vh;
    z-index: 1000;
    background: var(--color-surface-secondary);
    border-right: 1px solid var(--color-neutral-grey-16);
    box-shadow: var(--shadow-16);
    flex: none; /* Override flex properties */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); /* Fluent 2 ease */
  }

  .mobile-layout .glyde-left-pane.open {
    transform: translateX(0);
  }

  .mobile-layout .glyde-right-pane {
    position: fixed;
    top: 0;
    right: 0;
    width: 85%;
    max-width: 320px;
    height: 100vh;
    z-index: 1000;
    background: var(--color-surface-secondary);
    border-left: 1px solid var(--color-neutral-grey-16);
    box-shadow: var(--shadow-16);
    flex: none; /* Override flex properties */
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  }

  .mobile-layout .glyde-right-pane.open {
    transform: translateX(0);
  }

  /* Ensure center pane takes full width in mobile layout */
  .mobile-layout .glyde-center-pane {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* When .mobile-layout is applied via JS (e.g. Chrome extension), show mobile nav
   icons and hide the outer draggable header regardless of viewport width. */
  .mobile-layout .mobile-nav-icon,
  .mobile-layout .mobile-nav-icon.fluent-icon-btn {
    display: flex !important;
  }
  .mobile-layout > .glyde-modal-header {
    display: none !important;
  }

  /* Hide desktop resizers inside mobile-layout */
  .mobile-layout .glyde-resizer {
    display: none !important;
  }

  /* Edge-drag affordance: show move cursor on the 10px border zone */
  .mobile-layout.glyde-modal {
    cursor: default;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }

  /* Chrome extension side-panel shell: docked list + details; chat in browser side panel */
  #glyde-chat-modal.side-panel-shell {
    top: 0;
    right: 0;
    left: auto;
    width: min(450px, 40vw);
    min-width: 360px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 12px 0 0 12px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
    z-index: 2147483646;
    overflow: hidden;
  }

  #glyde-chat-modal.side-panel-shell.side-panel-shell--has-selection {
    width: min(900px, 60vw);
    min-width: 600px;
  }

  #glyde-chat-modal.side-panel-shell > .glyde-modal-header {
    display: none !important;
  }

  #glyde-chat-modal.side-panel-shell .glyde-left-pane {
    position: relative;
  }

  #glyde-chat-modal.side-panel-shell .side-panel-list-header-host {
    margin: 0;
    padding: 14px 16px 10px;
    background: #ffffff;
    border-radius: 12px 0 0 0;
    box-shadow: none;
    border-bottom: 1px solid var(--color-neutral-grey-16, rgba(0, 0, 0, 0.08));
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .side-panel-list-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }

  .side-panel-list-header__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
  }

  .sidepanel-list-collapse-btn,
  .sidepanel-list-expand-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-neutral-grey-16, rgba(0, 0, 0, 0.12));
    border-radius: 6px;
    background: var(--colorNeutralBackground1, #fff);
    color: var(--colorNeutralForeground2, #616161);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
  }

  .sidepanel-list-collapse-btn:hover,
  .sidepanel-list-expand-btn:hover {
    background: var(--colorNeutralBackground2, #f5f5f5);
    color: var(--colorNeutralForeground1, #242424);
  }

  .sidepanel-list-expand-btn {
    position: absolute;
    top: 12px;
    right: 8px;
    left: auto;
    z-index: 12;
  }

  #glyde-chat-modal.side-panel-shell.side-panel-shell--list-collapsed .glyde-left-pane {
    display: none !important;
  }

  #glyde-chat-modal.side-panel-shell.side-panel-shell--list-collapsed:not(.side-panel-shell--has-selection) {
    width: 44px;
    min-width: 44px;
  }

  #glyde-chat-modal.side-panel-shell.side-panel-shell--list-collapsed.side-panel-shell--has-selection {
    width: min(450px, 40vw);
    min-width: 360px;
  }

  .side-panel-list-header__tabs {
    width: 100%;
  }

  /* GLYDE Unity animated wordmark (mirrors Teams loading screen) */
  .loading-wordmark {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
  }

  .loading-wordmark--compact,
  .unity-wordmark--compact {
    /* compact variant inherits base sizing below */
  }

  .loading-wordmark-glyde {
    font-size: 2.5rem;
    font-weight: 800;
    color: #1e1e2e;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .loading-wordmark-glyde--compact {
    font-size: 1.35rem;
  }

  .unity-wordmark {
    font-size: 2.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    background: linear-gradient(
        90deg,
        #4c1d95 0%,
        #0284c7 14%,
        #8b5cf6 28%,
        #ec4899 42%,
        #db2777 56%,
        #ec4899 76%,
        #8b5cf6 84%,
        #0284c7 92%,
        #4c1d95 100%
      )
      0 0 / 300% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: unity-gradient-cycle 4s linear infinite;
  }

  .unity-wordmark--compact {
    font-size: 1.35rem;
  }

  @keyframes unity-gradient-cycle {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 300% 50%;
    }
  }

  /* Quick links anchored to conversation-list panel (side-panel shell) */
  .glyde-links-launcher--in-list-panel {
    position: absolute;
    left: 16px;
    bottom: 88px;
    z-index: 12;
  }

  .glyde-links-launcher--in-list-panel .glyde-links-launcher__menu {
    bottom: calc(100% + 12px);
    top: auto;
  }

  #glyde-candidate-list .glyde-conversation-search {
    padding-bottom: 72px;
  }

  #glyde-chat-modal.side-panel-shell .glyde-modal-body {
    position: relative;
    flex-direction: row;
    height: calc(100% - 40px);
  }

  #glyde-chat-modal.side-panel-shell .glyde-center-pane {
    display: none !important;
  }

  #glyde-chat-modal.side-panel-shell .glyde-left-pane,
  #glyde-chat-modal.side-panel-shell .glyde-right-pane {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-width: none;
    height: 100%;
    transform: none !important;
    flex: 1 1 50%;
    min-width: 0;
    box-shadow: none;
    border: none;
  }

  #glyde-chat-modal.side-panel-shell .glyde-left-pane {
    border-right: 1px solid var(--color-neutral-grey-16, rgba(0, 0, 0, 0.08));
  }

  #glyde-chat-modal.side-panel-shell .glyde-right-pane {
    display: none;
  }

  #glyde-chat-modal.side-panel-shell.side-panel-shell--has-selection .glyde-right-pane {
    display: flex;
  }

  #glyde-chat-modal.side-panel-shell .drawer-overlay,
  #glyde-chat-modal.side-panel-shell .mobile-nav-icon {
    display: none !important;
  }

  #glyde-chat-modal.side-panel-shell .glyde-resizer {
    display: none !important;
  }

  /* Mobile Close Button Style */
  .mobile-close-left {
    position: absolute;
    top: 6px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    border: none;
    font-size: 18px;
    color: var(--color-text-secondary);
    cursor: pointer;
    z-index: 1001;
    border-radius: 4px;
  }

  .mobile-close-left:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  /* Drawer Overlay */
  .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
  }

  .drawer-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /*
 * Chat modal “compact” layout: viewport @media only.
 * Container queries on #glyde-chat-modal matched before intrinsic width settled (0–900px), forcing mobile until a resize. 1000px aligns with observed behavior across web + Teams.
 */
  @media (max-width: 1000px) {
    /* Mobile layout activation */
    .glyde-modal-body {
      position: relative;
      overflow: hidden;
    }

    /* Show mobile navigation icons */
    .mobile-nav-icon {
      display: flex !important; /* Use flex to match fluent-icon-btn styling */
      touch-action: manipulation;
      user-select: none;
    }

    /* Show mobile nav icons with fluent-icon-btn class on mobile */
    .mobile-nav-icon.fluent-icon-btn {
      display: flex !important; /* Ensure visible on mobile */
    }

    /* Hide desktop resizers */
    .glyde-resizer {
      display: none !important;
    }

    /* Adjust header padding to accommodate burger icon before header-left */
    #glyde-chat-header .header-left {
      padding-left: 32px;
    }

    /* Force center pane to take full width */
    .glyde-center-pane {
      flex: 1 1 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      max-width: none !important;
    }

    /* Override any flex basis on mobile */
    .mobile-layout .glyde-modal-body {
      flex-direction: row;
    }

    /* Mobile drawer background */
    .mobile-layout .glyde-left-pane,
    .mobile-layout .glyde-right-pane {
      background-color: var(--color-white) !important;
    }

    /* Reduce margins for notes on mobile */
    .glyde-message.note,
    .glyde-message.internal,
    .email-message {
      margin: 8px 0 !important;
    }
  }

  @media (max-width: 720px) {
    .glyde-message-bubble {
      max-width: 90%;
      font-size: 13px;
    }

    /* Smaller mobile adjustments */
    .mobile-layout .glyde-left-pane {
      width: 90%;
      max-width: 280px;
    }

    .mobile-layout .glyde-right-pane {
      width: 90%;
      max-width: 280px;
    }
  }

  /* -------------------------------------------------------------------------- */
  /* 12. Component: SMS Features                                                */
  /* -------------------------------------------------------------------------- */
  /* SMS Delay Modal - Improved Design */
  .sms-delay-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--color-surface-primary);
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-28);
    z-index: 20000;
    width: 360px;
    max-width: 90vw;
    animation: modalSlideIn 0.2s ease-out;
  }

  @keyframes modalSlideIn {
    from {
      opacity: 0;
      transform: translate(-50%, -60%);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }

  .sms-delay-content {
    padding: var(--spacing-xxl);
    text-align: center;
  }

  .sms-delay-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-m);
    margin-bottom: var(--spacing-l);
  }

  .sms-delay-header svg {
    color: var(--brandBackground);
    width: 24px;
    height: 24px;
  }

  .sms-delay-header h3 {
    margin: 0;
    font-size: var(--font-size-400);
    font-weight: 600;
    color: var(--color-text-primary);
  }

  .sms-delay-message {
    margin: 0 0 var(--spacing-xl) 0;
    font-size: var(--font-size-200);
    color: var(--color-text-secondary);
    line-height: 1.5;
  }

  #sms-timer-countdown {
    font-weight: 600;
    color: var(--brandBackground);
    font-size: var(--font-size-300);
  }

  .sms-delay-progress-container {
    margin: var(--spacing-xl) 0;
  }

  .sms-delay-progress-bar {
    width: 100%;
    height: 6px;
    background-color: var(--color-neutral-grey-12);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
  }

  .sms-delay-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--brandBackground) 0%, var(--color-brand-vibrant) 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
    width: 0%;
  }

  .sms-delay-actions {
    margin-top: var(--spacing-xxl);
    display: flex;
    justify-content: center;
    gap: var(--spacing-m);
  }

  .sms-delay-cancel-btn {
    padding: 10px 24px;
    border: 1px solid var(--neutralStroke2);
    background-color: var(--color-surface-primary);
    color: var(--color-text-primary);
    border-radius: 6px;
    cursor: pointer;
    font-size: var(--font-size-200);
    font-weight: 500;
    transition: all 0.2s ease;
  }

  .sms-delay-cancel-btn:hover {
    background-color: var(--color-neutral-grey-8);
    border-color: var(--color-neutral-grey-24);
  }

  .sms-delay-cancel-btn:active {
    background-color: var(--color-neutral-grey-12);
  }

  /* SMS Message Styling - iMessage/WhatsApp-like appearance.
   Bubble base; meta-row, channel badge and delivery indicators are styled in
   the unified compose/history section above (Section 8d). */
  .glyde-message.sms-message {
    margin-bottom: var(--spacing-m);
  }

  .glyde-message.sms-message .glyde-message-bubble.sms-bubble {
    background-color: var(--brandBackground);
    color: white;
    border-radius: 18px 18px 4px 18px; /* Tail points toward the recruiter avatar on the right */
    padding: 10px 14px;
    width: fit-content;
    max-width: 75%;
    min-width: 60px;
    box-shadow: var(--shadow-2);
    position: relative;
  }

  .sms-message-content {
    margin-bottom: 4px;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
  }

  /* Ensure SMS messages appear on the right (outgoing) */
  .glyde-message.sms-message.assistant {
    justify-content: flex-end;
    /* No row-reverse needed - HTML order is already correct: message-content first, avatar second */
  }

  .glyde-message.sms-message .message-content.assistant {
    align-items: flex-end;
  }

  /* ==========================================================================
   13. Welcome Screen Styles (Center & Right Panels)
   Modern design system styles for welcome screens
   ========================================================================== */
}
/* === pause GLYDE scope: :root design tokens must live on the document root === */
/* Welcome Screen CSS Variables */
:root {
  --welcome-hero-bg-color: #0057b7; /* GLYDE Unity blue base */
  --welcome-hero-gradient: linear-gradient(125deg, #4c1d95, #8b5cf6 25%, #ec4899 50%, #db2777 75%, #4c1d95 100%);
  --welcome-card-background: #ffffff;
  --welcome-card-border: 1px solid rgba(16, 24, 40, 0.08);
}
/* === resume GLYDE scope === */
@scope (.glyde-app, .glyde-scope, [id^='glyde-']) {
  /* Welcome Hero (Center Panel) */
  .welcome-hero {
    display: grid;
    gap: 24px;
    /* LAVA LAMP EFFECT SETTINGS */
    background: var(--welcome-hero-gradient);
    background-size: 400% 400%; /* Make background huge so we only see a part of it */
    animation: welcomeLavaLamp 15s ease infinite; /* Animate the position */
    color: #f8fafc;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 30px 45px rgba(15, 23, 42, 0.35);
    margin-bottom: 32px;
  }

  /* Welcome-specific lava lamp animation (separate from main app animation) */
  @keyframes welcomeLavaLamp {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .welcome-hero .hero-splash {
    max-width: 680px;
  }

  .welcome-hero .hero-tag {
    font-size: 13px;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    opacity: 0.8;
    margin-bottom: 8px;
  }

  .welcome-hero .hero-splash h1 {
    font-size: 36px;
    margin: 0 0 12px;
  }

  .welcome-hero .hero-splash p {
    font-size: 16px;
    line-height: 1.6;
    max-width: 560px;
    margin-bottom: 20px;
  }

  .welcome-hero .hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .welcome-hero .hero-actions button,
  .welcome-hero .hero-actions a {
    border: none;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .welcome-hero .primary-action {
    background: #fff;
    color: #0f172a;
  }

  .welcome-hero .secondary-action {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    color: #fff;
  }

  .welcome-hero .hero-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }

  .welcome-hero .highlight-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px); /* Glass effect */
    border-radius: 16px;
    padding: 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .welcome-hero .highlight-card h3 {
    margin: 0 0 8px;
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .welcome-hero .highlight-card p {
    margin: 0;
    line-height: 1.5;
    font-size: 13px;
  }

  /**
 * Power Platform connector installer (inside `.welcome-hero`): the hero sets
 * light foreground text for the gradient; this card uses a white surface and
 * must reset typography and actions so labels, help text, and buttons stay readable.
 */
  .welcome-hero .pp-hero-installer-panel {
    margin-top: 16px;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-headline {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-muted {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: #475569;
    font-weight: 400;
  }

  .welcome-hero .pp-hero-installer-panel label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-checkbox-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-checkbox-row label {
    font-weight: 500;
    color: #334155;
  }

  .welcome-hero .pp-hero-installer-panel input[type='text'] {
    width: 80%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    font-size: 14px;
    color: #0f172a;
    background: #ffffff;
  }

  .welcome-hero .pp-hero-installer-panel input[type='text']:focus {
    outline: 2px solid rgba(98, 100, 167, 0.35);
    outline-offset: 2px;
    border-color: #6264a7;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-actions,
  .welcome-hero .pp-hero-installer-panel .pp-installer-consent-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-reauth-actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 4px;
    padding: 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn {
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition:
      transform var(--duration-fast) var(--ease-fluent),
      box-shadow var(--duration-fast) var(--ease-fluent),
      background var(--duration-fast) var(--ease-fluent);
    border: none;
    line-height: 1.2;
    font-family: var(--font-family);
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn--primary {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 45%, #6366f1 100%);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(76, 29, 149, 0.28);
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn--primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(76, 29, 149, 0.35);
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn--secondary {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn--secondary:hover:not(:disabled) {
    background: #f8fafc;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn--ghost {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid #e2e8f0;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-btn--ghost:hover:not(:disabled) {
    background: #e2e8f0;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-status {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-status--progress {
    color: #4338ca;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-status--success {
    color: #047857;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-status--warning {
    color: #b45309;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-status--error {
    color: #b91c1c;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-details {
    margin-top: 4px;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-details summary {
    cursor: pointer;
    user-select: none;
    color: #1d4ed8;
    font-weight: 600;
    font-size: 14px;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-details summary:hover {
    text-decoration: underline;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-details pre {
    margin-top: 10px;
    background: #0f172a;
    color: #dbeafe;
    border-radius: 10px;
    padding: 14px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 320px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.45;
  }

  .welcome-hero .pp-hero-installer-panel .pp-installer-status-root {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* Flow-pack picker band: full-width row inside the hero grid, below the
     splash + highlights, so the installer gets the hero's horizontal space. */
  .welcome-hero .hero-flowpack-band {
    scroll-margin-top: 24px;
  }

  .welcome-hero .hero-flowpack-band .pp-hero-installer-panel {
    margin-top: 0;
  }

  /* Flow-pack picker panel (flowPackPickerPanel.js) — shares the installer
     panel shell; these are its pack cards, env-var form, step list, and help. */
  .welcome-hero .pp-hero-installer-panel .fp-pack-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 12px;
    margin: 14px 0 4px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-card {
    display: block;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-card:hover {
    border-color: #c7d2fe;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-name {
    font-weight: 600;
    color: #0f172a;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-version {
    font-size: 12px;
    color: #64748b;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-tag {
    font-size: 11px;
    color: #4338ca;
    background: #eef2ff;
    border-radius: 999px;
    padding: 2px 10px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-flows-head {
    margin: 10px 0 4px 24px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-flows {
    list-style: none;
    margin: 0 0 4px 24px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-flow-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 3px 6px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
  }

  .welcome-hero .pp-hero-installer-panel .fp-flow-row:hover {
    background: #eef2ff;
  }

  .welcome-hero .pp-hero-installer-panel .fp-flow-row input[type='checkbox'] {
    accent-color: #4f46e5;
  }

  .welcome-hero .pp-hero-installer-panel .fp-flow-row input[type='checkbox']:disabled + .fp-flow-name {
    color: #cbd5e1;
  }

  .welcome-hero .pp-hero-installer-panel .fp-flow-name {
    white-space: nowrap;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-desc {
    margin: 6px 0 0 24px;
    color: #475569;
    font-size: 13px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-flows .fp-flow-desc {
    display: block;
    color: #64748b;
    font-size: 12px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-pack-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-left: 24px;
    font-size: 12px;
    color: #94a3b8;
  }

  .welcome-hero .pp-hero-installer-panel .fp-envvar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-envvar-name {
    flex: 0 0 240px;
    font-size: 13px;
    color: #334155;
  }

  .welcome-hero .pp-hero-installer-panel .fp-envvar-row input {
    flex: 1;
  }

  /* Info icon on env-var rows: tooltip copy comes from the variable
     definition's description (attr(data-tip)); shows on hover, keyboard
     focus, and touch tap (:focus). */
  .welcome-hero .pp-hero-installer-panel .fp-envvar-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border: 1px solid #94a3b8;
    border-radius: 50%;
    color: #64748b;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 10px;
    font-style: italic;
    line-height: 1;
    cursor: help;
    vertical-align: 1px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-envvar-info:hover,
  .welcome-hero .pp-hero-installer-panel .fp-envvar-info:focus {
    background: #eef2ff;
    border-color: #6366f1;
    color: #4338ca;
    outline: none;
  }

  .welcome-hero .pp-hero-installer-panel .fp-envvar-info::after {
    content: attr(data-tip);
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: -8px;
    width: max-content;
    max-width: 300px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #0f172a;
    color: #f1f5f9;
    font-family: var(--font-family, inherit);
    font-style: normal;
    font-size: 12px;
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
    z-index: 30;
    pointer-events: none;
  }

  .welcome-hero .pp-hero-installer-panel .fp-envvar-info:hover::after,
  .welcome-hero .pp-hero-installer-panel .fp-envvar-info:focus::after {
    display: block;
  }

  .welcome-hero .pp-hero-installer-panel .fp-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 8px;
    margin-top: 12px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: #f8fafc;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--pending {
    opacity: 0.6;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--succeeded {
    background: #f0fdf4;
    border-color: #bbf7d0;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--running {
    background: #eff6ff;
    border-color: #93c5fd;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--failed,
  .welcome-hero .pp-hero-installer-panel .fp-step--action_required {
    background: #fef2f2;
    border-color: #fecaca;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--skipped {
    opacity: 0.7;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step-glyph {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--succeeded .fp-step-glyph {
    background: #16a34a;
    color: #ffffff;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--running .fp-step-glyph {
    border: 2px solid #bfdbfe;
    border-top-color: #2563eb;
    animation: fpStepSpin 0.8s linear infinite;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--failed .fp-step-glyph {
    background: #dc2626;
    color: #ffffff;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--action_required .fp-step-glyph {
    background: #d97706;
    color: #ffffff;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step--pending .fp-step-glyph,
  .welcome-hero .pp-hero-installer-panel .fp-step--skipped .fp-step-glyph {
    border: 2px solid #cbd5e1;
    background: #ffffff;
    color: #94a3b8;
    font-size: 10px;
  }

  @keyframes fpStepSpin {
    to {
      transform: rotate(360deg);
    }
  }

  .welcome-hero .pp-hero-installer-panel .fp-step-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step-label {
    font-weight: 600;
    color: #0f172a;
  }

  .welcome-hero .pp-hero-installer-panel .fp-step-detail {
    color: #64748b;
    font-size: 12px;
    word-break: break-word;
  }

  .welcome-hero .pp-hero-installer-panel .fp-help {
    margin-top: 12px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-help-body ul {
    margin: 10px 0 0;
    padding-left: 18px;
    color: #334155;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .welcome-hero .pp-hero-installer-panel .fp-help-body code {
    background: #eef2ff;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
  }

  /* Welcome Insights Grid */
  .welcome-insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
  }

  .welcome-insight-card {
    background: var(--welcome-card-background);
    border-radius: 18px;
    padding: 18px;
    border: var(--welcome-card-border);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
  }

  .welcome-insight-card header {
    display: flex;
    align-items: baseline;
    gap: 8px;
  }

  .welcome-insight-label {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: #0078d4;
  }

  .welcome-insight-card h2 {
    margin: 0;
    font-size: 18px;
  }

  .welcome-insight-card p {
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 10px;
  }

  /* Welcome Screen Right Panel */
  .welcome-screen-right {
    /* padding: 28px; */
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* background: linear-gradient(180deg, #eef2ff, #ffffff); */
  }

  .welcome-screen-right .right-hero {
    background: #111827;
    border-radius: 24px;
    padding: 24px;
    color: #f8fafc;
    box-shadow: 0 25px 40px rgba(15, 23, 42, 0.2);
  }

  .welcome-screen-right .right-hero-heading {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
  }

  .welcome-screen-right .hero-accent {
    width: 4px;
    height: 48px;
    background: linear-gradient(180deg, #2196f3, #0057b7);
    border-radius: 999px;
  }

  .welcome-screen-right .right-hero h3 {
    margin: 0;
    font-size: 18px;
  }

  .welcome-screen-right .right-hero p {
    margin: 6px 0 0;
    font-size: 14px;
    color: rgba(248, 250, 252, 0.75);
  }

  .welcome-screen-right .right-hero p a {
    color: #7cc0ff;
  }

  .welcome-screen-right .right-logo-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .welcome-screen-right .logo-pill {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 13px;
    color: #f8fafc;
    border: 1px solid rgba(248, 250, 252, 0.4);
  }

  .welcome-screen-right .insight-panels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }

  .welcome-screen-right .insight-panel {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    border: 1px solid rgba(0, 120, 212, 0.12);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .welcome-screen-right .insight-panel h4 {
    margin: 0;
    font-size: 16px;
  }

  .welcome-screen-right .insight-panel p {
    margin: 0;
    color: #475467;
    font-size: 13px;
    line-height: 1.5;
  }

  .welcome-screen-right .panel-action,
  .welcome-doc-main .panel-action {
    align-self: flex-start;
    border-radius: 12px;
    border: none;
    padding: 8px 18px;
    background: #0057b7;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }

  .welcome-screen-right .panel-meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #2196f3;
  }

  /* Standalone help and onboarding pages */
  /* NOTE: `body.welcome-doc-body` root styling (gradient, padding, margin, color)
 * lives in the scope-root section near the top of this file — a scope root
 * cannot be styled by these @scope rules. */
  .welcome-doc-shell {
    max-width: 1200px;
    margin: 0 auto;
  }

  .welcome-breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .welcome-breadcrumbs a,
  .welcome-breadcrumbs span {
    color: rgba(248, 250, 252, 0.86);
    text-decoration: none;
  }

  .welcome-breadcrumbs .separator {
    opacity: 0.55;
  }

  .welcome-doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 24px;
    align-items: start;
  }

  .welcome-doc-main {
    display: grid;
    gap: 16px;
  }

  .welcome-doc-main .welcome-insight-card ul,
  .welcome-doc-main .welcome-insight-card ol {
    margin: 12px 0 0 18px;
    padding: 0;
    color: #475467;
  }

  .welcome-doc-main .welcome-insight-card li {
    margin-bottom: 8px;
    line-height: 1.55;
  }

  .welcome-doc-main .welcome-insight-card strong {
    color: #0f172a;
  }

  .welcome-doc-main code {
    padding: 0.1em 0.4em;
    border-radius: 8px;
    background: rgba(15, 23, 42, 0.08);
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    font-size: 0.95em;
  }

  .welcome-hero code {
    padding: 0.1em 0.4em;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    font-size: 0.95em;
  }

  .welcome-topic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
  }

  .welcome-topic-card {
    background: var(--welcome-card-background);
    border-radius: 18px;
    padding: 18px;
    border: var(--welcome-card-border);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .welcome-topic-card h3 {
    margin: 0;
    font-size: 18px;
  }

  .welcome-topic-card p {
    margin: 0;
    color: #475467;
    font-size: 14px;
    line-height: 1.6;
  }

  .welcome-page-link-tertiary {
    align-self: flex-start;
    padding: 10px 16px;
    border-radius: 12px;
    background: #eaf2ff;
    border: 1px solid rgba(0, 87, 183, 0.14);
    color: #0057b7;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
  }

  .welcome-callout-card {
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
    border: 1px solid rgba(0, 120, 212, 0.14);
  }

  .welcome-note {
    margin-top: 12px;
    font-size: 13px;
    color: #667085;
  }

  .welcome-screen-right .panel-link-list {
    display: grid;
    gap: 10px;
  }

  .welcome-screen-right .panel-link-list a {
    color: #0057b7;
    font-weight: 600;
    text-decoration: none;
  }

  .welcome-screen-right .panel-link-list a:hover,
  .welcome-page-link-tertiary:hover,
  .welcome-breadcrumbs a:hover {
    text-decoration: underline;
  }

  /* Welcome-right demo video carousel (hero card body) */
  .welcome-screen-right .wv-carousel {
    margin-top: 4px;
  }

  .welcome-screen-right .wv-track {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .welcome-screen-right .wv-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 108px;
    aspect-ratio: 16 / 10;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    opacity: 0.72;
    scroll-snap-align: center;
    transition: opacity 0.2s ease, border-color 0.2s ease;
  }

  .welcome-screen-right .wv-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .welcome-screen-right .wv-thumb:hover,
  .welcome-screen-right .wv-thumb.is-active {
    opacity: 1;
    border-color: #2196f3;
  }

  .welcome-screen-right .wv-thumb:focus-visible {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
  }

  .welcome-screen-right .wv-thumb-duration {
    position: absolute;
    right: 4px;
    bottom: 4px;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #f8fafc;
    font-size: 10px;
    line-height: 1.4;
  }

  .welcome-screen-right .wv-thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    opacity: 0;
    transition: opacity 0.2s ease;
  }

  .welcome-screen-right .wv-thumb-play svg {
    width: 13px;
    height: 13px;
  }

  .welcome-screen-right .wv-thumb:hover .wv-thumb-play,
  .welcome-screen-right .wv-thumb.is-active .wv-thumb-play {
    opacity: 1;
  }

  /* Welcome-right "Get GLYDE Everywhere" surface tiles — 2x2 matrix reads
     better than one cramped row of four at panel width. */
  .welcome-screen-right .wv-surface-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .welcome-screen-right .wv-surface-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 8px;
    border: 1px solid rgba(0, 120, 212, 0.15);
    border-radius: 12px;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }

  .welcome-screen-right .wv-surface-tile:hover {
    border-color: #2196f3;
    background: #eff6ff;
    transform: translateY(-1px);
  }

  .welcome-screen-right .wv-surface-tile:focus-visible {
    outline: 2px solid #2196f3;
    outline-offset: 2px;
  }

  .welcome-screen-right .wv-surface-icon {
    width: 26px;
    height: 26px;
    color: #0057b7;
  }

  .welcome-screen-right .wv-surface-icon svg {
    width: 100%;
    height: 100%;
  }

  /* Official brand marks (chrome/dock/copilot) — full-bleed, no tint */
  .welcome-screen-right .wv-surface-icon .wv-surface-icon-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .welcome-screen-right .wv-surface-label {
    font-size: 12px;
    font-weight: 600;
    color: #111827;
  }

  .welcome-screen-right .wv-surface-hint {
    font-size: 10px;
    color: #64748b;
  }

  @media (max-width: 900px) {
    .welcome-screen-right .wv-thumb {
      width: 88px;
    }
  }

  @media (max-width: 900px) {
    /* body.welcome-doc-body responsive padding is declared with the relocated
     scope-root rule near the top of this file (outside @scope). */
    .welcome-doc-grid {
      grid-template-columns: 1fr;
    }
  }

  /* Settings page (aligned with help; no raw UUID / session dumps) */
  .settings-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }

  .settings-auth-slot {
    min-height: 28px;
    margin-bottom: 4px;
  }

  .settings-status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .settings-status-pill--ok {
    background: #ecfdf3;
    color: #027a48;
    border: 1px solid #a6f4c5;
  }

  .settings-status-pill--warn {
    background: #fef3f2;
    color: #b42318;
    border: 1px solid #fecdca;
  }

  .settings-status-pill--muted {
    background: rgba(15, 23, 42, 0.06);
    color: #475467;
    border: 1px solid rgba(15, 23, 42, 0.1);
  }

  .settings-account-line {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.55;
    color: #0f172a;
  }

  .settings-config-line {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 1.25em;
    color: #475467;
  }

  .settings-config-line--ok {
    color: #027a48;
  }

  .settings-config-line--warn {
    color: #b42318;
  }

  .settings-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  .settings-btn {
    border: none;
    border-radius: 999px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: inherit;
    box-sizing: border-box;
  }

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

  .settings-btn--primary {
    background: #0057b7;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 87, 183, 0.25);
  }

  .settings-btn--primary:hover:not(:disabled) {
    background: #004494;
  }

  .settings-btn--secondary {
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.14);
  }

  .settings-btn--secondary:hover {
    background: #f8fafc;
  }

  .settings-btn--ghost {
    background: transparent;
    color: #0057b7;
    border: 1px solid rgba(0, 87, 183, 0.35);
  }

  .settings-btn--ghost:hover {
    background: rgba(0, 87, 183, 0.06);
  }

  .settings-advanced-card {
    margin-bottom: 32px;
  }

  .settings-advanced {
    border: none;
    padding: 0;
  }

  .settings-advanced summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #667085;
    list-style: none;
  }

  .settings-advanced summary::-webkit-details-marker {
    display: none;
  }

  .settings-advanced-hint {
    margin: 12px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #667085;
  }

  .settings-login-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    align-items: center;
  }

  .settings-login-row input[type='email'] {
    min-width: 200px;
    flex: 1;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    font-size: 14px;
    font-family: inherit;
  }

  /* Welcome Hero Form Styles (for download page) */
  /* Page-level styles for standalone welcome hero pages */
  body > .welcome-hero {
    max-width: 1200px;
    width: 100%;
    margin: 40px auto;
    padding: 40px 20px;
  }

  @media (max-width: 720px) {
    body > .welcome-hero {
      margin: 20px auto;
      padding: 24px 16px;
    }
  }

  .welcome-hero .download-form {
    margin-top: 24px;
  }

  .welcome-hero .input-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: stretch;
  }

  .welcome-hero .input-group input[type='email'] {
    flex: 1;
    min-width: 200px;
    padding: 12px 20px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
  }

  .welcome-hero .input-group input[type='email']:focus {
    outline: none;
    background: #fff;
    box-shadow:
      0 4px 12px rgba(255, 255, 255, 0.3),
      0 0 0 3px rgba(255, 255, 255, 0.2);
  }

  .welcome-hero .input-group input[type='email']::placeholder {
    color: rgba(15, 23, 42, 0.5);
  }

  .welcome-hero .input-group button[type='submit'] {
    padding: 12px 28px;
    border: none;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: #fff;
    color: #0f172a;
    transition: all 0.2s ease;
    white-space: nowrap;
  }

  .welcome-hero .input-group button[type='submit']:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
  }

  .welcome-hero .input-group button[type='submit']:active:not(:disabled) {
    transform: translateY(0);
  }

  .welcome-hero .input-group button[type='submit']:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .welcome-hero .error-message {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(231, 60, 62, 0.15);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(231, 60, 62, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 14px;
    display: none;
  }

  .welcome-hero .error-message:not(:empty),
  .welcome-hero .error-message.show {
    display: block;
  }

  /* Welcome Screen Responsive Styles */
  @media (max-width: 720px) {
    .welcome-hero {
      padding: 24px;
    }

    .welcome-hero .hero-actions {
      flex-direction: column;
    }

    .welcome-topic-grid {
      grid-template-columns: 1fr;
    }

    .welcome-hero .input-group {
      flex-direction: column;
    }

    .welcome-hero .input-group input[type='email'],
    .welcome-hero .input-group button[type='submit'],
    .welcome-hero .hero-actions a,
    .welcome-hero .hero-actions button {
      width: 100%;
    }
  }

  @media (max-width: 640px) {
    .welcome-screen-right {
      padding: 20px;
    }
  }

  /* Quick Links Launcher */
  .glyde-links-launcher {
    position: fixed;
    left: 24px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    z-index: 21001;
  }

  .glyde-links-launcher__button {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent-pink);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 36px rgba(236, 72, 153, 0.35);
    cursor: pointer;
    transition:
      transform var(--duration-normal) var(--ease-fluent),
      box-shadow var(--duration-normal) var(--ease-fluent),
      background var(--duration-normal) var(--ease-fluent);
  }

  .glyde-links-launcher__button:hover,
  .glyde-links-launcher__button:focus-visible {
    background: #db2777;
    box-shadow: 0 20px 44px rgba(219, 39, 119, 0.4);
    transform: translateY(-2px);
    outline: none;
  }

  .glyde-links-launcher__button:active {
    transform: translateY(0);
  }

  .glyde-links-launcher__icon {
    width: 28px;
    height: 28px;
  }

  .glyde-links-launcher__menu {
    min-width: 220px;
    padding: 10px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 24px 48px rgba(15, 23, 42, 0.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: none;
  }

  .glyde-links-launcher.is-open .glyde-links-launcher__menu {
    display: grid;
    gap: 6px;
  }

  .glyde-links-launcher__menu-item {
    width: 100%;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--color-text-primary);
    text-align: left;
    padding: 12px 14px;
    font-size: var(--font-size-200);
    font-weight: 600;
    cursor: pointer;
    transition:
      background var(--duration-fast) var(--ease-fluent),
      color var(--duration-fast) var(--ease-fluent);
  }

  .glyde-links-launcher__menu-item:hover,
  .glyde-links-launcher__menu-item:focus-visible {
    background: rgba(236, 72, 153, 0.1);
    color: #9d174d;
    outline: none;
  }

  .glyde-links-launcher__menu-item--danger {
    color: #b42318;
  }

  .glyde-links-launcher__menu-item--danger:hover,
  .glyde-links-launcher__menu-item--danger:focus-visible {
    background: rgba(231, 60, 62, 0.1);
    color: #912018;
  }

  .glyde-links-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 21000;
    padding: 5vh 5vw;
  }

  .glyde-links-modal__panel {
    width: 90vw;
    height: 90vh;
    max-width: 1440px;
    background: #ffffff;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 40, 0.08);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
    display: flex;
    flex-direction: column;
  }

  .glyde-links-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(99, 102, 241, 0.08));
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
  }

  .glyde-links-modal__title {
    margin: 0;
    font-size: clamp(18px, 2vw, 26px);
    color: var(--color-text-primary);
  }

  .glyde-links-modal__close {
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 999px;
    background: var(--color-accent-pink);
    color: var(--color-white);
    font-size: 34px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 28px rgba(236, 72, 153, 0.32);
  }

  .glyde-links-modal__close:hover,
  .glyde-links-modal__close:focus-visible {
    background: #db2777;
    outline: none;
  }

  .glyde-links-modal__frame {
    width: 100%;
    height: 100%;
    border: none;
    background: #ffffff;
    flex: 1 1 auto;
  }

  /* Collapsible right-side iframe panel (quick-links `opensInRightPanel`, e.g. GLYDE Support).
   The iframe stays mounted while collapsed so an in-progress chat is preserved;
   collapsed state shrinks the panel to a slim labelled tab on the right edge. */
  .glyde-links-rightpanel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-left: 1px solid rgba(16, 24, 40, 0.12);
    box-shadow: -18px 0 48px rgba(15, 23, 42, 0.22);
    z-index: 21000;
    transition: width var(--duration-normal, 0.2s) var(--ease-fluent, ease);
  }

  .glyde-links-rightpanel__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(99, 102, 241, 0.08));
    border-bottom: 1px solid rgba(16, 24, 40, 0.08);
    flex: 0 0 auto;
  }

  .glyde-links-rightpanel__title {
    flex: 1 1 auto;
    font-size: var(--font-size-300, 15px);
    font-weight: 600;
    color: var(--color-text-primary, #1f2430);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  .glyde-links-rightpanel__newchat {
    flex: 0 0 auto;
    border: 1px solid rgba(16, 24, 40, 0.12);
    border-radius: 999px;
    background: #ffffff;
    color: var(--color-text-primary, #1f2430);
    font-size: var(--font-size-100, 12px);
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--duration-fast, 0.12s) var(--ease-fluent, ease);
  }

  .glyde-links-rightpanel__newchat:hover,
  .glyde-links-rightpanel__newchat:focus-visible {
    background: rgba(236, 72, 153, 0.12);
    outline: none;
  }

  .glyde-links-rightpanel__collapse,
  .glyde-links-rightpanel__close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 999px;
    background: rgba(236, 72, 153, 0.12);
    color: #9d174d;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast, 0.12s) var(--ease-fluent, ease);
  }

  .glyde-links-rightpanel__close {
    font-size: 22px;
  }

  .glyde-links-rightpanel__collapse:hover,
  .glyde-links-rightpanel__collapse:focus-visible,
  .glyde-links-rightpanel__close:hover,
  .glyde-links-rightpanel__close:focus-visible {
    background: rgba(236, 72, 153, 0.24);
    outline: none;
  }

  .glyde-links-rightpanel__frame {
    width: 100%;
    border: none;
    background: #ffffff;
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Collapsed-state expand tab: hidden while expanded. */
  .glyde-links-rightpanel__tab {
    display: none;
    border: none;
    background: var(--color-accent-pink, #ec4899);
    color: var(--color-white, #fff);
    font-size: var(--font-size-200, 13px);
    font-weight: 600;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    padding: 16px 6px;
    border-radius: 12px 0 0 12px;
    letter-spacing: 0.04em;
  }

  /* Collapsed: shrink to a slim rail showing only the labelled tab; the iframe
   stays mounted (visually hidden) so the embedded session is preserved. */
  .glyde-links-rightpanel.is-collapsed {
    width: 36px;
    background: transparent;
    border-left: none;
    box-shadow: none;
    justify-content: center;
  }

  .glyde-links-rightpanel.is-collapsed .glyde-links-rightpanel__header,
  .glyde-links-rightpanel.is-collapsed .glyde-links-rightpanel__frame {
    display: none;
  }

  .glyde-links-rightpanel.is-collapsed .glyde-links-rightpanel__newchat {
    display: none;
  }

  .glyde-links-rightpanel.is-collapsed .glyde-links-rightpanel__tab {
    display: block;
    align-self: flex-end;
    margin: auto 0;
    box-shadow: -8px 0 24px rgba(236, 72, 153, 0.3);
  }
}
/* === resume: welcome demo-video modal (appended to document.body, so it is
   styled OUTSIDE @scope — matches the scope-root rules at the top of file;
   some embedded webviews do not support @scope at all) === */
.wv-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wv-modal[hidden] {
  display: none;
}

body.wv-modal-open {
  overflow: hidden;
}

.wv-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}

.wv-modal-card {
  position: relative;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.35);
  padding: 20px;
}

.wv-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #111827;
  cursor: pointer;
}

.wv-modal-close:hover {
  background: rgba(15, 23, 42, 0.16);
}

.wv-modal-close svg {
  width: 16px;
  height: 16px;
}

.wv-modal-body {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 18px;
  align-items: start;
}

.wv-modal-player video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  background: #0f172a;
}

.wv-modal-badge {
  display: inline-flex;
  padding: 2px 10px;
  border: 1px solid rgba(0, 120, 212, 0.2);
  border-radius: 999px;
  background: rgba(0, 120, 212, 0.08);
  color: #0057b7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.wv-modal-copy h4 {
  margin: 0 0 8px;
  font-size: 18px;
  line-height: 1.35;
  color: #111827;
}

.wv-modal-copy p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: #475467;
}

.wv-modal-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.wv-modal-benefits li {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  color: #344054;
}

.wv-modal-benefits li::before {
  content: '\2713';
  position: absolute;
  left: 2px;
  color: #0057b7;
  font-weight: 700;
}

.wv-modal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 9px 20px;
  border: none;
  border-radius: 12px;
  background: #0057b7;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}

.wv-modal-cta:hover {
  background: #004a9e;
  text-decoration: none;
}

@media (max-width: 720px) {
  .wv-modal {
    padding: 12px;
  }

  .wv-modal-card {
    padding: 14px;
  }

  .wv-modal-body {
    grid-template-columns: 1fr;
  }
}
/* === end welcome demo-video modal === */
/* === pause GLYDE scope: host-body launcher offsets + responsive launcher === */
@media (max-width: 720px) {
  .glyde-has-links-launcher .glyde-conversation-search {
    padding-left: 88px;
  }

  /* ACS chat voice pill sits bottom-left in the input row — lift the settings launcher */
  body.glyde-has-links-launcher:has(.acs-chat-full-container) .glyde-links-launcher {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + 72px);
  }

  body.glyde-has-links-launcher:has(.acs-chat-full-container) .acs-chat-full-container .input-area {
    padding-left: calc(16px + 72px);
  }

  .glyde-links-launcher {
    left: 16px;
    bottom: 16px;
  }

  .glyde-links-launcher__button {
    width: 56px;
    height: 56px;
  }

  .glyde-links-launcher__menu {
    min-width: min(220px, calc(100vw - 32px));
  }

  .glyde-links-modal {
    padding: 16px;
  }

  .glyde-links-modal__panel {
    width: 100%;
    height: 100%;
    border-radius: 18px;
  }

  .glyde-links-modal__header {
    padding: 14px 16px;
  }

  .glyde-links-modal__close {
    width: 48px;
    height: 48px;
  }
}
/* === resume GLYDE scope === */
@scope (.glyde-app, .glyde-scope, [id^='glyde-']) {
  /* Job Add Page */
  .glyde-job-add-page {
    background: linear-gradient(180deg, #ffffff 0%, #f7f7fb 100%);
    min-height: 100vh;
  }

  .glyde-job-add-shell {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 24px 40px;
  }

  .glyde-job-add-header h1 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: clamp(24px, 2.6vw, 36px);
  }

  .glyde-job-add-header p {
    margin: 10px 0 0;
    color: var(--color-text-secondary);
  }

  .glyde-job-add-status {
    margin: 18px 0 0;
    border-radius: 10px;
    padding: 12px 14px;
    font-weight: 600;
    border: 1px solid transparent;
  }

  .glyde-job-add-status.is-info {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #3730a3;
  }

  .glyde-job-add-status.is-success {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
  }

  .glyde-job-add-status.is-error {
    background: #fef3f2;
    border-color: #fecdca;
    color: #b42318;
  }

  .glyde-job-add-form {
    margin-top: 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(16, 24, 40, 0.08);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
    padding: 20px;
  }

  .glyde-job-add-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .glyde-job-add-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .glyde-job-add-field--full {
    grid-column: 1 / -1;
  }

  .glyde-job-add-field label {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
  }

  .glyde-job-add-field input,
  .glyde-job-add-field select,
  .glyde-job-add-field textarea {
    width: 100%;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    background: #ffffff;
  }

  .glyde-job-add-field textarea {
    resize: vertical;
    min-height: 110px;
  }

  .glyde-job-add-field input:focus,
  .glyde-job-add-field select:focus,
  .glyde-job-add-field textarea:focus {
    border-color: var(--color-brand-primary);
    outline: 2px solid rgba(98, 100, 167, 0.2);
  }

  .glyde-job-add-actions {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
  }

  @media (max-width: 900px) {
    .glyde-job-add-grid {
      grid-template-columns: 1fr;
    }
  }

  /* GLYDE Buddy Welcome & Loading Styles */
  .hero-buddy-intro {
    display: flex;
    align-items: flex-start;
    gap: 20px;
  }

  .hero-buddy-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    background: transparent;
    border: none;
  }

  .welcome-buddy-panel .welcome-buddy-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .welcome-buddy-mini {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  @keyframes glydeBuddyBounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
  }

  /* ==========================================================================
   Gap Detector (conversation list date-gap affordance, Fluent 2)
   Idle: thin neutral rule with a centered "Show N older days" pill.
   Loading: skeleton shimmer rows (.gap-skeleton) matching card silhouette.
   Error: same pill in error tone with a retry icon.
   ========================================================================== */
  .gap-detector {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 6px 8px;
    padding: 4px 0;
    cursor: pointer;
  }

  .gap-detector.loading {
    cursor: default;
    display: block;
  }

  .gap-detector-rule {
    flex: 1;
    height: 1px;
    background: var(--neutralStroke2);
  }

  .gap-detector-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border: 1px solid var(--neutralStroke2);
    border-radius: 16px;
    background: var(--color-surface-primary);
    color: var(--color-brand-primary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    cursor: pointer;
    transition:
      box-shadow 0.15s ease,
      background-color 0.15s ease;
  }

  .gap-detector:hover .gap-detector-pill,
  .gap-detector-pill:hover {
    background: var(--colorNeutralBackground1Hover);
    box-shadow: var(--shadow-2);
  }

  .gap-detector-pill:focus-visible {
    outline: 2px solid var(--color-brand-primary);
    outline-offset: 1px;
  }

  .gap-detector-pill-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  .gap-detector.error .gap-detector-pill {
    color: var(--color-danger);
    border-color: var(--color-danger);
    background: var(--color-danger-light);
  }

  /* Skeleton shimmer rows — reusable list-content loading state
   (gap fills and initial list load) */
  .gap-skeleton {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 6px 4px;
  }

  .gap-skeleton-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .gap-skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .gap-skeleton-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .gap-skeleton-bar {
    height: 10px;
    border-radius: 5px;
    width: 75%;
  }

  .gap-skeleton-bar.short {
    width: 45%;
  }

  .gap-skeleton-avatar,
  .gap-skeleton-bar {
    background: linear-gradient(
      90deg,
      var(--colorNeutralBackground1Hover) 25%,
      var(--neutralStroke2) 50%,
      var(--colorNeutralBackground1Hover) 75%
    );
    background-size: 200% 100%;
    animation: gap-skeleton-shimmer 1.4s ease-in-out infinite;
  }

  @keyframes gap-skeleton-shimmer {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .gap-skeleton-avatar,
    .gap-skeleton-bar {
      animation: none;
      background: var(--colorNeutralBackground1Hover);
    }
  }

  /* ==========================================================================
   Tutorial / Welcome Message
   ========================================================================== */
  .glyde-tutorial-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 32px;
    text-align: center;
    color: var(--color-neutral-foreground-2);
  }

  .glyde-tutorial-content {
    background: var(--color-surface-primary);
    padding: 24px;
    border-radius: 8px;
    box-shadow: var(--shadow-8);
    border: 1px solid var(--neutralStroke2);
    max-width: 300px;
  }

  .glyde-tutorial-content h3 {
    margin: 0 0 12px 0;
    color: var(--color-neutral-foreground-1);
    font-size: 18px;
    font-weight: 600;
  }

  .glyde-tutorial-content p {
    margin: 0 0 16px 0;
    line-height: 1.5;
    font-size: 14px;
  }

  .tutorial-arrow {
    margin-top: 16px;
    font-size: 12px;
    color: var(--color-brand-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 500;
  }

  .tutorial-arrow::before {
    content: '↑';
    font-size: 24px;
    margin-bottom: 8px;
    animation: tutorial-bounce 1.5s infinite;
  }

  @keyframes tutorial-bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  /* -------------------------------------------------------------------------- */
  /* Validation #5336719 items #14, #19 — mobile + meeting-side-panel layout.   */
  /*                                                                            */
  /*  Goals:                                                                    */
  /*  1. The chat modal fits exactly one viewport on iOS Safari, Android        */
  /*     Chrome, and the Teams meeting side panel — no double scroll bars, no   */
  /*     composer that sits off-screen below the URL bar.                       */
  /*  2. The composer (`.glyde-chat-input`) clears the iOS home indicator and   */
  /*     the Android nav bar via `env(safe-area-inset-bottom)`.                 */
  /*  3. The composer's fixed `min-height: 160px` is relaxed on narrow          */
  /*     surfaces (≤ 380px wide — Teams meeting side panel) so the typing       */
  /*     field is always visible above the keyboard.                            */
  /*                                                                            */
  /*  These overrides only activate on small viewports; desktop / Teams web     */
  /*  remain unchanged.                                                         */
  /* -------------------------------------------------------------------------- */
  @supports (height: 100dvh) {
    #glyde-chat-modal,
    .glyde-modal.fullscreen,
    .glyde-modal.fullscreen .glyde-left-pane {
      height: 100dvh;
    }
    .glyde-modal.fullscreen {
      /* Override the `!important` on `height: 100vh !important` above. */
      height: 100dvh !important;
    }
  }

  @media (max-width: 480px) {
    /*
   * iOS / Android — composer must clear the home indicator. The 12px
   * bottom margin in `.glyde-chat-input` is replaced by the safe-area
   * inset so the typing field is visible above the on-screen keyboard.
   */
    .glyde-chat-input {
      margin: 0 12px calc(8px + env(safe-area-inset-bottom, 0px));
      min-height: 0;
    }

    .glyde-chat-input.compose-panel-glass .compose-tab-row {
      gap: 8px;
    }

    .glyde-chat-input.compose-panel-glass .compose-tab-row textarea,
    .glyde-chat-input.compose-panel-glass .compose-tab-row #acs-input,
    .glyde-chat-input.compose-panel-glass .compose-tab-row .fluent-input {
      flex: 1 1 0;
      min-width: 0;
      width: 100%;
    }

    .glyde-chat-input.compose-panel-glass .compose-tab-row .glyde-send-message-btn {
      min-width: 44px;
      padding: 8px 10px;
      min-height: 44px;
      font-size: 13px;
    }

    .glyde-chat-input.compose-panel-glass .compose-email-subject,
    .glyde-chat-input.compose-panel-glass .compose-tab-row .email-subject-input {
      width: 100%;
      box-sizing: border-box;
    }

    /*
   * Narrow surfaces never need the desktop 160px reserve — let the
   * input grow to fit content instead.
   */
    #glyde-chat-modal {
      margin: 0;
      border-radius: 0;
    }
    .glyde-modal-body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }

  @media (max-width: 380px) {
    /*
   * Teams meeting side panel — typical width ~320px. Tighten the
   * composer further so the textarea + send button still fit on one
   * row above the keyboard.
   */
    .glyde-chat-input {
      margin: 0 8px calc(6px + env(safe-area-inset-bottom, 0px));
    }

    .glyde-chat-input.compose-panel-glass .compose-tab-row {
      align-items: stretch;
    }

    .glyde-chat-input.compose-panel-glass .compose-tab-row .glyde-send-message-btn {
      min-width: 40px;
      padding: 6px 8px;
      min-height: 40px;
    }

    .glyde-chat-input.compose-panel-glass .glyde-tab-content.active[data-tab-content='email'] {
      gap: 8px;
    }

    .glyde-tab-buttons {
      padding: 8px 8px 0;
      gap: 4px;
    }
  }

  /* ==========================================================================
   AI Disclaimer footer/banner — emitted by shared/aiDisclaimer.js
   (moved from the never-linked shared/layout.css)
   ========================================================================== */
  .glyde-ai-footer {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--colorNeutralStroke2, #e1e1e1);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.75rem;
    color: var(--colorNeutralForeground2, #424242);
  }

  .glyde-ai-footer__report {
    color: inherit;
  }

  .glyde-ai-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
    border-radius: 0.375rem;
    background: var(--colorBrandBackground2, #f0f6ff);
    color: var(--colorNeutralForeground2, #242424);
    font-size: 0.8125rem;
    flex-shrink: 0; /* hold height when mounted in the ACS chat flex column */
  }

  /* ==========================================================================
   First-run "way forward" panel — emitted by shared/firstRunGate.js
   Validation #5336719 item #1: every Microsoft 365 surface must show a
   next step when the user is not yet signed in / linked / ATS-connected.
   (moved from the never-linked shared/layout.css)
   ========================================================================== */
  .glyde-firstrun-panel {
    border: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 0.75rem 0 1rem;
    background: var(--colorNeutralBackground1, #ffffff);
  }

  .glyde-firstrun-panel__headline {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
    color: var(--colorNeutralForeground1, #242424);
  }

  .glyde-firstrun-panel__body {
    margin: 0 0 0.75rem;
    color: var(--colorNeutralForeground2, #424242);
    font-size: 0.875rem;
  }

  .glyde-firstrun-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .glyde-firstrun-panel__cta {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-size: 0.875rem;
    border: 1px solid var(--colorBrandStroke1, #0078d4);
    color: var(--colorBrandForeground1, #0078d4);
    background: transparent;
  }

  .glyde-firstrun-panel__cta.primary-button {
    background: var(--colorBrandBackground, #0078d4);
    color: var(--colorNeutralForegroundOnBrand, #ffffff);
  }

  .glyde-report-form {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
  }

  .glyde-report-form label {
    display: grid;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: var(--colorNeutralForeground1, #242424);
  }

  .glyde-report-form input,
  .glyde-report-form select,
  .glyde-report-form textarea {
    width: 100%;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 0.375rem;
    font: inherit;
    box-sizing: border-box;
  }

  .glyde-report-context {
    font-size: 0.8125rem;
    color: var(--colorNeutralForeground3, #616161);
  }

  .glyde-report-status {
    font-size: 0.875rem;
    margin: 0;
  }

  .glyde-report-status--error {
    color: #b10e1c;
  }
  /* === END GLYDE scope === */
}

/* ==========================================================================
   Connector Usage page (/connector-usage, quick-links modal) + welcome card
   ========================================================================== */

.usage-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.usage-shell h1 {
  margin: 4px 0 8px;
  font-size: 26px;
}

.usage-intro {
  color: var(--glyde-text-secondary, #4b5563);
  margin: 0 0 20px;
  max-width: 720px;
}

.usage-day-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  margin-bottom: 20px;
}

.usage-day-toggle button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}

.usage-day-toggle button.is-active {
  background: #2563eb;
  color: #fff;
}

.usage-body {
  min-height: 160px;
}

.usage-loading,
.usage-empty,
.usage-lag-note {
  color: #6b7280;
  font-size: 13px;
}

.usage-lag-note {
  margin-top: 20px;
}

.usage-attribution-note {
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 8px 12px;
  margin-top: 12px;
  font-size: 13px;
}

.usage-totals {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.usage-total {
  flex: 1 1 140px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
}

.usage-total-value {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
}

.usage-total-label {
  font-size: 12px;
  color: #6b7280;
}

.usage-current-window {
  font-size: 13px;
  color: #2563eb;
  margin: 0 0 16px;
}

.usage-connectors {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.usage-connector {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px 18px;
}

.usage-connector-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.usage-connector-name {
  margin: 0;
  font-size: 15px;
  text-transform: capitalize;
}

.usage-connector-count {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.usage-connector-errors {
  font-size: 12px;
  color: #6b7280;
  margin-left: auto;
}

.usage-connector-errors.has-errors {
  color: #dc2626;
}

.usage-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 44px;
  padding: 2px;
  border-radius: 8px;
  background: #f9fafb;
}

.usage-sparkline--empty {
  background: transparent;
}

.usage-spark-bar {
  flex: 1 1 0;
  min-width: 3px;
  background: #2563eb;
  border-radius: 2px 2px 0 0;
}

.usage-spark-bar.is-empty {
  background: #e5e7eb;
}

.usage-operations {
  margin-top: 10px;
  font-size: 13px;
}

.usage-operations summary {
  cursor: pointer;
  color: #4b5563;
  font-weight: 600;
  user-select: none;
  list-style-position: inside;
}

.usage-operations-count {
  display: inline-block;
  min-width: 18px;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 9px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

.usage-operations-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #f3f4f6;
}

.usage-operation {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid #f3f4f6;
}

.usage-operation:last-child {
  border-bottom: none;
}

.usage-operation-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: #111827;
  overflow-wrap: anywhere;
}

.usage-operation-calls {
  font-size: 12px;
  color: #6b7280;
  margin-left: auto;
  white-space: nowrap;
}

.usage-operation-errors {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}

.usage-operation-errors.has-errors {
  color: #dc2626;
  font-weight: 600;
}

.usage-pending,
.usage-error {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  color: #374151;
}

.usage-error {
  border-color: #fecaca;
}

.usage-error-detail {
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 0;
}

/* ==========================================================================
   Product updates (/updates page, quick-links "What's new" entry, modal).
   Source of truth: /static/updates/updates.json (see
   src/static/shared/features/updates/README.md). The .upd-modal rules are
   appended to document.body, so they are styled OUTSIDE @scope like .wv-modal.
   ========================================================================== */

.updates-shell {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 24px 48px;
}

.updates-shell h1 {
  margin: 4px 0 8px;
  font-size: 26px;
}

.updates-intro {
  color: var(--glyde-text-secondary, #4b5563);
  margin: 0 0 20px;
  max-width: 720px;
}

.updates-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.updates-controls #updates-search {
  flex: 1 1 240px;
  max-width: 360px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  font: inherit;
  font-size: 14px;
  background: #fff;
}

.updates-type-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
}

.updates-type-toggle button {
  border: none;
  background: transparent;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  cursor: pointer;
  color: #374151;
}

.updates-type-toggle button.is-active {
  background: #2563eb;
  color: #fff;
}

.updates-body {
  min-height: 160px;
}

.updates-loading,
.upd-loading,
.upd-empty {
  color: #6b7280;
  font-size: 13px;
}

.upd-error {
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 14px;
  padding: 18px;
  color: #374151;
}

.upd-error-detail {
  color: #6b7280;
  font-size: 13px;
  margin-bottom: 0;
}

/* --- update cards (shared by the page and the modal) --- */

.upd-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 12px;
  transition: box-shadow 0.15s ease;
}

.upd-card.is-highlighted {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.upd-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 12px;
}

.upd-card-type {
  display: inline-flex;
  padding: 2px 10px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

.upd-card-type--feature {
  background: rgba(0, 120, 212, 0.08);
  color: #0057b7;
}

.upd-card-type--improvement {
  background: rgba(22, 163, 74, 0.1);
  color: #15803d;
}

.upd-card-type--fix {
  background: rgba(234, 179, 8, 0.14);
  color: #a16207;
}

.upd-card-date {
  color: #6b7280;
}

.upd-card-version {
  color: #9ca3af;
  margin-left: auto;
}

.upd-card-title {
  margin: 0 0 4px;
  font-size: 16px;
  line-height: 1.35;
  color: #111827;
}

.upd-card-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
}

.upd-card-body {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
}

.upd-card-body p {
  margin: 0 0 8px;
}

.upd-card-body ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.upd-card-body li {
  margin-bottom: 4px;
}

.upd-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.upd-card-link {
  display: inline-flex;
  padding: 6px 14px;
  border: 1px solid rgba(0, 120, 212, 0.25);
  border-radius: 999px;
  background: rgba(0, 120, 212, 0.06);
  color: #0057b7;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.upd-card-link:hover {
  background: rgba(0, 120, 212, 0.12);
}

/* --- "What's new" modal (appended to document.body, OUTSIDE @scope) --- */

.upd-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.upd-modal[hidden] {
  display: none;
}

body.upd-modal-open {
  overflow: hidden;
}

.upd-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
}

.upd-modal-card {
  position: relative;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 32px 64px rgba(15, 23, 42, 0.35);
  padding: 22px;
}

.upd-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: #111827;
  cursor: pointer;
}

.upd-modal-close:hover {
  background: rgba(15, 23, 42, 0.16);
}

.upd-modal-close svg {
  width: 16px;
  height: 16px;
}

.upd-modal-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 12px;
}

.upd-modal-title {
  margin: 0;
  font-size: 20px;
  color: #111827;
}

.upd-modal-open-page {
  font-size: 13px;
  color: #0057b7;
  font-weight: 600;
  text-decoration: none;
}

.upd-modal-open-page:hover {
  text-decoration: underline;
}

/* Cards toggle on click on both surfaces (page list + modal), in either
   state — collapsed expands, expanded collapses (links inside an expanded
   body still navigate). */
.updates-body .upd-card,
.upd-modal-body .upd-card {
  cursor: pointer;
}

/* ==========================================================================
   GLYDE tab expanded mode (unscoped tail) — when the ACS chat drawer is open
   on the GLYDE tab, the compose panel grows into the center pane and hosts
   the chat in normal flow (`compose-panel-expanded` is synced by content.js).
   Previously the drawer was absolutely positioned to grow upward out of a
   ~100px tab strip and was clipped by the compose panel's overflow:hidden.

   These rules are deliberately OUTSIDE the @scope block: inside @scope they
   lost the cascade to the base compose/drawer rules (scope proximity beats
   specificity here), which left the drawer absolute inside a collapsed,
   clipped strip — the entire chat disappeared. Unscoped + #glyde-chat-modal
   prefix wins cleanly (same pattern as .wv-modal above). The conversation
   history keeps the remaining center-pane space (flex: 1 + min-height: 0).
   ========================================================================== */
#glyde-chat-modal .glyde-chat-input.compose-panel-glass.compose-panel-expanded {
  display: flex;
  flex-direction: column;
  flex: 0 1 62%;
  min-height: 320px;
}

#glyde-chat-modal .glyde-chat-input.compose-panel-glass.compose-panel-expanded .compose-panel-tabs {
  flex: 0 0 auto;
}

#glyde-chat-modal .glyde-chat-input.compose-panel-glass.compose-panel-expanded .glyde-tab-contents {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  padding: 0 10px 10px;
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  .glyde-tab-content.active[data-tab-content='glyde'] {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  padding: 0;
  overflow: hidden; /* The drawer now lives in flow — nothing needs to escape */
  background: transparent;
  border-radius: 0;
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  #acs-chat-drawer-container {
  position: static;
  bottom: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  width: auto;
  z-index: auto;
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  .glyde-chat-history-drawer.acs-chat-drawer-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  .acs-chat-drawer:not(.glyde-hidden) {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  .acs-chat-drawer:not(.glyde-hidden)
  .acs-messages-container {
  flex: 1 1 0;
  height: auto;
  min-height: 0;
  max-height: none;
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  .acs-chat-drawer
  .input-area.acs-input-container {
  flex: 0 0 auto; /* Composer keeps its natural height; only messages flex */
}

#glyde-chat-modal
  .glyde-chat-input.compose-panel-glass.compose-panel-expanded
  .glyde-drawer-header-toggle {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 12px;
  box-shadow: none;
}