/* ============================================================
   Instinctor Chat Widget — static styles.
   Used by \Instinctor\Services\ChatService::renderShortcode().

   STRUCTURE (2.1.3134). The widget is ONE bounded panel, not a set
   of free-floating pieces. #instinctor-chat is the panel itself: a
   flex column holding header, message log and input row. Its
   children used to each be position:fixed, which is why they drifted
   apart and why nothing could be laid out relative to anything else.
   They are now in normal flow inside the panel.

   #instinctor-chat-bar (the launcher) stays a DOM SIBLING and is the
   only thing on screen while the panel is closed.

   CASCADE ORDER MATTERS. The responsive block lives at the BOTTOM of
   this file. It used to sit near the top, ahead of the rules it was
   meant to override, and since both carry !important at equal
   specificity the later base rule always won: every mobile override
   for the bubbles and the input was dead from the day it was written,
   which is why the panel hung off the left edge of every phone.
   Keep new base rules ABOVE the media block.
   ============================================================ */

/* Typed angle property for the input's border conic-gradient. Required
   for the @keyframes spin animation to invalidate the gradient — without
   @property registration, browsers treat the variable as opaque-string
   and skip the gradient repaint. */
@property --ghost-scan {
    syntax: '<angle>';
    inherits: true;
    initial-value: 0deg;
}
@keyframes ghost-pill-spin { to { --ghost-scan: 360deg; } }
@keyframes instinctor-ghost-panel-in {
    from { opacity:0; transform:translateY(12px) scale(.98) }
    to   { opacity:1; transform:translateY(0)    scale(1)   }
}
@keyframes instinctor-ghost-in-right {from{opacity:0;transform:translateX(12px)} to{opacity:1;transform:translateX(0)}}
@keyframes instinctor-ghost-in-left  {from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes instinctor-dot            {0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* ── The panel ───────────────────────────────────────────────── */
#instinctor-chat{
    right:20px!important;
    bottom:calc(84px + env(safe-area-inset-bottom,0px) + var(--instinctor-keyboard-h,0px))!important;
    z-index:999999!important;
    width:384px!important;
    max-height:min(600px,calc(100vh - 150px))!important;
    display:none!important;
    flex-direction:column!important;
    overflow:hidden!important;
    border-radius:16px!important;
    /* Positioning context for the floating close button. */
    position:fixed!important;
    /* Solid enough to read against an animated WebGL hero. Translucent
       bubbles over moving colour never give the eye a stable edge, which
       is what made the old treatment feel cheap. */
    background:rgba(18,20,24,.66)!important;
    /* Heavier blur carries the legibility the opacity gives up: the page
       behind stays present as colour and motion but stops resolving into
       detail that competes with the text. */
    backdrop-filter:blur(34px) saturate(155%)!important;
    -webkit-backdrop-filter:blur(34px) saturate(155%)!important;
    border:1px solid rgba(255,255,255,.12)!important;
    box-shadow:0 18px 60px rgba(0,0,0,.45)!important;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;
    color:#fff!important;
}
#instinctor-chat.open{
    display:flex!important;
    /* NO fill-mode. With `both` the panel held the animation's from-state
       (scale .98, 12px down) as a permanent transform whenever the run did
       not complete cleanly, which shifted the resting geometry and closed
       the gap to the launcher to 1px. Unfilled, the resting state is always
       exactly what the rules above declare. */
    animation:instinctor-ghost-panel-in .3s ease-in-out!important;
}
#instinctor-chat[data-position="left"]{right:auto!important;left:20px!important}
#instinctor-chat *{box-sizing:border-box!important}
#instinctor-chat.chat-hidden{display:none!important}
/* The launcher is a DOM SIBLING, so .chat-hidden never reaches it. Hide it
   whenever the widget is hidden (page-level chat off, or the editor preview
   toggling it off) or it keeps floating on its own. */
