/* Grovidex Support AI — Chat Widget
 * All selectors prefixed .gsai- to avoid collisions with theme/other-plugin
 * CSS on the host site. No CSS framework dependency — plain, scoped rules.
 *
 * Appearance Integration - reserved CSS custom property names.
 * --gsai-primary-color and --gsai-secondary-color are wired up below
 * (toggle button, header, message bubbles, send button, input focus
 * border). --gsai-background-color / --gsai-text-color /
 * --gsai-border-color are reserved now, per explicit request, but not
 * used anywhere yet - naming them ahead of their first real consumer
 * avoids inconsistent naming later (e.g. if themes or dark mode are
 * added), the same "define ahead of need" pattern already used
 * elsewhere in this project's admin design system.
 */

.gsai-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Prevents the exact regression this caused before: .gsai-widget
       has no explicit size of its own - it sizes itself from its
       normal-flow children. .gsai-window is position: absolute, which
       contributes nothing to that sizing. .gsai-toggle was the only
       element .gsai-widget sized itself around, so hiding it (needed
       for the button-hides-on-open requirement below) collapsed
       .gsai-widget toward zero, which broke .gsai-window's position
       calculation (computed relative to that now-collapsed box).
       This min-width/min-height guarantees a non-zero box regardless
       of which children are visible, independent of that mechanism
       entirely. */
    min-width: 48px;
    min-height: 48px;
    /* Drag offset, applied as a transform rather than overwriting
       left/top/right/bottom - keeps the bottom/right anchor above
       doing its own responsive work untouched, and avoids inline
       pixel values fighting a theme's own CSS for this element. Set
       via JS as CSS custom properties (widget.js's applyPosition());
       defaults to no offset at all when never dragged. */
    --gsai-dx: 0px;
    --gsai-dy: 0px;
    transform: translate(var(--gsai-dx), var(--gsai-dy));
}

/* Appearance Integration, Checkpoint 2: Position (bottom-left).
   Deliberately only swaps the CSS anchor itself - the drag system
   (see the "Draggable positioning" section further down) computes
   entirely from getBoundingClientRect() measured pixel positions, not
   from these left/right property names, so its own math is unaffected
   by which side is anchored. Not independently verified in a real
   browser against this specific class, only reasoned through from the
   drag code's own measurement approach - flagged as a residual
   uncertainty, not claimed as fully tested. */
.gsai-widget.gsai-position-left {
    right: auto;
    left: 20px;
}

