/* =========================================================
   EXACT RESPONSIVE BREAKPOINTS (ZERO OVERLAP GUARANTEE)
   ========================================================= */
/* EXACT RESPONSIVE BREAKPOINTS (ZERO OVERLAP GUARANTEE) */
@media (min-width: 769px) {
  #desktop-message-dock,
  .desktop-message-dock {
    left: calc(50% + 240px) !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 520px) !important;
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .desktop-left-column.maps-hidden ~ #desktop-message-dock,
  .desktop-left-column.maps-hidden ~ .desktop-message-dock,
  body.sidebar-closed #desktop-message-dock,
  body.sidebar-closed .desktop-message-dock {
    left: 50% !important;
    max-width: 92vw !important;
  }
}

@media (min-width: 769px) and (max-width: 1440px) {
  #desktop-message-dock,
  .desktop-message-dock {
    left: calc(50% + 220px) !important;
    transform: translateX(-50%) !important;
  }
  .dock-container {
    padding: 8px 14px !important;
    gap: 8px !important;
  }
}

@media (min-width: 769px) and (max-width: 1280px) {
  #desktop-message-dock,
  .desktop-message-dock {
    left: calc(50% + 200px) !important;
    transform: translateX(-50%) !important;
  }
  .dock-container {
    padding: 6px 10px !important;
    gap: 6px !important;
  }
}

@media (max-width: 1440px) {
  .header-center-desktop {
    left: 500px !important;
    right: 430px !important;
    max-width: 480px !important;
  }
}

@media (max-width: 1280px) {
  .header-center-desktop {
    left: 496px !important;
    right: 430px !important;
    max-width: 340px !important;
  }
  .header-center-desktop #search-input {
    padding-right: 80px !important;
    font-size: 0.78rem !important;
  }
  .btn-label-desktop {
    display: none !important;
  }
  .header-center-desktop #btn-near-me,
  .header-center-desktop #btn-toggle-filters {
    padding: 0 6px !important;
    width: 30px !important;
    justify-content: center !important;
  }
  .desktop-message-dock {
    left: 50% !important;
    max-width: calc(100vw - 520px) !important;
  }
  .dock-filter-pill span {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 1100px) {
  .header-center-desktop {
    left: 496px !important;
    right: 430px !important;
    max-width: 260px !important;
  }
}

/* User Directive: Remove borders from all buttons and adaptation badges in left panel place cards */
.place-card .btn-action,
.place-card .btn-action-primary,
.place-card .btn-action-secondary,
.place-card .btn-action-companion,
.place-card .btn-action-rate,
.place-card .btn-reaction,
.place-card .feature-badge,
.place-card .feature-badge.accessible,
.place-card .place-tag {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.place-card .btn-action:hover,
.place-card .btn-action-primary:hover,
.place-card .btn-action-secondary:hover,
.place-card .btn-action-companion:hover,
.place-card .btn-action-companion:active,
.place-card .btn-action-companion:focus {
  background: #15803d !important;
  color: #ffffff !important;
  transform: none !important;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.45) !important;
}


