/* Scoped Styles for Expert QA */

.widget-container {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2xl);
    overflow: visible;
    transition: all var(--transition-normal);
    position: relative;
    box-shadow: var(--shadow-sm);
    max-width: 100%;
    width: 100%;
}

.widget-container:hover,
.widget-container.hovered,
.widget-container.focused {
    box-shadow: var(--shadow-md);
}

/* --- Hover Reveal --- */
.hover-reveal {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: var(--accent-bg-subtle);
    transition: max-height var(--transition-normal), opacity var(--transition-normal);
    visibility: hidden; /* Ensure completely hidden */
}

.widget-container:hover .hover-reveal,
.widget-container.hovered .hover-reveal,
.widget-container.focused .hover-reveal {
    max-height: 100px; /* Enough for content */
    opacity: 1;
    visibility: visible;
}

.hover-content {
    padding: var(--spacing-3) var(--spacing-4);
    border-bottom: 1px solid var(--accent-border-light);
}

.enter-showroom-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bg-surface);
    border: 1px solid var(--accent-border-light);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.enter-showroom-btn:hover {
    border-color: var(--accent-border-light);
    box-shadow: var(--shadow-sm);
}

.btn-title {
    font-size: 12px;
    font-weight: var(--font-weight-bold);
    color: var(--accent-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.icon-external {
    opacity: 0.4;
}

.icon-arrow {
    color: var(--accent-icon);
    transition: transform var(--transition-fast);
}

.enter-showroom-btn:hover .icon-arrow {
    color: var(--color-brand-accent);
    transform: translateX(2px);
}


/* --- Header --- */
.header-section {
    display: flex;
    gap: var(--spacing-4);
    padding: var(--spacing-4);
    padding-bottom: 0;
    padding-top: var(--spacing-4);
    position: relative;
    z-index: 10;
    background-color: var(--bg-surface);
}

.avatar-container {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    overflow: visible;
}

.avatar {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: var(--shadow-sm);
    border: 2px solid var(--bg-surface);
}

.status-indicator {
    position: absolute;
    /*
     * POSITIONING LOGIC FOR CIRCULAR AVATAR:
     * 
     * The avatar is a 48px circle (border-radius: full) inside a 48px square container.
     * The circle's center is at (24px, 24px) from top-left, with radius 24px.
     * 
     * At 45° angle (bottom-right diagonal), a point on the circle's edge is:
     *   x = 24 + 24*cos(45°) = 24 + 16.97 ≈ 40.97px from left
     *   y = 24 + 24*sin(45°) = 24 + 16.97 ≈ 40.97px from top
     * 
     * From the container's bottom-right corner (48px, 48px):
     *   bottom = 48 - 40.97 = 7px (edge point is 7px inside the corner)
     *   right = 48 - 40.97 = 7px
     * 
     * To center a 12px indicator on this edge point (half in, half out):
     *   - The indicator's center needs to be at 7px from the corner
     *   - When using bottom/right positioning, the element's bottom-right corner is positioned
     *   - To place the center at 7px: position bottom-right at (7px - 6px) = 1px
     *   - This centers the indicator exactly on the circular edge, creating a perfect half-in/half-out overlap
     *   - Result: 6px of the indicator extends outside the circle, 6px stays inside
     */
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    background-color: var(--color-success);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-surface);
    z-index: 1;
}

.header-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0; /* Critical for flexbox text wrapping */
    flex: 1; /* Take up remaining space */
}

.name-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    position: relative;
    overflow: visible;
}

.toggle-btn {
    margin-left: auto;
    padding: 4px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: none; /* Hidden by default, shown in conversation mode */
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    isolation: isolate; /* Create new stacking context */
}

.toggle-btn:not(.hidden) {
    display: flex;
}

