/* Samantha Chat Specific Styles */

/* The main character image container */
.samantha-image-container {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 90vh; /* Adjust as needed */
    max-height: 800px;
    z-index: 5;
    pointer-events: none; /* Let clicks pass through */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    overflow: hidden;
}

.samantha-character-image {
    height: 100%;
    width: auto;
    object-fit: contain;
    object-position: bottom right;
    mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* Ensure messages don't overlap the image on desktop */
@media (min-width: 1024px) {
    #messages {
        /* Leave space on the right for Samantha */
        padding-right: 400px !important; 
    }
    
    /* Also constrain the input area */
    #chatForm {
        max-width: calc(100% - 350px); /* Keep input from going under the image */
    }
}

/* Mobile adjustments */
@media (max-width: 1023px) {
    .samantha-image-container {
        opacity: 0.1; /* Fade out on mobile to see text */
        right: -50px;
    }
}

/* Chat Bubbles */
.samantha-chat-bubble-left {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 20px 0;
    backdrop-filter: blur(10px);
}

.samantha-chat-bubble-right {
    background: var(--accent-primary, #B91C1C); /* Use Samantha Red */
    border-radius: 20px 20px 0 20px;
    color: white;
    box-shadow: 0 4px 20px rgba(185, 28, 28, 0.3);
}

/* Input Focus Glow */
#userInput:focus {
    box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.3), 0 0 20px rgba(185, 28, 28, 0.2);
}