/* User Directives:
   1. Remove borders from object title container (.place-header, .place-title, .place-tag) in place cards.
   2. Darken place card action button background by 1 tone (#e2e8f0) and hover (#cbd5e1).
*/
.place-card .place-header,
.place-card .place-title,
.place-card .place-tag {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.place-card .btn-action,
.place-card .btn-action-primary,
.place-card .btn-action-secondary,
.place-card .btn-action-companion,
.place-card .btn-action-rate {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.place-card .btn-action:hover,
.place-card .btn-action-primary:hover,
.place-card .btn-action-secondary:hover,
.place-card .btn-action-companion:hover,
.place-card .btn-action-rate:hover {
  background: #e2e8f0 !important;
  color: #000000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* User Directive: Make 'Show on map' and 'Request companion' buttons have font-weight: 400 (exact same as 'Rate') */
.place-card .btn-action,
.place-card .btn-action-primary,
.place-card .btn-action-secondary,
.place-card .btn-action-companion,
.place-card .btn-action-rate {
  font-weight: 400 !important;
}


/* User Directives:
   1. ALL text inside place cards should have thin font (font-weight: 400).
   2. Place card buttons must have the EXACT SAME background color as the title header box (#f8fafc).
*/
.place-card,
.place-card *,
.place-card .place-title,
.place-card .place-address,
.place-card .place-tag,
.place-card .feature-badge,
.place-card .btn-action,
.place-card .btn-action-primary,
.place-card .btn-action-secondary,
.place-card .btn-action-companion,
.place-card .btn-action-rate,
.place-card .btn-reaction,
.place-card .rating-score-text {
  font-weight: 400 !important;
}

.place-card .btn-action,
.place-card .btn-action-primary,
.place-card .btn-action-secondary,
.place-card .btn-action-companion,
.place-card .btn-action-rate {
  background: #f8fafc !important;
  color: #0f172a !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.place-card .btn-action:hover,
.place-card .btn-action-primary:hover,
.place-card .btn-action-secondary:hover,
.place-card .btn-action-companion:hover,
.place-card .btn-action-rate:hover {
  background: #f1f5f9 !important;
  color: #000000 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* User Directive: Make place cards compact (reduced height and tighter padding) */
.place-card {
  padding: 6px 10px !important;
  gap: 3px !important;
  margin-bottom: 6px !important;
  border-radius: 12px !important;
}

.place-card .place-header {
  padding: 4px 8px !important;
  margin-bottom: 3px !important;
  border-radius: 8px !important;
  gap: 6px !important;
}

.place-card .place-title {
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
}

.place-card .place-address {
  font-size: 0.71rem !important;
  line-height: 1.2 !important;
  margin: 1px 0 !important;
}

.place-card .place-rating-section {
  margin-top: 3px !important;
  padding-top: 3px !important;
  gap: 4px !important;
}

.place-card .place-actions {
  margin-top: 3px !important;
  padding-top: 3px !important;
  gap: 4px !important;
}

.place-card .btn-action {
  height: 27px !important;
  font-size: 0.70rem !important;
  border-radius: 7px !important;
  padding: 0 6px !important;
}

.place-card .btn-action-icon-only {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
}


/* User Directive:
   1. Normal state: place cards have NO border and NO shadow.
   2. Hover state: hover effect (blue tint border & soft glow shadow) appears ONLY on mouse hover.
*/
.place-card {
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

.place-card:hover {
  background: rgba(255, 255, 255, 0.98) !important;
  border-color: rgba(0, 172, 236, 0.35) !important;
  box-shadow: 0 4px 16px rgba(0, 172, 236, 0.12) !important;
}

.place-card.active {
  background: rgba(0, 172, 236, 0.06) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 16px rgba(0, 172, 236, 0.18) !important;
}


/* User Directives: Safe 2-Column Split Auth Modal Design (Borderless Buttons) */
#auth-modal 

#auth-modal .auth-split-layout {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

#auth-modal .auth-left-form {
  flex: 1.1 !important;
  min-width: 300px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

#auth-modal .auth-right-info {
  flex: 1 !important;
  background: #f8fafc !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-left: 1px solid #e2e8f0 !important;
}

#auth-modal button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#auth-modal input,
#auth-modal select {
  border: none !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  box-sizing: border-box !important;
}

#auth-modal input:focus,
#auth-modal select:focus {
  background: #ffffff !important;
  outline: 2px solid var(--primary, #0284c7) !important;
}

@media (max-width: 720px) {
  #auth-modal .auth-split-layout {
    flex-direction: column !important;
  }
  #auth-modal .auth-right-info {
    display: none !important;
  }
  #auth-modal 
}


/* User Directives: Floating Labels & Tab Switching for Auth Modal */
#auth-modal 

#auth-modal .auth-split-layout {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

#auth-modal .auth-left-form {
  flex: 1.1 !important;
  min-width: 310px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

#auth-modal .auth-right-info {
  flex: 1 !important;
  min-width: 300px !important;
  background: #f8fafc !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-left: 1px solid #e2e8f0 !important;
}

#auth-modal button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Floating Label Input Group Styling */
#auth-modal .input-group {
  position: relative !important;
  margin-bottom: 14px !important;
}

#auth-modal .input-group input,
#auth-modal .input-group select {
  width: 100% !important;
  height: 46px !important;
  padding: 18px 12px 6px 12px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