.toggle-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.toggle-btn.active {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.copy-chat-btn {
    margin-left: var(--spacing-2);
    padding: 4px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    display: none; /* Hidden by default, shown in conversation mode */
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    width: 24px;
    height: 24px;
    position: relative;
    flex-shrink: 0;
    isolation: isolate; /* Create new stacking context */
}

.copy-chat-btn:not(.hidden) {
    display: flex;
}

.copy-chat-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.name {
    font-size: 16px;
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
}

.badge {
    padding: 2px 8px;
    font-size: 10px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: var(--bg-surface-hover);
    color: var(--text-secondary);
    border-radius: var(--radius-full);
}

.helper-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: normal; /* Ensure wrapping */
    overflow: visible; /* Don't clip */
}

.highlight {
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}


/* --- Conversation Area --- */
.conversation-area {
    position: relative;
    width: 100%;
    min-height: 200px;
    max-height: none;
    padding: var(--spacing-4);
    padding-bottom: var(--spacing-4);
    background-color: var(--bg-surface);
    overflow: visible;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.messages-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    flex: 1;
    padding-bottom: 0;
    align-items: flex-start; /* Default: left-align AI messages */
}

/* Center messages that contain blocks when container is wide */
.messages-container .message.ai.has-blocks {
    align-self: center !important;
    max-width: 700px !important;
    width: 100%;
}

.message {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    max-width: 85%;
}

.message.user {
    align-self: flex-end;
    align-items: flex-end;
}

.message.ai {
    align-self: flex-start;
    align-items: flex-start;
}

.message.user .message-bubble {
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    border-radius: var(--radius-lg) var(--radius-lg) 2px var(--radius-lg);
}

/* Blocks should have a fixed max-width for readability and be centered */
.message-blocks {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    width: 100%;
    min-height: 0;
    max-width: 700px; /* Fixed max-width for optimal readability */
    margin-left: auto; /* Center blocks when container is wider than max-width */
    margin-right: auto; /* Center blocks when container is wider than max-width */
}

/* When AI message contains blocks, center the message container itself */
/* Using :has() selector - if not supported, blocks will still center via margin: auto */
.message.ai:has(.message-blocks) {
    align-self: center; /* Center AI messages that contain blocks */
    max-width: 700px; /* Match blocks max-width */
    width: 100%; /* Allow full width so centering works */
}

/* Fallback: If :has() is not supported, use a class-based approach */
/* We'll add this class via JavaScript when blocks are present */
/* Override the 85% max-width from .message.ai to allow proper centering */
.message.ai.has-blocks {
    align-self: center !important;
    max-width: 700px !important; /* Override 85% constraint */
    width: 100%;
}

.message-blocks .chatkit-card {
    width: 100%;
    margin: 0;
    flex-shrink: 0;
}

.message.ai .message-bubble {
    background-color: var(--text-primary);
    color: var(--bg-surface);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 2px;
}

.message-bubble {
    padding: var(--spacing-3) var(--spacing-4);
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-copy-btn {
    margin-top: var(--spacing-2);
    padding: 4px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    width: 24px;
    height: 24px;
    opacity: 0.6;
    position: relative;
}

.message-copy-btn:hover {
    background: var(--bg-surface-hover);
    border-color: var(--border-default);
    color: var(--text-primary);
    opacity: 1;
}

.message-copy-btn svg {
    width: 14px;
    height: 14px;
}

/* Custom Tooltip Styles */
.tooltip-portal {
    position: fixed;
    padding: 6px 10px;
    background-color: #1a1a1a;
    color: #fff;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 150ms ease;
    max-width: calc(100vw - 20px);
    box-sizing: border-box;
}

/* Arrow pointing UP toward the button (tooltip appears below) - default */
.tooltip-portal::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1a1a1a;
}

/* Arrow pointing LEFT toward the button (tooltip appears to the right) */
.tooltip-portal.tooltip-right::before {
    bottom: auto;
    left: auto;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1a1a1a;
    border-bottom-color: transparent;
}

.tooltip-portal.visible {
    opacity: 1;
    visibility: visible;
}

.message.user.hidden {
    display: none;
}

/* =============================================
   FLOATING MARQUEE - Responsive Behavior
   
   JS controls layout based on whether all 4 chips fit in one row:
   - If they fit: static single row, no animation
   - If they don't fit: scrolling animation with hover-to-expand
   
   CSS classes applied by JS:
   - .static-row: All 4 fit in one row
   - .scrolling: Needs animation (default behavior)
   ============================================= */

