/* MENTORIXX mobile patch
   Safe mobile-only CSS layer.
   Applies layout changes only on confirmed chat screen.
   Desktop remains unchanged.
*/

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  body.mentorixx-chat-screen {
    overflow-x: hidden;
  }

  body.mentorixx-chat-screen #root,
  body.mentorixx-chat-screen div[class*="min-h-screen"],
  body.mentorixx-chat-screen div[class*="h-screen"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body.mentorixx-chat-screen input,
  body.mentorixx-chat-screen textarea,
  body.mentorixx-chat-screen button {
    max-width: 100% !important;
  }
}

/* Mobile chat step 2:
   Sidebar becomes overlay on confirmed chat screen.
   Main chat keeps full viewport width.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="h-screen"][class*="flex"][class*="bg-white"] {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    position: relative !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="bg-gray-900"] {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    width: 82vw !important;
    max-width: 320px !important;
    z-index: 50 !important;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25) !important;
  }

  body.mentorixx-chat-screen div[class*="flex-1"][class*="flex-col"][class*="min-h-0"] {
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    overflow-x: hidden !important;
  }
}

/* Mobile chat step 3:
   Make the main chat area use the mobile viewport width.
   Sidebar logic stays untouched.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="flex-1"] {
    min-width: 0 !important;
  }

  body.mentorixx-chat-screen div[class*="flex-1"][class*="overflow-y-auto"],
  body.mentorixx-chat-screen div[class*="flex-1"][class*="flex-col"] {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body.mentorixx-chat-screen div[class*="max-w-"],
  body.mentorixx-chat-screen div[class*="w-full"] {
    max-width: 100% !important;
  }

  body.mentorixx-chat-screen textarea {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Mobile chat step 4:
   Compact top chat header to give more room for messages.
   Applies only to confirmed chat screen.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 56px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] div[class*="space-x-"] {
    gap: 6px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h1,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-xl,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-lg {
    font-size: 16px !important;
    line-height: 20px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] p {
    font-size: 11px !important;
    line-height: 14px !important;
    margin: 0 !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] button {
    padding: 4px 6px !important;
    font-size: 12px !important;
    line-height: 16px !important;
  }
}

/* Mobile chat step 5:
   Tighten header controls on narrow screens.
   Keeps Leon AI, Voice, New Chat, Online visible.
*/
@media (max-width: 480px) {
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] p {
    display: none !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] button {
    padding: 3px 5px !important;
    font-size: 11px !important;
    white-space: nowrap !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .w-8,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .h-8 {
    width: 28px !important;
    height: 28px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .space-x-3 {
    gap: 5px !important;
  }
}


/* Mobile chat step 6:
   Fix overlap in compact mobile chat header.
   Goal: Voice On / New Chat / Online must not collide.
*/
@media (max-width: 480px) {

  /* Make chat top area a little tighter */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Hide long subtitle under Leon AI on narrow mobile width */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] p {
    display: none !important;
  }

  /* Slightly reduce assistant title size */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h1,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-xl,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-lg {
    font-size: 15px !important;
    line-height: 18px !important;
    margin: 0 !important;
  }

  /* Prevent control collision */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] button,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] a {
    font-size: 11px !important;
    line-height: 14px !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;
  }

  /* Keep small control groups tighter */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .space-x-2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .space-x-3,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .space-x-4 {
    gap: 4px !important;
  }

  /* Status text smaller so Online stays visible */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] [class*="text-green"],
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] [class*="text-emerald"] {
    font-size: 11px !important;
    white-space: nowrap !important;
  }
}


/* Mobile chat step 6B:
   Hide Online text on narrow mobile screens.
   Keep green status dot visible to save header space.
*/
@media (max-width: 480px) {
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] [class*="text-green"],
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] [class*="text-emerald"] {
    font-size: 0 !important;
    width: 8px !important;
    min-width: 8px !important;
    max-width: 8px !important;
    overflow: hidden !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] [class*="text-green"]::before,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] [class*="text-emerald"]::before {
    content: "" !important;
  }
}



