/* GENERATED by scripts/build-public-chrome-css.mjs from the @gp-public regions of css/styles.css
 * marked for "support". DO NOT EDIT: edit styles.css, run `npm run public-chrome`, commit both.
 * The Help tab (js/components/help-widget.js — the migrate plugin loads it on greasepilot.com; biz and school
 * read the same rules from styles.css) for a
 * host that cannot load styles.css. Every selector is scoped to #gp-support, so
 * nothing here styles anything outside that element, and every rem is written out in px (16px to the
 * rem) so the host's root font size cannot resize it. Fonts (Quicksand, Oswald, Outfit) and js/components/help-widget.js are the host's to load; the icons are inline SVG. Regions: support. */

/* ── region: support ── */
#gp-support { font-family: var(--font-body, 'Quicksand', sans-serif); font-size: 16px; font-weight: 500; line-height: 1.6; color: #0f172a; }
/* What a host's form controls bring that the tab never sets (greasepilot.com's theme: uppercase, tracked, shadowed
   buttons). :where() keeps it below every .gp-support-* rule here; in css/public-support.css it sits under the
   tab's id, above the host's class rules. */
#gp-support :where(button, input, select, textarea) { font: inherit; text-transform: none; letter-spacing: normal; text-shadow: none; box-shadow: none; }
#gp-support .gp-support-ic { width: 18px; height: 18px; flex-shrink: 0; fill: none; }
#gp-support .gp-support-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The bar (closed) */
#gp-support .gp-support-bar { position: fixed; right: 20px; bottom: 20px; z-index: 900; max-width: calc(100vw - 40px); box-sizing: border-box; display: flex; align-items: stretch; border: 1px solid #e5eaf0; border-radius: 20px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 14px 36px rgba(15, 23, 42, 0.16); transition: box-shadow 0.15s ease, transform 0.15s ease; }
#gp-support .gp-support-bar:hover { transform: translateY(-2px); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 18px 40px rgba(15, 23, 42, 0.2); }
#gp-support .gp-support-bar-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 8px 8px 9px; border: 0; border-radius: 20px; background: transparent; cursor: pointer; font: inherit; text-align: left; color: #0f172a; }
#gp-support .gp-support-bar-main:focus-visible { outline: 3px solid #0170b9; outline-offset: -3px; }
#gp-support .gp-support-bar-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
#gp-support .gp-support-bar-name { font: 700 15.5px/1.2 'Outfit', var(--font-body, 'Quicksand', sans-serif); color: #0f172a; white-space: nowrap; }
#gp-support .gp-support-bar-line { font-size: 13px; font-weight: 600; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gp-support .gp-support-bar-line b { font-weight: 700; color: #475569; }
#gp-support .gp-support-bar.is-on .gp-support-bar-line b { color: #16a34a; }
#gp-support .gp-support-go { flex-shrink: 0; width: 42px; height: 42px; margin-left: 8px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: var(--color-primary-gradient, linear-gradient(135deg, #0170b9 0%, #0190e8 100%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(1, 112, 185, 0.25); }
#gp-support .gp-support-go .gp-support-ic { width: 20px; height: 20px; }
#gp-support .gp-support-dismiss { position: absolute; top: -10px; right: -10px; width: 26px; height: 26px; padding: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid #ffffff; border-radius: 50%; background: #fef2f2; color: #dc2626; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18); cursor: pointer; }
#gp-support .gp-support-dismiss:hover { background: #fee2e2; color: #b91c1c; }
#gp-support .gp-support-dismiss:focus-visible { outline: 3px solid #dc2626; outline-offset: 2px; }
#gp-support .gp-support-dismiss .gp-support-ic { width: 14px; height: 14px; stroke-width: 2.5; }

