/* FREE SAILING — blm-rail.css — the mascot as a RAIL, not a 2002 form.

   Built to the model observed live on TripAdvisor's assistant, recorded in
   _TRIPADVISOR_MODEL.md. The three things Kealan named:

     "the mascot text bar is at the top so one loses it in conversation"
        → the input DOCKS TO THE BOTTOM and never moves again.
     "the buttons look like they are from 2002"
        → suggestions became quiet ↳ text rows; ask-backs became thin + chips.
     "nowhere near what i had in mind"
        → a full-height rail beside the world, not a little box on top of it.

   shell.js owns the markup and another session owns shell.js, so nothing here
   renames or rebuilds it — blm-rail.js MOVES the existing nodes, which keeps
   every listener shell.js attached, and this file restyles what landed.       */

/* ─────────────────────────────────────────────── the rail */
/* DEFECT, 2026-08-24: this block used to carry a bare `display:flex`, which
   broke the close button on every page the rail runs on. site.css gates the
   sheet on `.open` (`.guide-sheet{display:none}` / `.guide-sheet.open{
   display:block}`), but `.guide-sheet.gr` is (0,2,0) against that rule's
   (0,1,0) AND did not itself require `.open` — so the moment blm-rail.js
   added `gr`, the sheet was pinned visible. shell.js's close handler fired
   correctly every time and removed a class that was no longer load-bearing:
   the panel simply would not go away. Kealan: "the mascots 'x' button does
   not work so the screen stays annoyingly in ur face up."
   The display property now lives on the `.open` variant, exactly as the base
   rule intends; every other property here is layout and stays unconditional. */
.guide-sheet.gr{
  flex-direction:column;
  width:min(400px, calc(100vw - 24px));
  height:min(640px, calc(100vh - 120px));
  max-height:none;                       /* the body scrolls, not the sheet */
  border-radius:18px; overflow:hidden;
  box-shadow:0 24px 64px rgba(2,30,70,.22), 0 2px 8px rgba(2,30,70,.08);
}
.guide-sheet.gr.open{ display:flex; }
.guide-sheet.gr .gh{ flex:none; }
.guide-sheet.gr .guide-body{
  flex:1 1 auto; display:flex; flex-direction:column;
  padding:0; max-height:none; overflow:hidden;   /* children scroll instead */
}

/* ─────────────────────────── the constraint line — Where · When · Budget
   TripAdvisor keeps structured constraints OUT of the prose and collapses them
   to one small line once talking starts. Visible, never in the way. */
.gr-cons{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:8px 14px; border-bottom:1px solid var(--line-2);
  font-size:12.5px; color:var(--ink-40); background:#FBFDFF;
  overflow-x:auto; scrollbar-width:none;
}
.gr-cons::-webkit-scrollbar{ display:none; }
/* the label must never wrap onto two lines and shove the chips down */
.gr-cons b{ color:var(--navy); font-weight:600; flex:none; white-space:nowrap; }
.gr-cons .gr-cx{ flex:none; white-space:nowrap; max-width:none; }
.gr-cons .gr-cx{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink-60); cursor:pointer; font:inherit; font-size:12px;
}
.gr-cons .gr-cx:hover{ border-color:var(--cyan); color:var(--navy); }
.gr-cons .gr-cx.set{ border-color:var(--cyan); color:var(--navy); background:#F2FAFE; }

/* ─────────────────────────────────────────── the thread (the only scroller) */
.gr-thread{
  flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain;
  padding:16px 16px 8px; scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ .gr-thread{ scroll-behavior:auto; } }
.gr-thread::-webkit-scrollbar{ width:8px; }
.gr-thread::-webkit-scrollbar-thumb{ background:rgba(2,30,70,.14); border-radius:99px; }

/* what the person said — right-aligned, quiet, like every messenger since 2010 */
.gr-said{
  margin:0 0 14px auto; max-width:82%; width:fit-content;
  background:#EEF3F7; color:var(--navy);
  padding:9px 14px; border-radius:16px 16px 4px 16px;
  font-size:14px; line-height:1.5;
}

/* ───────────────────────────────────── suggestions: quiet rows, not pills
   THE 2002 FIX. No fill, no border, no shadow — a list of things you could say,
   prefixed with the ↳ TripAdvisor uses. They read like links, not like a form. */
.guide-sug{ display:block !important; margin:2px 0 6px !important; }
/* !important on display beats the hidden attribute's own display:none, so the
   openers stayed on screen after the conversation started even though the JS
   had hidden them. State must win over layout. */
.guide-sug[hidden], .gr-sug-lab[hidden]{ display:none !important; }
.guide-sug button{
  display:flex; align-items:flex-start; gap:9px;
  width:100%; text-align:left;
  padding:8px 2px !important; margin:0;
  background:none !important; border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  font:inherit; font-size:13.5px; line-height:1.45;
  color:var(--ink-60); cursor:pointer;
  border-bottom:1px solid var(--line-2) !important;
}
.guide-sug button:last-child{ border-bottom:0 !important; }
.guide-sug button::before{
  content:"↳"; flex:none; color:var(--cyan);
  font-size:13px; line-height:1.45; transform:translateY(1px);
}
.guide-sug button:hover{ color:var(--navy) !important; background:none !important; }
.guide-sug button:hover::before{ transform:translate(2px,1px); }
.gr-sug-lab{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-40); margin:4px 0 2px;
}

