/* Support chat widget (views/support_chat.php, js/support-chat.js), in the Yclas design system
   (https://claude.ai/artifact/DNbatdacswrhbmBso9nygd): accent #2B59F0, Geist body, Bricolage Grotesque title, pill
   buttons, 16px fields, quiet shadows, ring-focus on everything you can press. Self-contained: the pages it sits on load
   different stylesheets (old Bootstrap marketing pages, the redesigned pages, the panel), so every value is set here,
   scoped to .ycc, with the design system's token names. Follows the visitor's light or dark setting (the design
   system's dark values). */
.ycc {
    --ground: #FAFAFC; --surface: #FFFFFF; --panel: #F2F4F8; --line: #E7E9EE; --line-strong: #9AA3B0;
    --ink: #0E1116; --ink-muted: #5B6472; --ink-faint: #8A93A1;
    --accent: #2B59F0; --accent-hover: #1D3FBF; --accent-soft: #EEF2FF; --on-accent: #FFFFFF;
    --danger: #C0262D; --danger-soft: #FDECEC;
    --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px;
    --shadow-md: 0 1px 2px rgba(16,24,40,.06), 0 16px 40px rgba(16,24,40,.10);
    --shadow-accent: 0 1px 2px rgba(16,24,40,.12), 0 6px 16px rgba(43,89,240,.28);
    --ring-focus: 0 0 0 4px rgba(43,89,240,.16);
    --font-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: Geist, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;

    position: fixed; right: 24px; bottom: 24px; z-index: 2147483000;
    display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
    font: 400 15px/1.5 var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased;
    pointer-events: none; /* the fixed box can be wider than its children: only they take clicks */
}
.ycc *, .ycc *::before, .ycc *::after { box-sizing: border-box; }
.ycc [hidden] { display: none !important; }
/* resets for the host page's form styles, kept as weak as one class (:where) so the widget's own rules win */
.ycc :where(button, input, textarea) { font: inherit; color: inherit; margin: 0; letter-spacing: normal; text-transform: none; }
.ycc :where(button) { cursor: pointer; }
.ycc :focus { outline: none; }
.ycc :focus-visible { box-shadow: var(--ring-focus); }
.ycc svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- launcher: a pill with the label, a round close button while the panel is open ---- */
.ycc-launcher {
    pointer-events: auto; position: relative; display: inline-flex; align-items: center; gap: 8px;
    min-height: 52px; padding: 0 24px 0 20px; border: 0; border-radius: var(--radius-pill);
    background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; box-shadow: var(--shadow-accent);
    transition: background .15s, transform .15s, padding .15s;
}
.ycc-launcher:hover { background: var(--accent-hover); }
.ycc-launcher:active { transform: scale(.97); }
.ycc-launcher:focus-visible { box-shadow: var(--shadow-accent), var(--ring-focus); }
.ycc-launcher svg { width: 22px; height: 22px; }
.ycc-launcher .ycc-i-close { display: none; }
.ycc.is-open .ycc-launcher { width: 52px; padding: 0; justify-content: center; }
.ycc.is-open .ycc-launcher .ycc-i-chat, .ycc.is-open .ycc-launcher__text { display: none; }
.ycc.is-open .ycc-launcher .ycc-i-close { display: block; }
.ycc-badge {
    position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border: 2px solid var(--surface);
    border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
}

/* ---- panel ---- */
.ycc-panel {
    pointer-events: auto; width: 384px; height: min(640px, calc(100vh - 120px)); display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); overflow: hidden;
    box-shadow: var(--shadow-md); transform-origin: bottom right; animation: ycc-in .18s ease-out;
}
@keyframes ycc-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.ycc-head { display: flex; align-items: center; gap: 12px; padding: 16px 12px 16px 20px; border-bottom: 1px solid var(--line); }
.ycc-avatar {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--surface);
    border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
}
.ycc-avatar img { width: 26px; height: 26px; }
.ycc-head__text { flex: 1 1 auto; min-width: 0; }
.ycc-head__title { display: block; font: 700 18px/1.2 var(--font-display); letter-spacing: -.02em; }
.ycc-head__sub { display: block; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.ycc-iconbtn {
    flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted);
}
.ycc-iconbtn:hover { background: var(--panel); color: var(--ink); }
.ycc-iconbtn svg { width: 20px; height: 20px; }