#instinctor-chat.chat-hidden ~ #instinctor-chat-bar{display:none!important}
/* Launcher hides while the panel is open. Parking it below the panel as the
   close control cost 60px of height on a phone and read as a stray disc; the
   close is a small floating X inside the panel instead. */
#instinctor-chat.open ~ #instinctor-chat-bar{display:none!important}

/* Close: floats over the top-right of the log, so it costs no layout height
   and needs no header band to sit in. Its own dark disc keeps it legible
   over a white reply bubble scrolling underneath. */
.instinctor-chat-x{
    position:absolute!important;top:6px!important;right:6px!important;z-index:5!important;
    width:44px!important;height:44px!important;
    border:0!important;background:transparent!important;padding:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    cursor:pointer!important;
}
.instinctor-chat-x::before{
    content:''!important;position:absolute!important;
    width:30px!important;height:30px!important;border-radius:50%!important;
    background:rgba(10,11,13,.55)!important;
    backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;
    transition:background .2s ease-in-out!important;
}
.instinctor-chat-x:hover::before{background:rgba(10,11,13,.8)!important}
.instinctor-chat-x svg{position:relative!important;z-index:1!important}
.instinctor-chat-x:focus-visible{outline:2px solid rgba(255,255,255,.6)!important;outline-offset:-4px!important}

/* ── Message log ─────────────────────────────────────────────── */
/* JS sets display:flex inline when the panel opens, so no display here. */
.instinctor-ghost-bubbles{
    flex:1!important;min-height:0!important;
    flex-direction:column!important;gap:10px!important;
    padding:16px!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    pointer-events:auto!important;
    scrollbar-width:thin!important;
    scrollbar-color:rgba(255,255,255,.22) transparent!important;
}
/* Nothing said yet: collapse the log completely rather than leave an empty
   band framed by the header rule and the input rule, which reads as a gap
   the panel forgot to fill. The freshly opened panel is then exactly its
   header and its input. JS sets display:flex inline with !important, so the
   collapse has to come from flex/padding, not display. */
.instinctor-ghost-bubbles:empty{
    flex:0 0 0!important;min-height:0!important;height:0!important;
    padding:0!important;overflow:hidden!important;
}
/* With nothing said the panel is exactly its input row. It briefly reserved
   44px so the floating close had somewhere to sit, which spent a whole row on
   one small button. The close hides instead, and since the panel now opens
   with the greeting this state is only ever reached by a site that has
   cleared its greeting text. */
#instinctor-chat:has(.instinctor-ghost-bubbles:empty) .instinctor-chat-x{display:none!important}
.instinctor-ghost-bubbles:empty + #instinctor-ghost-pill-wrap{border-top:0!important}
.instinctor-ghost-bubbles::-webkit-scrollbar{width:8px!important}
.instinctor-ghost-bubbles::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.22)!important;border-radius:4px!important;
}
.instinctor-ghost-bubbles::-webkit-scrollbar-track{background:transparent!important}

/* ── Bubbles ─────────────────────────────────────────────────── */
.instinctor-ghost-bubble{
    padding:10px 13px!important;
    font-size:15px!important;line-height:1.55!important;
    max-width:85%!important;width:fit-content!important;
    /* pre-wrap keeps consecutive spaces and newlines the visitor typed. */
    white-space:pre-wrap!important;overflow-wrap:break-word!important;word-wrap:break-word!important;
    pointer-events:auto!important;
    border:0!important;
}
/* The close floats in the top-right corner over the log. Rather than push
   every message down to clear it, only the first bubble is kept narrow enough
   that it cannot reach underneath. Later messages do pass beneath it as they
   scroll, which is what the button's own disc is for. */
