@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/**** Framework7 Color Scheme - Gaia Theme ****/
/* Based on Gaia/Illuminum color palette */
:root {
  /* Primary: Illuminum Blue #2FACBC */
  --f7-ios-primary: #2FACBC;
  --f7-ios-primary-shade: #268A99;
  --f7-ios-primary-tint: #52BCC9;
  --f7-ios-primary-rgb: 47, 172, 188;
  --f7-md-primary-shade: #268A99;
  --f7-md-primary-tint: #52BCC9;
  --f7-md-primary-rgb: 47, 172, 188;
  --f7-md-primary: #2FACBC;
  --f7-md-on-primary: #ffffff;
  --f7-md-primary-container: #C8E9EE;
  --f7-md-on-primary-container: #0A3942;

  /* Secondary: Illuminum Yellow #F2AF29 */
  --f7-md-secondary: #F2AF29;
  --f7-md-on-secondary: #ffffff;
  --f7-md-secondary-container: #FBE5B8;
  --f7-md-on-secondary-container: #4D3709;

  /* Surfaces - Gaia Grays */
  --f7-md-surface: #F7F9FC;
  --f7-md-on-surface: #464F60;
  --f7-md-surface-variant: #E9EAF5;
  --f7-md-on-surface-variant: #708794;
  --f7-md-outline: #D3D3D3;
  --f7-md-outline-variant: #E5E7EB;
  --f7-md-inverse-surface: #374151;
  --f7-md-inverse-on-surface: #F7F9FC;
  --f7-md-inverse-primary: #52BCC9;

  /* Surface levels */
  --f7-md-surface-1: #F7F9FC;
  --f7-md-surface-2: #E9EAF5;
  --f7-md-surface-3: #D3D3D3;
  --f7-md-surface-4: #A1B8B8;
  --f7-md-surface-5: #6B7280;
  --f7-md-surface-variant-rgb: 233, 234, 245;
  --f7-md-on-surface-variant-rgb: 112, 135, 148;
  --f7-md-surface-1-rgb: 247, 249, 252;
  --f7-md-surface-2-rgb: 233, 234, 245;
  --f7-md-surface-3-rgb: 211, 211, 211;
  --f7-md-surface-4-rgb: 161, 184, 184;
  --f7-md-surface-5-rgb: 107, 114, 128;

  --swiper-theme-color: var(--f7-theme-color);
  --f7-color-primary: #2FACBC;
}

/* Dark mode - Gaia dark surfaces */
.dark {
  --f7-md-primary-shade: #52BCC9;
  --f7-md-primary-tint: #7FCDD7;
  --f7-md-primary-rgb: 82, 188, 201;
  --f7-md-primary: #52BCC9;
  --f7-md-on-primary: #0A3942;
  --f7-md-primary-container: #1A5F6B;
  --f7-md-on-primary-container: #C8E9EE;
  --f7-md-secondary: #F5C563;
  --f7-md-on-secondary: #4D3709;
  --f7-md-secondary-container: #F2AF29;
  --f7-md-on-secondary-container: #FBE5B8;
  --f7-md-surface: #2C3438;
  --f7-md-on-surface: #F7F9FC;
  --f7-md-surface-variant: #374151;
  --f7-md-on-surface-variant: #D3D3D3;
  --f7-md-outline: #708794;
  --f7-md-outline-variant: #6B7280;
  --f7-md-inverse-surface: #F7F9FC;
  --f7-md-inverse-on-surface: #374151;
  --f7-md-inverse-primary: #2FACBC;
  --f7-md-surface-1: #374151;
  --f7-md-surface-2: #464F60;
  --f7-md-surface-3: #6B7280;
  --f7-md-surface-4: #708794;
  --f7-md-surface-5: #A1B8B8;
  --f7-md-surface-variant-rgb: 55, 65, 81;
  --f7-md-on-surface-variant-rgb: 211, 211, 211;
  --f7-md-surface-1-rgb: 55, 65, 81;
  --f7-md-surface-2-rgb: 70, 79, 96;
  --f7-md-surface-3-rgb: 107, 114, 128;
  --f7-md-surface-4-rgb: 112, 135, 148;
  --f7-md-surface-5-rgb: 161, 184, 184;
}

.ios {
  --f7-theme-color: var(--f7-ios-primary);
  --f7-theme-color-rgb: var(--f7-ios-primary-rgb);
  --f7-theme-color-shade: var(--f7-ios-primary-shade);
  --f7-theme-color-tint: var(--f7-ios-primary-tint);
}

.md {
  --f7-theme-color: var(--f7-md-primary);
  --f7-theme-color-rgb: var(--f7-md-primary-rgb);
  --f7-theme-color-shade: var(--f7-md-primary-shade);
  --f7-theme-color-tint: var(--f7-md-primary-tint);
}

/* Color primary class */
.color-primary {
  --f7-ios-primary: #2FACBC;
  --f7-ios-primary-shade: #268A99;
  --f7-ios-primary-tint: #52BCC9;
  --f7-ios-primary-rgb: 47, 172, 188;
  --f7-md-primary-shade: #268A99;
  --f7-md-primary-tint: #52BCC9;
  --f7-md-primary-rgb: 47, 172, 188;
  --f7-md-primary: #2FACBC;
  --f7-md-on-primary: #ffffff;
  --f7-md-primary-container: #C8E9EE;
  --f7-md-on-primary-container: #0A3942;
  --f7-md-secondary: #F2AF29;
  --f7-md-on-secondary: #ffffff;
  --f7-md-secondary-container: #FBE5B8;
  --f7-md-on-secondary-container: #4D3709;
  --f7-md-surface: #F7F9FC;
  --f7-md-on-surface: #464F60;
  --f7-md-surface-variant: #E9EAF5;
  --f7-md-on-surface-variant: #708794;
  --f7-md-outline: #D3D3D3;
  --f7-md-outline-variant: #E5E7EB;
  --f7-md-inverse-surface: #374151;
  --f7-md-inverse-on-surface: #F7F9FC;
  --f7-md-inverse-primary: #52BCC9;
  --f7-md-surface-1: #F7F9FC;
  --f7-md-surface-2: #E9EAF5;
  --f7-md-surface-3: #D3D3D3;
  --f7-md-surface-4: #A1B8B8;
  --f7-md-surface-5: #6B7280;
  --f7-md-surface-variant-rgb: 233, 234, 245;
  --f7-md-on-surface-variant-rgb: 112, 135, 148;
  --f7-md-surface-1-rgb: 247, 249, 252;
  --f7-md-surface-2-rgb: 233, 234, 245;
  --f7-md-surface-3-rgb: 211, 211, 211;
  --f7-md-surface-4-rgb: 161, 184, 184;
  --f7-md-surface-5-rgb: 107, 114, 128;
  --swiper-theme-color: var(--f7-theme-color);
}

/* Color primary dark mode */
.color-primary.dark,
.color-primary .dark,
.dark .color-primary {
  --f7-md-primary-shade: #52BCC9;
  --f7-md-primary-tint: #7FCDD7;
  --f7-md-primary-rgb: 82, 188, 201;
  --f7-md-primary: #52BCC9;
  --f7-md-on-primary: #0A3942;
  --f7-md-primary-container: #1A5F6B;
  --f7-md-on-primary-container: #C8E9EE;
  --f7-md-secondary: #F5C563;
  --f7-md-on-secondary: #4D3709;
  --f7-md-secondary-container: #F2AF29;
  --f7-md-on-secondary-container: #FBE5B8;
  --f7-md-surface: #2C3438;
  --f7-md-on-surface: #F7F9FC;
  --f7-md-surface-variant: #374151;
  --f7-md-on-surface-variant: #D3D3D3;
  --f7-md-outline: #708794;
  --f7-md-outline-variant: #6B7280;
  --f7-md-inverse-surface: #F7F9FC;
  --f7-md-inverse-on-surface: #374151;
  --f7-md-inverse-primary: #2FACBC;
  --f7-md-surface-1: #374151;
  --f7-md-surface-2: #464F60;
  --f7-md-surface-3: #6B7280;
  --f7-md-surface-4: #708794;
  --f7-md-surface-5: #A1B8B8;
  --f7-md-surface-variant-rgb: 55, 65, 81;
  --f7-md-on-surface-variant-rgb: 211, 211, 211;
  --f7-md-surface-1-rgb: 55, 65, 81;
  --f7-md-surface-2-rgb: 70, 79, 96;
  --f7-md-surface-3-rgb: 107, 114, 128;
  --f7-md-surface-4-rgb: 112, 135, 148;
  --f7-md-surface-5-rgb: 161, 184, 184;
  --swiper-theme-color: var(--f7-theme-color);
}

.ios .color-primary,
.ios.color-primary {
  --f7-theme-color: var(--f7-ios-primary);
  --f7-theme-color-rgb: var(--f7-ios-primary-rgb);
  --f7-theme-color-shade: var(--f7-ios-primary-shade);
  --f7-theme-color-tint: var(--f7-ios-primary-tint);
}

.md .color-primary,
.md.color-primary {
  --f7-theme-color: var(--f7-md-primary);
  --f7-theme-color-rgb: var(--f7-md-primary-rgb);
  --f7-theme-color-shade: var(--f7-md-primary-shade);
  --f7-theme-color-tint: var(--f7-md-primary-tint);
}

/* Theme color utilities */
.text-color-primary {
  --f7-theme-color-text-color: #2FACBC;
}

.bg-color-primary {
  --f7-theme-color-bg-color: #2FACBC;
}

.border-color-primary {
  --f7-theme-color-border-color: #2FACBC;
}

.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(47, 172, 188, 0.3);
}

/**** iOS Safari/Chrome Compatibility Fixes ****/
/* iOS Chrome uses WebKit engine - these fixes address rendering issues */

/* Fix for iOS Safari/Chrome tap highlight */
* {
  -webkit-tap-highlight-color: transparent;
}