#auth-modal .input-group label {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  font-size: 0.82rem !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
  background: #ffffff !important;
  padding: 0 4px !important;
  border-radius: 4px !important;
  font-family: var(--font-firago) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#auth-modal .input-group input:focus,
#auth-modal .input-group select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

#auth-modal .input-group input:focus + label,
#auth-modal .input-group input:not(:placeholder-shown) + label,
#auth-modal .input-group select:focus + label,
#auth-modal .input-group select:valid + label {
  top: 0 !important;
  transform: translateY(-50%) scale(0.85) !important;
  transform-origin: left center !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  background: #ffffff !important;
}

@media (max-width: 720px) {
  #auth-modal .auth-split-layout {
    flex-direction: column !important;
  }
  #auth-modal .auth-right-info {
    display: none !important;
  }
  #auth-modal 
}


/* Floating Labels System for Auth Modal (No default Username/Password placeholder text) */
#auth-modal .input-group {
  position: relative !important;
  margin-bottom: 16px !important;
}

#auth-modal .input-group input,
#auth-modal .input-group select {
  width: 100% !important;
  height: 48px !important;
  padding: 16px 14px 6px 14px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}

#auth-modal .input-group label {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  font-size: 0.84rem !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  padding: 0 4px !important;
  font-family: var(--font-firago) !important;
  margin: 0 !important;
  line-height: 1 !important;
}

#auth-modal .input-group input:focus,
#auth-modal .input-group select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

#auth-modal .input-group input:focus + label,
#auth-modal .input-group input:not(:placeholder-shown) + label,
#auth-modal .input-group select:focus + label,
#auth-modal .input-group select:valid + label {
  top: 0 !important;
  transform: translateY(-50%) scale(0.82) !important;
  transform-origin: left center !important;
  color: #0284c7 !important;
  font-weight: 600 !important;
  background: #ffffff !important;
}


/* User Directives for Auth Modal:
   1. Thin font (font-weight: 400) for ALL elements inside #auth-modal.
   2. Active tab indicator styling.
   3. Floating labels on all inputs (login & register) without any default placeholders.
*/
#auth-modal,
#auth-modal *,
#auth-modal .scanner-title,
#auth-modal label,
#auth-modal input,
#auth-modal select,
#auth-modal button,
#auth-modal h3,
#auth-modal h4,
#auth-modal h5,
#auth-modal p,
#auth-modal span {
  font-weight: 400 !important;
}

#auth-modal 

#auth-modal .auth-split-layout {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
}

#auth-modal .auth-left-form {
  flex: 1.1 !important;
  min-width: 310px !important;
  padding: 24px !important;
  box-sizing: border-box !important;
}

#auth-modal .auth-right-info {
  flex: 1 !important;
  min-width: 300px !important;
  background: #f8fafc !important;
  padding: 24px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  border-left: 1px solid #e2e8f0 !important;
}

#auth-modal button {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Auth Tab Button Styles */
#auth-modal .auth-tab-btn {
  flex: 1 !important;
  padding: 8px 12px !important;
  background: transparent !important;
  color: #64748b !important;
  border: none !important;
  border-radius: 9px !important;
  font-weight: 400 !important;
  font-family: var(--font-firago) !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

#auth-modal .auth-tab-btn.active {
  background: #ffffff !important;
  color: #0284c7 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
  font-weight: 400 !important;
}

/* Floating Label System for ALL Auth Inputs (Login & Registration) */
#auth-modal .input-group {
  position: relative !important;
  margin-bottom: 14px !important;
}

#auth-modal .input-group input,
#auth-modal .input-group select {
  width: 100% !important;
  height: 46px !important;
  padding: 18px 12px 6px 12px !important;
  font-size: 15px !important;
  border-radius: 12px !important;
  border: 1px solid #cbd5e1 !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  font-weight: 400 !important;
}

#auth-modal .input-group label {
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #64748b !important;
  font-size: 0.82rem !important;
  pointer-events: none !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  padding: 0 4px !important;
  font-family: var(--font-firago) !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-weight: 400 !important;
}

#auth-modal .input-group input:focus,
#auth-modal .input-group select:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12) !important;
}

#auth-modal .input-group input:focus + label,
#auth-modal .input-group input:not(:placeholder-shown) + label,
#auth-modal .input-group select:focus + label,
#auth-modal .input-group select:valid + label {
  top: 0 !important;
  transform: translateY(-50%) scale(0.82) !important;
  transform-origin: left center !important;
  color: #0284c7 !important;
  font-weight: 400 !important;
  background: #ffffff !important;
}

