/**
 * XMPPChatWidget stylesheet.
 *
 * Load it from pages embedding the widget (the widget also injects this link
 * itself when cssUrl points at it):
 *   <link rel="stylesheet" href="chat-widget.css">
 *
 * Every class is prefixed with xcw- so it can safely coexist with the
 * hosting page's own CSS.
 *
 * Layout (shared by every template):
 *   - dark header bar: round agent avatar, bold title, status line with
 *     presence dot
 *   - white message area: agent bubbles are white with a hairline border
 *     and the agent avatar on the left, visitor bubbles are light grey
 *     with an avatar on the right, system notes are small centered text
 *   - pill composer: grey round input + circular accent send button
 *   - optional "Powered by" footer (init option `poweredBy`)
 *
 * Templates
 * ---------
 * The widget picks a look via the `template` init option and adds the class
 * `xcw-tpl-<name>` to its root element. All colors/radii come from CSS
 * variables defined on `.xcw-root`, so a template is just a block that
 * overrides them:
 *
 *   .xcw-root.xcw-tpl-dark { --xcw-accent: #818cf8; ... }
 *
 * Built-in templates: classic (default), dark, mint, minimal, violet, blue,
 * dusk, ember, rose, honey, citrus, premium, silk.
 * Add your own by copying a block below and renaming the class.
 *
 * The font stack prefers Plus Jakarta Sans; the widget does not fetch
 * web fonts itself - a host page that wants it can add the Google Fonts
 * link and it will be picked up automatically.
 */

/* --- base layout (shared by all templates) -------------------------------- */
.xcw-root {
    /* template variables - 'classic' is the default look */
    --xcw-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    --xcw-accent: #1e2735;
    --xcw-accent-hover: #2c3a4f;
    --xcw-accent-disabled: #aeb6c2;
    --xcw-accent-text: #ffffff;
    --xcw-badge-bg: #dc2626; /* notification red, 4.6:1 with white digits */
    --xcw-badge-color: #ffffff;
    --xcw-panel-bg: #ffffff;
    --xcw-panel-border: #e6e8f0;
    --xcw-header-bg: #0e1420;
    --xcw-header-color: #ffffff;
    --xcw-header-status: #9aa3b2;
    --xcw-log-bg: #ffffff;
    --xcw-text: #1f2430;
    --xcw-muted: #6b7280; /* 4.8:1 on white - passes WCAG AA for small text */
    --xcw-input-bg: #ffffff;
    --xcw-input-border: #d8dbe4;
    --xcw-composer-bg: #f1f2f4;
    --xcw-bubble-me-bg: #f0f1f4;
    --xcw-bubble-me-color: #1f2430;
    --xcw-bubble-them-bg: #ffffff;
    --xcw-bubble-them-color: #1f2430;
    --xcw-bubble-them-border: #e7e9ee;
    --xcw-avatar-them-bg: var(--xcw-accent);
    --xcw-avatar-me-bg: #1f2430;
    --xcw-notice-bg: #fef3c7;
    --xcw-notice-color: #78350f;
    --xcw-notice-border: #fde68a;
    --xcw-confirm-bg: #d1fae5;
    --xcw-confirm-color: #064e3b;
    --xcw-confirm-border: #a7f3d0;
    --xcw-invalid-bg: #fef2f2;
    --xcw-invalid-border: #dc2626;
    --xcw-down-bg: #c4c9d4;
    --xcw-radius-panel: 20px;
    --xcw-radius-bubble: 14px;
    --xcw-radius-input: 8px;
    --xcw-radius-btn: 8px;
    --xcw-shadow: 0 12px 32px rgba(15, 20, 32, 0.18);
    --xcw-launcher-bottom: 32px;
    --xcw-launcher-right: 48px;
    font-family: var(--xcw-font);
    font-size: 14px !important;

}


.xcw-root input, .xcw-root textarea {
    background: var(--xcw-input-bg);
    font-size: 14px !important;
}
.xcw-root a {
    color:var(--xcw-notice-color);
}
.xcw-root button {
    padding: 0;
}
.xcw-root label, .xcw-root span, .xcw-root a, .xcw-root strong, .xcw-root em, .xcw-root small, .xcw-root cite, .xcw-root code, .xcw-root pre, .xcw-root p, .xcw-root div {
    font-size: 13px !important;
}
.xcw-root p {
    color: var(--xcw-text);
}
.xcw-root button:not(.xcw-menu-item,.xcw-launch,.xcw-iconbtn,.xcw-close,.xcw-btn,.xcw-cbtn,.xcw-avatar-info):hover {
    background-image: none !important; /* override any host page gradients */
    background-color: transparent !important; /* override any host page gradients */
    color: var(--xcw-accent-text);
}
/* --- accessibility helpers ------------------------------------------------ */
/* visually hidden, but present in the accessibility tree */
.xcw-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- launcher bubble ------------------------------------------------ */
.xcw-launch-wrap {
    position: fixed;
    bottom: var(--xcw-launcher-bottom);
    right:  var(--xcw-launcher-right);
    width: 60px;
    height: 60px;
    z-index: 100000;
    transition: opacity 0.18s ease-out, scale 0.18s ease-out;
}
/* the panel covers the launcher's corner: shrink the bubble away while open */
.xcw-launch-wrap.xcw-hidden {
    opacity: 0;
    scale: 0.7;
    pointer-events: none;
}
.xcw-launch {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: var(--xcw-accent);
    color: var(--xcw-accent-text);
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.xcw-launch:hover { background: var(--xcw-accent-hover); }
/* agent offline: the launcher swaps to the break icon and goes muted */
.xcw-launch-wrap.xcw-offline .xcw-launch { background-image: var(--xcw-muted) !important; background: var(--xcw-muted); }
.xcw-launch-wrap.xcw-offline .xcw-launch:hover { background: var(--xcw-muted); filter: brightness(0.92); }
.xcw-launch svg {
    min-width: 26px;
    width: 26px;
    height: 26px;
    display: block;
}

/* status dot pinned to the launcher bubble (agent availability):
   bottom-left, same 20px size as the unread badge, borderless */
.xcw-launchdot {
    position: absolute;
    bottom: -3px;
    left: -3px;
    width: 20px;
    height: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);

}
.xcw-offline.xcw-launchdot {
    background: var(--xcw-invalid-border) !important;
}
.xcw-launchdot:hover {
    background: unset;
    color: unset;
}

