/* Sidebar profile overview vertical frames */
.account-card.account-vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    background: none;
    box-shadow: none;
    padding: 0;
    border: none;
}
.framed-item {
    width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 18px rgba(99,102,241,0.08);
    padding: 18px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    transition: box-shadow 0.18s, background 0.18s, transform 0.13s;
}
.framed-hover:hover {
    background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
    color: #fff;
    box-shadow: 0 12px 32px rgba(99,102,241,0.13);
    transform: translateY(-2px) scale(1.04);
}
/* General */
html {
    scrollbar-gutter: stable;
}
body {
    font-family: 'Poppins', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(180deg,#f6f8fb 0%, #ffffff 100%);
    color: #111827;
    margin: 0;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
body.home {
    background: linear-gradient(160deg, #fffbeb 0%, #fef9c3 45%, #fde68a 100%);
}

/* Branding (Logo + Slogan) */
.branding {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo {
    display: block;
    height: 110px;
    width: auto;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Large centered logo used on the homepage hero */
.hero-logo { height: 200px; width: auto; border-radius: 18px; box-shadow: 0 14px 34px rgba(0,0,0,0.16); margin-bottom: 18px; }
.hero-branding { display:flex; flex-direction:column; align-items:center; max-width: 900px; }

/* Make logo clickable and remove default link styles */
.branding a {
    display: inline-block;
    text-decoration: none;
}
.branding a:hover {
    cursor: pointer;
}

.slogan {
    font-size: 14px;
    font-weight: 600;
    color: #e0e4e8;
}

/* Sidebar */
.flash-area { margin-top: 16px; text-align: center; }
.flash-msg {
  display: inline-block;
  width: 100%;
  padding: 10px 16px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  font-size: 0.88em;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
  margin-bottom: 6px;
}

.content-with-sidebar { padding: 34px 28px; }

/* Main hero area */
.main-hero { background: url('https://source.unsplash.com/1400x500/?city,travel') no-repeat center; background-size: cover; padding: 56px 28px; border-radius: 14px; margin-bottom: 20px; color: #fff; box-shadow: 0 12px 40px rgba(2,6,23,0.06); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.main-hero h1 { margin: 0 0 16px 0; font-size: 54px; color: #061226; text-shadow: 0 2px 12px rgba(255,255,255,0.7); font-weight: 900; letter-spacing: -1px; }
.main-hero .lead { margin-bottom: 28px; font-size: 26px; color: #334155; max-width: 900px; font-weight: 600; }
.hero-choices { display: flex; gap: 22px; flex-direction: row; align-items: center; justify-content: center; margin-top: 18px; }

.hero-button {
    padding: 32px 64px;
    font-size: 2em;
    border-radius: 18px;
    box-shadow: 0 14px 40px rgba(2,6,23,0.10);
    width: 380px;
    text-align: center;
    font-weight: 900;
    border: none;
    margin: 0 10px;
    transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s;
}

.hero-button#want-to-go { background: linear-gradient(90deg,#2563eb,#4f46e5); color: #fff; }
.hero-button#offer-help { background: linear-gradient(90deg,#059669,#34d399); color: #fff; }
.hero-button:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 24px 60px rgba(2,6,23,0.16);
  filter: brightness(1.08);
}

/* radio group in register form */
form.profile-card fieldset { border: none; margin: 6px 0 12px 0; }
form.profile-card fieldset label { display: inline-block; margin-right: 12px; font-size: 0.95em; }

/* Section */
.section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .logo { height: 60px; }
    .hero-logo { height: 120px; }
    .content-with-sidebar { margin-left: 0; padding: 12px; }
    #map { width: 95%; height: 360px; }
    .menu-button { padding: 12px 18px; font-size: 1em; }

    /* Align "What's happening" card with the hero buttons */
    body.home .section { padding-left: 0 !important; padding-right: 0 !important; }
    body.home #city-stats {
        width: 88vw !important;
        max-width: 440px !important;
        box-sizing: border-box;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* --- Modernized menu button --- */
.menu-button {
  padding: 22px 38px;
  font-size: 1.25em;
  border: none;
  border-radius: 14px;
  margin: 12px 8px;
  cursor: pointer;
  background: linear-gradient(45deg, #009688, #26a69a);
  color: white;
  font-weight: 800;
  box-shadow: 0 10px 32px rgba(2,6,23,0.10);
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s;
}
.menu-button:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 40px rgba(2,6,23,0.14);
  filter: brightness(1.08);
}

/* City-row layout for buttons */
.city-row { display:inline-flex; align-items:center; gap:8px; margin:6px 6px 6px 0; }

/* Compact, clean city stats sheet (homepage only) */
#city-stats { margin-top: 8px; }
.city-stats-sheet { display:flex; flex-direction:column; gap:6px; background:transparent }
.city-stats-row { display:grid; grid-template-columns: 2fr 1fr; gap:18px; align-items:center; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,0.06); }
.city-stats-row.header { font-weight:600; color:var(--muted-text,#6b7280); border-bottom:2px solid rgba(0,0,0,0.08); }
.city-stats-row .col { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.city-stats-sheet .menu-button.small { padding:6px 8px; font-size:0.9em }
.city-stats-sheet .col-left { font-weight:700; }
.city-stats-sheet .col-right { display:flex; align-items:center; justify-content:flex-end }
.city-stats-sheet .stats-right { display:flex; flex-direction:column; align-items:flex-end }
.city-stats-sheet .counts { display:flex; gap:8px; align-items:center }
.city-stats-sheet .counts .total { margin-left:8px; color:var(--muted-text,#6b7280); font-weight:600 }

/* Two-column layout for homepage stats */
.city-stats-columns { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:start; }
.city-stats-columns .city-stats-sheet { background: #fff; padding:12px; border-radius:8px; box-shadow: 0 8px 24px rgba(2,6,23,0.04); }

/* keep legacy card styles available but quieter if used elsewhere */
.city-stat-card { background: #fff; border-radius: 8px; padding: 10px; box-shadow: 0 6px 18px rgba(0,0,0,0.04); }
.city-stat-card h4 { margin:0;font-size:16px;color:#0b1220; }
.city-stat-row { display:flex;align-items:center;gap:8px;width:100%;justify-content:space-between; }
.city-stat-badges { display:flex;gap:8px;align-items:center; }
.badge { padding:6px 10px;border-radius:999px;font-weight:700;color:#fff;background:#6b7280;font-size:13px; }
.badge.guides { background: linear-gradient(90deg,#10b981,#34d399); }
.badge.travellers { background: linear-gradient(90deg,#2563eb,#60a5fa); }
.city-stat-bar { height:8px;width:100%;background:#e6eef7;border-radius:999px;overflow:hidden; }
.city-stat-bar-fill { height:100%;background:linear-gradient(90deg,#60a5fa,#34d399); transition: width 300ms ease }

/* Grouped city buttons container */
.city-grid { display:flex; flex-wrap:wrap; align-items:center; gap:8px; justify-content:flex-start; padding:6px 4px; }

.city-row .menu-button.selected-city,
.city-grid-compact .menu-button.selected-city {
    outline: 3px solid #fff !important;
    box-shadow: 0 0 0 5px rgba(99,102,241,0.4) !important;
    transform: translateY(-4px) scale(1.05) !important;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%) !important;
}

/* Register buttons (moved from inline styles) */
.register-btn { padding:10px 12px; font-size:0.95em; border-radius:8px; color: #fff; text-decoration:none; display:inline-block; }
.register-btn.traveller { background: linear-gradient(90deg,#1976d2,#42a5f5); }
.register-btn.guide { background: linear-gradient(90deg,#2e7d32,#66bb6a); }

/* Distinct Back to Home container and button */
.back-home-container { margin-top:12px; text-align:center; }
.back-home-button { background: transparent; border: 2px solid #555; color:#333; padding:10px 20px; border-radius:8px; cursor:pointer; }
.back-home-button:hover { background:#555; color:#fff; }

/* Styled compact register button for selected city */
.register-btn.single {
    background: #fff;
    color: #1f2937;
    border: 2px solid #ddd;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
}
.register-btn.single.traveller { background: linear-gradient(135deg,#f97316,#fb923c); color: #fff; border-color: transparent; }
.register-btn.single.guide     { background: linear-gradient(135deg,#0ea5e9,#38bdf8); color: #fff; border-color: transparent; }
.register-btn.single:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,0.08); }

/* Back Button */
.back-button {
    padding: 15px 30px;
    font-size: 1em;
    border: none;
    border-radius: 10px;
    margin-top: 20px;
    cursor: pointer;
    background: #555;
    color: white;
    transition: transform 0.2s, background 0.2s;
}
.back-button:hover {
    background: #333;
    transform: scale(1.05);
}

/* Map - larger, near-fullscreen height on wide screens */
#map {
    /* taller but keep original width so layout stays consistent */
    /* slightly less tall (about 80% of previous) so it fits comfortably */
    height: calc((100vh - 160px) * 0.8);
    max-height: 85vh;
    width: 78%;
    margin: 28px auto;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(2,6,23,0.06);
}

/* Prominent 'More cities coming soon' note shown below every map */
#more-cities {
    display: none; /* JS will show when appropriate; keep none by default to avoid duplication in other pages */
    margin-top: 14px;
    text-align: center;
    color: #374151; /* neutral, readable */
    font-weight: 700;
    font-size: 1.05rem;
}

@media (max-width: 900px) {
    #map { height: 56vh; max-height: none; width: 95%; }
    #more-cities { font-size: 1rem; }
}

/* Profile Cards (off-map list) */
.profile-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 260px;
    padding: 18px;
    margin: 14px;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(2,6,23,0.06);
    background: linear-gradient(180deg,#ffffff,#f8fafc);
}

.profile-card img.profile-img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-bottom: 10px;
}

/* Simple colored avatar swatch used when profiles specify a color instead of an image */
.avatar-swatch {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border: 2px solid rgba(0,0,0,0.06);
}

/* City people list container */
#city-people .profile-card {
    width: 200px;
    padding: 12px;
}

/* City people section header and layout */
.city-people-header h2 { margin: 6px 0 12px 0; font-size: 20px; color: #222; text-align:center; }
.city-people-list { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; padding: 12px 6px; background: #fff; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); }
.city-people-list .profile-card { margin: 10px; }

/* Polished city overview card (used by viewCity) */
.city-overview-card {
    width: 100%;
    max-width: 1100px;
    margin: 18px auto;
    background: linear-gradient(180deg,#ffffff,#fbfdff);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 20px 46px rgba(2,6,23,0.06);
    border: 1px solid rgba(8,15,28,0.04);
}
.city-header { text-align: left; padding: 6px 8px 14px 8px; border-bottom: 1px solid rgba(2,6,23,0.04); margin-bottom: 12px; }
.city-header h2 { margin: 0; font-size: 22px; color: #0b1220; }
.city-subtitle { margin: 6px 0 0 0; color: #475569; font-size: 14px; }

.people-columns { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.people-column { background: linear-gradient(180deg,#ffffff,#fbfdff); padding: 12px; border-radius: 12px; min-height: 160px; box-shadow: 0 10px 30px rgba(2,6,23,0.04); border: 1px solid rgba(2,6,23,0.03); }
.people-column.guides { border-left: 4px solid rgba(16,185,129,0.12); }
.people-column.travellers { border-left: 4px solid rgba(59,130,246,0.12); }
.column-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.column-title h3 { margin: 0; font-size: 18px; color: #0b1220; }
.pill { background: linear-gradient(90deg,#eef2ff,#f0f9ff); color: #0b1220; padding:6px 10px; border-radius: 999px; font-weight:700; border: 1px solid rgba(2,6,23,0.03); }

.people-list { display:flex; flex-direction:column; gap:10px; max-height:520px; overflow:auto; padding-right:6px; }
.person-card { display:flex; gap:12px; align-items:flex-start; padding:10px; border-radius:10px; background: linear-gradient(180deg,#fff,#fbfdff); border:1px solid rgba(2,6,23,0.03); box-shadow: 0 8px 20px rgba(2,6,23,0.04); }
.person-avatar img { width:72px; height:72px; border-radius:10px; object-fit:cover; }
.avatar-swatch-large { width:72px; height:72px; border-radius:12px; border: 3px solid rgba(0,0,0,0.04); box-shadow: 0 6px 18px rgba(2,6,23,0.04); }
.person-body { flex:1; display:flex; flex-direction:column; gap:8px; }
.person-name { font-weight:800; color:#081127; }
.demo-tag { font-size:0.8em; color:#6b7280; margin-left:6px; font-weight:600; }
.person-bio { color:#475569; font-size:13px; line-height:1.3; max-height:3.6em; overflow:hidden; }
.person-footer { display:flex; align-items:center; gap:10px; margin-top:4px; }
.role-badge { padding:6px 8px; border-radius:8px; font-weight:700; font-size:12px; color:#fff; }
.badge-guides { background: linear-gradient(90deg,#10b981,#34d399); }
.badge-travellers { background: linear-gradient(90deg,#2563eb,#60a5fa); }
.empty-note { color:#6b7280; padding:14px; text-align:center; border-radius:8px; background: rgba(14,165,233,0.03); }
.show-more { text-align:center; margin-top:12px; }

/* smaller screens: stack columns */
@media (max-width: 900px) {
    .people-columns { grid-template-columns: 1fr; }
    .city_overview-card { padding: 12px; }
}

/* Chat button on profile cards */
.profile-card .chat-button {
    padding: 10px 20px;
    font-size: 1em;
    border: none;
    border-radius: 8px;
    background: linear-gradient(45deg, #ff6600, #ff9900);
    color: white;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, background 0.3s;
}
/* make anchor.chat-button match the button styling for popups and other anchors */
a.chat-button {
    display: inline-block;
    padding: 10px 18px;
    background: linear-gradient(45deg, #ff6600, #ff9900);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
}
a.chat-button:hover { opacity: 0.95; transform: translateY(-2px); }
.profile-card .chat-button:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    background: linear-gradient(45deg, #e65c00, #ff7700);
}

/* Leaflet marker popups (optional styling) */
.leaflet-popup-content {
    font-size: 14px;
    font-weight: 500;
}
.leaflet-popup-content b {
    color: #009688;
}

/* Profile page layout */
.profile-page { max-width: 1200px; margin: 40px auto; padding: 32px; }
.profile-grid { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: start; }
.profile-info { background: #fff; padding: 32px; border-radius: 14px; box-shadow: 0 10px 26px rgba(0,0,0,0.05); }
.profile-info .avatar-large { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; display:block; margin-bottom:20px; }
.profile-info h2 { margin: 8px 0 8px 0; font-size: 24px; }
.profile-info .edit-btn { display:inline-block; margin-top:14px; }
.profile-info p { margin-top: 12px; line-height: 1.8; font-size: 15px; color: #333; }

.chat-panel { background: #fff; padding: 28px; border-radius: 14px; box-shadow: 0 12px 32px rgba(2,6,23,0.08); display:flex; flex-direction:column; min-height: 620px; }
.messages-list { flex: 1 1 auto; overflow-y: auto; padding: 22px; display:flex; flex-direction:column; gap:18px; background: transparent; }
.message { max-width: 74%; padding: 14px 16px; border-radius: 16px; background: #f9f9fb; color: #111; box-shadow: 0 4px 10px rgba(0,0,0,0.05); align-self: flex-start; font-size: 15px; line-height: 1.6; }
.message.me { background: linear-gradient(90deg,#1976d2,#42a5f5); color: #fff; align-self: flex-end; }
.message .meta { font-size: 12px; color: rgba(0,0,0,0.45); margin-bottom:10px; }
.chat-input { display:flex; gap:14px; padding-top:18px; border-top:1px solid #f5f5f7; align-items:center; }
.chat-input input[type="text"], .chat-input input[type="email"] { flex: 1; padding:14px 16px; border-radius:12px; border:1px solid #ececec; font-size: 15px; }
.chat-input .send-btn { padding:12px 20px; border-radius:12px; border:none; background:linear-gradient(45deg,#009688,#26a69a); color:#fff; cursor:pointer; min-width:84px; }

/* Chat UI personality: larger, colourful messages with entrance animation */
.messages-list .message {
    transition: transform 320ms cubic-bezier(.2,.9,.3,1), opacity 240ms ease-in-out;
    transform-origin: bottom right;
}
.messages-list .message.enter {
    transform: translateY(12px) scale(0.98);
    opacity: 0;
}
.messages-list .message.enter-active {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.message { max-width: 72%; padding: 14px 18px; border-radius: 14px; background: linear-gradient(180deg,#f3f8ff,#ffffff); color: #0b1220; box-shadow: 0 8px 26px rgba(2,6,23,0.06); font-size: 15px; line-height: 1.6; }
.message.me { background: linear-gradient(90deg,#1976d2,#42a5f5); color: #fff; align-self: flex-end; box-shadow: 0 10px 28px rgba(66,133,244,0.12); }
.message .meta { font-size: 12px; color: rgba(0,0,0,0.45); margin-bottom:10px; }

/* micro-animations: subtle hover and focus effects for interactive elements */
.menu-button, .menu-button.large, a.menu-button { transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease; }
.menu-button:hover, a.menu-button:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(2,6,23,0.12); }
.city-stat-card { transform: translateY(0); transition: transform 320ms cubic-bezier(.2,.9,.3,1), box-shadow 320ms ease; }
.city-stat-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(2,6,23,0.12); }
.city-stat-bar-fill { transition: width 900ms cubic-bezier(.2,.9,.3,1); }
.badge { transform-origin: center; transition: transform 220ms ease; }
.badge:hover { transform: scale(1.06); }

/* You-badge (for the owner's profile) */
.you-badge { background: linear-gradient(90deg,#f59e0b,#f97316); color: #111; padding:6px 10px; border-radius:999px; font-weight:800; margin-left:8px; font-size:0.85em; }

/* Toast styling (global) */
.toast { font-weight: 700; }

.chat-button.disabled { opacity: 0.95; cursor: pointer; background: linear-gradient(90deg,#9ca3af,#6b7280); }

@media (max-width: 900px) {
    .profile-grid { grid-template-columns: 1fr; }
    .chat-panel { min-height: 420px; }
    .message { max-width: 90%; }
}

/* helper class to force a single-column layout for pages that prefer centered content */
.profile-grid.single-column { grid-template-columns: 1fr; align-items: center; }

/* Messages/Inbox specific styles */
/* Messages page header and wrapper */
.messages-hero { margin-bottom: 16px; }
.messages-hero h2 { margin: 0 0 4px 0; font-size: 1.5em; font-weight: 800; color: #0b1220; }
.messages-hero p { margin: 0; color: #6b7280; font-size: 0.9em; }
.inbox-wrapper { width: 100%; max-width: 900px; margin: 0 auto; }

.inbox-container { background: linear-gradient(180deg,#ffffff,#fbfdff); padding: 14px; border-radius: 12px; }
.inbox-header { font-weight: 700; color: #0f172a; margin-bottom: 8px; display:flex; justify-content:space-between; align-items:center; }
.inbox-list { display:flex; flex-direction:column; gap:12px; }
.inbox-card { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; background: #fff; box-shadow: 0 6px 18px rgba(2,6,23,0.04); transition: transform 0.12s, box-shadow 0.12s; text-decoration:none; color:inherit; }
.inbox-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(2,6,23,0.12); }
.inbox-card .avatar { width:56px;height:56px;border-radius:10px;flex:0 0 56px;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(45deg,#6d28d9,#3b82f6); }
.inbox-card .meta { flex:1;text-align:left; }
.inbox-card .meta .name { font-weight:800;color:#0b1220; }
.inbox-card .meta .preview { color:#4b5563;font-size:13px;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.inbox-card .actions { display:flex;flex-direction:column;align-items:flex-end;gap:8px; }
.unread-badge { background: #ef4444;color:#fff;padding:6px 10px;border-radius:999px;font-weight:800;font-size:12px; box-shadow: 0 6px 18px rgba(239,68,68,0.12); }
.open-label { font-size:12px;color:#2563eb;font-weight:700; }

/* variant when profile image is available */
.inbox-card img.avatar-img { width:56px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 56px; }

@media (max-width: 700px) {
    .inbox-card { flex-direction:row; align-items:center; }
    .inbox-card .actions { align-items:center; }
}

/* Cluster marker styles if you later add clustering */
.marker-cluster-small {
    background-color: rgba(0,150,136,0.6);
}
.marker-cluster-medium {
    background-color: rgba(0,150,136,0.8);
}
.marker-cluster-large {
    background-color: rgba(0,150,136,1);
}

/* account summary (sidebar) */

.account-summary {
    margin-top: 28px;
    padding: 28px 22px 28px 22px;
    border-radius: 22px;
    background: linear-gradient(120deg,#f0f4ff 0%,#e0e7ff 100%);
    box-shadow: 0 16px 44px rgba(37,99,235,0.10);
}
.account-top {
    display: flex;
    gap: 32px;
    align-items: center;
}
.account-card {
    position: relative;
    background: #f6f8fa;
    border-radius: 18px;
    padding: 32px 24px 32px 24px;
    box-shadow: 0 24px 64px rgba(37,99,235,0.10);
    border: 1.5px solid rgba(37,99,235,0.06);
}
.account-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 12px 36px rgba(99,102,241,0.13);
}
.account-avatar-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.account-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    align-items: flex-start;
}
.account-name {
    font-weight: 900;
    color: #3730a3;
    font-size: 2.1em;
    margin-bottom: 8px;
    letter-spacing: 0.01em;
}
.account-role-row {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 10px;
}
.role-label {
    color: #fff;
    font-weight: 700;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
    box-shadow: 0 4px 16px rgba(99,102,241,0.10);
    font-size: 1.15em;
}
.account-city {
    color: #2563eb;
    margin-left: 8px;
    font-weight: 700;
    font-size: 1.1em;
}
.account-email {
    font-size: 1.15em;
    color: #64748b;
    margin-top: 10px;
    font-weight: 600;
}
/* Avatar swatch fallback when no image provided */
.account-avatar-swatch {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    color: #fff;
    font-size: 2.2em;
    border: 3px solid rgba(99,102,241,0.10);
    box-shadow: 0 12px 36px rgba(99,102,241,0.13);
    background: linear-gradient(135deg, #6366f1 0%, #60a5fa 100%);
}
.inbox-badge {
    display: inline-block;
    background: #ef4444;
    color: #fff;
    padding: 6px 14px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 1.1em;
    margin-left: 10px;
}
.account-side-actions {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 24px;
    width: 100%;
    box-sizing: border-box;
    background: #e0e7ff;
    padding: 22px;
    border-radius: 16px;
    border: 1.5px solid rgba(99,102,241,0.10);
}
.action-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    border-radius: 14px;
    background: #fff;
    color: #3730a3;
    text-decoration: none;
    font-weight: 900;
    box-shadow: 0 8px 24px rgba(99,102,241,0.08);
    border: 1.5px solid rgba(99,102,241,0.10);
    width: 100%;
    justify-content: flex-start;
    font-size: 1.18em;
    box-sizing: border-box;
    transition: background 0.18s, box-shadow 0.18s, transform 0.13s;
}
.action-pill .inbox-badge { margin-left: 10px; }
.action-pill:hover {
    background: linear-gradient(90deg, #6366f1 0%, #60a5fa 100%);
    color: #fff;
    transform: translateY(-4px) scale(1.04);
    box-shadow: 0 18px 40px rgba(99,102,241,0.13);
}

/* Account actions row tidy */
.account-actions { display:flex; gap:8px; align-items:center; }
.account-actions .menu-button.small { background: linear-gradient(90deg,#f3f4f6,#ffffff); color:#0f172a; border: 1px solid rgba(15,23,42,0.04); box-shadow: 0 6px 16px rgba(2,6,23,0.04); }
.account-actions .menu-button.small:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(2,6,23,0.08); }

/* Floating vertical action pills that overlap the card edge (right side) */
.account-side-actions { position: static; display:flex; flex-direction:column; gap:12px; margin-top:14px; width:100%; box-sizing:border-box; background: #e9eef3; padding: 16px; border-radius: 12px; border: 1px solid rgba(15,23,42,0.03); }
.action-pill { display:inline-flex; align-items:center; gap:8px; padding:12px 16px; border-radius:10px; background:#ffffff; color:#081426; text-decoration:none; font-weight:800; box-shadow: 0 6px 14px rgba(2,6,23,0.04); border:1px solid rgba(15,23,42,0.04); width:100%; justify-content:flex-start; font-size:1.02em; box-sizing:border-box; }
.action-pill .inbox-badge { margin-left:6px; }
.action-pill:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(2,6,23,0.10); }

@media (max-width: 900px) {
    .account-side-actions { position: static; flex-direction:row; gap:8px; margin-top:12px; }
    .account-summary { padding: 8px; }
    .account-card { padding: 12px; }
}

/* Full-screen auth (login/register) layout */
.auth-fullscreen { min-height: calc(100vh - 60px); display:flex; align-items:center; justify-content:center; padding: 40px 20px; }
.auth-form { width: 900px; max-width: 100%; display: block; background: linear-gradient(180deg,#ffffff,#f8fafc); padding: 28px; border-radius: 14px; box-shadow: 0 18px 48px rgba(2,6,23,0.08); }
.auth-form h2 { font-size: 32px; margin: 0 0 8px 0; color: #0b1220; }
.auth-form p.lead { font-size: 15px; color: #475569; margin-bottom: 12px; }
.auth-form label { display:block; font-weight:700; margin-top:12px; color:#0f172a; }
.auth-form input[type="text"], .auth-form input[type="email"], .auth-form input[type="password"], .auth-form select, .auth-form input[type="file"] { width:100%; padding:14px 16px; border-radius:12px; border:1px solid #e6eef7; font-size:16px; box-sizing:border-box; }
.auth-form .controls { display:flex; gap:12px; margin-top:18px; align-items:center; }
.auth-form .controls > * { min-height:48px; display:inline-flex; align-items:center; justify-content:center; }
.menu-button.large { padding:14px 26px; font-size:18px; border-radius:12px; }
.back-button { padding:12px 20px; font-size:15px; border-radius:10px; margin-top:0; }
.auth-warning { margin-top:12px; padding:12px; border-radius:10px; background:#fff7f6; border:1px solid #ffe3e3; color:#7f1d1d; font-weight:700; }

@media (max-width: 900px) {
    .auth-form { padding:18px; }
    .auth-form h2 { font-size:24px; }
    .menu-button.large { width:100%; }
}

/* --- Modernized homepage hero section --- */
.main-hero h1 {
  margin: 0 0 16px 0;
  font-size: 54px;
  color: #061226;
  text-shadow: 0 2px 12px rgba(255,255,255,0.7);
  font-weight: 900;
  letter-spacing: -1px;
}
.main-hero .lead {
  margin-bottom: 28px;
  font-size: 26px;
  color: #334155;
  max-width: 900px;
  font-weight: 600;
}
.hero-choices {
  display: flex;
  gap: 22px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
}
.hero-button {
  padding: 32px 64px;
  font-size: 2em;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(2,6,23,0.10);
  width: 380px;
  text-align: center;
  font-weight: 900;
  border: none;
  margin: 0 10px;
  transition: transform 0.22s cubic-bezier(.2,.9,.3,1), box-shadow 0.22s;
}
.hero-button#want-to-go {
  background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  color: #fff;
}
.hero-button#offer-help {
  background: linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
  color: #fff;
}
.hero-button:hover {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 24px 60px rgba(2,6,23,0.16);
  filter: brightness(1.08);
}
@media (max-width: 900px) {
  .hero-choices { flex-direction: column; gap: 16px; }
  .hero-button { width: 98vw; max-width: 420px; font-size: 1.2em; padding: 18px 0; }
  .main-hero h1 { font-size: 2.1em; }
  .main-hero .lead { font-size: 1.1em; }
}

/* --- Modernized profile card --- */
.profile-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 280px;
  padding: 26px 18px 22px 18px;
  margin: 18px;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(2,6,23,0.10);
  background: linear-gradient(180deg,#ffffff,#f1f5f9);
  border: 2.5px solid rgba(99,102,241,0.07);
  transition: box-shadow 0.22s, transform 0.18s;
}
.profile-card:hover {
  box-shadow: 0 32px 80px rgba(99,102,241,0.16);
  transform: translateY(-8px) scale(1.03);
  border-color: #6366f1;
}

/* --- Remove all legacy city-row and menu-button styles for city selection --- */
.city-row, .city-row .menu-button, .city-row .menu-button.selected-city {
  display: none !important;
}

/* --- Traveller/Guide city button: compact grid layout and search --- */
.city-list-container {
  max-width: 700px;
  margin: 0 auto 32px auto;
  padding: 0 12px;
}
.city-search-bar {
  width: 100%;
  max-width: 420px;
  margin: 0 auto 18px auto;
  display: block;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1.5px solid #d1d5db;
  font-size: 1.1em;
  box-shadow: 0 2px 8px rgba(2,6,23,0.04);
}
/* 10-column city grid, centered */
.city-grid-compact {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 18px 18px;
    justify-content: center;
    max-width: 1800px;
    margin: 0 auto 32px auto;
}
/* Modern blue, larger city buttons */
/* Larger city buttons for 10-column grid */
.city-grid-compact .menu-button {
    width: 170px !important;
    min-width: 150px !important;
    max-width: 200px !important;
    height: 90px !important;
    font-size: 1.35em !important;
    padding: 22px 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 32px rgba(37,99,235,0.13) !important;
    font-weight: 800 !important;
    background: linear-gradient(90deg, #3b82f6 0%, #6366f1 100%) !important;
    color: #fff !important;
    border: none !important;
    letter-spacing: 0.01em;
    transition: box-shadow 0.18s, background 0.18s, transform 0.13s;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.city-grid-compact .menu-button:hover {
    background: linear-gradient(90deg, #6366f1 0%, #3b82f6 100%) !important;
    box-shadow: 0 20px 48px rgba(37,99,235,0.20) !important;
    transform: translateY(-6px) scale(1.07);
}
@media (max-width: 1200px) {
    .city-grid-compact {
        grid-template-columns: repeat(5, 1fr);
        max-width: 98vw;
    }
    .city-grid-compact .menu-button {
        width: 38vw !important;
        min-width: 90px !important;
        max-width: 98vw !important;
        height: 70px !important;
        font-size: 1.08em !important;
    }
}
@media (max-width: 700px) {
    .city-grid-compact {
        grid-template-columns: repeat(3, 1fr);
        max-width: 99vw;
        gap: 8px;
    }
    .city-grid-compact .menu-button {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 46px !important;
        font-size: 0.82em !important;
        padding: 0 4px !important;
        border-radius: 10px !important;
    }
}

/* Recent profiles section — "What's happening" on homepage */
body.home #city-stats {
  background: linear-gradient(160deg, #ffffff 0%, #fffdf5 100%);
  border-radius: 24px;
  padding: 36px 32px 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(251,191,36,0.25);
  margin-top: 24px !important;
}
.recent-profiles-header { margin-bottom: 28px; text-align: center; }
.recent-profiles-header h2 {
  margin: 0 0 6px 0;
  font-size: 34px;
  color: #1c1917;
  font-weight: 900;
  font-family: Georgia, 'Times New Roman', serif;
  letter-spacing: -0.5px;
}
.recent-subtitle { margin: 0; color: #92400e; font-size: 15px; font-weight: 500; }

.recent-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 100%;
}

.recent-profile-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(2,6,23,0.05);
  box-shadow: 0 3px 10px rgba(2,6,23,0.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.recent-profile-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(2,6,23,0.09);
}
.recent-profile-card.rpc-me {
  border-color: rgba(99,102,241,0.18);
  background: linear-gradient(135deg, #f5f3ff, #eff6ff);
}

.rpc-avatar-wrap { flex: 0 0 auto; }
img.rpc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.rpc-avatar-swatch {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
  font-size: 1.15em;
  background: linear-gradient(135deg, #6366f1, #60a5fa);
}

.rpc-body { flex: 1; min-width: 0; }
.rpc-name {
  font-weight: 700;
  color: #0b1220;
  font-size: 0.93em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.rpc-city {
  color: #6b7280;
  font-size: 0.8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 6px;
}

.recent-show-more { text-align: center; margin-top: 20px; }
.recent-show-more .menu-button { font-size: 1em; padding: 14px 36px; }

@media (max-width: 1100px) {
  .recent-profiles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .recent-profiles-grid { grid-template-columns: 1fr; }
}

/* ── Google OAuth button ─────────────────────────────── */
.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1.5px solid #dadce0;
  background: #fff;
  color: #3c4043;
  font-weight: 700;
  font-size: 1em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.google-btn:hover {
  background: #f8f9fa;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  transform: translateY(-1px);
}

.apple-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  border-radius: 12px;
  border: none;
  background: #000;
  color: #fff;
  font-weight: 700;
  font-size: 1em;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
  box-sizing: border-box;
  margin-bottom: 16px;
}
.apple-btn:hover {
  background: #1a1a1a;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  transform: translateY(-1px);
}
body.dark .apple-btn {
  background: #fff;
  color: #000;
}
body.dark .apple-btn:hover {
  background: #e8e8e8;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  color: #9ca3af;
  font-size: 0.88em;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}


/* ══════════════════════════════════════════════
   MOBILE APP CHROME — hidden on desktop
   ══════════════════════════════════════════════ */

/* Mobile top header */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(48px + env(safe-area-inset-top, 0px));
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(5px) saturate(160%);
  -webkit-backdrop-filter: blur(5px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  z-index: 1100;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) 12px 0;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 20px rgba(0,0,0,0.06);
  box-sizing: border-box;
}
.mobile-header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex: 1;
}
.mobile-header-logo {
  height: 32px;
  width: auto;
  border-radius: 8px;
}
.mobile-header-title {
  font-weight: 800;
  color: #0b1220;
  font-size: 1.05em;
  letter-spacing: -0.01em;
}
.mobile-header-badge-link {
  text-decoration: none;
}
.mobile-header-unread {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 0.78em;
  font-weight: 800;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  padding: 0 6px;
}

/* ── Login/Register dropdown (above bottom nav) ── */
.bnav-auth-wrap {
  flex: 1;
  position: relative;
  display: flex;
}
.bnav-auth-btn {
  flex: 1;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  padding: 6px 0 4px;
}
.bnav-auth-menu {
  display: none;
  position: fixed;
  bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  right: 0;
  min-width: 200px;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: -2px -6px 28px rgba(2,6,23,0.14);
  border: 1.5px solid #e5e7eb;
  border-right: none;
  border-bottom: none;
  z-index: 1200;
  overflow: hidden;
}
.bnav-auth-menu.open {
  display: block;
  animation: bnav-slide-up 0.18s ease;
}
@keyframes bnav-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bnav-auth-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  text-decoration: none;
  color: #0b1220;
  font-weight: 700;
  font-size: 1em;
  transition: background 0.1s;
  -webkit-tap-highlight-color: transparent;
}
.bnav-auth-option:not(:last-child) { border-bottom: 1px solid #f3f4f6; }
.bnav-auth-option:active { background: #f0f4ff; color: #4f46e5; }

/* Bottom navigation bar */
.bottom-nav {
  display: none;
  position: fixed;
  left: 14px; right: 14px;
  /* Sit lower — absorb most of the home-indicator inset instead of floating above it. */
  bottom: max(4px, calc(env(safe-area-inset-bottom, 0px) - 12px));
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 30px;
  z-index: 1100;
  box-shadow: 0 8px 30px rgba(2,6,23,0.14);
  overflow: hidden;
}
/* Floating "liquid glass" pill — a translucent fill + blur, a bright specular top edge and a
   soft ambient shadow sell the glass. (True Apple Liquid Glass refraction is a native-only
   material; this is as close as a web layer can get.) */
.bottom-nav.liquid-glass {
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px) saturate(160%);
  -webkit-backdrop-filter: blur(5px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 12px 34px rgba(2,6,23,0.18),
    0 2px 8px rgba(2,6,23,0.06),
    inset 0 1px 0 rgba(255,255,255,0.75),
    inset 0 -1px 1px rgba(255,255,255,0.2);
}
.bottom-nav.liquid-glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.32) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
}
/* Same glass for app, PWA and browser. The pill floats inset over page content, so the blur
   samples the (light) page rather than the black native layer at the screen edge — that's why
   a transparent fill is safe here where the old full-width bar went black. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .bottom-nav.liquid-glass { background: rgba(255, 255, 255, 0.92); }
}
.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-decoration: none;
  color: #9ca3af;
  font-size: 0.52em;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: relative;
  transition: color 0.15s;
  -webkit-tap-highlight-color: transparent;
  padding: 22px 0 20px;
}
.bottom-nav-icon { font-size: 1.45em; line-height: 1; display: block; }
.bottom-nav-item.active { color: var(--accent, #6366f1); }
.bottom-nav-item:active { color: var(--accent, #4f46e5); }
.bottom-nav-label { display: block; }
.bottom-nav-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 24px);
  background: #fff;
  color: #000;
  font-size: 0.72em;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid #000;
}
.bottom-nav-badge--chat {
  background: #ef4444;
  color: #fff;
  border: 1.5px solid #fff;
}

/* Mobile flash (shown only on mobile) */
.flash-area-mobile { display: none; }

/* ══════════════════════════════════════════════
   MOBILE BREAKPOINT  ≤ 768 px
   ══════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 1 ── Desktop sidebar → gone */
  .sidebar { display: none !important; }

  /* 2 ── Mobile header → visible */
  .mobile-header { display: flex; }

  /* 3 ── Background; overflow is context-dependent below */
  html, body { background: var(--page-bg); }

  /* iOS PWA: fixed layout — viewport expansion trick requires overflow:hidden on html/body */
  html.is-pwa, html.is-pwa body { overflow: hidden; }
  /* html must be 100vh so the double-scrollTo on first touch fills the bottom dead zone */
  html.is-pwa {
    min-height: 100vh !important;
    overscroll-behavior-y: none;
    background: var(--page-bg);
  }

  /* Natural document scroll. NOTE: overflow-y:auto on <body> turns body into a scroll
     container whose height equals its content — on Android that traps touch-scroll on
     content (only fixed elements scroll). Keep the scroller on the root; body stays a
     normal flowing element so touches anywhere scroll the page. */
  html:not(.is-pwa) {
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  html:not(.is-pwa) body {
    overflow: visible;
    height: auto;
  }

  /* 4 ── Main */
  main {
    background: var(--page-bg);
    box-sizing: border-box;
    padding-top: calc(20px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(98px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* PWA: main is the scroll container, fills the full screen */
  html.is-pwa main {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
  /* Browser: document scrolls naturally, main flows normally */
  html:not(.is-pwa) main {
    position: static;
    overflow: visible;
    min-height: 100lvh; /* lvh = large viewport (URL bar hidden) — ensures page overflows visual viewport when URL bar is shown → iOS retracts it */
  }


  /* 5 ── Content with sidebar: reset desktop margins */
  .content-with-sidebar {
    margin-left: 0 !important;
    padding: 16px 12px !important;
  }

  /* 6 ── Bottom nav → visible */
  .bottom-nav { display: flex; }

  /* 7 ── Mobile flash messages (fixed overlay below header) */
  .flash-area-mobile {
    display: block;
    position: fixed;
    top: calc(20px + env(safe-area-inset-top, 0px) + 4px);
    left: 8px; right: 8px;
    z-index: 2000;
  }

  /* ── Map ── */
  #map {
    width: 100% !important;
    height: 44vh !important;
    max-height: none !important;
    margin: 8px 0 !important;
    border-radius: 10px;
  }

  /* ── Section padding ── */
  .section { padding: 8px 10px !important; }

  /* ── Hero buttons ── */
  .hero-button {
    width: 88vw !important;
    max-width: 440px !important;
    padding: 18px 0 !important;
    font-size: 1.3em !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }
  .hero-choices { flex-direction: column; gap: 12px; }
  .hero-logo { height: 100px !important; }
  .main-hero h1 { font-size: 1.8em !important; }
  .main-hero .lead { font-size: 1em !important; }

  /* ── Messages page ── */
  .messages-grid {
    grid-template-columns: 1fr !important;
    padding: 10px !important;
    gap: 10px !important;
    border-radius: 14px;
  }
  .conversation-item {
    padding: 14px 14px !important;
    min-height: 70px !important;
    border-radius: 14px !important;
  }
  .conv-avatar {
    width: 48px !important;
    height: 48px !important;
    margin-right: 12px !important;
    font-size: 1.35em !important;
    border-radius: 12px !important;
  }
  .conv-img { width: 48px !important; height: 48px !important; }
  .conv-name { font-size: 1em !important; }
  .conv-preview { font-size: 0.88em !important; }
  .conv-meta { margin-left: 8px !important; min-width: 50px !important; }
  .conv-time { font-size: 0.82em !important; }

  /* ── Chat / profile view ── */
  .profile-grid { grid-template-columns: 1fr !important; }
  .chat-panel { min-height: 55vh !important; }
  .message { max-width: 88% !important; font-size: 14px !important; }
  .chat-input { gap: 8px !important; padding-top: 10px !important; }
  .chat-input input { padding: 12px !important; font-size: 14px !important; }
  .chat-input .send-btn { padding: 10px 14px !important; min-width: 60px !important; }

  /* ── Profile modal ── */
  #profile-modal { padding: 8px !important; }
  #profile-modal-content {
    margin: 50px auto 8px !important;
    padding: 18px !important;
    max-height: 82vh !important;
    border-radius: 14px !important;
  }

  /* ── Full-screen page wraps: fit visible area between header and bottom nav ── */
  .myp-wrap,
  .login-wrap,
  .reg-wrap,
  .edit-wrap {
    min-height: 100% !important;
    box-sizing: border-box;
  }

  /* ── My profile card ── */
  .myp-wrap { padding: 8px !important; }
  .myp-card { max-width: 100% !important; border-radius: 18px !important; }

  /* ── Edit profile / auth pages ── */
  .auth-fullscreen { padding: 12px !important; }
  .auth-form { padding: 20px 16px !important; border-radius: 16px !important; }
  .auth-form h2 { font-size: 22px !important; }

  /* ── City grid: 3 compact columns ── */
  .city-grid-compact {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-width: 100% !important;
  }
  .city-grid-compact .menu-button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 46px !important;
    font-size: 0.82em !important;
    padding: 0 4px !important;
    border-radius: 10px !important;
  }

  /* ── City people list (profile cards after selecting a city) ── */
  #city-people {
    width: 100% !important;
    padding: 0 !important;
  }
  .city-people-list {
    gap: 8px !important;
    padding: 8px 4px !important;
  }
  .city-people-list .profile-card {
    width: calc(50% - 8px) !important;
    margin: 0 !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
    min-width: 0 !important;
  }

  /* ── City search ── */
  .city-search-bar { padding: 12px 14px !important; font-size: 1em !important; }
  .city-list-container { padding: 0 4px !important; }

  /* ── Mode page header ── */
  .mode-page-header { padding: 6px 0 2px !important; }
  .mode-page-title { font-size: 16px !important; }

  /* ── Recent profiles grid ── */
  .recent-profiles-grid { grid-template-columns: 1fr !important; }

  /* ── People columns (city detail) ── */
  .people-columns { grid-template-columns: 1fr !important; }
  .city-overview-card { padding: 10px !important; }

  /* ── Toast: centered above bottom nav on mobile ── */
  #global-toast-container {
    bottom: 76px !important;
    width: calc(100% - 28px) !important;
    max-width: none !important;
  }

  /* ── Inbox section ── */
  .inbox-wrapper { padding: 0 !important; }

  /* ── Auth form controls ── */
  .auth-form .controls { flex-direction: column; }
  .auth-form .controls > * { width: 100%; }
  .menu-button.large { width: 100% !important; }
}

/* ══ iPad / tablet — full-width mobile layout ══════════════════════════ */

/* Hide desktop overlay on tablet/iPad */
html.is-tablet #desktop-guide { display: none !important; }

/* Show mobile chrome full-width */
html.is-tablet .mobile-header { display: flex !important; }
html.is-tablet .bottom-nav    { display: flex !important; }
html.is-tablet .flash-area-mobile {
  display: block !important;
  position: fixed !important;
  top: calc(56px + env(safe-area-inset-top, 0px) + 4px) !important;
  left: 12px !important;
  right: 12px !important;
  z-index: 2000 !important;
}

/* iPad — bigger header and bottom nav (~2× mobile size) */
html.is-tablet .mobile-header {
  height: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  padding-bottom: 8px !important;
}
html.is-tablet .mobile-header-logo { height: 28px !important; }
html.is-tablet .bottom-nav-item {
  padding: 14px 0 10px !important;
  font-size: 0.65em !important;
}
html.is-tablet .bottom-nav-icon { font-size: 2.2em !important; }

/* Prevent body scrolling on iPad so fixed nav stays pinned */
html.is-tablet,
html.is-tablet body {
  overflow: hidden !important;
}

/* Reset the desktop sidebar margin so content fills full width */
html.is-tablet main {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  margin-left: 0 !important;
  padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  zoom: 0.82;
}

html.is-tablet .pv-wrap {
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

html.is-tablet .content-with-sidebar {
  margin-left: 0 !important;
  padding: 20px 24px !important;
}

/* Landing page — show install instructions on tablet */
html.is-tablet .landing-mobile-info { display: block !important; }