/* 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:600 12px/1 var(--font-sans); }
.friend-marker .friend-label { padding:2px 7px; border-radius:999px; background:#0b0b0ce6; color:#fff; font:600 11px/1.25 var(--font-sans); 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 rgba(var(--g-ink-rgb),0.110); border-bottom:0; border-radius:22px 22px 0 0; background:var(--ui-base,var(--g-surface)); color:var(--ui-text,var(--g-contrast)); box-shadow:0 -8px 24px rgba(var(--g-shadow-rgb),0.240); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 rgba(var(--g-ink-rgb),0.200); background:var(--friend,var(--g-accent)); color:var(--g-on-accent); font:600 19px/1 var(--font-sans); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .friend-card h2 { margin:0; font:600 19px/1.2 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .friend-card-head small { display:block; margin-top:2px; color:var(--ui-muted,var(--g-muted)); font:500 13px/1.3 var(--font-sans); }
.vertex-v3 #app :is(#closeFriendCard,#closeMessageCard) { flex:none; width:40px; height:40px; border:0; border-radius:50%; background:rgba(var(--g-ink-rgb),0.078); 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:600 18px/1.2 var(--font-sans); white-space:nowrap; }
.vertex-v3 #app .friend-card-stats small { color:var(--ui-muted,var(--g-muted)); 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:var(--g-raised); color:var(--g-contrast); font:600 15px/1.2 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .friend-card-actions button.primary { background:var(--g-accent); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
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 rgba(var(--g-ink-rgb),0.110); } }
/* Sharing is on: a green ring on the account button. */
#shellAvatar.friend-sharing { box-shadow:0 0 0 2px rgba(var(--g-shadow-rgb),0.240), 0 0 0 4px rgba(var(--g-shadow-rgb),0.240); }
/* You page → "Show me to friends" carries the app's one switch (grey, white knob, accent when on). */
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>i.you-switch { flex:none; position:relative; width:44px!important; height:26px; border-radius:999px; background:var(--g-raised); opacity:1; font-size:0!important; transition:background .15s; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>i.you-switch::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--g-surface); box-shadow:0 1px 3px rgba(var(--g-shadow-rgb),0.240); transition:transform .15s; }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button[aria-checked="true"]>i.you-switch { background:var(--g-accent); }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button[aria-checked="true"]>i.you-switch::after { transform:translateX(18px); }
body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>em:empty { display:none; }
@media (prefers-reduced-motion:reduce){ body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>i.you-switch,body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #youSheet .you-menu>button>i.you-switch::after { transition:none; } }
html.phone-shell body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app[data-h4]:not(#_h) #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[data-h5]:not(#_h) #thumbRail { bottom:calc(var(--nav-h) + var(--message-card-h,250px) + 12px)!important; }
.vertex-v3 #app .friend-card-stats p[hidden] { 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,var(--g-muted)); 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,var(--g-muted)); 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:14px; background:var(--g-raised); color:var(--g-contrast); font:600 15px/1.2 var(--font-sans); text-align:left; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 rgba(var(--g-ink-rgb),0.200); color:var(--g-on-accent); font:600 13px/1 var(--font-sans); font-style:normal; }
.vertex-v3 #app .spot-send-friend span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app :is(#spotSendCancel,#routeSendCancel) { min-height:40px; border:0; border-radius:999px; background:none; color:var(--ui-muted,var(--g-muted)); font:600 14px var(--font-sans); --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
.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 rgba(var(--g-ink-rgb),0.122); border-radius:999px; background:var(--g-base); color:var(--g-contrast); font:500 15px/1.2 var(--font-sans); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .friend-message-form input::placeholder { color:var(--g-muted); }
.vertex-v3 #app .friend-message-form button { flex:none; width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%; background:var(--g-accent); color:var(--g-contrast); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.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:14px 14px 14px 4px; background:var(--g-raised); font:500 15px/1.35 var(--font-sans); white-space:pre-wrap; overflow-wrap:anywhere; align-self:flex-start; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .message-card-list p.mine { align-self:flex-end; border-radius:14px 14px 4px 14px; background:var(--g-accent); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .message-card-list p small { display:block; margin-top:2px; color:var(--g-secondary-contrast); font-size:11.5px; }
.vertex-v3 #app .message-card-show { min-height:40px; border:0; border-radius:999px; background:var(--g-raised); color:var(--g-contrast); font:600 14px/1.2 var(--font-sans); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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[data-h6]:not(#_h) #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,var(--g-muted)); 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:var(--g-raised); color:var(--g-contrast); text-align:left; font:inherit; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .message-thread i { flex:none; width:36px; height:36px; display:grid; place-items:center; border-radius:50%; border:2px solid rgba(var(--g-ink-rgb),0.200); color:var(--g-on-accent); font:600 15px/1 var(--font-sans); 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:600 15px/1.25 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .message-thread small { color:var(--ui-muted,var(--g-muted)); font:500 13.5px/1.3 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .message-thread.unread small { color:var(--g-contrast); font-weight:600; }
.vertex-v3 #app .message-thread em { flex:none; display:grid; justify-items:end; gap:4px; color:var(--ui-muted,var(--g-muted)); font:500 12px/1 var(--font-sans); 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:999px; background:var(--g-accent); color:var(--g-contrast); font:600 12px/1 var(--font-sans); text-decoration:none; --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .message-card-back { flex:none; width:36px; height:40px; margin-left:-6px; border:0; background:none; color:var(--g-contrast); font:400 32px/1 var(--font-sans); --g-contrast:inherit;--g-secondary-contrast:inherit;--ui-on-dark:inherit;}
/* 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:var(--ripa-red); border:2px solid rgba(var(--g-ink-rgb),0.200); color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
/* ---- 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:22px; line-height:1.35; }
.vertex-v3 #app .message-card-list p.theirs { align-self:flex-start; background:var(--g-raised); border-radius:6px 22px 22px 6px; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .message-card-list p.mine { align-self:flex-end; background:var(--g-accent); border-radius:22px 6px 6px 22px; color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .message-card-list p.theirs.run-start { border-top-left-radius:22px; margin-top:6px; }
.vertex-v3 #app .message-card-list p.theirs.run-end { border-bottom-left-radius:22px; }
.vertex-v3 #app .message-card-list p.mine.run-start { border-top-right-radius:22px; margin-top:6px; }
.vertex-v3 #app .message-card-list p.mine.run-end { border-bottom-right-radius:22px; }
.vertex-v3 #app .message-card-list p small { display:block; margin-top:3px; color:var(--g-secondary-contrast); font:500 11px/1.2 var(--font-sans); text-align:right; }
.vertex-v3 #app .message-card-list p.theirs small { color:var(--g-muted); 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; color:var(--g-on-accent);--g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .message-card-list p.failed small { color:var(--g-danger); }
.vertex-v3 #app .message-card-list .msg-day { align-self:center; margin:10px 0 2px; color:var(--ui-muted,var(--g-muted)); font:600 12px/1.2 var(--font-sans); }
.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:14px; background:var(--g-base); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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:rgba(var(--g-ink-rgb),0.078); color:var(--g-contrast); 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:var(--g-raised); color:var(--g-muted); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
/* 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 rgba(var(--g-ink-rgb),0.133); border-radius:22px; background:rgba(var(--g-surface-rgb),0.961); color:var(--g-contrast); box-shadow:0 10px 30px rgba(var(--g-shadow-rgb),0.240); text-align:left; font:inherit; animation:message-banner-in .25s ease-out; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.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 rgba(var(--g-ink-rgb),0.200); color:var(--g-on-accent); font:600 15px/1 var(--font-sans); font-style:normal; }
.vertex-v3 #app .message-banner span { min-width:0; display:grid; gap:2px; }
.vertex-v3 #app .message-banner b { font:600 15px/1.25 var(--font-sans); }
.vertex-v3 #app .message-banner small { color:var(--g-muted); font:500 14px/1.3 var(--font-sans); 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,var(--g-muted)); font:500 12px/1 var(--font-sans); }
/* …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 #friendCard[data-keyboard-panel] { max-height:calc(var(--keyboard-view-height) - 72px - env(safe-area-inset-top,0px))!important; }
/* The conversation with the keyboard up fills the visible space between the search bar and the keyboard,
   placed from the top of what iOS shows (visualViewport top + height), like the Wall. Measuring from the
   bottom failed in the iPhone app: the page's bottom edge is not where the keyboard starts there.
   Few lines sit at the bottom, next to the field. */
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app#app #messageCard[data-keyboard-panel] {
  top:calc(var(--keyboard-view-top) + env(safe-area-inset-top,0px) + 72px)!important;
  bottom:auto!important;
  height:calc(var(--keyboard-view-height) - env(safe-area-inset-top,0px) - 72px)!important;
  max-height:calc(var(--keyboard-view-height) - env(safe-area-inset-top,0px) - 72px)!important;
}
html[data-keyboard-open] body.vertex-v3 #app#app#app#app#app#app #messageCard[data-keyboard-panel] #messageCardList > :first-child { margin-top:auto; }
/* The friend's card: "Message Max…" looks like the field it opens (the conversation, keyboard up). */
.vertex-v3 #app .friend-message-open { display:flex; align-items:center; gap:8px; min-height:44px; padding:0 0 0 14px; border:1px solid rgba(var(--g-ink-rgb),0.122); border-radius:999px; background:var(--g-base); color:var(--g-muted); font:500 15px/1.2 var(--font-sans); text-align:left; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .friend-message-open span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .friend-message-open i { flex:none; width:44px; height:44px; margin:-1px; display:grid; place-items:center; border-radius:50%; background:var(--g-accent); color:var(--g-contrast); --g-contrast:var(--g-on-accent);--g-secondary-contrast:var(--g-on-accent);--ui-on-dark:var(--g-on-accent);}
.vertex-v3 #app .friend-message-open svg { width:20px; height:20px; fill:currentColor; }
/* The conversation's field: grows to four lines, Send stays at its bottom. */
.vertex-v3 #app #messageCardForm { align-items:flex-end; }
.vertex-v3 #app #messageCardForm textarea { flex:1; min-width:0; box-sizing:border-box; height:44px; min-height:44px; max-height:108px; padding:11px 16px; border:1px solid rgba(var(--g-ink-rgb),0.122); border-radius:999px; background:var(--g-base); color:var(--g-contrast); font:500 15px/20px var(--font-sans); resize:none; overflow-y:auto; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app #messageCardForm textarea::placeholder { color:var(--g-muted); }
/* ---- Sharing (v271): a pin or route in the conversation is a card; a tap shows it on the map ---- */
.vertex-v3 #app .message-card-list p.msg-has-card { width:min(78%,280px); padding:6px; }
.vertex-v3 #app .msg-attach { display:flex; align-items:center; gap:10px; width:100%; min-height:56px; padding:6px 8px 6px 6px; border:0; border-radius:14px; background:rgba(var(--g-ink-rgb),0.220); color:var(--g-contrast); text-align:left; font:inherit; cursor:pointer; }
.vertex-v3 #app .message-card-list p.theirs .msg-attach { background:var(--g-surface); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .msg-attach-thumb { flex:none; width:44px; height:44px; border-radius:10px; background:var(--g-base); --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app .msg-attach-pin .msg-attach-thumb path { fill:var(--g-accent); stroke:var(--g-contrast); stroke-width:1.6; }
.vertex-v3 #app .msg-attach-pin .msg-attach-thumb circle { fill:var(--g-contrast); }
.vertex-v3 #app .msg-attach-route .msg-attach-thumb polyline { fill:none; stroke:var(--g-accent); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.vertex-v3 #app .msg-attach-route .msg-attach-thumb circle { fill:var(--g-contrast); }
.vertex-v3 #app .msg-attach span { flex:1; min-width:0; display:grid; gap:2px; }
.vertex-v3 #app .msg-attach b { font:600 15px/1.25 var(--font-sans); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .message-card-list .msg-attach small { margin:0; color:var(--g-secondary-contrast); font:500 12.5px/1.25 var(--font-sans); text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vertex-v3 #app .message-card-list p.theirs .msg-attach small { color:var(--g-muted); }
.vertex-v3 #app .msg-attach > i { flex:none; color:var(--g-secondary-contrast); font:400 22px/1 var(--font-sans); font-style:normal; }
.vertex-v3 #app .msg-card-text { display:block; padding:6px 6px 0; }
.vertex-v3 #app .message-card-list p.msg-has-card > small { padding:0 6px 1px; }
/* Sending a pin: its name stays on top, the place lines step aside for the friend list. */
.vertex-v3 #app #spotCard.spot-sending > small { display:none; }
/* Route detail: Send (paper plane) next to •••, the same square; the friend list opens under the buttons. */
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailSend { display:flex!important; align-items:center; justify-content:center; order:1; flex:0 0 44px!important; width:44px!important; min-width:44px!important; height:40px!important; min-height:40px!important; margin:0 0 0 auto!important; padding:0!important; border-radius:10px!important; color:var(--ui-text,var(--g-contrast))!important; background:var(--ui-raised,var(--g-raised))!important; --g-contrast:var(--g-ink);--g-secondary-contrast:var(--g-muted);--ui-on-dark:var(--g-ink);}
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailSend[hidden] { display:none!important; }
.vertex-v3 #app#app#app#app#app#app#app #routeDetail .route-detail-actions #routeDetailSend:not([hidden]) + #routeDetailMore { margin-left:0!important; }
.vertex-v3 #app #routeDetailSend svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linejoin:round; }
.vertex-v3 #app #routeDetail .route-send { flex:none; margin-top:10px; }
.vertex-v3 #app #routeDetail .route-send>small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }