/* livematrix widget re-skin for unateca.ru — same idea as WalvoilPRO's
   version but built against THIS site's actual tokens (set dynamically
   by theme.js): --primary-color (accent), --text-color/--main-text-color,
   --secondary-color (muted text), --footer-bg-rgb (a mode-independent
   dark surface — theme.js keeps it dark in both light and dark mode on
   purpose, which is exactly what a floating widget panel wants). No
   direct equivalent of WalvoilPRO's --border-color/--input-bg exists
   here, so those use the same rgba(255,255,255,.12-ish) values already
   used elsewhere on this site (e.g. .contact-toggle-switch's border).
   #08130a (near-black) is this site's own choice for text-on-accent,
   taken from the custom checkbox's checked state.
   Loaded after the vendor widget CSS; !important throughout since the
   vendor rules are Svelte-scoped (higher native specificity) and some
   Tailwind utility classes are reused across several different elements
   (message bubbles + input both use .tw-bg-white, etc). Scoped under
   #app so nothing leaks into the rest of the page. */

/* #app itself is the fixed-position stacking-context root the vendor
   markup nests everything under (it's already position:fixed via the
   tw-fixed class in the HTML). Elevating ONLY #app above this site's own
   nav/footer/modal layers is enough to fix "hidden behind other content" —
   and is deliberately NOT also forced onto #app .bubble / #app .msgbox
   individually. Those two default to z-index:999 vs z-index:auto in the
   vendor CSS, which is what keeps the launcher correctly on top of (or
   the panel correctly above) each other internally; giving them the same
   explicit value here made them compare by DOM order instead and broke
   click-through on the panel's own buttons. */
/* #app itself, confirmed via elementFromPoint during live debugging, does
   NOT stay invisibly sized to just the launcher — it shrink-wraps its
   normal-flow children (the launcher wrapper + a mystery near-empty "ok"
   placeholder div the vendor renders), which on this site's layout lands
   as a real rectangle (e.g. 336x574px near the top-left) sitting on top
   of actual page content — real buttons/tiles underneath were unclickable
   because #app, not anything visible, was catching the click.
   Fix: make #app click-through by default, and explicitly whitelist only
   the pieces that actually need to be interactive. `.bubble` is NOT
   listed here on purpose — it already manages its own pointer-events via
   inline style in livematrix-drag.js (auto closed / none while the panel
   is open), and that explicit per-element value always wins over
   whatever it would otherwise inherit from #app, so leaving it out here
   doesn't disable it. */
#app {
    z-index: 2147483000 !important;
    pointer-events: none !important;
}
#app .msgbox {
    pointer-events: auto !important;
}

/* --- Launcher bubble --- */
#app .bubble {
    width: 64px !important;
    height: 64px !important;
    /* Accent color at ~78% opacity, with a blur behind it so it still
       reads clearly over busy page backgrounds instead of just looking
       washed out. color-mix() keeps this working with whatever
       --primary-color the active theme sets, rather than hardcoding one
       color's rgba() value. */
    background: color-mix(in srgb, var(--primary-color, #20d21a) 78%, transparent) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-radius: 50% !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.35) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
    cursor: grab !important;
}
#app .bubble:active {
    cursor: grabbing !important;
}

/* Open-panel drag handle (the "chat with me" title cell) */
#app .msgbox .tw-col-start-2.tw-col-span-3 {
    cursor: grab !important;
}
#app .msgbox .tw-col-start-2.tw-col-span-3:active {
    cursor: grabbing !important;
}

/* Close button ("x") — restyled to match this site's own .close-btn, used
   in the inquiry/basket dropdown menus (see main.css). The vendor gives
   this div no class of its own, so it's targeted structurally (last cell
   of the header's grid row) rather than by class. Position is left as
   `static` (unlike main.css's `.close-btn`, which is absolutely
   positioned in a corner) since this one already sits correctly via the
   header's own grid layout. */
#app .msgbox .tw-grid.tw-grid-cols-5 > div:last-child {
    background: rgba(255, 255, 255, 0.08) !important;
    color: white !important;
    font-size: 18px !important;
    cursor: pointer !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    line-height: 0 !important;
    -webkit-backdrop-filter: blur(25px) !important;
    backdrop-filter: blur(25px) !important;
    border-top: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    border-bottom: 4px solid rgba(255, 255, 255, 0.2) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    justify-self: end !important;
}
#app .msgbox .tw-grid.tw-grid-cols-5 > div:last-child:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: var(--primary-color, #20d21a) !important;
    transform: rotate(90deg) translateY(-2px) !important;
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.18) !important;
}
#app .bubble:hover {
    transform: scale(1.06);
    box-shadow: 0 14px 38px rgba(0,0,0,.45) !important;
}
#app .bubble img {
    width: 28px !important;
    height: 28px !important;
    /* brightness(0) keeps the icon itself solid black (as before); the
       chained drop-shadow(s) add a soft accent-color glow radiating out
       from behind it — drop-shadow follows the icon's actual alpha shape
       (unlike box-shadow, which would just glow the img's rectangular
       box), so it reads as a halo around the glyph itself. Two layered
       passes (tight + wide) give a softer falloff than one alone. */
    filter:
        brightness(0)
        drop-shadow(0 0 4px var(--primary-color, #20d21a))
        drop-shadow(0 0 10px var(--primary-color, #20d21a));
}

/* --- Chat panel: mode-independent dark glass, matching the site's own
   "underground level" surface used for the footer and expand panels --- */
#app .buuubble {
    background: rgb(16, 21, 31) !important; /* plain fallback if the rgba(var(...)) below fails to parse on this page */
    background: rgba(var(--footer-bg-rgb, 16, 21, 31), .96) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.4) !important;
    color: var(--text-color, #E0E0E0) !important;
}

#app .tw-bg-gray-100 {
    background: rgb(16, 21, 31) !important; /* plain fallback if the rgba(var(...)) below fails to parse on this page */
    background: rgba(var(--footer-bg-rgb, 16, 21, 31), .96) !important;
}

/* Received-message bubbles + the input field share this class */
#app .tw-bg-white {
    background: rgba(255,255,255,.14) !important;
    color: var(--text-color, #E0E0E0) !important;
}
/* Header bar ("... chat with me X") */
#app .tw-bg-slate-200 {
    background: rgb(16, 21, 31) !important; /* plain fallback if the rgba(var(...)) below fails to parse on this page */
    background: rgba(var(--footer-bg-rgb, 16, 21, 31), .96) !important;
    color: var(--text-color, #E0E0E0) !important;
    border-bottom: 1px solid rgba(255,255,255,.14);
}
/* Own/sent message bubbles */
#app .tw-bg-indigo-100 {
    background: rgba(255,255,255,.14) !important;
    color: var(--text-color, #E0E0E0) !important;
}
#app .tw-border-gray-300 {
    border-color: rgba(255,255,255,.14) !important;
}
#app .focus\:tw-border-blue-600:focus {
    border-color: var(--primary-color, #20d21a) !important;
}
#app .tw-text-gray-700 {
    color: var(--text-color, #E0E0E0) !important;
}
#app .tw-text-gray-400 {
    color: var(--secondary-color, rgba(255,255,255,.6)) !important;
}

/* --- Send button --- */
#app .tw-bg-indigo-500 {
    background: var(--primary-color, #20d21a) !important;
    color: #08130a !important;
}

/* Per-message avatar circles ("S"/"G" letter chips). Targeted specifically
   as DIV + tw-rounded-full — the send button also carries tw-bg-indigo-500
   above, but is a <button> with tw-rounded-xl instead, so this doesn't
   touch it. display:none removes it from flex flow entirely (the message
   bubble's own small left margin stays, which just reads as normal
   padding now rather than leaving an avatar-shaped gap). */
#app .msgbox div.tw-rounded-full.tw-bg-indigo-500 {
    display: none !important;
}
#app .hover\:tw-bg-indigo-600:hover {
    filter: brightness(1.12);
}

/* --- Input/textarea: native browser white background isn't touched by
   any Tailwind reset for plain text inputs, has to be set explicitly --- */
#app input,
#app textarea {
    background: rgba(255,255,255,.06) !important;
    color: var(--text-color, #E0E0E0) !important;
    -webkit-text-fill-color: var(--text-color, #E0E0E0);
    border-color: rgba(255,255,255,.14) !important;
}
#app input::placeholder,
#app textarea::placeholder {
    color: var(--secondary-color, rgba(255,255,255,.6)) !important;
    opacity: 1 !important;
}

/* --- Emoji picker: removed ------------------------------------------------
   The vendor puts a smiley button (Heroicons "face-smile") inside the message
   input, absolutely positioned over its right edge, and reserves room for it
   with tw-pr-10 on the input. Hiding the button alone would leave 40px of
   dead space, so the padding is handed back at the same time. Matched on the
   absolute + right-0 pair: the only other button in the composer is Send,
   which is a static flex child. */
#app .msgbox button.tw-absolute.tw-right-0 {
    display: none !important;
}
#app .msgbox input.tw-pr-10 {
    padding-right: 1rem !important;
}

/* --- Resizable panel ------------------------------------------------------
   The vendor drives open/close by animating the INNER column
   (.grow.svelte-1ybb335: height 0 -> 500px, width 0 -> 100%); .msgbox itself
   has no size of its own and simply shrink-wraps around it.

   So a custom size belongs on that inner element, NOT on .msgbox. Forcing a
   width onto .msgbox would leave a full-size invisible fixed box sitting over
   the page while the panel is CLOSED, silently swallowing clicks — the exact
   trap the launcher bubble already needs pointer-events:none for.

   Scoped to .lm-resized so an untouched widget keeps the vendor's sizing
   byte-for-byte, and deliberately not applied to the closed state, so the
   open/close animation still runs — only its end point changes. */
#app .msgbox.lm-resized > .grow.svelte-1ybb335 {
    width: var(--lm-w, 100%) !important;
    height: var(--lm-h, 500px) !important;
    max-width: none !important;
}

/* Grip in the bottom-right corner, drawn as the conventional pair of diagonal
   strokes. Hidden unless the panel is open (.lm-open is set from JS): .msgbox
   survives in the DOM while closed, so an always-visible grip would float over
   the page next to the launcher. */
#app .msgbox .lm-resize {
    display: none;
    position: absolute;
    right: 2px;
    bottom: 2px;
    width: 18px;
    height: 18px;
    z-index: 5;
    cursor: nwse-resize;
    touch-action: none;
    opacity: .45;
    transition: opacity .15s ease;
    background:
        linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.75) 5px 6.5px, transparent 6.5px),
        linear-gradient(135deg, transparent 0 9.5px, rgba(255,255,255,.75) 9.5px 11px, transparent 11px);
}
#app .msgbox.lm-open .lm-resize {
    display: block;
}
#app .msgbox .lm-resize:hover {
    opacity: .9;
}

/* Below this width the panel is effectively full-bleed and there is nothing
   useful to drag, so the grip would only crowd the send button. */
@media (max-width: 639px) {
    #app .msgbox .lm-resize { display: none !important; }
}