/* Plona AI helper (shared by /app/ and the new site). Uses the host page's tokens when present, with safe fallbacks.
   Phone first. 44px targets, 16px text in messages and the text box, dark text on light, reduced motion respected.
   Layout: header (title, "AI helper", talk to a person, minimize, close) / scrolling chat / text box pinned at the bottom. */
.plh-panel, .plh-bar {
  --plh-ink: var(--ink, #141414); --plh-sub: var(--sub, #575757); --plh-line: var(--line, #E4DED7);
  --plh-card: var(--card, #fff); --plh-bg: var(--bg, #FAF7F4); --plh-tint: var(--tint, #FFEEE3); --plh-tint-line: var(--tint-line, #f7cdb2);
  --plh-ob: var(--ob, #BF4A0A); --plh-ot: var(--ot, #A63F05); --plh-field: var(--field, #767676);
  --plh-good-bg: var(--gbg, var(--good-bg, #E6F6EE)); --plh-good: var(--gd, var(--good-d, #0B6B40)); --plh-bad: var(--bad, #C22F2F); --plh-bad-bg: var(--bad-bg, #FDE9E7);
  --plh-warn-bg: var(--warn-bg, #FFF6DD); --plh-warn: var(--warn-d, #6B4E00); --plh-wait: var(--wait, #EFEAE4);
  --plh-bubble: #F3EFEA;
  font-family: 'Instrument Sans', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color: var(--plh-ink); line-height: 1.45;
}
.plh-panel *, .plh-bar * { box-sizing: border-box; }
.plh-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* margin -1px: the live line at the body's end adds no 1px strip under a flush footer */
/* 3.5.1 part F: the bot check's hidden field (a person never sees or reaches it; a script that fills every box fills it) */
.plh-hp, .plh-panel input.plh-hp { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }

/* bottom bar entry (site pages; the app uses its own bar button) */
.plh-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--plh-card); border-top: 1px solid var(--plh-line); padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 10px; min-height: var(--bar-h, 60px); }
.plh-bar p { flex: 1; font-size: 14px; color: var(--plh-sub); line-height: 1.3; margin: 0; }
.plh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 2px solid var(--plh-ob); background: var(--plh-ob); color: #fff; font: 700 15px 'Instrument Sans', sans-serif; cursor: pointer; text-decoration: none; }
.plh-btn:hover { background: var(--ob-h, #A03D06); border-color: var(--ob-h, #A03D06); }
.plh-btn svg { width: 18px; height: 18px; }
.plh-btn[disabled] { opacity: .6; cursor: not-allowed; }
.plh-btn.plh-ghost { background: var(--plh-card); color: var(--plh-ink); border-color: var(--plh-ink); }
.plh-btn.plh-ghost:hover { background: var(--plh-wait); }
/* the bar button matches the app's bottom bar: near-black, so orange stays with the page's own next step */
.plh-bar .plh-btn:not(.plh-ghost) { background: var(--plh-ink); border-color: var(--plh-ink); color: var(--plh-card); }
.plh-bar .plh-btn:not(.plh-ghost):hover { opacity: .85; background: var(--plh-ink); border-color: var(--plh-ink); }
.plh-panel :focus-visible, .plh-bar :focus-visible { outline: 3px solid var(--plh-ink); outline-offset: 2px; border-radius: 6px; }
.plh-btn:focus-visible { box-shadow: 0 0 0 2px var(--plh-card), 0 0 0 5px var(--plh-ink); outline: 0; }

/* panel: a sheet above the bar on phones, a card in the corner on laptops. Never a modal, never over the bar. */
.plh-panel { position: fixed; z-index: 59; left: 0; right: 0; bottom: calc(var(--bar-h, 60px) + env(safe-area-inset-bottom)); height: min(78dvh, 660px); max-height: calc(100dvh - var(--bar-h, 60px) - 24px); display: flex; flex-direction: column; background: var(--plh-card); border: 1px solid var(--plh-line); border-bottom: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(20,20,20,.14); overflow: hidden; margin: 0; padding: 0; max-width: none; }
/* round 3A: no bottom bar on the page (the site never asks for one; the app's #bar only shows on a driver's trip): the panel sits on the bottom edge */
html:not(.plh-has-bar) .plh-panel:not(.plh-kb){bottom:0;max-height:calc(100dvh - 12px);padding-bottom:env(safe-area-inset-bottom)}
@media (min-width:700px){html:not(.plh-has-bar) .plh-panel:not(.plh-kb){bottom:16px}}
/* host pages style section/header/h2 on their own; the panel resets what it relies on */
html body section.plh-panel { background: var(--plh-card) !important; } /* the legal pages force .lg section{background:transparent!important} */
.plh-panel .plh-head, .plh-panel .plh-body, .plh-panel .plh-foot { margin: 0; max-width: none; position: static; }
.plh-panel[hidden] { display: none; }
.plh-panel:not([hidden]) { animation: plh-in .18s ease-out; }
@keyframes plh-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (min-width: 700px) { .plh-panel { left: auto; right: 16px; width: 400px; bottom: calc(var(--bar-h, 60px) + 10px + env(safe-area-inset-bottom)); border: 1px solid var(--plh-line); border-radius: 16px; height: min(640px, calc(100dvh - var(--bar-h, 60px) - 40px)); box-shadow: 0 12px 32px rgba(20,20,20,.16); } }
/* iPhone keyboard open: sit right on top of it and use only the space you can see */
.plh-panel.plh-kb { bottom: var(--plh-kb, 0px); height: min(calc(var(--plh-vvh, 100dvh) - 8px), 660px); max-height: none; border-radius: 16px 16px 0 0; }

/* header */
.plh-head { display: flex; align-items: flex-start; gap: 2px; padding: 10px 6px 4px 16px; border-bottom: 1px solid var(--plh-line); flex: none; }
.plh-ht { flex: 1; min-width: 0; padding-top: 4px; }
.plh-head h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-family: 'Clash Grotesk', 'Instrument Sans', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; margin: 0; letter-spacing: -.01em; }
.plh-head h2:focus { outline: none; }
.plh-badge { display: inline-flex; align-items: center; font: 700 12px/1 'Instrument Sans', sans-serif; letter-spacing: .02em; color: var(--plh-ink); background: var(--plh-wait); border-radius: 6px; padding: 4px 7px; }
.plh-mock { display: inline-flex; align-items: center; font: 700 12px/1 'Instrument Sans', sans-serif; border: 1px solid var(--plh-tint-line); background: var(--plh-tint); color: var(--plh-ot); border-radius: 99px; padding: 3px 8px; }
.plh-who { display: flex; align-items: center; flex-wrap: wrap; column-gap: 6px; font-size: 14px; color: var(--plh-sub); margin: 0; }
.plh-hlink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; background: none; border: 0; color: var(--plh-ot); text-decoration: underline; text-underline-offset: 3px; font: 600 14px 'Instrument Sans', sans-serif; cursor: pointer; }
.plh-hlink:hover { color: var(--plh-ink); }
.plh-panel:not([data-view=chat]) .plh-who .plh-hlink { display: none; }
.plh-panel:not([data-view=chat]) .plh-who { min-height: 32px; }
.plh-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: none; color: var(--plh-ink); border-radius: 10px; cursor: pointer; }
.plh-ic svg { width: 22px; height: 22px; }
.plh-ic:hover { background: var(--plh-wait); }

/* chat */
.plh-body { flex: 1; min-height: 0; overflow: auto; padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.plh-panel p { margin: 0; }
.plh-sub, .plh-note { font-size: 14px; color: var(--plh-sub); }
.plh-stack > * + * { margin-top: 12px; }
.plh-log { display: flex; flex-direction: column; gap: 10px; }
.plh-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; }
.plh-msg .plh-t { white-space: pre-wrap; }
.plh-bot { align-self: flex-start; background: var(--plh-bubble); color: var(--plh-ink); border-bottom-left-radius: 6px; }
.plh-bot.plh-soft { background: none; padding: 0 2px; color: var(--plh-sub); font-size: 15px; max-width: 100%; }
.plh-you { align-self: flex-end; background: var(--plh-ob); color: #fff; border-bottom-right-radius: 6px; }
.plh-sys { align-self: center; font-size: 14px; color: var(--plh-sub); background: none; padding: 2px 8px; }
.plh-typing { display: inline-flex; align-items: center; gap: 8px; }
.plh-tl { font-size: 14px; color: var(--plh-sub); }
.plh-dots { display: inline-flex; gap: 4px; align-items: center; height: 22px; }
.plh-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--plh-sub); animation: plh-b 1.1s infinite ease-in-out; }
.plh-dots i:nth-child(2) { animation-delay: .18s; } .plh-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes plh-b { 0%, 80%, 100% { opacity: .3; transform: scale(.8); } 40% { opacity: 1; transform: scale(1); } }

/* quick-answer chips: real buttons, 44px tall, they wrap to as many lines as they need */
.plh-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-left: 2px; }
.plh-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 9px 14px; border: 1.5px solid var(--plh-tint-line); background: var(--plh-card); color: var(--plh-ot); border-radius: 22px; font: 600 15px/1.3 'Instrument Sans', sans-serif; text-align: left; cursor: pointer; }
.plh-chip:hover { background: var(--plh-tint); border-color: var(--plh-ob); }
.plh-chip:active { transform: translateY(1px); }
.plh-chip[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.plh-chip.plh-chip-p { color: var(--plh-ink); border-color: var(--plh-line); }
.plh-chip.plh-chip-p:hover { background: var(--plh-wait); }
.plh-after:empty { display: none; }
.plh-after > * + * { margin-top: 8px; }

/* text box: pinned under the chat, never inside the scroll */
.plh-foot { flex: none; border-top: 1px solid var(--plh-line); padding: 10px 12px 4px; background: var(--plh-card); }
.plh-foot[hidden] { display: none; }
.plh-compose { display: flex; gap: 8px; align-items: flex-end; }
.plh-panel .plh-compose textarea { flex: 1; min-height: 48px; max-height: 120px; resize: none; border-radius: 12px; line-height: 1.4; }
.plh-send { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 16px 0 14px; border-radius: 12px; border: 0; background: var(--plh-ob); color: #fff; font: 700 16px 'Instrument Sans', sans-serif; cursor: pointer; }
.plh-send svg { width: 18px; height: 18px; }
.plh-send:hover { background: var(--ob-h, #A03D06); }
.plh-send[disabled] { opacity: .55; cursor: not-allowed; }
.plh-send:focus-visible { box-shadow: 0 0 0 2px var(--plh-card), 0 0 0 5px var(--plh-ink); outline: 0; }
.plh-fine { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; min-height: 44px; font-size: 13px; line-height: 1.35; color: var(--plh-sub); padding: 4px 2px 0; }
.plh-fine span { flex: 1 1 200px; }
.plh-fine .plh-hlink { font-size: 13px; min-height: 44px; }
.plh-tools { display: flex; flex-wrap: wrap; gap: 4px; justify-content: space-between; }
.plh-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* forms */
.plh-panel textarea, .plh-panel input[type=text] { width: 100%; font: 16px 'Instrument Sans', sans-serif; color: var(--plh-ink); background: var(--plh-card); border: 1.5px solid var(--plh-field); border-radius: 10px; padding: 12px 12px; min-height: 48px; }
.plh-panel textarea:focus, .plh-panel input[type=text]:focus { border-color: var(--plh-ink); outline: 0; box-shadow: 0 0 0 1px var(--plh-ink); }
.plh-panel textarea::placeholder { color: #6b6b6b; }
.plh-panel textarea { resize: vertical; }
.plh-form { display: flex; flex-direction: column; gap: 8px; }
.plh-form.plh-inchat { border: 1.5px solid var(--plh-line); border-radius: 14px; padding: 12px 14px; }
.plh-f { display: block; font-weight: 600; font-size: 15px; }
.plh-opt { display: block; font-weight: 400; font-size: 14px; color: var(--plh-sub); }
.plh-fs { border: 0; padding: 0; margin: 0; min-width: 0; }
.plh-fe { color: var(--plh-bad); font-size: 14px; font-weight: 600; min-height: 0; }
.plh-fe:empty { display: none; }
.plh-stars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; }
.plh-star { position: relative; display: block; }
.plh-star input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.plh-star span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; border: 1.5px solid var(--plh-field); border-radius: 10px; background: var(--plh-card); }
.plh-star b { font-size: 20px; } .plh-star i { font-style: normal; font-size: 12px; color: var(--plh-sub); min-height: 14px; }
.plh-star input:checked + span { border-color: var(--plh-ob); background: var(--plh-tint); box-shadow: inset 0 0 0 1px var(--plh-ob); color: var(--plh-ot); }
.plh-star input:focus-visible + span { outline: 3px solid var(--plh-ink); outline-offset: 2px; }
.plh-team { border: 1px solid var(--plh-line); border-radius: 12px; padding: 10px 14px; font-size: 15px; }
.plh-team p + p { margin-top: 3px; }
.plh-team.is-open { background: var(--plh-good-bg); border-color: #9ed8bb; color: var(--plh-good); }
.plh-team.is-closed { background: var(--plh-wait); }
.plh-ok { background: var(--plh-good-bg); border: 1px solid #9ed8bb; color: var(--plh-good); border-radius: 12px; padding: 12px 14px; }
.plh-ok p + p { margin-top: 4px; }
.plh-ask { border: 1.5px solid var(--plh-line); border-radius: 12px; padding: 12px 14px; }
.plh-ask .plh-row { margin-top: 10px; }
.plh-err { background: var(--plh-bad-bg); border: 1px solid #f3c3be; color: var(--plh-bad); border-radius: 12px; padding: 10px 14px; }
.plh-err .plh-row { margin-top: 8px; }
.plh-err .plh-btn.plh-ghost { color: var(--plh-ink); }

@media (prefers-reduced-motion: reduce) {
  .plh-panel:not([hidden]) { animation: none; }
  .plh-dots i { animation: none; opacity: .7; }
  .plh-chip:active { transform: none; }
  .plh-panel * { scroll-behavior: auto !important; }
}
@media (max-width: 380px) { .plh-msg { max-width: 92%; } .plh-bar p { font-size: 13px; } .plh-head { padding-left: 14px; } .plh-body { padding-left: 14px; padding-right: 14px; } }

/* Chase item 17 (2026-10-01): content always scrolls clear of the bottom bar. helper.js measures the bar (the site's helper bar or the
   app's own bar) into --bar-real, so the space at the end of every page equals the bar's real height (safe area included). */
html.plh-has-bar body:not([data-screen=full]) { padding-bottom: calc(var(--bar-real, 60px) + 16px) !important; }
/* 2026-10-08: keyboard focus never lands behind the site's Ask Plona bar (WCAG 2.2, 2.4.11). Site pages only (the full bar, not the app's own bar
   or the small round button). Bottom only: a top padding would add to the Why Plona page's scroll-margin-top. */
html.plh-has-bar:has(> body > nav.plh-bar:not(.plh-compact)) { scroll-padding-bottom: calc(var(--bar-real, 60px) + 16px); }
/* the iPhone keyboard is open on a field of the page: the bar steps out of the way (fields inside the helper or Messages keep it) */
html.plh-kb-open .plh-bar, html.plh-kb-open #bar { display: none !important; }
/* form pages: a small round "Ask" button in the bottom corner instead of the full bar */
.plh-bar.plh-compact, #bar.bar.compact { left: auto; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; gap: 8px; align-items: center; }
.plh-round, #bar.compact button.help { width: 48px; height: 48px; min-height: 48px; min-width: 48px; flex: none; padding: 0; border-radius: 50%; font: 700 15px 'Instrument Sans', sans-serif; box-shadow: 0 4px 14px rgba(20,20,20,.22); }
#bar.compact button { flex: none; width: auto; box-shadow: 0 4px 14px rgba(20,20,20,.18); }
#bar.compact button:not(.help) { padding: 0 16px; }
/* plona-app web-patch 10: "Report this answer" under an answer, and the one-time AI card */
/* 3.4.1 look review: a 44px tap target, pulled in with negative margins so the bubble does not grow */
.plh-msg .plh-rep { display: block; min-height: 44px; margin: -6px 0 -8px; font-size: 13px; }
.plh-msg .plh-repd { display: block; margin-top: 4px; font: 600 13px 'Instrument Sans', sans-serif; color: var(--plh-sub); }
.plh-aiok .plh-sub a { color: var(--plh-ot); }
/* 0214 (3.4.4): a reply from a person on the Plona team (not the AI), and the "reply waiting" line at the top of the chat */
.plh-teammsg { align-self: flex-start; background: var(--plh-card); color: var(--plh-ink); border: 1.5px solid var(--plh-tint-line); border-bottom-left-radius: 6px; }
.plh-teammsg .plh-tby { display: block; font: 700 13px 'Instrument Sans', sans-serif; color: var(--plh-ot); margin: 0 0 3px; }
.plh-teammsg .plh-hlink { display: flex; min-height: 44px; margin: -2px 0 -10px; font-size: 14px; }
.plh-teamnew { border: 1.5px solid var(--plh-tint-line); background: var(--plh-tint); border-radius: 12px; padding: 10px 14px; margin: 0 0 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.plh-teamnew p { margin: 0; font-size: 15px; }