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

/* Typed angle property for the pill'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; } }

/* ── Chat container + admin-chrome (pin rings, draw overlay, screenshot, branding, toast) ── */
#instinctor-chat{position:fixed!important;bottom:calc(24px + env(safe-area-inset-bottom,0px))!important;right:20px!important;z-index:999999!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif!important;padding-top:44px!important}
#instinctor-chat[data-position="left"]{right:auto!important;left:14px!important}
#instinctor-chat *{box-sizing:border-box!important}
#instinctor-chat.chat-hidden{display:none!important}
#instinctor-ghost-greeting{font-size:11px;line-height:1.45;padding:4px 2px;pointer-events:none;transition:opacity .3s ease-in-out,max-height .3s ease-in-out;max-height:60px;overflow:hidden}
#instinctor-ghost-greeting.greeting-gone{opacity:0!important;max-height:0!important;padding:0!important}
#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:inline-block!important;padding:6px 10px!important;background:#fff!important;text-align:left!important;border-radius:0 12px 0 12px!important}
.instinctor-branding a{display:inline!important;color:#999!important;font-size:10px!important;text-decoration:none!important}
.instinctor-branding a:hover{color:#666!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}
@media(max-width:420px){
    #instinctor-chat{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;right:34px!important}
    #instinctor-chat[data-position="left"]{left:16px!important}
    /* Bubbles + pill default to fixed pixel widths sized for desktop. On
       narrow viewports those overflow the screen — the conversation panel
       hangs off the right edge and bubbles inside read as one tall column
       of single words. Constrain to the viewport with comfortable side
       padding so the text wraps naturally at phone widths.
       calc(100vw - 80px): 16px gutter both sides + ~48px space for the
       trigger column the user dismisses through. */
    .instinctor-ghost-bubbles{
        width:calc(100vw - 80px)!important;max-width:420px!important;
        right:62px!important;
    }
    .instinctor-ghost-bubbles.ghost-rtl{right:auto!important;left:62px!important}
    .instinctor-ghost-pill,
    #instinctor-ghost-pill-wrap{
        max-width:calc(100vw - 84px)!important;
    }
    .instinctor-ghost-bubble{font-size:14px!important;max-width:96%!important}
}

/* ── Ghost Chat Styles ── */

/* Keyframes */
@keyframes instinctor-ghost-ring-in    {from{opacity:0;transform:scale(0)}   to{opacity:1;transform:scale(1)}}
@keyframes instinctor-ghost-pill-in  {from{transform:translateX(100%)} to{transform:translateX(0)}}
@keyframes instinctor-ghost-pill-out {from{transform:translateX(0)}   to{transform:translateX(100%)}}
@keyframes instinctor-ghost-bubbles-in {from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)}}
@keyframes instinctor-ghost-actions-in {from{opacity:0;transform:translateY(4px)}  to{opacity:1;transform:translateY(0)}}
@keyframes instinctor-ghost-in-right   {from{opacity:0;transform:translateX(40px)} to{opacity:1;transform:translateX(0)}}
@keyframes instinctor-ghost-in-left    {from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes instinctor-dot              {0%,80%,100%{transform:scale(0)}40%{transform:scale(1)}}

/* Pill WRAPPER — stationary, holds notch clip-path + overflow:hidden. */
.instinctor-ghost-pill{
    position:relative!important;
    width:160px!important;min-height:36px!important;height:auto!important;
    display:none!important;align-items:flex-end!important;z-index:999997!important;
    border-radius:6px!important;
    overflow:hidden!important;
    background:transparent!important;
    transition:width .2s ease-in-out,height .2s ease-in-out!important;
    pointer-events:auto!important;
}
.instinctor-ghost-pill-inner{pointer-events:auto!important}
.instinctor-ghost-field{pointer-events:auto!important}
.instinctor-ghost-pill.ghost-rtl{right:auto!important;left:84px!important}
.instinctor-ghost-pill-inner{
    width:100%!important;min-height:36px!important;display:flex!important;align-items:center!important;
    background:rgba(0,0,0,.55)!important;
    backdrop-filter:blur(22px) saturate(160%)!important;-webkit-backdrop-filter:blur(22px) saturate(160%)!important;
    border-radius:6px!important;
    overflow:hidden!important;
    position:relative!important;
    --ghost-lx:50%;--ghost-ly:50%;
    transform:translateX(100%);
    will-change:transform!important;
}
/* Border stroke — always-on rotating conic-gradient beam tracing the
   perimeter. CSS keyframe drives --ghost-scan from 0deg to 360deg over
   6s linearly. @property registration (above) makes the typed angle
   trigger gradient repaints each animation tick.
   The padding:2px + content-box mask recipe keeps the conic gradient
   visible only in the 2px outer ring. */
.instinctor-ghost-pill-inner::before{
    content:'';position:absolute;inset:0;border-radius:6px;
    padding:2px;
    background:conic-gradient(from var(--ghost-scan,0deg),transparent 0%,transparent 55%,rgba(85,85,85,.4) 70%,rgba(85,85,85,.7) 78%,rgba(85,85,85,.4) 86%,transparent 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;
}
/* Surface glow — radial gradient follows cursor (kept; activates on
   hover/typing only). */
.instinctor-ghost-pill-inner::after{
    content:'';position:absolute;inset:0;border-radius:6px;
    background:radial-gradient(ellipse 130px 70px at var(--ghost-lx) var(--ghost-ly),rgba(255,255,255,.11) 0%,transparent 70%);
    opacity:0;transition:opacity .35s;pointer-events:none;z-index:1;
}
.instinctor-ghost-pill:hover .instinctor-ghost-pill-inner::after,
.instinctor-ghost-pill.ghost-typing .instinctor-ghost-pill-inner::after{opacity:1}
/* Open: inner slides left; wrapper clip-path never moves */
.instinctor-ghost-pill.ghost-open .instinctor-ghost-pill-inner{
    animation:instinctor-ghost-pill-in 0.35s cubic-bezier(.34,1.08,.64,1) both!important;
}
/* Close: inner retreats right into ring */
.instinctor-ghost-pill.ghost-closing .instinctor-ghost-pill-inner{
    animation:instinctor-ghost-pill-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) both!important;
}

/* Field inside pill */
.instinctor-ghost-field{
    flex:1!important;
    min-height:18px!important;max-height:120px!important;
    padding:8px 14px!important;
    background:transparent!important;border:none!important;outline:none!important;
    font-size:14px!important;color:#ffffff!important;
    font-family:inherit!important;min-width:0!important;
    resize:none!important;overflow:hidden!important;
    line-height:1.45!important;box-sizing:border-box!important;
    scrollbar-width:none!important;
    white-space:nowrap;
    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,.65)!important}
