/* support — section styles (loaded from by build.py) */ /* The one button that puts a guest in front of a human. It rides above every section, so it carries the accent rather than any section's ground. */ #vp-support { position:fixed; z-index:60; right:24px; bottom:24px; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 20px 0 14px; border:0; cursor:pointer; border-radius:999px; background:var(--color-accent); color:var(--color-bg); box-shadow:var(--shadow-md); text-decoration:none; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:15px; transition:background .18s ease, transform .18s ease; } #vp-support:hover { background:var(--color-accent-600); color:var(--color-bg); transform:translateY(-2px); } #vp-support:active { background:var(--color-accent-700); } #vp-support .vp-support__icon { display:flex; align-items:center; } #vp-support .vp-support__icon svg { display:block; } /* An answer waiting on a closed panel. A number, not a dot: "someone replied" and "three people replied" are different news. */ #vp-support .vp-support__badge { position:absolute; top:-4px; right:-2px; min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; border-radius:999px; background:var(--color-accent-2-700); color:var(--color-bg); font-family:var(--font-body); font-size:12px; font-weight:700; line-height:1; box-shadow:var(--shadow-sm); } /* display:inline-flex above wins over the browser's own [hidden] rule, so the badge has to be told to disappear explicitly — otherwise an empty green dot sits on the button with nothing behind it. */ #vp-support .vp-support__badge[hidden] { display:none; } /* ------------------------------------------------------------ the panel -- */ /* A card in the corner on a laptop, the whole screen on a phone — the same conversation either way. It sits just above the button it came out of. */ .vp-support-panel { /* Above the site header (80) and the sticky mobile bar (70): on a phone the conversation takes the whole screen, and a header drawn on top of it would take the close button with it. Still under the booking dialog (250) — that one is the page's own modal and outranks everything. Fixed height on desktop (not only max-height): with one message the card used to collapse to a stub; it should feel like a chat window from the first line. */ position:fixed; z-index:200; right:24px; bottom:84px; width:min(380px, calc(100vw - 32px)); height:min(560px, calc(100vh - 140px)); max-height:min(560px, calc(100vh - 140px)); display:flex; flex-direction:column; overflow:hidden; background:var(--color-bg); color:var(--color-text); border:1px solid var(--color-divider); border-radius:var(--radius-lg); box-shadow:0 18px 50px color-mix(in srgb, #2e2b25 28%, transparent); font-family:var(--font-body); } .vp-support-panel[hidden] { display:none; } .vp-support-panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); padding:var(--space-4); border-bottom:1px solid var(--color-divider); background:var(--color-surface); } .vp-support-panel__title { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:16px; } .vp-support-panel__sub { margin:2px 0 0; font-size:13px; color:var(--color-neutral-700); } .vp-support-panel__close { flex:none; width:32px; height:32px; display:grid; place-items:center; cursor:pointer; border:0; border-radius:999px; background:transparent; color:var(--color-neutral-700); } .vp-support-panel__close:hover { background:var(--color-neutral-200); color:var(--color-text); } .vp-support-panel__log { flex:1 1 auto; overflow-y:auto; padding:var(--space-4); /* Тесно внутри серии реплик одного и того же и просторно между сериями: разрыв здесь значит смену говорящего, а не просто следующую строчку. */ display:flex; flex-direction:column; gap:4px; } .vp-support-panel__msg.opens { margin-top:var(--space-3); } .vp-support-panel__log > :first-child { margin-top:auto; } .vp-support-panel__day + .vp-support-panel__msg.opens { margin-top:var(--space-2); } /* Разговор стоит на дне, а не висит под шапкой: пока реплик мало, свободное место остаётся сверху — так читается всякий чат, и особенно на телефоне, где пустота под двумя строчками занимает пол-экрана. Когда реплики перестают помещаться, свободного места нет и отступ схлопывается сам (правило выше, у первого ребёнка ленты).*/ .vp-support-panel__intro { margin:auto 0; padding:var(--space-4) var(--space-2); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); } .vp-support-panel__introIcon { display:grid; place-items:center; width:52px; height:52px; border-radius:999px; background:var(--color-surface); color:var(--color-accent-600); } .vp-support-panel__introTitle { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:18px; color:var(--color-text); } .vp-support-panel__introText { margin:0; max-width:32ch; color:var(--color-neutral-700); font-size:14px; line-height:1.55; } .vp-support-panel__day { align-self:center; margin-top:var(--space-3); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-neutral-500); } .vp-support-panel__msg { display:flex; flex-direction:column; gap:3px; max-width:82%; } .vp-support-panel__msg.is-guest { align-self:flex-end; align-items:flex-end; } .vp-support-panel__msg.is-team { align-self:flex-start; } .vp-support-panel__bubble { border-radius:var(--radius-md); padding:9px 13px; font-size:14px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; background:var(--color-surface); } .vp-support-panel__msg.is-guest .vp-support-panel__bubble { background:var(--color-accent); color:var(--color-bg); } .vp-support-panel__meta { font-size:11px; color:var(--color-neutral-500); } /* System lines — operator joined / question closed — sit in the middle like Jivo's status chips, not as speech bubbles. */ .vp-support-panel__sys { align-self:center; max-width:92%; margin-top:var(--space-3); padding:8px 14px; border-radius:999px; text-align:center; background:var(--color-surface); color:var(--color-neutral-700); font-size:12.5px; line-height:1.45; } .vp-support-panel__sys strong { color:var(--color-text); font-weight:600; } .vp-support-panel__sysTime { display:inline-block; margin-left:6px; color:var(--color-neutral-500); font-size:11px; } /* After the operator closes the question: resolved notice + star rating (cosmetic only — nothing is stored) + a way back into a new question. */ .vp-support-panel__done { border-top:1px solid var(--color-divider); padding:var(--space-4) var(--space-3); background:var(--color-surface); text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--space-2); } .vp-support-panel__doneTitle { margin:0; font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:15px; color:var(--color-text); } .vp-support-panel__doneText { margin:0; font-size:13px; color:var(--color-neutral-700); line-height:1.45; max-width:34ch; } .vp-support-panel__stars { display:inline-flex; gap:4px; margin:var(--space-1) 0; } .vp-support-panel__star { width:36px; height:36px; padding:0; border:0; cursor:pointer; background:transparent; color:var(--color-neutral-400); transition:color .15s ease, transform .15s ease; } .vp-support-panel__star:hover, .vp-support-panel__star.is-on { color:var(--color-accent); } .vp-support-panel__star:hover { transform:translateY(-1px); } .vp-support-panel__star svg { display:block; width:28px; height:28px; margin:auto; } .vp-support-panel__thanks { margin:0; font-size:13px; color:var(--color-accent-600); } .vp-support-panel__again { margin-top:var(--space-1); border:0; cursor:pointer; padding:10px 18px; border-radius:999px; background:var(--color-accent); color:var(--color-bg); font-family:var(--font-heading); font-weight:var(--font-heading-weight); font-size:14px; transition:background .18s ease; } .vp-support-panel__again:hover { background:var(--color-accent-600); } .vp-support-panel__form { border-top:1px solid var(--color-divider); padding:var(--space-3); background:var(--color-surface); } .vp-support-panel__form[hidden] { display:none; } .vp-support-panel__done[hidden] { display:none; } .vp-support-panel__contact { display:block; margin-bottom:var(--space-2); font-size:12px; } /* Same as the badge: display:block above would keep it on screen after the first message, and asking for a contact again is asking twice. */ .vp-support-panel__contact[hidden] { display:none; } .vp-support-panel__contact span { display:block; color:var(--color-neutral-700); margin-bottom:4px; } .vp-support-panel__contact input { width:100%; box-sizing:border-box; font:inherit; font-size:14px; padding:8px 12px; border-radius:999px; border:1px solid var(--color-divider); background:var(--color-bg); color:var(--color-text); } .vp-support-panel__row { display:flex; align-items:flex-end; gap:var(--space-2); } .vp-support-panel__row textarea { flex:1 1 auto; resize:none; font:inherit; font-size:14px; line-height:1.45; min-height:40px; max-height:120px; padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--color-divider); background:var(--color-bg); color:var(--color-text); } .vp-support-panel__contact input:focus, .vp-support-panel__row textarea:focus { outline:none; border-color:var(--color-accent); } .vp-support-panel__send { flex:none; width:40px; height:40px; display:grid; place-items:center; cursor:pointer; border:0; border-radius:999px; background:var(--color-accent); color:var(--color-bg); transition:background .18s ease; } .vp-support-panel__send:hover { background:var(--color-accent-600); } @media (max-width:780px) { /* Above the sticky booking bar, and out of the thumb's way. */ #vp-support { right:16px; bottom:calc(84px + env(safe-area-inset-bottom)); min-height:44px; padding:0 16px 0 12px; font-size:14px; } /* The conversation takes the screen: a card the size of a business card is not something anyone types into on a phone. Height rather than top+bottom, so that on a phone whose browser bar comes and goes the panel is the viewport as it actually is at that moment (dvh); vh is the fallback for anything that has not heard of it. */ .vp-support-panel { right:0; left:0; top:0; bottom:auto; height:100vh; height:100dvh; width:auto; max-height:none; border-radius:0; border:0; } .vp-support-panel__head { padding-top:calc(var(--space-4) + env(safe-area-inset-top)); } .vp-support-panel__form, .vp-support-panel__done { padding-bottom:calc(var(--space-3) + env(safe-area-inset-bottom)); } /* Sixteen pixels, not fourteen: below that iOS zooms the whole page the moment the field is tapped, and the guest is left dragging a magnified site around to read the answer. */ .vp-support-panel__row textarea, .vp-support-panel__contact input { font-size:16px; } } @media (prefers-reduced-motion:reduce) { #vp-support:hover { transform:none; } .vp-support-panel__star:hover { transform:none; } }