.instinctor-ghost-bubbles > .instinctor-ghost-bubble:first-child{
    max-width:calc(85% - 40px)!important;
}
.instinctor-ghost-bubble.admin{
    align-self:flex-start!important;
    background:#ffffff!important;color:#1d2327!important;
    border-radius:14px 14px 14px 4px!important;
    animation:instinctor-ghost-in-left .3s ease-in-out!important;
}
.instinctor-ghost-bubble.visitor{
    align-self:flex-end!important;margin-left:auto!important;
    background:rgba(255,255,255,.14)!important;color:#fff!important;
    border:1px solid rgba(255,255,255,.10)!important;
    border-radius:14px 14px 4px 14px!important;
    animation:instinctor-ghost-in-right .3s ease-in-out!important;
}
.instinctor-ghost-bubble img{max-width:100%!important;height:auto!important;border-radius:8px!important}

/* Typing indicator */
.instinctor-ghost-typing{
    display:flex!important;gap:5px!important;padding:12px 13px!important;
    background:#ffffff!important;
    border-radius:14px 14px 14px 4px!important;align-self:flex-start!important;
    pointer-events:none!important;width:fit-content!important;
}
.instinctor-ghost-typing span{
    width:6px!important;height:6px!important;background:#1d2327!important;
    border-radius:50%!important;opacity:.6!important;
    animation:instinctor-dot 1.4s infinite ease-in-out!important;
}
.instinctor-ghost-typing span:nth-child(1){animation-delay:-.32s!important}
.instinctor-ghost-typing span:nth-child(2){animation-delay:-.16s!important}

/* ── Input row ───────────────────────────────────────────────── */
/* JS sets display:flex inline when the panel opens. */
#instinctor-ghost-pill-wrap{
    flex:none!important;
    flex-direction:column!important;align-items:stretch!important;
    gap:0!important;
    padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))!important;
    border-top:1px solid rgba(255,255,255,.09)!important;
    pointer-events:auto!important;
}
.instinctor-ghost-pill{
    position:relative!important;
    width:100%!important;min-height:44px!important;height:auto!important;
    display:none!important;align-items:flex-end!important;gap:8px!important;
    border-radius:12px!important;
    background:transparent!important;
    pointer-events:auto!important;
}
.instinctor-ghost-pill-inner{
    flex:1!important;min-width:0!important;
    min-height:44px!important;display:flex!important;align-items:center!important;
    background:rgba(255,255,255,.08)!important;
    border-radius:12px!important;
    overflow:hidden!important;position:relative!important;
    --ghost-lx:50%;--ghost-ly:50%;
}
/* Border stroke — rotating conic beam tracing the perimeter. The
   padding + content-box mask recipe keeps the gradient visible only in
   the 1px outer ring. Kept from the ghost treatment as the signature. */
.instinctor-ghost-pill-inner::before{
    content:'';position:absolute;inset:0;border-radius:12px;
    padding:1px;
    background:conic-gradient(from var(--ghost-scan,0deg),rgba(255,255,255,.13) 0%,rgba(255,255,255,.13) 55%,rgba(255,255,255,.45) 70%,rgba(255,255,255,.7) 78%,rgba(255,255,255,.45) 86%,rgba(255,255,255,.13) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:1;pointer-events:none;z-index:10;
    animation:ghost-pill-spin 6s linear infinite;
}
.instinctor-ghost-field{
    flex:1!important;
    min-height:44px!important;max-height:120px!important;
    padding:12px 14px!important;
    background:transparent!important;border:none!important;outline:none!important;
    /* 16px is not a taste call: under 16px iOS zooms the page on focus and
       never zooms back out, which is most of what made this feel broken. */
    font-size:16px!important;color:#ffffff!important;
    font-family:inherit!important;min-width:0!important;
    resize:none!important;overflow:hidden!important;
    line-height:1.4!important;box-sizing:border-box!important;
    scrollbar-width:none!important;
    white-space:normal!important;
    transition:height .2s ease-in-out!important;
    display:block!important;
}
.instinctor-ghost-field::-webkit-scrollbar{display:none!important}
.instinctor-ghost-field::placeholder{color:rgba(255,255,255,.5)!important}

/* Docked send button. Calls the same ghostTrigger() the launcher used to,
   so there is one send path, not two. */
.instinctor-chat-send{
    flex:none!important;width:44px!important;height:44px!important;
    border:0!important;border-radius:12px!important;padding:0!important;
    background:#ffffff!important;color:#14161a!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    transition:transform .2s ease-in-out,opacity .2s ease-in-out!important;
}
.instinctor-chat-send:hover{transform:scale(1.05)!important}
.instinctor-chat-send:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}

