/* ============================================
   SESHIO EMOJI SYSTEM - CSS
   ============================================ */

/* Base Emoji Styles */
.seshio-emoji {
    display: inline-block;
    vertical-align: bottom;
    line-height: 1;
    max-width: 100%;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Prevent layout shift during load */
.seshio-emoji[height] {
    aspect-ratio: 1;
}

/* Type-specific styles */
.seshio-emoji-svg {
    fill: currentColor;
}

.seshio-emoji-lottie {
    overflow: hidden;
    position: relative;
    display: inline-block !important;
    vertical-align: bottom !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.seshio-emoji-lottie svg {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: 100% !important;
    display: inline-block !important;
    vertical-align: bottom !important;
}

/* Size Context Modifiers */
h1 .seshio-emoji,
h2 .seshio-emoji,
h3 .seshio-emoji {
    height: 1.2em;
    margin: 0 0.2em;
}

h4 .seshio-emoji,
h5 .seshio-emoji,
h6 .seshio-emoji {
    height: 1.1em;
    margin: 0 0.15em;
}

p .seshio-emoji,
li .seshio-emoji,
td .seshio-emoji {
    height: 1.2em;
    margin: 0 0.1em;
}

/* Button context */
.button-seshio .seshio-emoji,
button .seshio-emoji,
.btn .seshio-emoji {
    height: 1em;
    margin-right: 0.5em;
    margin-left: 0;
    vertical-align: baseline;
}

.button-seshio .seshio-emoji:last-child,
button .seshio-emoji:last-child {
    margin-right: 0;
    margin-left: 0.5em;
}

.button-seshio .seshio-emoji:only-child,
button .seshio-emoji:only-child {
    margin: 0;
}

/* Hover Effects */
.seshio-emoji:hover {
    transform: scale(1.1);
}

a:hover .seshio-emoji,
.button-seshio:hover .seshio-emoji {
    transform: translateX(2px);
}

/* Animation States */
.seshio-emoji-hover-gif {
    cursor: pointer;
}

.seshio-emoji-hover-gif:hover {
    transform: scale(1.05);
}

.seshio-emoji-paused {
    position: relative;
}

.seshio-emoji-paused::after {
    content: '▶';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6em;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.seshio-emoji-paused:hover::after {
    opacity: 1;
}

/* Category-specific styles */
.seshio-emoji-cat-ui {
    /* UI elements often need consistent sizing */
}

.seshio-emoji-cat-reactions {
    /* Reactions might have bounce animation */
}

.seshio-emoji-cat-reactions:hover {
    animation: emoji-bounce 0.5s ease;
}

@keyframes emoji-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10%); }
}

.seshio-emoji-cat-status {
    /* Status indicators might not scale on hover */
    transition: filter 0.2s ease;
}

.seshio-emoji-cat-status:hover {
    transform: none;
    filter: brightness(1.2);
}

/* Color Modes */
.seshio-emoji-svg[data-color-mode="inherit"] {
    color: inherit;
}

/* Animations */
.seshio-emoji-loop {
    animation-iteration-count: infinite;
}

.seshio-emoji-hover-play {
    animation-play-state: paused;
}

.seshio-emoji-hover-play:hover {
    animation-play-state: running;
}

/* Loading States */
.seshio-emoji-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: emoji-loading 1.5s infinite;
    border-radius: 4px;
}

@keyframes emoji-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Responsive Styles */
@media (max-width: 768px) {
    .seshio-emoji {
        height: 0.9em;
    }
    
    h1 .seshio-emoji,
    h2 .seshio-emoji,
    h3 .seshio-emoji {
        height: 1em;
    }
    
    /* Disable hover effects on touch devices */
    @media (hover: none) {
        .seshio-emoji:hover {
            transform: none;
        }
        
        a:hover .seshio-emoji,
        .button-seshio:hover .seshio-emoji {
            transform: none;
        }
    }
}

/* Dark Mode Support (if theme has it) */
@media (prefers-color-scheme: dark) {
    .seshio-emoji-cat-ui.seshio-emoji-svg {
        filter: brightness(0.9);
    }
}

/* Print Styles */
@media print {
    .seshio-emoji {
        height: 1em !important;
        margin: 0 0.1em !important;
        animation: none !important;
    }
    
    .seshio-emoji-paused::after {
        display: none;
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .seshio-emoji {
        animation: none !important;
        transition: none !important;
    }
    
    .seshio-emoji:hover {
        transform: none !important;
    }
    
    .seshio-emoji-hover-gif[data-animated-src] {
        /* Don't swap to animated version */
        pointer-events: none;
    }
}

/* Integration with Seshio Theme Classes */
.text-seshio-purple .seshio-emoji-svg {
    color: var(--seshio-purple);
}

.text-seshio-green .seshio-emoji-svg {
    color: var(--seshio-green);
}

.text-seshio-blue .seshio-emoji-svg {
    color: var(--seshio-blue);
}

.bg-seshio-black .seshio-emoji-svg[data-color-mode="inherit"] {
    color: var(--seshio-white);
}

/* Utility Classes */
.seshio-emoji-inline {
    height: 1em !important;
    margin: 0 0.2em !important;
}

.seshio-emoji-block {
    display: block;
    margin: 1em auto;
}

.seshio-emoji-large {
    height: 2em !important;
}

.seshio-emoji-small {
    height: 0.8em !important;
}

.seshio-emoji-spin {
    animation: emoji-spin 2s linear infinite;
}

@keyframes emoji-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.seshio-emoji-pulse {
    animation: emoji-pulse 2s ease-in-out infinite;
}

@keyframes emoji-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(0.95); }
}