/* Chat with the shop (js/chat-widget.js). Everything is under .pc-root so the site's own styles are not touched.
   The button sits above the 40px footer row of the pages ("Обратная связь" lives in its right corner).
   Layers of the site, bottom to top: the order bar 500, the chat 800, the mobile menu 1000, the cookie banner 1500,
   the modals (product, order, feedback) 2500, the photo viewer 3000. The chat must never sit above a modal. */
.pc-root { position: fixed; right: 20px; bottom: 56px; z-index: 800; font-family: 'Codec Pro', 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.45; color: #f5f5f5; }
.pc-root *, .pc-root *::before, .pc-root *::after { box-sizing: border-box; }
.pc-root [hidden] { display: none !important; }

/* While a modal, the photo viewer or the opened order list is on the screen, the chat steps aside: it is not drawn and cannot be
   focused, but it keeps its dialogue and opens again by itself when the other thing is closed. */
body:has(.tea-modal:not(.hidden), .feedback-modal:not(.hidden), .photo-lightbox:not(.hidden), .order-bar-panel:not(.hidden)) .pc-root { visibility: hidden; }

/* the round button, with a ring that keeps pulsing until the visitor has opened the chat once */
.pc-fab { position: relative; display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-left: auto; border: 0; border-radius: 50%; background: #e20505; color: #fff; cursor: pointer; box-shadow: 0 10px 28px rgba(226, 5, 5, 0.45); transition: transform .15s ease, background .15s ease; }
.pc-fab:hover { background: #ff2d2d; transform: scale(1.06); }
.pc-fab:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.pc-fab svg { width: 28px; height: 28px; }
.pc-fab.pc-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #e20505; animation: pc-ring 1.8s ease-out infinite; pointer-events: none; }
@keyframes pc-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.75); opacity: 0; } }
.pc-badge { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: #e20505; font-size: 12px; font-weight: 700; line-height: 22px; text-align: center; }

/* the first phrase over the button */
.pc-teaser { position: absolute; right: 0; bottom: 78px; width: 250px; padding: 12px 34px 12px 14px; border-radius: 16px 16px 4px 16px; background: #fff; color: #111; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); cursor: pointer; animation: pc-pop .35s ease-out; }
.pc-teaser-x { position: absolute; top: 6px; right: 8px; width: 22px; height: 22px; border: 0; background: transparent; color: #666; font-size: 18px; line-height: 20px; cursor: pointer; }
@keyframes pc-pop { from { transform: translateY(10px) scale(.96); opacity: 0; } to { transform: none; opacity: 1; } }

/* the panel grows out of the button and shrinks back into it (transform-origin is the button's corner) */
@keyframes pc-panel-in { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes pc-panel-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(16px) scale(.94); } }
.pc-panel { position: absolute; right: 0; bottom: 78px; width: 360px; max-width: calc(100vw - 24px); height: 520px; max-height: calc(100vh - 150px); display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px; background: #101010; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6); overflow: hidden; transform-origin: 100% 100%; animation: pc-panel-in .28s cubic-bezier(.2, .8, .2, 1); }
.pc-root.pc-closing .pc-panel { animation: pc-panel-out .22s ease-in forwards; }

/* on a phone, while the chat is open the order bar (css/catalog.css, css/guide.css) is not shown: it slides down out of the way,
   and when the chat closes it pops back up with a small spring. The rules are written with more weight than the bar's own.
   On a desktop the bar stays where it is. */
@media (max-width: 768px) {
    body.pc-chat-open .order-bar {
        transform: translate(-50%, calc(100% + 40px));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .25s ease-in, opacity .2s ease, visibility 0s .25s, bottom .25s ease, border-radius .25s ease;
    }
    body:not(.pc-chat-open) .order-bar {
        transition: transform .5s cubic-bezier(.34, 1.45, .64, 1), opacity .25s ease, visibility 0s, bottom .25s ease, border-radius .25s ease;
    }
}

/* the head is the handle: the panel is dragged by it (js/chat-widget.js) */
.pc-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #1a1a1a; border-bottom: 1px solid rgba(255, 255, 255, 0.1); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.pc-dragging .pc-head { cursor: grabbing; }
.pc-head-text { flex: 1; min-width: 0; }
.pc-title { font-weight: 700; font-size: 15px; }
.pc-x { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #ccc; font-size: 22px; line-height: 30px; cursor: pointer; }
.pc-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.pc-messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.pc-msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 14.5px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }
.pc-msg.pc-me { align-self: flex-end; background: #e20505; color: #fff; border-bottom-right-radius: 4px; }
.pc-msg.pc-shop { align-self: flex-start; background: #232323; color: #f2f2f2; border-bottom-left-radius: 4px; }
.pc-who { display: block; margin-bottom: 2px; font-size: 11px; color: #9a9a9a; }
.pc-status { min-height: 22px; padding: 0 14px 4px; font-size: 12.5px; color: #a8a8a8; }
.pc-status.pc-err { color: #ff8a8a; }

.pc-form { padding: 10px 12px 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); background: #151515; }
.pc-row { display: flex; gap: 8px; align-items: flex-end; }
.pc-input { flex: 1; min-height: 42px; max-height: 120px; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; background: #0b0b0b; color: #fff; font: inherit; resize: none; }
.pc-input:focus { outline: none; border-color: #e20505; }
.pc-send { width: 42px; height: 42px; border: 0; border-radius: 12px; background: #e20505; color: #fff; cursor: pointer; flex: none; }
.pc-send:hover { background: #ff2d2d; }
.pc-send:disabled { opacity: .45; cursor: default; }
.pc-send svg { width: 20px; height: 20px; }
.pc-note { margin: 6px 2px 0; font-size: 11px; color: #8c8c8c; }
/* the trap for robots: out of sight, out of the tab order */
.pc-trap { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 768px) {
    .pc-root { right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
    /* the panel takes the place of the button: otherwise the button lies over its send key and its note */
    .pc-root.pc-open .pc-fab { display: none; }
    /* the sheet fills the screen between the site's top bar (fixed: 58px, 52px on phones) and the bottom edge, so its head
       with the × is always in view. !important: the panel may carry inline position from a drag made on a wider window. */
    .pc-panel {
        position: fixed !important;
        top: calc(70px + env(safe-area-inset-top, 0px)) !important;
        right: 8px !important;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
        left: 8px !important;
        width: auto !important;
        height: auto !important;
        max-width: none !important;
        max-height: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .pc-fab.pc-pulse::after, .pc-teaser, .pc-panel { animation: none; }
    .pc-root.pc-closing .pc-panel { animation: none; opacity: 0; }
    .pc-fab { transition: none; }
    body:not(.pc-chat-open) .order-bar, body.pc-chat-open .order-bar { transition: none; }
}