/* ── Launcher ────────────────────────────────────────────────── */
#instinctor-chat-bar{
    position:fixed!important;
    bottom:calc(20px + env(safe-area-inset-bottom,0px) + var(--instinctor-keyboard-h,0px))!important;
    right:20px!important;
    width:44px!important;height:44px!important;
    background:transparent!important;
    z-index:999998!important;
    cursor:pointer!important;
}
#instinctor-chat-bar[data-position="left"]{right:auto!important;left:20px!important}
.instinctor-bar-bottom{
    position:absolute!important;inset:0!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    pointer-events:none!important;
    background:rgba(26,29,33,.82)!important;
    backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
    border:1px solid rgba(255,255,255,.18)!important;
    border-radius:50%!important;
    box-shadow:0 2px 10px rgba(0,0,0,.28)!important;
    transition:transform .2s ease-in-out!important;
}
#instinctor-chat-bar:hover .instinctor-bar-bottom{transform:scale(1.06)!important}
.instinctor-bar-icon-chat{
    display:block!important;pointer-events:none!important;opacity:1!important;
    transition:opacity .2s ease-in-out,transform .2s ease-in-out!important;
}
.instinctor-bar-icon-close{
    display:none!important;pointer-events:none!important;
    position:absolute!important;top:50%!important;left:50%!important;
    transform:translate(-50%,-50%)!important;opacity:0!important;
    transition:opacity .2s ease-in-out!important;
}
/* Sending is the docked button's job, so the launcher never becomes Send. */
.instinctor-bar-icon-send{display:none!important}
/* Action buttons (attach / screenshot), when the site enables them. */
.instinctor-bar-actions-col{
    position:absolute!important;left:0!important;right:0!important;bottom:52px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;
    gap:6px!important;
    opacity:0!important;transition:opacity .15s ease-in-out!important;pointer-events:none!important;
}
#instinctor-chat.open ~ #instinctor-chat-bar .instinctor-bar-actions-col{opacity:0!important}
.instinctor-bar-act{
    width:36px!important;height:36px!important;
    background:rgba(0,0,0,.55)!important;
    backdrop-filter:blur(22px) saturate(160%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(160%)!important;
    border:none!important;border-radius:10px!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:0!important;transition:background .15s ease-in-out!important;flex-shrink:0!important;
    position:relative!important;
}
.instinctor-bar-act:hover{background:rgba(0,0,0,.7)!important}
.instinctor-bar-act[data-tip]:hover::after{
    content:attr(data-tip)!important;
    position:absolute!important;right:calc(100% + 8px)!important;top:50%!important;
    transform:translateY(-50%)!important;
    background:rgba(0,0,0,.72)!important;color:#fff!important;
    font-size:11px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important;
    white-space:nowrap!important;padding:3px 7px!important;border-radius:4px!important;
    pointer-events:none!important;z-index:1000000!important;
}

/* ── Admin chrome (draw overlay, pin rings, screenshot, branding, toast) ── */
#instinctor-draw-canvas{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;z-index:2147483645!important;cursor:crosshair!important;touch-action:none!important}
#instinctor-draw-strip{position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:48px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important;z-index:2147483646!important;font-family:sans-serif!important;font-size:13px!important;color:rgba(255,255,255,.8)!important}
#instinctor-draw-strip-cancel{background:rgba(255,255,255,.15)!important;border:none!important;color:#fff!important;font-size:12px!important;padding:5px 14px!important;border-radius:20px!important;cursor:pointer!important}
@keyframes instinctor-pin-pulse{0%{transform:translate(-50%,-50%) scale(1);opacity:.8}100%{transform:translate(-50%,-50%) scale(2.5);opacity:0}}
.instinctor-pin-ring{position:fixed!important;width:32px!important;height:32px!important;border-radius:50%!important;border:2px solid #fff!important;pointer-events:none!important;z-index:2147483644!important;animation:instinctor-pin-pulse .8s ease-in-out 3!important;transform:translate(-50%,-50%)!important}
.instinctor-branding,.instinctor-branding *{visibility:visible!important;opacity:1!important;position:relative!important;height:auto!important;overflow:visible!important;clip:auto!important;clip-path:none!important;transform:none!important;filter:none!important;pointer-events:auto!important;font-size:10px!important;line-height:1.4!important;max-height:none!important;min-height:0!important;min-width:0!important;margin:0!important;z-index:1!important}
.instinctor-branding{display:block!important;padding:0 16px 8px!important;background:transparent!important;text-align:center!important}
.instinctor-branding a{display:inline!important;color:rgba(255,255,255,.45)!important;font-size:10px!important;text-decoration:none!important}
.instinctor-branding a:hover{color:rgba(255,255,255,.75)!important}
.instinctor-branding strong{font-weight:600!important;display:inline!important}
#instinctor-screenshot-overlay{position:fixed!important;top:0!important;left:0!important;width:100%!important;height:100%!important;background:rgba(0,0,0,.3)!important;z-index:9999999!important;cursor:crosshair!important}
.instinctor-screenshot-hint{position:absolute!important;top:20px!important;left:50%!important;transform:translateX(-50%)!important;background:#000!important;color:#fff!important;padding:10px 20px!important;border-radius:8px!important;font-size:14px!important}
.instinctor-selection-box{position:absolute!important;border:2px solid #fff!important;background:rgba(255,255,255,.1)!important;pointer-events:none!important}
.instinctor-toast{position:fixed!important;bottom:100px!important;left:50%!important;transform:translateX(-50%)!important;background:#333!important;color:#fff!important;padding:12px 24px!important;border-radius:8px!important;font-size:14px!important;z-index:99999999!important}
#instinctor-ghost-preview{
    margin:0 0 8px!important;padding:8px!important;
    background:rgba(255,255,255,.08)!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:10px!important;max-width:100%!important;
}

/* ── RTL ─────────────────────────────────────────────────────── */
.instinctor-ghost-bubbles.ghost-rtl{direction:rtl!important}
.instinctor-ghost-pill.ghost-rtl{direction:rtl!important}

/* ============================================================
   RESPONSIVE — MUST STAY LAST IN THIS FILE.
   Anything added below the base rules wins; anything added above
   them silently loses to an equal-specificity !important later in
   the file. That inversion is what broke mobile for months.
   767px matches the breakpoint the rest of the product uses.
   ============================================================ */
@media(max-width:767px){
    /* Pinned to BOTH edges, so horizontal overflow is not merely fixed,
       it becomes impossible: there is no fixed width left to overflow. */
    #instinctor-chat{
        left:12px!important;right:12px!important;
        width:auto!important;
        bottom:calc(12px + env(safe-area-inset-bottom,0px) + var(--instinctor-keyboard-h,0px))!important;
        max-height:min(74vh,620px)!important;
        border-radius:20px!important;
    }
    #instinctor-chat[data-position="left"]{left:12px!important;right:12px!important}

    #instinctor-chat-bar{
        right:16px!important;
        bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--instinctor-keyboard-h,0px))!important;
    }
    #instinctor-chat-bar[data-position="left"]{right:auto!important;left:16px!important}

    /* Slightly tighter padding, same type size: shrinking text on the
       smaller screen is the wrong instinct, it is where legibility is
       already hardest. */
    .instinctor-ghost-bubbles{padding:14px!important;gap:9px!important}
    .instinctor-ghost-bubble{max-width:88%!important}
}