/* support-chat.css — the fixed bottom-right support-chat widget (.sc-*),
   paired with /js/support-chat.js. Split out of landing.html's inline <style>.
   Uses var(--token, fallback) so it stands alone on any page that mounts it. */

.sc-root { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; font-family: var(--font-b, system-ui, sans-serif); }
/* `display:flex/inline-flex` below outranks the UA `[hidden]{display:none}`
   rule, so without this the panel ignores its `hidden` attr and shows open on
   load. Keep this first so hidden always wins. */
.sc-panel[hidden], .sc-launcher[hidden] { display: none !important; }
.sc-launcher { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--copper, #B66C45); color: #fff; border: none; border-radius: 999px; padding: 0.7rem 1.1rem; font-weight: 700; font-size: 0.9rem; cursor: pointer !important; box-shadow: 0 8px 24px rgba(0,0,0,0.18); }
.sc-launcher:hover { filter: brightness(1.05); }
.sc-panel { width: 340px; max-width: calc(100vw - 2rem); height: 460px; max-height: calc(100vh - 3rem); background: #fff; border: 1px solid var(--warm3, #E8DBC4); border-radius: 16px; box-shadow: 0 16px 48px rgba(0,0,0,0.22); display: flex; flex-direction: column; overflow: hidden; }
.sc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; padding: 1rem 1.1rem; background: var(--copper, #B66C45); color: #fff; }
.sc-title { font-family: var(--font-d, inherit); font-weight: 800; font-size: 1rem; }
.sc-sub { font-size: 0.78rem; opacity: 0.9; margin-top: 0.15rem; }
.sc-close { background: none; border: none; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer !important; }
.sc-presence { font-size: 0.75rem; color: var(--muted, #8A7560); background: var(--warm2, #F5EFE3); padding: 0.5rem 1.1rem; text-align: center; }
.sc-log { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.sc-msg { display: flex; }
.sc-msg-visitor { justify-content: flex-end; }
.sc-bubble { max-width: 78%; padding: 0.5rem 0.75rem; border-radius: 12px; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }
.sc-msg-visitor .sc-bubble { background: var(--copper, #B66C45); color: #fff; border-bottom-right-radius: 4px; }
.sc-msg-support .sc-bubble { background: var(--warm3, #E8DBC4); color: var(--ink, #2D2620); border-bottom-left-radius: 4px; }
.sc-form { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid var(--warm3, #E8DBC4); }
.sc-input { flex: 1; border: 1px solid var(--warm3, #E8DBC4); border-radius: 10px; padding: 0.55rem 0.7rem; font-size: 0.875rem; cursor: text !important; user-select: text; -webkit-user-select: text; }
.sc-input:disabled { background: var(--warm2, #F5EFE3); }
.sc-send { background: var(--copper, #B66C45); color: #fff; border: none; border-radius: 10px; padding: 0 1rem; font-weight: 700; font-size: 0.85rem; cursor: pointer !important; }