/* ─────────────────────────────── ask-back chips: thin outline, + prefixed
   The + says these ADD to what is already known. It is not a quiz. */
.gb-chips{ display:flex; flex-wrap:wrap; gap:7px; margin:10px 0 4px; }
.gb-chips button{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border:1px solid var(--line); border-radius:999px;
  background:#fff; color:var(--ink-60); cursor:pointer;
  font:inherit; font-size:13px; line-height:1.2;
  transition:border-color .14s, color .14s, background .14s;
}
.gb-chips button::before{
  content:"+"; color:var(--cyan); font-size:14px; font-weight:600; line-height:1;
}
.gb-chips button:hover{ border-color:var(--cyan); color:var(--navy); background:#F7FCFF; }
.gb-q{ font-size:14px; color:var(--navy); line-height:1.5; margin:0 0 2px; font-weight:600; }

/* ───────────────────────────────────────────────── the dock — ALWAYS BOTTOM
   The whole point. Once a conversation starts the input does not scroll away. */
.gr-dock{
  flex:none; padding:10px 14px 13px;
  border-top:1px solid var(--line-2); background:#fff;
}
.guide-body .ask{ display:flex !important; gap:0 !important; margin:0 !important;
  position:relative; align-items:center; }
.guide-body .ask input{
  flex:1; font:inherit; font-size:14px;
  padding:12px 46px 12px 16px !important;
  border:1px solid var(--line); border-radius:999px; background:#fff;
  transition:border-color .14s, box-shadow .14s;
}
.guide-body .ask input:focus{
  outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,128,175,.13);
}
/* the send control becomes a circular glyph INSIDE the field, as in the model */
.guide-body .ask button[type=submit]{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; padding:0; flex:none;
  border:0; border-radius:50%; background:var(--navy); color:#fff;
  font-size:0; cursor:pointer; display:grid; place-items:center;
  transition:background .14s, transform .14s;
}
.guide-body .ask button[type=submit]::after{
  content:"↑"; font-size:16px; line-height:1; font-weight:600;
}
.guide-body .ask button[type=submit]:hover{ background:var(--cyan); }
.guide-body .ask button[type=submit]:active{ transform:translateY(-50%) scale(.94); }

/* ───────────────────────────────────────────────────── results in the thread */
.guide-res{ margin-top:12px !important; display:grid; gap:9px; }
.gr-wait{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--ink-40); padding:6px 0;
}
.gr-wait i{
  width:6px; height:6px; border-radius:50%; background:var(--cyan);
  animation:grPulse 1.05s ease-in-out infinite;
}
@keyframes grPulse{ 0%,100%{ opacity:.25; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); } }
@media (prefers-reduced-motion:reduce){ .gr-wait i{ animation:none; opacity:.7; } }

/* phone: the rail becomes a sheet that still docks its input to the bottom */
@media (max-width:720px){
  .guide-sheet.gr{
    width:100vw; height:82vh; border-radius:18px 18px 0 0;
    position:fixed; left:0; right:0; bottom:0;
  }
}

/* ───────────────────────── the ask-back block and the unprompted offer
   These mount from blm-bubble.js into the thread. Left unstyled they render as
   a bare text field and a default grey button — the exact 2002 look this file
   exists to remove. */