/* GPU acceleration for popups and overlays only (not the main map container) */
.leaflet-popup,
.leaflet-popup-pane {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* iOS touch scrolling for map */
.leaflet-container {
  -webkit-overflow-scrolling: touch;
}

/**** Custom Mobile Styles ****/
/* Following CLAUDE.md conventions: Tailwind @apply syntax where possible */

/* Leaflet map mobile adjustments */
.leaflet-container {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Mobile searchbar customization */
.searchbar-input-wrap {
  background: #F7F9FC !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 12px !important;
  height: 12px !important;
}

.searchbar-input-wrap input {
  font-family: Inter, sans-serif !important;
  color: #464F60 !important;
}

/* Mobile card spacing */
.card {
  margin: 8px 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile button styling */
.button {
  border-radius: 8px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  width: 100% !important;
}

/* Mobile list items */
.list li {
  font-family: Inter, sans-serif !important;
}

.item-title {
  font-weight: 500 !important;
  color: #464F60 !important;
}

.item-subtitle {
  color: #708794 !important;
}

/* Mobile tabs */
.toolbar-bottom {
  background: #F7F9FC !important;
  border-top: 1px solid #E5E7EB !important;
}

.tab-link-active {
  color: #2FACBC !important;
}

/* Mobile navbar */
.navbar {
  background: #F7F9FC !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* ---- Mobile panel: liquid glass (matching desktop side panel) ---- */
.panel {
  background: rgba(55, 65, 81, 0.78) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

.panel .panel-inner,
.panel .panel-content,
.panel .page-content {
  background: transparent !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Hide F7 panel navbar to show our custom content */
.panel .navbar,
.panel .navbar-inner,
.panel .view>.navbar {
  display: none !important;
}

/* Ensure panel content starts from top */
.panel .page {
  padding-top: 0 !important;
}

.panel .page-content {
  padding-top: env(safe-area-inset-top, 20px) !important;
}

/* Panel content container */
.gaia-panel-content {
  background: transparent;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Logo section at top of panel */
.gaia-panel-logo {
  margin-bottom: 24px;
  padding-top: 16px;
  min-height: 80px;
  /* Increased to accommodate larger logo */
}

.gaia-panel-logo img {
  height: 64px;
  /* Increased from 48px to match side-panel-logo-closed h-16 */
  display: block;
  max-width: 100%;
}

/* Navigation section */
.gaia-panel-nav {
  flex: 1;
}

/* Navigation button — glass icon tile + label row */
.gaia-nav-btn {
  display: flex;
  align-items: center;
  padding: 6px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: transparent;
  color: #F7F9FC;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.gaia-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Icon inside nav button — glass tile matching desktop side-panel-icon-tile */
.gaia-nav-btn i {
  width: 64px;
  /* w-16 */
  height: 64px;
  /* h-16 */
  min-width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(55, 65, 81, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 1.5rem;
  color: #F7F9FC;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gaia-nav-btn:hover i {
  background: rgba(75, 85, 99, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
}

.gaia-nav-btn span {
  font-size: 1.5rem;
  /* text-2xl */
  font-weight: 500;
  margin-left: 12px;
}

/* External links section at bottom */
.gaia-panel-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 16px;
  margin-top: auto;
}

.gaia-panel-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.gaia-panel-links img {
  height: 48px;
  /* Increased from 32px */
}

.gaia-panel-links a {
  text-decoration: none !important;
}

.gaia-social-link {
  display: flex;
  align-items: center;
  color: #F7F9FC;
  text-decoration: none !important;
  font-size: 1.5rem;
  padding-bottom: 9px;
  transition: color 0.2s ease;
}

.gaia-social-link:hover {
  color: #F2AF29;
}

.gaia-panel-version {
  text-align: center;
  color: #708794;
  font-size: 12px;
}

/* Extended Search Bar - matching searchBar width */
.gaia-extended-search {
  display: none;
  margin-top: 8px;
  padding: 16px;
  background: #F7F9FC;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 284px;
  /* Match searchBar max-width (220px + 64px wider) */
}

/* Small screens: extended search bar adapts to available width */
@media (max-width: 390px) {
  .gaia-extended-search {
    max-width: calc(100vw - 130px);
    /* 62px left + 68px right (12px gap + 44px locateMe button + 12px edge) */
  }
}

.gaia-extended-search.gaia-extended-search-visible {
  display: block;
}

.gaia-filter-row {
  margin-bottom: 12px;
}

.gaia-filter-row:last-child {
  margin-bottom: 0;
}

/* Date range picker styling */
.gaia-date-range-row {
  display: flex;
  flex-direction: column;
}

.gaia-date-range-row .shiny-date-range-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.gaia-date-range-row .shiny-date-range-input .form-group {
  margin-bottom: 0 !important;
}

.gaia-date-range-row .shiny-date-range-input input[type="text"] {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: #374151 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 1;
}

.gaia-date-range-row .shiny-date-range-input .input-daterange {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gaia-date-range-row .shiny-date-range-input .input-daterange>input {
  flex: 1;
  min-width: 0;
}

.gaia-date-range-row .shiny-date-range-input .input-daterange>span {
  color: #708794;
  font-size: 14px;
  flex-shrink: 0;
}

/* Style F7 selects in extended search - override F7 dark theme */
.gaia-extended-search .list,
.gaia-extended-search .list ul,
.gaia-extended-search .list li,
.gaia-extended-search .item-content,
.gaia-extended-search .item-inner,
.gaia-extended-search .gaia-filter-row {
  color: #374151 !important;
  background: inherit !important;
}

.gaia-extended-search .item-content {
  padding: 0 !important;
}

.gaia-extended-search .item-inner {
  padding: 4px 0 !important;
}

.gaia-extended-search .item-title.item-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  line-height: 1.3 !important;
}

/* F7 list styling overrides */
.gaia-extended-search .list {
  margin: 0 !important;
}

.gaia-extended-search select,
.gaia-extended-search .input-wrap input,
.gaia-extended-search .smart-select .item-after {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: #374151 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.gaia-extended-search select {
  width: 100% !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* Hide F7's default dropdown indicators in extended search */
/* The ::before pseudo-element creates a CSS triangle arrow using borders */
.gaia-extended-search .input-dropdown-wrap::before,
.gaia-extended-search .input-dropdown-wrap::after,
.gaia-extended-search .input-dropdown::after,
.gaia-extended-search .smart-select::after,
.gaia-extended-search .item-link .item-inner::after,
.gaia-extended-search .chevron-icon,
.gaia-extended-search i.icon-dropdown,
.gaia-extended-search .item-inner::after,
.gaia-extended-search select+.icon,
.gaia-extended-search select~.icon,
.gaia-extended-search select~i,
.gaia-extended-search .list .item-inner::after {
  display: none !important;
  border: none !important;
  content: none !important;
}

/* Mobile segment control */
.segmented {
  background: #E9EAF5 !important;
  border-radius: 8px !important;
}

.segmented-strong .button-active {
  background: #2FACBC !important;
  color: white !important;
}

/* Mobile Data View - Card-based Interface Content Sizing */
/* Note: Old DataTables styles removed - now using card-based interface */
#mobileDataOverlay .shiny-html-output {
  width: 100% !important;
}

/* Global DataTables wrapper fallback */
.dataTables_wrapper {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
}

table.dataTable {
  border-collapse: collapse !important;
}

table.dataTable thead th {
  background: #E9EAF5 !important;
  color: #464F60 !important;
  font-weight: 600 !important;
  padding: 12px 8px !important;
}

table.dataTable tbody td {
  padding: 8px !important;
  color: #464F60 !important;
}

table.dataTable tbody tr:hover {
  background: #F7F9FC !important;
}

/* DataTables global styling (for any remaining tables) */
/* dt-button-collection is appended to body */
.dt-button-collection {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 8px 0 !important;
  min-width: 150px !important;
  z-index: 99999 !important;
  position: fixed !important;
}

.dt-button-background {
  z-index: 99998 !important;
}

.dt-button-collection .dt-button {
  display: block !important;
  width: 100% !important;
  padding: 12px 20px !important;
  text-align: left !important;
  background: white !important;
  color: #464F60 !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

.dt-button-collection .dt-button:hover {
  background: #F7F9FC !important;
}

.dt-button-collection .dt-button span {
  color: #464F60 !important;
}

/** Toast Messages (SweetAlert2) - Mobile styling **/
/* Main toast container - using mobile color palette */
.swal2-popup {
  background: #464F60 !important;
  border-radius: 12px !important;
  border-left: 4px solid transparent !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  font-family: Inter, sans-serif !important;
  max-width: 90vw !important;
}

/* Toast title */
.swal2-title {
  color: #FFFFFF !important;
  font-family: Inter, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

/* Toast body text */
.swal2-html-container {
  color: #FFFFFF !important;
  font-family: Inter, sans-serif !important;
  font-size: 1rem !important;
  line-height: 2 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide default SweetAlert2 icon */
.swal2-icon {
  display: none !important;
}

/* Type-specific border colors */
.swal2-popup.swal2-toast.swal2-show[class*="swal2-info"],
.swal2-popup[class*="swal2-info"] {
  border-left-color: #2FACBC !important;
}

.swal2-popup.swal2-toast.swal2-show[class*="swal2-success"],
.swal2-popup[class*="swal2-success"] {
  border-left-color: #10B981 !important;
}

.swal2-popup.swal2-toast.swal2-show[class*="swal2-warning"],
.swal2-popup[class*="swal2-warning"] {
  border-left-color: #FFD700 !important;
}

.swal2-popup.swal2-toast.swal2-show[class*="swal2-error"],
.swal2-popup[class*="swal2-error"] {
  border-left-color: #EF4444 !important;
}

/* Toast close button */
.swal2-close {
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  opacity: 0.8 !important;
}

.swal2-close:hover {
  color: #FFD700 !important;
  opacity: 1 !important;
}

/* Toast actions container */
.swal2-actions {
  margin-top: 1rem !important;
  padding: 0 !important;
}

/* Toast confirm/cancel buttons */
.swal2-styled.swal2-confirm {
  background: #FFD700 !important;
  color: #464F60 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
}

.swal2-styled.swal2-confirm:hover {
  background: #2FACBC !important;
  color: #FFFFFF !important;
}

.swal2-styled.swal2-cancel {
  background: #708794 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
}

.swal2-styled.swal2-cancel:hover {
  background: #D3D3D3 !important;
}

/* Toast timer progress bar - bright for high contrast */
.swal2-timer-progress-bar {
  background: rgba(255, 255, 255, 0.9) !important;
  height: 4px !important;
}

/* Timer progress bar container */
.swal2-timer-progress-bar-container {
  background: rgba(255, 255, 255, 0.2) !important;
}


/**** Full Screen Map Overrides (Harmonized UI) ****/
.framework7-root {
  height: 100% !important;
}

.page,
.page-content {
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: clip;
  /* clip prevents visual overflow like hidden, but does NOT create a scroll
     container — so it won't capture touch scroll events from child overlays
     (gallery, account, data) that need their own scrolling. */
}

.full-screen-map {
  /* Use dynamic viewport height that respects browser chrome and iOS safe areas */
  height: 100vh !important;
  /* Fallback for older browsers */
  height: 100dvh !important;
  /* Dynamic viewport height - excludes browser UI */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* Base level */
}

/* Leaflet pane z-index hierarchy (matching desktop) */
.leaflet-pane {
  pointer-events: none !important;
}

.leaflet-tile-pane {
  z-index: 200 !important;
  pointer-events: none !important;
}

.leaflet-overlay-pane {
  z-index: 400 !important;
  pointer-events: auto !important;
}

.leaflet-shadow-pane {
  z-index: 500 !important;
  pointer-events: auto !important;
}

.leaflet-marker-pane {
  z-index: 600 !important;
  pointer-events: auto !important;
}

/* Custom markers pane (defined in foragerLeaflet.R with zIndex 650) */
.leaflet-markers-pane {
  z-index: 650 !important;
  pointer-events: auto !important;
}

/* Image miniatures overlay pane (JS overlays above circle markers, below popups) */
.leaflet-imageMiniatures-pane {
  z-index: 690 !important;
  pointer-events: auto !important;
}

.leaflet-popup-pane {
  z-index: 11500 !important;
  /* Above mobile floating containers (11000) to allow clicks on popup links */
  pointer-events: auto !important;
}

/* Leaflet control container - must be absolute for controls to position correctly */
.leaflet-control-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

.leaflet-control-container>* {
  pointer-events: auto !important;
}

/* Leaflet top-right control area - contains layer control */
.leaflet-top.leaflet-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  pointer-events: auto !important;
}

.mobile-floating-container {
  position: absolute;
  z-index: 11000;
  /* Above Map */
  pointer-events: none;
  /* Allow clicks to pass through to popups below */
}

.mobile-floating-container>* {
  pointer-events: auto;
  /* Re-enable clicks on actual buttons/controls */
}

/* Colors */
:root {
  --gaia-yellow: #F2AF29;
  --gaia-gray-bg: #F7F9FC;
}

.bg-gaia-gray {
  background-color: var(--gaia-gray-bg) !important;
  color: #333;
}

.text-gaia-yellow {
  color: var(--gaia-yellow) !important;
}

.bg-gaia-yellow {
  background-color: var(--gaia-yellow) !important;
}

/* Search Bar Positioning */
.mobile-search-bar {
  top: 12px;
  left: 68px;
  /* Space for Menu Button (12px + 44px + 12px gap) */
  right: auto;
  /* Don't use right positioning - use max-width only */
  max-width: 284px;
  /* 220px + 64px wider */
}

/* Small screens (iPhone SE, smaller iPhones): use available width */
@media (max-width: 390px) {
  .mobile-search-bar {
    max-width: calc(100vw - 136px);
    /* 68px left + 68px right (12px gap + 44px locateMe button + 12px edge) */
  }
}

/* Menu Button Top-Left */
.mobile-menu-btn {
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

/* Gaia Logo in Menu Button */
.mobile-menu-btn .gaia-menu-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Right Action Buttons (top-right: map tools) */
.mobile-right-actions {
  top: 64px;
  /* Aligned with extended search bar top edge (12px + 44px + 8px) */
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Leaflet Layer Control - position below action buttons on mobile */
.leaflet-control-layers {
  position: relative !important;
  margin-top: 164px !important;
  /* Below action buttons (64px + 44px + 12px + 44px) */
  margin-right: 12px !important;
  z-index: 11001 !important;
  /* Above mobile floating containers (11000) */
}

.leaflet-control-layers-toggle {
  width: 44px !important;
  height: 44px !important;
  background-size: 24px 24px !important;
  background-color: white !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-control-layers-expanded {
  background: white !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  z-index: 11002 !important;
  /* Expanded panel above toggle */
}

.leaflet-control-layers-base label {
  display: flex;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: #464F60;
}

.leaflet-control-layers-base input[type="radio"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

/* Measure Tool Popup Menu */
.measure-popup-menu {
  position: absolute;
  bottom: 60px;
  /* Position above the measure button */
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 8px 0;
  min-width: 160px;
  z-index: 10002;
}

.measure-popup-menu.hidden {
  display: none !important;
}

.measure-popup-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #464F60;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.measure-popup-option:hover {
  background: #F7F9FC;
}

.measure-popup-option:active {
  background: #E9EAF5;
}

.measure-popup-option i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #2FACBC;
}

.measure-popup-option.measure-popup-danger {
  color: #DC2626;
}

.measure-popup-option.measure-popup-danger i {
  color: #DC2626;
}

.measure-popup-option.measure-popup-danger:hover {
  background: #FEF2F2;
}

/* Bottom-Right Action Buttons (search actions + console) */
.mobile-bottom-right-actions {
  position: absolute !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
  /* Lifted above scale bar (~25px) + attribution (~15px) + gap (~30px) + safe area */
  right: 12px !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bottom Actions (Data Toggle) - legacy */
.mobile-bottom-actions {
  bottom: 140px;
  right: 12px;
}

.mobile-action-btn {
  width: 44px;
  height: 44px;
  background-color: white;
  /* NO !important to allow animation */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  /* NO transition - let animation work freely */
  overflow: hidden;
}

/* Remove F7 button styling artifacts */
.mobile-action-btn .button,
.mobile-action-btn button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide empty F7 button label that causes icon misalignment */
.mobile-action-btn .f7-button-label {
  display: none !important;
}

.mobile-action-btn.active-state,
.mobile-action-btn.btn-active {
  background-color: #F2AF29 !important;
  /* iColYellow */
}

.mobile-action-btn.active-state .button,
.mobile-action-btn.active-state i,
.mobile-action-btn.btn-active .button,
.mobile-action-btn.btn-active i,
.mobile-action-btn.btn-active .btn-mobile-action {
  color: white !important;
}

/* Glow animation for first-time users - draws attention to AI button */
/* NOTE: Cannot use !important in keyframes - it invalidates the animation */
@keyframes claudeGlow {

  0%,
  100% {
    background-color: #F2AF29;
    /* iColYellow - START with yellow */
  }

  50% {
    background-color: white;
  }
}

/* Simple selector - matches original working code */
/* ID selector has higher specificity than .mobile-action-btn */
#DivClaudeMcpBtn.claude-btn-glow {
  animation: claudeGlow 2.5s ease-in-out infinite !important;
  /* Relies on .mobile-action-btn .button { background: transparent } for inner transparency */
}

/* Mobile Data View Loader */
.mobile-data-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 16px;
}

.mobile-data-loader.hidden {
  display: none;
}

.mobile-loader-content {
  text-align: center;
}

/* Mobile Search Row - matches menu button height (44px) */
.mobile-search-row {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #e5e7eb;
  border-radius: 22px !important;
  /* Full pill shape (half of height) */
  overflow: hidden;
  padding: 4px 4px 4px 0 !important;
}

/* Search input container - allow shrinking */
.mobile-search-row #foragerSearchBarClosed {
  flex: 1 1 auto !important;
  min-width: 60px !important;
  overflow: hidden !important;
}

/* Filter toggle and search buttons - prevent shrinking */
.mobile-search-row>div:nth-child(2),
.mobile-search-row>div:nth-child(3) {
  flex: 0 0 auto !important;
}

/* Filter toggle button in search row */
.mobile-search-row #toggleExtendedSearchBtn,
.mobile-search-row .button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* Mobile Search Input Styles */
.mobile-search-input {
  flex: 1;
  min-width: 0;
  /* Allow shrinking below content size */
  overflow: hidden;
}

.mobile-search-input .form-group {
  margin-bottom: 0 !important;
}

.mobile-search-input textarea {
  width: 100% !important;
  min-height: 32px !important;
  max-height: 100px !important;
  /* Allow expansion up to 100px */
  border: none !important;
  background: transparent !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow-y: auto !important;
}

.mobile-search-input textarea::placeholder {
  color: #9CA3AF;
}

.mobile-search-input textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Mobile Species Filter - shown after search results */
.gaia-species-filter {
  margin-top: 8px;
  padding: 4px 12px;
  background: white;
  border-radius: 16px;
  /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  max-width: 284px;
  /* Match searchBar max-width (220px + 64px wider) */
  min-height: 44px;
  /* Minimum height matches locateMe button, grows with content */
  display: flex;
  align-items: center;
}

/* Small screens: species filter adapts to available width */
@media (max-width: 390px) {
  .gaia-species-filter {
    max-width: calc(100vw - 130px);
    /* 62px left + 68px right (12px gap + 44px locateMe button + 12px edge) */
  }
}

.gaia-species-filter .form-group {
  margin-bottom: 0 !important;
  width: 100% !important;
}

.gaia-species-filter select {
  width: 100% !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: 12px !important;
  background-color: #F7F9FC !important;
  min-height: 36px !important;
  height: auto !important;
  color: #464F60 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.gaia-species-filter select:focus {
  outline: none !important;
  border-color: #2FACBC !important;
}

/* Mobile Search Button Styles */
.mobile-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure equal right margin for search and stop buttons */
#DivSearchBtn {
  margin-right: 8px !important;
}

#DivStopSearchBtn {
  margin-right: 10px !important;
}


.btn-mobile-search {
  background-color: #F2AF29 !important;
  color: white !important;
  border: none !important;
  border-radius: 9999px !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;
  margin-right: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-mobile-search:hover {
  background-color: #2FACBC !important;
}

.btn-mobile-search i {
  font-size: 14px !important;
  margin: 0 !important;
}

.btn-mobile-stop {
  background-color: #F25C33 !important;
  color: white !important;
  border: none !important;
  border-radius: 9999px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-mobile-stop:hover {
  background-color: #F7F9FC !important;
  color: #F25C33 !important;
}

.btn-mobile-stop i {
  font-size: 14px !important;
  margin: 0 !important;
}

.btn-mobile-clear {
  background-color: #F7F9FC !important;
  color: #464F60 !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 9999px !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-mobile-clear:hover {
  background-color: #374151 !important;
  color: white !important;
}

.btn-mobile-clear i {
  font-size: 14px !important;
  margin: 0 !important;
}

/* Generic mobile action button (for actionButtons in action-btn containers) */
.btn-mobile-action {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-mobile-action:hover,
.btn-mobile-action:focus {
  background: transparent !important;
  box-shadow: none !important;
}

.btn-mobile-action i {
  font-size: 18px !important;
  margin: 0 !important;
}

/* Mobile close button for overlays */
.btn-mobile-close {
  background-color: #EF4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}

.btn-mobile-close:hover {
  background-color: #DC2626 !important;
}

/* Icon-only close button for overlay headers */
.btn-mobile-close-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E5E7EB;
  border: none;
  border-radius: 50%;
  color: #464F60;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-mobile-close-icon:hover {
  background: #D3D3D3;
}

.mobile-console {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  /* Aligned with toggle button bottom edge */
  left: 12px;
  right: auto;
  width: 320px;
  /* Static width: 44px menu + 8px gap + 284px searchBar + 4px padding */
  max-width: calc(90vw - 24px);
  /* Ensure doesn't exceed viewport on small screens */
  background: rgba(30, 41, 59, 0.95);
  color: white;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: monospace;
  max-height: 120px;
  overflow-y: auto;
  pointer-events: auto;
  /* Stack children vertically: header, row-1, row-2 */
  display: flex;
  flex-direction: column;
}

/* Mobile console header */
.mobile-console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-console-title {
  font-weight: bold;
  color: #94a3b8;
}

/* Mobile console navigation buttons - matching chromiumUI style */
.mobile-console .console-nav-btn {
  background-color: #374151;
  color: #FFFFFFCC;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.mobile-console .console-nav-btn:hover:not(:disabled) {
  background-color: #F2AF29;
  color: #464F60;
  border-color: #F2AF29;
}

.mobile-console .console-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Mobile console rows - inherit from desktop styling */
.mobile-console .console-row {
  display: flex;
  align-items: center;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.3;
}

.mobile-console .console-icon {
  width: 16px;
  margin-right: 6px;
  flex-shrink: 0;
}

.mobile-console .console-icon i {
  font-size: 12px;
}

.mobile-console .console-text {
  flex: 1;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-console .console-timestamp {
  font-size: 10px;
  color: #708794;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Console row type colors */
.mobile-console .console-row.info .console-icon i {
  color: #2FACBC;
}

.mobile-console .console-row.success .console-icon i {
  color: #10B981;
}

.mobile-console .console-row.warning .console-icon i {
  color: #FFD700;
}

.mobile-console .console-row.error .console-icon i {
  color: #EF4444;
}

.mobile-console .console-row.loading .console-icon i {
  color: #F2AF29;
}

/* Tailwind-like utility classes for mobile overlays */
/* Positioning */
.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.right-4 {
  right: 16px;
}

.top-8 {
  top: 32px;
}

.-translate-y-1\/2 {
  transform: translateY(-50%);
}

/* Z-index */
.z-\[10500\] {
  z-index: 10500;
}

/* Display */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.hidden {
  display: none;
}

/* Overflow */
.overflow-y-scroll {
  overflow-y: scroll;
}

/* Backgrounds */
.bg-white {
  background-color: white;
}

.bg-gColGray1 {
  background-color: #F7F9FC;
}

.bg-iColBlue {
  background-color: #2FACBC;
}

.bg-iColYellow {
  background-color: #F2AF29;
}

.bg-gColBG3 {
  background-color: #374151;
}

/* Borders */
.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-gColBorder {
  border-color: #E5E7EB;
}

.border-none {
  border: none;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

/* Sizing */
.min-h-\[56px\] {
  min-height: 56px;
}

.w-full {
  width: 100%;
}

/* Spacing - Padding */
.p-0 {
  padding: 0;
}

.p-4 {
  padding: 16px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-3\.5 {
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

/* Spacing - Margin */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.ml-2 {
  margin-left: 8px;
}

.mr-2 {
  margin-right: 8px;
}

/* Typography */
.text-white {
  color: white;
}

.text-gColDarkText {
  color: #464F60;
}

.text-gColGray4 {
  color: #708794;
}

.text-gColBorder {
  color: #E5E7EB;
}

.text-iColBlue {
  color: #2FACBC;
}

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-\[32px\] {
  font-size: 32px;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.leading-normal {
  line-height: 1.5;
}

.no-underline {
  text-decoration: none;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

/* Block display */
.block {
  display: block;
}

/* Grow (flexbox) */
.grow {
  flex-grow: 1;
}

/* Hide loading GIF in mobile searchBar */
#DivSearchingGif {
  display: none !important;
}

/* Image miniature markers - rounded corners */
.leaflet-marker-icon.marker-img-main,
.leaflet-marker-icon.marker-img-related {
  border-radius: 18px !important;
  object-fit: cover !important;
  cursor: pointer !important;
}

/* Yellow border for main species markers */
.leaflet-marker-icon.marker-img-main {
  border: 3px solid #F2AF29 !important;
}

/* Border for related species markers */
.leaflet-marker-icon.marker-img-related {
  border: 3px solid currentColor !important;
}

/* Collapsed image markers (when overlapping) - using iColYellow */
.collapsed-image-marker {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.collapsed-image-marker .circle-marker-inner {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  background-color: #F2AF29 !important;
  /* iColYellow - matches main species marker border */
  border: 2px solid white !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
}

.collapsed-image-marker .circle-marker-inner:hover {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile Account Styles */
.gaia-mobile-account {
  padding: 0 16px;
  background: transparent;
  min-height: 100%;
  font-family: 'Inter', sans-serif;
}

/* ---- Account Header ---- */
.gaia-account-header {
  display: flex;
  align-items: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gaia-account-avatar {
  margin-right: 16px;
  flex-shrink: 0;
}

.gaia-avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.gaia-account-info {
  flex: 1;
}

.gaia-account-name {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #464F60;
  margin: 0 0 4px 0;
}

.gaia-account-email {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #708794;
  margin: 0 0 8px 0;
}

.gaia-account-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: rgba(47, 172, 188, 0.85);
  color: white;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 6px rgba(47, 172, 188, 0.2);
}

/* ---- Section Title (plans header) ---- */
.gaia-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #464F60;
  text-align: center;
  margin: 16px 0 8px;
}

/* ---- Plan Cards ---- */
.gaia-plans-container {
  /* horizontal padding set by shared rule above */
}

/* Grid row for plan cards - stacked on mobile, 2 columns on tablet+ */
.gaia-plans-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.gaia-plans-row .gaia-plan-card {
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .gaia-plans-row {
    flex-direction: row;
  }

  .gaia-plans-row .gaia-plan-card {
    flex: 1;
    min-width: 0;
  }
}

/* Consistent width and alignment for all account sections */
.gaia-account-header,
.gaia-account-tabbar,
.gaia-plans-container,
.gaia-profile-container,
.gaia-settings-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
}

.gaia-plan-card {
  margin-bottom: 16px;
}

/* Custom plan card (liquid glass) */
.gaia-card {
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gaia-card-light {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.gaia-card-dark {
  background: rgba(55, 65, 81, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.1);
}

.gaia-card-darkest {
  background: rgba(44, 52, 56, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Card title row (title + balance badge) */
.gaia-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.gaia-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
}

.gaia-text-dark {
  color: #464F60 !important;
}

.gaia-text-light {
  color: #F7F9FC !important;
}

/* Balance badge (free searches left) */
.gaia-balance-badge {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 400;
  background: #374151;
  color: #F7F9FC;
  border-radius: 9999px;
  padding: 4px 12px;
}

/* Plan price display (matching chromium) */
.gaia-plan-price {
  text-align: center;
  padding: 16px 0;
}

.gaia-plan-price .currency {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #708794;
  vertical-align: top;
  margin-right: 4px;
}

.gaia-plan-price .amount {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #464F60;
  letter-spacing: -1px;
}

.gaia-plan-price .period {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #708794;
}

/* Price colors on dark cards */
.gaia-card-dark .gaia-plan-price .currency,
.gaia-card-dark .gaia-plan-price .period,
.gaia-card-darkest .gaia-plan-price .currency,
.gaia-card-darkest .gaia-plan-price .period {
  color: #D1D5DB !important;
}

.gaia-card-dark .gaia-plan-price .amount,
.gaia-card-darkest .gaia-plan-price .amount {
  color: #F7F9FC !important;
}

/* ---- Feature rows (checkmarks/x-marks matching chromium) ---- */
.gaia-feature-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
}

.gaia-feature-row.gaia-text-dark {
  color: #464F60;
}

.gaia-feature-row.gaia-text-light {
  color: #E5E7EB;
}

.gaia-icon-green {
  color: #4DA02D !important;
  font-size: 18px;
  flex-shrink: 0;
}

.gaia-icon-gray {
  color: #9CA3AF !important;
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- Plan card buttons (matching chromium) ---- */
.gaia-card-btn {
  margin-top: 20px;
}

.gaia-card-btn .button,
.gaia-plan-card .button {
  background: rgba(242, 175, 41, 0.9) !important;
  color: #2C3438 !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  box-shadow: 0 2px 8px rgba(242, 175, 41, 0.25) !important;
  transition: all 0.25s ease !important;
}

.gaia-card-btn .button:hover,
.gaia-plan-card .button:hover {
  background: rgba(47, 172, 188, 0.9) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(47, 172, 188, 0.25) !important;
}

/* Active plan button - yellow, non-interactive */
.gaia-btn-active .button {
  background: rgba(242, 175, 41, 0.9) !important;
  color: #2C3438 !important;
  border: none !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: 0 2px 8px rgba(242, 175, 41, 0.25) !important;
}

/* Default/inactive button (e.g. "Defaults to after expiry") */
.gaia-btn-default .button {
  background: rgba(229, 231, 235, 0.6) !important;
  color: #708794 !important;
  border: none !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Disabled plan button (can't purchase) */
.gaia-btn-disabled .button {
  background: rgba(229, 231, 235, 0.6) !important;
  color: #708794 !important;
  border: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Active plan card highlight */
.gaia-plan-active .gaia-card {
  border: 2px solid rgba(242, 175, 41, 0.6) !important;
  box-shadow: 0 4px 24px rgba(242, 175, 41, 0.15), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Disabled plan card appearance */
.gaia-plan-disabled .gaia-card {
  opacity: 0.85;
}

/* Plan card anchor links */
.gaia-mobile-account .gaia-plan-link {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
}

/* ---- Section Cards (Profile & Settings - liquid glass) ---- */
.gaia-section-card {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.gaia-section-header {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #464F60;
  margin: 0 0 16px 0;
}

/* ---- Info Field (label + value, matching chromium) ---- */
.gaia-info-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gaia-info-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.gaia-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #708794;
  margin: 0;
}

.gaia-field-value {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #464F60;
  background: rgba(247, 249, 252, 0.6);
  border-radius: 12px;
  padding: 8px 12px;
  margin: 0;
}

/* ---- Legal Links ---- */
.gaia-legal-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  color: #2FACBC !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  transition: background 0.2s ease;
}

.gaia-legal-link:hover {
  background: rgba(255, 255, 255, 0.5);
}

.gaia-link-icon {
  font-size: 12px;
}

/* ---- Action Buttons (Edit, Logout) ---- */
.gaia-btn-edit {
  width: 100%;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #464F60 !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 10px 20px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.gaia-btn-edit:hover {
  border-color: rgba(47, 172, 188, 0.4) !important;
  background: rgba(255, 255, 255, 0.8) !important;
  color: #2FACBC !important;
  box-shadow: 0 2px 8px rgba(47, 172, 188, 0.15) !important;
}

.gaia-btn-logout {
  width: 100%;
  background: rgba(55, 65, 81, 0.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: white !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 12px 20px !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.gaia-btn-logout:hover {
  background: rgba(31, 41, 55, 0.9) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

/* ---- Account tab bar (liquid glass) ---- */
.gaia-account-tabbar {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin-bottom: 16px !important;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06) !important;
}

.gaia-account-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 1 !important;
  padding: 10px 12px !important;
  color: #708794 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: 14px !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.25s ease !important;
}

.gaia-account-tab i,
.gaia-account-tab .fa,
.gaia-account-tab svg {
  font-size: 16px !important;
}

.gaia-account-tab-active {
  background: rgba(242, 175, 41, 0.9) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(242, 175, 41, 0.3) !important;
}

.gaia-account-tab:not(.gaia-account-tab-active):active {
  background: rgba(255, 255, 255, 0.5) !important;
}

.gaia-account-tab-content {
  background: transparent !important;
}

/* Liquid glass background for account overlay */
#mobileAccountOverlay {
  background: linear-gradient(160deg,
      #EEF2F7 0%,
      #F7F9FC 30%,
      #EDF6F7 60%,
      #F5F2EC 100%) !important;
}

#mobileAccountOverlay>.relative {
  background: transparent !important;
  border-bottom: none !important;
}

/* F7 card overrides for remaining F7 usage */
.gaia-mobile-account .card {
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* F7 Button text contrast */
.gaia-mobile-account .button-fill {
  color: white !important;
}

/* List backgrounds */
.gaia-mobile-account .list ul {
  background: white !important;
}

.gaia-mobile-account .item-content {
  background: transparent !important;
}

/**** Mobile Leaflet Popup Image Constraints ****/
/* Constrain popup images to fit within popup boundaries on mobile */
.leaflet-popup-content-wrapper {
  max-width: 284px !important;
  /* Match searchBar max-width */
  width: auto !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Images in popups - full width, height scales with image proportions */
.leaflet-popup img {
  max-width: 100% !important;
  max-height: 50vh !important;
  /* Allow tall images but cap at 50% viewport height */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  /* Preserve aspect ratio, fit within bounds */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Scrollable container for popup images */
.scrollableContainer {
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Image slide container */
.image-slide {
  max-width: 100% !important;
  overflow: hidden !important;
}

.image-slide img {
  max-width: calc(100% - 24px) !important;
  max-height: 40vh !important;
  /* Allow taller images, cap at 40% viewport */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: white !important;
  margin: 8px auto !important;
  padding: 4px !important;
}

/* Popup image container - no padding to touch map edges */
.popup-image-container {
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Popup table constraints - compact styling for mobile */
.popupTable {
  max-width: 100% !important;
  font-size: 13px !important;
  word-wrap: break-word !important;
  line-height: 1.15 !important;
  border-collapse: collapse !important;
  margin: 6px 8px !important;
}

.popupTable th,
.popupTable td {
  padding: 1px 4px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  vertical-align: top !important;
}

.popupTable th {
  font-weight: 600 !important;
  color: #464F60 !important;
  white-space: nowrap !important;
  padding-left: 0 !important;
  width: auto !important;
}

.popupTable td {
  max-width: 180px !important;
  color: #708794 !important;
}

/* Ensure links in popup table are clickable */
.popupTable a,
.leaflet-popup a,
.leaflet-popup-content a {
  pointer-events: auto !important;
  cursor: pointer !important;
  color: #2FACBC !important;
  /* iColBlue */
  text-decoration: underline !important;
}

/* Compact popup content wrapper - minimal padding for images to touch edges */
.leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Compact popup close button */
.leaflet-popup-close-button {
  padding: 4px 6px !important;
  font-size: 18px !important;
}

/**** Measure Tool Popup - add padding/margin (unlike species popups) ****/
.leaflet-measure-resultpopup>.leaflet-popup-content-wrapper {
  padding: 16px !important;
  text-align: center !important;
  max-width: 284px !important;
  /* Match searchBar max-width */
  width: 284px !important;
}

.leaflet-measure-resultpopup .leaflet-popup-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
}

.leaflet-measure-resultpopup .leaflet-popup-content>* {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide default Leaflet controls (except measure tool and scale bar) */
.leaflet-control-container .leaflet-top.leaflet-right,
.leaflet-control-container .leaflet-bottom.leaflet-left {
  display: none !important;
}

/* Show bottom-right for scale bar - position at bottom edge with safe area */
.leaflet-control-container .leaflet-bottom.leaflet-right {
  display: block !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* At bottom edge, respecting safe area only */
}

/* Hide ALL controls in bottom-right except scale bar and attribution (mobile has its own floating buttons) */
.leaflet-control-container .leaflet-bottom.leaflet-right .leaflet-control:not(.leaflet-control-scale):not(.leaflet-control-attribution) {
  display: none !important;
}

/* Ensure scale bar and attribution are visible with high specificity */
.leaflet-control-scale.leaflet-control {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.leaflet-control-attribution.leaflet-control {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Scale bar styling for mobile */
.leaflet-control-scale {
  margin-bottom: 0 !important;
}

.leaflet-control-scale-line {
  background: #2C3438 !important;
  color: #F7F9FC !important;
  border-color: #F7F9FC !important;
  text-align: center !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  margin-bottom: 0 !important;
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
}

.leaflet-control-scale-line:first-child {
  border-radius: 4px 4px 0 0 !important;
}

/* Keep top-left visible for measure control */
.leaflet-control-container .leaflet-top.leaflet-left {
  display: block !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

/* Measure control - always in DOM, shown when active */
.leaflet-control-measure {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  margin-top: 70px !important;
  margin-left: 16px !important;
  width: calc(100vw - 32px) !important;
  /* Full width minus margins */
  max-width: 284px !important;
  /* Match searchBar max-width */
  z-index: 10000 !important;
}

/* Hide the toggle button visually but keep it functional */
/* Note: Using clip-path instead of opacity for iOS compatibility */
.leaflet-control-measure .leaflet-control-measure-toggle {
  width: 40px !important;
  height: 40px !important;
  opacity: 0.01 !important;
  /* Near-zero but not 0 for iOS WebKit */
  -webkit-clip-path: inset(0) !important;
  clip-path: inset(0) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Measure interaction panel */
.leaflet-control-measure .leaflet-control-measure-interaction {
  padding: 16px !important;
  font-size: 14px !important;
  background: white !important;
  border-radius: 12px !important;
  z-index: 10001 !important;
}

.leaflet-control-measure .tasks {
  padding: 12px 0 !important;
  font-size: 14px !important;
  color: #464F60 !important;
}

.leaflet-control-measure .tasks h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #464F60 !important;
  margin: 0 0 8px 0 !important;
}

.leaflet-control-measure .tasks p {
  font-size: 13px !important;
  color: #708794 !important;
  margin: 0 !important;
}

.leaflet-control-measure .results {
  padding: 12px !important;
  font-size: 14px !important;
  background: #F7F9FC !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
  color: #464F60 !important;
}

.leaflet-control-measure a.start,
.leaflet-control-measure a.cancel,
.leaflet-control-measure a.finish {
  display: inline-block !important;
  padding: 10px 16px !important;
  margin: 4px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.leaflet-control-measure a.start {
  background: #2FACBC !important;
  color: white !important;
}

.leaflet-control-measure a.cancel {
  background: #E5E7EB !important;
  color: #464F60 !important;
}

.leaflet-control-measure a.finish {
  background: #F2AF29 !important;
  color: white !important;
}

/* Attribution styling - match desktop */
.leaflet-control-attribution {
  display: block !important;
  font-size: 6px !important;
  background: #374151 !important;
  /* gColBG3 */
  color: #F7F9FC !important;
  /* gColGray1 */
  border-radius: 8px 0 0 8px !important;
  padding: 3px 6px 3px 10px !important;
}

.leaflet-control-attribution a {
  color: #2FACBC !important;
  /* iColBlue */
}

/**** Mobile AI Assistant Slide-Up Sheet ****/
/* Backdrop */
.mobile-ai-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-ai-backdrop.visible {
  opacity: 1;
}

/* Sheet container */
.mobile-ai-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80vh;
  /* Fallback for older browsers */
  height: 80dvh;
  /* Dynamic viewport - respects browser UI */
  max-height: calc(80dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  /* Respect safe areas */
  /* Fallback */
  height: 80dvh;
  /* Dynamic viewport */
  max-height: calc(80dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  background: #F7F9FC;
  border-radius: 20px 20px 0 0;
  z-index: 11600;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  will-change: transform;
}

.mobile-ai-sheet.visible {
  transform: translateY(0);
}

.mobile-ai-sheet.dragging {
  transition: none;
}

/* Drag handle */
.mobile-ai-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px 0;
  cursor: grab;
  touch-action: none;
}

.mobile-ai-sheet-handle:active {
  cursor: grabbing;
}

.mobile-ai-sheet-handle-bar {
  width: 40px;
  height: 4px;
  background: #D3D3D3;
  border-radius: 2px;
}

/* Header */
.mobile-ai-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.mobile-ai-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #464F60;
}

.mobile-ai-sheet-title i {
  color: #2FACBC;
  font-size: 20px;
}

.mobile-ai-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #E5E7EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 14px;
  cursor: pointer;
}

.mobile-ai-sheet-close:hover {
  background: #D3D3D3;
}

/* Content area */
.mobile-ai-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Loading state */
.mobile-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.mobile-ai-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #2FACBC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-ai-loading p {
  margin-top: 16px;
  color: #708794;
  font-size: 14px;
}

/* Chat messages - both mobile-ai-message and claudeMcpMessage (for restored history) */
.mobile-ai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-ai-message,
.claudeMcpMessage {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.mobile-ai-message.assistant,
.claudeMcpMessage.assistant {
  background: white;
  border: 1px solid #E5E7EB;
  color: #464F60;
}

.mobile-ai-message.assistant h1,
.mobile-ai-message.assistant h2,
.mobile-ai-message.assistant h3,
.claudeMcpMessage.assistant h1,
.claudeMcpMessage.assistant h2,
.claudeMcpMessage.assistant h3 {
  color: #2FACBC;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.mobile-ai-message.assistant h1,
.claudeMcpMessage.assistant h1 {
  font-size: 18px;
}

.mobile-ai-message.assistant h2,
.claudeMcpMessage.assistant h2 {
  font-size: 16px;
}

.mobile-ai-message.assistant h3,
.claudeMcpMessage.assistant h3 {
  font-size: 14px;
}

.mobile-ai-message.assistant p,
.claudeMcpMessage.assistant p {
  margin: 0 0 8px 0;
}

.mobile-ai-message.assistant ul,
.claudeMcpMessage.assistant ul {
  margin: 0 0 8px 0;
  padding-left: 20px;
}

.mobile-ai-message.assistant li,
.claudeMcpMessage.assistant li {
  margin-bottom: 4px;
}

.mobile-ai-message.user,
.claudeMcpMessage.user {
  background: rgba(47, 172, 188, 0.1);
  border: 1px solid rgba(47, 172, 188, 0.2);
  color: #464F60;
  margin-left: 24px;
}

/* Input area */
.mobile-ai-input-area {
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
  background: white;
}

/* AI Toolbar - Model, Language, Word export */
.mobile-ai-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.mobile-ai-toolbar-select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #D3D3D3;
  border-radius: 6px;
  background: #F7F9FC;
  color: #464F60;
  font-size: 13px;
  cursor: pointer;
}

.mobile-ai-toolbar-select:focus {
  outline: none;
  border-color: #2FACBC;
}

.mobile-ai-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #2FACBC;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  /* Push Word button to right */
  max-width: 72px;
}

.mobile-ai-toolbar-btn:hover {
  background: #268A99;
}

.mobile-ai-select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background: #F7F9FC;
  color: #464F60;
  font-size: 14px;
  cursor: pointer;
}

.mobile-ai-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
}

/* The Shiny uiOutput wrapper needs to stretch */
.mobile-ai-input-row>.shiny-html-output {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

.mobile-ai-textarea {
  flex: 1 1 auto;
  min-width: 0;
  /* Allow flex item to shrink below content size */
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background: white;
  color: #464F60;
  font-size: 14px;
  resize: none;
  min-height: 40px;
  max-height: 100px;
  font-family: Inter, sans-serif;
}

.mobile-ai-textarea:focus {
  outline: none;
  border-color: #2FACBC;
}

.mobile-ai-send-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #F2AF29;
  border-radius: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-ai-send-btn:hover {
  background: #D99A1F;
}

.mobile-ai-send-btn i {
  font-size: 14px;
}

/* Small screen responsive adjustments for AI Assistant */
@media (max-width: 400px) {
  .mobile-ai-toolbar {
    flex-wrap: wrap;
  }

  .mobile-ai-toolbar-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 12px;
    padding: 6px 8px;
  }

  .mobile-ai-toolbar-btn {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 6px 10px;
  }

  .mobile-ai-select {
    font-size: 13px;
    padding: 8px 10px;
  }

  .mobile-ai-input-row {
    width: 100%;
  }

  .mobile-ai-textarea {
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }
}

/**** Language Selection Sheet ****/
.mobile-language-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11000;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.mobile-language-backdrop.visible {
  display: block;
  opacity: 1;
}

.mobile-language-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: white;
  border-radius: 16px 16px 0 0;
  z-index: 11001;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: none;
  flex-direction: column;
}

.mobile-language-sheet.visible {
  display: flex;
  transform: translateY(0);
}

.mobile-language-sheet.dragging {
  transition: none;
}

/* Hidden state - MUST come after main class to override */
.mobile-language-backdrop.hidden,
.mobile-language-sheet.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mobile-language-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px 0;
  cursor: grab;
}

.mobile-language-sheet-handle-bar {
  width: 40px;
  height: 4px;
  background: #D3D3D3;
  border-radius: 2px;
}

.mobile-language-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.mobile-language-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #F3F4F6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #464F60;
}

.mobile-language-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px 16px;
}

.mobile-language-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-language-item {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: #F7F9FC;
  border-radius: 8px;
  text-align: left;
  font-size: 16px;
  color: #464F60;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-language-item:hover,
.mobile-language-item:active {
  background: #E5E7EB;
}

.mobile-language-item.selected {
  background: #2FACBC;
  color: white;
}

/**** Map Popup Slideshow Navigation - compact for mobile ****/
.slideshow-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 8px 12px !important;
  /* Added left/right margins */
}

/* Image source/attribution text - add left/right margins */
.leaflet-popup small,
.leaflet-popup-content small {
  display: block !important;
  margin: 4px 12px 8px 12px !important;
  color: #708794 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.slideshow-nav button {
  padding: 4px 12px;
  border-radius: 6px;
  background: #374151;
  color: #F9FAFB;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
  border: none;
  white-space: nowrap;
}

.slideshow-nav button:hover {
  background: #F2AF29;
  color: #464F60;
}

/* Image counter styling */
.slideshow-nav span,
.slideshow-nav .slide-counter {
  font-size: 0.875rem;
  color: #464F60;
  font-weight: 500;
  white-space: nowrap;
}

/**** Map Stability - prevent jumps on interaction ****/
/* Prevent map from auto-panning when opening popups */
.leaflet-popup {
  transition: none !important;
}

/* Prevent map panning during marker/image clicks */
.leaflet-container {
  scroll-behavior: auto !important;
}

/* Ensure popups don't trigger map recentering */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip-container {
  pointer-events: auto !important;
}

/**** Hide default Shiny disconnect overlay ****/
#shiny-disconnected-overlay,
.shiny-notification-panel,
#ss-overlay,
#ss-connect-dialog {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide Framework7 disconnect toast (added via JavaScript - see uiWebkit.R) */
.toast.gaia-hide-toast {
  display: none !important;
}

/**** Mobile Disconnect/Crash Screen ****/
.mobile-disconnect-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(55, 65, 81, 0.9);
  padding: 16px;
}

.mobile-disconnect-screen.hidden {
  display: none !important;
}

.mobile-disconnect-modal {
  background: #F7F9FC;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-disconnect-logo {
  margin-bottom: 16px;
}

.mobile-disconnect-logo img {
  width: 64px;
  height: 64px;
}

.mobile-disconnect-title {
  color: #464F60;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.mobile-disconnect-subtitle {
  color: #708794;
  font-size: 14px;
  margin: 0 0 16px 0;
}

.mobile-disconnect-console {
  background: #2C3438;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  max-height: 120px;
  overflow-y: auto;
  text-align: left;
}

.mobile-disconnect-console-title {
  color: #708794;
  font-size: 11px;
  margin: 0 0 8px 0;
}

.mobile-disconnect-console-content {
  font-family: monospace;
  font-size: 11px;
  color: white;
}

.mobile-disconnect-button {
  width: 100%;
  background: #2FACBC;
  color: white;
  border: none;
  border-radius: 16px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s;
}

.mobile-disconnect-button:hover {
  background: #259DAD;
}

.mobile-disconnect-alt {
  color: #708794;
  font-size: 13px;
  margin: 0;
}

.mobile-disconnect-alt a {
  color: #2FACBC;
  text-decoration: underline;
}

/**** Chrome-specific fixes for Leaflet controls ****/
/* Chrome sometimes hides controls due to GPU rendering issues */
@supports (-webkit-appearance: none) {

  .leaflet-control-scale,
  .leaflet-control-attribution {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  .leaflet-bottom.leaflet-right {
    display: block !important;
    visibility: visible !important;
  }
}

/**** Mobile Measure Tool & Leaflet Controls ****/
.leaflet-control-measure {
  display: block !important;
  visibility: visible !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  background-clip: padding-box !important;
  border-radius: 4px !important;
}

.leaflet-control-measure .leaflet-control-measure-toggle,
.leaflet-control-measure .leaflet-control-measure-toggle:hover {
  width: 36px !important;
  height: 36px !important;
  background-size: 16px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: white !important;
  background-image: none !important;
  /* Disable default image which might be missing */
  text-decoration: none !important;
}

/* Inject FontAwesome icon since default image might be missing/invisible */
.leaflet-control-measure .leaflet-control-measure-toggle::before {
  content: "\f545" !important;
  /* fa-ruler-combined */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  color: #333 !important;
}

.leaflet-control-measure .leaflet-control-measure-toggle:hover {
  background-color: #f7f7f7 !important;
}

/* Fix for measure tool popup on mobile - ensure it's usable */
.leaflet-measure-resultpopup {
  font-family: Inter, sans-serif !important;
  min-width: 200px !important;
  z-index: 12000 !important;
}

.leaflet-measure-resultpopup .tasks {
  margin: 12px 0 0 0 !important;
  text-align: center !important;
}

.leaflet-measure-resultpopup .btn {
  display: inline-block !important;
  padding: 8px 16px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.42857143 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #333 !important;
  background-color: #F2AF29 !important;
  /* Standard yellow button */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/**** DataTables Styling (Chromium UI) ****/
/* position of the datatables */
.datatables {
  @apply ml-0 !important;
}

/* dt-buttons container */
.dt-buttons {
  @apply flex flex-row gap-4 mb-4 !important;
}

/* Style More data button (matches Map tab styling) */
.btn.btn-info,
.dt-button.buttons-colvis {
  @apply h-16 px-6 py-4 rounded-lg text-center text-gColDarkText bg-gColGray2 font-sans cursor-pointer !important;
}

.btn.btn-info:hover,
.dt-button.buttons-colvis:hover {
  @apply bg-gColBG2 text-gColGray1 !important;
}

/* Style Download button (matches Data dropdown styling) */
.btn.btn-primary,
.dt-button.buttons-collection {
  @apply h-16 px-6 py-4 rounded-lg text-center text-gColDarkText bg-iColYellow font-sans cursor-pointer !important;
}

.btn.btn-primary:hover,
.dt-button.buttons-collection:hover {
  @apply bg-gColBG2 text-gColGray1 !important;
}

/* dt-collapsible btn */
.dt-button-collection>*:nth-child(1) {
  @apply flex flex-col py-4 px-12 place-content-center !important;
}

/* info and stats of datatable */
.dataTables_info {
  @apply max-xl:invisible -mt-54 w-fit ml-264 h-16 px-8 pt-4 pb-4 mb-8 rounded-2xl bg-iColBlue text-3xl !important;
}

/* pagination */
.dataTables_paginate {
  @apply pt-16 rounded-2xl place-self-center !important;
}

/* background of table header */
.table th {
  @apply bg-gColBG3 !important;
}

.table th:nth-child(1) {
  @apply rounded-l-2xl !important;
}

/* label of table header */
.sorting {
  @apply text-gColWhiteText text-lg md:text-2xl font-sans !important;
}

/* table cell */
.table td {
  @apply bg-gColGray1 text-gColDarkText text-lg md:text-xl border-gColBorder p-2 !important;
}

/* selected line */
.table dataTable>tr.odd.selected,
.table dataTable>tr.even.selected {
  @apply shadow-iColYellow !important;
}

/* Mobile Data Cards */
.mobile-data-card {
  @apply bg-white p-4 rounded-xl shadow-sm border border-gray-100 mb-3 !important;
}

.mobile-data-card h4 {
  @apply text-lg font-semibold text-gColDarkText m-0 mb-1 !important;
}

.mobile-data-card .card-subtitle {
  @apply text-sm text-gColGray4 m-0 mb-2 italic !important;
}

.mobile-data-card .card-row {
  @apply flex justify-between py-1 border-b border-gray-50 last:border-0 !important;
}

.mobile-data-card .card-label {
  @apply text-xs font-semibold text-gColGray3 uppercase tracking-wider !important;
}

.mobile-data-card .card-value {
  @apply text-sm text-gColDarkText font-medium text-right !important;
}

.mobile-data-card img {
  @apply w-full h-40 object-cover rounded-lg mb-3 !important;
}

/* Force Leaflet controls to bottom edge in WebkitUI (only for left-side controls) */
/* Note: .leaflet-bottom.leaflet-right positioning is handled separately above with console toggle clearance */
.leaflet-bottom.leaflet-left {
  bottom: 0 !important;
  /* Ensure it respects safe area but sits flush otherwise */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 0 !important;
}

/* Specific fix for attribution and scale to likely remove any default gaps */
.leaflet-control-attribution,
.leaflet-control-scale {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ============================================
   Mobile Data View - Simple Summary Interface
   ============================================ */

/* Empty state styling */
.mobile-data-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

/* Download button styling */
.mobile-download-btn,
.mobile-download-btn.btn {
  background: #2FACBC !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mobile-download-btn:hover {
  background: #259EAD !important;
}

/* Data Overlay Container */
#mobileDataOverlay {
  background: white !important;
}

/* Fixed Header */
.data-overlay-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  min-height: 56px;
}

.data-overlay-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.data-overlay-header .btn-mobile-close-icon {
  position: absolute;
  right: 16px;
}

/* Tab Bar */
.data-tab-bar {
  display: flex;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  padding: 0 8px;
  position: sticky;
  top: 56px;
  z-index: 9;
}

.data-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.data-tab:hover {
  color: #374151;
}

.data-tab.active {
  color: #2FACBC;
  border-bottom-color: #2FACBC;
}

.data-tab-label {
  white-space: nowrap;
}

.data-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #E5E7EB;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

.data-tab.active .data-tab-count {
  background: #2FACBC;
  color: white;
}

/* Loading State */
.data-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: #F3F4F6;
}

.data-loader-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #2FACBC;
  border-radius: 50%;
  animation: data-spin 0.8s linear infinite;
}

@keyframes data-spin {
  to {
    transform: rotate(360deg);
  }
}

.data-loader-text {
  margin-top: 16px;
  font-size: 14px;
  color: #6B7280;
}

/* Scrollable Content */
.data-content-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Tab Content Panels */
.data-tab-content {
  display: none;
  padding: 16px;
}

.data-tab-content.active {
  display: block;
}

/* Empty State */
.data-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.data-empty-icon {
  font-size: 48px;
  color: #D1D5DB;
  margin-bottom: 16px;
}

.data-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.data-empty-subtitle {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* Results Header */
.data-results-header {
  padding: 0 0 12px 0;
}

.data-results-count {
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}

/* Cards Container */
.data-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Observation Card */
.data-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.data-card:active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.data-card.expanded {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.data-card-header {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
}

/* Card Image */
.data-card-image {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F4F6;
}

.data-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.data-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 20px;
}

/* Card Info */
.data-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-card-title {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-card-subtitle {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IUCN Badges */
.data-card-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-critical {
  background: #FEE2E2;
  color: #DC2626;
}

.badge-endangered {
  background: #FFEDD5;
  color: #EA580C;
}

.badge-vulnerable {
  background: #FEF3C7;
  color: #D97706;
}

.badge-near-threatened {
  background: #FEF9C3;
  color: #CA8A04;
}

.badge-least-concern {
  background: #DCFCE7;
  color: #16A34A;
}

.badge-data-deficient {
  background: #E5E7EB;
  color: #6B7280;
}

.badge-not-evaluated {
  background: #F3F4F6;
  color: #9CA3AF;
}

.badge-default {
  background: #E5E7EB;
  color: #6B7280;
}

/* Expand Indicator */
.data-card-expand {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  transition: transform 0.2s ease;
}

.data-card.expanded .data-card-expand {
  transform: rotate(180deg);
}

/* Card Details (Expandable) */
.data-card-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}

.data-card.expanded .data-card-details {
  max-height: 500px;
  border-top-color: #F3F4F6;
}

.data-card-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: #FAFAFA;
}

.data-card-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-card-detail-label {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-card-detail-value {
  font-size: 13px;
  color: #374151;
  word-break: break-word;
}

.data-card-no-details {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: #9CA3AF;
  font-style: italic;
  margin: 0;
}

/* Relationship Card Specific */
.data-card-relationship .data-card-placeholder {
  color: #2FACBC;
}

/* Legacy Feed Styles (kept for backwards compatibility) */
.mobile-bio-feed-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: white !important;
  border-bottom: 1px solid #F3F4F6 !important;
}

.mobile-bio-feed-item:last-child {
  border-bottom: none !important;
}

.feed-img-container {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #F9FAFB !important;
}

.feed-img-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.feed-img-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #D1D5DB !important;
}

.feed-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.feed-title {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #111827 !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-subtitle {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  color: #4B5563 !important;
  font-style: italic !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-meta {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: #9CA3AF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-action {
  margin-left: 12px !important;
  color: #D1D5DB !important;
}

/**** Gallery Mobile ****/

/* Shiny uiOutput wrapper inside gallery overlay must fill parent */
#mobileGalleryOverlay .flex-1 > .shiny-html-output {
  height: 100%;
}

.gallery-mobile-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Landing state */
.gallery-mobile-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 16px;
}

.gallery-mobile-logo {
  height: 48px;
  margin-bottom: 32px;
}

.gallery-mobile-search-container {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Added scoped styles for Gallery module only to match Chromium Desktop without breaking Forager */
#galleryResults .gallery-mobile-search-wrapper,
#galleryLanding .gallery-mobile-search-wrapper,
#nexusResults .gallery-mobile-search-wrapper,
#nexusLanding .gallery-mobile-search-wrapper {
  height: 64px;
  border-radius: 32px;
}

#galleryResults .gallery-mobile-search-btn,
#galleryLanding .gallery-mobile-search-btn,
#nexusResults .gallery-mobile-search-btn,
#nexusLanding .gallery-mobile-search-btn {
  height: 64px;
  width: 64px;
  min-width: 64px;
  border-radius: 0 32px 32px 0 !important;
}

#galleryResults .gallery-mobile-clear-btn,
#galleryLanding .gallery-mobile-clear-btn,
#nexusResults .gallery-mobile-clear-btn,
#nexusLanding .gallery-mobile-clear-btn {
  height: 64px;
  width: 64px;
  min-width: 64px;
}

/* Gallery stop search button — matches forager mobile stop */
#galleryStopSearchBtn,
#nexusStopSearchBtn {
  height: 64px;
  width: 64px;
  min-width: 64px;
  border: 0 !important;
  border-radius: 0 !important;
  background: #dc3545 !important;
  color: white !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

#galleryResults input[type="text"],
#galleryLanding input[type="text"],
#nexusResults textArea,
#nexusLanding input[type="text"] {
  font-size: 24px;
  padding-left: 20px;
  height: 64px;
}

/* Add an inline class for Relationship dropdowns */
.gallery-mobile-dropdown-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  min-width: 120px;
}

.gallery-mobile-dropdown-inline .smart-select .item-inner {
  padding-right: 8px !important;
  /* give space for selection */
}

.gallery-mobile-search-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 48px;
  border-radius: 24px;
  border: 1px solid #D3D3D3;
  background: #F7F9FC;
  overflow: visible;
}

.gallery-mobile-search-wrapper .form-group {
  flex: 1;
  margin-bottom: 0;
}

.gallery-mobile-search-wrapper input[type="text"] {
  background: transparent;
  border: 0;
  color: #464F60;
  font-size: 16px;
  width: 100%;
  outline: none;
  padding-left: 16px;
  height: 48px;
}

.gallery-mobile-search-wrapper input[type="text"]::placeholder {
  color: #708794;
}

.gallery-mobile-search-wrapper input[type="text"]:focus {
  outline: none;
  box-shadow: none !important;
}

.gallery-mobile-search-btn {
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 0 24px 24px 0 !important;
  border: 0 !important;
  cursor: pointer;
  background-color: #F2AF29 !important;
  color: white !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-mobile-clear-wrapper {
  display: flex;
}

.gallery-mobile-clear-btn {
  height: 48px;
  width: 40px;
  min-width: 40px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #708794 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Relationship section on landing */
.gallery-mobile-relationship-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  width: 100%;
}

.gallery-mobile-filter-label {
  color: #464F60;
  font-size: 13px;
  margin-bottom: 4px;
}

.gallery-mobile-relationship-section .form-group {
  margin-bottom: 0;
  width: 100%;
}

.gallery-mobile-relationship-section .control-label {
  display: none;
}

.gallery-mobile-relationship-section select {
  background: #F7F9FC;
  border: 1px solid #D3D3D3;
  color: #464F60;
  font-size: 14px;
  border-radius: 24px;
  height: 44px;
  padding: 0 16px;
  cursor: pointer;
  width: 100%;
}

.gallery-mobile-relationship-section select:focus {
  outline: none;
  box-shadow: none !important;
}

/* Results state */
.gallery-mobile-results {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gallery-mobile-results-search {
  padding: 12px 16px;
}

.gallery-mobile-filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 8px;
}

.gallery-mobile-filter-item {
  display: flex;
  flex-direction: column;
}

.gallery-mobile-filter-item .form-group {
  margin-bottom: 0;
  width: 100%;
}

.gallery-mobile-filter-item .control-label {
  display: none;
}

.gallery-mobile-filter-item select {
  background: #F7F9FC;
  border: 1px solid #D3D3D3;
  color: #464F60;
  font-size: 14px;
  border-radius: 24px;
  height: 40px;
  padding: 0 16px;
  cursor: pointer;
  width: 100%;
}

.gallery-mobile-filter-item select:focus {
  outline: none;
  box-shadow: none !important;
}

/* Loading */
.gallery-mobile-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.gallery-mobile-loading-text {
  color: #708794;
  font-size: 14px;
  margin-top: 16px;
}

/* Image grid - responsive masonry columns */
.gallery-mobile-grid {
  padding: 8px 16px 16px;
  column-count: 1;
  column-gap: 12px;
}

@media (min-width: 640px) {
  .gallery-mobile-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .gallery-mobile-grid {
    column-count: 3;
  }
}

@media (min-width: 1400px) {
  .gallery-mobile-grid {
    column-count: 4;
  }
}

/* Shared card classes (chromium CSS not loaded on webkit) */
.gallery-card {
  border-radius: 8px;
  overflow: hidden;
  background-color: #1f2937;
  break-inside: avoid;
  margin-bottom: 12px;
}

.gallery-card-img-wrapper {
  cursor: pointer;
}

.gallery-card-image {
  width: 100%;
  display: block;
  object-fit: cover;
}

.gallery-card-info {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}

.gallery-card-species {
  color: #E9EAF5;
  font-size: 16px;
  font-style: italic;
}

.gallery-card-attribution {
  color: #708794;
  font-size: 13px;
  line-height: 1.3;
  margin-top: 4px;
}

/* No results */
.gallery-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

/* Infinite scroll sentinel */
.gallery-sentinel {
  height: 1px;
  width: 100%;
}

/* Lightbox - full screen on mobile */
.gallery-mobile-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.95);
}

.gallery-mobile-lightbox.gallery-lightbox-open {
  display: flex;
}

.gallery-mobile-lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 11001;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 0;
  cursor: pointer;
}

.gallery-mobile-lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 95vw;
  max-height: 90vh;
  padding: 16px;
}

.gallery-mobile-lightbox-img {
  max-width: 95vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

.gallery-mobile-lightbox-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  gap: 4px;
}

.gallery-mobile-lightbox-species {
  color: #E9EAF5;
  font-size: 16px;
  font-style: italic;
}

.gallery-mobile-lightbox-attribution {
  color: #708794;
  font-size: 13px;
}

.gallery-mobile-lightbox-source {
  color: #F2AF29;
  font-size: 13px;
  margin-top: 4px;
  text-decoration: none;
}

/* Bootstrap modals must appear above webkit overlays (z-10500) */
.modal-backdrop {
  z-index: 10600 !important;
}
.modal {
  z-index: 10700 !important;
}

/* G4: Alias for chromium class used in shared lightbox code */
.gallery-lightbox-source-link {
  color: #F2AF29;
  font-size: 13px;
  margin-top: 4px;
  text-decoration: none;
}

/* Gallery mobile search button wrapper */
.gallery-mobile-search-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
}

/**** Nexus Mobile CSS (N1) ****/

/* Nexus mobile results container */
.nexus-mobile-results {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

/* Nexus mobile top panel (search bar + filters) */
.nexus-mobile-top-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 16px 8px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  flex-shrink: 0;
  z-index: 10;
}

/* Nexus mobile filters row */
.nexus-mobile-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* Nexus mobile dropdown inline */
.nexus-mobile-dropdown-inline {
  flex: 1;
  min-width: 120px;
}

.nexus-mobile-dropdown-inline .selectize-control {
  min-height: 36px;
}

.nexus-mobile-dropdown-inline .selectize-dropdown {
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Nexus mobile nav tabs (Map tab + Data dropdown) */
.nexus-mobile-nav-tabs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.nexus-mobile-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 8px;
  background: #F3F4F6;
  color: #374151;
  cursor: pointer;
  min-height: 36px;
  border: none;
}

.nexus-mobile-nav-btn:active {
  background: #E5E7EB;
}

.nexus-mobile-data-btn {
  font-size: 14px;
}

/* Nexus mobile D3 canvas */
.nexus-mobile-canvas {
  flex: 1;
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  position: relative;
  touch-action: pan-x pan-y pinch-zoom;
}

.nexus-mobile-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Nexus mobile data table content (N7) */
.nexus-mobile-table-content {
  width: 100%;
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px;
}

.nexus-mobile-table-content table {
  font-size: 0.8rem;
}

.nexus-mobile-table-content .dataTables_wrapper {
  width: 100%;
}

.nexus-mobile-table-content .dataTables_paginate {
  margin-top: 12px;
}

.nexus-mobile-table-content .dataTables_paginate .paginate_button {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
}

/* Nexus mobile back-to-diagram button */
.nexus-mobile-back-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  margin: 16px auto;
  background: #F3F4F6;
  border-radius: 12px;
  color: #374151;
  cursor: pointer;
  font-size: 16px;
  border: none;
  min-width: 56px;
  min-height: 56px;
}

.nexus-mobile-back-btn:active {
  background: #E5E7EB;
}

/* Nexus mobile bottom control buttons */
.nexus-mobile-bottom-controls {
  position: absolute;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
}

.nexus-mobile-control-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid #E5E7EB;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #374151;
  font-size: 18px;
  padding: 0;
}

.nexus-mobile-control-btn:active {
  background: #F3F4F6;
}

/* Nexus stats bar */
.nexus-stats-bar {
  display: none;
  padding: 6px 12px;
  background: #F9FAFB;
  border-top: 1px solid #E5E7EB;
  font-size: 12px;
  color: #6B7280;
  flex-shrink: 0;
}

.nexus-stats-bar:not(.hidden) {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Nexus tooltip (shared with chromium but needs mobile position) */
.nexus-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 100;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}