/* ===================================================
   MODEL DROPDOWN - Complete Styles
   Based on original working implementation
   =================================================== */

/* ========== CONTAINER ========== */
.model-selector-container {
    position: relative;
}

/* ========== MODEL SELECTOR BUTTON ========== */
.model-selector {
    background: transparent;
    border: 0;
    padding: 5px 10px !important;
    border-radius: 8px !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 14px;
    min-width: 80px;
    justify-content: space-between;
    transition: transform 0.2s ease;
    /* outline: 0.5px solid transparent !important; */
    border: 0.5px solid transparent !important;
}

.model-selector:hover {
    /* outline: 0.5px solid rgba(27, 145, 248, 0.4) !important; */
    border: 0.5px solid rgba(27, 145, 248, 0.4) !important;
    background-color: transparent !important;
}


.current-model {
    font-size: 14px;
    color: #111827;
}

.model-selector i {
    font-size: 12px;
    color: #6B7280;
    transition: transform 0.2s ease;
}

.model-selector.active i {
    transform: rotate(180deg);
}

/* ========== MAIN DROPDOWN ========== */
/* ========== MAIN DROPDOWN ========== */
.model-dropdown {
    position: absolute;  /* Keep as default, JS will override */
    background: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 8px 25px rgba(0, 0, 0, 0.1);
    padding: 0;
    min-width: 280px;
    max-width: 280px;
    width: 280px;
    z-index: 1001;
    display: none;
    animation: modelSlideDown 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-direction: column;
    max-height: 70vh;
    overflow: visible;
    /* Remove top, right, left, margin-top - let JS handle positioning */
}

.model-dropdown.show {
    display: flex !important;
}

/* Selector chevron: points down when closed, flips up when the menu is open
   (the menu opens upward above the input). Applies on home, chat and project
   pages since they share this partial. Matched via the selector's .active class
   or the open dropdown, so it works regardless of which the JS toggles. */
.model-selector .bi-chevron-down {
    transition: transform 0.2s ease;
}
.model-selector.active .bi-chevron-down,
.model-selector[aria-expanded="true"] .bi-chevron-down,
.model-selector-container:has(.model-dropdown.show) .bi-chevron-down {
    transform: rotate(180deg);
}

@keyframes modelSlideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== MENU WRAPPER ========== */
.mmx-menu {
    background: #FFFFFF;
    overflow: visible;
    padding: 0;
    position: relative;
    width: 280px;
    max-width: 280px;
}

.mmx-menu-logged-in {
    width: 240px !important;
    max-width: 280px !important;
    min-height: auto !important;
}

.model-dropdown.mmx-menu {
    padding: 0;
    overflow: visible;
}

/* ========== SCROLLABLE BODY ========== */
.mmx-body {
    max-height: calc(70vh - 16px);
    overflow-y: auto;
    overflow-x: visible;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 16px;
}

.mmx-body::-webkit-scrollbar {
    width: 4px !important;
}

.mmx-body::-webkit-scrollbar-track {
    background: transparent;
}

.mmx-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.01) !important;
    border-radius: 2px; /* Changed from 4px to 2px for thinner look */
    transition: background 0.2s ease;
}

/* CRITICAL: Show scrollbar when body has 'scrollbar-visible' class */
.model-dropdown.scrollbar-visible .mmx-body::-webkit-scrollbar-thumb {
    background: rgba(68, 167, 225, 0.4) !important;
}

.mmx-body.scrollbar-visible::-webkit-scrollbar-thumb {
    background: rgba(68, 167, 225, 0.4) !important;
}

.mmx-body::-webkit-scrollbar-thumb:active {
    background: rgba(68, 167, 225, 0.6) !important;
}

/* Firefox */
.mmx-body {
    scrollbar-width: thin !important; /* Firefox 'thin' is already the thinnest option */
    scrollbar-color: rgba(255, 255, 255, 0.01) transparent !important;
}

.model-dropdown.scrollbar-visible .mmx-body {
    scrollbar-color: rgba(68, 167, 225, 0.4) transparent !important;
}

.mmx-body.scrollbar-visible {
    scrollbar-color: rgba(68, 167, 225, 0.4) transparent !important;
}

/* Mobile - hide completely */
@media (max-width: 768px) {
  .mmx-body {
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }

  .mmx-body::-webkit-scrollbar {
    display: none !important;
  }
}
/* ========== AUTO CARD (TOP SECTION) ========== */
.mmx-auto-card {
    margin-bottom: 4px;
}

.mmx-auto-card .mmx-option {
    border: 0.5px solid transparent;
    border-radius: 0px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    outline-offset: 0px;
    border-bottom: 0.5px solid #e5e7eb !important;
    background: transparent !important;
    /* outline: 0.5px solid transparent; */
    border: 0.5px solid transparent;
}