.instinctor-ghost-pill.pill-on-dark .instinctor-ghost-pill-inner{background:rgba(255,255,255,.36)!important}
.instinctor-ghost-pill.pill-on-dark .instinctor-ghost-field{color:#1d2327!important}
.instinctor-ghost-pill.pill-on-dark .instinctor-ghost-field::placeholder{color:rgba(0,0,0,.45)!important}
.instinctor-ghost-pill.pill-on-dark .instinctor-ghost-pill-inner::before{background:conic-gradient(from var(--ghost-scan,0deg),transparent 0%,transparent 55%,rgba(255,255,255,.4) 70%,rgba(255,255,255,.7) 78%,rgba(255,255,255,.4) 86%,transparent 100%)}

/* Bubbles container */
.instinctor-ghost-bubbles{
    /* `bottom` lifts above the on-screen keyboard via --instinctor-keyboard-h
       (set by JS from window.visualViewport — see ChatService inline script).
       0px when keyboard is closed → no visual change. position:fixed alone
       anchors to the layout viewport, which doesn't shrink when iOS Safari
       opens the keyboard — the input pill ends up covered by the keyboard
       row. visualViewport tracks the real visible area so we can offset. */
    position:fixed!important;bottom:calc(85px + var(--instinctor-keyboard-h, 0px))!important;right:62px!important;
    width:420px!important;display:none!important;flex-direction:column!important;
    gap:8px!important;pointer-events:none!important;z-index:999996!important;
    max-height:min(40vh,300px)!important;overflow-y:auto!important;overflow-x:hidden!important;
    scrollbar-width:none!important;-ms-overflow-style:none!important;
}
.instinctor-ghost-bubbles::-webkit-scrollbar{display:none!important}
.instinctor-ghost-bubbles.ghost-rtl{right:auto!important;left:24px!important}
.instinctor-ghost-bubbles.ghost-visible{animation:instinctor-ghost-bubbles-in .5s ease-in-out both!important}

/* Bubble — neutral grey border (no per-site brand colour) */
.instinctor-ghost-bubble{
    padding:7px 10px!important;
    border:1px solid rgba(0,0,0,.12)!important;
    background:#ffffff!important;
    font-size:14px!important;line-height:1.5!important;
    max-width:90%!important;width:fit-content!important;word-wrap:break-word!important;
    pointer-events:auto!important;color:#1d2327!important;
    backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
}
.instinctor-ghost-bubble.visitor{
    align-self:flex-end!important;margin-left:auto!important;
    border-radius:6px 6px 0 6px!important;
    background:rgba(255,255,255,.90)!important;
    animation:instinctor-ghost-in-right .35s cubic-bezier(0.4, 0, 0.2, 1) both!important;
}
.instinctor-ghost-bubble.admin{
    align-self:flex-start!important;border-radius:6px 6px 6px 0!important;
    animation:instinctor-ghost-in-left .35s cubic-bezier(0.4, 0, 0.2, 1) both!important;
}
.instinctor-ghost-bubble.ghost-fade{opacity:0!important;transform:translateY(-8px)!important}

/* Typing indicator */
.instinctor-ghost-typing{
    display:flex!important;gap:5px!important;padding:7px 10px!important;
    border:1px solid rgba(0,0,0,.12)!important;background:#ffffff!important;
    border-radius:6px 6px 6px 0!important;align-self:flex-start!important;
    backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;
    pointer-events:none!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}

/* ── Vertical bar ── */
/* The bar is now an invisible positioning shell. No background, no
   border-radius effect, no container appearance. The action buttons and
   close X float independently in the air — each carries its own
   brand-coloured body so it stays visible on any page background. */
#instinctor-chat-bar{
    position:fixed!important;bottom:calc(15px + var(--instinctor-keyboard-h, 0px))!important;right:20px!important;
    width:38px!important;height:52px!important;
    background:transparent!important;
    z-index:999998!important;
    transition:height .45s cubic-bezier(.34,1.4,.64,1)!important;
    cursor:pointer!important;
}
#instinctor-chat-bar.bar-open{height:134px!important}
/* Bottom trigger — bare chat icon, no container. The icon itself is enough. */
.instinctor-bar-bottom{
    position:absolute!important;bottom:13px!important;left:6px!important;right:6px!important;
    height:26px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    pointer-events:none!important;
}
.instinctor-bar-icon-chat{
    display:block!important;pointer-events:none!important;
    transition:opacity .2s,transform .2s!important;
    /* Drop-shadow keeps the icon visible against any page background. */
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25))!important;
}
/* Close X (open) — sits on the action-button row above the input pill,
   matched to the floating-chip language used by the action buttons. */
