/* ==========================================================================
   APPLE MAPS DESIGN SYSTEM: VERTICAL RAIL & DRAWER LAYOUT
   ========================================================================== */

/* Hide Apple Desktop Rail on Mobile by default */
.apple-desktop-rail {
  display: none !important;
}

@media (min-width: 769px) {
  /* 1. Headerless Canvas on Desktop */
  header {
    display: none !important;
  }

  /* 2. Hide Legacy Desktop Dock */
  #desktop-message-dock,
  .desktop-message-dock {
    display: none !important;
  }

  /* 3. Fullscreen Map Canvas */
  .app-container {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .map-container,
  #map {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1 !important;
  }

  /* 4. Apple Maps Vertical Rail */
  .apple-desktop-rail {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 240px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border-right: 1px solid rgba(226, 232, 240, 0.9);
    z-index: 10005;
    display: flex !important;
    flex-direction: column;
    padding: 16px 12px 14px 12px;
    box-sizing: border-box;
    box-shadow: 4px 0 30px rgba(18, 18, 20, 0.05);
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s ease;
    font-family: var(--font-firago);
    user-select: none;
  }

  body.dark-theme .apple-desktop-rail {
    background: rgba(18, 18, 20, 0.94);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);
  }

  /* Collapsed State (68px icon-only mode) */
  .apple-desktop-rail.collapsed {
    width: 68px;
    padding: 16px 8px 14px 8px;
  }

  /* Rail Top: Logo & Toggle */
  .apple-rail-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 16px 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 12px;
    position: relative;
  }
  body.dark-theme .apple-rail-top {
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .apple-rail-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    transition: opacity 0.2s ease;
  }
  .apple-desktop-rail.collapsed .apple-rail-brand {
    display: none !important;
  }

  .apple-rail-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
  }
  .apple-rail-logo-img {
    height: 32px;
    width: auto;
    max-width: 135px;
    object-fit: contain;
    display: block;
  }
  body.dark-theme .apple-rail-logo-img {
    filter: brightness(1.1);
  }
  body.dark-theme .apple-rail-logo-link {
    background: #fff;
    border-radius: 8px;
    padding: 3px 6px;
  }

  .apple-rail-beta-badge {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--primary, #0284c7);
    background: rgba(2, 105, 153, 0.1);
    padding: 2px 6px;
    border-radius: 6px;
    letter-spacing: 0.5px;
  }
  body.dark-theme .apple-rail-beta-badge {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
  }

  .apple-rail-toggle-btn {
    background: #f1f5f9;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .apple-rail-toggle-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  body.dark-theme .apple-rail-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
  }
  body.dark-theme .apple-rail-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #f8fafc;
  }

  .apple-desktop-rail.collapsed .apple-rail-top {
    justify-content: center;
    padding-bottom: 12px;
  }
  .apple-desktop-rail.collapsed .apple-rail-chevron {
    transform: rotate(180deg);
  }
  .apple-rail-collapsed-logo {
    display: none;
  }
  .apple-desktop-rail.collapsed .apple-rail-toggle-btn {
    width: 31px;
    height: 31px;
    padding: 0;
    background: transparent;
  }
  .apple-desktop-rail.collapsed .apple-rail-toggle-btn:hover,
  body.dark-theme .apple-desktop-rail.collapsed .apple-rail-toggle-btn,
  body.dark-theme .apple-desktop-rail.collapsed .apple-rail-toggle-btn:hover {
    background: transparent;
  }
  .apple-desktop-rail.collapsed .apple-rail-chevron {
    display: none;
  }
  .apple-desktop-rail.collapsed .apple-rail-collapsed-logo {
    display: block;
    width: 31px;
    height: 31px;
    object-fit: contain;
  }

  /* Navigation Items */
  .apple-rail-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .apple-rail-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    height: 42px;
    padding: 0 10px;
    border-radius: 12px;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: var(--font-firago);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
    position: relative;
    text-align: left;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .apple-rail-item:hover {
    background: rgba(2, 105, 153, 0.07);
    color: var(--primary, #0284c7);
  }
  .apple-rail-item.active {
    background: rgba(2, 105, 153, 0.12);
    color: var(--primary, #0284c7);
    font-weight: 600;
  }
  body.dark-theme .apple-rail-item {
    color: #f5f5f7 !important;
    font-weight: 600 !important;
  }
  body.dark-theme .apple-rail-item:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }
  body.dark-theme .apple-rail-item.active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  .apple-rail-item-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .apple-rail-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.2s ease;
  }

  .apple-desktop-rail.collapsed .apple-rail-item {
    justify-content: center;
    padding: 0;
    width: 52px;
    margin: 0 auto;
  }
  .apple-desktop-rail.collapsed .apple-rail-item-label,
  .apple-desktop-rail.collapsed .apple-rail-hub-arrow {
    display: none !important;
  }

  /* Hub Flyout Popover */
  .rail-hub-flyout {
    position: absolute;
    left: calc(100% + 12px);
    top: -20px;
    width: 320px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px) saturate(190%);
    -webkit-backdrop-filter: blur(24px) saturate(190%);
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 20px;
    padding: 10px 8px;
    box-shadow: 0 20px 45px rgba(18, 18, 20, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-10px) scale(0.95);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 20005;
  }
  .rail-hub-flyout.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0) scale(1);
  }
  body.dark-theme .rail-hub-flyout {
    background: rgba(18, 18, 20, 0.96);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  }

  .rail-hub-flyout-header {
    padding: 6px 12px 10px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary, #0284c7);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 6px;
    font-family: var(--font-firago);
  }
  body.dark-theme .rail-hub-flyout-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #38bdf8;
  }

  /* 8. About Inclusive Map Rail Card */
  .apple-rail-about-card {
    margin-top: 8px;
    margin-bottom: 6px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    box-sizing: border-box;
  }
  body.dark-theme .apple-rail-about-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .apple-rail-about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    gap: 6px;
  }
  .apple-rail-about-header:hover {
    background: rgba(0, 0, 0, 0.03);
  }
  body.dark-theme .apple-rail-about-header:hover {
    background: rgba(255, 255, 255, 0.04);
  }
  .apple-rail-about-header-left {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
  }
  .apple-rail-about-icon {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
  }
  .apple-rail-about-title {
    font-family: var(--font-firago);
    font-size: 0.74rem;
    font-weight: 700;
    color: #0f172a;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.35;
    word-break: break-word;
  }
  body.dark-theme .apple-rail-about-title {
    color: #f8fafc;
  }
  .apple-rail-about-chevron {
    font-size: 0.62rem;
    color: #94a3b8;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    margin-left: 2px;
  }
  .apple-rail-about-card.open .apple-rail-about-chevron {
    transform: rotate(180deg);
  }
  .apple-rail-about-body {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 11px;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, padding 0.25s ease;
  }
  .apple-rail-about-card.open .apple-rail-about-body {
    max-height: 800px !important;
    opacity: 1;
    padding: 0 11px 12px 11px;
  }
  .apple-rail-about-desc {
    font-family: var(--font-firago);
    font-size: 0.72rem;
    line-height: 1.45;
    color: #475569;
    margin: 0 0 10px 0;
    text-align: left;
  }
  body.dark-theme .apple-rail-about-desc {
    color: #94a3b8;
  }
  .apple-rail-about-btn {
    width: 100% !important;
    height: 32px !important;
    min-height: 32px !important;
    background: var(--primary, #0284c7) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--font-firago) !important;
    font-size: 0.74rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 3px 10px rgba(2, 105, 153, 0.25) !important;
    margin-top: 10px !important;
    flex-shrink: 0 !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
  .apple-rail-about-btn:hover {
    background: #025780 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(2, 105, 153, 0.35) !important;
  }
  body.dark-theme .apple-rail-about-btn {
    background: #0284c7 !important;
  }
  body.dark-theme .apple-rail-about-btn:hover {
    background: #38bdf8 !important;
    color: #0f172a !important;
  }

  /* When rail is collapsed (68px width) */
  .apple-desktop-rail.rail-collapsed .apple-rail-about-card {
    display: none;
  }

  /* Companion Destination Selection Styles */
  .drawer-companion-selected-card {
    background: #f0fdf4;
    border: 1.5px solid rgba(34, 197, 94, 0.3);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  body.dark-theme .drawer-companion-selected-card {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.25);
  }
  .drawer-comp-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }
  .drawer-comp-card-badge {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #15803d;
    font-family: var(--font-firago);
    letter-spacing: 0.02em;
  }
  body.dark-theme .drawer-comp-card-badge {
    color: #4ade80;
  }
  .drawer-comp-change-btn {
    background: none;
    border: none;
    color: #0284c7;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-firago);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
  }
  .drawer-comp-change-btn:hover {
    background: rgba(2, 132, 199, 0.1);
    text-decoration: underline;
  }
  .drawer-comp-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-firago);
    margin: 0 0 3px 0;
  }
  body.dark-theme .drawer-comp-card-title {
    color: #f8fafc;
  }
  .drawer-comp-card-addr {
    font-size: 0.76rem;
    color: #64748b;
    font-family: var(--font-firago);
  }
  body.dark-theme .drawer-comp-card-addr {
    color: #94a3b8;
  }

  .drawer-companion-picker-card {
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 12px;
  }
  body.dark-theme .drawer-companion-picker-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .drawer-comp-pick-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
  }
  .drawer-comp-pick-icon {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 2px;
  }
  .drawer-comp-pick-title {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-firago);
  }
  body.dark-theme .drawer-comp-pick-title {
    color: #f8fafc;
  }
  .drawer-comp-pick-sub {
    margin: 2px 0 0 0;
    font-size: 0.74rem;
    color: #64748b;
    font-family: var(--font-firago);
    line-height: 1.35;
  }
  body.dark-theme .drawer-comp-pick-sub {
    color: #94a3b8;
  }
  .drawer-comp-pick-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    color: #94a3b8;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--font-firago);
  }
  .drawer-comp-browse-btn {
    width: 100%;
    height: 32px;
    background: #f1f5f9;
    border: 1px dashed #cbd5e1;
    border-radius: 10px;
    color: #334155;
    font-family: var(--font-firago);
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
    margin-top: 10px;
  }
  .drawer-comp-browse-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #94a3b8;
  }
  body.dark-theme .drawer-comp-browse-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
  }
  body.dark-theme .drawer-comp-browse-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
  }

  /* Bottom Section */
  .apple-rail-bottom {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  body.dark-theme .apple-rail-bottom {
    border-top-color: rgba(255, 255, 255, 0.08);
  }

  /* Volunteer Switcher Toggle Switch Container */
  .apple-rail-volunteer-box {
    width: 100%;
    padding: 2px 0;
  }


  /* Authenticated User Quick Navigation Menu (Between Toggle and Avatar) */
  .apple-rail-auth-menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    padding: 6px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    margin: 2px 0;
  }
  body.dark-theme .apple-rail-auth-menu {
    border-top-color: rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }

  .apple-rail-auth-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 500;
    font-family: var(--font-firago);
    cursor: pointer;
    transition: all 0.16s ease;
    box-sizing: border-box;
    position: relative;
    text-align: left;
    white-space: nowrap;
  }
  .apple-rail-auth-menu-item:hover {
    background: rgba(2, 105, 153, 0.08);
    color: var(--primary, #0284c7);
  }
  .apple-rail-auth-menu-item.logout:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
  }
  body.dark-theme .apple-rail-auth-menu-item {
    color: #cbd5e1;
  }
  body.dark-theme .apple-rail-auth-menu-item:hover {
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
  }
  body.dark-theme .apple-rail-auth-menu-item.logout:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
  }

  .apple-rail-auth-menu-item .auth-menu-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .apple-rail-auth-menu-item .auth-menu-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .apple-desktop-rail.collapsed .apple-rail-auth-menu-item {
    justify-content: center;
    padding: 0;
    width: 44px;
    margin: 0 auto;
  }
  .apple-desktop-rail.collapsed .apple-rail-auth-menu-item .auth-menu-label {
    display: none !important;
  }

  /* ==========================================================================
     FLOATING APPLE SEGMENTED MAP MODE SWITCHER (PLACES vs VOLUNTEER MODE)
     ========================================================================== */
  .apple-map-mode-pill-container {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9995;
    pointer-events: auto;
    user-select: none;
    transition: left 0.32s cubic-bezier(0.16, 1, 0.3, 1), 
                bottom 0.28s ease, 
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.2s ease;
  }

  /* Center on visible map area on desktop when rail (240px) + drawer (450px) is open */
  @media (min-width: 769px) {
    .apple-map-mode-pill-container {
      /* When left column (drawer) is open, center of the remaining map */
      left: calc(50% + 345px);
    }

    /* When desktop left column (drawer) is closed, center of the remaining map */
    .desktop-left-column.drawer-closed ~ .apple-map-mode-pill-container,
    body:has(.desktop-left-column.drawer-closed) .apple-map-mode-pill-container {
      left: calc(50% + 120px);
    }

    /* When rail is collapsed (68px) and drawer is closed */
    body:has(.apple-desktop-rail.collapsed):has(.desktop-left-column.drawer-closed) .apple-map-mode-pill-container {
      left: calc(50% + 34px);
    }

    /* When rail is collapsed (68px) and drawer is open (450px) */
    body:has(.apple-desktop-rail.collapsed) .apple-map-mode-pill-container {
      left: calc(50% + 259px);
    }
  }

  /* Mobile responsive positioning */
  @media (max-width: 768px) {
    .apple-map-mode-pill-container {
      left: 50%;
      transform: translateX(-50%);
      bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
  }

  /* Glass Pill Container */
  .apple-map-mode-pill {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 9999px;
    padding: 4px;
    gap: 3px;
    box-shadow: 0 12px 34px -4px rgba(15, 23, 42, 0.16), 
                0 3px 10px rgba(0, 0, 0, 0.05);
  }
  body.dark-theme .apple-map-mode-pill {
    background: rgba(24, 24, 27, 0.88);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 40px -4px rgba(0, 0, 0, 0.6), 
                0 4px 12px rgba(0, 0, 0, 0.4);
  }

  /* Each Segment Button */
  .apple-map-mode-segment {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 16px;
    border-radius: 9999px;
    border: none;
    background: transparent;
    color: #64748b;
    font-family: var(--font-firago);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
  }
  .apple-map-mode-segment:hover {
    color: #1e293b;
    background: rgba(0, 0, 0, 0.04);
  }
  body.dark-theme .apple-map-mode-segment {
    color: #94a3b8;
  }
  body.dark-theme .apple-map-mode-segment:hover {
    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
  }
  .apple-map-mode-segment:active {
    transform: scale(0.97);
  }

  .apple-map-mode-segment .apple-mode-icon {
    font-size: 19px;
    transition: all 0.24s ease;
  }

  /* 1. Places Active (Default) */
  .apple-map-mode-segment#btn-mode-places.active {
    background: #ffffff;
    color: #0284c7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  }
  body.dark-theme .apple-map-mode-segment#btn-mode-places.active {
    background: rgba(255, 255, 255, 0.14);
    color: #38bdf8;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }

  /* 2. Volunteer Active (Vibrant Green) */
  .apple-map-mode-segment#btn-mode-volunteer.active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px rgba(22, 163, 74, 0.38), 0 1px 3px rgba(22, 163, 74, 0.2);
  }
  .apple-map-mode-segment#btn-mode-volunteer.active .apple-mode-icon {
    color: #ffffff;
    transform: scale(1.05);
  }

  /* Live Green Pulse Dot inside Volunteer Segment */
  .apple-mode-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
    display: inline-block;
    margin-left: 2px;
  }
  .apple-map-mode-segment#btn-mode-volunteer.active .apple-mode-pulse-dot {
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    animation: apple-mode-radar 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
  }
  @keyframes apple-mode-radar {
    0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.9);
    }
    70% {
      box-shadow: 0 0 0 6px rgba(255, 255, 255, 0), 0 0 10px rgba(255, 255, 255, 0.8);
    }
    100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 6px rgba(255, 255, 255, 0.9);
    }
  }

  /* Cabinet / Profile Card */
  .apple-rail-profile-box {
    width: 100%;
  }
  .apple-rail-auth-btn {
    width: 100%;
    height: 40px;
    border-radius: 13px;
    border: none;
    background: var(--primary, #0284c7);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: var(--font-firago);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(2, 105, 153, 0.25);
    transition: all 0.2s ease;
  }
  .apple-rail-auth-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  .apple-desktop-rail.collapsed .apple-rail-auth-btn {
    width: 44px;
    margin: 0 auto;
  }
  .apple-desktop-rail.collapsed .apple-rail-auth-text {
    display: none !important;
  }

  .apple-rail-user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: #f8fafc;
    border-radius: 14px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    cursor: pointer;
    transition: background 0.18s ease;
  }
  .apple-rail-user-card:hover {
    background: #f1f5f9;
  }
  body.dark-theme .apple-rail-user-card {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.dark-theme .apple-rail-user-card:hover {
    background: rgba(255, 255, 255, 0.09);
  }

  .apple-rail-avatar,
  .apple-rail-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary, #0284c7);
    flex-shrink: 0;
  }
  .apple-rail-user-details {
    flex: 1;
    min-width: 0;
  }
  .apple-rail-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.dark-theme .apple-rail-user-name {
    color: #f8fafc;
  }
  .apple-rail-user-role {
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.dark-theme .apple-rail-user-role {
    color: #94a3b8;
  }

  .apple-rail-user-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .apple-rail-icon-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    cursor: pointer;
    transition: background 0.18s ease;
  }
  .apple-rail-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #0f172a;
  }
  body.dark-theme .apple-rail-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
  }
  .apple-rail-logout-btn:hover {
    color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.1) !important;
  }

  .apple-desktop-rail.collapsed .apple-rail-user-card {
    padding: 4px;
    justify-content: center;
    background: transparent;
    border: none;
  }
  .apple-desktop-rail.collapsed .apple-rail-user-details,
  .apple-desktop-rail.collapsed .apple-rail-user-actions {
    display: none !important;
  }

  /* Settings Strip: Language & Theme */
  .apple-rail-settings-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 2px;
  }
  .apple-rail-lang-group {
    display: flex;
    background: #f1f5f9;
    padding: 2px;
    border-radius: 10px;
    flex: 1;
  }
  body.dark-theme .apple-rail-lang-group {
    background: rgba(255, 255, 255, 0.08);
  }
  .apple-rail-lang-btn {
    flex: 1;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .apple-rail-lang-btn.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  }
  body.dark-theme .apple-rail-lang-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
  }

  .apple-rail-theme-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
    flex-shrink: 0;
  }
  .apple-rail-theme-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  body.dark-theme .apple-rail-theme-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
  }

  .apple-desktop-rail.collapsed .apple-rail-settings-bar {
    flex-direction: column;
    align-items: center;
  }
  .apple-desktop-rail.collapsed .apple-rail-lang-group {
    flex-direction: column;
    width: 44px;
  }

  /* 5. Desktop Left Column (Search & Places Drawer) */
  .desktop-left-column {
    position: fixed !important;
    top: 14px !important;
    bottom: 14px !important;
    left: 252px !important;
    width: 440px !important;
    height: calc(100vh - 28px) !important;
    height: calc(100dvh - 28px) !important;
    z-index: 1000 !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 22px !important;
    box-shadow: 0 12px 36px rgba(18, 18, 20, 0.08) !important;
    overflow: hidden !important;
    transition: left 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s ease, opacity 0.28s ease !important;
  }

  .desktop-left-column.rail-collapsed {
    left: 80px !important;
  }

  .desktop-left-column.drawer-closed {
    transform: translateX(calc(-100% - 280px)) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.dark-theme .desktop-left-column {
    background: rgba(18, 18, 20, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  }

  .desktop-left-column .search-filter-section {
    padding: 16px 16px 12px 16px !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.7) !important;
    background: transparent !important;
  }
  body.dark-theme .desktop-left-column .search-filter-section {
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  }

  .desktop-left-column #search-volunteer-flex-row {
    width: 100% !important;
  }
  .desktop-left-column #mobile-search-target {
    width: 100% !important;
    flex: 1 !important;
  }
  .desktop-left-column #btn-volunteer-toggle {
    display: none !important;
  }
  .desktop-left-column #search-input {
    padding-right: 215px !important;
  }
  .desktop-left-column #site-description-box-desktop,
  .desktop-left-column #site-description-accordion,
  .desktop-left-column .mobile-only-desc {
    display: none !important;
  }

  /* Desktop In-Search Filters Dropdown Window */
  .desktop-left-column #filters-dropdown {
    width: 100% !important;
    box-sizing: border-box !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding: 0 16px;
    background: #f8fafc;
    border: 1px solid transparent;
    border-radius: 18px;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin 0.25s ease, padding 0.25s ease, border-color 0.25s ease;
  }
  .desktop-left-column #filters-dropdown.active {
    max-height: 520px !important;
    overflow-y: auto !important;
    opacity: 1 !important;
    margin-top: 10px !important;
    margin-bottom: 6px !important;
    padding: 14px 16px !important;
    border-color: rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 10px 30px rgba(18, 18, 20, 0.07) !important;
  }
  body.dark-theme .desktop-left-column #filters-dropdown {
    background: rgba(255, 255, 255, 0.05);
  }
  body.dark-theme .desktop-left-column #filters-dropdown.active {
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
  }

  /* Center modals cleanly on desktop */
  .scanner-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100020 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(18, 18, 20, 0.45) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
  }

  .scanner-modal-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .scanner-modal-overlay .scanner-modal-content {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px -15px rgba(18, 18, 20, 0.25) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    max-width: 520px !important;
    width: 90vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    margin: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
  }

  #cabinet-modal .scanner-modal-content {
    max-width: 920px !important;
    width: 92vw !important;
    height: 720px !important;
    max-height: calc(100vh - 80px) !important;
  }

  body.dark-theme .scanner-modal-overlay .scanner-modal-content {
    background: #1c1c1e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.6) !important;
  }

  /* ==========================================================================
     UNIFIED MULTI-VIEW DRAWER STYLING (Desktop)
     ========================================================================== */

  /* 1. Drawer Header */
  .drawer-header {
    height: 52px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
  }
  body.dark-theme .drawer-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 20, 0.6);
  }
  .drawer-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .drawer-header-icon {
    font-size: 1.15rem;
    line-height: 1;
  }
  .drawer-header-title {
    font-family: var(--font-firago);
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    white-space: nowrap;
  }
  body.dark-theme .drawer-header-title {
    color: #f8fafc;
  }
  .drawer-header-close-btn {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .drawer-header-close-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  body.dark-theme .drawer-header-close-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
  }
  body.dark-theme .drawer-header-close-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
  }

  /* 2. Drawer Views Layout */
  .drawer-view {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .drawer-view.active {
    display: flex;
  }
  .drawer-view-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* 3. Secondary Feature / Info Containers */
  .drawer-section-card {
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.dark-theme .drawer-section-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
  }
  .drawer-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .drawer-section-title span {
    font-size: 1.05rem;
  }
  .drawer-section-title h4 {
    font-family: var(--font-firago);
    font-size: 0.88rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }
  body.dark-theme .drawer-section-title h4 {
    color: #f1f5f9;
  }
  .drawer-section-desc {
    font-family: var(--font-firago);
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.45;
    margin: 0;
  }
  body.dark-theme .drawer-section-desc {
    color: #94a3b8;
  }

  /* 4. Chips Grid */
  .drawer-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
  }
  .drawer-chip-btn {
    border: 1px solid rgba(226, 232, 240, 0.9);
    background: #ffffff;
    border-radius: 12px;
    padding: 7px 12px;
    font-family: var(--font-firago);
    font-size: 0.76rem;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: all 0.18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    user-select: none;
  }
  .drawer-chip-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(2, 105, 153, 0.04);
  }
  .drawer-chip-btn.active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(2, 105, 153, 0.35);
  }
  .drawer-chip-btn.active::after {
    content: " ✓";
    font-weight: 800;
    font-size: 0.78rem;
    color: #ffffff;
  }
  body.dark-theme .drawer-chip-btn {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
  }
  body.dark-theme .drawer-chip-btn.active {
    background: var(--primary) !important;
    color: #ffffff !important;
  }

  /* Active Filters Summary Bar */
  .drawer-active-filters-summary {
    background: #f8fafc;
    border: 1px solid rgba(2, 132, 199, 0.2);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  body.dark-theme .drawer-active-filters-summary {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(14, 165, 233, 0.25);
  }
  .drawer-active-filters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  .drawer-active-filters-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--heading);
  }
  .drawer-active-count-pill {
    background: var(--primary);
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 9999px;
  }
  .drawer-active-filters-clear {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s;
  }
  .drawer-active-filters-clear:hover {
    background: rgba(239, 68, 68, 0.1);
  }
  .drawer-active-chips-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .drawer-active-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid rgba(2, 132, 199, 0.25);
    border-radius: 9999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
  }
  body.dark-theme .drawer-active-tag {
    background: rgba(14, 165, 233, 0.2);
    color: #7dd3fc;
    border-color: rgba(14, 165, 233, 0.3);
  }
  .drawer-active-tag-remove {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.72rem;
    font-weight: 800;
    color: inherit;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    opacity: 0.75;
    transition: opacity 0.15s;
  }
  .drawer-active-tag-remove:hover {
    opacity: 1;
  }

  /* 5. Buttons & Actions */
  .drawer-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
  }
  .drawer-btn-primary {
    flex: 1;
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 11px 18px;
    font-family: var(--font-firago);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(2, 105, 153, 0.25);
  }
  .drawer-btn-primary:hover {
    opacity: 0.94;
    transform: translateY(-1px);
  }
  .drawer-btn-primary.full-width {
    width: 100%;
    margin-top: 6px;
  }
  .drawer-btn-secondary {
    background: #f1f5f9;
    color: #334155;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 14px;
    padding: 11px 16px;
    font-family: var(--font-firago);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .drawer-btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
  }
  body.dark-theme .drawer-btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
  }
  .drawer-btn-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 14px;
    padding: 11px 16px;
    font-family: var(--font-firago);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .drawer-btn-danger:hover {
    background: #ef4444;
    color: #ffffff;
  }

  /* 6. Form Controls */
  .drawer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .drawer-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .drawer-form-row {
    display: flex;
    gap: 10px;
  }
  .drawer-form-label {
    font-family: var(--font-firago);
    font-size: 0.76rem;
    font-weight: 600;
    color: #475569;
  }
  body.dark-theme .drawer-form-label {
    color: #94a3b8;
  }
  .drawer-form-input,
  .drawer-form-select,
  .drawer-form-textarea {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 9px 12px;
    font-family: var(--font-firago);
    font-size: 0.82rem;
    color: #0f172a;
    transition: all 0.18s ease;
    outline: none;
  }
  .drawer-form-input:focus,
  .drawer-form-select:focus,
  .drawer-form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(2, 105, 153, 0.12);
  }
  body.dark-theme .drawer-form-input,
  body.dark-theme .drawer-form-select,
  body.dark-theme .drawer-form-textarea {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
    color: #f8fafc;
  }

  /* 7. Companion Banner */
  .drawer-companion-banner {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 16px;
    padding: 12px 16px;
  }
  body.dark-theme .drawer-companion-banner {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
  }
  .drawer-companion-banner-inner {
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .drawer-banner-icon {
    font-size: 1.25rem;
    line-height: 1;
  }
  .drawer-banner-sub {
    font-size: 0.72rem;
    color: #059669;
    font-weight: 600;
  }
  body.dark-theme .drawer-banner-sub {
    color: #34d399;
  }
  .drawer-banner-name {
    margin: 2px 0 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #065f46;
  }
  body.dark-theme .drawer-banner-name {
    color: #6ee7b7;
  }
  .drawer-banner-addr {
    font-size: 0.75rem;
    color: #64748b;
  }

  /* 8. AI Scanner Dropzone & Banner */
  .drawer-upload-box {
    border: 2px dashed rgba(2, 105, 153, 0.35);
    background: rgba(2, 105, 153, 0.03);
    border-radius: 18px;
    padding: 28px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  .drawer-upload-box:hover {
    background: rgba(2, 105, 153, 0.08);
    border-color: var(--primary);
  }
  .drawer-upload-icon {
    font-size: 2.2rem;
    margin-bottom: 6px;
  }
  .drawer-upload-title {
    font-family: var(--font-firago);
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
  }
  body.dark-theme .drawer-upload-title {
    color: #f1f5f9;
  }
  .drawer-upload-sub {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 3px;
  }
  .drawer-info-banner {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 14px;
  }
  body.dark-theme .drawer-info-banner {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.2);
  }
  .drawer-info-icon {
    font-size: 1.25rem;
    line-height: 1;
  }
  .drawer-info-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: #92400e;
  }
  body.dark-theme .drawer-info-title {
    color: #fcd34d;
  }
  .drawer-info-desc {
    font-size: 0.75rem;
    color: #b45309;
    margin-top: 2px;
    line-height: 1.4;
  }
  body.dark-theme .drawer-info-desc {
    color: #fbbf24;
  }

  /* 9. AI Assistant Wrapper */
  /* AI Top Bar & New Chat Button */
  .drawer-ai-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    flex-shrink: 0;
  }
  body.dark-theme .drawer-ai-top-bar {
    background: rgba(255, 255, 255, 0.03);
    border-bottom-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-ai-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #475569;
    font-family: var(--font-firago);
  }
  body.dark-theme .drawer-ai-status {
    color: #94a3b8;
  }
  .drawer-ai-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
    animation: aiPulse 2s infinite ease-in-out;
  }
  @keyframes aiPulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.25); opacity: 1; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.35); }
  }
  .drawer-ai-new-chat-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font-family: var(--font-firago);
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .drawer-ai-new-chat-btn:hover {
    background: #f1f5f9;
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(2, 105, 153, 0.08);
  }
  body.dark-theme .drawer-ai-new-chat-btn {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
  }
  body.dark-theme .drawer-ai-new-chat-btn:hover {
    background: #27272a;
    border-color: var(--primary);
    color: #ffffff;
  }
  .drawer-ai-new-chat-btn .material-symbols-rounded {
    font-size: 15px;
  }

  .drawer-ai-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .drawer-ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .drawer-ai-bubble {
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 16px;
    font-family: var(--font-firago);
    font-size: 0.82rem;
    line-height: 1.45;
  }
  .drawer-ai-bubble.ai {
    align-self: flex-start;
    background: #f1f5f9;
    color: #0f172a;
    border-bottom-left-radius: 4px;
  }
  body.dark-theme .drawer-ai-bubble.ai {
    background: #1c1c1e;
    color: #f1f5f9;
  }
  .drawer-ai-bubble.user {
    align-self: flex-end;
    background: var(--primary);
    color: #ffffff;
    border-bottom-right-radius: 4px;
  }
  .drawer-ai-prompts {
    display: flex;
    gap: 6px;
    padding: 8px 16px;
    overflow-x: auto;
    border-top: 1px solid rgba(226, 232, 240, 0.7);
    flex-shrink: 0;
  }
  body.dark-theme .drawer-ai-prompts {
    border-top-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-prompt-chip {
    white-space: nowrap;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    padding: 5px 12px;
    font-size: 0.73rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .drawer-prompt-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(2, 105, 153, 0.05);
  }
  body.dark-theme .drawer-prompt-chip {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
  }
  .drawer-ai-input-bar {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    background: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
  }
  body.dark-theme .drawer-ai-input-bar {
    border-top-color: rgba(255, 255, 255, 0.08);
    background: rgba(18, 18, 20, 0.9);
  }
  .drawer-ai-input {
    flex: 1;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 9px 12px;
    font-family: var(--font-firago);
    font-size: 0.82rem;
    outline: none;
    transition: all 0.18s ease;
  }
  .drawer-ai-input:focus {
    border-color: var(--primary);
    background: #ffffff;
  }
  body.dark-theme .drawer-ai-input {
    background: #1c1c1e;
    color: #ffffff;
  }
  .drawer-ai-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--primary);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .drawer-ai-send-btn:hover {
    opacity: 0.92;
    transform: scale(1.04);
  }

  /* 10. Hub Services Cards */
  .drawer-hub-cards-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .drawer-hub-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 16px;
    text-decoration: none;
    transition: all 0.2s ease;
  }
  .drawer-hub-card:hover {
    background: #ffffff;
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(2, 105, 153, 0.12);
    transform: translateY(-1px);
  }
  body.dark-theme .drawer-hub-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  body.dark-theme .drawer-hub-card:hover {
    background: rgba(255, 255, 255, 0.08);
  }
  .drawer-hub-icon-box {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  body.dark-theme .drawer-hub-icon-box {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.1);
  }
  .drawer-hub-content {
    flex: 1;
    min-width: 0;
  }
  .drawer-hub-title {
    font-family: var(--font-firago);
    font-size: 0.84rem;
    font-weight: 700;
    color: #0f172a;
  }
  body.dark-theme .drawer-hub-title {
    color: #f1f5f9;
  }
  .drawer-hub-desc {
    font-size: 0.74rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body.dark-theme .drawer-hub-desc {
    color: #94a3b8;
  }
  .drawer-hub-arrow {
    font-size: 0.95rem;
    color: #94a3b8;
    font-weight: 700;
  }

  /* 11. Auth Tabs & Section */
  .drawer-auth-tabs {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 14px;
  }
  body.dark-theme .drawer-auth-tabs {
    background: rgba(255, 255, 255, 0.06);
  }
  .drawer-auth-tab {
    flex: 1;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: var(--font-firago);
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .drawer-auth-tab.active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  }
  body.dark-theme .drawer-auth-tab.active {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
  }
  .drawer-auth-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .drawer-auth-switch-text {
    text-align: center;
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 4px;
  }
  .drawer-auth-switch-text a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    margin-left: 4px;
  }
  /* ==========================================================================
     APPLE-GRADE AUTHENTICATION FORMS & ROLE SELECTOR
     ========================================================================== */
  .apple-auth-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 6px;
  }
  .apple-auth-role-header {
    margin-bottom: 4px;
  }
  .apple-auth-role-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--heading, #0f172a);
    font-family: var(--font-firago);
  }
  .apple-auth-role-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 6px;
  }
  @media (max-width: 480px) {
    .apple-auth-role-selector {
      grid-template-columns: 1fr;
    }
  }
  .apple-role-tile {
    position: relative;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 14px;
    padding: 12px 10px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
  }
  .apple-role-tile:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    transform: translateY(-1px);
  }
  .apple-role-tile.active {
    background: #ffffff;
    border-color: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.15);
  }
  .apple-role-tile[data-role="volunteer"].active {
    border-color: #16a34a;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.15);
  }
  .apple-role-tile-icon-wrap {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    transition: all 0.2s ease;
  }
  .apple-role-tile-icon-wrap.volunteer {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
  }
  .apple-role-tile.active .apple-role-tile-icon-wrap.member {
    background: #0284c7;
    color: #ffffff;
  }
  .apple-role-tile.active .apple-role-tile-icon-wrap.volunteer {
    background: #16a34a;
    color: #ffffff;
  }
  .apple-role-tile-content {
    flex: 1;
    min-width: 0;
  }
  .apple-role-tile-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-firago);
    line-height: 1.25;
  }
  .apple-role-tile-desc {
    font-size: 0.68rem;
    color: #64748b;
    font-family: var(--font-firago);
    margin-top: 2px;
    line-height: 1.25;
  }
  .apple-role-tile-check {
    font-size: 16px;
    color: #cbd5e1;
    transition: all 0.2s ease;
    flex-shrink: 0;
  }
  .apple-role-tile.active .apple-role-tile-check {
    color: #0284c7;
  }
  .apple-role-tile[data-role="volunteer"].active .apple-role-tile-check {
    color: #16a34a;
  }
  body.dark-theme .apple-role-tile {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
  }
  body.dark-theme .apple-role-tile:hover {
    background: rgba(255, 255, 255, 0.07);
  }
  body.dark-theme .apple-role-tile.active {
    background: rgba(2, 132, 199, 0.15);
    border-color: #38bdf8;
  }
  body.dark-theme .apple-role-tile[data-role="volunteer"].active {
    background: rgba(22, 163, 74, 0.15);
    border-color: #4ade80;
  }
  body.dark-theme .apple-role-tile-title {
    color: #f8fafc;
  }
  body.dark-theme .apple-role-tile-desc {
    color: #94a3b8;
  }

  /* Field Container with Inside Icons */
  .apple-auth-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .apple-auth-field-wrap .apple-auth-input-icon {
    position: absolute;
    left: 14px;
    font-size: 20px;
    color: #94a3b8;
    pointer-events: none;
    transition: color 0.2s ease;
  }
  .apple-auth-input {
    width: 100%;
    height: 48px;
    padding: 0 42px 0 44px;
    border-radius: 14px;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.86rem;
    color: #0f172a;
    font-family: var(--font-firago);
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
  }
  .apple-auth-input::placeholder {
    color: #94a3b8;
    font-size: 0.84rem;
  }
  .apple-auth-input:focus {
    border-color: #0284c7;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.12);
  }
  .apple-auth-field-wrap:focus-within .apple-auth-input-icon {
    color: #0284c7;
  }
  .apple-auth-eye-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
  }
  .apple-auth-eye-btn:hover {
    color: #334155;
  }
  .apple-auth-eye-btn .material-symbols-rounded {
    font-size: 20px;
  }
  body.dark-theme .apple-auth-input {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
  }
  body.dark-theme .apple-auth-input::placeholder {
    color: #64748b;
  }
  body.dark-theme .apple-auth-input:focus {
    border-color: #38bdf8;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
  }
  body.dark-theme .apple-auth-field-wrap .apple-auth-input-icon,
  body.dark-theme .apple-auth-eye-btn {
    color: #64748b;
  }
  body.dark-theme .apple-auth-field-wrap:focus-within .apple-auth-input-icon {
    color: #38bdf8;
  }
  body.dark-theme .apple-auth-eye-btn:hover {
    color: #e2e8f0;
  }

  /* Options Row (Remember me / Terms) */
  .apple-auth-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 4px 0;
  }
  .apple-auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.78rem;
    color: #475569;
    font-family: var(--font-firago);
    cursor: pointer;
    user-select: none;
    line-height: 1.35;
  }
  .apple-auth-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: #0284c7;
    cursor: pointer;
  }
  body.dark-theme .apple-auth-checkbox-label {
    color: #94a3b8;
  }

  /* Submit Button (Black / Dark Apple Pill style matching user screenshot) */
  .apple-auth-submit-btn {
    width: 100%;
    height: 48px;
    border-radius: 14px;
    border: none;
    background: #0f172a;
    color: #ffffff;
    font-family: var(--font-firago);
    font-size: 0.9rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 6px;
  }
  .apple-auth-submit-btn:hover {
    background: #1e293b;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
  }
  .apple-auth-submit-btn:active {
    transform: scale(0.98);
  }
  body.dark-theme .apple-auth-submit-btn {
    background: #0284c7;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.3);
  }
  body.dark-theme .apple-auth-submit-btn:hover {
    background: #0369a1;
  }

  /* 12. Cabinet View Components */
  .drawer-cabinet-profile-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: #f8fafc;
    border: 1px solid rgba(226, 232, 240, 0.8);
    border-radius: 18px;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  }
  body.dark-theme .drawer-cabinet-profile-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-cabinet-header-top {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }
  .drawer-cabinet-name {
    font-size: 1.02rem;
    font-weight: 700;
    color: #0f172a;
    font-family: var(--font-firago);
    margin: 0 0 4px 0;
    line-height: 1.25;
  }
  body.dark-theme .drawer-cabinet-name {
    color: #f8fafc;
  }
  .drawer-cabinet-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--font-firago);
    line-height: 1;
  }
  .drawer-cabinet-badge.vol {
    background: rgba(34, 197, 94, 0.12);
    color: #15803d;
    border: 1px solid rgba(34, 197, 94, 0.25);
  }
  body.dark-theme .drawer-cabinet-badge.vol {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
  }
  .drawer-cabinet-badge.member {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
    border: 1px solid rgba(2, 132, 199, 0.2);
  }
  body.dark-theme .drawer-cabinet-badge.member {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.3);
  }
  .drawer-cabinet-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }
  .drawer-cabinet-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--primary);
  }
  .drawer-avatar-camera-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    background: var(--primary);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background-color 0.15s ease;
  }
  .drawer-avatar-camera-btn:hover {
    transform: scale(1.15);
    background: #0284c7;
  }
  body.dark-theme .drawer-avatar-camera-btn {
    border-color: #1c1c1e;
  }
  .drawer-cabinet-info {
    flex: 1;
    min-width: 0;
  }
  .drawer-cabinet-edit-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    font-family: var(--font-firago);
    font-size: 0.74rem;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: all 0.18s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
  }
  .drawer-cabinet-edit-btn:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    color: #0f172a;
    transform: translateY(-1px);
  }
  body.dark-theme .drawer-cabinet-edit-btn {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
  }
  body.dark-theme .drawer-cabinet-edit-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }

  /* Cabinet Segmented Nav Tabs */
  .drawer-cabinet-nav-tabs {
    display: flex;
    gap: 6px;
    background: #f1f5f9;
    padding: 4px;
    border-radius: 14px;
    margin-bottom: 12px;
    border: 1px solid rgba(226, 232, 240, 0.8);
  }
  body.dark-theme .drawer-cabinet-nav-tabs {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-cabinet-nav-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    font-family: var(--font-firago);
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    transition: all 0.18s ease;
  }
  .drawer-cabinet-nav-tab:hover {
    color: #0f172a;
  }
  .drawer-cabinet-nav-tab.active {
    background: #ffffff;
    color: var(--primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  }
  body.dark-theme .drawer-cabinet-nav-tab {
    color: #94a3b8;
  }
  body.dark-theme .drawer-cabinet-nav-tab:hover {
    color: #f1f5f9;
  }
  body.dark-theme .drawer-cabinet-nav-tab.active {
    background: #1c1c1e;
    color: #38bdf8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }

  /* Drawer Form Checkbox & Subgroups */
  .drawer-form-checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    font-size: 0.8rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 12px;
    cursor: pointer;
  }
  body.dark-theme .drawer-form-checkbox-row {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-form-checkbox-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
  }
  .drawer-subgroup-box {
    padding: 12px;
    background: #f1f5f9;
    border-radius: 14px;
    border: 1px dashed #cbd5e1;
    margin-bottom: 12px;
  }
  body.dark-theme .drawer-subgroup-box {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
  }

  .drawer-cabinet-name {
    font-family: var(--font-firago);
    font-size: 0.94rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }
  body.dark-theme .drawer-cabinet-name {
    color: #ffffff;
  }
  .drawer-cabinet-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 4px;
    background: #e2e8f0;
    color: #475569;
  }
  .drawer-cabinet-badge.vol {
    background: rgba(34, 197, 94, 0.15);
    color: #166534;
  }
  body.dark-theme .drawer-cabinet-badge.vol {
    background: rgba(34, 197, 94, 0.25);
    color: #86efac;
  }
  .drawer-vol-switch-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 16px;
  }
  body.dark-theme .drawer-vol-switch-card {
    background: rgba(34, 197, 94, 0.08);
    border-color: rgba(34, 197, 94, 0.2);
  }
  .drawer-vol-switch-title {
    font-size: 0.84rem;
    font-weight: 700;
    color: #166534;
  }
  body.dark-theme .drawer-vol-switch-title {
    color: #86efac;
  }
  .drawer-vol-switch-desc {
    font-size: 0.74rem;
    color: #15803d;
    margin-top: 2px;
  }
  body.dark-theme .drawer-vol-switch-desc {
    color: #bbf7d0;
  }
  .drawer-switch-label {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
  }
  .drawer-switch-label input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .drawer-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #cbd5e1;
    transition: .3s;
    border-radius: 24px;
  }
  .drawer-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
  }
  .drawer-switch-label input:checked + .drawer-switch-slider {
    background-color: #22c55e;
  }
  .drawer-switch-label input:checked + .drawer-switch-slider:before {
    transform: translateX(20px);
  }
  .drawer-counter-pill {
    background: #e2e8f0;
    color: #475569;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
  }
  body.dark-theme .drawer-counter-pill {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
  }

  /* Cabinet Status Subfilter Tabs */
  .drawer-status-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 10px;
  }
  .drawer-status-tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    background: #f1f5f9;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 10px;
    font-family: var(--font-firago);
    font-size: 0.73rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.16s ease;
  }
  .drawer-status-tab-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .drawer-status-tab:hover {
    background: #e2e8f0;
    color: #1c1c1e;
  }
  .drawer-tab-badge {
    background: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 9999px;
  }
  
  /* Status Tab Active Colors */
  #drawer-subfilter-offered.active {
    background: #eab308 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(234, 179, 8, 0.35);
  }
  #drawer-subfilter-offered.active .drawer-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  #drawer-subfilter-active.active {
    background: #22c55e !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(34, 197, 94, 0.35);
  }
  #drawer-subfilter-active.active .drawer-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  #drawer-subfilter-pending.active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
  }
  #drawer-subfilter-pending.active .drawer-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  #drawer-subfilter-completed.active {
    background: #64748b !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(100, 116, 139, 0.35);
  }
  #drawer-subfilter-completed.active .drawer-tab-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }

  body.dark-theme .drawer-status-tab {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
  }
  body.dark-theme .drawer-status-tab:hover {
    background: rgba(255, 255, 255, 0.12);
  }

  /* Status Hint Box */
  .drawer-subfilter-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 0.74rem;
    color: #64748b;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  body.dark-theme .drawer-subfilter-hint {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
  }

  .drawer-missions-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .drawer-missions-empty {
    text-align: center;
    padding: 36px 16px;
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  body.dark-theme .drawer-missions-empty {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.1);
  }

  /* Enhanced Drawer Mission Cards */
  .drawer-mission-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s, box-shadow 0.15s;
  }
  .drawer-mission-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  }
  body.dark-theme .drawer-mission-card {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  }

  .drawer-mission-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
  }
  .drawer-mission-title-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .drawer-mission-title {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
  }
  body.dark-theme .drawer-mission-title {
    color: #f1f5f9;
  }
  .drawer-mission-type-tag {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 500;
  }
  body.dark-theme .drawer-mission-type-tag {
    color: #94a3b8;
  }

  .drawer-mission-status {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
    white-space: nowrap;
  }
  .drawer-mission-status.offered {
    background: rgba(234, 179, 8, 0.15);
    color: #ca8a04;
  }
  .drawer-mission-status.active {
    background: rgba(34, 197, 94, 0.15);
    color: #16a34a;
  }
  .drawer-mission-status.pending {
    background: rgba(37, 99, 235, 0.15);
    color: #2563eb;
  }
  .drawer-mission-status.completed {
    background: rgba(100, 116, 139, 0.15);
    color: #64748b;
  }

  .drawer-cabinet-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 16px 0 18px 0;
    border: none;
  }
  body.dark-theme .drawer-cabinet-divider {
    background: rgba(255, 255, 255, 0.08);
  }

  .drawer-mission-place-row {
    display: flex;
    align-items: center;
    gap: 6px;
    transition: opacity 0.15s ease;
  }
  .drawer-mission-place-row:hover {
    opacity: 0.85;
  }
  .drawer-mission-place-icon {
    display: none !important;
  }
  .drawer-mission-map-badge {
    font-size: 0.8rem;
    opacity: 0.75;
    transition: transform 0.15s ease;
  }
  .drawer-mission-place-row:hover .drawer-mission-map-badge {
    transform: scale(1.2);
    opacity: 1;
  }
  .drawer-mission-subtags {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .drawer-mission-duration-tag {
    font-size: 0.68rem;
    background: rgba(0, 0, 0, 0.05);
    color: #64748b;
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 600;
  }
  body.dark-theme .drawer-mission-duration-tag {
    background: rgba(255, 255, 255, 0.08);
    color: #94a3b8;
  }

  .drawer-mission-details {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 10px 12px;
  }
  body.dark-theme .drawer-mission-details {
    background: rgba(255, 255, 255, 0.04);
  }
  .drawer-mission-detail-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.74rem;
    color: #475569;
  }
  body.dark-theme .drawer-mission-detail-row {
    color: #cbd5e1;
  }
  .drawer-detail-icon {
    font-size: 0.78rem;
    opacity: 0.85;
    flex-shrink: 0;
  }
  .drawer-detail-label {
    font-weight: 600;
    color: #64748b;
    font-size: 0.72rem;
    flex-shrink: 0;
  }
  body.dark-theme .drawer-detail-label {
    color: #94a3b8;
  }
  .drawer-detail-text {
    word-break: break-word;
    line-height: 1.35;
    color: #0f172a;
    font-weight: 500;
  }
  body.dark-theme .drawer-detail-text {
    color: #f1f5f9;
  }

  .drawer-mission-comment-box {
    margin-top: 4px;
    background: rgba(234, 179, 8, 0.08);
    border: 1px dashed rgba(234, 179, 8, 0.4);
    border-radius: 10px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  body.dark-theme .drawer-mission-comment-box {
    background: rgba(234, 179, 8, 0.06);
    border-color: rgba(234, 179, 8, 0.25);
  }
  .drawer-comment-header {
    display: flex;
    align-items: center;
    gap: 5px;
  }
  .drawer-comment-icon {
    font-size: 0.8rem;
  }
  .drawer-comment-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b45309;
  }
  body.dark-theme .drawer-comment-label {
    color: #fcd34d;
  }
  .drawer-comment-text {
    font-size: 0.74rem;
    color: #451a03;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
  }
  body.dark-theme .drawer-comment-text {
    color: #fef3c7;
  }

  /* Rail User Chat & Logout Action Buttons */
  .apple-rail-chat-btn,
  .apple-rail-logout-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: none;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.18s ease;
    flex-shrink: 0;
  }
  .apple-rail-chat-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
  }
  .apple-rail-logout-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
  }
  body.dark-theme .apple-rail-chat-btn,
  body.dark-theme .apple-rail-logout-btn {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
  }
  body.dark-theme .apple-rail-chat-btn:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
  }
  body.dark-theme .apple-rail-logout-btn:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
  }
  .rail-mini-unread-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 7px;
    height: 7px;
    background: #ef4444;
    border-radius: 50%;
    border: 1px solid #ffffff;
  }

  /* Role Selection Modal (Google Registration) */
  #google-role-modal .scanner-modal-content {
    max-width: 500px !important;
    width: 92% !important;
    border-radius: 24px !important;
    padding: 26px 22px !important;
    background: #ffffff !important;
    box-shadow: 0 25px 60px rgba(18, 18, 20, 0.22) !important;
    border: none !important;
  }
  body.dark-theme #google-role-modal .scanner-modal-content {
    background: #1c1c1e !important;
    color: #f8fafc !important;
  }
  #card-role-requester,
  #card-role-volunteer {
    cursor: pointer;
    border: 2px solid var(--border, #e2e8f0);
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    gap: 14px;
  }
  body.dark-theme #card-role-requester,
  body.dark-theme #card-role-volunteer {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
  }
  #card-role-requester:hover,
  #card-role-volunteer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  }

  /* Counterpart User Box inside card */
  .drawer-mission-counterpart {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(2, 132, 199, 0.05);
    border-radius: 12px;
    margin-bottom: 8px;
  }
  body.dark-theme .drawer-mission-counterpart {
    background: rgba(255, 255, 255, 0.04);
  }
  .drawer-mission-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #22c55e;
    background: #ffffff;
  }
  .drawer-counterpart-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--heading);
  }
  .drawer-counterpart-sub {
    font-size: 0.7rem;
    color: #16a34a;
    font-weight: 600;
  }

  /* Action Buttons */
  .drawer-mission-actions-row {
    display: flex;
    gap: 6px;
  }
  .drawer-action-btn {
    flex: 1;
    padding: 7px 10px;
    border-radius: 10px;
    font-family: var(--font-firago);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.16s ease;
  }
  .drawer-action-btn.full-width {
    width: 100%;
  }
  .drawer-action-btn.accept {
    background: #22c55e;
    color: #ffffff;
  }
  .drawer-action-btn.accept:hover {
    background: #16a34a;
  }
  .drawer-action-btn.decline {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.25);
  }
  .drawer-action-btn.decline:hover {
    background: rgba(239, 68, 68, 0.18);
  }
  .drawer-action-btn.chat {
    background: var(--primary);
    color: #ffffff;
  }
  .drawer-action-btn.chat:hover {
    background: #0284c7;
  }
  .drawer-action-btn.complete {
    background: #22c55e;
    color: #ffffff;
  }
  .drawer-action-btn.complete:hover {
    background: #16a34a;
  }
  .drawer-action-btn.review {
    background: #f59e0b;
    color: #ffffff;
  }
  .drawer-action-btn.review:hover {
    background: #d97706;
  }

  .drawer-cabinet-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
  }

  /* Messages & Live Chat Drawer View */
  #drawer-view-messages {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  #drawer-view-messages.active {
    display: flex !important;
  }
  .drawer-chat-subview {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
  }
  .drawer-chat-subview-header {
    padding: 16px 20px 4px 20px;
    flex-shrink: 0;
  }
  .drawer-chat-list-container {
    flex: 1;
    overflow-y: auto;
    padding: 10px 16px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .drawer-chat-card {
    background: #ffffff;
    border: 1.5px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  }
  body.dark-theme .drawer-chat-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-chat-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(2, 132, 199, 0.08);
  }
  .drawer-chat-card.unread {
    border-left: 4px solid var(--primary);
    background: rgba(2, 132, 199, 0.03);
  }
  .drawer-chat-card-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--primary);
    flex-shrink: 0;
  }
  .drawer-chat-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .drawer-chat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
  }
  .drawer-chat-card-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: var(--font-firago);
  }
  .drawer-chat-card-place {
    font-size: 0.68rem;
    color: var(--primary);
    font-weight: 600;
    background: rgba(2, 132, 199, 0.08);
    padding: 2px 7px;
    border-radius: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
  }
  .drawer-chat-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .drawer-chat-card-msg {
    font-size: 0.77rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
  }
  .drawer-chat-card.unread .drawer-chat-card-msg {
    font-weight: 700;
    color: var(--heading);
  }

  /* Chat Thread Header */
  .drawer-thread-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: #ffffff;
    flex-shrink: 0;
  }
  body.dark-theme .drawer-thread-header {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-thread-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--primary);
    font-family: var(--font-firago);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    transition: background 0.16s ease;
  }
  .drawer-thread-back-btn:hover {
    background: rgba(2, 132, 199, 0.08);
  }
  .drawer-thread-partner-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
  }
  .drawer-thread-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--primary);
    flex-shrink: 0;
  }
  .drawer-thread-partner-text {
    min-width: 0;
  }
  .drawer-thread-name {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--heading);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
  }
  .drawer-thread-status {
    font-size: 0.68rem;
    color: #16a34a;
    font-weight: 600;
  }
  .drawer-thread-place-badge {
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    background: #f1f5f9;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 110px;
  }
  body.dark-theme .drawer-thread-place-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
  }

  /* Note banner */
  .drawer-thread-note-banner {
    background: #fefce8;
    border-bottom: 1px solid #fef08a;
    padding: 8px 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.74rem;
    color: #713f12;
    flex-shrink: 0;
  }
  body.dark-theme .drawer-thread-note-banner {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.2);
    color: #fef08a;
  }

  /* Messages body */
  .drawer-chat-messages-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f8fafc;
  }
  body.dark-theme .drawer-chat-messages-body {
    background: #121214;
  }
  .drawer-chat-msg-row {
    display: flex;
    flex-direction: column;
    max-width: 82%;
  }
  .drawer-chat-msg-row.outgoing {
    align-self: flex-end;
    align-items: flex-end;
  }
  .drawer-chat-msg-row.incoming {
    align-self: flex-start;
    align-items: flex-start;
  }
  .drawer-chat-bubble {
    padding: 9px 13px;
    border-radius: 16px;
    font-size: 0.82rem;
    line-height: 1.4;
    word-break: break-word;
    font-family: var(--font-firago);
  }
  .drawer-chat-msg-row.outgoing .drawer-chat-bubble {
    background: var(--primary);
    color: #ffffff;
    border-bottom-right-radius: 4px;
  }
  .drawer-chat-msg-row.incoming .drawer-chat-bubble {
    background: #ffffff;
    color: #0f172a;
    border: 1px solid var(--border, #e2e8f0);
    border-bottom-left-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  }
  body.dark-theme .drawer-chat-msg-row.incoming .drawer-chat-bubble {
    background: #1c1c1e;
    color: #f8fafc;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-chat-time {
    font-size: 0.65rem;
    color: #94a3b8;
    margin-top: 3px;
    padding: 0 4px;
  }
  .drawer-chat-photo-preview {
    max-width: 100%;
    border-radius: 12px;
    margin-bottom: 4px;
    cursor: pointer;
  }

  /* Composer */
  .drawer-chat-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #ffffff;
    border-top: 1px solid var(--border, #e2e8f0);
    flex-shrink: 0;
  }
  body.dark-theme .drawer-chat-composer {
    background: #1c1c1e;
    border-color: rgba(255, 255, 255, 0.08);
  }
  .drawer-chat-photo-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: 4px;
    color: #64748b;
    transition: transform 0.16s ease;
  }
  .drawer-chat-photo-btn:hover {
    transform: scale(1.1);
  }
  .drawer-chat-input {
    flex: 1;
    padding: 9px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--border, #e2e8f0);
    background: var(--background, #f8fafc);
    color: var(--text, #0f172a);
    font-family: var(--font-firago);
    font-size: 0.82rem;
    outline: none;
  }
  .drawer-chat-input:focus {
    border-color: var(--primary);
  }
  body.dark-theme .drawer-chat-input {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
  }
  .drawer-chat-send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.16s ease, background 0.16s ease;
  }
  .drawer-chat-send-btn:hover {
    background: #0284c7;
    transform: scale(1.05);
  }


@media (min-width:769px){.apple-rail-section-divider{display:flex;align-items:center;gap:8px;margin:10px 5px 6px;color:#94a3b8;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.apple-rail-section-divider:before,.apple-rail-section-divider:after{content:"";height:1px;flex:1;background:rgba(148,163,184,.28)}.apple-rail-section-divider-secondary{margin-top:9px}.apple-rail-stats-card{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 3px 4px;padding:8px;border:1px solid rgba(2,132,199,.12);border-radius:14px;background:linear-gradient(135deg,rgba(224,242,254,.7),rgba(236,253,245,.72))}.apple-rail-stat{min-width:0;text-align:center;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;column-gap:3px}.apple-rail-stat .material-symbols-rounded{font-size:15px;color:#0284c7}.apple-rail-stat strong{font-size:.84rem;color:#0f172a}.apple-rail-stat small{grid-column:1/3;font-size:.58rem;color:#64748b;white-space:nowrap}.apple-desktop-rail.collapsed .apple-rail-section-divider,.apple-desktop-rail.collapsed .apple-rail-stats-card,.apple-desktop-rail.rail-collapsed .apple-rail-section-divider,.apple-desktop-rail.rail-collapsed .apple-rail-stats-card{display:none}.drawer-hub-icon-box{border:0!important}.drawer-hub-icon-box.hub-blue{background:#e0f2fe;color:#0284c7}.drawer-hub-icon-box.hub-indigo{background:#e0e7ff;color:#4f46e5}.drawer-hub-icon-box.hub-orange{background:#ffedd5;color:#ea580c}.drawer-hub-icon-box.hub-green{background:#d1fae5;color:#059669}.drawer-hub-icon-box.hub-purple{background:#f3e8ff;color:#9333ea}.drawer-hub-icon-box.hub-rose{background:#ffe4e6;color:#e11d48}.drawer-hub-arrow{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(148,163,184,.1);font-size:18px!important}.drawer-hub-card:hover .drawer-hub-arrow{background:rgba(2,132,199,.12);color:#0284c7}}body.dark-theme .apple-rail-stats-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.09)}body.dark-theme .apple-rail-stat strong{color:#f8fafc}body.dark-theme .apple-rail-section-divider:before,body.dark-theme .apple-rail-section-divider:after{background:rgba(255,255,255,.1)}

@media(min-width:769px){.rail-secondary-trigger{z-index:1}.rail-secondary-chevron{font-size:18px!important;color:#94a3b8;transition:transform .24s ease;flex-shrink:0}.rail-secondary-trigger.submenu-open{background:rgba(2,105,153,.09);color:var(--primary,#0284c7)}.rail-secondary-trigger.submenu-open .rail-secondary-chevron{transform:rotate(180deg);color:var(--primary,#0284c7)}.rail-inline-submenu{max-height:0;opacity:0;overflow:hidden;display:flex;flex-direction:column;gap:3px;margin:0 4px 0 18px;padding:0 0 0 10px;border-left:2px solid transparent;transition:max-height .34s cubic-bezier(.16,1,.3,1),opacity .22s ease,padding .25s ease,border-color .25s ease}.rail-inline-submenu.open{max-height:430px;opacity:1;padding-top:5px;padding-bottom:7px;border-left-color:rgba(2,132,199,.2)}.rail-inline-submenu a,.rail-inline-submenu button{width:100%;min-height:38px;box-sizing:border-box;display:flex;align-items:center;gap:9px;padding:5px 7px;border:0;border-radius:11px;background:transparent;color:#475569;text-decoration:none;text-align:left;font-family:var(--font-firago);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap}.rail-inline-submenu a:hover,.rail-inline-submenu button:hover{background:rgba(2,132,199,.07);color:#0369a1}.rail-inline-icon{width:29px;height:29px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.rail-inline-icon .material-symbols-rounded{font-size:17px}.rail-inline-icon.hub-blue,.rail-inline-icon.info-blue{background:#e0f2fe;color:#0284c7}.rail-inline-icon.hub-indigo,.rail-inline-icon.info-indigo{background:#e0e7ff;color:#4f46e5}.rail-inline-icon.hub-orange,.rail-inline-icon.info-orange{background:#ffedd5;color:#ea580c}.rail-inline-icon.hub-green,.rail-inline-icon.info-green{background:#d1fae5;color:#059669}.rail-inline-icon.hub-purple,.rail-inline-icon.info-purple{background:#f3e8ff;color:#9333ea}.rail-inline-icon.hub-rose{background:#ffe4e6;color:#e11d48}.rail-inline-icon.info-cyan{background:#cffafe;color:#0891b2}.apple-desktop-rail.collapsed .rail-inline-submenu,.apple-desktop-rail.collapsed .rail-secondary-chevron{display:none!important}}body.dark-theme .rail-inline-submenu a,body.dark-theme .rail-inline-submenu button{color:#cbd5e1}body.dark-theme .rail-inline-submenu a:hover,body.dark-theme .rail-inline-submenu button:hover{background:rgba(255,255,255,.08);color:#fff}

/* rail-weather-widget-v3-neutral */
@media (min-width:769px){.apple-rail-weather-card{position:relative;width:calc(100% - 6px);min-height:86px;box-sizing:border-box;display:grid;grid-template-columns:42px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:9px;row-gap:8px;margin:8px 3px 12px;padding:10px 10px 9px;border:0;border-radius:18px;background:#f1f5f9;box-shadow:none;font-family:var(--font-firago);text-align:left}.apple-rail-weather-icon-shell{grid-column:1;grid-row:1;position:relative;width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;color:#0ea5e9}.apple-rail-weather-icon{font-size:25px!important}.apple-rail-weather-copy{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column;gap:4px}.apple-rail-weather-copy>strong{font-size:1.16rem;line-height:1;color:#0f172a;letter-spacing:-.045em}.apple-rail-weather-location{display:flex;align-items:center;gap:3px;min-width:0;color:#64748b;font-size:.6rem;font-weight:700}.apple-rail-weather-location .material-symbols-rounded{font-size:11px}.apple-rail-weather-location span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.apple-rail-weather-range{grid-column:3;grid-row:1;display:flex;flex-direction:column;gap:4px;align-items:flex-end;font-size:.58rem;font-weight:800;color:#475569;white-space:nowrap}.apple-rail-weather-range span{display:block;padding:2px 5px;border-radius:6px;background:#f8fafc}.apple-rail-weather-condition{grid-column:1/-1;grid-row:2;min-width:0;display:flex;align-items:flex-start;gap:6px;padding:6px 8px;border-radius:10px;background:#f8fafc;color:#334155;font-size:.61rem;font-weight:750;line-height:1.25}.apple-rail-weather-condition-dot{width:6px;height:6px;margin-top:3px;border-radius:50%;flex:0 0 6px;background:#0ea5e9}.apple-rail-weather-condition span:last-child{min-width:0;white-space:normal;overflow-wrap:anywhere}.apple-rail-weather-card.weather-clear .apple-rail-weather-icon-shell{background:#fff7ed;color:#f59e0b}.apple-rail-weather-card.weather-clear .apple-rail-weather-condition-dot{background:#f59e0b}.apple-rail-weather-card.weather-cloudy .apple-rail-weather-icon-shell,.apple-rail-weather-card.weather-fog .apple-rail-weather-icon-shell{background:#f1f5f9;color:#64748b}.apple-rail-weather-card.weather-cloudy .apple-rail-weather-condition-dot,.apple-rail-weather-card.weather-fog .apple-rail-weather-condition-dot{background:#94a3b8}.apple-rail-weather-card.weather-snow .apple-rail-weather-icon-shell{background:#f0f9ff;color:#38bdf8}.apple-rail-weather-card.weather-storm .apple-rail-weather-icon-shell{background:#faf5ff;color:#8b5cf6}.apple-rail-weather-card.weather-storm .apple-rail-weather-condition-dot{background:#8b5cf6}.apple-desktop-rail.collapsed .apple-rail-weather-card,.apple-desktop-rail.rail-collapsed .apple-rail-weather-card{display:none}}
body.dark-theme .apple-rail-weather-card{background:rgba(30,41,59,.92);border:0;box-shadow:none}body.dark-theme .apple-rail-weather-icon-shell{background:rgba(255,255,255,.07);color:#7dd3fc}body.dark-theme .apple-rail-weather-copy>strong{color:#f8fafc}body.dark-theme .apple-rail-weather-location,body.dark-theme .apple-rail-weather-range{color:#94a3b8}body.dark-theme .apple-rail-weather-range span,body.dark-theme .apple-rail-weather-condition{background:rgba(255,255,255,.055)}body.dark-theme .apple-rail-weather-condition{color:#cbd5e1}
/* near-me-radius-control-v1 */
.btn-toggle-filters.btn-filter-icon-only{width:34px!important;min-width:34px!important;max-width:34px!important;height:32px!important;padding:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 34px!important}.btn-toggle-filters.btn-filter-icon-only svg{width:16px!important;height:16px!important;margin:0!important}.near-me-radius-control{width:100%;box-sizing:border-box;margin-bottom:14px;padding:11px 12px 9px;border-radius:14px;background:#eef2f7}.near-me-radius-header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.near-me-radius-title{min-width:0;display:flex;align-items:center;gap:6px;color:#334155;font-family:var(--font-firago);font-size:.72rem;font-weight:700}.near-me-radius-title .material-symbols-rounded{font-size:16px;color:#0284c7}.near-me-radius-header strong{flex-shrink:0;color:#0284c7;font-family:var(--font-firago);font-size:.72rem}.near-me-radius-row{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:8px}.near-me-radius-step{width:28px;height:28px;margin:0;padding:0;border:0;border-radius:9px;background:#fff;color:#334155;font-size:1rem;font-weight:700;line-height:1;cursor:pointer}.near-me-radius-step:hover{background:#e0f2fe;color:#0284c7}.near-me-radius-row input[type=range]{width:100%;height:4px;margin:0;accent-color:#0284c7;cursor:pointer}.near-me-radius-scale{display:flex;justify-content:space-between;margin:5px 36px 0;color:#94a3b8;font-family:var(--font-firago);font-size:.56rem;font-weight:600}.btn-near-me.active #lbl-near-me-text{font-size:.7rem!important}body.dark-theme .near-me-radius-control{background:rgba(255,255,255,.06)}body.dark-theme .near-me-radius-title{color:#e2e8f0}body.dark-theme .near-me-radius-step{background:rgba(255,255,255,.08);color:#e2e8f0}

/* rail-visual-refresh-v1 */
@media (min-width:769px){
.apple-desktop-rail{background:rgba(252,253,254,.96);border-right:1px solid rgba(226,232,240,.72);box-shadow:6px 0 28px rgba(15,23,42,.045)}
.apple-rail-top{padding:1px 3px 14px;margin-bottom:7px;border-bottom-color:rgba(148,163,184,.14)}
.apple-rail-logo-img{height:30px}.apple-rail-toggle-btn{width:34px;height:34px;border-radius:11px;background:#f2f4f7;color:#667085}
.apple-rail-nav{gap:3px;padding-right:1px;scrollbar-width:none}.apple-rail-nav::-webkit-scrollbar{display:none}
.apple-rail-group-label{display:flex;align-items:center;min-height:16px;margin:8px 8px 3px;color:#98a2b3;font-family:var(--font-firago);font-size:10px;font-weight:700;line-height:1;letter-spacing:.035em;white-space:nowrap}
.apple-rail-group-label-smart{margin-top:13px}
.apple-rail-item{height:46px;min-height:46px;padding:0 7px;gap:10px;border-radius:13px;color:#475467;font-size:14px;font-weight:600;line-height:1.2;letter-spacing:-.01em}
.apple-rail-item:hover{background:#f7f9fb;color:#026999}.apple-rail-item.active{background:#eaf5fa;color:#026999;font-weight:700}
.apple-rail-item-icon{width:34px;height:34px;border-radius:10px;background:#f2f4f7;color:#475467;transition:background .18s ease,color .18s ease,transform .18s ease}
.apple-rail-item-icon .material-symbols-rounded{font-size:20px!important;font-weight:500}.apple-rail-item-icon svg{width:19px;height:19px}
.apple-rail-item:hover .apple-rail-item-icon{background:#e7f2f7;color:#027aaa}
.apple-rail-item.active .apple-rail-item-icon,.rail-secondary-trigger.submenu-open .apple-rail-item-icon{background:#dff1f8;color:#0284c7}
.apple-rail-item.active .apple-rail-item-icon{box-shadow:inset 0 0 0 1px rgba(2,132,199,.08)}
#rail-btn-hub .apple-rail-item-icon img{width:19px!important;height:19px!important}.rail-secondary-trigger.submenu-open{background:#eef7fa;color:#026999}
.rail-inline-submenu{margin-left:21px;padding-left:12px}.rail-inline-submenu a,.rail-inline-submenu button{min-height:40px;border-radius:10px;color:#667085;font-size:13px;font-weight:600}
.rail-inline-icon{width:30px;height:30px;border-radius:9px}.apple-rail-weather-card{margin-top:10px;margin-bottom:10px;background:#f2f4f7;border-radius:16px}
.apple-rail-about-card.apple-rail-about-banner{appearance:none;width:calc(100% - 4px);min-height:64px;margin:10px 2px 5px;padding:10px;display:grid;grid-template-columns:38px minmax(0,1fr) 18px;align-items:center;column-gap:9px;border:0;border-radius:16px;background:linear-gradient(135deg,#eaf7fb 0%,#edf9f4 100%);box-shadow:none;color:#344054;text-align:left;cursor:pointer;overflow:hidden}
.apple-rail-about-card.apple-rail-about-banner:hover{background:linear-gradient(135deg,#e1f3f9 0%,#e5f6ef 100%)}
.apple-rail-about-banner-icon{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.82);color:#0292c9}
.apple-rail-about-banner-icon .material-symbols-rounded{font-size:21px}.apple-rail-about-banner-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.apple-rail-about-banner .apple-rail-about-title{margin:0;color:#164e63;font-size:12.5px;font-weight:750;line-height:1.25}
.apple-rail-about-banner .apple-rail-about-desc{margin:0;color:#667085;font-size:10.5px;font-weight:550;line-height:1.3}
.apple-rail-about-banner-arrow{color:#7aa2b2;font-size:15px!important}.apple-rail-bottom{gap:8px;padding-top:10px;border-top-color:rgba(148,163,184,.14)}
.apple-rail-auth-btn{height:42px;border-radius:12px;font-size:13.5px;box-shadow:none}.apple-rail-auth-menu-item{height:40px;border-radius:11px;color:#475467;font-size:13px;font-weight:600}
.apple-rail-settings-bar{gap:7px}.apple-rail-lang-group,.apple-rail-theme-btn{background:#f2f4f7}
.apple-desktop-rail.collapsed .apple-rail-group-label,.apple-desktop-rail.rail-collapsed .apple-rail-group-label,.apple-desktop-rail.collapsed .apple-rail-about-banner,.apple-desktop-rail.rail-collapsed .apple-rail-about-banner{display:none!important}
.apple-desktop-rail.collapsed .apple-rail-item{width:52px;height:46px}}
body.dark-theme .apple-desktop-rail{background:rgba(17,24,39,.96);border-right-color:rgba(255,255,255,.07);box-shadow:6px 0 30px rgba(0,0,0,.22)}
body.dark-theme .apple-rail-group-label{color:#64748b}body.dark-theme .apple-rail-item-icon{background:rgba(255,255,255,.075);color:#cbd5e1}
body.dark-theme .apple-rail-item.active .apple-rail-item-icon,body.dark-theme .rail-secondary-trigger.submenu-open .apple-rail-item-icon{background:rgba(56,189,248,.16);color:#7dd3fc}
body.dark-theme .apple-rail-about-card.apple-rail-about-banner{background:linear-gradient(135deg,rgba(14,116,144,.18),rgba(5,150,105,.13))}
body.dark-theme .apple-rail-about-card.apple-rail-about-banner:hover{background:linear-gradient(135deg,rgba(14,116,144,.25),rgba(5,150,105,.19))}
body.dark-theme .apple-rail-about-banner-icon{background:rgba(255,255,255,.08);color:#7dd3fc}body.dark-theme .apple-rail-about-banner .apple-rail-about-title{color:#e0f2fe}
body.dark-theme .apple-rail-about-banner .apple-rail-about-desc{color:#94a3b8}body.dark-theme .apple-rail-about-banner-arrow{color:#64748b}


/* rail-about-banner-clamp-v1 */
@media(min-width:769px){.apple-rail-about-card.apple-rail-about-banner{height:64px!important;min-height:64px!important;max-height:64px!important}.apple-rail-about-banner .apple-rail-about-title{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important}.apple-rail-about-banner .apple-rail-about-desc{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden!important;max-height:28px!important}}

/* rail-about-banner-clean-v1 */
@media(min-width:769px){.apple-rail-about-card.apple-rail-about-banner{height:60px!important;min-height:60px!important;max-height:60px!important}.apple-rail-about-banner .apple-rail-about-desc{display:none!important}.apple-rail-about-banner .apple-rail-about-title{-webkit-line-clamp:2!important;font-size:12px!important;line-height:1.32!important}}

/* rail-about-banner-refine-v2 */
@media(min-width:769px){
.apple-rail-about-card.apple-rail-about-banner{width:calc(100% - 4px)!important;height:68px!important;min-height:68px!important;max-height:68px!important;margin:10px 2px 6px!important;padding:10px!important;grid-template-columns:36px minmax(0,1fr) 26px!important;column-gap:8px!important;border:1px solid rgba(14,116,144,.06)!important;border-radius:17px!important;background:linear-gradient(135deg,#edf8fa 0%,#edf8f4 100%)!important;box-shadow:none!important;overflow:hidden!important}
.apple-rail-about-card.apple-rail-about-banner:hover{background:linear-gradient(135deg,#e6f5f8 0%,#e7f6ef 100%)!important;transform:none!important}
.apple-rail-about-banner-icon{width:36px!important;height:36px!important;border-radius:11px!important;background:#fff!important;color:#0796c8!important;box-shadow:0 1px 2px rgba(15,23,42,.035)!important}
.apple-rail-about-banner-icon .material-symbols-rounded{font-size:20px!important}
.apple-rail-about-banner-copy{min-width:0!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:4px!important;overflow:hidden!important}
.apple-rail-about-banner .apple-rail-about-title{display:block!important;margin:0!important;max-width:100%!important;color:#164e63!important;font-size:11.5px!important;font-weight:750!important;line-height:1.25!important;letter-spacing:-.01em!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.apple-rail-about-caption{display:block!important;color:#5f7d87!important;font-family:var(--font-firago)!important;font-size:10px!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.apple-rail-about-arrow-shell{width:26px;height:26px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.78);color:#5a8d9c}
.apple-rail-about-banner-arrow{font-size:13px!important}
.apple-rail-about-banner .apple-rail-about-desc{display:none!important}
}

@media (min-width: 769px) {
  .apple-desktop-rail.collapsed .apple-rail-top {
    height: 54px;
    padding: 0 4px 10px;
    margin-bottom: 12px;
    box-sizing: border-box;
  }
  .apple-desktop-rail.collapsed .apple-rail-nav {
    gap: 2px;
  }
  .apple-desktop-rail.collapsed .apple-rail-item {
    height: 44px;
    min-height: 44px;
  }
  .apple-desktop-rail.collapsed .apple-rail-item-icon {
    width: 31px;
    height: 31px;
  }
  .apple-desktop-rail.collapsed .apple-rail-item-icon .material-symbols-rounded {
    font-size: 19px !important;
  }
  .apple-desktop-rail.collapsed .apple-rail-item-icon svg {
    width: 18px;
    height: 18px;
  }
  .apple-desktop-rail:not(.collapsed) #rail-btn-add-place {
    order: 20;
    flex-shrink: 0;
    margin-top: 0;
  }
}

@media (min-width: 769px) {
  .apple-desktop-rail:not(.collapsed) #rail-btn-add-place {
    margin-top: auto !important;
    margin-bottom: 8px;
    color: #111827 !important;
  }
  .apple-desktop-rail:not(.collapsed) #rail-btn-add-place .apple-rail-item-label {
    color: #111827 !important;
  }
  .apple-desktop-rail:not(.collapsed) .rail-info-promo {
    margin-top: 0 !important;
  }
  body.dark-theme .apple-desktop-rail:not(.collapsed) #rail-btn-add-place,
  body.dark-theme .apple-desktop-rail:not(.collapsed) #rail-btn-add-place .apple-rail-item-label {
    color: #f8fafc !important;
  }
}
body.dark-theme .apple-rail-about-card.apple-rail-about-banner{border-color:rgba(125,211,252,.08)!important;background:linear-gradient(135deg,rgba(14,116,144,.18),rgba(5,150,105,.13))!important}
body.dark-theme .apple-rail-about-banner-icon,body.dark-theme .apple-rail-about-arrow-shell{background:rgba(255,255,255,.08)!important}
body.dark-theme .apple-rail-about-banner .apple-rail-about-title{color:#e0f2fe!important}
body.dark-theme .apple-rail-about-caption{color:#94a3b8!important}

/* rail-about-visual-banner-v10 */
@media(min-width:769px){
.apple-rail-about-card.apple-rail-about-banner.apple-rail-about-visual{position:relative!important;width:216px!important;height:120px!important;min-height:120px!important;max-height:120px!important;aspect-ratio:1080/600!important;margin:10px 0 6px!important;padding:0!important;display:block!important;text-align:left!important;border:0!important;border-radius:16px!important;background:#f2f4f7!important;box-shadow:none!important;overflow:hidden!important;isolation:isolate;cursor:pointer;transform:none!important;transition:none!important}
.apple-rail-about-art-wrap{position:absolute;z-index:0;inset:0;display:block;overflow:hidden;pointer-events:none;background:#f2f4f7}
.apple-rail-about-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:none;opacity:1;image-rendering:-webkit-optimize-contrast;transform:none!important;transition:none!important}
.apple-rail-about-visual:before{content:""!important;display:block!important;position:absolute;z-index:1;inset:0;background:transparent;pointer-events:none}
.apple-rail-about-visual-copy{position:absolute;z-index:2;left:13px;right:13px;bottom:35px;top:auto;display:block;max-width:calc(100% - 26px);overflow:hidden;pointer-events:none}
.apple-rail-about-visual-copy strong{display:block;width:100%;max-width:100%;color:#fff;font-family:var(--font-firago);font-size:13px;font-weight:800;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(15,23,42,.34)}
.apple-rail-about-visual-copy small{display:block;width:100%;max-width:100%;margin-top:3px;color:rgba(255,255,255,.9);font-family:var(--font-firago);font-size:9.5px;font-weight:570;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(15,23,42,.38)}
.apple-rail-about-visual-cta{position:absolute;z-index:3;left:13px;right:13px;bottom:7px;height:23px;padding:4px 0 0;border-radius:0;border-top:1px solid rgba(255,255,255,.34);display:flex;align-items:center;justify-content:space-between;gap:5px;background:transparent;color:#fff;font-family:var(--font-firago);font-size:9.5px;font-weight:760;line-height:1;box-shadow:none;overflow:hidden;pointer-events:none;transform:none!important;transition:none!important;text-shadow:0 1px 2px rgba(15,23,42,.38)}
.apple-rail-about-visual-cta>span:first-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apple-rail-about-visual-cta .material-symbols-rounded{flex:0 0 auto;font-size:14px!important}
.apple-rail-about-visual:hover,.apple-rail-about-visual:hover .apple-rail-about-art,.apple-rail-about-visual:hover .apple-rail-about-visual-cta,.apple-rail-about-visual:active,.apple-rail-about-visual:active .apple-rail-about-art{transform:none!important;translate:none!important}
.apple-rail-about-visual .apple-rail-about-banner-icon,.apple-rail-about-visual .apple-rail-about-banner-copy,.apple-rail-about-visual .apple-rail-about-arrow-shell{display:none!important}
}
body.dark-theme .apple-rail-about-card.apple-rail-about-banner.apple-rail-about-visual{background:#202734!important}
body.dark-theme .apple-rail-about-visual:before{background:linear-gradient(180deg,rgba(2,6,23,.08),rgba(2,6,23,.2) 45%,rgba(2,6,23,.84) 100%)!important}
body.dark-theme .apple-rail-about-visual-copy strong{color:#fff}
body.dark-theme .apple-rail-about-visual-copy small{color:rgba(255,255,255,.9)}
body.dark-theme .apple-rail-about-visual-cta{border-top-color:rgba(255,255,255,.28);color:#fff;background:transparent;box-shadow:none}


/* desktop-logo-after-beta-removal */
@media (min-width: 769px) {
  .apple-rail-logo-img {
    height: 38px !important;
    max-width: 155px !important;
  }
}


  /* Keep active rail text and icons on the same primary blue as the companion CTA. */
  .apple-rail-item:hover,
  .apple-rail-item.active,
  .apple-rail-item.active .apple-rail-item-icon,
  .apple-rail-item.active .apple-rail-item-icon .material-symbols-rounded,
  .apple-rail-item.active .apple-rail-item-label {
    color: #0284c7 !important;
  }

/* Calm, Apple Maps-inspired open rail. Collapsed rail keeps its own layout. */
@media (min-width: 769px) {
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) {
    background: #fdfefc !important;
    border-right: 1px solid #e9edeb !important;
    box-shadow: none !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-top {
    min-height: 43px;
    padding: 0 4px 10px;
    margin-bottom: 12px;
    border-bottom: 0;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-toggle-btn {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: #f2f4f2;
    color: #727b80;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-nav {
    gap: 2px;
    padding: 0 1px;
    scrollbar-width: none;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-nav::-webkit-scrollbar { display: none; }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-group-label { display: none; }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item {
    flex-shrink: 0;
    height: 44px;
    min-height: 44px;
    padding: 0 6px;
    gap: 10px;
    border-radius: 11px;
    background: transparent;
    color: #6b737b;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item:hover {
    background: #f4f6f4;
    color: #344451 !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active {
    background: transparent;
    color: #0284c7 !important;
    font-weight: 600;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item-icon {
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: #f1f3f1;
    color: #69747a;
    box-shadow: none;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item-icon .material-symbols-rounded { font-size: 19px !important; }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item-icon svg { width: 18px; height: 18px; }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active .apple-rail-item-icon {
    background: #e9f4f9;
    color: #0284c7 !important;
    box-shadow: none;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) #rail-btn-scanner,
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) #rail-btn-add-place { margin-top: 10px; }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-secondary-trigger.submenu-open {
    background: #f3f7f8;
    color: #0284c7 !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-weather-card {
    order: 20;
    flex-shrink: 0;
    margin-top: auto !important;
    margin-bottom: 8px !important;
    background: #f3f5f4;
    box-shadow: none;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-about-visual {
    order: 21;
    flex-shrink: 0;
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-bottom {
    gap: 7px;
    padding-top: 9px;
    border-top: 1px solid #ecefed;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-auth-btn {
    background: #f5f7f6;
    border: 1px solid #e4e9e9;
    box-shadow: none;
    color: #465463;
    font-size: 13px;
    font-weight: 500;
  }
}
@media (min-width: 769px) {
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) {
    background: #171d23 !important;
    border-right-color: #2c343a !important;
  }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item { color: #b3bec7; }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item-icon,
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-toggle-btn,
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-auth-btn { background: #283138; border-color: #364149; color: #c3ced5; }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-weather-card { background: #252e35; }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-bottom { border-top-color: #303a42; }
}

/* Hover label for icon-only rail, positioned outside the scrolling rail. */
#rail-collapsed-tooltip {
  position: fixed;
  z-index: 20050;
  display: none;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 7px;
  background: #858b91;
  color: #fff;
  box-sizing: border-box;
  font: 500 13px/20px var(--font-firago);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(25, 38, 48, .16);
}
#rail-collapsed-tooltip.visible { display: block; }
#rail-collapsed-tooltip::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-right-color: #858b91;
}
@media (max-width: 768px) { #rail-collapsed-tooltip { display: none !important; } }

/* Compact information card below the desktop navigation. */
@media (min-width: 769px) {
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-info-promo {
    order: 21;
    width: calc(100% - 4px) !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: auto 2px 8px !important;
    padding: 9px 12px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    border: 0 !important;
    border-radius: 9px !important;
    background: #079bdb !important;
    box-shadow: none !important;
    color: #fff;
  }
  .rail-info-promo::after { content: none; }
  .rail-info-promo-symbol {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    height: 22px;
    padding-right: 9px;
    border-right: 1px solid rgba(255,255,255,.55);
    color: #fff;
  }
  .rail-info-promo-symbol .material-symbols-rounded { font-size: 19px !important; }
  .rail-info-promo-title {
    min-width: 0;
    color: #fff;
    font: 700 11.5px/1.25 var(--font-firago);
    white-space: normal;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-info-promo:hover {
    background: #2caae0 !important;
    transform: none !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-info-promo:active { transform: none !important; }
  .rail-info-promo:focus-visible { outline: 2px solid #38bdf8 !important; outline-offset: 2px; }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-info-promo {
    background: #087fb6 !important;
  }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-info-promo:hover { background: #2d92c1 !important; }
  .apple-desktop-rail.collapsed #rail-about-card,
  .apple-desktop-rail.rail-collapsed #rail-about-card { display: none !important; }
}

/* Quiet hover treatment for the compact map rail. */
@media (min-width: 769px) {
  .apple-desktop-rail:is(.collapsed, .rail-collapsed) .apple-rail-item:hover {
    background: transparent;
    color: #475467 !important;
  }
  .apple-desktop-rail:is(.collapsed, .rail-collapsed) .apple-rail-item:hover .apple-rail-item-icon {
    background: #e3e6e8;
    color: #475467 !important;
  }
  .apple-desktop-rail:is(.collapsed, .rail-collapsed) .apple-rail-item.active,
  .apple-desktop-rail:is(.collapsed, .rail-collapsed) .apple-rail-item.active:hover {
    background: transparent;
    color: #087fae !important;
  }
  .apple-desktop-rail:is(.collapsed, .rail-collapsed) .apple-rail-item.active .apple-rail-item-icon,
  .apple-desktop-rail:is(.collapsed, .rail-collapsed) .apple-rail-item.active:hover .apple-rail-item-icon {
    background: #e9f2f5;
    color: #087fae !important;
    box-shadow: none;
  }
}

/* Keep the business link directly above the information banner. */
@media (min-width: 769px) {
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) #rail-btn-add-place {
    order: 20;
    margin-top: auto !important;
    margin-bottom: 8px;
    color: #111827 !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) #rail-btn-add-place .apple-rail-item-label {
    color: #111827 !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .rail-info-promo {
    order: 21;
    margin-top: 0 !important;
  }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) #rail-btn-add-place,
body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) #rail-btn-add-place .apple-rail-item-label {
    color: #f8fafc !important;
  }
}

/* Selected navigation item: quiet row with one clear blue icon. */
@media (min-width: 769px) {
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active,
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active:hover {
    background: #f1f2f3 !important;
    color: #62666b !important;
    font-weight: 600;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active .apple-rail-item-label {
    color: #62666b !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active .apple-rail-item-icon,
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active:hover .apple-rail-item-icon {
    background: #0a84ff !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active .apple-rail-item-icon .material-symbols-rounded {
    color: #fff !important;
  }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active,
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active:hover {
    background: #30343a !important;
    color: #d1d5db !important;
  }
  body.dark-theme .apple-desktop-rail:not(.collapsed):not(.rail-collapsed) .apple-rail-item.active .apple-rail-item-label {
    color: #d1d5db !important;
  }
}