/* Friends on the map (src/friends-map.js): a dot with the friend's initial, their name and how long ago. */
.friend-marker { display:flex; flex-direction:column; align-items:center; gap:3px; padding:0; border:0; background:none; cursor:pointer; font:inherit; -webkit-tap-highlight-color:transparent; }
.friend-marker .friend-dot { width:26px; height:26px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; box-shadow:0 1px 6px #0006; color:#fff; font:700 12px/1 system-ui,sans-serif; }
.friend-marker .friend-label { padding:2px 7px; border-radius:999px; background:#16181ce6; color:#fff; font:650 11px/1.25 system-ui,sans-serif; white-space:nowrap; box-shadow:0 2px 6px #0004; }
.friend-marker .friend-label small { color:#c3c9d1; font-weight:500; font-size:10.5px; }
.friend-marker.stale { opacity:.55; }
.friend-marker.stale .friend-dot { filter:grayscale(.6); }
.vertex-v3 #app .friend-card { position:fixed; z-index:46; left:0; right:0; bottom:0; display:grid; gap:12px; padding:14px 16px calc(14px + env(safe-area-inset-bottom)); border:1px solid #ffffff1c; border-bottom:0; border-radius:22px 22px 0 0; background:var(--ui-base,#1e2126); color:var(--ui-text,#fff); box-shadow:0 -8px 24px #0006; }
.vertex-v3 #app .friend-card[hidden] { display:none; }
.vertex-v3 #app .friend-card-head { display:flex; align-items:center; gap:12px; }
.vertex-v3 #app .friend-card-head>div { flex:1; min-width:0; }
.vertex-v3 #app .friend-card-avatar { flex:none; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; border:3px solid #fff; background:var(--friend,#3b82f6); color:#fff; font:700 19px/1 system-ui,sans-serif; }
.vertex-v3 #app .friend-card h2 { margin:0; font:650 19px/1.2 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .friend-card-head small { display:block; margin-top:2px; color:var(--ui-muted,#9aa3ad); font:500 13px/1.3 system-ui,sans-serif; }
.vertex-v3 #app :is(#closeFriendCard,#closeMessageCard) { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:#ffffff14; color:inherit; font-size:22px; line-height:1; }
.vertex-v3 #app .friend-card-stats { display:flex; gap:22px; }
.vertex-v3 #app .friend-card-stats p { margin:0; display:grid; gap:2px; }
.vertex-v3 #app .friend-card-stats b { font:650 18px/1.2 system-ui,sans-serif; white-space:nowrap; }
.vertex-v3 #app .friend-card-stats small { color:var(--ui-muted,#9aa3ad); font-size:12.5px; }
.vertex-v3 #app .friend-card-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.vertex-v3 #app .friend-card-actions button { min-height:46px; padding:6px 10px; border:0; border-radius:999px; background:#2a2e35; color:#fff; font:650 15px/1.2 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .friend-card-actions button.primary { background:#3b82f6; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#friendCard,#messageCard):not([hidden]) { bottom:var(--nav-h)!important; }
@media (min-width:900px) { .vertex-v3 #app .friend-card { left:var(--desk-card-left,12px); right:auto; bottom:16px; width:var(--desk-card,376px); border-radius:22px; border-bottom:1px solid #ffffff1c; } }
/* Sharing is on: a green ring on the account button. */
#shellAvatar.friend-sharing { box-shadow:0 0 0 2px #1e2126, 0 0 0 4px #22c55e; }
/* The account menu row "Show me to friends" carries the app's one switch (grey, white knob, blue when on). */
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-switch { flex:none; position:relative; width:44px; height:26px; border-radius:13px; background:#3a3f48; transition:background .15s; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#e6e9ee; box-shadow:0 1px 3px #00000060; transition:transform .15s; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu [aria-checked="true"] .shell-menu-switch { background:#3b82f6; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu [aria-checked="true"] .shell-menu-switch::after { background:#fff; transform:translateX(18px); }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app:has(#friendCard:not([hidden])) #thumbRail { bottom:calc(var(--nav-h) + var(--friend-card-h,250px) + 12px)!important; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app:has(#messageCard:not([hidden])) #thumbRail { bottom:calc(var(--nav-h) + var(--message-card-h,250px) + 12px)!important; }
.vertex-v3 #app .friend-card-stats p[hidden] { display:none; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-two { display:flex; flex-direction:column; gap:3px; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu .shell-menu-two small:empty { display:none; }
/* Pin card → Send: the friends to send the pin to, one row each (same dot as on the map). */
.vertex-v3 #app .spot-send { display:grid; gap:8px; }
.vertex-v3 #app .spot-send[hidden] { display:none; }
.vertex-v3 #app .spot-send>small { color:var(--ui-muted,#9aa3ad); font-size:12.5px; }
.vertex-v3 #app .spot-send-list { display:grid; gap:6px; max-height:min(40dvh,260px); overflow:auto; color:var(--ui-muted,#9aa3ad); font-size:13px; }
.vertex-v3 #app .spot-send-friend { display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 10px; border:0; border-radius:12px; background:#2a2e35; color:#fff; font:600 15px/1.2 system-ui,sans-serif; text-align:left; }
.vertex-v3 #app .spot-send-friend:disabled { opacity:.5; }
.vertex-v3 #app .spot-send-friend i { flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; color:#fff; font:700 13px/1 system-ui,sans-serif; font-style:normal; }
.vertex-v3 #app .spot-send-friend span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app #spotSendCancel { min-height:40px; border:0; border-radius:999px; background:none; color:var(--ui-muted,#9aa3ad); font:600 14px system-ui,sans-serif; }
.vertex-v3 #app .spot-actions[hidden] { display:none; }
/* Write to a friend: one line with a round send button, on the friend's card and under a received message. */
.vertex-v3 #app .friend-message-form { display:flex; gap:8px; align-items:center; }
.vertex-v3 #app .friend-message-form input { flex:1; min-width:0; height:44px; padding:0 14px; border:1px solid #ffffff1f; border-radius:999px; background:#16181c; color:#fff; font:500 15px/1.2 system-ui,sans-serif; }
.vertex-v3 #app .friend-message-form input::placeholder { color:#8a929c; }
.vertex-v3 #app .friend-message-form button { flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:#3b82f6; color:#fff; }
.vertex-v3 #app .friend-message-form button:disabled { opacity:.5; }
.vertex-v3 #app .friend-message-form svg { width:20px; height:20px; fill:currentColor; }
/* A message from a friend: the last few lines between you, theirs on the left, yours on the right. */
.vertex-v3 #app .message-card-list { display:flex; flex-direction:column; gap:6px; max-height:min(30dvh,220px); overflow:auto; }
.vertex-v3 #app .message-card-list p { margin:0; max-width:85%; padding:8px 12px; border-radius:16px 16px 16px 4px; background:#2a2e35; font:500 15px/1.35 system-ui,sans-serif; white-space:pre-wrap; overflow-wrap:anywhere; align-self:flex-start; }
.vertex-v3 #app .message-card-list p.mine { align-self:flex-end; border-radius:16px 16px 4px 16px; background:#3b82f6; }
.vertex-v3 #app .message-card-list p small { display:block; margin-top:2px; color:#ffffffa0; font-size:11.5px; }
.vertex-v3 #app .message-card-show { min-height:40px; border:0; border-radius:999px; background:#2a2e35; color:#fff; font:650 14px/1.2 system-ui,sans-serif; }
.vertex-v3 #app .message-card-show[hidden], .vertex-v3 #app .message-card-list[hidden] { display:none; }
.vertex-v3 #app #friendCardMessages { max-height:min(20dvh,150px); }
/* With the keyboard up the card sits right on top of it, as tall as it needs. */
html[data-keyboard-open].phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#friendCard,#messageCard)[data-keyboard-panel] { bottom:var(--keyboard-bottom)!important; height:auto!important; }
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app :is(#friendCard,#messageCard)[data-keyboard-panel] { height:auto!important; }
/* Short phones (iPhone SE): the friend and message cards leave no room for the map buttons, so the
   buttons step aside while a card is open, as with an open tour card. */
@media (max-height:760px) {
  html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app:has(:is(#friendCard,#messageCard):not([hidden])) #thumbRail { display:none!important; }
  .vertex-v3 #app .friend-card { gap:10px; }
  .vertex-v3 #app .message-card-list { max-height:min(24dvh,170px); }
}
/* Messages (account menu): one row per friend, newest conversation first, unread count in blue. */
.vertex-v3 #app .message-threads { display:grid; gap:6px; max-height:min(46dvh,360px); overflow:auto; color:var(--ui-muted,#9aa3ad); font-size:14px; }
.vertex-v3 #app .message-threads[hidden], .vertex-v3 #app .message-card [hidden] { display:none; }
.vertex-v3 #app .message-thread { display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 12px; border:0; border-radius:14px; background:#2a2e35; color:#fff; text-align:left; font:inherit; }
.vertex-v3 #app .message-thread i { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; color:#fff; font:700 15px/1 system-ui,sans-serif; font-style:normal; }
.vertex-v3 #app .message-thread span { flex:1; min-width:0; display:grid; gap:2px; }
.vertex-v3 #app .message-thread b { font:650 15px/1.25 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .message-thread small { color:var(--ui-muted,#9aa3ad); font:500 13.5px/1.3 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .message-thread.unread small { color:#fff; font-weight:650; }
.vertex-v3 #app .message-thread em { flex:none; display:grid; justify-items:end; gap:4px; color:var(--ui-muted,#9aa3ad); font:500 12px/1 system-ui,sans-serif; font-style:normal; }
.vertex-v3 #app .message-thread u { min-width:20px; height:20px; padding:0 6px; box-sizing:border-box; display:grid; place-items:center; border-radius:10px; background:#3b82f6; color:#fff; font:700 12px/1 system-ui,sans-serif; text-decoration:none; }
.vertex-v3 #app .message-card-back { flex:none; width:36px; height:40px; margin-left:-6px; border:0; background:none; color:#fff; font:400 32px/1 system-ui,sans-serif; }
/* Unread messages: a red dot on the account button and on Messages in its menu. */
#shellAvatar { position:relative; }
#shellAvatar.has-unread::after { content:""; position:absolute; top:-1px; right:-1px; width:12px; height:12px; border-radius:50%; background:#ef4444; border:2px solid #1e2126; }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app .shell-menu [data-menu="messages"].has-unread small { color:#fff; background:#ef4444; padding:2px 8px; border-radius:999px; font-weight:700; }
/* ---- Conversation (v267): a scrollable chat with day lines, times and send state ---- */
.vertex-v3 #app .message-card.message-chat-mode:not([hidden]) { display:flex; flex-direction:column; gap:10px; }
.vertex-v3 #app .message-card.message-chat-mode>* { flex:none; }
.vertex-v3 #app #messageCardList { flex:1 1 auto; min-height:0; max-height:min(44dvh,420px); overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; gap:2px; padding:0 2px 2px; }
.vertex-v3 #app .message-card-list p { max-width:78%; padding:7px 12px 7px; border-radius:18px; line-height:1.35; }
.vertex-v3 #app .message-card-list p.theirs { align-self:flex-start; background:#2a2e35; border-radius:6px 18px 18px 6px; }
.vertex-v3 #app .message-card-list p.mine { align-self:flex-end; background:#3b82f6; border-radius:18px 6px 6px 18px; }
.vertex-v3 #app .message-card-list p.theirs.run-start { border-top-left-radius:18px; margin-top:6px; }
.vertex-v3 #app .message-card-list p.theirs.run-end { border-bottom-left-radius:18px; }
.vertex-v3 #app .message-card-list p.mine.run-start { border-top-right-radius:18px; margin-top:6px; }
.vertex-v3 #app .message-card-list p.mine.run-end { border-bottom-right-radius:18px; }
.vertex-v3 #app .message-card-list p small { display:block; margin-top:3px; color:#ffffffb0; font:500 11px/1.2 system-ui,sans-serif; text-align:right; }
.vertex-v3 #app .message-card-list p.theirs small { color:#9aa3ad; text-align:left; }
.vertex-v3 #app .message-card-list p.pending { opacity:.65; }
.vertex-v3 #app .message-card-list p.failed { background:#7f1d1d; cursor:pointer; }
.vertex-v3 #app .message-card-list p.failed small { color:#fecaca; }
.vertex-v3 #app .message-card-list .msg-day { align-self:center; margin:10px 0 2px; color:var(--ui-muted,#9aa3ad); font:600 12px/1.2 system-ui,sans-serif; }
.vertex-v3 #app .message-card-list .msg-day:first-child { margin-top:0; }
/* The friend's card: the last three lines, tap to open the conversation. */
.vertex-v3 #app #friendCardMessages { max-height:none; overflow:hidden; cursor:pointer; gap:3px; padding:8px; border-radius:16px; background:#16181c; }
.vertex-v3 #app #friendCardMessages p { font-size:14px; padding:6px 11px; margin-top:0; }
/* Header: Show on the map as a round icon next to ✕. */
.vertex-v3 #app .message-card-show { flex:none; width:40px; height:40px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#ffffff14; color:#fff; min-height:0; }
.vertex-v3 #app .message-card-show svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; }
/* Send is blue only when there is something to send. */
.vertex-v3 #app .friend-message-form button:disabled { opacity:1; background:#2a2e35; color:#6b7380; }
/* With the keyboard up the card sits right on it; the lines shrink and scroll, the field stays visible. */
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#messageCard[data-keyboard-panel] { overflow:hidden!important; padding-bottom:10px!important; }
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app #messageCard[data-keyboard-panel] #messageCardList { max-height:none; }
/* A message while you do something else: a banner under the search bar for a few seconds. */
.vertex-v3 #app .message-banner { position:fixed; z-index:90; top:calc(env(safe-area-inset-top,0px) + 64px); left:12px; right:12px; display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid #ffffff22; border-radius:18px; background:#1e2126f5; color:#fff; box-shadow:0 10px 30px #0008; text-align:left; font:inherit; animation:message-banner-in .25s ease-out; }
.vertex-v3 #app .message-banner[hidden] { display:none; }
.vertex-v3 #app .message-banner i { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:2px solid #fff; color:#fff; font:700 15px/1 system-ui,sans-serif; font-style:normal; }
.vertex-v3 #app .message-banner span { min-width:0; display:grid; gap:2px; }
.vertex-v3 #app .message-banner b { font:650 15px/1.25 system-ui,sans-serif; }
.vertex-v3 #app .message-banner small { color:#c3c9d1; font:500 14px/1.3 system-ui,sans-serif; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes message-banner-in { from { transform:translateY(-12px); opacity:0; } to { transform:none; opacity:1; } }
@media (min-width:900px) { .vertex-v3 #app .message-banner { left:auto; right:16px; top:16px; width:360px; } }
@media (prefers-reduced-motion:reduce) { .vertex-v3 #app .message-banner { animation:none; } }
.vertex-v3 #app .message-thread time { color:var(--ui-muted,#9aa3ad); font:500 12px/1 system-ui,sans-serif; }
/* …and never runs up under the search bar at the top. */
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app :is(#friendCard,#messageCard)[data-keyboard-panel] { max-height:calc(var(--keyboard-view-height) - 72px - env(safe-area-inset-top,0px))!important; }