/* The photo and its status dot */
#gp-support .gp-support-face { position: relative; flex-shrink: 0; display: inline-block; border-radius: 50%; }
#gp-support .gp-support-face img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #eef2f6; }
#gp-support .gp-support-face--28 { width: 28px; height: 28px; }
#gp-support .gp-support-face--44 { width: 44px; height: 44px; }
#gp-support .gp-support-face--52 { width: 52px; height: 52px; }
#gp-support .gp-support-face--28 img { box-shadow: none; }
#gp-support .gp-support-face--28 .gp-support-dot { display: none; }
#gp-support .gp-support-bar.is-on .gp-support-face img,
#gp-support .gp-support-panel.is-on .gp-support-head .gp-support-face img { box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #dcfce7; }
#gp-support .gp-support-dot { position: absolute; right: 0; bottom: 0; width: 13px; height: 13px; box-sizing: border-box; border: 2px solid #ffffff; border-radius: 50%; background: #94a3b8; }
#gp-support .gp-support-dot.is-on { background: #22c55e; }

/* Tucked: the slim handle on the right edge (the × above), for the rest of the visit */
#gp-support .gp-support-handle { position: fixed; right: 0; bottom: 40px; z-index: 900; width: 26px; height: 68px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 0 0 2px; border: 1px solid #e5eaf0; border-right: 0; border-radius: 12px 0 0 12px; background: #ffffff; color: #64748b; box-shadow: -3px 4px 14px rgba(15, 23, 42, 0.16); cursor: pointer; transition: width 0.15s ease, color 0.15s ease; }
#gp-support .gp-support-handle:hover { width: 32px; color: #0170b9; }
#gp-support .gp-support-handle:focus-visible { outline: 3px solid #0170b9; outline-offset: 2px; }
#gp-support .gp-support-handle .gp-support-ic { width: 16px; height: 16px; }
#gp-support .gp-support-handle-dot { width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; box-shadow: 0 0 0 3px #eef2f6; }
#gp-support .gp-support-handle.is-on .gp-support-handle-dot { background: #22c55e; box-shadow: 0 0 0 3px #dcfce7; }

/* The window (open). Its content sets its height (at least 620px, so the chat has room) and the whole of it shows
   (Michael 2026-10-08: no scroll bar on desktop). It sits above the site header (z-index 1000), page modals
   (1000/1001), combobox lists (1300) and the sticky notice bar (1500), so nothing covers its top; toasts (2000), the
   lightbox (2000), dialogs and the view-as bar (10000) stay above it. */
#gp-support .gp-support-panel { position: fixed; right: 20px; bottom: 20px; z-index: 1600; width: 396px; max-width: calc(100vw - 40px); min-height: min(620px, calc(100vh - 40px)); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e5eaf0; border-radius: 20px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 22px 56px rgba(15, 23, 42, 0.2); }
/* The top: tinted light gray while away, light green on shift (Michael 2026-10-08) */
#gp-support .gp-support-head { flex-shrink: 0; display: flex; align-items: flex-start; gap: 14px; padding: 18px 16px 16px 20px; border-bottom: 1px solid #e2e8f0; background: #f1f5f9; }
#gp-support .gp-support-panel.is-on .gp-support-head { border-bottom-color: #bbf7d0; background: #f0fdf4; }
#gp-support .gp-support-head > .gp-support-face { margin-top: 3px; }
#gp-support .gp-support-who { flex: 1; min-width: 0; }
#gp-support .gp-support-eyebrow { display: block; font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #64748b; }
#gp-support .gp-support-name { margin: 5px 0 7px; font: 700 19px/1.15 'Outfit', var(--font-body, 'Quicksand', sans-serif); letter-spacing: 0; text-transform: none; color: #0f172a; }
#gp-support .gp-support-idrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#gp-support .gp-support-cred { display: inline-flex; align-items: center; gap: 5px; font: 600 12.5px/1.2 ui-monospace, Consolas, monospace; color: #334155; }
#gp-support .gp-support-cred .gp-support-ic { width: 15px; height: 15px; color: #0170b9; }
#gp-support .gp-support-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; background: #e2e8f0; color: #475569; font-size: 12px; font-weight: 700; line-height: 1.35; white-space: nowrap; }
#gp-support .gp-support-badge.is-on { background: #dcfce7; color: #166534; }
#gp-support .gp-support-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #94a3b8; }
#gp-support .gp-support-badge.is-on .gp-support-badge-dot { background: #22c55e; }
#gp-support .gp-support-min { flex-shrink: 0; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: #fef2f2; color: #dc2626; cursor: pointer; }
#gp-support .gp-support-min:hover { background: #fee2e2; color: #b91c1c; }
#gp-support .gp-support-min:focus-visible { outline: 3px solid #dc2626; outline-offset: 2px; }

