/* ============================================================
   XSENSE — Floating Live Chat Widget
   ------------------------------------------------------------
   A premium, in-page chat panel that replaces the old
   "open in a new tab" launcher.

   Design goals
   ------------
   • Matches the public site design system (accent, Inter/Montserrat,
     rounded cards, light + dark themes).
   • Never collides with the PWA install button or back-to-top: the
     bubble lives on the SAME right-edge rail and the panel opens
     ABOVE the whole rail.
   • Fully responsive: a docked card on desktop, a near-fullscreen
     sheet on mobile with safe-area padding.
   ============================================================ */

/* ---------- Design tokens (fall back to site values) ---------- */
.xs-chat-widget {
    --xsc-accent: var(--accent, #e63946);
    --xsc-accent-strong: var(--accent-strong, #c92a36);
    --xsc-accent-soft: var(--accent-soft, rgba(230, 57, 70, .12));
    --xsc-surface: var(--surface, #ffffff);
    --xsc-surface-2: var(--surface-2, #eef0f6);
    --xsc-text: var(--text, #171a23);
    --xsc-muted: var(--muted, #5d6475);
    --xsc-border: var(--border, #e4e7ef);
    --xsc-radius: 18px;
    --xsc-radius-sm: 12px;
    --xsc-shadow: 0 24px 60px rgba(16, 20, 32, .22);
    --xsc-ease: cubic-bezier(.22, .61, .36, 1);
    --xsc-fab-size: 58px;
    --xsc-panel-w: 384px;
    --xsc-panel-h: 620px;

    position: fixed;
    z-index: 970; /* above back-to-top (950) and install FAB (940) */
    inset-inline-end: 28px;
    bottom: 28px;
    font-family: var(--font-body, 'Inter', system-ui, sans-serif);
    color: var(--xsc-text);
}

/* ---------- Launcher bubble ---------- */
.xs-chat-fab {
    position: relative;
    width: var(--xsc-fab-size);
    height: var(--xsc-fab-size);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--xsc-accent), var(--xsc-accent-strong));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: 0 12px 30px var(--xsc-accent-soft), 0 6px 18px rgba(16, 20, 32, .18);
    transition: transform .28s var(--xsc-ease), box-shadow .28s var(--xsc-ease);
    -webkit-tap-highlight-color: transparent;
}

.xs-chat-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 18px 40px var(--xsc-accent-soft), 0 8px 22px rgba(16, 20, 32, .22);
}

.xs-chat-fab:active { transform: scale(.95); }

/* Icon cross-fade: comments ⇄ close */
.xs-chat-fab-icon,
.xs-chat-fab-close {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .25s var(--xsc-ease), transform .35s var(--xsc-ease);
}

.xs-chat-fab-close { opacity: 0; transform: rotate(-90deg) scale(.6); }

.xs-chat-widget[data-state="open"] .xs-chat-fab-icon {
    opacity: 0;
    transform: rotate(90deg) scale(.6);
}

.xs-chat-widget[data-state="open"] .xs-chat-fab-close {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* Attention pulse — only while closed and idle. */
.xs-chat-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgba(230, 57, 70, .5);
    animation: xsChatPulse 2.8s var(--xsc-ease) infinite;
    pointer-events: none;
}

.xs-chat-widget[data-state="open"] .xs-chat-fab::after { animation: none; }

@keyframes xsChatPulse {
    0%   { box-shadow: 0 0 0 0 rgba(230, 57, 70, .45); }
    70%  { box-shadow: 0 0 0 16px rgba(230, 57, 70, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 70, 0); }
}

/* Unread badge */
.xs-chat-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #22c55e;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
    border: 2px solid var(--xsc-surface);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
    animation: xsChatBadgeIn .3s var(--xsc-ease);
}

.xs-chat-badge[hidden] { display: none !important; }

@keyframes xsChatBadgeIn {
    from { transform: scale(0); }
    to   { transform: scale(1); }
}

/* ---------- Panel ---------- */
.xs-chat-panel {
    position: absolute;
    bottom: calc(var(--xsc-fab-size) + 16px);
    inset-inline-end: 0;
    width: var(--xsc-panel-w);
    height: min(var(--xsc-panel-h), calc(100vh - 140px));
    display: flex;
    flex-direction: column;
    background: var(--xsc-surface);
    border: 1px solid var(--xsc-border);
    border-radius: var(--xsc-radius);
    box-shadow: var(--xsc-shadow);
    overflow: hidden;
    transform-origin: bottom right;
    animation: xsChatPanelIn .32s var(--xsc-ease) both;
}

html[dir="rtl"] .xs-chat-panel { transform-origin: bottom left; }

.xs-chat-panel[hidden] { display: none !important; }

@keyframes xsChatPanelIn {
    from { opacity: 0; transform: translateY(16px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Panel header ---------- */
.xs-chat-panel-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--xsc-accent), var(--xsc-accent-strong));
    color: #fff;
}

.xs-chat-panel-avatar {
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.xs-chat-panel-dot {
    position: absolute;
    bottom: 1px;
    inset-inline-end: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #9aa3b2;
    border: 2px solid var(--xsc-accent);
    transition: background-color .3s var(--xsc-ease);
}

.xs-chat-panel-dot.online { background: #22c55e; }

.xs-chat-panel-text { flex: 1; min-width: 0; }

.xs-chat-panel-text h2 {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-weight: 700;
    font-size: .98rem;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xs-chat-panel-text p {
    font-size: .76rem;
    opacity: .9;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.xs-chat-panel-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .2s var(--xsc-ease), transform .3s var(--xsc-ease);
}

.xs-chat-panel-btn:hover { background: rgba(255, 255, 255, .28); }
.xs-chat-panel-btn:active { transform: scale(.9); }
.xs-chat-panel-btn.spin i { animation: xsChatSpin .8s linear infinite; }

@keyframes xsChatSpin { to { transform: rotate(360deg); } }

/* ---------- Messages ---------- */
.xs-chat-panel-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--xsc-surface);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.xs-chat-panel-empty {
    margin: auto;
    text-align: center;
    color: var(--xsc-muted);
    padding: 28px 16px;
}

.xs-chat-panel-empty i {
    font-size: 2.2rem;
    color: var(--xsc-accent);
    opacity: .35;
    margin-bottom: 12px;
    display: block;
}

.xs-chat-panel-empty p { font-size: .88rem; margin: 0; }

/* Bubbles */
.xsc-msg {
    max-width: 84%;
    display: flex;
    flex-direction: column;
    animation: xscMsgIn .25s var(--xsc-ease);
}

@keyframes xscMsgIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.xsc-msg-bubble {
    padding: 10px 14px;
    border-radius: 16px;
    font-size: .9rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    box-shadow: 0 2px 8px rgba(16, 20, 32, .06);
}

.xsc-msg-time {
    font-size: .66rem;
    color: var(--xsc-muted);
    margin-top: 4px;
    padding: 0 6px;
}

.xsc-msg.in { align-self: flex-start; align-items: flex-start; }
.xsc-msg.in .xsc-msg-bubble {
    background: var(--xsc-surface-2);
    color: var(--xsc-text);
    border: 1px solid var(--xsc-border);
    border-start-start-radius: 4px;
}

.xsc-msg.out { align-self: flex-end; align-items: flex-end; }
.xsc-msg.out .xsc-msg-bubble {
    background: linear-gradient(135deg, var(--xsc-accent), var(--xsc-accent-strong));
    color: #fff;
    border-start-end-radius: 4px;
}

.xsc-msg.sys { align-self: center; max-width: 100%; margin: 6px 0; }
.xsc-msg.sys .xsc-msg-bubble {
    background: var(--xsc-surface-2);
    color: var(--xsc-muted);
    font-size: .72rem;
    padding: 5px 12px;
    border-radius: 999px;
    box-shadow: none;
}

/* Attachments */
.xsc-msg-attach {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: var(--xsc-radius-sm);
    background: rgba(0, 0, 0, .06);
    font-size: .8rem;
    text-decoration: none;
    color: inherit;
}

.xsc-msg.out .xsc-msg-attach { background: rgba(255, 255, 255, .18); color: #fff; }

.xsc-msg-image {
    display: block;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: none;
    border-radius: var(--xsc-radius-sm);
    overflow: hidden;
    cursor: zoom-in;
    line-height: 0;
    max-width: 100%;
}

.xsc-msg-image img {
    display: block;
    width: auto;
    max-width: 220px;
    max-height: 220px;
    border-radius: var(--xsc-radius-sm);
    object-fit: cover;
    background: var(--xsc-surface-2);
}

/* Failed state + retry */
.xsc-msg.failed .xsc-msg-bubble {
    background: var(--xsc-surface-2);
    color: var(--xsc-muted);
    border: 1px dashed var(--xsc-accent);
}

.xsc-msg-retry {
    font-size: .72rem;
    color: var(--xsc-accent);
    font-weight: 600;
    margin-top: 4px;
    padding: 0 6px;
    cursor: pointer;
}

/* Typing indicator */
.xsc-typing {
    align-self: flex-start;
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: var(--xsc-surface-2);
    border: 1px solid var(--xsc-border);
    border-radius: 16px;
    border-start-start-radius: 4px;
}

.xsc-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--xsc-muted);
    animation: xscBounce 1.3s infinite;
}

.xsc-typing span:nth-child(2) { animation-delay: .18s; }
.xsc-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes xscBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-5px); opacity: 1; }
}

/* ---------- Composer ---------- */
.xs-chat-panel-foot {
    flex: 0 0 auto;
    background: var(--xsc-surface);
    border-top: 1px solid var(--xsc-border);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}

.xs-chat-panel-foot form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.xs-chat-panel-attach {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--xsc-surface-2);
    color: var(--xsc-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color .2s var(--xsc-ease), color .2s var(--xsc-ease);
}

.xs-chat-panel-attach:hover { background: var(--xsc-accent-soft); color: var(--xsc-accent); }

#xsChatInput {
    flex: 1;
    min-height: 40px;
    max-height: 110px;
    padding: 10px 15px;
    border-radius: 20px;
    border: 1px solid var(--xsc-border);
    background: var(--xsc-surface-2);
    color: var(--xsc-text);
    font-family: inherit;
    font-size: .9rem;
    line-height: 1.4;
    resize: none;
    outline: none;
    transition: border-color .2s var(--xsc-ease), box-shadow .2s var(--xsc-ease), background-color .2s var(--xsc-ease);
}

