/* Chat plugin: floating contact button, channel menu and live chat panel. */
.ch-root {
    --ch-text: var(--color-theme-text, var(--theme-text, #18181b));
    --ch-muted: var(--color-theme-muted, var(--theme-text-muted, #71717a));
    --ch-border: var(--color-theme-border, var(--theme-border, #e4e4e7));
    --ch-surface: var(--color-theme-surface, var(--theme-surface, #fff));
    position: fixed; z-index: 70; right: 1.25rem; bottom: 1.25rem;
    display: flex; flex-direction: column; align-items: flex-end; gap: .75rem;
    color: var(--ch-text); font-size: .875rem;
}
.ch-root *, .ch-root *::before, .ch-root *::after { box-sizing: border-box; }
.ch-root [x-cloak] { display: none !important; }
.ch-left { right: auto; left: 1.25rem; align-items: flex-start; }
body.has-compare-bar .ch-root { bottom: 6.5rem; }
@media (max-width: 767px) { .ch-no-mobile { display: none; } }
@media (min-width: 768px) { .ch-no-desktop { display: none; } }

.ch-button { position: relative; display: flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border: 0; border-radius: 999px; background: var(--ch-color); color: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .25); cursor: pointer; transition: transform .15s; }
.ch-button:hover { transform: scale(1.05); }
.ch-button:focus-visible { outline: 3px solid var(--ch-color); outline-offset: 3px; }
.ch-button svg { width: 1.6rem; height: 1.6rem; }
.ch-unread { position: absolute; top: .2rem; right: .2rem; width: .8rem; height: .8rem; border: 2px solid #fff; border-radius: 999px; background: #dc2626; }

.ch-menu { width: 16rem; border: 1px solid var(--ch-border); border-radius: 1rem; background: var(--ch-surface); padding: .75rem; box-shadow: 0 20px 40px rgba(0, 0, 0, .18); display: grid; gap: .375rem; }
.ch-menu-title { margin: 0 0 .25rem; font-weight: 700; }
.ch-offline { margin: 0 0 .25rem; color: var(--ch-muted); font-size: .8125rem; }
.ch-channel { display: flex; align-items: center; gap: .625rem; width: 100%; border: 1px solid var(--ch-border); border-radius: .75rem; background: transparent; padding: .625rem .75rem; color: var(--ch-text); font: inherit; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; }
.ch-channel:hover { border-color: var(--ch-color); }
.ch-dot { width: 1.25rem; text-align: center; }

.ch-panel { position: relative; width: min(22rem, calc(100vw - 2.5rem)); height: min(32rem, calc(100vh - 7rem)); border: 1px solid var(--ch-border); border-radius: 1rem; background: var(--ch-surface); box-shadow: 0 20px 40px rgba(0, 0, 0, .2); overflow: hidden; }
.ch-panel > div, .ch-live-inner { height: 100%; display: flex; flex-direction: column; }
.ch-panel-close { position: absolute; top: .5rem; right: .5rem; width: 2rem; height: 2rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .2); color: #fff; font-size: 1.25rem; cursor: pointer; }
.ch-live-head { display: flex; flex-direction: column; gap: .125rem; padding: .875rem 3rem .875rem 1rem; background: var(--ch-color); color: #fff; }
.ch-status { font-size: .75rem; opacity: .85; }
.ch-status.is-online::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .375rem; border-radius: 999px; background: #bbf7d0; }
.ch-messages { flex: 1; overflow-y: auto; padding: .875rem; display: flex; flex-direction: column; gap: .5rem; }
.ch-msg { max-width: 85%; border-radius: .875rem; padding: .5rem .75rem; line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.ch-msg time { display: block; margin-top: .125rem; font-size: .6875rem; opacity: .6; }
.ch-msg-shop { align-self: flex-start; background: #f4f4f5; color: #18181b; }
.ch-msg-me { align-self: flex-end; background: var(--ch-color); color: #fff; }
.ch-typing { font-style: italic; opacity: .75; }
.ch-form { border-top: 1px solid var(--ch-border); padding: .625rem; display: grid; gap: .375rem; }
.ch-contact { display: grid; grid-template-columns: 1fr 1fr; gap: .375rem; }
.ch-send { display: flex; gap: .375rem; align-items: flex-end; }
.ch-input { width: 100%; min-width: 0; border: 1px solid var(--ch-border); border-radius: .625rem; background: var(--ch-surface); padding: .5rem .625rem; color: var(--ch-text); font: inherit; resize: none; }
.ch-input:focus { outline: 2px solid var(--ch-color); outline-offset: 1px; }
.ch-submit { flex: none; border: 0; border-radius: .625rem; background: var(--ch-color); padding: .5rem .875rem; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ch-error { margin: 0; color: #dc2626; font-size: .75rem; }
.ch-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }