/* Main container */
    .container {
      max-width: 960px;
      width: 100%;
      height: 90vh; /* Chat height (adjust as needed) */
      margin: 0 20px;
      background: #fff;
      border-radius: 6px;
      border: 1px solid #ddd;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
    }

    /* Chat area - with Figma-aligned background and border */
    .dsrag-chat-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      background: #F6FAFD;
      border: 1px solid #D3E4F5;
      border-radius: 8px;
      margin-top: 12px;
    }

    /* --- BEGIN AI-GENERATED CODE ---
     * Source: Claude Code
     * Model Used: Claude Opus 4.5
     * Human reviewed and approved on 2026-02-07 by US993293
     * Feature #59115: Dataset Analysis Mode Header Styles
     */
    /* Dataset Analysis Mode Header */
    .dsrag-dataset-header {
      background: linear-gradient(135deg, #E8F4FD 0%, #D4E9F7 100%); /* fallback for old browsers */
      background: linear-gradient(135deg,
          color-mix(in srgb, var(--ds-theme-primary, #247ACB) 10%, #ffffff) 0%,
          color-mix(in srgb, var(--ds-theme-primary, #247ACB) 18%, #ffffff) 100%);
      border-bottom: 1px solid #B8D4E8; /* fallback for old browsers */
      border-bottom: 1px solid color-mix(in srgb, var(--ds-theme-primary, #247ACB) 30%, #ffffff);
      padding: 12px 16px;
      border-radius: 8px 8px 0 0;
    }

    .dsrag-dataset-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }

    .dsrag-dataset-icon {
      font-size: 20px;
    }

    .dsrag-dataset-title {
      font-weight: 600;
      font-size: 16px;
      color: var(--ds-theme-primary-dark, #1a5276);
    }

    .dsrag-dataset-summary {
      font-size: 14px;
      color: #2c3e50;
      margin-bottom: 8px;
    }

    .dsrag-dataset-tokens {
      color: #7f8c8d;
      font-size: 12px;
      margin-left: 8px;
    }

    .dsrag-dataset-docs-toggle {
      font-size: 13px;
      color: #3498db;
      cursor: pointer;
      margin-bottom: 4px;
    }

    .dsrag-dataset-docs-toggle:hover {
      text-decoration: underline;
    }

    .dsrag-dataset-docs-list {
      background: #ffffff;
      border: 1px solid #d4e9f7;
      border-radius: 4px;
      padding: 8px 12px;
      margin: 8px 0;
      max-height: 150px;
      overflow-y: auto;
    }

    .dsrag-dataset-docs-list ul {
      margin: 0;
      padding: 0 0 0 16px;
      font-size: 13px;
    }

    .dsrag-dataset-docs-list li {
      margin: 4px 0;
    }

    .dsrag-dataset-docs-list a {
      color: #2980b9;
      text-decoration: none;
    }

    .dsrag-dataset-docs-list a:hover {
      text-decoration: underline;
    }

    .dsrag-dataset-end {
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px solid #d4e9f7;
    }

    .dsrag-end-session-link {
      font-size: 13px;
      color: #e74c3c;
      text-decoration: none;
    }

    .dsrag-end-session-link:hover {
      text-decoration: underline;
    }

    /* --- BEGIN AI-GENERATED CODE ---
     * Source: Claude Code
     * Model Used: Claude Opus 4.5
     * Human reviewed and approved on 2026-02-11 by US993293
     * Feature: Remove AI-indexing requirement - warning styles for extraction failures
     */
    /* Warning indicator in dataset header */
    .dsrag-extraction-warning {
      color: #f0ad4e;
      font-size: 1.2em;
      margin-left: 8px;
      cursor: help;
    }

    /* Failed extraction document items */
    .dsrag-doc-failed {
      color: #999;
    }

    .dsrag-doc-failed a {
      color: #666 !important;
    }

    .dsrag-warning-icon {
      color: #f0ad4e;
      margin-right: 4px;
    }

    .dsrag-no-text {
      font-style: italic;
      color: #999;
      font-size: 0.9em;
    }
    /* --- END AI-GENERATED CODE --- */

    /* Scrollable messages */
    .dsrag-messages {
      flex: 1;
      overflow-y: auto;
      padding: 40px 2px 2px 2px; /* Extra top padding for flyout on first message */
      background-color: #fafafa;
      min-height: 60px;
      max-height: 360px;         /* Sets fixed height */
      overflow-y: auto;      /* Enables vertical scrollbar when content exceeds height */
      overflow-x: hidden;    /* Prevents horizontal scrolling */
    }

    .dsrag-message {
      display: flex;
      margin-bottom: 5px;
      min-width: 0;
    }
    .dsrag-message:last-child {
      margin-bottom: 0;
    }

    .dsrag-bubble {
      padding: 0px 16px;
      border-radius: 16px;
      max-width: 90%;
      line-height: 1.4;
      font-size: 0.95rem;
      word-wrap: break-word;
      overflow-wrap: break-word;
      min-width: 0;
    }

/* User message styling */
    .dsrag-user-msg {
      justify-content: flex-end;
    }
    .dsrag-user-msg .dsrag-bubble {
      background-color: var(--ds-theme-primary, #247ACB);
      color: #fff;
      border-bottom-right-radius: 0;
      white-space: pre-wrap;
    }

/* Revert button on user chat messages */
    .dsrag-revert-btn {
      display: none;
      cursor: pointer;
      font-size: 14px;
      opacity: 0.6;
      margin-left: 8px;
      vertical-align: middle;
      transition: opacity 0.2s;
    }
    .dsrag-revert-btn:hover {
      opacity: 1.0;
    }
    .dsrag-user-msg:hover .dsrag-revert-btn {
      display: inline;
    }

/* Revert confirmation overlay */
    .dsrag-confirm-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 10000;
    }

    .dsrag-confirm-dialog {
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      padding: 24px;
      max-width: 400px;
      width: 90%;
      animation: dsrag-dialog-appear 0.2s ease-out;
    }

    @keyframes dsrag-dialog-appear {
      from {
        opacity: 0;
        transform: scale(0.95);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .dsrag-confirm-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin-bottom: 12px;
    }

    .dsrag-confirm-message {
      font-size: 14px;
      color: #666;
      line-height: 1.5;
      margin-bottom: 20px;
    }

    .dsrag-confirm-buttons {
      display: flex;
      justify-content: flex-end;
      gap: 12px;
    }

    /* Confirmation buttons - matches DocuShare standard .submit pattern */
    .dsrag-confirm-btn {
      display: inline-block;
      border: none;
      font-size: 15px;
      min-width: 84px;
      height: 32px;
      line-height: 28px;
      text-align: center;
      cursor: pointer;
      border-radius: 3px;
      outline: none;
      font-family: Roboto, sans-serif;
      font-weight: 300;
      text-transform: uppercase;
      padding: 0 15px;
    }

    .dsrag-confirm-btn-cancel {
      color: #2e3236;
      background: #fff;
      border: 1px solid #e3e6e9;
    }

    .dsrag-confirm-btn-cancel:hover {
      background: #FFF;
      border: 1px solid #2e3236;
    }

    .dsrag-confirm-btn-confirm {
      background: #383e42;
      color: #FFF;
    }

    .dsrag-confirm-btn-confirm:hover {
      background: #DCEEFE;
      color: #2D3135;
    }

    .dsrag-confirm-btn:focus {
      outline: 2px solid var(--ds-theme-primary, #247ACB);
      outline-offset: 2px;
    }

/* AI message styling */
    .dsrag-ai-msg {
      justify-content: flex-start;
    }
    .dsrag-ai-msg .dsrag-bubble {
      background-color: #eaeaea;
      color: #333;
      border-bottom-left-radius: 0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
      /* Bug 71312: Use CSS counter so multiple <ol> blocks (created by markdown
         parsers splitting numbered lists with sub-items) share continuous numbering */
      counter-reset: ol-counter;
    }
    .dsrag-ai-msg .dsrag-bubble ol {
      list-style: none;
      padding-left: 2em;
    }
    .dsrag-ai-msg .dsrag-bubble ol > li {
      counter-increment: ol-counter;
    }
    .dsrag-ai-msg .dsrag-bubble ol > li::before {
      content: counter(ol-counter) ". ";
      font-weight: bold;
      margin-left: -2em;
      display: inline-block;
      width: 2em;
    }
    .dsrag-ai-msg .dsrag-bubble ul {
      padding-left: 2em;
      margin: 0.25em 0;
    }

    .dsrag-ai-msg .dsrag-ai-msg-warning {
        background-color: #fff3cd; /* Light yellow background */
        justify-content: flex-start;
    }


    /* Input area - raised card style inside chat area */
    .dsrag-input-area {
      background-color: #fff;
      padding: 8px 12px;
      margin: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 8px;
      border: 1px solid #D3E4F5;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .dsrag-input-area input[type="text"] {
      flex: 1;
      padding: 10px 12px;
      font-size: 14px;
      border-radius: 6px;
      border: 1px solid #E5E5E5;
      background: #FAFAFA;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .dsrag-input-area input[type="text"]:focus {
      border-color: #007bff;
      box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.15);
      background: #fff;
    }
    .dsrag-input-area input[type="text"]::placeholder {
      color: #999;
    }

    /* Session Stats - Normalized Pages Display (compact - just number with tooltip) */
    .dsrag-session-stats {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 10px;
      background: #FAFAFA;
      border-radius: 6px;
      border: 1px solid #E5E5E5;
      font-size: 14px;
      color: #495057;
      white-space: nowrap;
      cursor: help;
    }

    .dsrag-pages-icon {
      font-size: 14px;
      opacity: 0.7;
    }

    #dsragNormalizedPages {
      font-weight: 600;
      color: #495057;
    }

    .dsrag-pages-label {
      color: #6c757d;
      /* Hidden in compact mode - label now shown via title tooltip */
    }

    /* Style the new Send image similarly to a button */
.dsrag-send-icon {
  display: inline-block; /* Ensures margin/padding is shown */
  width: 38px;
  height: 38px;
  cursor: pointer;
  margin-right: 8px; /* Add an actual value if you need space */
  border-radius: 4px;
  background-color: transparent;
  transition: background-color 0.2s ease, transform 0.2s ease; /* Smooth transitions */
}
.dsrag-send-icon:hover {
  /* Visible hover effects, even if the icon is opaque */
  background-color: #e2e6ea;
  border-radius: 4px;
  transform: scale(1.1); /* Slightly enlarges icon on hover */
}

/* --- Premium Model Dropdown Styles --- */
/* Source: Claude Code - Model: Claude Opus 4.5 */
.dsrag-premium-model-select {
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.85rem;
    margin-right: 8px;
    background: #fff;
    cursor: pointer;
    min-width: 100px;
    max-width: 150px;
    height: 38px;
    box-sizing: border-box;
    vertical-align: middle;
}

.dsrag-premium-model-select:focus {
    outline: none;
    border-color: var(--ds-theme-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* fallback for old browsers */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-theme-primary, #007bff) 25%, transparent);
}

.dsrag-premium-model-select:hover {
    border-color: #aaa;
}

/* Premium Model Dropdown for Main Search Bar - positioned absolutely within .search */
/* Dropdown is to the RIGHT of the AI search button (far right position) */
.search .dsrag-premium-model-select-main {
    position: absolute;
    right: 0;  /* Position at far right */
    top: 0;
    padding: 4px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.75rem;
    background: #fff;
    cursor: pointer;
    min-width: 70px;
    max-width: 100px;
    height: 32px;
    box-sizing: border-box;
    z-index: 5;
}

.search .dsrag-premium-model-select-main:focus {
    outline: none;
    border-color: var(--ds-theme-primary, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* fallback for old browsers */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-theme-primary, #007bff) 25%, transparent);
}

.search .dsrag-premium-model-select-main:hover {
    border-color: #888;
}

/* OLD Premium dropdown rules - COMMENTED OUT since dropdown is now in hamburger menu
   The original dropdown has style="display:none;" and class="dsrag-premium-model--hidden"
   These rules are no longer needed as the premium dropdown is always hidden */
/*
.search:has(.dsrag-premium-model-select-main:not([style*="display:none"]):not([style*="display: none"])) .dsrag-send-icon-search {
    right: 105px;
}

.search:has(.dsrag-premium-model-select-main:not([style*="display:none"]):not([style*="display: none"])) .search__input {
    width: calc(100% - 175px);
}

.search:has(.dsrag-premium-model-select-main:not([style*="display:none"]):not([style*="display: none"])) .search__submit {
    right: 140px;
}

.search:has(.dsrag-premium-model-select-main:not([style*="display:none"]):not([style*="display: none"])) .search__insideof {
    right: 174px;
}
*/
/* --- End Premium Model Dropdown Styles --- */

    .dsrag-input-area button {
      padding: 10px 16px;
      font-size: 1rem;
      border: none;
      border-radius: 4px;
      background-color: #007bff;
      color: #fff;
      cursor: pointer;
    }
    .dsrag-input-area button:hover {
      background-color: #0056b3;
    }

/* Styling for the Clear button with sweep icon */
#dsragClearBtn {
  background-color: transparent; /* Transparent initial background */
  padding: 6px; /* Smaller padding to reduce button size */
  width: 28px; /* Fixed width for a smaller button */
  height: 28px; /* Fixed height for a smaller button */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
#dsragClearBtn:hover {
  background-color: #007bff; /* Blue color on hover, matching Send button */
}
.dsrag-sweep-icon {
  width: 24px; /* Smaller icon size */
  height: 24px;
}

/* New style for radio button group */
.dsrag-radio-group {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: flex-start;
    gap: 3px; /* Space between radio buttons */
}

.dsrag-dropdown-item {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}
.dsrag-dropdown-item input[type="radio"] {
    margin-right: 3px;
}
    /* Basic styling for code blocks */
    pre, code {
      background-color: #f5f5f5;
      border-radius: 4px;
    }
    .dsrag-bubble pre {
      white-space: pre-wrap;
      word-break: break-word;
      overflow-x: auto;
      max-width: 100%;
    }
    .dsrag-bubble table {
      table-layout: fixed;
      width: 100%;
      word-break: break-word;
    }

.progress-bar {
    width: 100%;
    height: 4px;
    background-color: #e0e0e0;
    margin-top: 8px;
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background-color: #4CAF50;
    transition: width 0.3s ease;
}

/* --- BEGIN AI-GENERATED CODE ---
   Source: Claude Code
   Model Used: Claude Opus 4.5
   Human reviewed and approved on 2026-01-31 by US993293 */

/* User message container - needs relative positioning for flyout */
.dsrag-user-msg {
    position: relative;
}

/* Flyout container - appears above user bubble on hover */
.dsrag-flyout-container {
    position: absolute;
    bottom: calc(100% - 6px);
    right: 12px;
    display: none;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10;
    gap: 8px;
    align-items: center;
    animation: dsrag-flyout-appear 0.15s ease-out;
}

@keyframes dsrag-flyout-appear {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dsrag-user-msg:hover .dsrag-flyout-container {
    display: flex;
}

/* Filter button in flyout */
.dsrag-filter-btn {
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 2px;
}

.dsrag-filter-btn:hover {
    opacity: 1.0;
}

/* Warning state for filter button when prefilter was attempted but not applied */
.dsrag-filter-btn.dsrag-filter-warning {
    color: #e6a817;
    opacity: 0.9;
}

/* Revert button in flyout */
.dsrag-revert-btn {
    cursor: pointer;
    font-size: 16px;
    opacity: 0.7;
    transition: opacity 0.2s;
    padding: 2px;
}

.dsrag-revert-btn:hover {
    opacity: 1.0;
}

/* Filter popup overlay */
.dsrag-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

/* Filter popup dialog */
.dsrag-filter-dialog {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    padding: 24px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: dsrag-dialog-appear 0.2s ease-out;
}

.dsrag-filter-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dsrag-filter-content {
    font-size: 14px;
    color: #333;
    line-height: 1.3;
    margin-bottom: 20px;
    background-color: #f5f5f5;
    padding: 12px;
    border-radius: 4px;
}

/* Human-readable filter summary */
.dsrag-filter-summary {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    margin-bottom: 16px;
}

.dsrag-filter-summary ul {
    margin: 8px 0;
    padding-left: 20px;
}

.dsrag-filter-summary li {
    margin: 4px 0;
}

/* Technical details section (collapsible) */
.dsrag-filter-technical {
    margin-top: 16px;
    border-top: 1px solid #ddd;
    padding-top: 12px;
}

.dsrag-filter-technical-toggle {
    color: var(--ds-theme-primary, #247ACB);
    cursor: pointer;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dsrag-filter-technical-toggle:hover {
    text-decoration: underline;
}

.dsrag-filter-technical-content {
    display: none;
    margin-top: 12px;
    font-family: monospace;
    font-size: 12px;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 4px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}

.dsrag-filter-technical-content.expanded {
    display: block;
}

.dsrag-filter-close-btn {
    margin-top: 16px;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    background-color: var(--ds-theme-primary, #247ACB);
    color: #fff;
    border: none;
    transition: background-color 0.2s;
}

.dsrag-filter-close-btn:hover {
    background-color: var(--ds-theme-primary-dark, #1a5a9c);
}

/* Prefiltered AI response - indicates search filter was applied.
   Accent border tracks the site theme; background is a light tint derived
   from the primary. Two background-color declarations form a cascade fallback:
   the first is a plain hex that works in every browser (IE11 etc.); the
   second uses color-mix() so modern browsers (Chrome 111+, Firefox 113+,
   Safari 16.2+) compute the tint from the live theme variable. */
.dsrag-ai-msg .dsrag-prefiltered {
    background-color: #e3f2fd;
    background-color: color-mix(in srgb, var(--ds-theme-primary, #247ACB) 12%, #ffffff);
    border-left: 4px solid var(--ds-theme-primary, #247ACB);
}

/* Warning message styling for AI notices */
.dsrag-ai-msg .dsrag-warning {
    background-color: #fff3cd;
    color: #856404;
    border-left: 4px solid #ffc107;
}

/* --- END AI-GENERATED CODE --- */

/* --- BEGIN AI-GENERATED CODE --- */
/* Source: Claude Code */
/* Model Used: Claude Opus 4.5 */
/* Human reviewed and approved on 2026-02-04 by US993293 */

/* ============================================================
   AI Search Session Management UI Styles
   - Popup search bar
   - Save button visual indicator states
   - Saved sessions button
   ============================================================ */

/* Session popup search bar */
.popup__toolbar {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
}

.popup__search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0 12px;
    flex: 1;
    max-width: 400px;
}

.popup__search-input {
    width: 100%;
    padding: 8px;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
}

.popup__search .icon-search {
    color: #999;
    font-size: 14px;
}

/* Save Session Button - Visual Indicator States (Figma-aligned) */
.dsrag-save-session-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    /* Default: transparent/outline - needs to save */
    background: transparent;
    border: 1px solid #373D41;
    color: #373D41;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.dsrag-save-session-btn:hover {
    background: rgba(55, 61, 65, 0.08);
    border-color: #373D41;
}

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

/* Saved state: theme-colored fill indicates session is saved. Uses theme
   CSS variables so the button tracks the active site theme rather than
   hardcoding blue. Fallback hexes are the Blue-theme defaults. */
.dsrag-save-session-btn--saved {
    background: var(--ds-theme-primary, #247ACB);
    border-color: var(--ds-theme-primary, #247ACB);
    color: #fff;
}

.dsrag-save-session-btn--saved:hover {
    background: var(--ds-theme-primary-dark, #1a5a9c);
    border-color: var(--ds-theme-primary-dark, #1a5a9c);
}

/* Theme color CSS custom property for JavaScript access */
:root {
    --ds-theme-primary: #247ACB;
    --ds-theme-primary-dark: #1a5a9c;
}

/* Saving state (while request in progress) */
.dsrag-save-session-btn--saving {
    background: #6c757d;
    border-color: #6c757d;
    color: #fff;
    cursor: wait;
}

/* Saved Sessions link button (Figma-aligned) */
.dsrag-saved-sessions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid #373D41;
    color: #373D41;
    background: transparent;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.dsrag-saved-sessions-btn:hover {
    background: rgba(55, 61, 65, 0.08);
    border-color: #373D41;
    text-decoration: none;
    color: #373D41;
}

/* Button container with bottom border for chat area distinction */
.dsrag-session-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Button icons - consistent 20x20 size */
.dsrag-save-session-btn .icon-fave,
.dsrag-saved-sessions-btn .icon-recent,
.dsrag-clear-session-btn .icon-clear {
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
}

/* --- BEGIN AI-GENERATED CODE --- */
/* Source: Claude Code */
/* Model Used: Claude Opus 4.5 */
/* Human reviewed and approved on 2026-02-11 by US993293 */

/* Clear Session Button */
.dsrag-clear-session-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.dsrag-clear-session-btn:hover {
    background: rgba(220, 53, 69, 0.1);
    border-color: #c82333;
    color: #c82333;
}

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

/* Clear ready message shown after clearing */
.dsrag-clear-ready-msg {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* --- END AI-GENERATED CODE --- */

/* Instructions Button - matches Save Session / Saved Sessions button style */
.dsrag-instructions-container {
    display: inline-flex;
    align-items: center;
}

.dsrag-instructions-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 28px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    border: 1px solid #373D41;
    color: #373D41;
    background: transparent;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.dsrag-instructions-btn:hover {
    background: rgba(55, 61, 65, 0.08);
    border-color: #373D41;
    text-decoration: none;
    color: #373D41;
}

.dsrag-instructions-btn .icon-filepage {
    width: 20px;
    height: 20px;
    font-size: 16px;
    line-height: 20px;
}

.dsrag-instructions-active {
    display: none;
}

/* Instructions feature hint (Dataset Analysis) */
.dsrag-instructions-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 6px 12px 2px 12px;
    padding: 6px 10px;
    background-color: #f0f7ff;
    border-left: 3px solid #007bff;
    border-radius: 3px;
    font-size: 0.82em;
    color: #555;
}
.dsrag-instructions-hint-icon {
    flex-shrink: 0;
    font-size: 1em;
}
.dsrag-instructions-hint-text strong {
    font-weight: 600;
    color: #333;
}

/* Investigation Mode Badge (Feature #59115) */
.dsrag-session-separator {
    color: #ccc;
    font-size: 18px;
    margin: 0 4px;
}

.dsrag-investigation-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #0073CF; /* fallback for old browsers */
    background: var(--ds-theme-primary, #0073CF);
    color: #ffffff;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
}

.dsrag-investigation-icon {
    font-size: 14px;
}

/* --- END AI-GENERATED CODE --- */

/* --- BEGIN AI-GENERATED CODE --- */
/* Source: Claude Code */
/* Model Used: Claude Opus 4.5 */
/* Human reviewed and approved on 2026-02-05 by US993293 */

/* ============================================================
   Search Mode Toggle - Icon-Based Standard/AI Search Switcher
   - Positioned on RIGHT side of search input (replaces old buttons)
   - Two icon buttons side-by-side in a rounded container
   - Left icon: magnifying glass (Standard search)
   - Right icon: sparkle (AI search)
   - Active state: themed primary color background, white icon
   - Inactive state: transparent background, dark icon
   ============================================================ */

/* ============================================================
   SEARCH WITH TOGGLE - Use same absolute positioning as original

   Original layout (no toggle): input + submit(abs right:34px) + options(abs right:-31px)
   With toggle: input + scope(abs) + toggle(abs) + submit/AI(abs) + options(abs)

   All controls positioned from RIGHT, input uses calc(100% - Xpx)
   ============================================================ */

/* ===========================================
   DYNAMIC SPACING - Adjust based on visible controls

   Component widths:
   - Toggle: 76px
   - Scope selector: 32px
   - Premium dropdown: 100px (AI mode only)
   =========================================== */

/* STANDARD MODE + SCOPE: toggle(76px) + scope(32px) + hamburger(32px) + gap = ~152px */
/* Only apply when toggle is visible (not hidden via inline style) */
.search:has(.search__mode-toggle:not([style*="display: none"]))[data-mode="standard"]:has(.search__insideof) .search__input {
    width: calc(100% - 152px) !important;
}

.search:has(.search__mode-toggle:not([style*="display: none"]))[data-mode="standard"]:has(.search__insideof) .search__insideof {
    position: absolute !important;
    right: 120px !important; /* toggle(76px) + hamburger(32px) + gap(12px) */
    top: 0;
}

/* STANDARD MODE + NO SCOPE: toggle(76px) + hamburger(32px) + gap = ~112px */
/* Only apply when toggle is visible (not hidden via inline style) */
.search:has(.search__mode-toggle:not([style*="display: none"]))[data-mode="standard"]:not(:has(.search__insideof)) .search__input {
    width: calc(100% - 112px) !important;
}

/* AI MODE + SCOPE: scope(32px) + toggle(76px) + hamburger(32px) + gaps = ~152px */
/* Premium dropdown is now in hamburger menu, not separate */
/* Only apply when toggle is visible (not hidden via inline style) */
.search:has(.search__mode-toggle:not([style*="display: none"]))[data-mode="ai"]:has(.search__insideof) .search__input {
    width: calc(100% - 152px) !important;
}

.search:has(.search__mode-toggle:not([style*="display: none"]))[data-mode="ai"]:has(.search__insideof) .search__insideof {
    position: absolute !important;
    right: 120px !important; /* toggle(76px) + hamburger(32px) + gap(12px) */
    top: 0;
}

/* AI MODE + NO SCOPE: toggle(76px) + hamburger(32px) + gaps = ~112px */
/* Only apply when toggle is visible (not hidden via inline style) */
.search:has(.search__mode-toggle:not([style*="display: none"]))[data-mode="ai"]:not(:has(.search__insideof)) .search__input {
    width: calc(100% - 112px) !important;
}

/* STANDARD-ONLY MODE (no mode toggle, just hamburger)
   For users without AI access: submit(32px) + hamburger(32px) + gaps = ~70px */
.search:not(:has(.search__mode-toggle)):has(.search__options-menu--standard-only):has(.search__insideof) .search__input {
    width: calc(100% - 102px) !important; /* scope(32px) + submit(32px) + hamburger(32px) + gap(6px) */
}

.search:not(:has(.search__mode-toggle)):has(.search__options-menu--standard-only):has(.search__insideof) .search__insideof {
    position: absolute !important;
    right: 70px !important; /* submit(32px) + hamburger(32px) + gap(6px) */
    top: 0;
}

.search:not(:has(.search__mode-toggle)):has(.search__options-menu--standard-only):not(:has(.search__insideof)) .search__input {
    width: calc(100% - 70px) !important; /* submit(32px) + hamburger(32px) + gap(6px) */
}

/* Position submit button when standard-only hamburger exists (to left of hamburger) */
.search:not(:has(.search__mode-toggle)):has(.search__options-menu--standard-only) .search__submit {
    right: 32px !important; /* position to left of hamburger */
}

/* Toggle container base styles */
.search__mode-toggle {
    display: inline-flex;
    position: absolute !important;
    top: 0;
    right: 32px; /* Default position - prevents bounce on page load */
    height: 32px;
    background: #f5f5f5;
    border-radius: 0;
    border: 1px solid #dcdee0;
    overflow: hidden;
    z-index: 10;
}

/* STANDARD MODE: Toggle to the left of hamburger */
.search:has(.search__mode-toggle)[data-mode="standard"] .search__mode-toggle {
    right: 32px !important;
}

/* AI MODE: Toggle to the left of hamburger (premium is now inside hamburger) */
.search:has(.search__mode-toggle)[data-mode="ai"] .search__mode-toggle {
    right: 32px !important;
}

/* Individual toggle buttons */
.search__mode-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    min-width: 28px;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #53595e;
    cursor: pointer;
    transition: all 0.2s ease;
    height: 100%;
}

.search__mode-btn:hover {
    background: rgba(36, 122, 203, 0.1); /* fallback for old browsers */
    background: color-mix(in srgb, var(--ds-theme-primary, #247acb) 10%, transparent);
}

.search__mode-btn:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(36, 122, 203, 0.3); /* fallback for old browsers */
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-theme-primary, #247acb) 30%, transparent);
}

/* Active state - theme primary color */
.search__mode-btn.is-active {
    background: var(--ds-theme-primary, #247ACB);
    color: #fff;
}

.search__mode-btn.is-active:hover {
    background: var(--ds-theme-primary-dark, #1a5a9c);
}

/* Hide toggle until JS sets data-mode to prevent color bounce */
.search:not([data-mode]) .search__mode-toggle {
    opacity: 0 !important;
    pointer-events: none;
}

.search[data-mode] .search__mode-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* Icon styles within toggle buttons */
.search__mode-btn i {
    font-size: 12px;
    line-height: 1;
}

/* Standard search magnifying glass icon */
.search__mode-btn--standard .icon-search::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #53595e;
    -webkit-mask: url("../../images/icon_search_toggle.svg") no-repeat center;
    mask: url("../../images/icon_search_toggle.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Standard search icon - active state (white) */
.search__mode-btn--standard.is-active .icon-search::before {
    background-color: #fff;
}

/* AI search icon */
.search__mode-btn--ai .icon-ai-search::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 12px;
    background-color: #53595e;
    -webkit-mask: url("../../images/icon_aisearch.svg") no-repeat center;
    mask: url("../../images/icon_aisearch.svg") no-repeat center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* AI search icon - active state (white) */
.search__mode-btn--ai.is-active .icon-ai-search::before {
    background-color: #fff;
}

/* ============================================================
   HIDE OLD BUTTONS - Toggle replaces them
   ============================================================ */

/* Always hide the old standard submit button when toggle is present */
.search:has(.search__mode-toggle) .search__submit {
    display: none !important;
}

/* Always hide the old AI send button when toggle is present */
.search:has(.search__mode-toggle) .dsrag-send-icon-search {
    display: none !important;
}

/* Always hide search options icons when toggle is present (cleaner UI) */
/* Only hide search options in AI mode */
.search:has(.search__mode-toggle)[data-mode="ai"] #searchOptionsShow,
.search:has(.search__mode-toggle)[data-mode="ai"] #searchOptionsHide {
    display: none !important;
}

/* ============================================================
   Mode-based visibility
   ============================================================ */

/* When in AI mode: hide advanced link content but preserve table-cell for layout
   Using visibility:hidden instead of display:none to prevent table-cell collapse */
.search[data-mode="ai"] ~ .search__advanced__cell {
    visibility: hidden !important;
}
.search[data-mode="ai"] ~ .search__advanced__cell * {
    visibility: hidden !important;
}

/* When in standard mode: hide premium dropdown (must be after toggle rule for specificity) */
.search[data-mode="standard"] .dsrag-premium-model-select-main {
    display: none !important;
}

/* Premium dropdown is now in hamburger menu - OLD dropdown should ALWAYS be hidden */
/* The dsrag-premium-model--hidden class and inline style="display:none" keep it hidden */
/* Removed: previous rule that showed .dsrag-premium-model-select-main in AI mode */

/* Default mode - hide AI elements until JS initializes */
.search:not([data-mode]) .dsrag-premium-model-select-main {
    display: none !important;
}

/* --- END AI-GENERATED CODE --- */

/* ============================================================
   SEARCH OPTIONS HAMBURGER MENU
   Consolidates advanced search options for cleaner UI
   ============================================================ */

/* --- BEGIN AI-GENERATED CODE --- */
/* Source: GitHub Copilot */
/* Model Used: Claude Sonnet 4 */
/* Human reviewed and approved on 2026-02-10 by US993293 */

/* Hamburger Menu Container */
.search__options-menu {
    display: inline-flex;
    position: absolute !important;
    top: 0;
    right: 0;
    height: 32px;
    z-index: 11;
}

/* Standard-only hamburger (no mode toggle) - hamburger at far right */
.search__options-menu--standard-only {
    right: 0 !important;
}

/* Hamburger Button */
.search__options-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 6px;
    border: 1px solid #dcdee0;
    background: #f5f5f5;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search__options-menu-btn:hover {
    background: rgba(36, 122, 203, 0.1); /* fallback for old browsers */
    background: color-mix(in srgb, var(--ds-theme-primary, #247acb) 10%, transparent);
}

.search__options-menu-btn:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(36, 122, 203, 0.3); /* fallback for old browsers */
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ds-theme-primary, #247acb) 30%, transparent);
}

.search__options-menu-btn[aria-expanded="true"] {
    background: #247acb; /* fallback for old browsers */
    background: var(--ds-theme-primary, #247acb);
}

.search__options-menu-btn[aria-expanded="true"] .search__options-menu-icon {
    filter: brightness(0) invert(1);
}

/* Hamburger Icon */
.search__options-menu-icon {
    width: 18px;
    height: 18px;
}

/* Dropdown Popup */
.search__options-menu-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    margin-top: 4px;
    padding: 8px 0;
    background: #ffffff;
    border: 1px solid #dcdee0;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 10000; /* Higher than search__expanded windowshade (z-index: 100) */
    font-family: Roboto, sans-serif;
}

.search__options-menu-popup[aria-hidden="false"] {
    display: block;
}

/* Menu Items */
.search__options-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    margin: 0;
    border: none;
    background: transparent;
    color: #373d41;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

/* Ensure link items look the same as button items */
a.search__options-menu-item,
a.search__options-menu-item:link,
a.search__options-menu-item:visited {
    color: #373d41;
    text-decoration: none;
    font-weight: normal;
}

.search__options-menu-item:hover,
a.search__options-menu-item:hover {
    background: rgba(36, 122, 203, 0.1); /* fallback for old browsers */
    background: color-mix(in srgb, var(--ds-theme-primary, #247acb) 10%, transparent);
    color: #247acb; /* fallback for old browsers */
    color: var(--ds-theme-primary, #247acb);
    text-decoration: none;
}

.search__options-menu-item:focus,
a.search__options-menu-item:focus {
    outline: none;
    background: rgba(36, 122, 203, 0.15); /* fallback for old browsers */
    background: color-mix(in srgb, var(--ds-theme-primary, #247acb) 15%, transparent);
    text-decoration: none;
}

/* Menu Section Labels */
.search__options-menu-label {
    display: block;
    padding: 8px 16px 4px 16px;
    margin: 0;
    color: #666;
    font-family: Roboto, sans-serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Menu Select (Premium Model dropdown in popup) */
.search__options-menu-select {
    display: block;
    width: calc(100% - 32px);
    margin: 4px 16px 8px 16px;
    padding: 8px 12px;
    border: 1px solid #dcdee0;
    border-radius: 4px;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    background: #fff;
}

.search__options-menu-select:focus {
    outline: none;
    border-color: var(--ds-theme-primary, #247acb);
    box-shadow: 0 0 0 2px rgba(36, 122, 203, 0.2); /* fallback for old browsers */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ds-theme-primary, #247acb) 20%, transparent);
}

/* Mode-based visibility for hamburger menu content */
/* In STANDARD mode: show standard options, hide AI options */
.search[data-mode="standard"] .search__options-menu-standard {
    display: block;
}

.search[data-mode="standard"] .search__options-menu-ai {
    display: none;
}

/* In AI mode: hide standard options, show AI options */
.search[data-mode="ai"] .search__options-menu-standard {
    display: none;
}

.search[data-mode="ai"] .search__options-menu-ai {
    display: block;
}

/* Hide hamburger in AI mode if no AI options (no premium access) */
/* This is handled server-side by not rendering the .search__options-menu-ai section */
.search[data-mode="ai"] .search__options-menu:not(:has(.search__options-menu-ai)) {
    display: none !important;
}

/* For users without AI access, hamburger always shows standard options */
.search__options-menu--standard-only .search__options-menu-standard {
    display: block !important;
}

.search__options-menu--standard-only .search__options-menu-ai {
    display: none !important;
}

/* Standard-only input width rules are defined earlier in the file (around line 954) */

/* Hide elements that are now in hamburger menu */
.search__options--hidden {
    display: none !important;
}

.search__advanced__cell--hidden {
    display: none !important;
}

.dsrag-premium-model--hidden {
    display: none !important;
}

/* --- END AI-GENERATED CODE --- */