/* On shift: the chat */
#gp-support .gp-support-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#gp-support .gp-support-thread { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 16px 14px 20px; }
#gp-support .gp-support-msg { align-self: flex-start; display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
#gp-support .gp-support-msg--me { align-self: flex-end; flex-direction: column; align-items: flex-end; gap: 4px; }
#gp-support .gp-support-msg-col { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#gp-support .gp-support-bubble { margin: 0; padding: 10px 13px; border-radius: 16px 16px 16px 4px; background: #eef4fb; color: #334155; font-size: 14.5px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
#gp-support .gp-support-msg--me .gp-support-bubble { border-radius: 16px 16px 4px 16px; background: linear-gradient(135deg, #0170b9, #0190e8); color: #ffffff; font-weight: 500; }
#gp-support .gp-support-sys { align-self: center; margin: 0; padding: 5px 11px; border-radius: 999px; background: #f8fafc; color: #64748b; font: 700 11px/1.3 var(--font-body, 'Quicksand', sans-serif); letter-spacing: 0.07em; text-transform: uppercase; text-align: center; }
#gp-support .gp-support-compose { flex-shrink: 0; max-height: 75%; overflow: auto; margin: 0; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 14px 20px; border-top: 1px solid #e5eaf0; background: #ffffff; }
#gp-support .gp-support-ask { margin: 0; font: 700 15px/1.35 'Outfit', var(--font-body, 'Quicksand', sans-serif); color: #0f172a; }
#gp-support .gp-support-link { padding: 0; border: 0; background: transparent; color: #0170b9; font: 700 12.5px var(--font-body, 'Quicksand', sans-serif); text-decoration: underline; cursor: pointer; }
#gp-support .gp-support-chips { display: flex; flex-wrap: wrap; gap: 8px; }
#gp-support .gp-support-chip { min-height: 38px; padding: 8px 12px; border: 1px solid transparent; border-radius: 10px; background: #f8fafc; color: #334155; font: 700 13.5px var(--font-body, 'Quicksand', sans-serif); cursor: pointer; }
#gp-support .gp-support-chip:hover { background: #eef4fb; }
#gp-support .gp-support-chip.is-on { border-color: #0170b9; background: #eef4fb; color: #0170b9; }
#gp-support .gp-support-chip:focus-visible,
#gp-support .gp-support-link:focus-visible { outline: 3px solid rgba(1, 112, 185, 0.35); outline-offset: 1px; }
#gp-support .gp-support-box { position: relative; border: 1px solid #e5eaf0; border-radius: 14px; background: #f8fafc; }
#gp-support .gp-support-box:focus-within { border-color: #0170b9; background: #ffffff; box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.14); }
#gp-support .gp-support-box textarea { display: block; width: 100%; box-sizing: border-box; min-height: 52px; margin: 0; padding: 12px 56px 12px 13px; border: 0; background: transparent; resize: none; font: 500 14.5px/1.45 var(--font-body, 'Quicksand', sans-serif); color: #0f172a; outline: none; }
#gp-support .gp-support-sendc { position: absolute; right: 7px; bottom: 7px; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient(135deg, #0170b9, #0190e8); box-shadow: 0 4px 10px rgba(1, 112, 185, 0.3); cursor: pointer; }
#gp-support .gp-support-sendc:focus-visible,
#gp-support .gp-support-send:focus-visible { outline: 3px solid #0170b9; outline-offset: 2px; }

