/* TimTalk.css - Styles for the TimTalk messaging system */

.timtalk-container {
    font-family: 'Calibri', Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Modal overlay for dialog mode - blocks page interaction */
.timtalk-modal-overlay {
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    /* Note: To make completely transparent, change background-color 
       in TimTalk.js to rgba(0, 0, 0, 0) and remove backdrop-filter */
}

.timtalk-character {
    transition: all 0.1s ease-out;
}

.timtalk-speech-bubble {
    animation: bubblePop 0.3s ease-out;
}

.timtalk-text {
    line-height: 1.2;
    word-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
}

/* Animation for speech bubble appearance */
@keyframes bubblePop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fade effects for container */
.timtalk-container.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

.timtalk-container.fade-out {
    animation: fadeOut 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Phone fit is handled in TimTalk.js: the artwork is scaled as a whole.
   Do not scale .timtalk-container here — a stylesheet scale leaves the
   bubble and buttons off the right edge of a phone. */

.timtalk-buttons-dock .timtalk-button {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .timtalk-text {
        text-shadow: 1px 1px 2px white;
        font-weight: 900;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timtalk-character {
        transition: none;
    }
    
    .timtalk-speech-bubble {
        animation: none;
    }
    
    .timtalk-container.fade-in,
    .timtalk-container.fade-out {
        animation: none;
    }
}