/* Mobile chat send button fix 2026-05-03
   Restore visible send button only inside bottom input area.
   Does not affect top header buttons.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div:has(textarea) button,
  body.mentorixx-chat-screen div:has(input[placeholder*="message"]) button,
  body.mentorixx-chat-screen div:has(textarea) [role="button"] {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body.mentorixx-chat-screen textarea {
    padding-right: 44px !important;
  }
}


/* MOBILE CHAT INPUT + HEADER FIX 2026-05-09
   Only confirmed Leon chat screen.
   Keeps Subscribe/Pricing/PayPal untouched.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
  }

  /* Compact white Leon header */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] {
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    min-height: 42px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h1,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-xl,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-lg {
    font-size: 15px !important;
    line-height: 18px !important;
    margin: 0 !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] p {
    display: none !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] button,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] a {
    font-size: 11px !important;
    line-height: 14px !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;
  }

  /* Keep message area above fixed input */
  body.mentorixx-chat-screen div[class*="overflow-y-auto"] {
    padding-bottom: 115px !important;
  }

  /* Fix bottom input area */
  body.mentorixx-chat-screen div:has(textarea) {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    z-index: 300 !important;
    background: #ffffff !important;
    padding: 6px 8px calc(env(safe-area-inset-bottom) + 8px) 8px !important;
    box-sizing: border-box !important;
  }

  body.mentorixx-chat-screen textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 44px !important;
    max-height: 78px !important;
    padding-right: 48px !important;
    box-sizing: border-box !important;
  }
}


/* MOBILE CHAT COMPACT LEON HEADER FINAL 2026-05-09
   Compresses the white Leon AI header.
   Only confirmed Leon chat screen.
   Does NOT touch pricing / subscribe / PayPal.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] {
    min-height: 34px !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] > div {
    min-height: 34px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    gap: 6px !important;
    align-items: center !important;
  }

  /* shrink purple Leon avatar in header */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] div[class*="rounded"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 18px !important;
    line-height: 34px !important;
  }

  /* keep Leon title compact */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] h1,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] h2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] .text-xl,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] .text-lg {
    font-size: 14px !important;
    line-height: 16px !important;
    margin: 0 !important;
  }

  /* hide subtitle under Leon AI */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] p,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] .text-gray-500,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] .text-gray-600 {
    display: none !important;
  }

  /* make controls smaller */
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] button,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"] a {
    font-size: 11px !important;
    line-height: 13px !important;
    padding: 2px 5px !important;
    min-height: 28px !important;
    height: 28px !important;
    white-space: nowrap !important;
  }

  /* give input a little more visible room above phone navigation */
  body.mentorixx-chat-screen div:has(textarea) {
    bottom: 22px !important;
  }

  body.mentorixx-chat-screen div[class*="overflow-y-auto"] {
    padding-bottom: 135px !important;
  }
}