/* The shared parts of every form in the window */
/* Field headings in the name's face (Outfit bold), sentence case (Michael 2026-10-08) */
#gp-support .gp-support-label { display: block; margin: 0; font: 700 15px/1.25 'Outfit', var(--font-body, 'Quicksand', sans-serif); letter-spacing: 0; text-transform: none; color: #0f172a; }
#gp-support .gp-support-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#gp-support .gp-support-row2 > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#gp-support .gp-support-field { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 0; padding: 10px 12px; border: 1px solid #e5eaf0; border-radius: 12px; background: #f8fafc; font: 600 14.5px var(--font-body, 'Quicksand', sans-serif); color: #0f172a; }
#gp-support .gp-support-field:focus { outline: none; border-color: #0170b9; background: #ffffff; box-shadow: 0 0 0 3px rgba(1, 112, 185, 0.14); }
#gp-support textarea.gp-support-field { min-height: 100px; resize: vertical; font-weight: 500; line-height: 1.45; }
#gp-support .gp-support-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; color: #ffffff; background: linear-gradient(135deg, #0170b9, #0190e8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(1, 112, 185, 0.25); font: 700 16px 'Outfit', var(--font-body, 'Quicksand', sans-serif); cursor: pointer; }
#gp-support .gp-support-send:disabled,
#gp-support .gp-support-sendc:disabled { opacity: 0.6; cursor: progress; }
#gp-support .gp-support-meta { margin: 0; font-size: 12px; font-weight: 500; line-height: 1.45; color: #64748b; }
#gp-support .gp-support-meta a { color: #0170b9; }
#gp-support .gp-support-error { margin: 0; font-size: 13px; font-weight: 700; color: #dc2626; }

/* Away: one form */
#gp-support .gp-support-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px 16px 20px 20px; }
#gp-support .gp-support-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
#gp-support .gp-support-form .gp-support-label { margin-top: 8px; }
#gp-support .gp-support-greet { margin: 0 0 4px; padding: 12px 14px; border-radius: 12px; background: #eef4fb; color: #334155; font-size: 14.5px; font-weight: 600; line-height: 1.45; }
#gp-support .gp-support-done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 30px 12px; text-align: center; color: #334155; font-weight: 600; }
#gp-support .gp-support-done .gp-support-ic { width: 44px; height: 44px; color: #16a34a; }
#gp-support .gp-support-done p { margin: 0; }

/* The chat (Help tab Phase 4): End chat beside the note under the box; the end card (one question — 1–5 stars, a
   few optional words — and an emailed copy); the unread count on the bar's photo and the handle */