@media (max-width: 720px) {
  #auth-modal .auth-split-layout {
    flex-direction: column !important;
  }
  #auth-modal .auth-right-info {
    display: none !important;
  }
  #auth-modal 
}

/* ==========================================================================
   MASTER MODAL & OVERLAY STYLES (Single Source of Truth)
   ========================================================================== */

/* 1. DESKTOP MODAL RULES (min-width: 769px) */
@media (min-width: 769px) {
  /* Overlay Backdrop */
  .scanner-modal-overlay,
  #cabinet-modal.scanner-modal-overlay,
  #chat-modal.scanner-modal-overlay,
  #chat-list-modal.scanner-modal-overlay,
  #auth-modal.scanner-modal-overlay,
  #scanner-modal.scanner-modal-overlay,
  #barrier-report-modal.scanner-modal-overlay,
  #voice-describer-modal.scanner-modal-overlay,
  #companion-request-modal.scanner-modal-overlay,
  #volunteer-accept-modal.scanner-modal-overlay,
  #public-profile-modal.scanner-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: auto !important;
    z-index: 210000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .scanner-modal-overlay.active,
  #cabinet-modal.scanner-modal-overlay.active,
  #chat-modal.scanner-modal-overlay.active,
  #chat-list-modal.scanner-modal-overlay.active,
  #auth-modal.scanner-modal-overlay.active,
  #scanner-modal.scanner-modal-overlay.active,
  #barrier-report-modal.scanner-modal-overlay.active,
  #voice-describer-modal.scanner-modal-overlay.active,
  #companion-request-modal.scanner-modal-overlay.active,
  #volunteer-accept-modal.scanner-modal-overlay.active,
  #public-profile-modal.scanner-modal-overlay.active {
    display: flex !important;
  }

  /* Desktop Standard Cards */
  .scanner-modal-content,
  #cabinet-modal .scanner-modal-content,
  #chat-modal .scanner-modal-content,
  #chat-list-modal .scanner-modal-content,
  #scanner-modal .scanner-modal-content,
  #barrier-report-modal .scanner-modal-content,
  #voice-describer-modal .scanner-modal-content,
  #companion-request-modal .scanner-modal-content,
  #volunteer-accept-modal .scanner-modal-content,
  #public-profile-modal .scanner-modal-content {
    position: relative !important;
    width: 92% !important;
    max-width: 520px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(18, 18, 20, 0.25) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    z-index: 210001 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
    padding: 24px !important;
  }

  /* Desktop Auth Modal 2-Column Split Layout */
  #auth-modal .scanner-modal-content {
    position: relative !important;
    width: 92% !important;
    max-width: 780px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: 0 20px 50px rgba(18, 18, 20, 0.2) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    z-index: 210001 !important;
    max-height: 90vh !important;
  }

  #auth-modal .auth-split-layout {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
  }

  #auth-modal .auth-left-form {
    flex: 1.1 !important;
    min-width: 310px !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }

  #auth-modal .auth-right-info {
    display: flex !important;
    flex: 1 !important;
    min-width: 300px !important;
    background: #f8fafc !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    border-left: 1px solid #e2e8f0 !important;
  }

  /* Desktop Dark Theme */
  body.dark-theme .scanner-modal-content,
  body.dark-theme #cabinet-modal .scanner-modal-content,
  body.dark-theme #chat-modal .scanner-modal-content,
  body.dark-theme #chat-list-modal .scanner-modal-content,
  body.dark-theme #auth-modal .scanner-modal-content,
  body.dark-theme #scanner-modal .scanner-modal-content,
  body.dark-theme #barrier-report-modal .scanner-modal-content {
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }
}

