/* Mobile-specific fixes for Leafythings Chat */

/* Ensure full height in iframe context */
html,
body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/* Fix iOS Safari viewport height issue */
@supports (-webkit-touch-callout: none) {

  /* iOS only */
  body {
    height: -webkit-fill-available;
    min-height: -webkit-fill-available;
  }

  .chat-messages {
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
  }
}

/* Input container - fixed to bottom of iframe */
.chat-input-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 12px;
}

/* Mobile-specific fixes */
@media screen and (max-width: 768px) {

  /* Prevent body scroll when chat is open */
  body {
    position: fixed;
    width: 100%;
    overflow: hidden;
  }

  /* Adjust chat container for mobile */
  .chat-messages {
    /* Space for input container */
    padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  /* Input container mobile styling */
  .chat-input-container {
    padding: 10px 12px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  }

  /* Make input wrapper fit on narrow screens */
  .chat-input-wrapper {
    gap: 6px;
  }

  /* Smaller buttons on mobile */
  .new-chat-btn,
  .history-settings-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 6px;
  }

  .new-chat-btn .material-symbols-outlined,
  .history-settings-btn .material-symbols-outlined {
    font-size: 18px;
  }

  /* Compact send button on mobile */
  .send-button {
    padding: 10px 16px;
    min-height: 36px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* Flexible input */
  .chat-input {
    min-width: 0;
    min-height: 36px;
    padding: 8px 12px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  /* Fix settings icon position on mobile - above input container */
  .settings-icon {
    bottom: calc(100px + env(safe-area-inset-bottom));
    right: 16px;
  }

  /* Convert hover interactions to tap for mobile */
  .icon.dispensary .map-popup {
    display: none;
  }

  .icon.dispensary.active .map-popup {
    display: block;
  }

  /* Better mobile popup positioning */
  .map-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    max-width: min(280px, calc(100vw - 32px));
  }

  /* Adjust result cards for mobile */
  .result-card {
    margin: 0 -8px;
    /* Full width on small screens */
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Larger tap targets for expandable cards */
  .result-header {
    min-height: 60px;
    padding: 16px;
  }

  /* Fix modal for mobile */
  .preferences-modal {
    max-height: calc(100vh - 40px);
    max-height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 40px);
    margin: 20px;
    width: calc(100% - 40px);
  }

  .preferences-body {
    max-height: calc(100vh - 240px);
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent zoom on double-tap */
  * {
    touch-action: manipulation;
  }

  /* Fix tooltip position on mobile - above settings icon */
  .returning-user-tooltip {
    bottom: calc(160px + env(safe-area-inset-bottom));
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

/* Floating buttons layout - all screen sizes */
@media screen and (max-width: 768px) {
  .chat-input-container {
    padding: 2px 12px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  /* Single row layout - buttons float above via negative margin */
  .chat-input-wrapper {
    display: grid !important;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: 0 auto;
    /* First row collapses */
    gap: 0 8px;
    align-items: center;
  }

  /* Buttons float fully above container */
  .new-chat-wrapper {
    grid-row: 1;
    grid-column: 1;
    margin-top: -28px;
    margin-bottom: 4px;
  }

  .history-settings {
    grid-row: 1;
    grid-column: 2;
    margin-top: -28px;
    margin-bottom: 4px;
  }

  /* Input spans full width on row 2, with send inside */
  .chat-input {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-right: 44px !important;
    /* Room for send button */
  }

  /* Send button inside input */
  .send-button {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    margin-right: 2px;
  }

  /* Hide text, show icon */
  .send-button {
    font-size: 0 !important;
    line-height: 0;
  }

  .send-button::after {
    content: "send";
    font-family: "Material Symbols Outlined";
    font-size: 20px;
    line-height: 1;
    color: white;
  }

  /* Smaller buttons (~25% reduction) */
  .new-chat-btn,
  .history-settings-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 4px !important;
  }

  .new-chat-btn .material-symbols-outlined,
  .history-settings-btn .material-symbols-outlined {
    font-size: 16px !important;
  }

  /* History popup - position above button, scroll if needed */
  .past-conversations-popup {
    position: fixed !important;
    bottom: 70px !important;
    /* Above input area */
    top: auto !important;
    left: 12px !important;
    right: auto !important;
    max-height: calc(100vh - 90px) !important;
    max-height: calc(100svh - 90px) !important;
    width: min(280px, calc(100vw - 24px));
    display: flex;
    flex-direction: column;
    z-index: 10001 !important;
  }

  /* Settings menu - keep simpler positioning */
  .history-settings-menu {
    bottom: 100% !important;
    top: auto !important;
    left: 0;
    margin-bottom: 8px;
    min-width: 180px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 120px);
    max-height: calc(100svh - 120px);
    display: flex;
    flex-direction: column;
  }

  /* +New Chat button stays fixed at top */
  .past-conv-new-chat {
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
  }

  /* Scrollable conversation list */
  .past-conv-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    /* Allow shrinking */
    -webkit-overflow-scrolling: touch;
  }

  /* Padding on messages for input area */
  .chat-messages {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Handle landscape orientation on mobile */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .chat-header {
    padding: 8px 16px;
    font-size: 16px;
  }

  .chat-messages {
    height: calc(100% - 100px);
  }

  .preferences-modal {
    max-height: 90vh;
  }
}

/* Fix for Android Chrome address bar */
@media screen and (max-width: 768px) {

  /* Use smaller viewport units that don't change with address bar */
  body {
    height: 100%;
    min-height: 100%;
  }

  html {
    height: 100%;
  }
}

/* Improve touch feedback */
@media (hover: none) and (pointer: coarse) {

  /* Touch devices */
  .send-button:active,
  .suggestion:active,
  .view-details:active,
  .pref-button:active {
    transform: scale(0.95);
  }

  .result-header:active {
    background: #f3f4f6;
  }
}

/* Fix input zoom on iOS */
@supports (-webkit-touch-callout: none) {

  input[type="text"],
  select {
    font-size: 16px !important;
  }
}

/* Ensure modals are above everything on mobile */
@media screen and (max-width: 768px) {
  .preferences-overlay {
    z-index: 9999;
  }

  .preferences-modal {
    z-index: 10000;
  }
}

/* Safari/WebKit specific fixes for detail modal */
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {

  /* Safari desktop and mobile */
  .detail-overlay {
    /* Use dvh for dynamic viewport height on Safari */
    min-height: 100vh;
    min-height: 100dvh;
  }

  .detail-card {
    /* Ensure card has enough bottom margin for scrolling */
    margin-bottom: max(24px, env(safe-area-inset-bottom, 24px));
  }
}

/* Mac Safari specific - larger screens with Safari */
@media screen and (min-width: 769px) {
  @supports (-webkit-backdrop-filter: blur(10px)) {
    .detail-overlay {
      /* Extra padding for Mac Safari viewport quirks */
      padding-bottom: 48px;
    }
  }
}