#gp-support .gp-support-cfoot { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#gp-support .gp-support-cfoot .gp-support-meta { flex: 1; min-width: 0; }
#gp-support .gp-support-endbtn { flex-shrink: 0; margin-left: auto; padding: 5px 12px; border: 1px solid #e5eaf0; border-radius: 999px; background: #ffffff; color: #334155; font: 700 12.5px var(--font-body, 'Quicksand', sans-serif); white-space: nowrap; cursor: pointer; }
#gp-support .gp-support-endbtn:hover { background: #f8fafc; color: #0f172a; }
#gp-support .gp-support-endcard { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 20px 20px; border-top: 1px solid #e5eaf0; background: linear-gradient(180deg, #f4f8fc 0%, #ffffff 100%); text-align: center; }
#gp-support .gp-support-end-title { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: #166534; font: 700 11.5px/1.2 var(--font-body, 'Quicksand', sans-serif); letter-spacing: 0.1em; text-transform: uppercase; }
#gp-support .gp-support-end-title .gp-support-ic { width: 16px; height: 16px; }
#gp-support .gp-support-end-q { margin: 0; font: 700 18px/1.3 'Outfit', var(--font-body, 'Quicksand', sans-serif); color: #0f172a; }
#gp-support .gp-support-stars { display: flex; flex-direction: row-reverse; gap: 4px; }
#gp-support .gp-support-star { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: #cbd5e1; }
#gp-support button.gp-support-star { cursor: pointer; }
#gp-support .gp-support-star .gp-support-ic { width: 34px; height: 34px; }
#gp-support .gp-support-star.is-on,
#gp-support .gp-support-stars--live .gp-support-star:hover,
#gp-support .gp-support-stars--live .gp-support-star:hover ~ .gp-support-star { color: #f59e0b; }
#gp-support .gp-support-star.is-on .gp-support-ic,
#gp-support .gp-support-stars--live .gp-support-star:hover .gp-support-ic,
#gp-support .gp-support-stars--live .gp-support-star:hover ~ .gp-support-star .gp-support-ic { fill: currentColor; }
#gp-support .gp-support-scale { display: flex; justify-content: space-between; width: 236px; max-width: 100%; margin-top: -6px; color: #64748b; font-size: 11.5px; font-weight: 700; }
#gp-support .gp-support-end-thanks { margin: 0; color: #166534; font-size: 13.5px; font-weight: 700; }
#gp-support .gp-support-fbform { width: 100%; max-width: 340px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
#gp-support .gp-support-box--sm textarea { min-height: 46px; font-size: 14px; }
#gp-support .gp-support-fbnote { margin: 0; color: #64748b; font-size: 11.5px; font-weight: 600; }
#gp-support .gp-support-end-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; margin-top: 2px; }
#gp-support .gp-support-end-btn { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; border: 1px solid #e5eaf0; border-radius: 12px; background: #ffffff; color: #0170b9; font: 700 14px var(--font-body, 'Quicksand', sans-serif); cursor: pointer; }
#gp-support .gp-support-end-btn:hover { background: #eef4fb; }
#gp-support .gp-support-end-btn .gp-support-ic { width: 17px; height: 17px; }
#gp-support .gp-support-end-done { display: inline-flex; align-items: center; gap: 6px; color: #166534; font-size: 13px; font-weight: 700; }
#gp-support .gp-support-end-done .gp-support-ic { width: 16px; height: 16px; }
#gp-support .gp-support-endbtn:focus-visible,
#gp-support .gp-support-end-btn:focus-visible,
#gp-support .gp-support-star:focus-visible { outline: 3px solid #0170b9; outline-offset: 2px; }
#gp-support .gp-support-endbtn:disabled,
#gp-support .gp-support-end-btn:disabled { opacity: 0.6; cursor: progress; }
#gp-support .gp-support-unread { position: absolute; top: -5px; right: -5px; min-width: 21px; height: 21px; padding: 0 5px; box-sizing: border-box; border: 2px solid #ffffff; border-radius: 999px; background: #ea580c; color: #ffffff; font: 700 11.5px/17px var(--font-body, 'Quicksand', sans-serif); text-align: center; }
#gp-support .gp-support-handle.has-unread .gp-support-handle-dot { background: #ea580c; box-shadow: 0 0 0 3px #ffedd5; }

/* The rep's inbox (Help tab Phase 5): the "Support inbox" bar, the On shift switch, the conversation list (unread in
   the dashboards' orange attention tint), a conversation's top bar, and the ended chat's rating */