/* 2. MOBILE MODAL RULES (max-width: 768px) */
@media (max-width: 768px) {
  /* Overlay Backdrop */
  .scanner-modal-overlay,
  #cabinet-modal.scanner-modal-overlay,
  #chat-modal.scanner-modal-overlay,
  #chat-list-modal.scanner-modal-overlay,
  #auth-modal.scanner-modal-overlay,
  #scanner-modal.scanner-modal-overlay,
  #barrier-report-modal.scanner-modal-overlay,
  #voice-describer-modal.scanner-modal-overlay,
  #companion-request-modal.scanner-modal-overlay,
  #volunteer-accept-modal.scanner-modal-overlay,
  #public-profile-modal.scanner-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(18, 18, 20, 0.6) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    pointer-events: auto !important;
    z-index: 210000 !important;
    display: none !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-top: auto !important;
    padding-bottom: calc(125px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box !important;
  }

  .scanner-modal-overlay.active,
  #cabinet-modal.scanner-modal-overlay.active,
  #chat-modal.scanner-modal-overlay.active,
  #chat-list-modal.scanner-modal-overlay.active,
  #auth-modal.scanner-modal-overlay.active,
  #scanner-modal.scanner-modal-overlay.active,
  #barrier-report-modal.scanner-modal-overlay.active,
  #voice-describer-modal.scanner-modal-overlay.active,
  #companion-request-modal.scanner-modal-overlay.active,
  #volunteer-accept-modal.scanner-modal-overlay.active,
  #public-profile-modal.scanner-modal-overlay.active {
    display: flex !important;
  }

  /* Mobile Content Floating Sheet */
  .scanner-modal-content,
  #cabinet-modal .scanner-modal-content,
  #chat-modal .scanner-modal-content,
  #chat-list-modal .scanner-modal-content,
  #auth-modal .scanner-modal-content,
  #scanner-modal .scanner-modal-content,
  #barrier-report-modal .scanner-modal-content,
  #voice-describer-modal .scanner-modal-content,
  #companion-request-modal .scanner-modal-content,
  #volunteer-accept-modal .scanner-modal-content,
  #public-profile-modal .scanner-modal-content {
    pointer-events: auto !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 18px 16px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 16px 40px rgba(18, 18, 20, 0.22) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
    z-index: 210001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  body.dark-theme .scanner-modal-content,
  body.dark-theme #cabinet-modal .scanner-modal-content,
  body.dark-theme #chat-modal .scanner-modal-content,
  body.dark-theme #chat-list-modal .scanner-modal-content,
  body.dark-theme #auth-modal .scanner-modal-content,
  body.dark-theme #scanner-modal .scanner-modal-content,
  body.dark-theme #barrier-report-modal .scanner-modal-content {
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
  }

  /* Mobile Chat Modal Specifics */
  #chat-modal .scanner-modal-content {
    height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #chat-modal #chat-messages-container {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #chat-modal #chat-composer-form {
    flex-shrink: 0 !important;
    margin-top: auto !important;
    padding: 10px 14px !important;
    border-top: 1px solid var(--border, #e2e8f0) !important;
    background: var(--card-bg, #ffffff) !important;
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    border-bottom-left-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
  }

  /* Mobile Sidebar Toggle (Map vs List) */
  .sidebar.maps-hidden,
  .desktop-left-column .sidebar.maps-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(100%) !important;
    pointer-events: none !important;
  }

  .sidebar:not(.maps-hidden),
  .desktop-left-column .sidebar:not(.maps-hidden) {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 190px !important;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    height: auto !important;
    max-height: calc(100dvh - 205px) !important;
    background: var(--card-bg, #ffffff) !important;
    z-index: 200000 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    padding: 16px 14px 20px 14px !important;
    border-radius: 24px !important;
    box-shadow: 0 16px 40px rgba(18, 18, 20, 0.22) !important;
    border: 1px solid rgba(226, 232, 240, 0.95) !important;
  }

  /* Mobile List View Place Cards Border & Styling */
  .place-card,
  #places-list .place-card {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    background-color: #ffffff !important;
    background: #ffffff !important;
    box-shadow: 0 2px 10px rgba(18, 18, 20, 0.04) !important;
    margin-bottom: 10px !important;
    padding: 12px 14px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  }

  .place-card.active,
  #places-list .place-card.active {
    border-color: #0284c7 !important;
    background: #f0f9ff !important;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15) !important;
  }

  body.dark-theme .place-card,
  body.dark-theme #places-list .place-card {
    border: 1px solid #334155 !important;
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
  }

  body.dark-theme .place-card.active,
  body.dark-theme #places-list .place-card.active {
    border-color: #38bdf8 !important;
    background: #121214 !important;
  }
}