.gb-ask, .gb-off{
  margin:4px 0 14px; padding:13px 14px;
  background:#F7FBFD; border:1px solid var(--line-2); border-radius:14px;
}
.gb-off{ background:#F2FAFE; border-color:rgba(0,128,175,.22); }

/* free-text ask-back: field + verb on one line, same language as the dock */
.gb-ask form, .gb-free{ display:flex; gap:7px; margin-top:10px; align-items:center; }
.gb-ask input[type=text], .gb-free input[type=text]{
  flex:1; min-width:0; font:inherit; font-size:13.5px;
  padding:9px 13px; border:1px solid var(--line); border-radius:999px; background:#fff;
}
.gb-ask input[type=text]:focus, .gb-free input[type=text]:focus{
  outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(0,128,175,.13);
}
.gb-ask button[type=submit], .gb-free button{
  flex:none; font:inherit; font-size:13px; font-weight:600;
  padding:9px 15px; border:0; border-radius:999px;
  background:var(--navy); color:#fff; cursor:pointer;
}
.gb-ask button[type=submit]:hover, .gb-free button:hover{ background:var(--cyan); }

/* "Rather not say" is a way out, not an action — it must never look like one */
.gb-skip{
  display:inline-block; margin-top:9px; padding:0; border:0; background:none;
  font:inherit; font-size:12.5px; color:var(--ink-40);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.gb-skip:hover{ color:var(--ink-60); }

/* the unprompted offer — one real row, with the reason it appeared.

   THE CLASS NAMES HERE HAD DRIFTED FROM THE ONES ACTUALLY RENDERED, and the
   drift was visible to a visitor. blm-bubble.js — the ONLY thing that ever
   paints this card — writes `.gb-off-w` for the reason line and
   `.gb-off-row` for the row. This file styled `.gb-why`, which nothing has
   ever rendered (checked: zero hits across every .js, .html and .css in the
   build), so the reason line and the row fell back to browser defaults:
   `<b>` and `<span>` both `display:inline`, so a place ran straight into the
   name it belonged to — "Jachthaven SchellingwoudeAmsterdam", seen live on
   index.html at 375px.

   The correct rules DID exist, in assets/css/blm.css — but that file is
   loaded on 3 pages while blm-bubble.js is loaded on 29, so 26 pages painted
   the card with no rules for its two most important elements. Fixed on the
   CSS side rather than by adding a link tag to 26 files: this stylesheet
   already travels with the bubble everywhere the rail goes, and one
   stylesheet owning one component is the arrangement that stops this drifting
   again. `.gb-why` is kept below as an alias so that if a future renderer
   uses the newer name it is styled identically rather than silently bare. */
.gb-off .gb-why, .gb-off .gb-off-w{
  font-size:12px; color:var(--ink-40); margin:0 0 7px;
  display:flex; align-items:center; gap:6px;
}
.gb-off .gb-why::before, .gb-off .gb-off-w::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:var(--cyan); flex:none;
}
.gb-off b{ color:var(--navy); font-size:14px; line-height:1.4; }

/* the row itself — a real link to a real place, so it must read as one */
.gb-off .gb-off-row{
  display:block; margin-top:2px; padding:10px 12px;
  background:#fff; border:1px solid var(--line-2); border-radius:11px;
  text-decoration:none;
}
.gb-off .gb-off-row:hover{ border-color:var(--cyan); }
/* block, not inline — this is the pair that was running together */
.gb-off .gb-off-row b{ display:block; }
.gb-off .gb-off-row span{
  display:block; margin-top:2px;
  font-size:12.5px; color:var(--ink-40); line-height:1.4;
}
.gb-off .gb-act{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.gb-off .gb-act a, .gb-off .gb-act button{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:8px 14px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--navy); text-decoration:none;
}
.gb-off .gb-act a{ background:var(--navy); color:#fff; border-color:var(--navy); }
.gb-off .gb-act a:hover{ background:var(--cyan); border-color:var(--cyan); }
.gb-off .gb-act button:hover{ border-color:var(--cyan); }

/* what this turn did to the last one — stated, never implied */
.gr-refine{
  font-size:12.5px; color:var(--ink-40); line-height:1.5;
  margin:10px 0 2px; padding-left:11px; border-left:2px solid var(--cyan);
}

/* what an organisation would actually DO with the shape */
.fp-sug{
  margin-top:12px; padding:11px 13px; border-radius:12px;
  background:#F2FAFE; border:1px solid rgba(0,128,175,.2);
}
.fp-sug b{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-40); }
.fp-sug p{ margin:5px 0 0; font-size:14px; line-height:1.55; color:var(--navy); }
.fp-sug p b{ font-size:14px; letter-spacing:0; text-transform:none; color:var(--navy); }

/* the rail's pointer at the page — the answer lives out there, not in here */
.gr-onpage{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:11px 13px; margin-top:2px; cursor:pointer;
  border:1px solid rgba(0,128,175,.24); border-radius:12px;
  background:#F2FAFE; font:inherit; text-align:left;
}
.gr-onpage b{ font-size:14px; color:var(--navy); }
.gr-onpage span{ font-size:12.5px; color:var(--ink-40); margin-left:auto; }
.gr-onpage:hover{ border-color:var(--cyan); }
.gr-none{ font-size:13.5px; color:var(--ink-40); line-height:1.55; margin:6px 0 0; }

/* "Show me" — the offer's action. It puts the row on the page and goes to it. */
.gb-show{
  font:inherit; font-size:13px; font-weight:600; cursor:pointer;
  padding:8px 15px; border-radius:999px; border:0;
  background:var(--navy); color:#fff;
}
.gb-show:hover{ background:var(--cyan); }
.gb-off .gb-act, .gb-act{ display:flex; align-items:center; gap:10px; margin-top:11px; }