#gp-support .gp-support-aicon { position: relative; flex-shrink: 0; width: 44px; height: 44px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient(135deg, #0170b9, #0190e8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 4px 10px rgba(1, 112, 185, 0.25); }
#gp-support .gp-support-aicon .gp-support-ic { width: 20px; height: 20px; }
#gp-support .gp-support-bar--inbox .gp-support-bar-main { padding-right: 16px; }
#gp-support .gp-support-switch { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 0; border: 0; background: transparent; color: #334155; font: 700 13px var(--font-body, 'Quicksand', sans-serif); cursor: pointer; }
#gp-support .gp-support-switch:focus-visible { outline: 3px solid #0170b9; outline-offset: 3px; border-radius: 999px; }
#gp-support .gp-support-switch:disabled { opacity: 0.6; cursor: progress; }
#gp-support .gp-support-track { position: relative; flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px; background: #94a3b8; transition: background 0.2s; }
#gp-support .gp-support-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s; }
#gp-support .gp-support-switch[aria-checked="true"] .gp-support-track { background: #16a34a; }
#gp-support .gp-support-switch[aria-checked="true"] .gp-support-knob { transform: translateX(16px); }
#gp-support .gp-support-alist { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 14px 16px; }
#gp-support .gp-support-empty { margin: 24px 0; text-align: center; color: #64748b; font-weight: 600; }
#gp-support .gp-support-crow { display: flex; align-items: flex-start; gap: 12px; width: 100%; box-sizing: border-box; padding: 11px 12px; border: 0; border-radius: 12px; background: #f8fafc; color: #0f172a; text-align: left; font-family: var(--font-body, 'Quicksand', sans-serif); cursor: pointer; }
#gp-support .gp-support-crow:hover { background: #eef4fb; }
#gp-support .gp-support-crow.is-unread { background: #fff4ed; }
#gp-support .gp-support-crow.is-unread:hover { background: #ffe9d8; }
#gp-support .gp-support-crow:focus-visible,
#gp-support .gp-support-back:focus-visible { outline: 3px solid #0170b9; outline-offset: 1px; }
#gp-support .gp-support-cav { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; background: linear-gradient(135deg, #0170b9, #0190e8); font: 700 14px/1 'Outfit', var(--font-body, 'Quicksand', sans-serif); }
#gp-support .gp-support-cav--guest { background: linear-gradient(135deg, #64748b, #475569); }
#gp-support .gp-support-cav--sm { width: 28px; height: 28px; font-size: 11px; }
#gp-support .gp-support-cmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#gp-support .gp-support-cname { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font: 700 15px/1.25 'Outfit', var(--font-body, 'Quicksand', sans-serif); }
#gp-support .gp-support-crow.is-unread .gp-support-cname { color: #9a3412; }
#gp-support .gp-support-ctime { flex-shrink: 0; color: #64748b; font: 600 12px var(--font-body, 'Quicksand', sans-serif); }
#gp-support .gp-support-cwho { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #64748b; font-size: 12.5px; font-weight: 600; }
#gp-support .gp-support-cwho .gp-support-ic { width: 13px; height: 13px; }
#gp-support .gp-support-crate { display: inline-flex; align-items: center; gap: 2px; color: #334155; }
#gp-support .gp-support-cwho .gp-support-crate .gp-support-ic { width: 12px; height: 12px; color: #f59e0b; fill: currentColor; }
#gp-support .gp-support-csnip { overflow: hidden; color: #334155; font-size: 13.5px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
#gp-support .gp-support-cdot { flex-shrink: 0; width: 9px; height: 9px; margin-top: 6px; border-radius: 50%; background: #ea580c; }
/* Remove from this list (Michael 10-08: the window only — the Support Inbox page keeps it): on each row (its own
   button beside the row's) and in a conversation's top bar */
#gp-support .gp-support-crow-wrap { position: relative; }
#gp-support .gp-support-crow-wrap .gp-support-crow { padding-right: 44px; }
#gp-support .gp-support-hide { flex-shrink: 0; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: transparent; color: #94a3b8; cursor: pointer; }
#gp-support .gp-support-hide .gp-support-ic { width: 16px; height: 16px; }
#gp-support .gp-support-hide:hover { background: #fee2e2; color: #dc2626; }
#gp-support .gp-support-hide:focus-visible { outline: 3px solid #dc2626; outline-offset: 1px; }
#gp-support .gp-support-hide:disabled { opacity: 0.6; cursor: progress; }
#gp-support .gp-support-crow-wrap .gp-support-hide { position: absolute; right: 8px; bottom: 8px; }
#gp-support .gp-support-afoot { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 13px; border-top: 1px solid #e5eaf0; color: #0170b9; font: 700 13.5px var(--font-body, 'Quicksand', sans-serif); text-decoration: none; }
#gp-support .gp-support-afoot .gp-support-ic { width: 15px; height: 15px; }
#gp-support .gp-support-tbar { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 14px; border-bottom: 1px solid #e5eaf0; }
#gp-support .gp-support-back { flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f8fafc; color: #334155; cursor: pointer; }
#gp-support .gp-support-back:hover { background: #eef4fb; }
#gp-support .gp-support-tinfo { flex: 1; min-width: 0; }
#gp-support .gp-support-tinfo b { display: block; overflow: hidden; color: #0f172a; font: 700 15px/1.2 'Outfit', var(--font-body, 'Quicksand', sans-serif); white-space: nowrap; text-overflow: ellipsis; }
#gp-support .gp-support-tinfo span { display: block; color: #64748b; font-size: 12.5px; font-weight: 600; }
#gp-support .gp-support-tinfo .gp-support-tcontact { overflow: hidden; color: #334155; white-space: nowrap; text-overflow: ellipsis; }
#gp-support .gp-support-kind { flex-shrink: 0; padding: 4px 9px; border-radius: 999px; background: #dcfce7; color: #166534; font: 700 11px/1.2 var(--font-body, 'Quicksand', sans-serif); letter-spacing: 0.06em; text-transform: uppercase; }
#gp-support .gp-support-kind--mail { background: #eef2f6; color: #475569; }
#gp-support .gp-support-ended-note { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 20px; border-top: 1px solid #e5eaf0; background: #f8fafc; color: #334155; font-size: 13.5px; font-weight: 700; text-align: center; }
#gp-support .gp-support-ended-rate { display: inline-flex; align-items: center; gap: 8px; }
#gp-support .gp-support-starrow { display: inline-flex; gap: 2px; }
#gp-support .gp-support-starrow .gp-support-star { width: auto; height: auto; }
#gp-support .gp-support-starrow .gp-support-ic { width: 15px; height: 15px; }
#gp-support .gp-support-fbquote { color: #334155; font-size: 13.5px; font-style: italic; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { #gp-support .gp-support-track,
#gp-support .gp-support-knob { transition: none; } }

/* Short screens (a 1366×768 laptop): the same window, its spacing tightened so the away form still fits whole */
@media (min-width: 481px) and (max-height: 720px) {
    #gp-support .gp-support-head { padding: 14px 14px 12px 18px; }
    #gp-support .gp-support-scroll { padding: 14px 16px 16px 18px; }
    #gp-support .gp-support-form { gap: 8px; }
    #gp-support .gp-support-form .gp-support-label { margin-top: 4px; }
    #gp-support .gp-support-greet { padding: 10px 12px; font-size: 14px; }
    #gp-support textarea.gp-support-field { height: 80px; min-height: 64px; }
}

/* Phones: the bar is the photo; the window fills the whole screen, over the site header */
@media (max-width: 480px) {
    #gp-support .gp-support-bar-text,
#gp-support .gp-support-go { display: none; }
    #gp-support .gp-support-bar-main { padding: 6px; }
    #gp-support .gp-support-panel { top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; min-height: 0; max-height: none; border: 0; border-radius: 0; }
    #gp-support .gp-support-row2 { grid-template-columns: minmax(0, 1fr); }
    /* The keyboard is up (help-widget.js fitPanel sizes the window to the space above it): the top keeps only the
       photo, the name and the minimize, so the field and its send button stay in view */
    #gp-support .gp-support-panel.is-kb .gp-support-head { gap: 10px; padding: 8px 12px 8px 14px; align-items: center; }
    #gp-support .gp-support-panel.is-kb .gp-support-head > .gp-support-face { width: 34px; height: 34px; margin-top: 0; }
    #gp-support .gp-support-panel.is-kb .gp-support-eyebrow,
#gp-support .gp-support-panel.is-kb .gp-support-idrow,
#gp-support .gp-support-panel.is-kb .gp-support-switch { display: none; }
    #gp-support .gp-support-panel.is-kb .gp-support-name { margin: 0; font-size: 16px; }
    #gp-support .gp-support-panel.is-kb .gp-support-min { width: 30px; height: 30px; }
    #gp-support .gp-support-panel.is-kb .gp-support-thread { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { #gp-support .gp-support-bar,
#gp-support .gp-support-handle { transition: none; } }