/* ========================================================
   ATIKIA: AI Bot Tour - Animations & Styling
======================================================== */

/* Prevent scroll overflow during pinning */
.ai-tour-section {
    position: relative;
    /* We don't hide overflow-y entirely so scrolling works, GSAP handles pin */
}

/* Single Code Wrapper Layout (Option 2) */
.ai-tour-code-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    width: 100%;
}

/* ── Avatar Bot SVG System (Inside .ai-bot-avatar wrapper) ── */
.ai-bot-avatar {
    flex-shrink: 0;
}

.ai-avatar-svg {
    width: 60px;
    height: 60px;
    display: block;
    overflow: visible;
}

.ai-avatar-ring {
    stroke: transparent;
    stroke-width: 0.5px;
    transition: stroke-width 0.4s ease-out;
    fill: none;
    /* Gradient applied via SVG defs or stroke attr */
}

.ai-avatar-ring.is-active {
    stroke-width: 6px;
    /* Stroke color handles gradient via defs */
}

.ai-avatar-text {
    opacity: 0;
    pointer-events: none;
}

.ai-avatar-dot {
    transform-origin: center;
    /* Breathing animation applied via GSAP when active */
}


/* ── Chat Window Layout ── */
.ai-chat-window {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    width: 100%;
    max-width: 500px;
    margin-left: auto; /* Aligns to right panel naturally */
}

/* Base Bubble Row */
.ai-bubble-row {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    opacity: 0;
    transform: translateY(10px);
    will-change: transform, opacity;
}

.ai-bubble-row--bot {
    justify-content: flex-start;
    align-items: flex-end;
}

.ai-bubble-row--user {
    justify-content: flex-end;
    align-items: flex-end;
}

.ai-bubble {
    padding: 15px 20px;
    font-size: 16px;
    line-height: 1.5;
    max-width: 80%;
    color: #554e5a;
    box-shadow: 0px 4px 8px -2px rgba(16,24,40,0.05);
}

/* Bot bubbles point top-left (or bottom-left depending on design, Figma says rounded-tl-[0]) */
/* Actually Figma lines say rounded-bl-[20px] rounded-br-[20px] rounded-tr-[20px] -> top-left is sharp */
.ai-bubble-row--bot .ai-bubble {
    background-color: #FFFFFF;
    border-radius: 0 20px 20px 20px;
}

/* User bubbles point top-right (rounded-bl-[20px] rounded-br-[20px] rounded-tl-[20px] -> top-right is sharp) */
.ai-bubble-row--user .ai-bubble {
    background-color: #FFFFFF;
    border-radius: 20px 0 20px 20px;
}

/* Avatar inside row */
.ai-bubble-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: visible; /* To allow the bot SVG to overflow safely */
    flex-shrink: 0;
}

/* For the User Photo */
.ai-bubble-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Bot SVG within the Chat ── */
.ai-bot-avatar-svg {
    width: 54px;
    height: 54px;
    display: block;
    overflow: visible;
    margin-left: -5px; 
    margin-bottom: -5px;
}

.ai-avatar-ring {
    stroke: transparent;
    stroke-width: 0px; 
}
.ai-avatar-ring.is-active {
    /* controlled via gsap */
}
.ai-avatar-text {
    opacity: 1; /* Visible by default! */
    pointer-events: none;
}
.ai-avatar-dot {
    transform-origin: center;
}

/* ── Choice Chips ── */
.ai-chips-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
    padding-left: 60px; /* Offset for Bot avatar */
    opacity: 0;
}

.ai-chip {
    background-color: #FFFFFF;
    color: #554E5A;
    padding: 12px 16px;
    border-radius: 20px;
    font-size: 16px;
    cursor: default;
    transition: all 0.2s ease;
}

/* When the phantom mouse clicks it */
.ai-chip.is-clicked {
    background: linear-gradient(180deg, #AC4DFF 0%, #6500BD 100%);
    color: #FFFFFF;
    border: none;
}

/* ── Thinking Indicator ── */
.ai-thinking-indicator {
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 16px 24px !important;
    height: 60px;
    min-width: 60px;
    box-sizing: border-box;
    justify-content: center;
}

.ai-thinking-bar {
    width: 3px;
    background-color: #8927de;
    border-radius: 2px;
    height: 18px; 
    /* GSAP orchestrates the scaleY pulse */
}


/* ── Phantom Mouse ── */
.phantom-mouse-wrapper {
    position: absolute;
    top: 50vh; /* Starting arbitrary pos */
    left: -100px; /* Outside screen initially */
    z-index: 999;
    pointer-events: none; /* Ignore pointer events */
    /* GSAP moves this wrapper around */
}

.phantom-mouse {
    width: 24px;
    height: 24px;
    /* GSAP scales this element directly for the squeeze */
    transform-origin: 20% 20%; 
}

/* Hide property slider initially so GSAP can slide it up */
.ai-tour-slider {
    opacity: 0;
    transform: translateY(50px);
}