/* ============================================================ FONT: Inter — the same typeface notion.com uses, and the standard free stand-in for Apple's SF Pro. We SELF-HOST one small file (public/fonts/inter.woff2) so it works offline and in places where Google Fonts is blocked (e.g. mainland China / the Shanghai trip). It's a "variable" font: one file covers every weight 100–900. ============================================================ */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; /* the whole weight range, from one file */ font-display: swap; /* show text immediately, swap in Inter when ready */ src: url('fonts/inter.woff2') format('woff2'); } /* Reset: remove default spacing and make sizing predictable */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Buttons/inputs don't inherit the page font by default — make them */ button, input, select { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; border-radius: var(--r-btn); } /* ============================================================ SIMPLE GLASS — the one look every box in the app shares. A box is just four things: 1) a dark SEE-THROUGH tint (you can still see the globe through it) 2) a soft BLUR of whatever sits behind it, so text stays readable 3) a thin light OUTLINE 4) ROUND corners That's the whole material. Change the knobs below and every box in the app follows. ============================================================ */ :root { color-scheme: dark; /* native date/time pickers render dark */ /* The notch/Dynamic Island, the home indicator and a landscape phone's rounded corners, published as plain numbers. The browser hands these to CSS only, and JS needs them too (placeMenuAnchored keeps a context menu out of them), so they live here once and are read back with getComputedStyle rather than guessed at in two places. */ --sa-top: env(safe-area-inset-top, 0px); --sa-right: env(safe-area-inset-right, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-left: env(safe-area-inset-left, 0px); /* The app's base page color — every full-bleed background (html, the portrait-lock overlay, the cost panel, the AI menu's card and desktop sidebar, the mobile AI menu's fullscreen state) reads this ONE value rather than repeating a literal black, so they can never drift out of sync with each other. Started as Kalshi's own dark (not pure black) background, matched exactly via getComputedStyle on their (rgb(10, 12, 15)) — picked because a true #000 base reads as a hole in the screen next to the globe's real photographic colors. Nudged a bit darker than that exact match, per the traveler's own live call once he saw it running (rgb(7, 8, 11) — same warm-black hue, ~30% less light). */ --bg: #07080b; --glass-bg: rgba(10, 10, 14, 0.55); /* the dark see-through tint */ --glass-blur: blur(14px); /* how soft the background gets behind a box */ --glass-border: rgba(var(--fg-rgb), 0.14); /* the thin light outline */ --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); /* soft shadow so boxes float */ --press: rgba(var(--fg-rgb), 0.16); /* any box while your finger is on it */ --hover: rgba(var(--fg-rgb), 0.09); /* mouse-over preview, one notch lighter than resting, one notch quieter than --press — see it before you commit to the click */ /* Rows that live INSIDE an already-glass card (menu rows, the ideas "add" button) skip the full floating --glass-shadow (double-blur reads muddy) but still want SOME depth so they don't feel like a flatter, cheaper material than everything else in the app — a quiet fraction of the real thing. */ --flat-shadow: 0 2px 10px rgba(0, 0, 0, 0.28); /* Text/border/hover colors that need to flip between dark and light mode. --fg / --fg-rgb are the app's plain text color (rgba() tints of text, hairlines and hover washes are almost always this same white at some opacity, hence --fg-rgb — see the [data-theme="light"] block below). --fg2 is the slightly warm off-white text used by the Notion-matched AI chat/sidebar surfaces (see #ai-menu below); --card-bg is the near-black raised card those surfaces sit on. --invert-bg/--invert-fg are the handful of "solid, this-is-the-one-that-pops" controls (Save button, an active/checked pill) that are a solid white chip in dark mode and need to become a solid DARK chip in light mode to keep popping. */ --fg: #fff; --fg-rgb: 255, 255, 255; --fg2: #f0efed; --fg2-dim: #9b9a97; --fg2-faint: #6f6e69; --card-bg: #141414; --card-bg-rgb: 20, 20, 20; /* same raised card, as r,g,b for translucent chips over it */ --invert-bg: #fff; --invert-fg: #000; /* The globe/space pane's own background. Deliberately NOT --bg — the globe is "space", so it stays this same near-black in both themes while --bg itself flips. See #globe below, where this is applied. */ --space-bg: #07080b; /* corner roundness --r-chip is the calendar day box (square + soft corner). Buttons use the same language (--r-btn) so chrome feels like the grid, not a Grok pill. */ --r-pill: 999px; --r-card: 24px; --r-chip: 14px; --r-btn: 12px; /* Motion — snappy, eased, never bouncy */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-snap: cubic-bezier(0.32, 0.72, 0, 1); /* True ease-in-ease-out (slow start, fast middle, slow end) — DESKTOP day-turn only (nav arrows + trackpad/mouse drag). --ease-snap above starts almost instantly (no ease-in), which is right for a finger already moving on a touchscreen but reads as an abrupt jolt on desktop, where the "swipe" is a released drag with no ongoing finger contact. Must match DESKTOP_DAY_TURN_MS in app.js. */ --ease-in-out-snap: cubic-bezier(0.45, 0, 0.2, 1); --dur-view: 0.28s; --dur-item: 0.24s; --dur-tap: 0.16s; /* Was 0.11s — enough for the old ~22px fade, too short for a full pane-width slide (see the day-turn JS: a live drag now moves the ENTIRE day, not a sliver of it). Must match DAY_TURN_MS in app.js. */ --dur-day-turn: 0.22s; /* Desktop-only day turn: faster than the touch version above — a mouse/trackpad release has no finger still touching the glass to "carry" the motion, so it needs to snap over noticeably less time to still read as quick. */ --dur-day-turn-desktop: 0.15s; /* Desktop Grok-style left sidebar. Collapsed = icon rail; expanded = labels. */ --sidebar-w: 56px; } body.sidebar-expanded { --sidebar-w: 256px; } /* LIGHT MODE. Toggled in Settings (see #theme-toggle in app.js), which sets data-theme="light" on and remembers it in localStorage. Off-white, not pure white — matched to what Stripe/Notion/Linear use for a light background (a hint of warmth so it doesn't glare next to the globe's dark half). Every value here is one of the flipping variables defined in :root above; nothing else in this file should need a [data-theme="light"] rule of its own. --space-bg is deliberately absent — the globe stays dark in every theme. */ [data-theme="light"] { color-scheme: light; /* native date/time pickers render light */ --bg: #f4f2ee; /* Cards read as near-solid white (not hazy translucent glass — that read "washed out" rather than "polished" on a light page) with a crisp hairline and a real two-layer shadow: a tight near shadow for edge definition plus a soft ambient one for lift, the same recipe Stripe/Linear-style light UIs use instead of one big blurred shadow. */ --glass-bg: rgba(255, 255, 255, 0.82); --glass-border: rgba(20, 20, 22, 0.09); --glass-shadow: 0 1px 2px rgba(20, 20, 22, 0.04), 0 8px 24px rgba(20, 20, 22, 0.07); --press: rgba(20, 20, 22, 0.10); --hover: rgba(20, 20, 22, 0.05); --flat-shadow: 0 1px 4px rgba(20, 20, 22, 0.06); --fg: #17161a; --fg-rgb: 23, 22, 26; --fg2: #2b2a27; --fg2-dim: #5c5a54; --fg2-faint: #8a8883; --card-bg: #ffffff; --card-bg-rgb: 255, 255, 255; --invert-bg: #17161a; --invert-fg: #ffffff; } /* PORTRAIT LOCK (phone only). iOS Safari has no real orientation-lock API for a plain web page, so we can't stop the phone from physically rotating — instead, the moment a PHONE (touch, and narrower than the smallest iPad landscape width of 1024px) goes landscape, this covers the whole screen solid black and tells the user to rotate back. The app underneath keeps running (nothing to save/restore) — it's just hidden. iPad and desktop landscape are deliberately supported layouts elsewhere in this file and must NOT match this rule. */ #portrait-lock { display: none; } @media (orientation: landscape) and (pointer: coarse) and (max-width: 926px) { #portrait-lock { display: flex; position: fixed; inset: 0; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px; background: var(--bg); text-align: center; } #portrait-lock svg { width: 48px; height: 48px; color: rgba(var(--fg-rgb), 0.7); transform: rotate(90deg); } #portrait-lock p { max-width: 280px; color: rgba(var(--fg-rgb), 0.85); font-family: 'Inter', -apple-system, sans-serif; font-size: 15px; line-height: 1.5; } } /* Whole-word text — wrap at spaces; only break a word if it alone is wider than the box (long URLs / codes). Never force mid-word chops for normal text. */ .wrap-words { white-space: pre-line; overflow-wrap: break-word; word-break: normal; hyphens: none; max-width: 100%; min-width: 0; } html { height: 100%; background: var(--bg); /* the base layer of the page — see --bg */ -webkit-tap-highlight-color: transparent; /* no grey flash on iPhone taps */ overflow: hidden; /* no page scroll — keyboard must not pan the shell */ overflow-x: hidden; /* no sideways page scroll — vertical only */ overscroll-behavior: none; /* kill rubber-band / keyboard-driven overscroll */ /* iOS Safari (and Chrome-on-iOS, same WebKit engine underneath) silently boosts font sizes in narrow text columns to help readability — a real- device-only behavior Chrome DevTools' desktop device simulation never reproduces, since that's plain Blink with no text-autosizer at all. That mismatch is exactly why fonts look right in DevTools but oversized on a real iPhone. Pinning this to 100% turns the boost off so our own sizes are what actually render. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { height: 100%; color: var(--fg); /* Inter first; fall back to Apple's own SF Pro if the file ever fails to load */ font-family: 'Inter', -apple-system, system-ui, sans-serif; letter-spacing: -0.011em; /* the slightly tight tracking that reads as "Apple" */ -webkit-font-smoothing: antialiased; /* crisp, thin text on Mac/iPhone */ -moz-osx-font-smoothing: grayscale; overflow: hidden; /* no scrolling — it fills the screen like an app */ overflow-x: hidden; overscroll-behavior: none; /* Behave like an app, not a web page: long-pressing never highlights text or pops up the iOS copy/lookup bubble. We turn selection back ON for inputs below. */ -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* The only place you SHOULD be able to select/edit text is a form field */ input { -webkit-user-select: text; user-select: text; } /* The starfield canvas sits behind the globe map, clipped to the globe half only (#globe has overflow:hidden) — it used to be position:fixed across the WHOLE viewport, which on the stacked mobile layout meant it kept redrawing, every frame, forever, an entire invisible copy of itself under the opaque calendar half. That's real, constant GPU fill-rate cost for zero visible benefit — a big part of why animations felt clunky on a real phone despite looking fine in a desktop browser (desktop GPUs don't notice; mobile GPUs do). */ #stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; /* behind #map, which paints on top */ display: block; } /* The app fills the screen and stacks the two halves vertically. FIXED to the layout viewport (inset: 0) — NOT height: 100dvh. Why: 100dvh shrinks when the mobile keyboard opens, so the whole globe/calendar flex layout compressed and "jumped up" with the keyboard. A fixed shell stays put; the keyboard overlays on top (see also the viewport meta interactive-widget=overlays-content). */ #app { position: fixed; inset: 0; width: 100%; max-width: 100%; height: auto; /* height comes from inset: 0, not dvh */ display: flex; flex-direction: column; z-index: 1; /* ...and the app sits above the stars */ overflow: hidden; overflow-x: hidden; /* vertical layout only — never pan sideways */ } /* Two fixed halves. Portrait = stacked 50/50 (globe top, calendar bottom). Landscape = side-by-side 50/50 width (globe left, calendar right). Calendar always paints ABOVE the globe (higher z-index) so the map canvas can never cover the back button or crop the calendar header at the seam. */ #globe, #calendar { flex: 0 0 50%; min-height: 0; /* lets the halves shrink correctly */ min-width: 0; /* flex children can shrink so text wraps, not scroll-x */ max-width: 100%; overflow-x: hidden; position: relative; } #globe { z-index: 1; overflow: hidden; /* hard-clip map/menus to this half only */ background: var(--space-bg); /* space stays dark in light mode too — see --space-bg */ } #calendar { z-index: 2; /* never sit under the globe at the split */ overflow-x: hidden; overflow-y: hidden; /* scroll lives inside day/month views, not here */ } /* Portrait (phone/tablet upright): exact half-and-half height. */ @media (orientation: portrait) { #app { flex-direction: column; } #globe { flex: 0 0 50%; max-height: 50%; height: 50%; } #calendar { flex: 0 0 50%; max-height: 50%; height: 50%; } } /* The app splits LEFT/RIGHT (globe left, calendar right) whenever the screen is WIDER than it is tall (landscape). When it's TALLER than wide (portrait) the two halves stay STACKED (globe on top, calendar below). One simple rule, no gaps: orientation: landscape = wider-than-tall, portrait = taller-than-wide. */ @media (orientation: landscape) { #app { flex-direction: row; } #globe { flex: 1 1 50%; /* left half — can grow if calendar is fixed 50% */ max-height: none; height: auto; } #calendar { flex: 0 0 50%; /* right half — fixed half of the screen width */ max-height: none; height: auto; /* Breathe down from the top edge so the day-view back button and month title never sit flush against the seam (where the globe used to clip them). Also clear the iPhone notch on the RIGHT edge when the phone is rotated that way — calendar is always the right half, so only the right inset matters (the left notch sits over the globe, not over this panel). */ padding-top: 20px; padding-right: max(16px, env(safe-area-inset-right, 0px)); } } /* ============================================================ THE GLASS RECIPE — every box in the app, in one place. ============================================================ */ #globe-account-btn, .globe-trip-bubble, #back-to-month, #detail-back, .day-nav-bubble, .item, #add-card, .sheet-card, #item-menu-card button, #trip-menu-card button, #chat-menu-card button, #cost-row-menu-card button, #cost-type-menu-card, #add-cancel, .btn-cancel, .airport-list, .nav-btn, .contact-btn, .copy-bubble, .res-tile, .tr-hotel-suggest, .res-accordion, .res-traveler-flat, #detail-header-action { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); /* Safari spells it with -webkit- */ backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); } /* ============================================================ HOVER — a mouse gets a preview of "this is pressable" before it commits to a click; touch never sees this (every :active press state above already covers touch, and pointer:fine keeps :hover from getting stuck after a tap on a hybrid device). One rule per material family, same lighten-on-hover language everywhere so a button in the calendar and a button in the menu read as the same kind of thing, not two different apps stitched together. ============================================================ */ @media (pointer: fine) { /* Floating glass (the recipe above) — the deep shadow reads as "closer" on hover. */ #globe-account-btn:hover, .globe-trip-bubble:hover, #back-to-month:hover, #detail-back:hover, .day-nav-bubble:hover:not(:disabled), .item:hover, #item-menu-card button:hover, #trip-menu-card button:hover, #chat-menu-card button:hover, #cost-row-menu-card button:hover, #add-cancel:hover, .btn-cancel:hover, .nav-btn:hover, .contact-btn:hover, .copy-bubble:hover, .res-tile-copy:hover, .res-tile-link:hover, .tr-hotel-suggest:hover, .airport-option:hover, .res-acc-head:hover, #google-signin:hover, .globe-menu-row:hover, .globe-menu-trip:hover, #ai-menu-mic:hover, #detail-header-action:hover { background: var(--hover); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55); } /* Flat rows nested in an already-glass card — same lighten, no shadow escalation (they were never meant to look like they're floating above their own card). */ .sidetrip-add-btn:hover, .fill-ideas-btn:hover, .ai-icon-btn:hover, .ai-history-item:hover { background: rgba(var(--fg-rgb), 0.12); } /* The one solid, high-contrast primary action (Add / Save / Log in) — a hair dimmer on hover, the same quiet tell every white pill on the web uses. */ #add-save:hover, .btn-save:hover { background: rgba(var(--fg-rgb), 0.88); } } /* The edit box's Cancel/Save reuse the app-wide glass-cancel + solid-save pair (see "THE GLASS RECIPE" above and the pop-up buttons below), just sized down to sit inline in a chat bubble instead of a full-height pop-up. */ /* Shared motion curves — views, cards, list items */ @keyframes view-in { from { opacity: 0; transform: scale(0.97) translateY(6px); } to { opacity: 1; transform: none; } } @keyframes item-in { from { opacity: 0; transform: scale(0.96) translateY(5px); } to { opacity: 1; transform: none; } } @keyframes pop-in { from { opacity: 0; transform: scale(0.97) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } } /* Calendar panels ease in whenever they become visible */ #month-view:not([hidden]), #day-view:not([hidden]), #detail-view:not([hidden]) { animation: view-in var(--dur-view) var(--ease-out) both; } /* Pop-ups: dimmed backdrop + card settle */ #add-overlay:not([hidden]), .sheet-overlay:not([hidden]), #item-menu:not([hidden]), #trip-menu:not([hidden]), #chat-menu:not([hidden]), #cost-row-menu:not([hidden]), #cost-type-menu:not([hidden]) { animation: overlay-in 0.2s ease both; } #add-card, .sheet-card, #cost-type-menu-card { animation: pop-in 0.26s var(--ease-out) both; } #item-menu-card button, #trip-menu-card button, #chat-menu-card button, #cost-row-menu-card button, #cost-type-menu-card .cost-type-option { animation: pop-in 0.24s var(--ease-out) both; } #item-menu-card button:nth-child(1), #trip-menu-card button:nth-child(1), #chat-menu-card button:nth-child(1), #cost-row-menu-card button:nth-child(1) { animation-delay: 0.02s; } #item-menu-card button:nth-child(2), #trip-menu-card button:nth-child(2), #chat-menu-card button:nth-child(2), #cost-row-menu-card button:nth-child(2) { animation-delay: 0.05s; } #item-menu-card button:nth-child(3), #trip-menu-card button:nth-child(3), #chat-menu-card button:nth-child(3) { animation-delay: 0.08s; } #chat-menu-card button:nth-child(4) { animation-delay: 0.11s; } #cost-type-menu-card .cost-type-option:nth-child(1) { animation-delay: 0.02s; } #cost-type-menu-card .cost-type-option:nth-child(2) { animation-delay: 0.04s; } #cost-type-menu-card .cost-type-option:nth-child(3) { animation-delay: 0.06s; } #cost-type-menu-card .cost-type-option:nth-child(4) { animation-delay: 0.08s; } #cost-type-menu-card .cost-type-option:nth-child(5) { animation-delay: 0.10s; } #cost-type-menu-card .cost-type-option:nth-child(6) { animation-delay: 0.12s; } /* Anyone who asked their phone for less motion gets stillness, full stop */ @media (prefers-reduced-motion: reduce) { #month-view:not([hidden]), #day-view:not([hidden]), #detail-view:not([hidden]), #add-overlay:not([hidden]), .sheet-overlay:not([hidden]), #item-menu:not([hidden]), #trip-menu:not([hidden]), #chat-menu:not([hidden]), #cost-row-menu:not([hidden]), #cost-type-menu:not([hidden]), #add-card, .sheet-card, #cost-type-menu-card, #item-menu-card button, #trip-menu-card button, #chat-menu-card button, #cost-row-menu-card button, #cost-type-menu-card .cost-type-option, .day-flow .item, #detail-view:not([hidden]) .res-section-panel, #detail-view:not([hidden]) .detail-nav { animation: none; } #day-stage, .day-stage-ghost { transition: none !important; } .res-acc-body { transition: none !important; } .res-acc-chev { transition: none !important; } } /* ---------- TOP HALF: the real globe (MapLibre map) ---------- */ /* #globe overflow/z-index live with the shared #globe,#calendar rules above so the map can never paint over the calendar half (back button crop bug). */ #map { position: absolute; inset: 0; /* fill the whole top half */ width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: transparent; /* let the starry background show around the globe */ overflow: hidden; } /* MapLibre injects a canvas sized to the container — keep it clipped to #map. */ #map .maplibregl-canvas-container, #map .maplibregl-canvas { max-width: 100% !important; max-height: 100% !important; } /* MapLibre can inject its own attribution — keep it off the globe */ .maplibregl-ctrl-attrib, .maplibregl-ctrl-logo { display: none !important; } /* A hovered/selected pin's OWN marker wrapper (MapLibre's positioned `.maplibregl-marker` div, the sibling that sits right after the map's canvas — see #map .maplibregl-canvas-container above) needs its own lift above the route line, not just above the canvas. A transfer's pin sits directly ON its own A→B line (placeRidesOnRoute centres it there on purpose), and the teardrop morph translates the ring UP off that spot on select — the tip that's supposed to end up marking the spot, and (for a confirmed transfer, whose ring is its only outline, see .day-loc-icon::before below) the ring's outermost edge, both cross back over the line's own path as they rise. The canvas itself never wins that fight (DOM order already keeps every marker above it), but two elements at the SAME z-index paint in DOM order — and only .sel (a JS-driven click/hover-card selection) was ever given an explicit boost; a bare CSS :hover directly on the pin was not, so it could still lose to whichever sibling marker the day happened to draw right after it. This covers both triggers, on the marker itself rather than deep inside its pseudo-elements, so it's one rule for "hovered, however that hover was triggered." */ .maplibregl-marker:has(.day-loc-icon:hover) { z-index: 5; } /* A reservation's spot within the city. DEFAULT is a round black BUBBLE with a white ring, holding that entry's own monochrome glyph. SELECTED (you hover its card in the day view, or the pin itself) morphs the circle into a teardrop PINPOINT, pops the name underneath and lifts it above its neighbours. The shape is drawn by ::before rather than on the element, so the pin body can spin 45° into a teardrop while the glyph on top of it stays upright. */ .day-loc-icon { display: block; position: relative; width: 32px; height: 32px; box-sizing: border-box; color: var(--fg); opacity: 0; transform: scale(0.3); /* The marker is anchored by its CENTRE, so the middle of this box is the exact spot on the map. A circle is happy there. A teardrop is not: its tip is what marks the place, so on selection the whole shape lifts by --pin-tip-lift and the tip comes to rest on the centre — i.e. on the spot, and on the route line running through it. Rotating a 32px square 45° puts its sharp corner 16 × √2 ≈ 22.63px below the middle, which is precisely how far it has to rise. Scaling then pivots about the tip too. */ --pin-tip-lift: 22.63px; transform-origin: 50% 50%; transition: opacity 0.26s var(--ease-out), transform 0.26s var(--ease-out); cursor: pointer; pointer-events: auto; } /* The bubble itself. Rounding one corner and rotating -45° turns the circle into a teardrop whose point sits straight down — both are transitions of the SAME shape, which is what makes the change read as a morph rather than a swap. */ .day-loc-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 32px; height: 32px; box-sizing: border-box; background: #000000; border: 3px solid #ffffff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: border-radius 0.26s var(--ease-out), transform 0.26s var(--ease-out), background-color 0.26s var(--ease-out), border-color 0.26s var(--ease-out); } .day-loc-icon.in { opacity: 1; transform: scale(1); } .day-loc-icon.sel::before, .day-loc-icon:hover::before { border-radius: 50% 50% 50% 0; transform: translateY(calc(-1 * var(--pin-tip-lift))) rotate(-45deg); } /* The glyph rides up with the shape — otherwise the pin lifts off and leaves its own icon behind on the spot. It only ever TRANSLATES: the bubble turns 45° under it, and an icon turned with it would sit on its ear. */ .day-loc-icon.sel svg, .day-loc-icon:hover svg { transform: translateY(calc(-1 * var(--pin-tip-lift))); } /* A TENTATIVE pin's dashed ring has to become a teardrop too. It used to take only the lift above, so the bubble morphed into a teardrop and the ring rose with it still a circle — a pointed pin sitting inside a round outline, with the point pushing out through it. The ring shares the bubble's centre (inset is symmetric, so both pseudo-elements pivot about the same point), so handing it the very same rotation keeps the two locked together through the whole morph. WHY THE CORNER IS 4px AND NOT 0 LIKE THE BUBBLE'S. The ring sits 4px outside a 32px bubble, so its own box is 40px. Square its corner off like the bubble's and that corner lands 20√2 ≈ 28.28px from the centre while the bubble's is at 16√2 ≈ 22.63px — a 5.66px gap at the tip against 4px everywhere else, which reads as an outline that doesn't fit its pin, stretched and drifting off the point. Rounding the corner pulls it back in: for radius r the corner reaches (20 − r)√2 + r, and 4px puts it at 26.63px — exactly 4px beyond the bubble's tip, the same gap the ring holds all the way round. */ .day-loc-icon.sel::after, .day-loc-icon:hover::after { border-radius: 50% 50% 50% 4px; transform: translateY(calc(-1 * var(--pin-tip-lift))) rotate(-45deg); } /* A quick overshoot on a springy curve for the select bounce. Our marker already exists (unlike a remounted-on-select marker, which would need to start at opacity 0), so it stays visible throughout — same motion, no flicker. */ .day-loc-icon.sel { animation: pin-bounce-select 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both; } @keyframes pin-bounce-select { 0% { transform: scale(0.6) translateY(6px); } 60% { transform: scale(1.15) translateY(-4px); } 100% { transform: scale(1) translateY(0); } } /* The name pill, tucked just under the pin's TIP — measured from the centre (the spot), not the bottom of the box, because the shape has lifted off it. */ .day-pin-label-wrap { position: absolute; top: calc(50% + 7px); left: 50%; transform: translateX(-50%); opacity: 0; z-index: 1; pointer-events: none; transition: opacity 0.2s ease-in-out; } .day-loc-icon.sel .day-pin-label-wrap, .day-loc-icon:hover .day-pin-label-wrap { opacity: 1; } .day-pin-label { display: block; max-width: 170px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #ffffff; color: #000000; font-size: 12.5px; line-height: 18px; font-weight: 500; letter-spacing: 0.05px; text-align: center; border-radius: 9999px; padding: 2px 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); } /* An APPROXIMATE pin: the venue itself isn't on any map we can reach, so this sits at the city's centre instead (see repinLostSpots). Faded, so it reads at a glance as "somewhere in this city" rather than as a located address — the event still appears on the day, which is the point, without the map making a claim it can't back. Needs .in in the selector to outrank the reveal rule that sets opacity to 1. */ .day-loc-icon-approx.in { opacity: 0.55; } /* An idea's pin: same bubble, plus a bright dashed ring (matches trip-flag idea). Lives on ::after because ::before is the bubble. */ .day-loc-icon-idea::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px dashed rgba(0, 0, 0, 0.92); pointer-events: none; /* border-radius rides the same curve and duration as the bubble's own morph (see .day-loc-icon::before), so the outline and the shape inside it round off together instead of the ring snapping to its teardrop a beat early. */ transition: transform 0.26s var(--ease-out), border-radius 0.26s var(--ease-out); } .day-loc-icon svg { display: block; position: absolute; top: 7px; left: 7px; width: 18px; height: 18px; z-index: 1; transition: color 0.26s var(--ease-out), filter 0.26s var(--ease-out), transform 0.26s var(--ease-out); } @media (prefers-reduced-motion: reduce) { .day-loc-icon { transition: none; } .day-loc-icon::before { transition: none; } .day-loc-icon svg { transition: none; } .day-loc-icon-idea::after { transition: none; } .day-loc-icon.sel { animation: none; } .day-pin-label-wrap { transition: none; } } /* YOUR OWN LOCATION — "Find me on the globe" (account menu). Two pieces: the real GPS-accuracy circle is its own map layer in true geographic space (grows/shrinks with zoom — see map.on('load')'s my-location-accuracy source and updateMyLocationAccuracy), drawn UNDER this fixed-size puck marking "you, precisely here" — the same split Google Maps' blue dot uses. The puck's own material is deliberately the SAME one .day-loc-icon uses for a reservation (black disc, crisp white ring, soft drop shadow) — this IS a pin on this globe, just for a place that isn't a booking, so it earns its place by looking like it belongs to the same family, not a mismatched sticker on top. The halo behind it is a slow, soft breathing pulse — the quieter idle language Apple's own blue dot uses, in place of a harder Google-style radar ping, matching this app's motion elsewhere. */ .my-location-pin { display: block; position: relative; width: 22px; height: 22px; pointer-events: none; opacity: 0; transform: scale(0.4); transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .my-location-pin.in { opacity: 1; transform: scale(1); } .my-location-halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(var(--fg-rgb), 0.4) 0%, rgba(var(--fg-rgb), 0) 72%); animation: my-location-breathe 2.6s ease-in-out infinite; } @keyframes my-location-breathe { 0%, 100% { transform: scale(0.85); opacity: 0.6; } 50% { transform: scale(1.7); opacity: 0.15; } } .my-location-dot { position: absolute; inset: 6px; border-radius: 50%; background: #000000; border: 2.5px solid #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 7px 1px rgba(var(--fg-rgb), 0.45); } @media (prefers-reduced-motion: reduce) { .my-location-pin { transition: none; } .my-location-halo { animation: none; opacity: 0.3; } } /* Menu button — top-right of the globe */ /* The menu bubble and the trip flag bubbles share size and shape (a circle). ONE knob — --globe-btn — sizes both, plus the icon and the flag-stack spacing, so they always match. Following Apple HIG / Material, icon buttons are FIXED comfortable sizes that STEP UP at breakpoints (not fluid % — that bloats on big screens). 44px everywhere — Apple HIG's minimum comfortable tap target; the old 37px phone size was below spec and hard to hit one-handed. */ :root { --globe-btn: 44px; } #globe-account-btn, .globe-trip-bubble { width: var(--globe-btn); height: var(--globe-btn); border-radius: var(--r-btn); display: flex; align-items: center; justify-content: center; color: var(--fg); transition: transform var(--dur-tap) var(--ease-snap), background 0.15s ease, opacity 0.2s ease; } /* Phone account avatar — same spot/size the old hamburger used. Circular pic. */ #globe-account-btn { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px); right: 16px; z-index: 6; padding: 0; overflow: hidden; border-radius: 50%; } #globe-account-btn:active, .globe-trip-bubble:active { transform: scale(0.93); background: var(--press); } #globe-account-btn[aria-expanded="true"] { opacity: 0.92; } .globe-account-pic { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: rgba(var(--fg-rgb), 0.12); background-size: cover; background-position: center; background-repeat: no-repeat; font-size: 14px; font-weight: 600; color: var(--fg); line-height: var(--globe-btn); text-align: center; } .sidebar-profile-pic svg, .globe-account-pic svg { width: 18px; height: 18px; opacity: 0.7; } /* "Reading your email" badge — sits in the button's own corner so it travels with it (portrait: top-right; landscape/desktop: top-left — see below), instead of a second fixed screen position to keep in sync. Big enough to actually notice, wearing the whale logo (clipped to a circle, same trick as the trip flag bubbles) with a soft glowing halo that pulses while an email is being read — then holds still on a checkmark once it's done. */ #email-processing-badge { position: absolute; top: -6px; right: -6px; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); animation: email-badge-glow 1.6s ease-in-out infinite; } #email-processing-badge[hidden] { display: none; } .email-badge-logo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* The checkmark sits over the logo, hidden until the pass finishes. Its own flex-centering (rather than the parent's) keeps the pop-in scale centered. */ .email-badge-check { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8)); opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.2s ease; } #email-processing-badge.done { animation: none; box-shadow: 0 0 0 4px rgba(var(--fg-rgb), 0.28), 0 2px 10px rgba(0, 0, 0, 0.6); } #email-processing-badge.done .email-badge-logo { opacity: 0.35; } #email-processing-badge.done .email-badge-check { opacity: 1; transform: scale(1); } @keyframes email-badge-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--fg-rgb), 0.5), 0 2px 10px rgba(0, 0, 0, 0.6); } 50% { box-shadow: 0 0 0 6px rgba(var(--fg-rgb), 0), 0 2px 10px rgba(0, 0, 0, 0.6); } } @media (prefers-reduced-motion: reduce) { #email-processing-badge { animation: none; } .email-badge-check { transition: none; } } /* Globe-quadrant "reading a forwarded email" indicator — just the small plane itself, silently circling in place above the real globe, while that email gets read. Lives OUTSIDE the menu so it's visible whether or not the menu is open. Pinned to the TOP CENTER of the globe quadrant in every layout — deliberately its own fixed spot rather than either corner (where the menu button and the whale logo already live) so it reads as a distinct, unmissable "something just happened" signal instead of competing for space with either of them. Used to also carry a small wireframe-globe glyph behind the plane, wrapped in a circular glass "chip" (border + background + blur) — with the real globe rendered right below it, that chip read as a second, off-center button floating over the globe rather than as part of one animation. Both are gone now: just the plane, no button-shaped chrome around it. */ .globe-processing-icon { position: absolute; z-index: 6; width: var(--globe-btn); height: var(--globe-btn); top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; right: auto; transform: translateX(-50%); } .globe-processing-icon[hidden] { display: none; } .gpi-orbit { position: absolute; inset: 0; animation: orbit 1.4s linear infinite; } .gpi-plane { position: absolute; top: -1px; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; transform: rotate(90deg); color: var(--fg); } @media (prefers-reduced-motion: reduce) { .gpi-orbit { animation: none; } } /* Desktop — match the menu button's own 24px top inset for the same layout rhythm; stays horizontally centered (see the base rule's transform). */ @media (orientation: landscape) and (min-width: 1024px) and (pointer: fine) { .globe-processing-icon { top: calc(env(safe-area-inset-top, 0px) + 24px); } } /* The menu's own in-menu spinner already shows this same state while open — no need for two at once. */ #globe.menu-open .globe-processing-icon { display: none; } #email-processing { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } #email-processing[hidden] { display: none !important; } #email-processing-card { display: flex; align-items: center; gap: 14px; max-width: min(320px, calc(100vw - 40px)); padding: 16px 18px; border-radius: var(--r-card); background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); pointer-events: none; } .email-processing-plane { position: relative; width: 36px; height: 36px; flex-shrink: 0; } .email-processing-plane .gpi-plane { width: 14px; height: 14px; margin-left: -7px; } .email-processing-copy { min-width: 0; text-align: left; } #email-processing-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg2); line-height: 1.25; } #email-processing-sub { margin: 0; font-size: 13px; font-weight: 500; color: rgba(var(--fg-rgb), 0.55); line-height: 1.35; } @media (prefers-reduced-motion: reduce) { .email-processing-plane .gpi-orbit { animation: none; } } /* "Grabbing the information from your Gmail…" — the one moment the app has nothing to show yet, right after a first sign-in. Sits exactly where the processing icon sits (same inset, same glass), just as a readable sentence instead of a symbol: a brand-new empty app plus a spinner reads as broken, a sentence reads as working. Monochrome and glass, like every other non-map surface in the app. */ #gmail-grab-message { position: absolute; z-index: 6; top: calc(env(safe-area-inset-top, 0px) + 16px); left: 50%; transform: translateX(-50%); max-width: min(88%, 340px); padding: 10px 16px; border-radius: var(--r-chip); text-align: center; font-size: 13px; line-height: 1.35; color: rgba(var(--fg-rgb), 0.92); background: rgba(6, 6, 10, 0.55); border: 1px solid rgba(var(--fg-rgb), 0.16); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: gmail-grab-breathe 2.4s ease-in-out infinite; } #gmail-grab-message[hidden] { display: none; } /* A slow, barely-there pulse — enough to say "still working", never enough to distract from the globe. */ @keyframes gmail-grab-breathe { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #gmail-grab-message { animation: none; opacity: 1; } } @media (orientation: landscape) and (min-width: 1024px) and (pointer: fine) { #gmail-grab-message { top: calc(env(safe-area-inset-top, 0px) + 24px); } } /* Same rule as the icon above: don't stack it on top of an open menu. */ #globe.menu-open #gmail-grab-message { display: none; } /* The trip flag bubbles stack vertically right under the menu bubble (12px top gap + the button height + 10px gap), so they follow the button size. */ #globe-trips-bubbles { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 16px + var(--globe-btn) + 10px); right: 16px; z-index: 6; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; } /* In day view we hide the flag strips (the day view is one city, not the trip list). */ #globe-trips-bubbles[hidden] { display: none; } /* The trip flags row. The trip budget used to dock at this row's right edge as a dollar bubble; money lives on the phone bar's Money tab now, so flags are the only thing in here. Hidden by JS (aiMenuTopRow.hidden) when the flags have nothing to show, so an untied "New trip" chat with no trips yet doesn't leave an empty gap. */ #ai-menu-top-row { display: flex; align-items: center; gap: 10px; /* Bottom padding is deliberately generous, not just decorative: a selected flag scales up (see .globe-trip-bubble-selected, up to 1.16x) and an idea-only flag's dashed ring extends further still — together the tallest case grows a good ~7-8px past the plain 44px circle this row otherwise only reserves. overflow-x: auto (on #ai-menu-flags below) forces overflow-y to auto too (a CSS overflow-module rule, not a choice here), so anything not accounted for in padding gets clipped instead of just overlapping the title below — that clipped bottom edge was exactly the bug. 16px clears every case with room to spare, and doubles as clean breathing room between the flags and the title in the chat panel's enlarged/landscape layout. Top padding matches so the row reads as centered/balanced. */ /* The top value is a variable so the phone's landing screen can line the history clock up with this row without hard-coding the same number twice (see --flag-row-pad-top in the phone-bar block). */ padding: var(--flag-row-pad-top, 14px) 16px 16px; flex: 0 0 auto; } #ai-menu-top-row[hidden] { display: none; } /* Same flags, reused as a horizontal row above the AI chat's title (see renderAiMenuFlags) — one tap opens that trip's own reservation chat instead of the globe jump the floating stack does. Row scrolls sideways rather than wrapping so it stays one clean line even with several trips. overflow-x: auto clips at THIS element's own padding edge (setting overflow-x also forces overflow-y: auto, a CSS overflow-module rule) — a selected flag's scale(1.16) paints past the plain circle, so without padding here that growth gets clipped on whichever edges are flush with this box, worst on the first flag (left/top/bottom all flush at once) — that's the dashed/cropped-looking edge you get right after tapping the leftmost flag. 10px padding gives every edge room to breathe; the matching -10px margin cancels it back out so the row's own size/position is unchanged. */ #ai-menu-flags { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0; padding: 10px; margin: -10px; } #ai-menu-flags[hidden] { display: none; } /* The reservation chat's "start something new" control, sitting at the right end of the bubbles' own line (#ai-menu-flags is flex: 1 1 auto, so it takes the slack and this lands hard against the right edge on its own). It shows in exactly one state — inside a reservation chat — because that is the one place the header's own new-chat/history pair is hidden. On the landing screen the history clock already owns this corner and you are already in a new chat; in an untied chat the header pair is still there. */ #ai-menu-new-chat-top, #ai-menu-history-top { display: none; } #ai-menu.ai-trip-chat #ai-menu-new-chat-top { display: flex; } #ai-history-btn[aria-pressed="true"], #ai-menu-history-top[aria-pressed="true"] { color: var(--fg); } #ai-menu-flags .globe-trip-bubble { flex: 0 0 auto; } /* The destination flag fills the whole circle. --flag-size bumps the regular (confirmed) size a little past the plain --globe-btn (the one knob everything else still uses). Confirmed flags keep the plain solid glass edge (the shared GLASS RECIPE rule above already gives every .globe-trip-bubble a 1px solid border) — only .globe-trip-bubble-idea below swaps that for a dashed ring, so the outline marks "tentative" and nothing else. */ .globe-trip-bubble { --flag-size: calc(var(--globe-btn) * 1.08); width: var(--flag-size); height: var(--flag-size); overflow: hidden; position: relative; border-radius: 50%; /* flags stay circular — they're a country mark, not chrome */ } .globe-trip-bubble img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; /* Unselected flags are desaturated so the selected one (full color, see .globe-trip-bubble-selected below) pops out as "the one you're on" at a glance instead of every flag competing at equal color. */ filter: grayscale(0.85) brightness(0.8); transition: filter var(--dur-tap) var(--ease-snap); } /* Idea-only trip flag (paste-a-link / unconfirmed): the ONLY flag state with an outline — a dashed ring instead of the confirmed flag's plain solid glass edge, so "tentative" is the one thing that gets a border here. border-color is transparent (hides the plain 1px glass border every other glass box gets) and the dashed ring is drawn by ::after right at the bubble's own edge. Also a touch bigger than a confirmed flag (relative to the already-bumped --flag-size) so it reads as distinct at a glance too. The flag image is padded down to fit inside the ring instead of touching it. */ .globe-trip-bubble-idea { --idea-size: calc(var(--flag-size) * 1.1); width: var(--idea-size); height: var(--idea-size); border-color: transparent; background: rgba(8, 8, 12, 0.35); padding: calc(var(--idea-size) * 0.11); } .globe-trip-bubble-idea::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1.75px dashed rgba(var(--fg-rgb), 0.92); pointer-events: none; } /* The flag for whichever trip is currently framed on the globe/calendar — set by updateSelectedTripFlags, in step with revealedLayoverTripId — grows slightly so it's obvious at a glance which trip you're working on, in both the globe's own flag stack and its copy in the AI chat panel. Reuses the same transform transition .globe-trip-bubble already has (see --dur-tap/ --ease-snap above), so it eases in whether you tapped the flag or the calendar scrolled to it. z-index lifts it above snug neighbors so the larger circle never looks clipped by the one next to it. */ .globe-trip-bubble-selected { transform: scale(1.22); z-index: 1; } .globe-trip-bubble-selected img { filter: none; } .globe-trip-bubble-selected:active { transform: scale(1.14); } /* Mouse hover: a smaller, PURELY TEMPORARY grow — reverts the instant the pointer leaves, never sticks. Skipped once a flag is already the locked .globe-trip-bubble-selected size (that one only shrinks a touch on press, see above) and gated on real hover capability so a tap on touchscreens can't leave a flag stuck "hovered." The permanent, bigger grow only ever happens via a click/selection (.globe-trip-bubble-selected, set by updateSelectedTripFlags) — hover never locks anything by itself. */ @media (hover: hover) { .globe-trip-bubble:not(.globe-trip-bubble-selected):hover { transform: scale(1.08); } .globe-trip-bubble:not(.globe-trip-bubble-selected):hover img { filter: none; } } /* Layover sub-menu bubble — collapsed (tucked under the primary) at 75% size so it doesn't look like another trip. When THIS trip's month is open (.is-shown, via revealLayoverBubblesFor) it grows to the SAME size as the other flags and sits in the stack as a peer. Scroll away / pick another trip (retractAllLayover- Bubbles) shrinks it back to the smaller tucked size. */ .globe-trip-bubble-layover { width: calc(var(--globe-btn) * 0.75); height: calc(var(--globe-btn) * 0.75); margin-top: calc(-1 * (var(--globe-btn) * 0.75 + 10px)); opacity: 0; transform: translateY(-40%); pointer-events: none; transition: margin-top 0.34s var(--ease-out), transform 0.34s var(--ease-out), opacity 0.26s ease, width 0.34s var(--ease-out), height 0.34s var(--ease-out); } .globe-trip-bubble-layover.is-shown { /* Match primary trip flags (same as .globe-trip-bubble / --flag-size). */ width: var(--flag-size); height: var(--flag-size); margin-top: 0; opacity: 1; transform: translateY(0); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .globe-trip-bubble-layover { transition: none; } } /* When the AI menu is open, tuck the account avatar and flag bubbles — they sit where the overlay card lives on phone/tablet. */ #globe.ai-open #globe-account-btn, #globe.ai-open #globe-trips-bubbles { display: none; } /* Globe-only blur while AI menu is open — calendar below stays live */ #ai-menu-scrim { position: absolute; inset: 0; z-index: 4; background: rgba(0, 0, 0, 0.38); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); pointer-events: auto; } #ai-menu-scrim[hidden] { display: none !important; } /* AI travel-agent menu. Opened card FILLS the whole globe quadrant (see #ai-menu.open's inset below for the thin edge margin) — same on phone, tablet, and desktop. It does not grow past that with the conversation; long chats scroll inside #ai-menu-thread. */ #ai-menu { position: absolute; z-index: 5; display: flex; pointer-events: none; /* closed: no footprint (hidden attribute also forces display:none) */ inset: auto; } #ai-menu[hidden] { display: none !important; } /* Open: fill the globe half (with a small inset) and flex-center the card. */ #ai-menu.open { inset: 0; top: max(10px, env(safe-area-inset-top, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: 10px; left: max(10px, env(safe-area-inset-left, 0px)); display: flex; justify-content: center; align-items: center; width: auto; max-width: none; height: auto; transform: none; } #ai-menu.open .globe-menu-card { /* Fill the quadrant exactly (the inset above is the only margin) — width AND height both 100%, no cap, so it reads as one solid pane instead of a bubble floating with gaps around it. Still never grows past that with the conversation; flex: 0 0 auto keeps it from stretching further. */ width: 100%; height: 100%; max-width: none; max-height: none; min-width: 0; min-height: 0; flex: 0 0 auto; margin: auto; transform-origin: center center; overflow: hidden; /* thread/history scroll inside, not the card shell */ } /* ONE knob — --menu-fs — sets the open menu's base text size; every child below sizes in em off it, so the whole menu scales together. Stepped at breakpoints (Apple HIG / Material: control text is fixed sizes per device, not fluid): iPhone 14px, iPad 16px (touch wants bigger), desktop 15px (mouse, tighter). BOTH width AND height must be roomy — a landscape iPhone Pro/Max is wider than 768px but still short, and the bigger type was one reason the menu could not fit the globe half. */ :root { --menu-fs: 14px; } @media (min-width: 768px) and (min-height: 500px) { :root { --menu-fs: 16px; } } @media (min-width: 1024px) and (min-height: 500px) { :root { --menu-fs: 15px; } } .globe-menu-card { pointer-events: auto; font-size: var(--menu-fs); width: 100%; max-width: 300px; max-height: calc(100% - 58px); overflow-y: auto; overflow-x: hidden; /* vertical scroll only */ padding: 10px; border-radius: var(--r-card); background: rgba(6, 6, 10, 0.88); -webkit-backdrop-filter: blur(36px) saturate(1.12); backdrop-filter: blur(36px) saturate(1.12); border: 1px solid rgba(var(--fg-rgb), 0.18); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(var(--fg-rgb), 0.07); transform-origin: top right; animation: globe-menu-in 0.28s var(--ease-out) both; box-sizing: border-box; } @keyframes globe-menu-in { from { opacity: 0; transform: scale(0.2) translateY(-6px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Landscape: account avatar + trip flag bubbles stay top-LEFT. */ @media (orientation: landscape) { #globe-account-btn { top: calc(env(safe-area-inset-top, 0px) + 16px); left: 16px; right: auto; } #globe-trips-bubbles { top: calc(env(safe-area-inset-top, 0px) + 16px + var(--globe-btn) + 10px); left: 16px; right: auto; align-items: flex-start; } } /* Cost panel + money fab are desktop-only (flag → fab → left sheet). */ #cost-panel, #cost-fab { display: none !important; } /* "Open source emails" panel — same desktop-only story as the cost panel above (see openSourceEmailsPanel in app.js): it takes over the AI chat + cost columns, both of which only really exist as this desktop layout. */ #email-panel { display: none !important; } /* HOW THAT PANEL IS BUILT, as opposed to WHERE IT SITS. Everything below is the panel's own construction - the header row, the round back/close/print buttons, the list of emails, the reader's frame. None of it is desktop-specific; it is the same panel wherever the panel appears, exactly as #photo-panel's internals a few lines down are. It used to live inside the desktop block purely because desktop was the only layout that ever showed this panel, and the iPad landscape rail found the cost of that the moment it gave the panel a box: the box appeared and the inside of it did not lay out - header buttons at zero width, the reader not filling its own pane. Out here instead, so a layout only has to say where the panel goes. It costs nothing on the layouts that do not show it: the rule directly above hides the panel outright, and every selector here is inside it. The header's 48px of top padding stays desktop's number - it is there to clear a window's chrome, and a layout that starts at the top of the screen overrides just that (see the rail block). */ #email-list-view, #email-reader-view { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } #email-panel-header, #email-reader-header { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 48px 28px 20px; border-bottom: 1px solid var(--glass-border); } #email-panel-close, #email-reader-back, #email-reader-print { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--glass-bg); color: var(--fg); cursor: pointer; transition: background 0.15s ease, transform var(--dur-tap) var(--ease-out); } #email-panel-close:hover, #email-reader-back:hover, #email-reader-print:hover { background: rgba(var(--fg-rgb), 0.14); } #email-panel-close:active, #email-reader-back:active, #email-reader-print:active { background: var(--press); transform: scale(0.93); } #email-panel-close svg, #email-reader-back svg, #email-reader-print svg { width: 18px; height: 18px; } /* Print sits at the far right of the header — the subject grows to fill the space between the back arrow and it. */ #email-reader-print { margin-left: auto; } #email-panel-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } #email-reader-subject { flex: 1 1 auto; font-size: 16px; font-weight: 600; min-width: 0; } #email-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 20px 28px; display: flex; flex-direction: column; gap: 6px; } .email-list-empty { margin: 24px 8px; color: rgba(var(--fg-rgb), 0.5); font-size: 14px; } .email-list-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 12px; border: 1px solid var(--glass-border); border-radius: var(--r-chip); background: var(--glass-bg); color: var(--fg); font: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease, transform var(--dur-tap) var(--ease-out); } .email-list-row:hover { background: rgba(var(--fg-rgb), 0.08); } .email-list-row:active { background: var(--press); transform: scale(0.99); } /* Reuses .res-leg-sum/.res-leg-date/.res-leg-fn — the exact row shape the Journey list already uses — so a list of emails reads as the same design language as the rest of the reservation detail view. */ .email-list-row .res-leg-fn { font-size: 15px; } #email-reader-body { flex: 1 1 auto; min-height: 0; padding: 20px 28px 28px; overflow-y: auto; } /* The real email, full-size — this pane IS the reading view, so the frame fills all the room it has instead of cropping. */ .email-reader-frame { display: block; width: 100%; height: 100%; min-height: 100%; border: 1px solid var(--glass-border); border-radius: var(--r-chip); background: #fff; } .email-reader-text { max-height: none; height: 100%; } /* A still-tentative idea's photo gallery (openIdeaDetail, auto-opened, no button) — same desktop-only story. */ #photo-panel { display: none !important; } /* Everything INSIDE that gallery, at the top level on purpose. Which box the panel occupies is a per-layout question (desktop gives it the email panel's bounds, the iPad landscape rail gives it the middle column), but the header, the scroll body and the photo slots are the same gallery on every one of them — so they are written once here and each layout only says where the panel sits. */ #photo-panel-header { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 48px 28px 20px; border-bottom: 1px solid var(--glass-border); } #photo-panel-close { flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 999px; background: var(--glass-bg); color: var(--fg); cursor: pointer; transition: background 0.15s ease, transform var(--dur-tap) var(--ease-out); } #photo-panel-close:hover { background: rgba(var(--fg-rgb), 0.14); } #photo-panel-close:active { background: var(--press); transform: scale(0.93); } #photo-panel-close svg { width: 18px; height: 18px; } #photo-panel-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } /* Idea photos, opened full-size (openPhotoGalleryPanel) — one big image after another, uncropped so nothing about the place is cut off, just scroll down for the next one. */ #photo-panel-body { flex: 1 1 auto; min-height: 0; padding: 20px 28px 28px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } /* Each photo's own slot: it reserves space and shimmers before the photo arrives, so the gallery opens looking like a gallery instead of an empty column. THE IMAGE'S SHAPE IS NEVER THE SLOT'S BUSINESS. .photo-panel-img below is width: 100% / height: auto and nothing here overrides that, so a photo is always drawn at its own aspect ratio — while it is downloading, once it is done, and even if the JS that adds .is-loaded never runs at all. The first version of this got that wrong: the slot was a hard aspect-ratio: 4/3 box and the image was stretched across it with height: 100% + object-fit: cover until .is-loaded swapped it back. But a browser paints a big photo PROGRESSIVELY, well before its load event fires — so for the entire download you watched the picture squashed into a 4:3 crop, and it only snapped to its real shape at the very end. The slower the gallery, the longer it looked broken. So the placeholder reserves height with min-height, which an image can freely grow past, instead of a ratio it has to be forced into. .is-loaded is now cosmetic only — it stops the shimmer and fades the photo in. If it never lands, the worst case is a shimmer that keeps running behind a correctly-shaped, fully visible photo. */ .photo-panel-shot { position: relative; width: 100%; /* #photo-panel-body is a flex COLUMN that scrolls, so every slot here is a flex item — and a flex item's default flex-shrink: 1 lets the column squeeze all of them to share its height instead of letting them stack up and scroll. Ten photos in a 764px column got crushed to 50px each, and because this box clips (overflow: hidden below), a perfectly correctly-sized image was sliced into a letterbox strip. The image was never distorted — its container was. flex: 0 0 auto is the fix: a slot is exactly as tall as its photo and the column scrolls, which is the whole point of a gallery. Do not let this shrink. */ flex: 0 0 auto; min-height: 220px; border-radius: var(--r-chip); overflow: hidden; background: linear-gradient( 100deg, var(--glass-bg) 30%, color-mix(in srgb, var(--fg2) 9%, var(--glass-bg)) 50%, var(--glass-bg) 70% ); background-size: 220% 100%; animation: photo-shimmer 1.3s linear infinite; } .photo-panel-shot.is-loaded { min-height: 0; /* a short photo must not be padded out once it's in — safe only because flex-shrink is 0 above; min-height: 0 on a shrinkable flex item is exactly what let the column crush these. */ background: none; animation: none; } /* Keyframes moved out to the top level (search "photo-shimmer") — the phone's inline .idea-photo-shot needs the same animation, and a @keyframes declared inside this desktop media query does not exist on a phone at all. */ /* width/height here are the whole guarantee against a distorted photo, so nothing above may set height, object-fit or position on this element. */ .photo-panel-img { display: block; width: 100%; height: auto; border-radius: var(--r-chip); border: 1px solid var(--glass-border); opacity: 1; transition: opacity 0.32s var(--ease-out); } /* Only the fade is class-driven, and it defaults to VISIBLE — an image with no .is-loaded yet is merely transparent over its own shimmer, never mis-shaped, and a failure to add the class can't hide a loaded photo because openPhotoGalleryPanel also settles every slot on a timer. */ .photo-panel-shot:not(.is-loaded) .photo-panel-img { opacity: 0; } @media (prefers-reduced-motion: reduce) { .photo-panel-shot { animation: none; } .photo-panel-img { transition: none; } } /* DESKTOP: AI pane left, globe/calendar stacked right. */ @media (orientation: landscape) and (min-width: 1024px) and (pointer: fine) { /* DESKTOP LAYOUT: the AI travel agent is the left 60% of the screen, the globe and calendar stack in the right 40% (globe on top, calendar below) so a full month of square day cells stays in view. #ai-menu is still nested in the HTML inside #globe — here it is position: fixed over that left 60% of the SCREEN. The chat text itself stays a 694px reading measure (centered in the pane) so it does not stretch with the column. */ /* The "cost" column is always present in the track list (width 0 when closed) rather than being added/removed via a class — a browser can only smoothly interpolate grid-template-columns between two values with the SAME number of tracks. Toggling between a 3-track and a 4-track value (the old approach) fails that test, so the whole grid — sidebar, AI pane, globe/calendar — snapped to its new position instead of easing there alongside the cost panel's own slide-in. Keeping the track count constant and only changing --cost-col-w lets every column move as one animation. var(--ease-out) (not a plain "ease") to match the settle curve every other view/panel in the app already uses, and a touch longer (0.4s vs 0.35s) so a layout-triggering property like this — which the browser genuinely recomputes every frame, unlike a transform/opacity fade — reads as deliberate motion rather than a rushed snap. The stutter this used to have wasn't really the curve, though: it was every AI chat message's button-row/period-label ResizeObserver recalculating on each of those frames too (see watchAiButtonRows' observeLaterResizes in app.js) — fixed there by debouncing that work to run once motion actually stops, not on every intermediate width. */ #app { display: grid; grid-template-columns: var(--sidebar-w, 56px) var(--cost-col-w, 0px) minmax(0, 1fr) var(--right-col); grid-template-rows: 45% 55%; grid-template-areas: "sidebar cost ai globe" "sidebar cost ai calendar"; --cost-panel-w: 360px; --cost-col-w: 0px; --right-col: 40%; transition: grid-template-columns 0.4s var(--ease-out); } /* Cost panel open: wider sheet (440px); extra width from the globe/calendar column (40%→34%), not the AI pane. */ body.cost-open #app { --cost-panel-w: 440px; --cost-col-w: 440px; --right-col: 34%; } #app-sidebar { grid-area: sidebar; } #globe { grid-area: globe; flex: none; } #calendar { grid-area: calendar; flex: none; padding-top: 20px; } /* Globe-only blur behind the AI card no longer applies — the AI card doesn't sit over the globe anymore, it has its own space. */ #ai-menu-scrim { display: none !important; } /* Desktop uses the sidebar avatar — hide the phone globe account button. */ #globe-account-btn { display: none !important; } /* Trip flags move exclusively to the AI chat's own flag row (#ai-menu-flags) at this breakpoint — the globe quadrant's copy is redundant once the chat is always open beside it, so it's removed outright rather than merely tucked away while a menu is open. */ #globe-trips-bubbles { display: none !important; } /* Collapsed layover = smaller nested flag; revealed = same size as the other trip flags at this breakpoint (--globe-btn, same as the menu button). */ .globe-trip-bubble-layover { width: calc(var(--globe-btn) * 0.75); height: calc(var(--globe-btn) * 0.75); margin-top: calc(-1 * (var(--globe-btn) * 0.75 + 10px)); } .globe-trip-bubble-layover.is-shown { width: var(--flag-size); height: var(--flag-size); margin-top: 0; } /* Desktop AI chat: sits between the sidebar and the globe/calendar. A 1px light line on the right edge is the split between AI and globe/calendar (same hairline as the rest of the glass outlines). */ #ai-menu.open { position: fixed; inset: 0; top: 0; right: var(--right-col); bottom: 0; left: var(--sidebar-w, 56px); width: auto; height: 100%; border-right: 1px solid var(--glass-border); transition: left 0.4s var(--ease-out), right 0.4s var(--ease-out); } body.cost-open #ai-menu.open { left: calc(var(--sidebar-w, 56px) + var(--cost-panel-w)); right: var(--right-col); } /* Left cost sheet — fixed in the new grid column; slides from behind the sidebar. */ #cost-panel { display: flex !important; flex-direction: column; position: fixed; top: 0; bottom: 0; left: var(--sidebar-w, 56px); width: var(--cost-panel-w); z-index: 5; padding: 48px 0 32px; box-sizing: border-box; background: var(--bg); border-right: 1px solid var(--glass-border); color: var(--fg2); transform: translateX(-100%); transition: transform 0.4s var(--ease-out); pointer-events: none; overflow: hidden; } body.cost-open #cost-panel { transform: translateX(0); pointer-events: auto; } /* Padding lives on the list itself (not the panel) so its scrollbar rides the panel's right border flush, same as #ai-menu-thread's pattern. */ #cost-panel-list { flex: 1 1 auto; min-height: 0; padding-left: 20px; padding-right: 20px; } #cost-panel-add { flex-shrink: 0; margin-top: 8px; margin-left: 20px; margin-right: 20px; } #cost-panel .cost-total-row { flex-shrink: 0; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0 20px 22px; padding: 0 0 18px; border-top: none; border-bottom: 1px solid rgba(var(--fg-rgb), 0.12); } #cost-panel .cost-total-row > span:first-child { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.45); } #cost-panel-total { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; } #cost-panel-total .cost-item-cents { font-size: 0.52em; font-weight: 600; color: rgba(var(--fg-rgb), 0.5); } /* Same row recipe as New Chat / History / flags — only extra is the open-state gap that nudges flags below it. */ #cost-fab { display: flex !important; margin-bottom: 0; transition: margin-bottom 0.2s ease, background 0.15s ease, transform var(--dur-tap) var(--ease-out); } #cost-fab[hidden] { display: none !important; } #cost-fab[aria-pressed="true"] { margin-bottom: 10px; background: rgba(var(--fg-rgb), 0.1); } /* "Open source emails" panel — takes over exactly the space #ai-menu.open and #cost-panel together occupy (sidebar edge to the globe/calendar column), sitting above both so it fully replaces them instead of layering on top. Enters from the sidebar edge, growing rightward (left-to-right) to its resting bounds (sidebar edge to globe/calendar edge); closing reverses that, collapsing back down to the sidebar edge. Deliberately NOT a translateX on a fixed-width box (the shape every other slide-in panel here uses, e.g. #cost-panel): this panel's width isn't a constant — it's `100% - --sidebar-w - --right-col`, which changes with --cost-col-w/--right-col — so translateX(±100%) shifts it by however wide it HAPPENS to be, not by however far it needs to travel. That's exactly what broke the sidebar earlier (see git history): the "closed" box mirrored right back onto neighboring chrome instead of clearing it, and only z-index luck kept it from painting over. A LEFT-anchored version of that same translateX approach would replay the identical bug against the sidebar the instant it's closed. Animating `right` from the SAME point as `left` sidesteps the whole class: closed, right === left (a zero-width box at the sidebar edge — zero area, nothing to paint, nothing to be hidden behind); open, right eases out to the globe/calendar edge, growing the box rightward. No transform, no self-width math, so it can never re-cover a neighbor regardless of how wide the panel ends up being. z-index still stays below #app-sidebar's (6) — same reason #cost-panel is 5, not 6 — as a second line of defense, not the only one. */ /* #photo-panel (a still-tentative idea's photos, opened automatically by openIdeaDetail the moment they load — no button) shares this exact same left-to-right slide — same reasoning, same math, just a second panel taking over the identical space. See openPhotoGalleryPanel/ closePhotoGalleryPanel in app.js. */ #email-panel, #photo-panel { display: flex !important; flex-direction: column; position: fixed; top: 0; bottom: 0; left: var(--sidebar-w, 56px); right: calc(100% - var(--sidebar-w, 56px)); width: auto; z-index: 5; background: var(--bg); border-right: 1px solid var(--glass-border); transition: left 0.4s var(--ease-out), right 0.4s var(--ease-out); pointer-events: none; overflow: hidden; } body.email-panel-open #email-panel, body.photo-panel-open #photo-panel { right: var(--right-col); pointer-events: auto; } @media (prefers-reduced-motion: reduce) { #cost-fab { transition: none; transform: none !important; } #cost-panel { transition: none; } #ai-menu.open { transition: none; } #app { transition: none; } #email-panel, #photo-panel { transition: none; } } /* Flags, history, budget, and new-chat live in the sidebar on desktop. */ #ai-menu-flags { display: none !important; } #ai-menu-top-row { display: none !important; } #ai-history-btn, #ai-new-chat-btn { display: none !important; } /* No floating box: fills the pane completely, no border/blur/shadow/rounded corners — just the conversation sitting directly on the page. Solid --bg (not "none") so this reads as a real panel rather than a transparent cutout showing the globe/space behind it — same base the globe/calendar side already sits on. Vertical pad only on the card. Header / history / budget stay a 694px reading column; the composer is a bit wider (752px, matching Grok's query bar) so it breaks that stack; the thread is full pane width so its scrollbar sits on the AI section's right edge, with message text kept at 694px via horizontal padding. 24px minimum side inset on a narrower desktop. Bottom pad matches Grok.com — clear air under the composer. */ #ai-menu.open .globe-menu-card { width: 100%; height: 100%; max-height: none; border: none; border-radius: 0; background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; font-size: 15px; padding: 48px 0 32px; } #ai-menu-header, #ai-history-list, #ai-menu-budget-view { max-width: 694px; width: calc(100% - 48px); margin-left: auto; margin-right: auto; box-sizing: border-box; } #ai-menu-form { max-width: 752px; width: calc(100% - 48px); margin-left: auto; margin-right: auto; box-sizing: border-box; } /* Full-pane scroller so the thin bar sits on the AI section's right edge; message measure stays 694px via side padding (24px min). */ #ai-menu-thread { width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 0 max(24px, calc((100% - 694px) / 2)) 0.6em; box-sizing: border-box; scrollbar-width: thin; scrollbar-color: rgba(var(--fg-rgb), 0.14) transparent; } #ai-menu-thread::-webkit-scrollbar { width: 6px; } #ai-menu-thread::-webkit-scrollbar-track { background: transparent; } #ai-menu-thread::-webkit-scrollbar-thumb { background: rgba(var(--fg-rgb), 0.14); border-radius: 99px; } /* Day view: keep a little air under the pane edge so the back/prev/next buttons are not flush with the top (used to pull the row up to line up with globe chrome). Margin-bottom stays larger for air between the title and the Morning/Afternoon/Evening columns underneath. */ #day-header { margin-top: 10px; margin-bottom: 28px; } /* Day/month/year title: bigger, matching the month view's own desktop bump (#calendar-title, set in the landscape+fine block above) instead of staying at the base 18px used everywhere else. */ #day-title { font-size: 23px; letter-spacing: -0.01em; } } /* iPad landscape (touch): keep the account avatar on the LEFT, lowered. */ @media (orientation: landscape) and (pointer: coarse) and (min-width: 1024px) { #globe-account-btn { left: 16px; right: auto; top: calc(env(safe-area-inset-top, 0px) + 72px); } #globe-trips-bubbles { left: 16px; right: auto; align-items: flex-start; top: calc(env(safe-area-inset-top, 0px) + 72px + var(--globe-btn) + 10px); } } /* Snappy luxurious animation for menu open (non-intrusive, translucent feel via glass) */ #ai-menu.open .globe-menu-card { animation: menu-open-pop 0.28s var(--ease-out) both; } @keyframes menu-open-pop { from { opacity: 0; transform: scale(0.92) translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #ai-menu.open .globe-menu-card { animation: none; } } .globe-menu-row { display: flex; align-items: center; gap: 0.7em; width: 100%; text-align: left; font-size: 1em; font-weight: 600; color: var(--fg); border-radius: var(--r-chip); padding: 0.85em 1em; box-shadow: none; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-border); transition: transform var(--dur-tap) var(--ease-snap), background 0.15s ease; } .globe-menu-row:active { background: var(--press); transform: scale(0.98); } .globe-menu-row[aria-expanded="true"] .globe-menu-row-chev { transform: rotate(90deg); } .globe-menu-row-icon { flex-shrink: 0; display: inline-flex; opacity: 0.9; } .globe-menu-row-icon svg { width: 1.3em; height: 1.3em; } .globe-menu-row-label { flex: 1; min-width: 0; } .globe-menu-row-chev { flex-shrink: 0; font-size: 1.28em; color: rgba(var(--fg-rgb), 0.45); transition: transform 0.2s ease; line-height: 1; } /* ---------- AI travel-agent menu: header, chat thread, history list ---------- Typography follows the rest of the app (see day cards + ideas panel): • body / reading text ≈ --menu-fs (14 phone / 16 iPad / 15 desktop) • secondary / muted captions a step down (~0.85–0.93em), never below ~12px • weight + opacity carry hierarchy more than shrinking size further The chat card is a flex column: header + form stay fixed, thread scrolls. */ /* Chat card: column layout so the thread eats leftover height inside the FIXED shell and the composer stays put at the bottom. */ #ai-menu .globe-menu-card { display: flex; flex-direction: column; overflow: hidden; /* scroll lives on the thread, not the whole card */ /* Roomier than the hamburger menu's tight 10px/12px — matches the generous side margins Notion gives its own chat column (studied on app.notion.com: the thread's own text sits well clear of the panel edge on every side). em-based so it scales with --menu-fs across phone/tablet/desktop instead of a fixed px inset that would eat too much of a narrow phone card. */ padding: 1.5em 2em 1.3em; box-sizing: border-box; } /* Title on the left, "history" + "new chat" icon buttons on the right — same row-of-controls pattern grok.com uses above its own chat thread. */ #ai-menu-header { display: flex; align-items: flex-start; gap: 6px; flex-shrink: 0; padding: 0 0 0.9em; /* horizontal inset now lives on the card padding above */ } #ai-menu-title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: rgba(var(--fg-rgb), 0.9); } .ai-menu-title-route { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--fg2); white-space: normal; overflow-wrap: anywhere; } .ai-menu-title-meta { font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: rgba(var(--fg-rgb), 0.5); font-variant-numeric: tabular-nums; } .ai-icon-btn { flex-shrink: 0; width: 1.75em; height: 1.75em; display: flex; align-items: center; justify-content: center; border-radius: var(--r-chip); color: rgba(var(--fg-rgb), 0.75); transition: background 0.15s ease; } .ai-icon-btn:active { background: var(--press); } #ai-history-btn[aria-pressed="true"] { background: var(--press); color: var(--fg); } /* Inside a reservation chat (set by syncAiEmptyState) neither of these has anything to do: a reservation has exactly one chat, so there is no second one to start under it and no list of past ones to pick from. Both jobs move to #ai-menu-new-chat-top, which goes home where those choices live. Desktop already hides this pair outright (the sidebar carries them there), so this is what makes the two layouts agree rather than something phone-only. */ #ai-menu.ai-trip-chat #ai-history-btn, #ai-menu.ai-trip-chat #ai-new-chat-btn { display: none !important; } /* The conversation itself — fills the card's leftover height (below header, above composer) and scrolls when the chat gets long. The card now fills the whole quadrant, so this just eats whatever height that leaves. */ #ai-menu-thread { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; /* Space between whole TURNS (a question, a reply, the next question) — a different, bigger rhythm than the paragraph-to-paragraph spacing inside one reply (see .ai-p + .ai-p below). 14px read as one long run-on block, question and answer fused together; this is Grok/Notion's own turn-to-turn air, measured on grok.com and notion.com. */ gap: 32px; /* Top/bottom only — a shorthand here would wipe the desktop thread's side padding that keeps messages at 694px while the bar sits on the pane edge. */ padding-top: 0; padding-bottom: 0.6em; /* Soft fade where the scrolling thread meets the title above and the composer below, instead of content cutting off on a hard edge — but only on whichever edge there's actually more conversation to scroll to. Faded PAST edges (the very first message, or the very last) just look like broken/blurry text with nothing to explain it, so updateAiThreadFade (see its own comment) collapses these two custom properties to 0px the moment that edge is scrolled all the way home. -webkit- prefix required for iPhone Safari. */ --ai-thread-fade-top: 20px; --ai-thread-fade-bottom: 20px; -webkit-mask-image: linear-gradient(to bottom, transparent, black var(--ai-thread-fade-top), black calc(100% - var(--ai-thread-fade-bottom)), transparent); mask-image: linear-gradient(to bottom, transparent, black var(--ai-thread-fade-top), black calc(100% - var(--ai-thread-fade-bottom)), transparent); } #ai-menu-thread[hidden] { display: none; } /* Swaps in for #ai-menu-thread + #ai-menu-form when the phone bar's Money tab is tapped (see showAiBudgetView) — same "fills the card's leftover height" sizing, so the swap never jumps the card's own height around. */ #ai-menu-budget-view { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0 0 0.6em; } #ai-menu-budget-view[hidden] { display: none; } /* The trip's total, on the title's line rather than at the foot of the list. Money is the one number you open this view for, so it reads first and big instead of after a scroll past every line item — which is also why the "Total" label is gone: with nothing else on that line the number needs no naming. Bigger than the route beside it (22px against 20px) so it is clearly the figure and not a second title. align-self: baseline sits it on the route's own baseline; the header is flex-start otherwise and it would ride high against a two-line title. */ /* The trip's total, the line under the route inside the title block. Money is the number you open this view for, so it sits with the title rather than at the foot of the list — and with nothing else on its line it needs no "Total" label. The title block is a flex COLUMN (align-items: flex-start), so this needs no positioning of its own: it stacks under the route and sits hard against the left edge like everything else there. Sized in em, off the title block's own font, so it tracks every place that restyles the header for a screen size instead of pinning one pixel value that only suits the width it was measured at. nowrap because a total is one token and breaking "$4,293.14" across two lines would be nonsense. */ #ai-menu-budget-total-amount { align-self: flex-start; font-size: 1.65em; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--fg); white-space: nowrap; } #ai-menu-thread[hidden] { display: none; } #ai-menu-hint { font-size: 0.93em; /* muted caption — like .detail-subtitle / .recs-sub */ line-height: 1.45; color: rgba(var(--fg-rgb), 0.55); padding: 0 0 0.3em; } /* Chat bubbles — user on the right (a quiet highlight, like Grok's own), the assistant flush left with no bubble background (reads as "the app talking", not a boxed-in reply). Size matches Grok.com chat messages. */ .ai-msg { font-size: 15px; line-height: 1.5; letter-spacing: normal; max-width: 92%; min-width: 0; overflow-wrap: break-word; word-break: normal; } .ai-msg-user { align-self: flex-end; background: rgba(var(--fg-rgb), 0.1); border-radius: var(--r-chip); padding: 8px 16px; color: var(--fg); position: relative; /* the hover Edit/Copy buttons hang off the bottom of it */ /* The thread's own turn-to-turn gap is 32px, and the Edit/Copy strip now hangs almost exactly that far below a user bubble — so on hover the buttons sat right up against the reply underneath, which is what made the pair feel wedged in. This is added ON TOP of the thread gap and applies only to a user message, so the question-to-answer step is the one that opens up and the reply-to-next-question rhythm is untouched. */ margin-bottom: 14px; } /* Inline actions — a traveler's own bubble only (see renderAiMessage). Two small square buttons, a pencil and two sheets, sit just UNDER the bubble and fade in only while it's hovered, the same way Grok.com does it. They are positioned OUTSIDE the bubble's own box on purpose: an "Edit" row living inside it made the bubble tall and lopsided, with more air under the text than over it. Only on a real mouse — touch has no hover, so nothing shows on a phone. Saving swaps the whole bubble's view for a textarea (.ai-msg-editing hides .ai-msg-view). */ /* THE INVISIBLE HIT AREA. On grok.com the buttons live in a band that reaches well below the text, and the whole band is live: the pointer can be several pixels under the last line, nowhere near a button, and the pair still lights up. Measured on a real grok thread (DevTools, 2026-09-06) that band runs 44px past the bubble's bottom edge and spans the row, not just the two buttons. Ours used to be neither. It was only as wide as the buttons themselves (`right: 0` with no `left`), so the space below the text but left of them was dead; and it was `pointer-events: none` until already hovered, which meant the band could KEEP a hover the bubble had started but could never START one. Coming at the message from underneath — the natural direction when you're reaching for Edit — nothing happened at all. So: stretch it edge to edge (left + right), give it the full 44px of grok's depth, and leave it permanently hit-testable. Being a child of the bubble, the pointer landing anywhere in here counts as :hover on the bubble, which is what lights the buttons — the band is the trigger, not just the keeper. It stays invisible and costs nothing: it occupies the margin under a user message (see .ai-msg-user's margin-bottom, which is sized to clear it) so there is never anything beneath it to block. The top edge still overlaps the bubble by 2px on purpose. A real gap there would be a seam the pointer could cross where it is over neither box, and the buttons would flicker out mid-reach. */ .ai-msg-actions { position: absolute; top: calc(100% - 2px); left: 0; right: 0; padding-top: 8px; padding-bottom: 4px; /* 2 + 8 + 32 + 4 = grok's 44px of reachable depth */ display: flex; justify-content: flex-end; /* full-width band, buttons still at the end */ gap: 2px; /* grok.com's own pitch: 34px between two 32px buttons */ opacity: 0; transform: translateY(-2px); transition: opacity 0.12s ease, transform 0.12s ease; } /* Each slot is a fixed 32x32 box that holds TWO buttons stacked exactly on top of each other (edit+cancel in one slot, copy+save in the other) — see renderAiMessage's editSlot/copySlot. Sharing one box is what makes the swap land pixel-perfect: the cross replaces the pencil in ITS box, the tick replaces the sheets in ITS box, rather than the whole pair reflowing into a differently-sized row and landing a few px off. */ .ai-msg-act-slot { position: relative; width: 32px; height: 32px; flex-shrink: 0; } /* Measured off grok.com's own buttons (2026-09-06, DevTools on a real thread): 32x32, fully round, NO background and NO border at rest, glyph at rgb(158,158,158) — a ghost button that only becomes a button under the pointer. The bordered chips this had before read as form controls stapled to the bubble; these read as part of the message. */ .ai-msg-act-btn, .ai-msg-edit-act { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; border: none; border-radius: 9999px; background: transparent; color: rgb(158, 158, 158); cursor: pointer; /* Fast/snappy on purpose — this is a state swap the traveler just triggered by clicking Edit, not a passive hover reveal, so it should feel immediate rather than eased-and-lingering. */ transition: background 0.15s ease, color 0.15s ease, opacity 0.14s var(--ease-snap), transform 0.14s var(--ease-snap); } .ai-msg-act-btn:hover, .ai-msg-edit-act:hover { color: var(--fg); background: rgba(var(--fg-rgb), 0.09); } .ai-msg-act-btn:active, .ai-msg-edit-act:active { background: rgba(var(--fg-rgb), 0.15); } .ai-msg-act-btn.ai-msg-copied { color: var(--fg); } .ai-msg-act-btn svg, .ai-msg-edit-act svg { width: 14px; height: 14px; } /* Rest state: the pencil/sheets sit at full size and opacity, the cross/tick are shrunk and invisible underneath them — ready to pop in without ever contributing to layout while hidden (position: absolute already keeps them out of flow; opacity+scale is just what animates). The band above is always hit-testable so it can trigger the hover; buttons inside it are not, until they are actually visible — otherwise an invisible button could be clicked by someone who just happened to press the mouse while passing through. */ .ai-msg-act-btn { pointer-events: none; } .ai-msg-edit-act { opacity: 0; transform: scale(0.55); pointer-events: none; } /* The threshold: the pointer being anywhere on the bubble (or on the strip holding the buttons, which is part of it) shows them; leaving shows them out again. :focus-within keeps them reachable by keyboard too, where there is no pointer to hover with. */ @media (hover: hover) { .ai-msg-user:hover .ai-msg-actions, .ai-msg-user:focus-within .ai-msg-actions { opacity: 1; transform: none; /* settles the last 2px as it fades in */ } .ai-msg-user:hover .ai-msg-act-btn, .ai-msg-user:focus-within .ai-msg-act-btn { pointer-events: auto; } } .ai-thread-busy .ai-msg-actions { display: none; } /* a reply is already generating */ /* While editing the band stays exactly where it is and simply swaps its contents: the pencil and sheets shrink out, the cross and tick pop in at full size, each in the SAME slot the button it replaces was just sitting in. It is pinned visible rather than hover-revealed, because the two buttons you need to finish an edit must not vanish when the pointer wanders off the message. `!important` on pointer-events is the one place that needs it: the hover rule just above is a more specific selector (:hover adds a level) and would otherwise re-enable the now-invisible pencil/sheets the instant the mouse — already sitting on the bubble from the click that opened editing — registers as "hovering". */ .ai-msg-editing .ai-msg-actions { opacity: 1; transform: none; } .ai-msg-editing .ai-msg-act-btn { opacity: 0; transform: scale(0.55); pointer-events: none !important; } .ai-msg-editing .ai-msg-edit-act { opacity: 1; transform: scale(1); pointer-events: auto; } .ai-msg-editing .ai-msg-view { display: none; } /* A user bubble is normally shrink-wrapped to its own short text (align-self: flex-end on .ai-msg-user) — far too narrow for comfortably editing a long prompt. While editing, stretch it to the same full width as the composer input at the bottom of the panel, instead of staying pinched to the original bubble's size. */ /* Editing does NOT resize the bubble's WIDTH. It used to stretch to the full width of the thread the moment Edit was tapped, which threw the message across the pane and moved the very words being corrected — width stays pinned to what startEditAiMessage measured. Height is the opposite: the textarea auto-grows (growAiEditInput) as the traveler types, and the bubble grows with it in normal document flow, pushing the rest of the thread down rather than scrolling inside a fixed box. min-width only rescues a two-word message from being a sliver to type into. */ .ai-msg-user.ai-msg-editing { min-width: min(220px, 100%); box-sizing: border-box; } /* The textarea is the only thing in here now that the cross and tick have moved out to the button band, so "the height of the edit box" is just "the height of the textarea it holds". */ .ai-msg-edit-box { display: flex; flex-direction: column; min-width: 200px; } /* No field inside a bubble — the textarea IS the bubble's text. Transparent, borderless, zero padding and the exact type of the message it replaces, so tapping the pencil changes nothing you can see except a caret appearing. That is the whole of Grok's inline edit, and the reason it feels like correcting a sentence rather than opening a form. */ .ai-msg-edit-input { display: block; width: 100%; resize: none; /* Auto-grow (growAiEditInput) sets an explicit height every time the text changes, so the box never needs its own scrollbar. */ overflow-y: hidden; background: transparent; border: none; border-radius: 0; padding: 0; font: inherit; font-size: 15px; line-height: 1.5; color: var(--fg); } .ai-msg-edit-input:focus { outline: none; } /* The editor's cross and tick — sizing, position, hover/active, and the opacity+scale swap are all on the shared .ai-msg-act-btn, .ai-msg-edit-act rule above (same slot as the pencil/sheets they replace). Only the tick's own accent color lives here. */ /* The tick is the confirming action, so it carries the weight — the same solid-white treatment .btn-save has, at icon size. */ .ai-msg-edit-act-save { color: rgba(var(--fg-rgb), 0.85); } .ai-msg-edit-act-save:hover { background: var(--invert-bg); color: var(--invert-fg); } .ai-msg-assistant { align-self: flex-start; color: rgba(var(--fg-rgb), 0.92); /* Old chats (and any stray text node) keep their real line breaks; new replies are laid out block by block — see appendFormattedReply. */ white-space: pre-line; } /* One line of a reply. Real space between every paragraph, bullet and section so a long itinerary is easy to read instead of one solid chunk. */ .ai-msg-assistant .ai-p { margin: 0; white-space: normal; /* the line is its own block now — nothing to preserve */ } .ai-msg-assistant .ai-p + .ai-p { margin-top: 19px; } /* A sub-heading the app itself parses ("Morning:", "Hotel:", a day/date line) — one tier below .ai-h2, but still clearly bigger than body text so a day heading like "Nov 4 - Istanbul" reads as a real section start, not another line of prose. A quiet hairline above it (same treatment as .ai-h2) separates one day from the next — same width as the text column itself, never stretching out to the bubble's own edge. */ .ai-msg-assistant .ai-h { color: var(--fg); font-size: 1.3em; font-weight: 700; padding-top: 0.8em; border-top: 1px solid rgba(var(--fg-rgb), 0.12); } /* The very first heading in a message has nothing above it to divide from — the hairline would just be a stray line under the message's own top edge. */ .ai-msg-assistant .ai-h:first-child { padding-top: 0; border-top: none; } .ai-msg-assistant .ai-p + .ai-h { margin-top: 1.25em; } /* The time-of-day label, riding in front of its own sentence rather than sitting on a bold line of its own ("MORNING Walk along the river…"). Small caps and quiet on purpose: it is a signpost, not a statement, and the sentence beside it is what someone actually reads. Three of these used to be full-width bold headings inside every single day, set in the SAME style as the day's own date line, which is what made a planned day read as a wall of labels with no hierarchy in it. Given a fixed column so the sentences line up down the answer no matter which of the three words it is — the ragged left edge you get from a plain inline label is most of what made it feel untidy. 12ch, because it has to clear the longest of the three: measured at this size "AFTERNOON" is 77.1px against 72.8px for the other two, and at 10ch it was overflowing its own column and shunting that one sentence 4px right of the rest. */ .ai-msg-assistant .ai-period { display: inline-block; /* The gap lives INSIDE this width rather than as a margin, so the hanging indent below can cancel it with one matching number instead of two. */ min-width: 13ch; /* text-indent INHERITS, so the hanging indent on the paragraph below would otherwise apply a second time inside this box and drag the word itself 13ch off to the left, out of its own bounds — which made the label disappear completely. It has to be cancelled here. */ text-indent: 0; /* NOT plain `vertical-align: baseline` — measured live across every period label on the page with actual glyph bounding boxes (getBoundingClientRect on a Range over just the label text vs. just the following word, both with no descenders): baseline alignment on an inline-block is computed from ITS OWN line box at its own smaller 10.8px font-size, and that lands this label's text a consistent, reproducible 1px ABOVE the sentence beside it, every single time — a real measured mismatch, not an optical illusion, and not sub-pixel noise (every instance measured the exact same 1px). None of the named keyword values land on a clean, exact 0: text-bottom overshoots to -5px, text-top undershoots to -0.5px (itself a fractional, unreliable pixel that would round unpredictably). Nudging the baseline down by the exact measured 1px is what actually closes the gap to 0px, confirmed live across every label on the page — not a guess. This is font-size-pair specific: if the label's 0.72em or the sentence's own font-size ever changes, re-measure with the same technique (see firstWord glyph range vs. label glyph range) rather than assume this same 1px still applies. */ vertical-align: -1px; font-size: 0.72em; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.45); } /* Hangs the whole paragraph in the label's column: the padding pushes every line right, the matching negative indent pulls the FIRST line back so the label sits in the gutter. Without it a sentence that wrapped dropped its second line under the label and the tidy column fell apart on exactly the long entries that needed it most. NOT 13ch here, on purpose: "ch" is relative to the font-size of the element it's used ON, and .ai-period's 13ch is measured at ITS OWN smaller 0.72em font-size — a narrower box than 13ch measured at this paragraph's full 1em size. Using 13ch here too made this indent wider than the label actually is, pushing every wrapped line past the first word instead of under it (confirmed live — a two-line "Arrive at…" sentence landed its second line to the right of "Arrive"). 13 × 0.72 = 9.36ch is the same physical width in THIS element's own (larger) ch unit. */ .ai-msg-assistant .ai-p-period { padding-left: 9.36ch; text-indent: -9.36ch; } /* Narrow phones: a 13ch column plus a sentence is too much of the screen to give away, so the label sits on its own line above and the text runs full width — the indent has to come off with it. */ @media (max-width: 430px) { .ai-msg-assistant .ai-period { display: block; min-width: 0; margin: 0 0 0.15em; } .ai-msg-assistant .ai-p-period { padding-left: 0; text-indent: 0; } } /* The same label when what follows is a bullet list or another heading, so it has no sentence to ride in front of — kept, quietly, on its own line. */ .ai-msg-assistant .ai-period-line { font-size: 0.72em; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(var(--fg-rgb), 0.45); } .ai-msg-assistant .ai-p + .ai-period-line { margin-top: 1.1em; } /* A MAJOR section heading ("## Day by day", "## Practical notes" — see FORMATTING in askGeminiForTripChat and formatInlineMarkdown). Noticeably bigger and heavier than .ai-h — not just a shade bolder — with its own quiet hairline rule above it, the same "a new topic starts, visibly" cue a well-typeset itinerary uses, drawn by CSS on every heading rather than asking the model to type one. */ .ai-msg-assistant .ai-h2 { color: var(--fg); font-size: 1.55em; font-weight: 800; letter-spacing: -0.015em; line-height: 1.3; padding-top: 0.9em; border-top: 1px solid rgba(var(--fg-rgb), 0.12); } /* The very first heading in a message has nothing above it to divide from — the hairline would just be a stray line under the message's own top edge. */ .ai-msg-assistant .ai-h2:first-child { padding-top: 0; border-top: none; } .ai-msg-assistant .ai-p + .ai-h2 { margin-top: 1.5em; } /* "**bold**" (see formatInlineMarkdown) — a named place, a time, a price, inline in running text. Weight only, never a color change: this app is monochrome everywhere outside the globe. */ .ai-msg-assistant strong { font-weight: 700; color: var(--fg); } /* Dashed items get a real bullet drawn in; numbered items keep their number. Both hang so a wrapped second line lines up under the first word. */ .ai-msg-assistant .ai-li { padding-left: 1.1em; position: relative; } .ai-msg-assistant .ai-li + .ai-li { margin-top: 10px; } .ai-msg-assistant .ai-li::before { content: '•'; position: absolute; left: 0.2em; color: rgba(var(--fg-rgb), 0.55); } .ai-msg-assistant .ai-li-num { padding-left: 1.6em; text-indent: -1.6em; } .ai-msg a:not(.ai-msg-btn) { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* Same look as the link above, but for an in-app action ("jump to this day") instead of an external href — a plain button dressed as the same text link. */ .ai-msg-link-btn { background: none; border: none; padding: 0; font: inherit; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } /* A pair of real glass pill buttons (e.g. a flight search reply's "Open in Google Flights" + "Add tentative plan to calendar") — same glass-chip language as .fill-ideas-btn, not the plain underlined text links above. */ .ai-msg-btn-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 10px; } /* A link-only message (a re-shared "View in Google Flights" pill, no text above it) has nothing for that 10px gap to separate — the button row is the bubble's only child, so the gap just added itself on top of the bubble's own 8px padding, making a user message that's a bare link read as 18px above the pill vs 8px below it. Zeroed only when the row is first, so a row that follows real text keeps its usual breathing room. */ .ai-msg-btn-row:first-child { margin-top: 0; } /* Whatever comes right after a button row deserves the same real gap a new paragraph/heading already gets from the one before IT (see the .ai-p + .ai-h etc. rules below) — a button row has no margin-bottom of its own, so with nothing here the very next line sat jammed right against it, worst of all a "Morning:"/"Afternoon:"/"Evening:" sub-heading reading as glued to the button row for the period before it (confirmed live). Same pixel/em values as the equivalent .ai-p-led transitions, just keyed off a button row instead. */ .ai-msg-btn-row + .ai-p { margin-top: 19px; } .ai-msg-btn-row + .ai-h { margin-top: 1.25em; } .ai-msg-btn-row + .ai-h2 { margin-top: 1.5em; } .ai-msg-btn-row + .ai-msg-photo { margin-top: 10px; } /* Raised glass, not flat glass — a soft outer shadow plus a hairline inner highlight along the top edge, the same "real, liftable object" cue the day-card hover state (.item-pin-hover) already uses elsewhere in this app. A quiet lift on hover and a real press-down on tap (translateY, not just a scale) make the row feel like a considered control, not a plain text link that happens to have a border. */ .ai-msg-btn { display: inline-flex; align-items: center; /* Held to its column's width (see equalizeAiButtonRows), a button is often wider than its own label — so the label has to be centred in it. Left to the default the text hugged the left edge and left a gap on the right, which looks more broken than the ragged widths did. */ justify-content: center; gap: 6px; padding: 9px 15px; border-radius: var(--r-btn); font: inherit; font-size: 13px; font-weight: 600; color: var(--fg); text-decoration: none; cursor: pointer; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 1px 0 0 rgba(var(--fg-rgb), 0.07) inset, 0 6px 14px -8px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); transition: transform var(--dur-tap) var(--ease-snap), background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; } /* :not(:disabled) on both — an "Added" pill (.ai-msg-btn-added, always disabled — see markAddToCalendarButtonAdded) used to still lift/press under the cursor exactly like a live button, even though the click itself was already blocked. It looked clickable when it very much wasn't. Browsers apply :hover/:active to a disabled