.gsai-toggle {
    height: 48px;
    padding: 0 22px;
    border-radius: 24px;
    border: none;
    /* Appearance Integration, Checkpoint 2: fallback (#0F5C5C) is
       identical to the value that was hardcoded here before this
       change - an existing site with no Appearance color ever saved
       sees zero visual difference. */
    background: var(--gsai-primary-color, #0F5C5C);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.gsai-toggle:hover {
    /* Not variable-driven - CSS cannot derive a darker shade of an
       arbitrary custom color without a preprocessor, which this
       project deliberately does not use. A custom primary color will
       have a fixed (not proportionally darkened) hover shade - a
       known, minor simplification, not an oversight. */
    background: #0c4a4a;
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.gsai-toggle:active {
    transform: scale(0.96);
}

/* Drag/snap additions — purely additive on top of the existing
   fixed-position .gsai-widget. See widget.js for the drag
   implementation; these classes are only ever toggled by JS, never
   present by default, so a site with JS disabled or an older cached
   widget.js sees identical behavior to before. */

.gsai-widget.gsai-dragging .gsai-toggle {
    cursor: grabbing;
    transition: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gsai-widget.gsai-dragging .gsai-toggle:hover {
    transform: none;
}

.gsai-widget.gsai-snapping {
    transition: transform 0.18s ease-out;
}

.gsai-toggle-label {
    display: block;
}

.gsai-toggle-label-close {
    display: none;
    font-size: 24px;
    line-height: 1;
}

.gsai-widget[data-state="open"] .gsai-toggle-label-open {
    display: none;
}

.gsai-widget[data-state="open"] .gsai-toggle-label-close {
    display: block;
}

.gsai-window {
    display: none;
    flex-direction: column;
    position: absolute;
    /* Position is entirely JS-computed (smart positioning) - no fixed
       bottom/right values. Set fresh every time the popup opens, via
       computeSmartPopupPosition(), based on the floating button's
       actual current position - not a static anchor. Fallback 0px
       values here are only relevant if JS somehow hasn't run yet,
       which in practice never happens: nothing about this widget
       (including opening the popup at all) works without JS in the
       first place. */
    top: var(--gsai-window-top, 0px);
    left: var(--gsai-window-left, 0px);
    width: 360px;
    height: 520px;
    max-height: calc(100vh - 120px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.gsai-widget[data-state="open"] .gsai-window {
    display: flex;
}

/* Button hides while the popup is open - the popup's own header
   close button is the way to close instead. Safe against the
   collapse regression this caused before, because .gsai-widget now
   has an explicit min-width/min-height above, independent of which
   children are visible. */
.gsai-widget[data-state="open"] .gsai-toggle {
    display: none;
}

/* Appearance Integration, Checkpoint 2: every var(--gsai-secondary-color, ...)
   below (header, visitor message bubble, input focus border, send
   button) shares one fallback (#2563eb) - identical to what was
   hardcoded at each of these 4 places before this change, so an
   existing site with no Appearance color ever saved sees zero visual
   difference. */
.gsai-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--gsai-secondary-color, #2563eb);
    color: #fff;
    flex-shrink: 0;
    /* Drag handle for the open popup - matches .gsai-toggle's own
       touch-action/user-select treatment for reliable dragging. The
       close button inside this header is excluded from drag-initiation
       at the JS level (checked before any of this even applies), so
       this doesn't interfere with it being tapped normally. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    cursor: grab;
}

.gsai-widget.gsai-dragging .gsai-header {
    cursor: grabbing;
}

.gsai-header-title {
    font-size: 15px;
    font-weight: 600;
}

.gsai-header-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}

.gsai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f7f8fa;
}

.gsai-message {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
}

.gsai-message-visitor {
    align-self: flex-end;
    background: var(--gsai-secondary-color, #2563eb);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.gsai-message-ai {
    align-self: flex-start;
    background: #fff;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    border-bottom-left-radius: 4px;
}

.gsai-message-system {
    align-self: center;
    background: transparent;
    color: #6b7280;
    font-size: 12.5px;
    text-align: center;
    max-width: 100%;
}

/* AI Unavailable Fallback bug fix - replaces the previous misleading
   "connected you with a member of our support team" system message.
   Styled distinctly from a regular message bubble (a bordered card,
   not a bubble) so it visually reads as a distinct state, not just
   another chat line. */

.gsai-fallback-card {
    align-self: stretch;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 14px 16px;
    max-width: 100%;
}

.gsai-fallback-card-title {
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
    margin-bottom: 4px;
}

.gsai-fallback-card-message {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 12px;
}

.gsai-fallback-card-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gsai-fallback-card-action {
    display: block;
    text-align: center;
    padding: 9px 12px;
    border-radius: 8px;
    background: var(--gsai-secondary-color, #2563eb);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.gsai-fallback-card-action:hover {
    opacity: 0.9;
}

.gsai-status {
    padding: 6px 16px;
    font-size: 12.5px;
    color: #6b7280;
    background: #f7f8fa;
    flex-shrink: 0;
}

.gsai-status[data-tone="error"] {
    color: #b91c1c;
}

.gsai-composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid #e5e7eb;
    background: #fff;
    flex-shrink: 0;
}

.gsai-input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 20px;
    padding: 9px 14px;
    font-size: 14px;
    outline: none;
}

.gsai-input:focus {
    border-color: var(--gsai-secondary-color, #2563eb);
}

.gsai-send {
    height: 36px;
    padding: 0 16px;
    border-radius: 18px;
    border: none;
    background: var(--gsai-secondary-color, #2563eb);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.gsai-send:disabled {
    opacity: 0.5;
    cursor: default;
}

.gsai-typing {
    display: flex;
    gap: 3px;
    padding: 2px 4px;
}

.gsai-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9ca3af;
    animation: gsai-typing-bounce 1.2s infinite ease-in-out;
}

.gsai-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.gsai-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes gsai-typing-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.5;
    }
    30% {
        transform: translateY(-4px);
        opacity: 1;
    }
}

/* Mobile: floating panel anchored to the SUPPORT button, sized for
   mobile screens - not a full-screen takeover. Uses the same
   position: absolute (relative to .gsai-widget) desktop already uses,
   just with mobile-appropriate width/height/margins. */
@media (max-width: 480px) {
    .gsai-widget {
        bottom: 16px;
        right: 16px;
    }

    .gsai-window {
        /* Caps at 360px on wider phones; shrinks to fit with a 16px
           margin on both sides on narrower ones (calc(100vw - 32px)) -
           whichever is smaller. min() is well-supported on every
           mobile browser this widget targets. */
        width: min(360px, calc(100vw - 32px));
        max-height: 75vh;
        /* top/left are NOT overridden here - inherited from the base
           .gsai-window rule's JS-driven custom properties (smart
           positioning), same mechanism as desktop. No fixed
           bottom/right anchor on mobile either now. */
        /* border-radius and box-shadow are intentionally not
           overridden here - both stay exactly as the base .gsai-window
           rule above already defines them. */
    }

    .gsai-toggle {
        height: 44px;
        padding: 0 18px;
        font-size: 13px;
    }
}