/* =========================================================
   FamilyChat mobile refresh
   Focused on making the mobile experience cleaner and calmer.
   ========================================================= */

:root {
  --fc-mobile-bg: #f5f6fb;
  --fc-mobile-surface: rgba(255, 255, 255, 0.96);
  --fc-mobile-surface-2: #fbfbff;
  --fc-mobile-border: rgba(221, 226, 240, 0.92);
  --fc-mobile-shadow: 0 14px 36px rgba(33, 38, 63, 0.08);
  --fc-mobile-shadow-soft: 0 8px 20px rgba(33, 38, 63, 0.05);
  --fc-mobile-radius-xl: 28px;
  --fc-mobile-radius-lg: 22px;
  --fc-mobile-radius-md: 18px;
  --fc-mobile-radius-sm: 14px;
}

@media (max-width: 820px) {
  html,
  body,
  .app,
  .main-layout {
    background:
      radial-gradient(circle at 0% 0%, rgba(109, 93, 252, 0.12), transparent 24%),
      radial-gradient(circle at 100% 12%, rgba(88, 157, 255, 0.08), transparent 24%),
      linear-gradient(180deg, #fbfbff 0%, #f4f6fb 100%);
  }

  body {
    color: #101828;
  }

  .top-header.smart-header {
    height: 86px !important;
    padding-top: max(16px, env(safe-area-inset-top)) !important;
    padding-bottom: 16px !important;
    padding-left: max(18px, env(safe-area-inset-left)) !important;
    padding-right: max(18px, env(safe-area-inset-right)) !important;
    background: rgba(255,255,255,0.86) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(226,230,242,0.8);
  }

  .smart-header-logo {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .smart-header-title h1 {
    font-size: 0px;
    margin: 0;
  }

  .smart-header-title p {
    font-size: 12px;
  }

  .main-layout {
    padding: 0 !important;
    gap: 0 !important;
  }

  .full-page-panel,
  .message-list-panel,
  .chat-panel {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 20px 16px calc(120px + env(safe-area-inset-bottom)) !important;
  }

  .panel-header,
  .tab-page-header {
    padding: 0 2px;
    margin-bottom: 18px !important;
  }

  .tab-page-header h2,
  .panel-header h2 {
    font-size: 26px !important;
    line-height: 1.02;
    color: #0f1728;
  }

  .tab-page-header > div > p:last-child,
  .panel-header > div > p:last-child {
    font-size: 14px;
    color: #667085;
    line-height: 1.5;
    max-width: 34ch;
  }

  .tab-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(109, 93, 252, 0.08);
    color: #7468ee;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
  }

  .primary-tab-button,
  .secondary-settings-button,
  .friend-message-button,
  .friend-plan-button,
  .friend-request-button,
  .family-map-action,
  .family-map-secondary,
  .family-map-primary,
  .share-location-button {
    min-height: 46px;
    border-radius: 16px !important;
    font-weight: 800 !important;
    box-shadow: none;
  }

  .tab-card,
  .overview-card,
  .friend-card,
  .friend-request-card,
  .family-member-card,
  .family-activity-item,
  .settings-menu-card,
  .settings-detail-card,
  .profile-summary-card,
  .conversation,
  .chat-details-card,
  .chat-details-map-wrap {
    background: var(--fc-mobile-surface) !important;
    border: 1px solid var(--fc-mobile-border) !important;
    box-shadow: var(--fc-mobile-shadow) !important;
    border-radius: var(--fc-mobile-radius-lg) !important;
  }

  .message-list-panel .panel-header + .message-search,
  .message-search,
  .friends-search,
  .global-search {
    border-radius: 18px !important;
    min-height: 56px;
    padding: 0 18px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid rgba(225, 230, 242, 0.94) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9) !important;
  }

  .message-tabs,
  .friends-filter-tabs,
  .settings-menu {
    gap: 10px !important;
    margin: 16px 0 18px !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .message-tabs::-webkit-scrollbar,
  .friends-filter-tabs::-webkit-scrollbar,
  .settings-menu::-webkit-scrollbar {
    display: none;
  }

  .message-tabs button,
  .friend-filter,
  .settings-menu-item {
    border-radius: 999px !important;
    min-height: 44px;
    padding: 0 18px !important;
    background: rgba(245, 246, 251, 0.9) !important;
    border: 1px solid transparent !important;
    color: #5b647c !important;
    font-weight: 800 !important;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .message-tabs button.active,
  .friend-filter.active,
  .settings-menu-item.active {
    background: linear-gradient(135deg, rgba(109,93,252,0.16), rgba(109,93,252,0.08)) !important;
    color: #5b35f5 !important;
    border-color: rgba(109,93,252,0.18) !important;
  }

  .conversation-list,
  .friends-list,
  .family-list,
  .friend-requests-list,
  .friend-groups-list,
  .family-activity-list {
    gap: 14px !important;
  }

  .conversation {
    padding: 16px !important;
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    gap: 14px;
  }

  .conversation.active,
  .conversation:hover {
    background: linear-gradient(135deg, rgba(109,93,252,0.08), rgba(255,255,255,0.98)) !important;
    border-color: rgba(109,93,252,0.18) !important;
    transform: translateY(-1px);
  }

  .conversation img,
  .friend-avatar img,
  .family-avatar img,
  .profile-summary-avatar,
  .settings-avatar {
    box-shadow: var(--fc-mobile-shadow-soft);
  }

  .friends-dashboard-grid,
  .family-dashboard-grid,
  .overview-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }

  .overview-card {
    min-height: 92px;
    padding: 14px 12px !important;
    border-radius: 20px !important;
  }

  .overview-card strong {
    font-size: 28px !important;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .overview-card p {
    font-size: 12px !important;
    line-height: 1.2;
  }

  .overview-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }

  .friends-toolbar {
    gap: 12px !important;
    margin-bottom: 18px !important;
  }

  .friends-content-grid,
  .family-content-grid,
  .settings-content-grid {
    gap: 16px !important;
  }

  .friend-card,
  .family-member-card {
    padding: 16px !important;
  }

  .friend-card {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .friend-main,
  .family-member-main {
    min-width: 0;
  }

  .friend-actions,
  .family-member-actions {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px !important;
    margin-top: 8px;
  }

  .family-member-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .friend-message-button,
  .friend-plan-button,
  .family-member-actions button {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center;
    border-radius: 14px !important;
    background: #f7f6ff !important;
    border: 1px solid rgba(229, 231, 242, 0.96) !important;
  }

  .friend-plan-button {
    background: #f3fbf5 !important;
    color: #16844e !important;
  }

  .family-member-top,
  .friend-name-row {
    align-items: flex-start !important;
  }

  .family-relationship,
  .friend-badge,
  .family-map-badge {
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px !important;
    font-weight: 900 !important;
    background: rgba(109,93,252,0.1) !important;
    color: #5b35f5 !important;
  }

  .family-location,
  .friend-handle,
  .friend-status,
  .family-meta-row span {
    font-size: 13px !important;
  }

  .family-side-column {
    gap: 16px !important;
  }

  .family-map-card {
    overflow: visible !important;
  }

  .family-map-preview {
    height: 350px !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    border-radius: 24px !important;
    border: 1px solid rgba(223, 228, 241, 0.98) !important;
    background: linear-gradient(180deg, #f8fbf8 0%, #eef4ef 100%) !important;
    box-shadow: var(--fc-mobile-shadow) !important;
    text-align: left !important;
  }

  .family-map-preview > div {
    padding: 0 !important;
  }

  .family-map-graphic {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background:
      radial-gradient(circle at 18% 28%, rgba(153, 222, 171, 0.35), transparent 18%),
      radial-gradient(circle at 82% 22%, rgba(181, 218, 255, 0.55), transparent 20%),
      radial-gradient(circle at 14% 84%, rgba(181, 218, 255, 0.42), transparent 18%),
      linear-gradient(180deg, #f7faf6 0%, #eff5f0 100%);
  }

  .family-map-graphic::before,
  .family-map-graphic::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .family-map-graphic::before {
    background-image:
      linear-gradient(rgba(255,255,255,0.35) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.35) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.42;
  }

  .family-map-graphic::after {
    background:
      radial-gradient(circle at 70% 28%, rgba(109,93,252,0.08), transparent 24%),
      radial-gradient(circle at 36% 62%, rgba(109,93,252,0.06), transparent 18%);
  }

  .family-map-water,
  .family-map-park,
  .family-map-road,
  .family-map-route,
  .family-map-home {
    position: absolute;
  }

  .family-map-water {
    right: -8%;
    top: 8%;
    width: 42%;
    height: 58%;
    background: linear-gradient(180deg, #cfe9ff, #a8d5ff);
    border-radius: 48% 0 0 52%;
    opacity: 0.9;
    filter: saturate(0.95);
  }

  .family-map-park.park-a {
    left: -6%;
    top: 10%;
    width: 32%;
    height: 22%;
    border-radius: 50%;
    background: rgba(166, 222, 171, 0.46);
  }

  .family-map-park.park-b {
    left: 58%;
    bottom: 26%;
    width: 28%;
    height: 18%;
    border-radius: 50%;
    background: rgba(166, 222, 171, 0.36);
  }

  .family-map-road {
    border-radius: 999px;
    background: rgba(255,255,255,0.9);
    box-shadow: 0 0 0 1px rgba(224,229,239,0.55);
  }

  .family-map-road.road-a {
    left: -8%; top: 24%; width: 68%; height: 16px; transform: rotate(26deg);
  }
  .family-map-road.road-b {
    left: 14%; top: 42%; width: 78%; height: 14px; transform: rotate(-16deg);
  }
  .family-map-road.road-c {
    left: 6%; top: 64%; width: 62%; height: 12px; transform: rotate(22deg);
  }
  .family-map-road.road-d {
    left: 46%; top: 10%; width: 14px; height: 72%; transform: rotate(8deg);
  }

  .family-map-route {
    left: 26%;
    top: 22%;
    width: 46%;
    height: 42%;
    border: 4px dashed rgba(109, 93, 252, 0.82);
    border-radius: 38px 56px 38px 58px;
    border-left-width: 5px;
    border-right: 0;
    border-bottom: 0;
    transform: rotate(15deg);
    opacity: 0.95;
  }

  .family-map-home {
    left: 49%;
    top: 44%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255,255,255,0.95);
    color: #5b35f5;
    box-shadow: 0 10px 22px rgba(33,38,63,0.12);
    font-size: 15px;
  }

  .family-map-pin {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    padding: 4px;
    background: linear-gradient(180deg, #ffffff, #f0ebff);
    box-shadow: 0 16px 30px rgba(33,38,63,0.18);
    border: 3px solid rgba(109,93,252,0.18);
    z-index: 2;
  }

  .family-map-pin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .family-map-pin::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    background: #6d5dfc;
    border-radius: 0 0 14px 14px;
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    filter: drop-shadow(0 8px 12px rgba(109,93,252,0.32));
  }

  .family-map-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.94);
    color: #344054;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 10px 20px rgba(33,38,63,0.08);
    z-index: 2;
  }

  .family-map-chip .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
  }

  .family-map-locate {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(223, 228, 241, 0.9);
    background: rgba(255,255,255,0.94);
    color: #5b35f5;
    box-shadow: 0 10px 20px rgba(33,38,63,0.08);
    z-index: 3;
  }

  .family-map-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 14px;
    border-radius: 22px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(224, 228, 240, 0.96);
    box-shadow: 0 16px 30px rgba(33,38,63,0.12);
    z-index: 4;
  }

  .family-map-overlay-head {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
  }

  .family-map-overlay-head img {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 50%;
  }

  .family-map-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
  }

  .family-map-name-row strong {
    font-size: 18px;
    letter-spacing: -0.03em;
    color: #111827;
  }

  .family-map-overlay p {
    margin: 0;
    color: #667085;
    font-size: 13px;
    line-height: 1.35;
  }

  .family-map-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
  }

  .family-map-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-radius: 999px;
    background: #f8f8fe;
    color: #475467;
    font-size: 12px;
    font-weight: 800;
  }

  .family-map-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 14px;
  }

  .family-map-primary,
  .family-map-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: 0;
    cursor: pointer;
  }

  .family-map-primary {
    background: linear-gradient(135deg, #6d5dfc, #5b35f5) !important;
    color: white !important;
  }

  .family-map-secondary {
    background: #f7f6ff !important;
    color: #5b35f5 !important;
    border: 1px solid rgba(223,228,241,0.96) !important;
  }

  .family-activity-item {
    align-items: start;
    padding: 14px !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
  }

  .family-privacy-card {
    padding: 18px !important;
  }

  .settings-page-panel .tab-page-header {
    margin-bottom: 16px !important;
  }

  .settings-hero-cards,
  .settings-dashboard-grid {
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .settings-menu-card,
  .settings-detail-card {
    padding: 14px !important;
  }

  .settings-menu-item {
    min-width: max-content;
  }

  .settings-menu-item i {
    margin-right: 8px;
  }

  .mobile-bottom-nav {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    height: 76px !important;
    padding: 10px !important;
    border-radius: 28px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid rgba(223,228,241,0.96) !important;
    box-shadow: 0 18px 44px rgba(33,38,63,0.16) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav .side-tab {
    min-width: 0;
    height: 56px !important;
    padding: 0 !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8b93a9 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
  }

  .mobile-bottom-nav .side-tab i {
    font-size: 22px !important;
    margin: 0 !important;
  }

  .mobile-bottom-nav .side-tab.active {
    background: linear-gradient(135deg, rgba(109,93,252,0.16), rgba(109,93,252,0.08)) !important;
    color: #5b35f5 !important;
    box-shadow: inset 0 0 0 1px rgba(109,93,252,0.12);
  }
}

@media (max-width: 440px) {
  .friends-dashboard-grid,
  .family-dashboard-grid,
  .overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .overview-card {
    min-height: 84px;
    padding: 12px 10px !important;
  }

  .overview-card strong {
    font-size: 24px !important;
  }

  .family-map-preview {
    height: 334px !important;
  }

  .family-map-overlay {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 12px;
  }

  .family-map-overlay-head {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .family-map-overlay-head > :last-child {
    grid-column: 2;
    justify-self: start;
  }

  .family-map-actions {
    grid-template-columns: 1fr;
  }
}

/* Family location map override: keep selected member map large and app-like on phones. */
@media (max-width: 820px) {
  .family-location-layout {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "map"
      "members"
      "side" !important;
    gap: 16px !important;
  }

  .family-location-layout > .family-map-card { grid-area: map !important; }
  .family-location-layout > .family-members-card { grid-area: members !important; }
  .family-location-layout > .family-side-column { grid-area: side !important; }

  .family-map-card {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 26px !important;
  }

  .family-map-card-header {
    padding: 18px 18px 12px !important;
    margin: 0 !important;
  }

  .family-map-preview {
    height: min(620px, calc(100vh - 190px)) !important;
    min-height: 515px !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 0 26px 26px !important;
    background: #eef6ef !important;
    text-align: left !important;
  }

  .family-map-preview > div:not(.family-map-empty-state) {
    padding: 0 !important;
  }

  .family-map-empty-state {
    height: 100%;
    min-height: 420px;
    display: grid !important;
    place-items: center;
    align-content: center;
    text-align: center;
  }

  .family-map-graphic {
    background:
      radial-gradient(circle at 18% 18%, rgba(172, 224, 180, 0.62), transparent 21%),
      radial-gradient(circle at 84% 16%, rgba(172, 224, 180, 0.42), transparent 18%),
      radial-gradient(circle at 9% 78%, rgba(178, 220, 255, 0.64), transparent 22%),
      linear-gradient(180deg, #f6fbf5 0%, #eaf3ed 100%) !important;
  }

  .family-map-water {
    right: -10% !important;
    top: 10% !important;
    width: 42% !important;
    height: 76% !important;
    border-radius: 48% 0 0 52% !important;
  }

  .family-map-road.road-a { left: -14% !important; top: 20% !important; width: 82% !important; height: 21px !important; transform: rotate(20deg) !important; }
  .family-map-road.road-b { left: 14% !important; top: 38% !important; width: 100% !important; height: 20px !important; transform: rotate(-18deg) !important; }
  .family-map-road.road-c { left: -10% !important; top: 61% !important; width: 92% !important; height: 18px !important; transform: rotate(-30deg) !important; }
  .family-map-road.road-d { left: 44% !important; top: -12% !important; width: 18px !important; height: 96% !important; transform: rotate(18deg) !important; }
  .family-map-road.road-e { left: 5% !important; top: 78% !important; width: 76% !important; height: 16px !important; transform: rotate(28deg) !important; }

  .family-map-route {
    left: -6% !important;
    top: 43% !important;
    width: 74% !important;
    height: 39% !important;
    border: 6px solid transparent !important;
    border-top-color: rgba(91,53,245,0.78) !important;
    border-right-color: rgba(91,53,245,0.78) !important;
    border-radius: 18% 58% 32% 40% !important;
    transform: rotate(-23deg) !important;
    opacity: 1 !important;
  }

  .family-map-home { display: none !important; }
  .family-map-house { display: grid !important; }

  .family-map-toolbar {
    right: 16px !important;
    top: 16px !important;
  }

  .family-map-locate {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }

  .family-map-pin {
    width: 72px !important;
    height: 72px !important;
    border-radius: 999px !important;
    padding: 5px !important;
    border: 4px solid rgba(91,53,245,0.24) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f0ecff 100%) !important;
    transform: translate(-50%, -50%) !important;
  }

  .family-map-pin::after {
    bottom: -15px !important;
  }

  .family-map-context-chip,
  .family-map-chip {
    min-height: 35px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }

  .family-map-context-chip-home { left: 8% !important; top: 25% !important; }
  .family-map-context-chip-school { right: 4% !important; top: 42% !important; }
  .family-map-context-chip-park { left: 18% !important; bottom: 28% !important; }

  .family-map-overlay {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,0.96) !important;
  }

  .family-map-route-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  .family-map-route-header h4 {
    font-size: 19px !important;
  }

  .family-map-overlay-head {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
  }

  .family-map-overlay-head img {
    width: 54px !important;
    height: 54px !important;
  }

  .family-map-name-row strong {
    font-size: 18px !important;
  }

  .family-map-meta {
    gap: 7px !important;
    margin-top: 9px !important;
  }

  .family-map-meta span {
    padding: 7px 9px !important;
    font-size: 11px !important;
  }

  .family-map-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin-top: 13px !important;
  }

  .family-map-primary,
  .family-map-secondary {
    min-height: 46px !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 440px) {
  .family-map-preview {
    height: min(610px, calc(100vh - 176px)) !important;
    min-height: 500px !important;
  }

  .family-map-route-header h4 {
    font-size: 18px !important;
  }

  .family-map-context-chip-park {
    display: none !important;
  }
}

/* Family map mobile patch: keep selected-member map clear and compact. */
@media (max-width: 820px) {
  .smart-header-title h1 {
    font-size: 28px !important;
    letter-spacing: -0.06em !important;
  }

  .smart-header-title p {
    display: none !important;
  }

  .family-map-preview.has-active-location i,
  .family-map-preview .family-map-graphic i,
  .family-map-preview .family-map-overlay i,
  .family-map-preview .family-map-toolbar i,
  .family-map-preview .family-map-context-chip i,
  .family-map-preview .family-map-chip i,
  .family-map-preview .family-map-mini-pin i,
  .family-map-preview .family-map-tree i,
  .family-map-preview .family-map-house i {
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
    place-items: normal !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    font-size: inherit !important;
    box-shadow: none !important;
  }

  .family-map-card-header {
    display: none !important;
  }

  .family-map-preview {
    height: min(610px, calc(100vh - 250px)) !important;
    min-height: 470px !important;
    border-radius: 30px !important;
  }

  .family-map-member-card {
    display: grid !important;
    grid-template-columns: 62px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "avatar copy menu"
      "avatar copy view" !important;
    align-items: center !important;
    gap: 8px 12px !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    padding: 14px !important;
    border-radius: 28px !important;
  }

  .family-map-card-avatar {
    grid-area: avatar !important;
    width: 62px !important;
    height: 62px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
  }

  .family-map-card-copy {
    grid-area: copy !important;
    min-width: 0 !important;
  }

  .family-map-menu {
    grid-area: menu !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    align-self: start !important;
    border-radius: 14px !important;
    background: transparent !important;
    color: #8b93a9 !important;
  }

  .family-map-view-button {
    grid-area: view !important;
    min-width: 82px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
  }

  .family-map-member-card .family-map-meta {
    gap: 8px !important;
    margin-top: 7px !important;
  }

  .family-map-member-card .family-map-meta span {
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #707890 !important;
    font-size: 11px !important;
  }
}

@media (max-width: 440px) {
  .family-map-preview {
    height: min(590px, calc(100vh - 230px)) !important;
    min-height: 455px !important;
  }
}
/* Chat list should fill down to the bottom menu */
@media (max-width: 820px) {
  #messagesTab {
    height: calc(100dvh - 64px - 78px - env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #messagesTab .message-list-panel {
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  #messagesTab .panel-header,
  #messagesTab .message-search,
  #messagesTab .message-tabs {
    flex: 0 0 auto !important;
  }

  #messagesTab .conversation-list {
    height: auto !important;
    max-height: none !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 0 10px calc(14px + env(safe-area-inset-bottom)) !important;
    scrollbar-width: none;
  }

  #messagesTab .conversation-list::-webkit-scrollbar {
    display: none;
  }
}
/* Mobile centered Family Chat header — desktop untouched */
.smart-header-title span {
  display: inline;
}