/* unread counter: top-right, same 20px size as the status dot */
.xcw-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: var(--xcw-badge-bg);
    color: var(--xcw-badge-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.xcw-badge.xcw-show {
    display: flex;
    animation: xcw-badge-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes xcw-badge-pop {
    from { scale: 0.3; }
    to { scale: 1; }
}

/* --- chat panel ------------------------------------------------------ */
.xcw-panel {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 340px;
    max-width: calc(100vw - 40px);
    height: 520px;
    max-height: calc(100vh - 40px);
    background: var(--xcw-panel-bg);
    color: var(--xcw-text);
    border: 1px solid var(--xcw-panel-border);
    border-radius: var(--xcw-radius-panel);
    box-shadow: var(--xcw-shadow);
    display: none;
    flex-direction: column;
    z-index: 100001;
    overflow: hidden;
    /* closed/exit state - the panel sinks back toward the launcher corner */
    opacity: 0;
    translate: 0 16px;
    scale: 0.96;
    transform-origin: bottom right;
    transition:
        display 0.22s,
        opacity 0.22s ease-out,
        translate 0.22s ease-out,
        scale 0.22s ease-out;
    transition-behavior: allow-discrete;
}
.xcw-panel.xcw-open {
    display: flex;
    opacity: 1;
    translate: 0 0;
    scale: 1;
}
/* entry animation: transition FROM the closed values when opened */
@starting-style {
    .xcw-panel.xcw-open {
        opacity: 0;
        translate: 0 16px;
        scale: 0.96;
    }
}

/* --- header: dark bar, round avatar, title + status ------------------ */
.xcw-head {
    background: var(--xcw-header-bg);
    color: var(--xcw-header-color);
    padding: 10px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.xcw-head-left { display: flex; align-items: center; gap: 10px; }
.xcw-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.xcw-avatar-wrap { position: relative; flex: none; }
.xcw-avatar-info {
    position: absolute;
    right: -5px;
    bottom: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--xcw-header-bg);
    background: var(--xcw-accent);
    color: #fff;
    font-size: 10px !important;
    font-weight: bold;
    font-style: italic;
    font-family: Georgia, serif;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.xcw-avatar-info:hover { filter: brightness(1.1); }
.xcw-avatar-info:focus-visible { outline: 2px solid var(--xcw-accent); outline-offset: 1px; }
.xcw-title {
    line-height: 1.25;
    font-weight: bold;
    font-size: 15px !important;
}
.xcw-status {
    font-size: 12px !important;
    font-weight: normal;
    color: var(--xcw-header-status);
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
.xcw-status span {
    font-size: 12px !important;
}
.xcw-close {
    background: none;
    border: none;
    color: var(--xcw-header-color);
    font-size: 20px !important;
    line-height: 1;
    cursor: pointer;
    /* keep the hit area >= 44x44px for touch users */
    min-width: 44px;
    min-height: 44px;
    margin: -14px -16px -14px 0;
    padding: 0;
}
.xcw-close:hover { opacity: 1;background-image:none; background-color:transparent; }
/* header action buttons (three-dots menu + close) */
.xcw-head-actions {
    display: flex;
    align-items: center;
    margin: -14px -16px -14px 0;
}
.xcw-iconbtn {
    background: none;
    border: none;
    color: var(--xcw-header-color);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    transition: opacity 0.15s ease;
    padding: 0;
}
.xcw-iconbtn:hover { opacity: 1;background-image:none; background-color:transparent; }
.xcw-iconbtn svg { width: 20px; min-width:20px; height: 20px; display: block; }
.xcw-head-actions .xcw-close { margin: 0; }

/* dropdown opened by the three-dots button - springs from the top-right */
.xcw-menu {
    position: absolute;
    top: 62px;
    right: 10px;
    background: var(--xcw-panel-bg);
    border: 1px solid var(--xcw-panel-border);
    border-radius: 10px;
    box-shadow: var(--xcw-shadow);
    padding: 4px;
    z-index: 10;
    min-width: 220px;
    display: none;
    /* closed/exit state */
    opacity: 0;
    scale: 0.92;
    translate: 0 -6px;
    transform-origin: top right;
    transition:
        display 0.18s,
        opacity 0.18s ease-out,
        scale 0.18s ease-out,
        translate 0.18s ease-out;
    transition-behavior: allow-discrete;
}
.xcw-menu.xcw-open {
    display: block;
    opacity: 1;
    scale: 1;
    translate: 0 0;
    overflow: hidden;
}
@starting-style {
    .xcw-menu.xcw-open {
        opacity: 0;
        scale: 0.92;
        translate: 0 -6px;
    }
}
.xcw-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--xcw-text);
    font-size: 13px !important;
    font-family: inherit;
    padding: 9px 12px !important;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.xcw-menu-item:hover { background: var(--xcw-accent-hover); color: var(--xcw-accent-text); }
.xcw-menu-item span svg { width: 16px; height: 18px; }
/* separator between menu sections */
.xcw-menu-sep {
    height: 1px;
    background: var(--xcw-panel-border);
    margin: 4px 6px;
}

/* "Play sounds" toggle row inside the menu */
.xcw-menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}
.xcw-menu-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.xcw-switch {
    position: relative;
    width: 30px;
    height: 17px;
    border-radius: 9px;
    background: var(--xcw-down-bg);
    flex: none;
    transition: background 0.18s ease;
}
.xcw-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transition: translate 0.18s ease;
}
.xcw-menu-toggle input:checked + .xcw-switch { background: var(--xcw-accent); }
.xcw-menu-toggle input:checked + .xcw-switch::after { translate: 13px 0; }
.xcw-menu-toggle input:focus-visible + .xcw-switch {
    outline: 2px solid var(--xcw-accent);
    outline-offset: 2px;
}

/* presence dot shown next to the agent status (semantic colors, same for
   all templates) */
.xcw-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9e9e9e;
    flex: none;
    padding: 0;
}
.xcw-dot.xcw-online { background: #22c55e; }
.xcw-dot.xcw-away   { background: #ff9800; }
.xcw-dot.xcw-dnd    { background: #f44336; }
.xcw-dot.xcw-offline{ background: #9e9e9e; }

/* --- intro form ------------------------------------------------------- */
.xcw-intro {
    padding: 18px 16px;
    text-align: center;
    color: var(--xcw-text);
    overflow-y: auto;
}
.xcw-intro p { margin: 0 0 14px; }
.xcw-field { text-align: left; margin-bottom: 4px; }
.xcw-field label {
    display: block;
    font-size: 12px !important;
    color: var(--xcw-muted);
    margin: 8px 0 2px;
}
.xcw-req { color: var(--xcw-invalid-border); }
.xcw-field input {
    font-size:12px !important;
}
.xcw-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid var(--xcw-input-border);
    border-radius: var(--xcw-radius-input);
    font-size: 14px !important;
    font-family: inherit;
    background: var(--xcw-input-bg);
    color: var(--xcw-text);
    transition: border-color 0.15s ease;
}
.xcw-input:focus { border: 1px solid var(--xcw-accent); box-shadow: inset 0 0 8px rgb(var(--xcw-input-bg), 0.18); }
.xcw-input.xcw-invalid {
    border-color: var(--xcw-invalid-border);
    background: var(--xcw-invalid-bg);
}

.xcw-btn {
    background: var(--xcw-accent);
    color: var(--xcw-accent-text);
    border: none !important;
    border-radius: var(--xcw-radius-btn);
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-family: inherit;
    cursor: pointer;
    width: 100%;
    margin-top: 8px;
    transition: background 0.2s ease;
}
.xcw-btn:hover { background: var(--xcw-accent-hover) !important; }
.xcw-btn:disabled {
    background: var(--xcw-accent-disabled) !important;
    cursor: default;
}

/* visible keyboard focus on every interactive element */
.xcw-btn:focus-visible,
.xcw-launch:focus-visible,
.xcw-cbtn:focus-visible,
.xcw-iconbtn:focus-visible,
.xcw-menu-item:focus-visible {
    outline: 2px solid var(--xcw-accent);
    outline-offset: 2px;
}
.xcw-iconbtn:focus-visible,
.xcw-close:focus-visible {
    outline: 2px solid var(--xcw-header-color);
    outline-offset: 2px;
}

/* --- motion: press feedback + message entry ------------------------------- */

/* every click gets an immediate tactile response */
.xcw-launch,
.xcw-send,
.xcw-cbtn,
.xcw-iconbtn,
.xcw-close,
.xcw-emoji,
.xcw-btn {
    transition-property: background, color, opacity, scale;
    transition-duration: 0.15s;
    transition-timing-function: ease-out;
}
.xcw-launch:active,
.xcw-send:active,
.xcw-cbtn:active,
.xcw-iconbtn:active,
.xcw-close:active,
.xcw-emoji:active,
.xcw-btn:active {
    scale: 0.9;
}

/* new messages, system notes and the typing indicator pop in */
@keyframes xcw-msg-in {
    from { opacity: 0; translate: 0 8px; }
    to   { opacity: 1; translate: 0 0; }
}
.xcw-row,
.xcw-msg.xcw-sys,
.xcw-typing {
    animation: xcw-msg-in 0.22s ease-out;
}

/* respect the user's motion preference */
@media (prefers-reduced-motion: reduce) {
    .xcw-root * {
        transition: none !important;
        animation: none !important;
    }
    /* keep instant display toggles without the discrete-transition wait */
    .xcw-panel,
    .xcw-menu,
    .xcw-emoji-pop {
        transition: none !important;
    }
}

/* --- message log: avatar rows, bordered agent bubbles, grey own ------- */
.xcw-log {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    background: var(--xcw-log-bg);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.xcw-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 92%;
}
.xcw-row-them { align-self: flex-start; }
.xcw-row-me { align-self: flex-end; }

.xcw-msg-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    flex: none;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}
.xcw-row-them .xcw-msg-avatar { background: var(--xcw-avatar-them-bg); }
.xcw-row-me .xcw-msg-avatar { background: var(--xcw-avatar-me-bg); }
.xcw-msg-avatar svg {min-width: 15px; width: 15px; height: 15px; display: block; }
.xcw-msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.xcw-msg {
    padding: 9px 13px;
    border-radius: var(--xcw-radius-bubble);
    line-height: 1.45;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.xcw-msg.xcw-them {
    background: var(--xcw-bubble-them-bg);
    color: var(--xcw-bubble-them-color);
    border: 1px solid var(--xcw-bubble-them-border);
}
.xcw-msg.xcw-me {
    background: var(--xcw-bubble-me-bg);
    color: var(--xcw-bubble-me-color);
}
.xcw-msg.xcw-sys {
    align-self: center;
    background: none;
    color: var(--xcw-muted);
    font-size: 11px !important;
    max-width: 95%;
    text-align: center;
    padding: 2px 8px;
}

/* bubble column: bubble + relative age label underneath */
.xcw-bubble-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}
.xcw-row-me .xcw-bubble-col { align-items: flex-end; }
.xcw-row-them .xcw-bubble-col { align-items: flex-start; }

/* inline locale time inside the bubble; full date+time is on its title */
.xcw-msg-time {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px !important;
    line-height: 1;
    opacity: 0.6;
    white-space: nowrap;
    user-select: none;
}

/* live relative age ("2 hours ago") under the bubble */
.xcw-msg-age {
    font-size: 10px !important;
    line-height: 1.2;
    color: var(--xcw-muted);
    padding: 0 6px;
    user-select: none;
}

/* centered day pill between calendar days */
.xcw-day-sep {
    align-self: center;
    font-size: 11px !important;
    color: var(--xcw-muted);
    padding: 2px 10px;
    margin: 2px 0;
    user-select: none;
}

/* --- rich content inside bubbles: links, images, files, previews ------- */
.xcw-msg a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-all;
}
.xcw-msg a:hover { opacity: 0.8; }
.xcw-msg a:focus-visible {
    outline: 2px solid var(--xcw-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* inline image with hover/focus action toolbar */
.xcw-msg-img {
    position: relative;
    display: block;
    margin-top: 6px;
    width: fit-content;
    max-width: 100%;
    border-radius: 10px;
}
.xcw-msg-img img {
    display: block;
    max-width: 220px;
    max-height: 220px;
    width: auto;
    height: auto;
    border-radius: 10px;
}
.xcw-msg-img-tools {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.68);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    backdrop-filter: blur(6px);
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 0.18s ease, translate 0.18s ease;
}
/* keyboard users reach the buttons via Tab: reveal them on focus-within */
.xcw-msg-img:hover .xcw-msg-img-tools,
.xcw-msg-img:focus-within .xcw-msg-img-tools {
    opacity: 1;
    translate: 0 0;
}
/* buttons are <a> inside .xcw-msg: beat the generic ".xcw-msg a" color and
   hover rules with a more specific selector, or icons inherit bubble color */
.xcw-msg a.xcw-msg-img-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease;
}
.xcw-msg a.xcw-msg-img-btn:hover { background: rgba(255, 255, 255, 0.18); opacity: 1; }
.xcw-msg a.xcw-msg-img-btn:active { background: rgba(255, 255, 255, 0.28); }
.xcw-msg a.xcw-msg-img-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
}
.xcw-msg-img-btn svg {min-width: 16px; width: 16px; height: 16px; display: block; }