/* MOBILE CHAT REAL HEADER COMPACT 2026-05-09
   Real header class: bg-white border-b border-gray-200 px-6 py-4 shadow-sm
   Compresses Leon AI header and frees space for input area.
   Does NOT touch Pricing / Subscribe / PayPal.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    min-height: 42px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] > div {
    min-height: 34px !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] div[class*="w-10"][class*="h-10"] {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
    font-size: 18px !important;
    line-height: 34px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] h1,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] h2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] .text-lg {
    font-size: 15px !important;
    line-height: 17px !important;
    margin: 0 !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] p {
    display: none !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] button,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] a {
    font-size: 13px !important;
    line-height: 16px !important;
    padding: 4px 6px !important;
    white-space: nowrap !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] .h-4,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"][class*="shadow-sm"] .w-4 {
    width: 14px !important;
    height: 14px !important;
  }
}

/* MOBILE CHAT BROAD HEADER FIX 2026-05-09
   Broader selector for real Leon chat header.
   Does NOT touch Pricing / Subscribe / PayPal.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    min-height: 34px !important;
    max-height: 58px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] > div {
    min-height: 30px !important;
    gap: 4px !important;
    align-items: center !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] div[class*="w-10"][class*="h-10"] {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 16px !important;
    line-height: 30px !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h1,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] h2,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] .text-lg {
    font-size: 14px !important;
    line-height: 16px !important;
    margin: 0 !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] p {
    display: none !important;
  }

  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] button,
  body.mentorixx-chat-screen div[class*="bg-white"][class*="border-b"][class*="border-gray-200"] a {
    font-size: 12px !important;
    line-height: 14px !important;
    padding: 3px 5px !important;
    white-space: nowrap !important;
  }
}


/* MOBILE CHAT FULL SIDEBAR COVER 2026-05-09
   Makes mobile chat sidebar cover the full viewport.
   Goal: prevent Home hero/background from showing behind sidebar.
   Does NOT touch Pricing / Subscribe / PayPal.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen {
    overflow-x: hidden !important;
  }

  body.mentorixx-chat-screen #root {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="bg-gray-900"] {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
    z-index: 80 !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="bg-gray-900"] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* MOBILE CHAT FIXED SIDEBAR OVERLAY FINAL 2026-05-09
   Detaches the dark chat history sidebar from the Home page/background.
   The sidebar becomes a real full-screen mobile overlay.
   Does NOT touch Pricing / Subscribe / PayPal.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen {
    overflow-x: hidden !important;
  }

  body.mentorixx-chat-screen div[class*="bg-gray-900"][class*="text-white"][class*="flex-col"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
    background: #111827 !important;
  }

  body.mentorixx-chat-screen div[class*="bg-gray-900"][class*="text-white"][class*="flex-col"] * {
    box-sizing: border-box !important;
  }
}

/* MOBILE CHAT REAL FULL SIDEBAR WIDTH 2026-05-09
   Makes the real left chat sidebar cover the full mobile viewport.
   Does NOT touch pricing / subscribe / PayPal.
*/
@media (max-width: 768px) {
  body.mentorixx-chat-screen div[class*="h-screen"][class*="flex"][class*="bg-white"][class*="overflow-visible"] {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    background: #ffffff !important;
    z-index: 9000 !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="h-screen"][class*="bg-gray-900"][class*="text-white"][class*="flex-col"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    z-index: 9999 !important;
    background: #111827 !important;
    box-sizing: border-box !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="h-screen"][class*="bg-gray-900"][class*="text-white"][class*="flex-col"] * {
    box-sizing: border-box !important;
  }
}


/* MOBILE CHAT SIDEBAR FULLSCREEN FINAL 2026-05-09
   Fixes horizontal movement / visible Home background behind left chat list.
   Only affects Mentorixx chat screen on mobile.
   Does NOT touch Pricing / Subscribe / PayPal.
*/
@media (max-width: 768px) {
  html,
  body,
  body.mentorixx-chat-screen,
  body.mentorixx-chat-screen #root {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    background: #111827 !important;
  }

  body.mentorixx-chat-screen #root > div {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="bg-gray-900"][class*="text-white"][class*="flex-col"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;

    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;

    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;

    background: #111827 !important;
    z-index: 99999 !important;
    box-sizing: border-box !important;
  }

  body.mentorixx-chat-screen div[class*="w-80"][class*="bg-gray-900"][class*="text-white"][class*="flex-col"] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* HOME WHITE BUTTON TEXT FIX 2026-05-09
   Makes white CTA/button text visible on public Home page.
   Does NOT touch Leon chat, Pricing, Subscribe or PayPal.
*/
@media (max-width: 768px) {
  body:not(.mentorixx-chat-screen) a[class*="bg-white"],
  body:not(.mentorixx-chat-screen) button[class*="bg-white"] {
    color: #111827 !important;
    opacity: 1 !important;
  }

  body:not(.mentorixx-chat-screen) a[class*="bg-white"] *,
  body:not(.mentorixx-chat-screen) button[class*="bg-white"] * {
    color: #111827 !important;
    opacity: 1 !important;
  }
}