.smart-header-title span + span::before {
  content: " ";
}

@media (max-width: 820px) {
  .top-header.smart-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    height: 76px !important;
    padding: max(10px, env(safe-area-inset-top)) 16px 10px !important;
    display: grid !important;
    grid-template-columns: 52px 1fr 52px !important;
    align-items: center !important;
  }

  .smart-header-menu,
  .sidebar-toggle,
  .hamburger,
  .menu-toggle {
    grid-column: 1 !important;
    justify-self: start !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .smart-header-brand {
    grid-column: 2 !important;
    justify-self: center !important;
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .smart-header-logo {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #7449ff, #4f25e8) !important;
    color: #fff !important;
    flex: 0 0 auto !important;
  }

  .smart-header-title {
    display: block !important;
  }

.smart-header-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 1px !important;
  margin: 0 !important;

  font-family: "SF Pro Display", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
  font-size: 22px !important;
  line-height: 0.88 !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em !important;

  color: #111827 !important;
  text-rendering: geometricPrecision;
}
.smart-header-title span:first-child {
  font-size: 21px !important;
  font-weight: 800 !important;
}

.smart-header-title span:last-child {
  font-size: 24px !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
}
@media (max-width: 820px) {
  .smart-header-logo {
    width: 46px !important;
    height: 46px !important;
    border-radius: 17px !important;
    box-shadow: 0 10px 24px rgba(91, 54, 242, 0.24) !important;
  }
}

  .smart-header-title .mobile-brand-stack span {
    display: block !important;
  }

  .smart-header-title span + span::before {
    content: "" !important;
  }

  .smart-header-title p,
  .smart-header-search,
  .smart-header-actions {
    display: none !important;
  }
}
/* Final mobile app logo override */
@media (max-width: 820px) {
  .top-header.smart-header .smart-header-brand .smart-header-title h1.mobile-brand-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    font-family: "Avenir Next", "SF Pro Display", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif !important;
    font-size: 22px !important;
    line-height: 0.82 !important;
    font-weight: 900 !important;
    letter-spacing: -0.055em !important;

    color: #111827 !important;
    text-transform: none !important;
    white-space: normal !important;
  }

  .top-header.smart-header .smart-header-brand .smart-header-title h1.mobile-brand-stack span {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0.88 !important;
    font-family: inherit !important;
    letter-spacing: inherit !important;
  }

  .top-header.smart-header .smart-header-brand .smart-header-title h1.mobile-brand-stack span:first-child {
    font-size: 15px !important;
    font-weight: 800 !important;
  }

  .top-header.smart-header .smart-header-brand .smart-header-title h1.mobile-brand-stack span:last-child {
    font-size: 25px !important;
    font-weight: 950 !important;
    letter-spacing: -0.065em !important;
  }

  .top-header.smart-header .smart-header-brand .smart-header-title p {
    display: none !important;
  }
}
/* Smaller styled tracking badge under Family Chat */
/* Tracking badge below mobile Family Chat logo */
#familyTrackingHeaderBadge {
  display: none;
}