.mmx-auto-card .mmx-option:hover {
    border-radius: 5px;
    border-bottom: 1px solid #e5e7eb;
    background: transparent !important;
    /* outline: 0.5px solid rgba(27, 145, 248, 0.4); */
    border: 0.5px solid rgba(27, 145, 248, 0.4);
}

/* ========== PROVIDER GROUPS ========== */
.mmx-group {
    margin: 0;
    position: relative;
}

.mmx-provider {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4px 12px;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
    position: relative;
    z-index: 1;
    transition: all 0.15s ease;
    background: transparent;
    border: 0.5px solid transparent !important;
    /* outline: 0.5px solid transparent; */
    outline-offset: 0px;
}

.mmx-provider:hover {
    background: transparent;
    /* outline: 0.5px solid rgba(27, 145, 248, 0.1); */
    border: 0.5px solid rgba(27, 145, 248, 0.1) !important;
}

.mmx-group.is-open .mmx-provider,
.mmx-group.is-hovering .mmx-provider,
.mmx-group.is-pinned .mmx-provider {
    /* outline: 0.5px solid rgba(27, 145, 248, 0.5); */
    border: 0.5px solid rgba(27, 145, 248, 0.5) !important;
}

.mmx-provider-text {
    font-size: 13px;
    font-weight: 400;
    color: #1F2937;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mmx-chev {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B7280;
    font-size: 13px;
}

.mmx-chev i {
    transition: transform 0.15s ease;
}

.mmx-group.is-open .mmx-chev i,
.mmx-group.is-pinned .mmx-chev i {
    transform: rotate(90deg);
}