/* ---- conversation ---- */
.ycc-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 6px; background: var(--ground); overscroll-behavior: contain; }
.ycc-day { align-self: center; margin: 8px 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.ycc-msg { display: flex; flex-direction: column; max-width: 82%; }
.ycc-msg--visitor { align-self: flex-end; align-items: flex-end; }
.ycc-msg--agent, .ycc-msg--greeting { align-self: flex-start; align-items: flex-start; }
.ycc-bubble { padding: 10px 14px; border-radius: 18px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ycc-msg--visitor .ycc-bubble { background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.ycc-msg--agent .ycc-bubble, .ycc-msg--greeting .ycc-bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.ycc-msg.is-sending .ycc-bubble { opacity: .6; }
.ycc-meta { margin-top: 4px; padding: 0 4px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.ycc-system { align-self: center; max-width: 90%; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-muted); }

.ycc-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ycc-chip {
    min-height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
    background: var(--surface); font-size: 14px; color: var(--ink);
}
.ycc-chip:hover { border-color: var(--line-strong); }

/* ---- the "where can we reply" step, before a visitor's first message goes out ---- */
.ycc-ask { margin-top: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); display: flex; flex-direction: column; gap: 12px; }
.ycc-ask__title { font-size: 14px; font-weight: 600; }
.ycc-field { display: flex; flex-direction: column; gap: 6px; }
.ycc-field span { font-size: 14px; font-weight: 600; }
.ycc-field input {
    width: 100%; height: 48px; padding: 0 16px; border: 2px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); font-size: 16px; box-shadow: none;
}
.ycc-field input:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
.ycc-hint { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.ycc-btn {
    min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-pill);
    background: var(--accent); color: var(--on-accent); font-weight: 600; box-shadow: var(--shadow-accent);
}
.ycc-btn:hover { background: var(--accent-hover); }
.ycc-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ycc-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.ycc-error { margin: 0 16px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger); font-size: 13px; font-weight: 500; }

/* ---- composer ---- */
.ycc-compose { display: flex; align-items: flex-end; gap: 8px; margin: 12px 16px 16px; padding: 6px 6px 6px 16px; border: 2px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.ycc-compose:focus-within { border-color: var(--accent); box-shadow: var(--ring-focus); }
.ycc-compose textarea {
    flex: 1 1 auto; min-height: 40px; max-height: 140px; padding: 9px 0; border: 0; background: transparent;
    resize: none; font-size: 16px; line-height: 1.4; box-shadow: none !important; overflow-y: hidden;
}
.ycc-compose textarea::placeholder { color: var(--ink-faint); }
.ycc-send {
    flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent);
}
.ycc-send:hover { background: var(--accent-hover); }
.ycc-send:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.ycc-send svg { width: 20px; height: 20px; }
.ycc-clip {
    flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted);
}
.ycc-clip:hover { background: var(--panel); color: var(--ink); }
.ycc-clip:disabled { opacity: .45; cursor: not-allowed; }
.ycc-clip svg { width: 20px; height: 20px; }

.ycc-image { display: block; margin-bottom: 4px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--panel); min-width: 120px; min-height: 80px; }
.ycc-image img { display: block; max-width: 100%; max-height: 240px; }