@media (max-width: 820px) {
  .top-header.smart-header {
    position: sticky !important;
    top: 0 !important;
    height: 94px !important;
    overflow: visible !important;
  }

  #familyTrackingHeaderBadge {
    position: absolute !important;
    left: 50% !important;
    bottom: 7px !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;

    width: max-content !important;
    height: 17px !important;
    min-height: 17px !important;
    padding: 0 7px !important;

    border-radius: 999px !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(248, 250, 252, 0.96) !important;
    color: #64748b !important;

    font-family: "Inter", "SF Pro Display", system-ui, -apple-system, sans-serif !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.045em !important;
    text-transform: uppercase !important;

    box-shadow:
      0 4px 12px rgba(79, 70, 229, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;

    pointer-events: none !important;
    user-select: none !important;
    cursor: default !important;
  }

  #familyTrackingHeaderText {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    color: inherit !important;
    font: inherit !important;
    line-height: 1 !important;
  }

  #familyTrackingHeaderBadge .family-tracking-header-dot {
    width: 5px !important;
    height: 5px !important;
    min-width: 5px !important;
    min-height: 5px !important;
    border-radius: 999px !important;
    flex: 0 0 5px !important;
    background: #94a3b8 !important;
  }

  #familyTrackingHeaderBadge.is-on {
    border-color: rgba(16, 185, 129, 0.2) !important;
    background: rgba(236, 253, 245, 0.96) !important;
    color: #059669 !important;
  }

  #familyTrackingHeaderBadge.is-on .family-tracking-header-dot {
    background: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.13) !important;
  }

  #familyTrackingHeaderBadge.is-off {
    border-color: rgba(148, 163, 184, 0.22) !important;
    background: rgba(248, 250, 252, 0.96) !important;
    color: #64748b !important;
  }

  #familyTrackingHeaderBadge.is-off .family-tracking-header-dot {
    background: #94a3b8 !important;
    box-shadow: none !important;
  }
}
/* Add breathing room between mobile logo and tracking badge */
@media (max-width: 820px) {
  .top-header.smart-header {
    height: 102px !important;
  }

  #familyTrackingHeaderBadge {
    bottom: 8px !important;
  }

  .smart-header-brand {
    transform: translateY(-5px) !important;
  }
}