/* ========================================
   ROOT VARIABLES
   ======================================== */
:root {
    --accent-blue: #44A7E1;
    --main-bg: #ffffff;
    --shadow-light: rgba(0, 0, 0, 0.05);
    --shadow-medium: rgba(0, 0, 0, 0.08);
    --brand: #0B2F4E;
}

:root {
  /* ============================================
     BORDER RADIUS SYSTEM
     ============================================ */

  /* Small elements (chips, tags, badges) */
  --radius-xs: clamp(4px, 0.5vw, 6px);

  /* Buttons (all clickable buttons) */
  --radius-sm: clamp(6px, 0.8vw, 8px);

  /* Medium elements (dropdowns, small cards) */
  --radius-md: clamp(8px, 1.2vw, 12px);

  /* Large containers (modals, main containers) */
  --radius-lg: clamp(16px, 2.3vw, 22px);

  /* Extra large (hero sections) */
  --radius-xl: clamp(20px, 2.5vw, 28px);

  /* Full rounded (avatars) */
  --radius-full: 9999px;

  /* ============================================
     PADDING SYSTEM
     ============================================ */

  /* Search bar specific padding */
  --padding-top: clamp(10px, 1.5vw, 14px);
  --padding-sides: clamp(10px, 1.5vw, 14px);
  --padding-bottom: clamp(8px, 1.2vw, 11px);
}

/* Apply to search bar / chat message box */
.search-bar {
  border-radius: var(--radius-lg) !important;
  padding: var(--padding-top) var(--padding-sides) var(--padding-bottom) !important;
}

/* Apply to all buttons */
.icon-btn1, .icon-btn {
  border-radius: var(--radius-sm) !important;
}



/* ========================================
   BASE LAYOUT - Full viewport height
   ======================================== */

.home-page {
    min-height: calc(var(--vh, 1vh) * 90);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Keep the home logo+input at the SAME vertical position whether logged in or
   out. The guest "Log In" button lives in the top navbar (in normal flow) and
   added height that pushed the hero down; the logged-in navbar is empty. Overlay
   the navbar on the home page so it adds no flow height — the "Log In" floats
   top-right like the logged-in "Upgrade" pill, and the hero is centered the same
   in both states. */
body.home-page .navbar.with-sidebar {
    position: absolute;
    top: 0;
    left: 60px;
    right: 0;
    margin-left: 0;
    z-index: 20;
    background: transparent !important;
    border: none !important;
}
body.sidebar-open.home-page .navbar.with-sidebar {
    left: 235px;
}

/* ── Upgrade pill (free plan only) ─────────────────────────────────────────── */
.home-upgrade-btn {
    /* Exactly matches the guest "Log In" button (.navbar .btn-login):
       same location, design, font, size and hover. */
    position: absolute;
    top: 6px;
    left: 14px;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0.5px solid rgba(27, 145, 248, 0.4);
    border-radius: 5px;
    color: #0B2F4E !important;
    font-size: 0.875rem;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
    padding: 9px 18px;
    text-decoration: none !important;
    transition: border-color 0.2s ease, background 0.25s ease;
    z-index: 10;
}
.home-upgrade-btn:hover {
    border-color: rgba(27, 145, 248, 0.7);
    background: transparent;
}
/* Dark mode */
[data-bs-theme="dark"] .home-upgrade-btn,
.dark-mode .home-upgrade-btn {
    border-color: rgba(255,255,255,.75);
    color: rgba(255,255,255,.9) !important;
}
[data-bs-theme="dark"] .home-upgrade-btn:hover,
.dark-mode .home-upgrade-btn:hover {
    background: rgba(255,255,255,.08);
}
/* ── End upgrade pill ───────────────────────────────────────────────────────── */

/* Live Web Search + Image Mode pills — match the settings-button outline style:
   no background, accent-blue border, 5px radius, darker border on hover.
   (Both set inline styles in JS/markup, so override with !important.) */
#homeWebCrawlActiveBadge,
#homeImgModePill {
    background: transparent !important;
    border: 0.5px solid rgba(27, 145, 248, 0.4) !important;
    border-radius: 5px !important;
    transition: border-color 0.2s ease !important;
}
#homeWebCrawlActiveBadge:hover,
#homeImgModePill:hover {
    background: transparent !important;
    border-color: rgba(27, 145, 248, 0.7) !important;
}

.home-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ========================================
   BASE STYLES
   ======================================== */
* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background-color: var(--main-bg) !important;
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/* ========================================
   HERO SECTION - CENTERED LAYOUT
   ======================================== */

