/* ============================================================
   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;
    /* 6px under the last message, not 16. The input row below already brings
       its own 10px and a rule, so 16 here stacked into 27px of air plus a line
       between the greeting and the field: the widest gap in the panel, at the
       one place the two belong together. */
    padding:16px 16px 6px!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;
}
/* A REAL PERSON, NOT THE AGENT.
   Instagent and the owner both rendered as the same white bubble, so a visitor
   who had been handed to a person had no way to see it: the one moment the
   product promises a human was invisible (Sergei 2026-09-23). Same side and same
   shape, because it is still the business talking, but a warmer surface and a
   solid edge down the left, so the change of voice is obvious without reading a
   label. Visual only: no new string, so nothing to translate and nothing that
   can read wrong in the twelve languages the widget already ships in. */
.instinctor-ghost-bubble.human{
    align-self:flex-start!important;
    background:#f0ece6!important;color:#1d2327!important;
    border-radius:14px 14px 14px 4px!important;
    box-shadow:inset 3px 0 0 0 #1d2327!important;
    padding-left:16px!important;
    animation:instinctor-ghost-in-left .3s ease-in-out!important;
}
/* the first human message after the agent carries a little more air above it,
   so the handoff reads as a moment rather than another line */
.instinctor-ghost-bubble.admin + .instinctor-ghost-bubble.human{
    margin-top:10px!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;
}
/* When the consent line follows the input, IT is the panel's last row, so the
   bottom inset (safe area included) moves onto it and the input row keeps only
   a small step. Without this the consent sat flush on the panel's bottom edge
   while 10px of padding went unused above it. */
#instinctor-ghost-pill-wrap:has(+ .instinctor-chat-consent){
    padding-bottom:4px!important;
}
.instinctor-chat-consent{
    margin:6px auto calc(10px + env(safe-area-inset-bottom,0px))!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}

/* Hold-to-talk mic. It takes the SAME 44px slot as send rather than sitting
   beside it: an empty field has nothing to send, a field with something in it
   has nothing to dictate over, so only one of the two is ever the right
   control to offer. */
.instinctor-chat-mic{
    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;
    touch-action:none!important;-webkit-user-select:none!important;user-select:none!important;
    transition:transform .2s ease-in-out,background-color .2s ease-in-out,color .2s ease-in-out!important;
}
.instinctor-chat-mic:hover{transform:scale(1.05)!important}
.instinctor-chat-mic:focus-visible{outline:2px solid #fff!important;outline-offset:2px!important}

/* Exactly one of the pair is visible at a time. */
#instinctor-chat:not(.ghost-has-text) .instinctor-chat-send{display:none!important}
#instinctor-chat.ghost-has-text .instinctor-chat-mic{display:none!important}

/* WHILE RECORDING THE MIC STAYS. Dictated words set the has-text flag within
   a second of speaking, which would otherwise swap the control out from under
   the finger still holding it. */
#instinctor-chat.ghost-recording .instinctor-chat-mic{display:flex!important}
#instinctor-chat.ghost-recording .instinctor-chat-send{display:none!important}
#instinctor-chat.ghost-recording .instinctor-chat-mic{
    background:#e5484d!important;color:#ffffff!important;
    animation:instinctor-mic-pulse 1.4s ease-in-out infinite!important;
}
@keyframes instinctor-mic-pulse{
    0%,100%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}
    50%{box-shadow:0 0 0 10px rgba(229,72,77,0)}
}

/* No SpeechRecognition (Firefox): the mic is never shown, and send takes the
   slot back permanently rather than leaving an empty gap. */
#instinctor-chat.ghost-no-voice .instinctor-chat-mic{display:none!important}
#instinctor-chat.ghost-no-voice .instinctor-chat-send{display:flex!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-radius:50%!important;
    box-shadow:0 2px 10px rgba(0,0,0,.28)!important;
    transition:transform .2s ease-in-out!important;
}
/* The launcher's outline: a 2px ring carrying a black-to-transparent sweep
   that rotates (Sergei 2026-10-10). It REPLACES the 1px white hairline the
   disc used to carry, so the bubble has one outline and not two.

   Drawn as a conic gradient clipped to a ring by a radial mask, then spun
   with transform. The input's border nearby animates its gradient ANGLE
   through the registered --ghost-scan property instead; that is the right
   tool for a border on a pill of changing width, but here it would repaint
   the gradient every frame, while rotating a finished ring stays on the
   compositor. Same look, no per-frame paint, on an element that spins
   forever on every page.

   linear is deliberate and is the documented exception to the ease-in-out
   rule: an endless rotation with easing visibly stutters once per turn. */
.instinctor-bar-bottom::after{
    content:''!important;
    position:absolute!important;inset:0!important;
    border-radius:50%!important;
    background:conic-gradient(from 0deg,#000 0deg,rgba(0,0,0,0) 300deg,rgba(0,0,0,0) 360deg)!important;
    -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))!important;
            mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))!important;
    animation:instinctor-bar-ring-spin 2.4s linear infinite!important;
    pointer-events:none!important;
}
@keyframes instinctor-bar-ring-spin{to{transform:rotate(360deg)}}
#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}

    /* SMALLER AND QUIETER ON A PHONE. The launcher floats over whatever is
       scrolled beneath it, so no amount of layout padding stops it covering
       the last line of a paragraph: the only lever is how much it covers and
       how loudly. 36px at 0.8 takes a third off its footprint and lets the
       copy read through it, and it goes fully solid the moment it is touched.
       A scroll-idle retreat was tried first and rejected: these pages run a
       scroll engine that holds window.scrollY at 0 and fires scroll
       continuously, so the idle timer never fired and the launcher stayed
       hidden. */
    #instinctor-chat-bar{
        transform:scale(0.82)!important;
        transform-origin:bottom right!important;
        opacity:0.8!important;
        transition:opacity 200ms ease-in-out,transform 200ms ease-in-out!important;
    }
    #instinctor-chat-bar:active,
    #instinctor-chat-bar:hover{opacity:1!important;transform:scale(1)!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 14px 6px!important;gap:9px!important}
    .instinctor-ghost-bubble{max-width:88%!important}
}