@tailwind base;
@tailwind components;
@tailwind utilities;

.custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #cbd5e1; border-radius: 20px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background-color: #94a3b8; }

@keyframes popIn {
  0% { opacity: 0; transform: scale(0.95) translateY(5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.animate-pop-in { animation: popIn 0.1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in { animation: fadeIn 0.2s ease-out forwards; }

@keyframes floatGhost {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-15px) rotate(5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-15px) rotate(-5deg); }
}
.ghost-float {
    animation: floatGhost 6s ease-in-out infinite;
    transition: left 2s ease, top 2s ease, opacity 0.5s ease;
    z-index: 0; 
    pointer-events: none;
}

.hidden { display: none; }
.icon { width: 1.125rem; height: 1.125rem; }
.icon-sm { width: 0.875rem; height: 0.875rem; }
.icon-lg { width: 1.5rem; height: 1.5rem; }
.z-100 { z-index: 100; }

.rich-input {
    min-height: 60px;
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap; 
    word-break: break-word;
    outline: none;
}
.rich-input:empty:before {
    content: attr(placeholder);
    color: #94a3b8;
    pointer-events: none;
    display: block;
}

.word-token {
    margin: 0; padding: 0; display: inline-block;
    border-bottom-width: 2px; position: relative;
    line-height: 1.4;
}
.word-token::after {
    content: attr(data-emoji);
    font-size: 0.6em; vertical-align: super; opacity: 0.7; margin-left: 1px;
    line-height: 0; user-select: none; pointer-events: none;
}

.prompt-card { transition: all 0.2s; white-space: nowrap; cursor: pointer; user-select: none; }
.prompt-card.selected { background-color: #eff6ff; border-color: #0ea5e9; color: #0284c7; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

.editable-alias { cursor: text; transition: all 0.2s; border-radius: 4px; padding: 2px 4px; }
.editable-alias:hover { background-color: #f1f5f9; }
.editable-alias:focus { background-color: white; outline: 2px solid #0ea5e9; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }

.shadow-ui {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}
.shadow-ui:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Styles pour le menu mobile et layout */
body.menu-open { overflow: hidden; }
#main-sidebar { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

body {
    background-color: #f8fafc;
    background-image: 
        radial-gradient(at 0% 0%, hsla(37,100%,96%,1) 0, transparent 50%), 
        radial-gradient(at 100% 100%, hsla(210,100%,96%,1) 0, transparent 50%);
    background-attachment: fixed;
}

.typing-dot { animation: typing 1.4s infinite ease-in-out both; }
.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }

.shimmer {
    position: relative;
    overflow: hidden;
}
.shimmer::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
    transform: skewX(-25deg);
    animation: shimmer 5s infinite;
}
@keyframes shimmer { 100% { left: 200%; } }