#xsChatInput:focus {
    border-color: var(--xsc-accent);
    box-shadow: 0 0 0 3px var(--xsc-accent-soft);
    background: var(--xsc-surface);
}

#xsChatInput::placeholder { color: var(--xsc-muted); }

.xs-chat-panel-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--xsc-accent), var(--xsc-accent-strong));
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 16px var(--xsc-accent-soft);
    transition: transform .2s var(--xsc-ease), opacity .2s var(--xsc-ease);
}

.xs-chat-panel-send:active { transform: scale(.92); }
.xs-chat-panel-send:disabled { opacity: .5; cursor: default; }

html[dir="rtl"] .xs-chat-panel-send i { transform: scaleX(-1); }

/* File chip */
.xs-chat-panel-file {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 7px 12px;
    border-radius: var(--xsc-radius-sm);
    background: var(--xsc-accent-soft);
    color: var(--xsc-accent);
    font-size: .78rem;
    font-weight: 600;
}

.xs-chat-panel-file[hidden] { display: none !important; }

.xs-chat-panel-file span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xs-chat-panel-file button {
    border: none;
    background: none;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--xsc-accent);
    cursor: pointer;
}

/* ---------- Identity gate ---------- */
.xs-chat-gate {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--xsc-surface);
}

.xs-chat-gate[hidden] { display: none !important; }

