/* Support chat window (website and app). */
.sw-launcher { position: fixed; right: 20px; bottom: 20px; z-index: 1060; width: 58px; height: 58px; border-radius: 50%; border: 0; color: #fff; font-size: 1.5rem;
    background: linear-gradient(135deg, #1d4ed8, #4f46e5); box-shadow: 0 12px 28px -8px rgba(29,78,216,.6); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.sw-launcher:hover { transform: scale(1.06); }
.sw-launcher:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
.sw-launcher.is-open { transform: scale(.9); }
.sw-badge { position: absolute; top: -2px; right: -2px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #dc2626; color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.sw-panel { position: fixed; right: 20px; bottom: 92px; z-index: 1060; width: 380px; max-width: calc(100vw - 32px); height: min(620px, calc(100vh - 120px)); display: flex; flex-direction: column;
    background: #fff; color: #0f172a; border-radius: 1rem; box-shadow: 0 24px 60px -12px rgba(15,23,42,.35), 0 0 0 1px rgba(15,23,42,.06); overflow: hidden; font-size: .92rem; }
.sw-panel[hidden] { display: none; }
.sw-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; color: #fff; background: linear-gradient(135deg, #1d4ed8, #4f46e5); }
.sw-avatar { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; }
.sw-head-text { flex: 1; min-width: 0; }
.sw-title { font-weight: 700; }
.sw-sub { font-size: .78rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-close { border: 0; background: transparent; color: #fff; font-size: 1.1rem; padding: .25rem .4rem; border-radius: .4rem; }
.sw-close:hover { background: rgba(255,255,255,.15); }
.sw-body { flex: 1; overflow-y: auto; padding: 1rem; background: #f6f7fb; }
.sw-messages { display: flex; flex-direction: column; gap: .5rem; }
.sw-msg { display: flex; }
.sw-msg.sw-customer { justify-content: flex-end; }
.sw-bubble { max-width: 85%; padding: .55rem .75rem; border-radius: 1rem; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.08); overflow-wrap: anywhere; }
.sw-customer .sw-bubble { background: #1d4ed8; color: #fff; border-bottom-right-radius: .3rem; }
.sw-bot .sw-bubble, .sw-agent .sw-bubble { border-bottom-left-radius: .3rem; }
.sw-agent .sw-bubble { border-left: 3px solid #16a34a; }
.sw-name { font-size: .72rem; font-weight: 700; color: #64748b; margin-bottom: .15rem; }
.sw-text { white-space: pre-line; }
.sw-time { font-size: .68rem; opacity: .6; text-align: right; margin-top: .2rem; }
.sw-system { width: 100%; text-align: center; font-size: .78rem; color: #475569; background: #e2e8f0; border-radius: .5rem; padding: .35rem .6rem; }
.sw-sending { opacity: .6; }
.sw-failed .sw-bubble { background: #fee2e2; color: #991b1b; }
.sw-link { display: inline-block; margin-top: .45rem; padding: .3rem .7rem; border-radius: 99px; background: #eef2ff; color: #1d4ed8; font-weight: 600; font-size: .82rem; text-decoration: none; border: 0; }
.sw-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.sw-chip { border: 1px solid #c7d2fe; background: #fff; color: #1d4ed8; border-radius: 99px; padding: .3rem .75rem; font-size: .82rem; font-weight: 600; }
.sw-chip:hover { background: #eef2ff; }
.sw-file { margin-top: .4rem; }
.sw-file img { max-width: 100%; max-height: 180px; border-radius: .5rem; display: block; }
.sw-file video { width: 100%; max-height: 200px; border-radius: .5rem; background: #000; }
.sw-customer .sw-file a { color: #fff; }
.sw-status { padding: .35rem 1rem; font-size: .78rem; color: #475569; background: #f1f5f9; border-top: 1px solid #e2e8f0; }
.sw-compose { display: flex; align-items: flex-end; gap: .35rem; padding: .6rem; border-top: 1px solid #e2e8f0; background: #fff; }
.sw-compose textarea { flex: 1; resize: none; border: 1px solid #cbd5e1; border-radius: .8rem; padding: .5rem .7rem; font: inherit; max-height: 120px; outline: none; }
.sw-compose textarea:focus { border-color: #1d4ed8; box-shadow: 0 0 0 3px rgba(29,78,216,.15); }
.sw-tool, .sw-send { border: 0; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sw-tool { background: #f1f5f9; color: #334155; }
.sw-tool:hover { background: #e2e8f0; }
.sw-tool[hidden] { display: none; }
.sw-send { background: #1d4ed8; color: #fff; }
.sw-send:disabled { opacity: .5; }
.sw-foot { text-align: center; font-size: .7rem; color: #94a3b8; padding: 0 0 .45rem; background: #fff; }
.sw-handoff, .sw-report { display: flex; flex-direction: column; gap: .45rem; background: #fff; border-radius: .8rem; padding: .8rem; box-shadow: 0 1px 3px rgba(15,23,42,.1); margin-top: .5rem; }
.sw-handoff input, .sw-report input:not([type=checkbox]), .sw-report select, .sw-report textarea { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .45rem .6rem; font: inherit; min-width: 0; }
.sw-report-title { font-weight: 700; font-size: 1rem; }
.sw-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sw-row select { flex: 1; }
.sw-primary { border: 0; background: #1d4ed8; color: #fff; border-radius: .5rem; padding: .5rem .9rem; font-weight: 600; text-decoration: none; text-align: center; }
.sw-primary:disabled { opacity: .6; }
.sw-secondary { border: 1px solid #cbd5e1; background: #fff; color: #334155; border-radius: .5rem; padding: .4rem .7rem; font-size: .82rem; font-weight: 600; }
.sw-voice { font-size: .8rem; color: #475569; }
.sw-hint { font-size: .78rem; color: #64748b; }
.sw-error { font-size: .8rem; color: #b91c1c; min-height: 1em; }
.sw-pending { display: flex; flex-direction: column; gap: .3rem; }
.sw-pending-item { display: flex; align-items: center; gap: .4rem; font-size: .8rem; background: #f1f5f9; border-radius: .4rem; padding: .3rem .5rem; }
.sw-pending-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-x { border: 0; background: transparent; color: #64748b; }
.sw-recpill { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1070; display: flex; align-items: center; gap: .5rem; padding: .55rem .6rem .55rem 1rem;
    background: #0f172a; color: #fff; border-radius: 99px; box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: .9rem; }
.sw-recpill[hidden] { display: none; }
.sw-rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; animation: swPulse 1.2s infinite; }
@keyframes swPulse { 50% { opacity: .3; } }
.sw-rec-stop { border: 0; background: #ef4444; color: #fff; border-radius: 99px; padding: .3rem .9rem; font-weight: 700; }
@media (max-width: 575.98px) {
    .sw-panel { right: 0; bottom: 0; width: 100vw; max-width: 100vw; height: 100%; max-height: 100dvh; border-radius: 0; }
    .sw-is-open .sw-launcher { display: none; }
    .sw-launcher { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sw-rec-dot { animation: none; } .sw-launcher { transition: none; } }
/* WhatsApp button sits above the chat button. */
.site-whatsapp { bottom: 90px !important; }
.sw-left .sw-launcher { left: 16px; right: auto; bottom: 16px; width: 44px; height: 44px; font-size: 1.1rem; }
.sw-left .sw-panel { left: 16px; right: auto; bottom: 72px; }

/* Recording bar: time left (1 minute), progress, Stop & attach. */
.sw-recbar { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1080; width: min(460px, calc(100vw - 32px));
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .35rem .75rem;
    padding: .7rem .8rem .6rem 1rem; background: #0f172a; color: #fff; border-radius: 1rem; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.sw-recbar-text { display: flex; flex-direction: column; line-height: 1.2; }
.sw-recbar-label { font-size: .78rem; opacity: .75; }
.sw-recbar-clock { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.sw-recbar-track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(255,255,255,.18); overflow: hidden; }
.sw-recbar-track span { display: block; height: 100%; width: 0; background: #22c55e; border-radius: 3px; transition: width .25s linear; }
.sw-recbar.is-ending .sw-recbar-track span { background: #f59e0b; }
.sw-recbar.is-ending .sw-recbar-clock { color: #fbbf24; }
.sw-recbar .sw-rec-stop { padding: .55rem 1rem; font-size: .9rem; }
.sw-recbar .sw-rec-stop:focus-visible { outline: 3px solid #fca5a5; outline-offset: 2px; }
/* Preview of a recording before it is sent. */
.sw-preview { padding: .7rem; border-top: 1px solid #e2e8f0; background: #f8fafc; display: flex; flex-direction: column; gap: .45rem; }
.sw-preview video { width: 100%; max-height: 180px; border-radius: .5rem; background: #000; }
.sw-preview-info { font-size: .78rem; color: #475569; }
.sw-preview input { width: 100%; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .4rem .6rem; font: inherit; }
.sw-pending-item.is-recovered { background: #fef9c3; }
.st-preview { border: 1px solid #e2e8f0; border-radius: .7rem; padding: .75rem; background: #f8fafc; max-width: 560px; }
.st-preview video { width: 100%; max-height: 300px; border-radius: .5rem; background: #000; display: block; margin-bottom: .5rem; }
@media (prefers-reduced-motion: reduce) { .sw-recbar-track span { transition: none; } }

/* Screen recorder window (/support/recorder) */
.recorder-body { background: #f6f7fb; min-height: 100vh; }
.recorder { max-width: 440px; margin: 0 auto; padding: 1rem; }
.recorder-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; padding: .7rem .8rem; border-radius: .8rem; color: #fff; background: linear-gradient(135deg, #1d4ed8, #4f46e5); }
.recorder-clock { font-size: 3rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; line-height: 1; margin-top: .5rem; }
.recorder-track { height: 8px; border-radius: 4px; background: #e2e8f0; overflow: hidden; margin-top: .75rem; }
.recorder-track span { display: block; height: 100%; width: 0; background: #22c55e; transition: width .25s linear; }
#recLive.is-ending .recorder-clock { color: #d97706; }
#recLive.is-ending .recorder-track span { background: #f59e0b; }
/* "Your recording is ready" notice on other pages */
.sw-notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1080; display: flex; align-items: center; gap: .75rem;
    max-width: calc(100vw - 32px); padding: .65rem .8rem .65rem 1rem; border-radius: .8rem; background: #0f172a; color: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.35); font-size: .9rem; }
.sw-notice a { color: #93c5fd; font-weight: 700; white-space: nowrap; }
.sw-notice button { border: 0; background: transparent; color: #fff; font-size: 1.2rem; line-height: 1; }