.hero-bleed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem 1rem;
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

/* Hero container - vertically centered */
.hero-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 3vh, 2.5rem);
}


/* Logo wrapper */
.logo-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: clamp(1rem, 2vh, 2rem);
}

.logo-icon1 {
    height: auto;
    max-width: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
    display: block;
    max-width: 200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   SEARCH BAR
   ======================================== */

.search-bar-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0 1rem;
}

.search-bar {
    position: relative;
    width: 100%;
    max-width: min(700px, 90vw);
    background: #fff;
    border: 0.5px solid #1C72F3;
}



/* Search shell */
.search-shell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.search-shell.drag {
    background: rgba(28, 114, 243, 0.05);
    border-radius: var(--radius-md);
}

/* Textarea */
.search-bar textarea.form-control {
    width: 100%;
    margin: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    min-height: clamp(48px, 8vh, 56px);
    max-height: clamp(140px, 25vh, 220px);
    line-height: 1.5;
    padding: 0.5rem 0.75rem;
    resize: none;
    overflow-y: hidden;
    scrollbar-width: thin;
    transition: height 0.12s ease-out;
    font-size: clamp(14px, 1.5vw, 16px);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.search-bar textarea.form-control::placeholder {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.search-bar textarea.form-control::-webkit-scrollbar {
    width: 6px;
}

.search-bar textarea.form-control::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0);
    border-radius: 6px;
}

.search-bar textarea.form-control.scrolling::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
}

.search-bar textarea.form-control:focus {
    outline: none;
}

/* Attachment zone */
.search-attach-zone {
    min-height: 0;
    flex-wrap: wrap;
    display: none;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.search-attach-zone:not(:empty) {
    padding: 0.1rem 0;
    display: flex !important;
}

/* File chip - ChatGPT horizontal pill */
.image-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: auto;
    gap: 8px;
    /* border: 1px solid #e5e7eb; */
    border-radius: var(--radius-md);
    padding: 4px;
    max-width: 280px;
    transition: all 0.2s ease;
}

.image-chip:hover {
    background: transparent !important;
}

/* Image thumbnail (32x32 rounded) */
.image-chip img {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    flex-shrink: 0;
    border: 0.5px solid rgba(0, 0, 0, 0.1); /* Subtle border for white images */
    box-shadow: 0 1px 3px #1B91F810; /* Very subtle shadow */
    cursor: pointer !important;
}

/* File placeholder for documents */
.file-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.file-placeholder i {
    font-size: 20px;
    color: #6b7280;
    flex-shrink: 0;
}