.floating-marquee {
    margin-top: var(--spacing-3);
    padding: var(--spacing-2);
    padding-left: var(--spacing-3); 
    padding-right: var(--spacing-3);
    position: relative;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 44px;
}

/* Default: Scrolling marquee */
.floating-marquee-track {
    display: flex;
    gap: var(--spacing-2);
    width: max-content;
    animation: floatingMarquee 20s linear infinite;
}

/* Show duplicates for seamless scrolling by default */
.floating-marquee-track .chip[data-duplicate="true"] {
    display: block;
}

/* Fade edges for scroll indication */
.floating-marquee::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 16px;
    pointer-events: none;
    background: linear-gradient(to right, var(--bg-surface), transparent);
    z-index: 1;
}

.floating-marquee::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    background: linear-gradient(to left, var(--bg-surface), transparent);
    z-index: 1;
}

/* Base chip styles for floating marquee */
.floating-marquee .chip {
    font-size: 12px;
    padding: 8px 12px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--transition-fast);
    box-sizing: border-box;
    position: relative;
}

.floating-marquee .chip:hover {
    transform: translateY(-1px);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

/* =============================================
   STATIC ROW MODE - All 4 chips fit in one row
   ============================================= */
.floating-marquee.static-row {
    overflow: visible;
}

.floating-marquee.static-row::before,
.floating-marquee.static-row::after {
    display: none;
}

.floating-marquee.static-row .floating-marquee-track {
    animation: none;
    display: flex;
    justify-content: flex-start;
    width: 100%;
}

.floating-marquee.static-row .floating-marquee-track .chip[data-duplicate="true"] {
    display: none !important;
}

/* =============================================
   SCROLLING MODE - Hover expands to grid
   ============================================= */
.floating-marquee.scrolling:hover {
    overflow: visible;
}

.floating-marquee.scrolling:hover::before,
.floating-marquee.scrolling:hover::after {
    display: none;
}

.floating-marquee.scrolling:hover .floating-marquee-track {
    animation: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: var(--spacing-2);
    transform: none !important;
}

.floating-marquee.scrolling:hover .floating-marquee-track .chip[data-duplicate="true"] {
    display: none !important;
}

.floating-marquee.scrolling:hover .chip {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================
   MOBILE (<400px): Single column, text wraps
   ============================================= */
@media (max-width: 399px) {
    .floating-marquee {
        overflow: visible !important;
    }
    
    .floating-marquee::before,
    .floating-marquee::after {
        display: none !important;
    }
    
    .floating-marquee-track {
        animation: none !important;
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
        transform: none !important;
    }
    
    .floating-marquee-track .chip[data-duplicate="true"] {
        display: none !important;
    }
    
    .floating-marquee .chip {
        white-space: normal;
        line-height: 1.3;
        width: 100%;
    }
}

@keyframes floatingMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- Content Area (Initial State) --- */
.content-area {
    position: relative;
    width: 100%;
    min-height: 60px;
    padding: var(--spacing-3) 0;
    background-color: var(--bg-surface);
    overflow: hidden;
}

/* Marquee Styles */
.marquee-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px; /* Fixed height for chips */
}

.marquee-track {
    display: flex;
    gap: var(--spacing-2);
    padding-left: var(--spacing-4);
    animation: marquee 45s linear infinite;
    width: max-content;
}

.chip {
    white-space: nowrap;
    border: 1px solid var(--border-subtle);
    background-color: var(--bg-surface-subtle);
    color: var(--text-secondary);
    padding: 6px 12px;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.fade-left, .fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 10;
    pointer-events: none;
}

.fade-left {
    left: 0;
    background: linear-gradient(to right, var(--bg-surface), transparent);
}

.fade-right {
    right: 0;
    background: linear-gradient(to left, var(--bg-surface), transparent);
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* List Styles (Active State) */
.list-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    padding: 0 var(--spacing-4);
}

.list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--spacing-2) var(--spacing-3);
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    text-align: left;
    transition: all var(--transition-fast);
    overflow: hidden; /* Clip overflow */
}