.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!important;
    stroke:#1d2327!important;
}
/* Send paper-plane — same trigger button doubles as send while text is in the
   input. We mirror the chat icon's center positioning so the morph reads as
   "same control, new role." The .ghost-has-text class on #instinctor-chat is
   toggled by ghostFieldInput() when the textarea has any non-whitespace. */
.instinctor-bar-icon-send{
    display:none!important;pointer-events:none!important;
    position:absolute!important;top:50%!important;left:50%!important;
    transform:translate(-50%,-50%) scale(.4)!important;opacity:0!important;
    transition:opacity .2s,transform .2s!important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,0.25))!important;
}
#instinctor-chat-bar.bar-open .instinctor-bar-icon-chat{opacity:0!important;transform:scale(.4)!important}
#instinctor-chat-bar.bar-open .instinctor-bar-icon-close{display:block!important;opacity:1!important}
/* Has-text wins over bar-open: when the user types, the trigger becomes a
   Send button. Close-X is suppressed during that state so the user has ONE
   clear action — send. They can still dismiss by clicking outside.
   NOTE: #instinctor-chat-bar is a DOM SIBLING of #instinctor-chat (not nested),
   so we drive these from .bar-has-text on the bar itself, set by the same JS
   handler that toggles .ghost-has-text on the chat container. Selector source
   order matters: these rules must come AFTER the .bar-open rules above so the
   send icon wins when both classes are present (user is typing while open). */
#instinctor-chat-bar.bar-has-text .instinctor-bar-icon-chat,
#instinctor-chat-bar.bar-has-text .instinctor-bar-icon-close{
    opacity:0!important;transform:scale(.4)!important;
}
#instinctor-chat-bar.bar-has-text .instinctor-bar-icon-send{
    display:block!important;opacity:1!important;transform:translate(-50%,-50%) scale(1)!important;
}
/* Actions — transparent stack of buttons; the frosted-glass surface lives
   on the bar itself. */
.instinctor-bar-actions-col{
    position:absolute!important;top:0!important;left:0!important;right:0!important;
    bottom:46px!important;
    display:flex!important;flex-direction:column!important;
    align-items:center!important;
    gap:5px!important;padding-top:0!important;padding-bottom:0!important;
    justify-content:flex-end!important;
    opacity:0!important;transition:opacity .15s ease-in-out .2s!important;pointer-events:none!important;
}
#instinctor-chat-bar.bar-open .instinctor-bar-actions-col{opacity:1!important;pointer-events:auto!important}
/* Action buttons (open state) — frosted glass body + white SVG strokes. */
.instinctor-bar-act{
    width:26px!important;height:26px!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:6px!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    padding:0!important;transition:background .15s!important;flex-shrink:0!important;
    position:relative!important;
}
.instinctor-bar-act:hover{background:rgba(0,0,0,.7)!important}
/* Left-pointing tooltip */
.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;
}