/* ========== FLYOUTS (MOVED TO BODY BY JS) ========== */
.mmx-flyout {
    /* Default styles - JS will override with fixed positioning */
    min-width: 240px;
    max-width: 320px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    display: none; /* [YES] Completely hide initially */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mmx-models {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ========== MODEL OPTIONS ========== */
.mmx-option {
    position: relative;
    background: transparent;
    border-radius: 5px;
    padding: 10px 12px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 11px;
    transition: all 0.15s ease;
    cursor: pointer;
    border: 1px solid transparent;
    width: 100%;
    text-align: left;
}

.mmx-option:hover:not(.is-locked):not(.disabled) {
    background: #F9FCFF;
}

.mmx-option.active {
    background: transparent;
}

.mmx-option.active .mmx-check {
    display: flex;
}




.mmx-flyout-item {
    padding: 10px 12px;
    margin-bottom: 2px;
    /* outline: 0.5px solid transparent !important; */
    border: 0.5px solid transparent !important;
}

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

/* Legacy model-option support */
.model-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 12px;
    border-radius: 5px;
    cursor: pointer;
    background: none;
    width: 100%;
    text-align: left;
    transition: 0.15s ease;
    margin-bottom: 0;
    border: 0.5px solid transparent !important;
}

.model-option:hover:not(.disabled):not(.is-locked) {
    background: transparent !important;
    /* outline: 0.5px solid rgba(27, 145, 248, 0.4) !important; */
    border: 0.5px solid rgba(27, 145, 248, 0.4) !important;
}

.model-option.active {
    background: transparent;
}


/* ========== MODEL TEXT CONTENT ========== */
.mmx-info {
    flex: 1;
    min-width: 0;
}

.mmx-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.mmx-name {
    font-weight: 400;
    font-size: 13px;
    color: #111827;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.3;
}

.mmx-desc {
    font-size: 11px;
    color: #667085;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    margin-top: 2px;
    line-height: 1.4;
}

/* ========== TIER BADGES ========== */
.mmx-chip {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mmx-chip.tier-core {
    background: #EEF8F1;
    color: #188047;
}

.mmx-chip.tier-elite {
    background: #F6F0FF;
    color: #7A3FF1;
}

.mmx-chip.tier-eliteplus {
    background: linear-gradient(180deg, #FFF6DB, #FFF);
    color: #9A6B00;
}

.mmx-chip-smart {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    background: #EEF2FF;
    color: #3B6DF6;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ========== TIER LABELS ========== */
.mmx-tier-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    padding: 8px 12px 4px 12px;
    margin-top: 8px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 5px;
}

.mmx-tier-label:first-child {
    margin-top: 0;
}

/* ========== CHECKMARK ========== */
.mmx-right {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.mmx-check {
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
}

.mmx-option.active .mmx-check {
    display: flex;
}

.mmx-check-icon {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
}

/* ========== GUEST SECTION ========== */
.mmx-guest-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    margin-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: 5px;
}

.mmx-guest-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mmx-guest-title {
    font-weight: 400;
    font-size: 14px;
    color: #111827;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mmx-guest-desc {
    font-size: 11px;
    color: #6B7280;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 300;
    line-height: 1.4;
}

.mmx-guest-login-btn {
    background: #0B2F4E !important;
    color: #F9FCff !important;
    backdrop-filter: saturate(140%) blur(6px);
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
    position: relative;
    overflow: hidden;
    border-radius: 8px !important;
    border: 1px solid;
    font-weight: 350 !important;
    font-size: 13px;
    font-family: sans-serif !important;
    padding: 5px 20px !important;
    text-decoration: none !important;
}

.mmx-guest-login-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease;
}

.mmx-guest-login-btn:hover::after {
    opacity: 1;
}

.mmx-guest-login-btn:hover {
    background: #0B2F4E !important;
    color: #F9FCFF !important;
    text-decoration: none;
}

/* ========== LEGACY HIDDEN ========== */
.mmx-hero {
    display: none !important;
}

.mmx-sticky {
    display: none !important;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 768px) {
  .model-dropdown {
    position: fixed !important;
    bottom: 60px !important;
    top: auto !important;

    /* Simple left/right margins for centering */
    left: 5px !important;
    right: 5px !important;

    /* Let it auto-size but with constraints */
    width:  150px !important;
    max-width: 250px !important; /* Maximum width */
    min-width: 140px !important; /* Minimum width */

    /* Center it using auto margins */
    margin-left: 35px !important;
    margin-right: auto !important;
    margin-bottom: 40px !important;

    border-radius: 16px !important;
    overflow: hidden !important;
    z-index: 1001 !important;
    transform: none !important;
  }

  /* Menu matches dropdown width */
  .mmx-menu {
    width: 50% !important;
    max-width: none !important;
  }

  .mmx-menu-logged-in {
    width: 50% !important;
    max-width: none !important;
  }

  .mmx-body {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none;
  }

  .mmx-body::-webkit-scrollbar {
    display: none !important;
  }

  /* Flyouts */
  .mmx-flyout {
    min-width: 100% !important;
    max-width: none !important;
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    background: #FFFFFF;
    border: 0px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: none;
    padding: 0px;
    margin: 0 !important;
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }
}
/* ========================================
   FILE INCOMPATIBLE MODELS - GRAYED OUT
   ======================================== */
.mmx-option.is-file-incompatible {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: #f9fafb !important;
}

.mmx-option.is-file-incompatible .mmx-name,
.mmx-option.is-file-incompatible .mmx-desc {
    color: #9ca3af !important;
}

.mmx-option.is-file-incompatible:hover {
    background: #f9fafb !important;
}

/* Fix: Disable hover on all provider groups when hovering Auto */
.mmx-auto-card:hover ~ .mmx-group .mmx-provider {
  pointer-events: none !important;
  background: transparent !important;
  /* outline: 0.5px solid transparent !important; */
  border: 0.5px solid transparent !important;
}

/* Increase separation between Auto and providers */
.mmx-auto-card {
  margin-bottom: 12px; /* Increased from 8px */
  position: relative;
  z-index: 10;
  isolation: isolate; /* Create stacking context */
}

/* Ensure provider groups are below Auto */
.mmx-group {
  position: relative;
  z-index: 1;
}

/* Re-enable hover when directly hovering provider */
.mmx-group:hover .mmx-provider {
  pointer-events: auto !important;
}
.mmx-option.is-failed-model {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

.mmx-option.is-failed-model .mmx-desc {
    color: #ef4444 !important;
    font-style: italic;
}

/* ========================================
   LOCKED MODELS (quota/tier limit reached)
   ======================================== */

/* Block all interaction - both class names used in template */
.mmx-option.is-locked,
.model-option.is-locked,
.mmx-flyout-item.is-locked,
.mmx-flyout .mmx-option.is-locked,
.mmx-flyout .model-option.is-locked,
button.mmx-option.is-locked,
button.model-option.is-locked {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: transparent !important;
}

.mmx-option.is-locked:hover,
.model-option.is-locked:hover {
    background: transparent !important;
    border-color: transparent !important;
}

/* Gray out the model name */
.mmx-option.is-locked .mmx-name,
.model-option.is-locked .mmx-name {
    color: #9ca3af !important;
}

/* Muted desc text for locked models — tinted #0B2F4E */
.mmx-option.is-locked .mmx-desc,
.model-option.is-locked .mmx-desc {
    color: rgba(11, 47, 78, 0.55) !important;
}

/* Hide checkmark on locked models */
.mmx-option.is-locked .mmx-check,
.model-option.is-locked .mmx-check {
    display: none !important;
}

/* Nuclear option — flyout buttons specifically */
.mmx-flyout button.is-locked {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background: transparent !important;
    color: #9ca3af !important;
}
.mmx-locked-badge {
    font-size: 10px;
    font-weight: 500;
    color: #6B7280;
    background: #F3F4F6;
    border: 0.5px solid #E5E7EB;
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 4px;
    white-space: nowrap;
    letter-spacing: 0.2px;
}


.model-dropdown,
.mmx-flyout {
    box-shadow: none !important;
    border: 1px solid #E5E7EB !important;
}