/* file download card */
.xcw-file {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding: 8px 11px;
    border: 1px solid var(--xcw-bubble-them-border);
    border-radius: 10px;
    background: var(--xcw-panel-bg);
    color: var(--xcw-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.xcw-file:hover { background: var(--xcw-composer-bg); opacity: 1; }
.xcw-file-icon {
    flex: none;
    width: 22px;
    height: 22px;
    color: var(--xcw-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.xcw-file-icon svg {min-width: 22px; width: 22px; height: 22px; display: block; }
.xcw-file-name {
    font-size: 12.5px !important;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}

/* web link preview card (favicon + host + path) */
.xcw-linkprev {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 6px;
    padding: 8px 11px;
    border: 1px solid var(--xcw-bubble-them-border);
    border-radius: 10px;
    background: var(--xcw-panel-bg);
    color: var(--xcw-text);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
}
.xcw-linkprev:hover { background: var(--xcw-composer-bg); opacity: 1; }
.xcw-linkprev-fav {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 4px;
}
.xcw-linkprev-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.xcw-linkprev-host {
    font-size: 12.5px !important;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.xcw-linkprev-path {
    font-size: 11px !important;
    color: var(--xcw-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}


/* typing indicator (added/removed dynamically): animated three-dot bubble,
   styled like an incoming agent bubble; the translated label is exposed to
   screen readers via role="status" + aria-label on the container */
.xcw-typing {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--xcw-bubble-them-bg);
    border: 1px solid var(--xcw-bubble-them-border);
    color: var(--xcw-muted);
    padding: 13px 15px;
    border-radius: var(--xcw-radius-bubble);
}
.xcw-typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: xcw-typing-bounce 1.2s infinite ease-in-out;
}
.xcw-typing-dot:nth-child(2) { animation-delay: 0.15s; }
.xcw-typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes xcw-typing-bounce {
    0%, 60%, 100% { translate: 0 0; opacity: 0.45; }
    30% { translate: 0 -4px; opacity: 1; }
}

/* --- composer: grey pill input + circular accent send ------------------ */
.xcw-composer {
    display: flex;
    gap: 4px;
    padding: 8px 14px 0 8px;
    background: var(--xcw-panel-bg);
    align-items: center;
}
.xcw-composer .xcw-input {
    flex: 1;
    border: none;
    border-radius: 22px;
    background: var(--xcw-composer-bg);
    padding: 8px 16px;
    min-width: 0;
}
.xcw-composer .xcw-input:focus { outline: 2px solid var(--xcw-accent); }

/* composer icon buttons (emoji, attachment) */
.xcw-cbtn {
    min-width: 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: none;
    color: var(--xcw-muted);
    cursor: pointer;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.xcw-cbtn:hover { background: var(--xcw-composer-bg); color: var(--xcw-text); }
.xcw-cbtn svg {min-width: 19px; width: 19px; height: 19px; display: block; }
.xcw-cbtn:disabled { opacity: 0.45; cursor: not-allowed; }

.xcw-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 0;
    margin: 0;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.xcw-send svg {min-width: 17px; width: 17px; height: 17px; display: block; }

/* emoji picker popover above the composer - rises from the bottom-left */
.xcw-emoji-pop {
    position: absolute;
    bottom: 64px;
    left: 10px;
    right: 10px;
    background: var(--xcw-panel-bg);
    border: 1px solid var(--xcw-panel-border);
    border-radius: 12px;
    box-shadow: var(--xcw-shadow);
    padding: 8px;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    z-index: 10;
    display: none;
    /* closed/exit state */
    opacity: 0;
    translate: 0 10px;
    transform-origin: bottom left;
    transition:
        display 0.18s,
        opacity 0.18s ease-out,
        translate 0.18s ease-out;
    transition-behavior: allow-discrete;
}
.xcw-emoji-pop.xcw-open {
    display: grid;
    opacity: 1;
    translate: 0 0;
}
@starting-style {
    .xcw-emoji-pop.xcw-open {
        opacity: 0;
        translate: 0 10px;
    }
}
.xcw-emoji {
    background: none;
    border: none;
    font-size: 18px !important;
    line-height: 1;
    padding: 5px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}
.xcw-emoji:hover { background: var(--xcw-composer-bg); }

/* --- in-app modal (privacy/GDPR) - fades in, card slides up --------------- */
.xcw-modal {
    position: absolute;
    inset: 0;
    background: rgba(15, 20, 32, 0.45);
    display: none;
    align-items: flex-end;
    z-index: 20;
    /* closed/exit state */
    opacity: 0;
    transition: display 0.2s, opacity 0.2s ease-out;
    transition-behavior: allow-discrete;
}
.xcw-modal.xcw-open {
    display: flex;
    opacity: 1;
}
@starting-style {
    .xcw-modal.xcw-open { opacity: 0; }
}
.xcw-modal-card {
    background: var(--xcw-panel-bg);
    color: var(--xcw-text);
    border-radius: var(--xcw-radius-panel) var(--xcw-radius-panel) 0 0;
    width: 100%;
    max-height: 75%;
    display: flex;
    flex-direction: column;
    translate: 0 24px;
    transition: translate 0.22s ease-out;
}
.xcw-modal.xcw-open .xcw-modal-card { translate: 0 0; }
@starting-style {
    .xcw-modal.xcw-open .xcw-modal-card { translate: 0 24px; }
}
.xcw-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}
.xcw-modal-title { font-weight: bold; font-size: 15px !important; }
.xcw-modal-head .xcw-close {
    color: var(--xcw-muted);
    margin: -8px -8px -8px 0;
}
.xcw-modal-body {
    padding: 0 16px 18px;
    font-size: 13px !important; 
    line-height: 1.55;
    overflow-y: auto;
}
.xcw-modal-body a { color: var(--xcw-accent) !important; }

/* --- agent profile modal (vCard) -------------------------------------- */
.xcw-agent-head { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.xcw-agent-photo {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}
.xcw-agent-name { font-weight: bold; font-size: 14px !important; }
.xcw-agent-nick { color: var(--xcw-muted); font-size: 12px !important; }
.xcw-agent-desc { margin: 0 0 10px; }
.xcw-agent-row { display: flex; gap: 8px; padding: 2px 0; font-size: 13px !important; }
.xcw-agent-label { color: var(--xcw-muted); flex: none; min-width: 90px; }
.xcw-agent-value { word-break: break-word; }

/* --- "Powered by" footer ---------------------------------------------- */
.xcw-poweredby {
    text-align: center;
    line-height: 3;
    font-size: 11px !important;
    color: var(--xcw-muted);
    background: var(--xcw-panel-bg);
}
.xcw-poweredby a { color: inherit; line-height: 3; text-decoration:underline; font-size: 11px !important; }

/* --- offline message box (agent unavailable) ------------------------------ */
.xcw-offlinebox {
    padding: 14px;
    overflow-y: auto;
    background: var(--xcw-panel-bg);
}
.xcw-offline-notice {
    background: var(--xcw-notice-bg);
    color: var(--xcw-notice-color);
    border: 1px solid var(--xcw-notice-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 10px;
    font-size: 13px !important;
    line-height: 1.4;
}
.xcw-offline-title {
    font-weight: bold;
    margin-bottom: 4px;
}
.xcw-confirm {
    background: var(--xcw-confirm-bg);
    color: var(--xcw-confirm-color);
    border: 1px solid var(--xcw-confirm-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-top: 10px;
    font-size: 13px !important;
}
.xcw-textarea {
    min-height: 72px;
    resize: vertical;
    font-family: inherit;
}

/* connection-down state: inputs and button are disabled and greyed out.
   The widget toggles .xcw-down on the composer. */
.xcw-composer.xcw-down .xcw-input,
.xcw-composer.xcw-down .xcw-send,
.xcw-composer.xcw-down .xcw-cbtn {
    opacity: 0.45;
}
.xcw-composer.xcw-down .xcw-send {
    background: var(--xcw-down-bg);
    cursor: not-allowed;
}
.xcw-send:disabled,
.xcw-input:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ======================================================================
   Templates - each block only overrides the variables of .xcw-root
   (plus an occasional small tweak). Selected via the `template` option.
   ====================================================================== */

/* --- classic: the default look (dark navy header, indigo accent) -------- */
/* uses the variables defined on .xcw-root above - nothing to override */

/* --- dark: OLED dark mode, deep blacks, indigo neon accent -------------- */
.xcw-root.xcw-tpl-dark {
    --xcw-accent: #818cf8;
    --xcw-accent-hover: #6366f1;
    --xcw-accent-disabled: #3f3f56;
    --xcw-accent-text: #0a0e27;
    --xcw-panel-bg: #121212;
    --xcw-panel-border: #26262e;
    --xcw-header-bg: #000000;
    --xcw-header-color: #ffffff;
    --xcw-header-status: #8b8b95;
    --xcw-log-bg: #0a0a0a;
    --xcw-text: #f4f4f5;
    --xcw-muted: #8b8b95;
    --xcw-input-bg: #1c1c22;
    --xcw-input-border: #3a3a44;
    --xcw-composer-bg: #1c1c22;
    --xcw-bubble-me-bg: #26262e;
    --xcw-bubble-me-color: #f4f4f5;
    --xcw-bubble-them-bg: #1c1c22;
    --xcw-bubble-them-color: #f4f4f5;
    --xcw-bubble-them-border: #2e2e38;
    --xcw-avatar-them-bg: #818cf8;
    --xcw-avatar-me-bg: #3a3a44;
    --xcw-notice-bg: #2b2513;
    --xcw-notice-color: #fbbf24;
    --xcw-notice-border: #453a1e;
    --xcw-confirm-bg: #12291f;
    --xcw-confirm-color: #6ee7b7;
    --xcw-confirm-border: #1e4232;
    --xcw-invalid-bg: #2e1a1a;
    --xcw-down-bg: #52525b;
    --xcw-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
}

/* --- mint: deep teal header, fresh green accents ------------------------ */
.xcw-root.xcw-tpl-mint {
    --xcw-accent: #0f766e; /* 5.5:1 with white button text */
    --xcw-accent-hover: #0b6b63;
    --xcw-accent-disabled: #8cc4be;
    --xcw-header-bg: #073f3a;
    --xcw-header-status: #8fb8b3;
    --xcw-panel-border: #d9ece9;
    --xcw-text: #134040;
    --xcw-bubble-them-border: #dcebe9;
    --xcw-avatar-them-bg: #0d9488;
}

/* --- dusk: deep plum header, warm amber accent, cream body ---------------- */
.xcw-root.xcw-tpl-dusk {
    --xcw-accent: #b45309; /* 4.8:1 with white button text */
    --xcw-accent-hover: #92400e;
    --xcw-accent-disabled: #dfc49a;
    --xcw-header-bg: #2d1b3d;
    --xcw-header-status: #c9b8dd;
    --xcw-panel-border: #ece0f5;
    --xcw-log-bg: #fdf9f1;
    --xcw-text: #2f2033;
    --xcw-muted: #6f6478;
    --xcw-composer-bg: #f6ead9;
    --xcw-bubble-me-bg: #f6ead9;
    --xcw-bubble-me-color: #2f2033;
    --xcw-bubble-them-border: #ece0f5;
    --xcw-avatar-them-bg: #d97706;
    /* red badge would vanish on the amber launcher: invert it */
    --xcw-badge-bg: #ffffff;
    --xcw-badge-color: #b45309;
}

/* --- minimal: Swiss style, black & white, sharp, hairline borders ------- */
.xcw-root.xcw-tpl-minimal {
    --xcw-font: 'Helvetica Neue', Arial, sans-serif;
    --xcw-accent: #111111;
    --xcw-accent-hover: #333333;
    --xcw-accent-disabled: #b5b5b5;
    --xcw-panel-border: #111111;
    --xcw-header-bg: #111111;
    --xcw-header-status: #bbbbbb;
    --xcw-text: #111111;
    --xcw-muted: #555555;
    --xcw-input-border: #111111;
    --xcw-composer-bg: #f4f4f4;
    --xcw-bubble-me-bg: #f4f4f4;
    --xcw-bubble-them-border: #111111;
    --xcw-avatar-them-bg: #111111;
    --xcw-avatar-me-bg: #111111;
    --xcw-radius-panel: 0;
    --xcw-radius-bubble: 0;
    --xcw-radius-input: 0;
    --xcw-radius-btn: 0;
    --xcw-shadow: 6px 6px 0 rgba(0, 0, 0, 0.9);
}
.xcw-root.xcw-tpl-minimal .xcw-composer .xcw-input { border-radius: 0; }
.xcw-root.xcw-tpl-minimal .xcw-send { border-radius: 0; }
.xcw-root.xcw-tpl-minimal .xcw-launch { border-radius: 0; }
.xcw-root.xcw-tpl-minimal .xcw-cbtn { border-radius: 0; }

/* --- violet: purple header and accents (AI-assistant look) ---------------- */
.xcw-root.xcw-tpl-violet {
    --xcw-accent: #6c5ce7;
    --xcw-accent-hover: #5a4bd1;
    --xcw-accent-disabled: #b6aef2;
    --xcw-header-bg: #4a3fb8;
    --xcw-header-status: #cfcaf3; /* 5.0:1 on the violet header */
    --xcw-panel-border: #e2dff8;
    --xcw-log-bg: #f7f6ff;
    --xcw-text: #241d4d;
    --xcw-muted: #6f6a94;
    --xcw-composer-bg: #efedfb;
    --xcw-bubble-me-bg: #efedfb;
    --xcw-bubble-me-color: #241d4d;
    --xcw-bubble-them-border: #e2dff8;
}

/* --- blue: deep navy header, royal blue accents (SaaS/trust look) -------- */
.xcw-root.xcw-tpl-blue {
    --xcw-accent: #1d4ed8; /* 6.7:1 with white button text */
    --xcw-accent-hover: #1e40af;
    --xcw-accent-disabled: #9db9f0;
    --xcw-header-bg: #172554;
    --xcw-header-status: #a5b8e8;
    --xcw-panel-border: #dbe4f7;
    --xcw-log-bg: #f5f8ff;
    --xcw-text: #17223f;
    --xcw-muted: #5b6b8c;
    --xcw-composer-bg: #eaf0fc;
    --xcw-bubble-me-bg: #eaf0fc;
    --xcw-bubble-me-color: #17223f;
    --xcw-bubble-them-border: #dbe4f7;
    --xcw-avatar-them-bg: #3b82f6;
}

/* --- ember: near-black maroon header, fiery crimson accent, white body ---- */
.xcw-root.xcw-tpl-ember {
    --xcw-accent: #dc2626; /* 4.6:1 with white button text */
    --xcw-accent-hover: #b91c1c;
    --xcw-accent-disabled: #e8a3a3;
    --xcw-header-bg: #1c0a0a;
    --xcw-header-status: #dba9a9;
    --xcw-panel-border: #e9dbdb;
    --xcw-text: #1f1512;
    --xcw-muted: #7d6a66;
    --xcw-composer-bg: #f3efed;
    --xcw-bubble-me-bg: #f3efed;
    --xcw-bubble-me-color: #1f1512;
    --xcw-bubble-them-border: #e9dbdb;
    --xcw-avatar-them-bg: #ef4444;
    /* the default red badge would vanish on the crimson launcher: invert it */
    --xcw-badge-bg: #ffffff;
    --xcw-badge-color: #dc2626;
}

/* --- rose: deep raspberry header, vivid pink accent, blush body ----------- */
.xcw-root.xcw-tpl-rose {
    --xcw-accent: #be185d; /* 6.0:1 with white button text */
    --xcw-accent-hover: #9d174d;
    --xcw-accent-disabled: #eda6c6;
    --xcw-header-bg: #500724;
    --xcw-header-status: #ecb1cd;
    --xcw-panel-border: #f6dce8;
    --xcw-log-bg: #fdf5f9;
    --xcw-text: #41182b;
    --xcw-muted: #8f6379;
    --xcw-composer-bg: #fae8f1;
    --xcw-bubble-me-bg: #fae8f1;
    --xcw-bubble-me-color: #41182b;
    --xcw-bubble-them-border: #f6dce8;
    --xcw-avatar-them-bg: #ec4899;
    /* same reason as ember: keep the badge readable on the pink launcher */
    --xcw-badge-bg: #ffffff;
    --xcw-badge-color: #be185d;
}

/* --- honey: deep brown header, yellow accent with DARK text, cream body --- */
.xcw-root.xcw-tpl-honey {
    --xcw-accent: #facc15;
    --xcw-accent-text: #2e1f05; /* 10.9:1 on the yellow accent */
    --xcw-accent-hover: #eab308;
    --xcw-accent-disabled: #f3e3a2;
    --xcw-header-bg: #422006;
    --xcw-header-status: #e8d29a;
    --xcw-panel-border: #f0e3c0;
    --xcw-log-bg: #fffbeb;
    --xcw-text: #3f2d0b;
    --xcw-muted: #85713f;
    --xcw-composer-bg: #fdf0c8;
    --xcw-bubble-me-bg: #fdf0c8;
    --xcw-bubble-me-color: #3f2d0b;
    --xcw-bubble-them-border: #f0e3c0;
    --xcw-avatar-them-bg: #eab308;
}

/* --- citrus: burnt orange header and accent, peach body -------------------- */
.xcw-root.xcw-tpl-citrus {
    --xcw-accent: #c2410c; /* 5.0:1 with white button text */
    --xcw-accent-hover: #9a3412;
    --xcw-accent-disabled: #eab493;
    --xcw-header-bg: #431407;
    --xcw-header-status: #f0c4a8;
    --xcw-panel-border: #f3e0cf;
    --xcw-log-bg: #fff7ed;
    --xcw-text: #3d2312;
    --xcw-muted: #8c6a52;
    --xcw-composer-bg: #fdebd9;
    --xcw-bubble-me-bg: #fdebd9;
    --xcw-bubble-me-color: #3d2312;
    --xcw-bubble-them-border: #f3e0cf;
    --xcw-avatar-them-bg: #ea580c;
    /* red badge on the orange launcher reads weakly: invert it */
    --xcw-badge-bg: #ffffff;
    --xcw-badge-color: #c2410c;
}

/* --- premium: warm near-black (stone) + gold accent, gradient own bubbles -- */
.xcw-root.xcw-tpl-premium {
    --xcw-accent: #ca8a04;
    --xcw-accent-hover: #a16207;
    --xcw-accent-disabled: #57534e;
    --xcw-accent-text: #1c1917; /* 5.9:1 on the gold accent */
    /* white digits would vanish on the gold launcher: invert the badge */
    --xcw-badge-bg: #fafaf9;
    --xcw-badge-color: #92400e;
    --xcw-panel-bg: #1c1917;
    --xcw-panel-border: #292524;
    --xcw-header-bg: #0c0a09;
    --xcw-header-color: #fafaf9;
    --xcw-header-status: #a8a29e; /* 6.5:1 on the header */
    --xcw-log-bg: #121010;
    --xcw-text: #fafaf9;
    --xcw-muted: #a8a29e;
    --xcw-input-bg: #292524;
    --xcw-input-border: #44403c;
    --xcw-composer-bg: #292524;
    --xcw-bubble-me-bg: #a16207; /* fallback under the gradient below */
    --xcw-bubble-me-color: #fff7ed; /* 5.4:1 on the gradient's dark stop */
    --xcw-bubble-them-bg: #292524;
    --xcw-bubble-them-color: #fafaf9;
    --xcw-bubble-them-border: #3a3533;
    --xcw-avatar-them-bg: #ca8a04;
    --xcw-avatar-me-bg: #44403c;
    --xcw-notice-bg: #2b2513;
    --xcw-notice-color: #fbbf24;
    --xcw-notice-border: #453a1e;
    --xcw-confirm-bg: #12291f;
    --xcw-confirm-color: #6ee7b7;
    --xcw-confirm-border: #1e4232;
    --xcw-invalid-bg: #2e1a1a;
    --xcw-down-bg: #57534e;
    --xcw-radius-panel: 22px;
    --xcw-radius-bubble: 16px;
    --xcw-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
    color-scheme: dark;
}
/* the gold gradient is what makes it "premium": own bubbles, launcher, send */
.xcw-root.xcw-tpl-premium .xcw-msg.xcw-me {
    background-image: linear-gradient(135deg, #ca8a04, #92400e);
}
.xcw-root.xcw-tpl-premium .xcw-launch,
.xcw-root.xcw-tpl-premium .xcw-send {
    background-image: linear-gradient(135deg, #eab308, #a16207);
}
.xcw-root.xcw-tpl-premium .xcw-launch:hover,
.xcw-root.xcw-tpl-premium .xcw-send:hover {
    background-image: linear-gradient(135deg, #facc15, #b45309);
}
/* connection-down state must drop the gradient or it would look active */
.xcw-root.xcw-tpl-premium .xcw-composer.xcw-down .xcw-send {
    background-image: none;
}

/* --- silk: light iOS-style premium - soft lavender bubbles, white cards ----
   Inspired by a light mobile chat UI: periwinkle outgoing bubbles with an
   asymmetric corner, white incoming cards on a cool grey canvas, pill-shaped
   system chips, and a light header with an accent-colored status line. */
.xcw-root.xcw-tpl-silk {
    --xcw-accent: #5a60d6; /* 5.2:1 with white button text/icons */
    --xcw-accent-hover: #4a50c4;
    --xcw-accent-disabled: #c9cbef;
    --xcw-accent-text: #ffffff;
    --xcw-panel-bg: #fbfbfe;
    --xcw-panel-border: #ececf5;
    --xcw-header-bg: #ffffff;
    --xcw-header-color: #1b1b33;
    --xcw-header-status: #5a60d6; /* accent status line, like "online" in the ref */
    --xcw-log-bg: #f4f4fa;
    --xcw-text: #23233a;
    --xcw-muted: #6e7191; /* 4.6:1 on the log canvas */
    --xcw-input-bg: #ffffff;
    --xcw-input-border: #e2e2f0;
    --xcw-composer-bg: #efeff7;
    --xcw-bubble-me-bg: #d3d6f7;
    --xcw-bubble-me-color: #232552; /* 9.5:1 on the lavender bubble */
    --xcw-bubble-them-bg: #ffffff;
    --xcw-bubble-them-color: #23233a;
    --xcw-bubble-them-border: #ececf5;
    --xcw-avatar-them-bg: #8a90e8;
    --xcw-avatar-me-bg: #c9cbef;
    --xcw-notice-bg: #eeeffb;
    --xcw-notice-color: #3c3f8a;
    --xcw-notice-border: #dcdff6;
    --xcw-down-bg: #c9cbef;
    --xcw-radius-panel: 24px;
    --xcw-radius-bubble: 18px;
    --xcw-shadow: 0 16px 44px rgba(35, 35, 70, 0.16);
}
/* asymmetric "tail" corners: small radius on the sender's side */
.xcw-root.xcw-tpl-silk .xcw-msg.xcw-me { border-radius: 18px 18px 6px 18px; }
.xcw-root.xcw-tpl-silk .xcw-msg.xcw-them {
    border-radius: 18px 18px 18px 6px;
    box-shadow: 0 1px 2px rgba(35, 35, 70, 0.06);
}
/* system notes (day separators, join notices) as dark pill chips */
.xcw-root.xcw-tpl-silk .xcw-msg.xcw-sys {
    background: rgba(27, 27, 51, 0.6);
    color: #ffffff;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
}
/* typing indicator mirrors the incoming card shape */
.xcw-root.xcw-tpl-silk .xcw-typing { border-radius: 18px 18px 18px 6px; }

/* --- template tweaks for the day separators ------------------------------- */
/* premium: bordered slate pill matching its stone palette */
.xcw-root.xcw-tpl-premium .xcw-day-sep {
    background: rgba(41, 37, 36, 0.9);
    border: 1px solid #44403c;
    border-radius: 999px;
    padding: 3px 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
/* silk: same dark chip as its system notes */
.xcw-root.xcw-tpl-silk .xcw-day-sep {
    background: rgba(27, 27, 51, 0.6);
    color: #ffffff;
    border-radius: 999px;
    padding: 4px 12px;
    font-weight: 600;
}