.list-item span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
    min-width: 0; /* Allow flex item to shrink below content size */
}

.list-item:hover {
    background-color: var(--bg-surface);
    border-color: var(--border-default);
    box-shadow: var(--shadow-sm);
    transform: scale(0.995);
}

.list-item .arrow {
    opacity: 0;
    color: var(--text-primary);
    transform: translateX(-4px);
    transition: all var(--transition-fast);
}

.list-item:hover .arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Utility Classes */
.hidden {
    display: none !important;
}


/* --- Footer Input --- */
.footer-section {
    padding: var(--spacing-4);
    padding-top: 0;
    background-color: var(--bg-surface);
    position: relative;
    z-index: 10;
}

.show-all-blocks-wrapper {
    margin-bottom: var(--spacing-3);
    display: flex;
    justify-content: center;
}

.show-all-blocks-btn {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-4);
    background-color: var(--accent-bg);
    color: var(--accent-text);
    border: 1px solid var(--accent-border);
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--shadow-sm);
}

.show-all-blocks-btn:hover {
    background-color: var(--accent-bg-hover);
    border-color: var(--accent-border-hover);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.show-all-blocks-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

.show-all-blocks-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.input-wrapper {
    display: flex;
    align-items: center;
    padding-left: var(--spacing-3);
    background-color: var(--bg-surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    position: relative;
}

.input-wrapper.focused {
    background-color: var(--bg-surface);
    border-color: var(--border-default);
    /* Focus ring: very thin ring with subtle shadow like OpenAI */
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.08);
}

input[type="text"] {
    flex: 1;
    border: none;
    background: transparent;
    padding: var(--spacing-2) 0;
    padding-right: 34px; /* Space for smaller circular send button (28px + 6px gap) */
    font-size: 14px;
    outline: none;
    color: var(--text-primary);
    min-width: 0;
}

input::placeholder {
    color: var(--text-tertiary);
}

.send-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--text-primary);
    color: var(--bg-surface);
    border-radius: var(--radius-full);
    border: none;
    padding: 0;
    margin: 0;
    transition: all var(--transition-fast);
    cursor: pointer;
    /* Equal gap: 4px from right, vertically centered for equal top/bottom spacing */
    /* No shadow on black button - cleaner, more modern flat design */
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

.send-btn svg {
    display: block;
    width: 14px;
    height: 14px;
}

.send-btn.hidden {
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
    pointer-events: none;
}

.send-btn:hover:not(:active) {
    background-color: var(--text-secondary);
    transform: translateY(-50%) translateX(0) scale(1.08);
    /* Subtle shadow only on hover for depth */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.send-btn:active {
    background-color: var(--text-primary);
    transform: translateY(-50%) translateX(0) scale(0.98);
    box-shadow: var(--shadow-sm);
}

/* --- Disclaimer Footer (Outside widget container) --- */
.disclaimer-footer {
    margin-top: var(--spacing-2);
    padding: 0 var(--spacing-4) var(--spacing-4);
    text-align: center;
}

.disclaimer-text {
    font-size: 10px;
    line-height: 1.4;
    color: var(--text-tertiary);
    margin: 0;
    letter-spacing: 0.01em;
}

/* =========================================
   SQUARE CORNERS OVERRIDES
   ========================================= */
:root[data-corners="square"] .widget-container,
:root[data-corners="square"] .enter-showroom-btn,
:root[data-corners="square"] .badge,
:root[data-corners="square"] .chip,
:root[data-corners="square"] .list-item,
:root[data-corners="square"] .input-wrapper {
    border-radius: 0;
}

/* Send button stays circular even with square corners */
:root[data-corners="square"] .send-btn {
    border-radius: var(--radius-full) !important;
}

:root[data-corners="square"] .avatar {
    border-radius: 0 !important;
}

:root[data-corners="square"] .status-indicator {
    border-radius: 50% !important; /* Keep round */
    bottom: -6px;
    right: -6px;
    border: 2px solid var(--bg-surface);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}