body { font-family: 'Inter', sans-serif; background-color: #121212; color: #e0e0e0; }
.gmail-sidebar-item { border-radius: 0 20px 20px 0; transition: all 0.2s; }
.gmail-sidebar-item:hover { background-color: #2a2a2a; }
.gmail-sidebar-active { background-color: #2c3b54 !important; font-weight: 600; color: #8ab4f8 !important; }

.mail-row { border-bottom: 1px solid #333333; transition: background-color 0.1s; cursor: pointer; }
.mail-row:hover { box-shadow: inset 1px 0 0 #444, inset -1px 0 0 #444, 0 1px 2px 0 rgba(0,0,0,.5); z-index: 1; background-color: #1a1a1a; }
.mail-unread { background-color: #1e1e1e; font-weight: 700; color: #ffffff; }
.mail-read { background-color: #121212; font-weight: 400; color: #a0a0a0; }
.mail-selected { background-color: #1a2333 !important; }

.shimmer { background: linear-gradient(90deg, #2a2a2a 25%, #333333 50%, #2a2a2a 75%); background-size: 200% 100%; animation: loading 1.5s infinite; }
@keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.drag-over { border: 2px dashed #8ab4f8 !important; background-color: #2c3b54 !important; }

#login-overlay { background: rgba(18, 18, 18, 0.95); backdrop-filter: blur(5px); }

#compose-modal { resize: both; overflow: hidden; min-width: 450px; min-height: 500px; max-width: 100vw; max-height: 100vh; position: fixed; }
#compose-modal.maximized { width: 100vw !important; height: 100vh !important; top: 0 !important; left: 0 !important; border-radius: 0; resize: none; }

#editor:empty:before { content: attr(placeholder); color: #666; cursor: text; }
#editor { outline: none; }
#editor ul { list-style-type: disc; padding-left: 1.5rem; }
#editor ol { list-style-type: decimal; padding-left: 1.5rem; }
#editor blockquote { border-left: 2px solid #555; padding-left: 1rem; color: #aaa; margin-top: 1rem; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

#compose-modal {
    width: 550px; /* Un poco más ancho como Gmail */
    height: 600px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.animate-fade-in {
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Efecto de foco en las filas */
#compose-form .px-4:focus-within {
    box-shadow: inset 0 -1px 0 0 #8ab4f8;
}

#editor[placeholder]:empty:before {
    content: attr(placeholder);
    color: #5f6368;
}