.file-placeholder span {
    font-size: 13px;
    color: #374151;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Remove button - ChatGPT X style */
.chip-remove {
    transform: translateY(-50%);
    position: absolute;
    right: -5px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    border: none;
    background: #0B2F4E;
    color: white;
    font-size: 15px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.chip-remove:hover {
    background: #0B2F4E;
    color: #F1F7FF;
}

/* Bottom action row */
.search-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(0.5rem, 2vw, 1rem);
    padding: 0.25rem 0;
}

.search-actions-left,
.search-actions-right {
    display: flex;
    align-items: center;
    gap: clamp(0.25rem, 1vw, 0.5rem);
}

/* Icon buttons */
.search-bar .icon-btn,
.search-bar .icon-btn1 {
    width: clamp(30px, 8vw, 30px);
    height: clamp(30px, 8vw, 30px);
    min-width: 25px;
    min-height: 25px;
    background: #0B2F4E;
    place-items: center;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.search-bar .icon-btn {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.search-bar .icon-btn i {
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: #0B2F4E;
}



.search-bar .icon-btn.listening {
    background: #E8F1FF;
    border-color: #0071E3;
}

.search-bar .icon-btn.listening i {
    color: #0071E3;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.search-bar .icon-btn1 {
    background: #0B2F4E;
}

.search-bar .icon-btn1 i {
    font-size: clamp(0.9rem, 2vw, 1rem);
    color: white;
}

.search-bar .icon-btn1:hover {
    background: #0a2742;
}



/* Model selector */
.search-model-selector {
    display: flex;
    align-items: center;
}

.search-model-selector .model-selector:hover {
    background-color: #F1F7FF;
    inset: 1px !important; /* controls padding of the pill */
    border-radius: var(--radius-sm);
}

/* ========================================
   GUEST TOAST
   ======================================== */

.guest-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10000;
    background: #111;
    color: #fff;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.guest-toast a {
    color: #fff;
    text-decoration: underline;
}

.guest-toast .close {
    background: transparent;
    border: 0;
    color: #bbb;
    font-size: 18px;
    line-height: 1;
    margin-left: 6px;
    cursor: pointer;
}

.guest-toast .close:hover {
    color: #fff;
}

/* ========================================
   FOCUS & ACCESSIBILITY
   ======================================== */

/* High contrast mode */
@media (prefers-contrast: high) {
    .search-bar {
        border-width: 2px;
    }

    .search-bar .icon-btn,
    .search-bar .icon-btn1 {
        border: 2px solid currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   AUTOCOMPLETE (if needed)
   ======================================== */

.autocomplete-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    color: #333;
    padding: 0.75rem 1rem;
    transition: background 0.2s ease;
}

.autocomplete-item:hover {
    background: #f3f4f6;
}

.suggestion-name {
    font-weight: 400;
    color: #333;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

.suggestion-category {
    font-size: clamp(0.75rem, 1.2vw, 0.85rem);
    color: #6c757d;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}

.autocomplete-loading {
    padding: 16px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    font-size: clamp(0.85rem, 1.5vw, 0.95rem);
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Extra large screens (≥1400px) */
@media (min-width: 1400px) {
    .hero-container {
        max-width: 1400px;
    }

    .logo-icon1 {
        width: 200px;
    }

    .search-bar {
        max-width: 700px;
    }
}

/* Large desktops (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .logo-icon1 {
        width: clamp(160px, 18vw, 190px);
    }
}

/* Small desktops (993px - 1199px) */
@media (min-width: 993px) and (max-width: 1199px) {
    .logo-icon1 {
        width: clamp(150px, 20vw, 180px);
    }

    .search-bar {
        max-width: 650px;
    }
}

/* Tablets (769px - 992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .hero-container {
        gap: 2rem;
    }

    .logo-icon1 {
        width: clamp(140px, 22vw, 170px);
    }

    .search-bar {
        max-width: 80%;
    }
}

/* Small tablets (577px - 768px) */
@media (min-width: 577px) and (max-width: 768px) {
    .hero-container {
        gap: 1.5rem;
    }


    .logo-icon1 {
        width: clamp(130px, 25vw, 160px);
    }

    .search-bar {
        max-width: 85%;
    }

    .search-bar .icon-btn,
    .search-bar .icon-btn1 {
        width: 38px;
        height: 38px;
    }
}

/* Mobile (≤576px) */
@media (max-width: 576px) {
    .hero-bleed {
        min-height: calc(var(--vh, 1vh) * 86);
        padding: 1.5rem 1rem 4rem;
    }

    .hero-container {
        gap: 1.5rem;
    }

    .logo-icon1 {
        width: clamp(120px, 30vw, 160px);
    }

    .search-bar-wrapper {
        padding: 0 0.5rem;
    }

    .search-bar {
        max-width: 100%;
        padding: 10px;
    }

    .search-bar textarea.form-control {
        min-height: 48px;
        max-height: 120px;
        font-size: 15px;
        padding: 0.5rem;
    }

    .search-bottom-row {
        gap: 0.5rem;
    }

    .search-actions-left {
        gap: 0.25rem;
        flex: 1;
    }

    .search-actions-right {
        gap: 0.25rem;
    }

    .search-bar .icon-btn,
    .search-bar .icon-btn1 {
        width: 36px;
        height: 36px;
    }

    .search-bar .icon-btn i,
    .search-bar .icon-btn1 i {
        font-size: 0.9rem;
    }

    .search-model-selector .model-selector {
        padding: 5px 10px;
        font-size: 0.8rem;
        min-width: auto;
    }

    .search-model-selector .current-model {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .image-chip {
        width: 50px;
        height: 50px;
        max-width: 240px;
    }

    .chip-remove {
        width: 18px;
        height: 18px;
        font-size: 12px;
        right: -3px;
        top: -3px;
    }

}

/* Extra small (≤375px) */
@media (max-width: 375px) {
    .hero-bleed {
        padding: 1rem 0.75rem 3.5rem;
    }

    .hero-container {
        gap: 1rem;
    }

    .logo-icon1 {
        width: clamp(100px, 28vw, 130px);
    }

    .search-bar {
        padding: 8px;
    }

    .search-bottom-row {
        gap: 0.25rem;
    }

    .search-bar .icon-btn,
    .search-bar .icon-btn1 {
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
    }

    .search-bar .icon-btn i,
    .search-bar .icon-btn1 i {
        font-size: 0.85rem;
    }

    .search-model-selector .model-selector {
        padding: 4px 8px;
        font-size: 0.75rem;
    }

    .search-model-selector .current-model {
        max-width: 60px;
    }

}

/* Landscape mobile (max-height: 500px) */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 500px) {
    .hero-bleed {
        min-height: 100vh;
        padding: 1rem 1rem 3rem;
    }

    .hero-container {
        gap: 0.75rem;
    }

    .logo-icon1 {
        width: clamp(80px, 18vw, 110px);
    }

    .search-bar {
        max-width: 90%;
    }

    .search-bar textarea.form-control {
        min-height: 40px;
        max-height: 80px;
    }
}

/* Very small landscape */
@media (max-width: 667px) and (orientation: landscape) and (max-height: 375px) {
    .hero-bleed {
        padding: 0.5rem 1rem 2.5rem;
    }

    .logo-icon1 {
        width: clamp(70px, 15vw, 100px);
    }

    .search-bar textarea.form-control {
        min-height: 36px;
        max-height: 60px;
    }

}

/* ========================================
   SAFE AREA INSETS (Notched devices)
   ======================================== */

@supports (padding: max(0px)) {
    .hero-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .message-container {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .guest-toast {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

/* dropdown opening up */
/* ===== DESKTOP FLYOUT EDGE-SAFE POSITIONING ===== */
@media (min-width: 769px) {
  .mmx-group {
    position: relative;
  }

  .mmx-group .mmx-flyout {
    top: auto;
    bottom: 0;                 /* 🔑 anchor to menu bottom */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.gap-4 {
    gap: 10px !important;
    padding: 2px;
}

.text-dark {
    color: #0B2F4E !important;
    font-weight: 400 !important;
    font-family: sans-serif !important;
}


/* ========================================
   AI DISCLAIMER FOOTER - FIXED AT BOTTOM
   ======================================== */
.ai-disclaimer-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: #64748B;
    padding: 1.5rem 1rem;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    z-index: 100;
    padding-bottom: 0.5rem !important;
}


/* When sidebar is expanded */
body.sidebar-open .ai-disclaimer-footer {
    left: 110px; /* Sidebar expanded width */
    transition: left 0.3s ease;
}

.ai-disclaimer-footer a {
    color: #64748B;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.ai-disclaimer-footer a:hover {
    color: #475569;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    /* On mobile, footer goes full width (no sidebar offset) */
    body:not(.no-sidebar) .ai-disclaimer-footer,
    body.sidebar-open .ai-disclaimer-footer {
        left: 0 !important;
    }

    .home-page {
        padding-bottom: 70px;
    }

    .ai-disclaimer-footer {
        font-size: 0.7rem;
        padding: 1rem 1.5rem;
    }
}

@media (max-width: 576px) {
    .home-page {
        padding-bottom: 65px;
    }

    .hero-bleed {
        padding: 8.5rem 0.5rem 1rem 0.5rem;
    }
}

@media (max-width: 375px) {
    .home-page {
        padding-bottom: 60px;
    }

    .ai-disclaimer-footer {
        font-size: 0.65rem;
        padding: 0.75rem 1rem;
    }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    .ai-disclaimer-footer {
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    @media (max-width: 576px) {
        .ai-disclaimer-footer {
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
    }
}

/* FILE ATTACHMENT WARNINGS & STATES */
.file-placeholder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  min-width: 200px;
  background: transparent !important; /* Always transparent */
  border: 0.5px solid #1B91F880 !important; /* Blue border for all */
}

/* Icon wrapper - colored pill behind icon only */
.file-icon-wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-icon-wrapper svg {
  display: block;
}


.file-placeholder i {
  font-size: 32px;
  color: #3b82f6;
}

.file-placeholder span {
  font-size: 13px;
  color: #475569;
  font-weight: 400;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  .image-chip {
    max-width: 240px;
    padding: 6px 10px;
    padding-right: 28px;
  }

  .image-chip img {
    width: 50px;
    height: 50px;
  }

  .chip-remove {
    width: 16px;
    height: 16px;
    font-size: 12px;
    right: 6px;
  }

  .file-placeholder i {
    font-size: 18px;
  }

  .file-placeholder span {
    font-size: 12px;
    max-width: 150px;
  }
}

/* File placeholder (for documents/audio) */
.image-chip .file-placeholder {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    overflow: hidden;
}

.image-chip .file-placeholder div:first-child {
    font-size: 24px;
    flex-shrink: 0;
}

.image-chip .file-placeholder span {
    font-size: 13px;
    color: #374151;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}



/* Mobile adjustments */
@media (max-width: 576px) {
    .image-chip .file-placeholder span {
        max-width: 140px;
        font-size: 12px;
    }
}
/* ===== HOME IMAGE MODAL ===== */
.home-image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}

.home-image-modal.show {
    display: flex;
}

.home-image-modal img {
    max-width: 80vw;
    max-height: 80vh;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    object-fit: contain;
}

.home-image-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    line-height: 1;
}


/* Mobile adjustments */
@media (max-width: 576px) {
    .home-image-modal img {
        max-width: 95vw;
        max-height: 95vh;
    }

    .home-image-modal-close {
        top: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 2rem;
    }
}

/* ===== IMPROVE IMAGE CHIP CURSOR ===== */
.image-chip img {
    cursor: zoom-in;
}

.image-chip:hover img {
    opacity: 0.9;
}


/* ========================================
   PREVENT HORIZONTAL SCROLLBAR
   ======================================== */
html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Ensure hero section doesn't cause overflow */
.hero-bleed {
    overflow: hidden;
    max-width: 100vw;
}

/* Prevent any child elements from causing overflow */
.home-page {
    overflow-x: hidden;
    width: 100%;
}

.home-content-wrapper {
    overflow-x: hidden;
    width: 100%;
}

/* Fix for the full-bleed technique */
.hero-bleed {
    width: 100%;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
}

/* Ensure search bar doesn't overflow */
.search-bar-wrapper {
    max-width: 100%;
    overflow: hidden;
}
.logo-icon1 svg {
  width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
  shape-rendering: geometricPrecision;
}



/* Floating hover pill effect */

.icon-btn::before {
  content: "";
  position: absolute;
  inset: 1px; /* controls padding of the pill */
  background: transparent !important; /* soft blue glow */
  border-radius: var(--radius-sm);
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 0;
  /* outline: 0.5px solid transparent; */
  border: 0.5px solid transparent;
}

/* ========================================
   HOME ICON SYSTEM — DESIGN TOKENS
   ======================================== */

.home-icon {
  width: 25px;
  height: 25px;
  display: block;
  pointer-events: none;
  user-select: none;

  /* Inherit from button */
  color: var(--icon-color, #0B2F4E);
  transition: color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}

/* ========================================
   ICON BUTTON STATES — LIGHT MODE
   ======================================== */

.icon-btn {
  --icon-color: #0B2F4E;
}

/* Hover */
.icon-btn:hover {
  --icon-color: #0B2F4E;
}

.icon-btn:hover::before {
  opacity: 1;
  /* outline: 0.5px solid rgba(27, 145, 248, 0.4); */
border: 0.5px solid rgba(27, 145, 248, 0.4);
}
.icon-btn .home-icon {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}

/* Enlarge the + and mic buttons (NOT the send button .icon-btn1), overriding
   the 30px clamp so the bigger icons fit. */
.search-bar .icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
}

/* Active / Pressed */
.icon-btn:active {
  --icon-color: #003A8F;
}

/* SEND BUTTON (DARK PILL) */
.icon-btn1 {
  --icon-color: #FFFFFF;
}
/* ========================================
   ICON BUTTON STATES — DARK MODE
   ======================================== */

/* ========================================
   VOICE LISTENING STATE — BREATHING BORDER
   ======================================== */

/* Base listening state */
.icon-btn.listening {
  --icon-color: #1C72F3; /* Accent blue */
}

/* Pill layer: visible + breathing INSIDE border */
.icon-btn.listening::before {
  opacity: 1;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #4A8FF5;
  animation: borderBreath 1.8s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* Breathing border animation — 1px only, color pulse */
@keyframes borderBreath {
  0% {
    box-shadow: inset 0 0 0 2px #8BB7FF;
  }
  50% {
    box-shadow: inset 0 0 0 1px #1C72F3;
  }
  100% {
    box-shadow: inset 0 0 0 2px #8BB7FF;
  }
}

.icon-btn,
.icon-btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-bar .icon-btn1:active {
  background: #08243B;
  transform: scale(0.96);
}

/* Make SEND arrow slightly bigger */
#sendBtn .home-icon {
  width: 28px;
  height: 28px;
}

.mmx-body {
    max-height: calc(33vh - 16px) !important;
}


.search-bar,
.search-shell,
.search-bottom-row,
.search-actions-left,
.search-bar-wrapper {
    overflow: visible !important;
}