.xs-chat-gate-card {
    width: 100%;
    max-width: 320px;
    text-align: center;
}

.xs-chat-gate-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 14px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--xsc-accent), var(--xsc-accent-strong));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 10px 26px var(--xsc-accent-soft);
}

.xs-chat-gate-card h3 {
    font-family: var(--font-head, 'Montserrat', sans-serif);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0 0 6px;
}

.xs-chat-gate-card > p {
    color: var(--xsc-muted);
    font-size: .84rem;
    margin: 0 0 20px;
}

.xs-chat-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: start;
    margin-bottom: 12px;
}

.xs-chat-field label { font-size: .78rem; font-weight: 600; }

.xs-chat-field input {
    padding: 10px 14px;
    border-radius: var(--xsc-radius-sm);
    border: 1px solid var(--xsc-border);
    background: var(--xsc-surface-2);
    color: var(--xsc-text);
    font-family: inherit;
    font-size: .9rem;
    outline: none;
    transition: border-color .2s var(--xsc-ease), box-shadow .2s var(--xsc-ease);
}

.xs-chat-field input:focus {
    border-color: var(--xsc-accent);
    box-shadow: 0 0 0 3px var(--xsc-accent-soft);
    background: var(--xsc-surface);
}

.xs-chat-gate-btn {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--xsc-accent), var(--xsc-accent-strong));
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    box-shadow: 0 8px 20px var(--xsc-accent-soft);
    transition: transform .2s var(--xsc-ease);
}

.xs-chat-gate-btn:active { transform: translateY(1px); }
.xs-chat-gate-btn:disabled { opacity: .6; cursor: default; }

.xs-chat-gate-error {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--xsc-radius-sm);
    background: var(--xsc-accent-soft);
    color: var(--xsc-accent);
    font-size: .8rem;
}

/* ---------- Lightbox ---------- */
.xsc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, .88);
    backdrop-filter: blur(4px);
}

.xsc-lightbox.open { display: flex; }

