/* Spark Chat Styling - Soft, Modern Message Design */
/* 
 * Dependencies: This file relies on CSS variables defined in:
 * - spark-colours.css (--bubble-user, --bubble-coach, --brand-accent-border, etc.)
 * - spark-spacing.css (--space-12, etc.)
 * - companion.css (--primary, --text-secondary, --surface-chat, etc.)
 * Ensure these files are loaded before spark-chat.css in App.razor
 */

/* Chat Bubble Base Styles */
.spark-chat-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: var(--radius-bubble);
    margin-bottom: 4px;
    animation: sparkFadeIn var(--fade-in-duration) var(--fade-in-ease);
    line-height: 1.4;
    font-size: 0.95rem;
    border: 1px solid transparent;
    /* Safe wrapping rules to prevent overflow */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    overflow: hidden;
}

/* User Bubble - Right-aligned, softer corners on bottom-right */
.spark-chat-bubble.user {
    background-color: var(--spark-bubble-user);
    border-color: var(--spark-bubble-user-border);
    align-self: flex-end;
    border-radius: var(--radius-bubble) var(--radius-bubble) 4px var(--radius-bubble);
}

/* Coach/Assistant Bubble - Left-aligned, softer corners on bottom-left */
.spark-chat-bubble.coach {
    background-color: var(--spark-bubble-coach);
    border-color: var(--spark-bubble-coach-border);
    align-self: flex-start;
    border-radius: var(--radius-bubble) var(--radius-bubble) var(--radius-bubble) 4px;
}

/* Timestamp Styling */
.spark-chat-timestamp {
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.7;
    margin-bottom: 10px;
}

/* User timestamp - right-aligned */
.spark-chat-timestamp.user-timestamp {
    text-align: right;
}

/* Coach timestamp - left-aligned */
.spark-chat-timestamp.coach-timestamp {
    text-align: left;
}

/* Fade-in Animation
   NOTE: sparkFadeIn keyframe is now defined in spark-interactions.css */

/* Chat Surface - Wraps the entire conversation area */
.spark-chat-surface {
    background: var(--surface-chat);
    border-radius: var(--radius-panel);
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Chat Feed - Message container with consistent gaps */
.spark-chat-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-12);
    flex: 1;
    overflow-y: auto;
    padding: var(--space-12) 0;
}

/* Hover effects for bubbles */
.spark-chat-bubble:hover {
    opacity: 0.97;
}

.spark-chat-bubble.user:hover {
    border-color: color-mix(in srgb, var(--primary) 30%, var(--spark-bubble-user-border));
}

.spark-chat-bubble.coach:hover {
    border-color: color-mix(in srgb, var(--primary) 20%, var(--spark-bubble-coach-border));
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .spark-chat-bubble {
        animation: none !important;
    }
    
    .spark-chat-bubble:hover {
        transform: none !important;
    }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 1024px) {
    .spark-chat-bubble {
        max-width: 80%;
    }
}

@media (max-width: 768px) {
    .spark-chat-bubble {
        max-width: 85%;
    }
    
    .spark-chat-surface {
        padding: var(--space-12);
    }
}

@media (max-width: 480px) {
    .spark-chat-bubble {
        max-width: 90%;
    }
}