@media (max-width: 480px) {
    .ycc { right: 16px; bottom: 16px; }
    .ycc.is-open { inset: 0; right: 0; bottom: 0; gap: 0; }
    .ycc.is-open .ycc-launcher { display: none; }
    .ycc-panel { width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0; animation: none; }
    .ycc-compose { margin-bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .ycc-panel { animation: none; } .ycc-launcher { transition: none; } }
@media print { .ycc { display: none; } }

/* ---- links, images, the full-size viewer ---- */
.ycc-bubble a { color: inherit; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.ycc-msg--agent .ycc-bubble a, .ycc-msg--greeting .ycc-bubble a { color: var(--accent-hover); }
.ycc-image { display: block; padding: 0; cursor: zoom-in; }
.ycc-viewer {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 56px 16px 16px;
    background: rgba(14, 17, 22, .92);
}
.ycc-viewer img { max-width: 100%; max-height: 100%; border-radius: var(--radius-md); }
.ycc-viewer__shut { position: absolute; top: 8px; right: 8px; color: #fff; }
.ycc-viewer__shut:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ycc-panel { position: relative; }

/* ---- new messages slide in; the team typing ---- */
.ycc-msg.is-new { animation: ycc-msg-in .22s ease-out; }
@keyframes ycc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ycc-typing .ycc-bubble { display: inline-flex; gap: 4px; padding: 14px 16px; }
.ycc-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); animation: ycc-dot 1.2s infinite ease-in-out; }
.ycc-typing i:nth-child(2) { animation-delay: .15s; }
.ycc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ycc-dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---- a reply while the panel is closed ---- */
.ycc-peek {
    pointer-events: auto; position: relative; width: 300px; max-width: calc(100vw - 48px);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    animation: ycc-msg-in .22s ease-out;
}
.ycc-peek__open { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 14px 44px 14px 16px; border: 0; background: transparent; text-align: left; border-radius: var(--radius-lg); }
.ycc-peek__open b { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.ycc-peek__open span { color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ycc-peek__shut { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); }
.ycc-peek__shut:hover { background: var(--panel); color: var(--ink); }
.ycc-peek__shut svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
    .ycc-msg.is-new, .ycc-peek { animation: none; }
    .ycc-typing i { animation: none; opacity: .7; }
}

/* ---- dark: the design system's dark values ---- */
@media (prefers-color-scheme: dark) {
    .ycc {
        --ground: #0B0E14; --surface: #141821; --panel: #1B2030; --line: #2A3142; --line-strong: #4A5468;
        --ink: #F2F4F8; --ink-muted: #A3ACBA; --ink-faint: #7B8494;
        --accent: #7C9BFF; --accent-hover: #A3B8FF; --accent-soft: #1C2A55; --on-accent: #0B0E14;
        --danger: #FF8A8F; --danger-soft: #3D1518;
        --shadow-md: 0 1px 2px rgba(0,0,0,.4), 0 16px 40px rgba(0,0,0,.45);
        --shadow-accent: 0 1px 2px rgba(0,0,0,.4), 0 6px 16px rgba(124,155,255,.25);
        --ring-focus: 0 0 0 4px rgba(124,155,255,.30);
    }
    .ycc-badge { color: #0B0E14; }
}

/* ---- the team online: a green dot on the logo ---- */
.ycc { --success: #12805C; }
.ycc-avatar { position: relative; }
.ycc.is-team-online .ycc-avatar::after {
    content: ""; position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px;
    border: 2px solid var(--surface); border-radius: 50%; background: var(--success);
}
.ycc-end svg { width: 18px; height: 18px; }

/* ---- the assistant: its answer being written, help articles, quick replies ---- */
.ycc-bubble.is-writing::after {
    content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px;
    background: var(--accent); animation: ycc-caret 1s steps(2) infinite;
}
@keyframes ycc-caret { 50% { opacity: 0; } }
.ycc-sources { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; width: 100%; }
.ycc-source {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line);
    border-radius: var(--radius-md); background: var(--surface); color: var(--ink); text-decoration: none;
    transition: border-color .15s, background .15s;
}
.ycc-source:hover { border-color: var(--accent); background: var(--accent-soft); }
.ycc-source svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--accent); }
.ycc-source span { display: flex; flex-direction: column; min-width: 0; }
.ycc-source b { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ycc-source small { font-size: 12px; color: var(--ink-muted); }
.ycc-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; animation: ycc-msg-in .22s ease-out; }
.ycc-quick .ycc-chip { border-color: var(--accent); color: var(--accent-hover); background: var(--surface); font-weight: 500; }
.ycc-quick .ycc-chip:hover { background: var(--accent-soft); }
.ycc-chip--human { display: inline-flex; align-items: center; gap: 6px; }
.ycc-quick .ycc-chip--human { border-color: var(--line); color: var(--ink); }
.ycc-quick .ycc-chip--human:hover { border-color: var(--line-strong); background: var(--surface); }
.ycc-chip--human svg { width: 16px; height: 16px; }

/* ---- rating a closed chat ---- */
.ycc-rate {
    align-self: stretch; margin-top: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); text-align: center; animation: ycc-msg-in .22s ease-out;
}
.ycc-rate__q { margin: 0 0 12px; font: 700 16px/1.3 var(--font-display); letter-spacing: -.01em; }
.ycc-rate__row { display: flex; justify-content: center; gap: 12px; }
.ycc-rate__btn {
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted);
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}
.ycc-rate__btn:hover { border-color: var(--accent); color: var(--accent); }
.ycc-rate__btn:active { transform: scale(.95); }
.ycc-rate__btn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.ycc-rate__btn svg { width: 22px; height: 22px; }
.ycc-rate__more { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; text-align: left; }
.ycc-rate__more textarea {
    width: 100%; padding: 10px 14px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
    font-size: 15px; resize: vertical; box-shadow: none;
}
.ycc-rate__more textarea:focus { border-color: var(--accent); box-shadow: var(--ring-focus); }
.ycc-rate__more .ycc-btn { align-self: flex-end; }

@media (prefers-reduced-motion: reduce) {
    .ycc-bubble.is-writing::after { animation: none; }
    .ycc-quick, .ycc-rate { animation: none; }
}
@media (prefers-color-scheme: dark) {
    .ycc { --success: #3CCB8E; }
}

/* ---- customers: open a support ticket instead of a message ---- */
.ycc-ticket {
    margin-top: 8px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
    display: flex; flex-direction: column; gap: 12px;
}
.ycc-ticket p { margin: 0; font-size: 15px; }
.ycc-ticket .ycc-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.ycc-ticket__list { align-self: center; font-size: 14px; font-weight: 500; color: var(--accent-hover); }

/* ---- the invitation: one gentle bounce of the button when the greeting pops up ---- */
.ycc.is-nudge .ycc-launcher { animation: ycc-nudge .9s ease-out; }
@keyframes ycc-nudge {
    0%, 100% { transform: none; }
    25% { transform: translateY(-8px); }
    45% { transform: translateY(0); }
    60% { transform: translateY(-4px); }
    75% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .ycc.is-nudge .ycc-launcher { animation: none; } }