.xsc-lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--xsc-radius-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.xsc-lightbox-close {
    position: absolute;
    top: 14px;
    inset-inline-end: 16px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Scrollbar ---------- */
.xs-chat-panel-body::-webkit-scrollbar { width: 6px; }
.xs-chat-panel-body::-webkit-scrollbar-thumb {
    background: var(--xsc-border);
    border-radius: 999px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet / small desktop: slightly narrower panel. */
@media (max-width: 1024px) {
    .xs-chat-widget { --xsc-panel-w: 360px; }
}

/* Tablet / large phone: the panel becomes a near-fullscreen sheet anchored
   to the bottom-right, leaving a small margin so the page stays visible.
   The bubble is repositioned by responsive.css to sit on the shared
   floating-button rail above the bottom toolbar. */
@media (max-width: 768px) {
    .xs-chat-widget {
        inset-inline-end: 14px;
        bottom: calc(var(--toolbar-height, 64px) + env(safe-area-inset-bottom, 0px) + 74px);
        --xsc-fab-size: 46px;
        --xsc-panel-w: calc(100vw - 20px);
        --xsc-panel-h: calc(100dvh - var(--toolbar-height, 64px) - env(safe-area-inset-bottom, 0px) - 100px);
    }

    .xs-chat-fab { font-size: 1.1rem; }

    .xs-chat-panel {
        bottom: calc(var(--xsc-fab-size) + 12px);
        max-height: calc(100dvh - var(--toolbar-height, 64px) - env(safe-area-inset-bottom, 0px) - 90px);
        border-radius: 16px;
    }

    .xs-chat-panel-body { padding: 14px 12px; }
    .xsc-msg { max-width: 88%; }
}

/* ============================================================
   SMALL MOBILE — TRUE FULLSCREEN
   ------------------------------------------------------------
   On phones the chat takes over the whole viewport instead of
   floating as a card. This gives the conversation maximum room,
   removes any chance of the panel colliding with the floating
   button rail, and matches how native messaging apps behave.

   The panel is pinned to the viewport edges (inset: 0) rather
   than positioned relative to the bubble, so it is unaffected by
   the bubble's rail offset.
   ============================================================ */
@media (max-width: 560px) {
    .xs-chat-widget {
        /* Keep the bubble on the rail while the panel is closed. */
        inset-inline-end: 14px;
        bottom: calc(var(--toolbar-height, 64px) + env(safe-area-inset-bottom, 0px) + 74px);
        --xsc-fab-size: 46px;
    }

    /* Fullscreen sheet: ignore the bubble offset entirely. */
    .xs-chat-panel {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        bottom: auto;
        inset-inline-end: auto;
        border: 0;
        border-radius: 0;
        transform-origin: center bottom;
        animation: xsChatSheetIn .28s var(--xsc-ease) both;
    }

    @keyframes xsChatSheetIn {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* Header respects the notch / status bar. */
    .xs-chat-panel-head {
        padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
        min-height: 62px;
    }

    /* Larger, clearly tappable close button (44px = recommended touch target). */
    .xs-chat-panel-btn {
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
        background: rgba(255, 255, 255, .22);
    }

    .xs-chat-panel-btn:hover { background: rgba(255, 255, 255, .34); }

    /* The close button is the primary exit on a fullscreen sheet, so give it
       a slightly stronger presence than the refresh button. */
    #xsChatClose {
        background: rgba(255, 255, 255, .28);
    }

    .xs-chat-panel-body {
        padding: 16px 14px;
        /* Leave room for the composer + home indicator. */
        padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }

    .xsc-msg { max-width: 86%; }

    .xs-chat-panel-foot {
        padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    }

    /* The identity gate fills the sheet too. */
    .xs-chat-gate { padding: 24px 20px; }
}

/* While the fullscreen sheet is open the page behind it must not scroll.
   The class is only ever added by JS at the sheet breakpoint. */
html.xsc-sheet-open,
html.xsc-sheet-open body {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* The sheet itself still scrolls internally. */
html.xsc-sheet-open .xs-chat-panel-body {
    touch-action: pan-y;
}

/* Landscape phones: keep the composer reachable by capping the body height. */
@media (max-width: 900px) and (max-height: 520px) {
    .xs-chat-panel {
        height: 100dvh;
        max-height: 100dvh;
    }

    .xs-chat-panel-head {
        min-height: 52px;
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
        padding-bottom: 8px;
    }

    .xs-chat-panel-body { padding: 10px 12px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .xs-chat-fab,
    .xs-chat-fab::after,
    .xs-chat-panel,
    .xsc-msg,
    .xs-chat-badge {
        animation: none !important;
        transition: none !important;
    }
}