.app-shell {
    display: grid;
    grid-template-columns: 264px 350px 1fr;
    height: 100vh;
    overflow: hidden;
    transition: grid-template-columns 0.15s ease;
}

.app-shell > * {
    min-height: 0;
}

.app-shell.is-collapsed {
    grid-template-columns: 68px 350px 1fr;
}

.app-shell.is-collapsed .sidebar-brand {
    justify-content: center;
}

.app-shell.is-collapsed .sidebar-toggle-btn {
    margin-left: 0;
}

.app-shell.is-collapsed .sidebar-session {
    padding: 0 0 8px;
}

.app-shell.is-collapsed .session-email {
    display: none;
}

.app-shell.is-collapsed .folder-item {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.app-shell.is-collapsed .folder-name {
    gap: 0;
}

.app-shell.is-collapsed .btn-compose {
    padding: 13px 0;
}

.app-shell.is-collapsed .sidebar-footer {
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.app-shell.is-collapsed .sidebar-brand-label,
.app-shell.is-collapsed .folder-label,
.app-shell.is-collapsed .folder-unread,
.app-shell.is-collapsed .btn-compose .btn-label,
.app-shell.is-collapsed #settings-btn .btn-label,
.app-shell.is-collapsed #logout-btn .btn-label {
    display: none;
}

/* No entra ningun texto en el ancho angosto del sidebar colapsado. */
.app-shell.is-collapsed .sidebar-credit {
    display: none;
}

.btn-compose {
    margin-bottom: 12px;
    border-radius: var(--radius-md);
    padding: 10px 13px;
    background: #ffffff;
    color: var(--color-primary-dark);
    box-shadow: 0 10px 24px rgba(15, 18, 26, 0.25);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-compose:hover {
    filter: none;
    background: #fbfaff;
    box-shadow: 0 12px 28px rgba(15, 18, 26, 0.3);
}

.folder-list {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.folder-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: none;
    text-align: left;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    font-weight: 600;
    transition: background 0.15s ease, color 0.15s ease;
}

.folder-item-local {
    margin-bottom: 8px;
    flex-shrink: 0;
}

.folder-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.folder-item.is-active {
    background: #ffffff;
    color: var(--color-primary-dark);
    box-shadow: 0 6px 16px rgba(15, 18, 26, 0.2);
}

/* Dentro de folder-list el fondo/sombra del activo lo pone el indicador
   deslizante (ver .folder-active-indicator mas abajo) -- este boton se
   queda solo con el texto encima, transparente. local-drafts-btn y
   folder-new-btn quedan afuera de folder-list y conservan el estilo de
   arriba tal cual. */
#folder-list .folder-item {
    position: relative;
    z-index: 1;
}

#folder-list .folder-item.is-active {
    background: none;
    box-shadow: none;
    color: var(--color-primary-dark);
}

/* flex:1 + min-height:0 aca (no solo en #folder-list de adentro) --
   folder-list-wrap es el hijo directo del sidebar (flex); sin este flex:1
   en el wrapper, el flex:1 de #folder-list no tenia ningun contenedor
   flex real del cual colgar y quedaba sin efecto -- la lista de carpetas
   ya no se achicaba ni scrolleaba sola, empujaba todo lo de abajo
   (footer, firma) fuera de la pantalla en vez de mostrarlo siempre. */
.folder-list-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Vive DENTRO de #folder-list (no en folder-list-wrap) a proposito: asi
   scrollea junto con las carpetas en vez de quedar pegada a un punto fijo
   cuando la lista tiene overflow-y:auto. renderFolders() la reinserta
   despues de cada innerHTML='' porque si no la perderia. */
.folder-active-indicator {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    border-radius: var(--radius-md);
    background: #ffffff;
    box-shadow: 0 0 16px 1px rgba(var(--color-primary-rgb), 0.3), 0 6px 16px rgba(15, 18, 26, 0.2);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
    pointer-events: none;
    z-index: 0;
}

.folder-active-indicator.is-hidden {
    opacity: 0;
}

.folder-item .folder-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 9px;
}

.folder-item .folder-icon {
    flex-shrink: 0;
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.folder-item .folder-unread {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
}

/* --color-primary-dark sobre --color-primary-soft daba mal contraste aca:
   -dark es solo "un poco mas oscuro que el color base" (pensado para texto
   sobre superficies CLARAS), pero -soft se vuelve OSCURO en modo oscuro
   -- quedaba texto oscuro sobre fondo oscuro, casi ilegible (reportado con
   captura: el numero de no leidos de la carpeta activa se veia borroso).
   El color base solido + texto blanco (mismo patron que .pagination-btn:hover
   mas abajo) da contraste consistente sin depender de esa pareja fragil. */
.folder-item.is-active .folder-unread {
    background: var(--color-primary);
    color: #fff;
}

.folder-item-new {
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.folder-item-new:hover {
    color: #fff;
}

.folder-item-new.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* ---------- Menu contextual (click derecho sobre una carpeta) ---------- */

.context-menu {
    position: fixed;
    z-index: 500;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
    padding: 6px;
    min-width: 180px;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text);
}

.context-menu-item:hover {
    background: var(--color-surface-alt);
}

.context-menu-item.is-danger {
    color: var(--color-danger);
}

.context-menu-item.is-danger:hover {
    background: var(--color-danger-soft);
}

.context-menu-item:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

.context-menu-separator {
    height: 1px;
    margin: 6px 4px;
    background: var(--color-border);
}

.context-menu-scroll {
    max-height: 240px;
    overflow-y: auto;
}

/* Sugerencias de destinatario al redactar (ver ChipField en app.js) --
   reusa .context-menu como caja y .context-menu-item como boton, esto
   solo agrega el layout de icono + email/nombre en dos lineas. */
.chip-suggestions {
    max-height: 220px;
    overflow-y: auto;
}

.chip-suggestion-item {
    align-items: flex-start;
}

.chip-suggestion-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.chip-suggestion-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip-suggestion-name {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.chip-suggestion-item.is-highlighted {
    background: var(--color-surface-alt);
}

.folder-item.is-context-target {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.message-list-pane {
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    background: var(--color-surface-alt);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.search-icon {
    display: inline-flex;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.search-bar input {
    flex: 1;
    border: none;
    background: none;
    padding: 4px 2px;
    font-size: 13px;
}

.search-bar input:focus {
    box-shadow: none;
    background: none;
}

.search-bar .btn-icon {
    width: 26px;
    height: 26px;
    background: none;
    border: none;
}

.btn-link.is-danger {
    color: var(--color-danger);
}

.btn-link.is-danger:hover {
    background: var(--color-danger-soft);
}

.btn-link:disabled {
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}

#empty-trash-btn {
    flex-shrink: 0;
}

#select-mode-btn.is-active {
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.bulk-action-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--color-primary-soft);
    border-bottom: 1px solid var(--color-border);
}

.bulk-select-all {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.bulk-select-all input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.bulk-delete-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary-dark);
}

.bulk-action-bar .btn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
}

.bulk-action-bar #bulk-cancel-btn {
    margin-left: auto;
    width: 26px;
    height: 26px;
    background: none;
    border: none;
}

.message-select-checkbox {
    display: none;
    align-self: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    accent-color: var(--color-primary);
    cursor: pointer;
}

/* Las casillas quedan ocultas hasta que se activa "Seleccionar varios
   correos" -- no tiene sentido ocuparle espacio a la vista a algo que la
   mayoria de las veces no se usa. */
.message-list.is-selecting .message-select-checkbox {
    display: inline-block;
}

.message-list.is-selecting .message-item {
    cursor: default;
}

.message-item.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.message-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 4px;
}

.message-item {
    display: flex;
    gap: 12px;
    padding: 13px 14px;
    cursor: pointer;
    background: var(--color-surface);
    margin: 6px 8px;
    border-radius: var(--radius-md);
    border: 1.5px solid transparent;
    transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease,
        opacity 0.22s ease, max-height 0.28s ease 0.1s, margin 0.28s ease 0.1s, padding 0.28s ease 0.1s;
    max-height: 90px;
    overflow: hidden;
}

/* Al eliminar de a varios: cada correo se marca asi apenas "le toca su
   turno" (con un pequeño desfase entre uno y otro) para que el usuario vea
   que de verdad se estan procesando, en vez de que la lista cambie de
   golpe sin ningun aviso durante los segundos que tarda el borrado real. */
.message-item.is-removing {
    opacity: 0;
    transform: translateX(24px) scale(0.97);
    max-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
}

/* Arrastrar un correo hasta una carpeta del sidebar para moverlo. */
.message-item[draggable="true"]:active {
    cursor: grabbing;
}

.message-item.is-dragging {
    opacity: 0.4;
}

.folder-item.is-drop-target {
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 2px var(--color-primary-light);
}

.message-item:hover {
    border-color: var(--color-primary-light);
    transform: translateX(1px);
}

.message-item.is-active {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}

.message-item.is-unread {
    background: linear-gradient(0deg, var(--color-surface), var(--color-surface)), var(--color-primary-soft);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.message-item.is-unread .message-subject {
    font-weight: 800;
}

.message-item.is-unread .message-from {
    color: var(--color-text);
    font-weight: 700;
}

.message-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.message-body-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.message-top-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.message-from {
    font-size: 13px;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.draft-source-pill {
    margin-left: 8px;
    vertical-align: middle;
}

.message-date {
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap;
    font-weight: 600;
}

.message-subject {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.message-flags {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.flag-star {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    color: var(--color-icon-muted, #c7cadb);
    padding: 0;
    transition: color 0.12s ease, transform 0.12s ease;
}

.flag-star svg {
    fill: none;
    transition: fill 0.12s ease;
}

.flag-star:hover {
    transform: scale(1.15);
}

.flag-star.is-flagged {
    color: var(--color-warm);
}

.flag-star.is-flagged svg {
    fill: currentColor;
}

.flag-pin {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    color: var(--color-icon-muted, #c7cadb);
    padding: 0;
    transition: color 0.12s ease, transform 0.12s ease;
}

.flag-pin svg {
    fill: none;
    transition: fill 0.12s ease;
}

.flag-pin:hover {
    transform: scale(1.15);
}

.flag-pin.is-pinned {
    color: var(--color-primary);
}

.flag-pin.is-pinned svg {
    fill: var(--color-primary-soft);
}

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 14px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.pagination-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--color-text);
    min-width: 108px;
    text-align: center;
}

/* Los mismos botones que el resto de la app (.btn-icon), pero con un
   color de marca de entrada para que salten mas a la vista -- son la
   unica forma de pasar de pagina y antes se perdian entre el resto de la
   interfaz, mas chatos y sin color. */
.pagination-btn:hover:not(:disabled) {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.pagination-btn:disabled {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
    color: var(--color-text-muted);
    opacity: 0.6;
    cursor: default;
}

.reading-pane {
    overflow-y: auto;
    background: var(--color-surface);
    padding: 30px 36px;
}

.reading-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
}

.reading-empty svg {
    opacity: 0.35;
}

.reading-content {
    max-width: 100%;
}

.reading-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 18px;
    margin-bottom: 22px;
}

.reading-subject {
    font-size: 21px;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.reading-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.reading-meta-left {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.reading-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.reading-meta-main {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.7;
    font-weight: 500;
}

.reading-meta-main strong {
    color: var(--color-text);
    font-weight: 700;
}

.reading-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.reading-body {
    width: 100%;
    min-height: 240px;
    border: none;
}

.attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.attachment-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent-soft);
    border: 1px solid rgba(0, 194, 168, 0.3);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-teal-text, #007a68);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, transform 0.06s ease;
}

.attachment-chip:hover {
    background: var(--color-teal-chip-hover, #d3f3ec);
    transform: translateY(-1px);
}

.attachment-chip .attachment-size {
    color: var(--color-teal-text, #007a68);
    opacity: 0.7;
    font-weight: 500;
}

/* ---------- MVRC (banda de riesgo + modal de analisis) ----------
   4 niveles: bajo (verde), precaucion (amarillo), medio (naranja),
   alto (rojo) -- ver RiskLevel.php. Colores propios (no todos los tonos
   ya existen como variable en base.css) pero repitiendo su misma logica
   de "texto fuerte sobre fondo suave". */

.mvrc-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
}

.mvrc-banner-text {
    flex: 1;
    min-width: 0;
}

.mvrc-banner-link {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    color: inherit;
    flex-shrink: 0;
}

.mvrc-banner--bajo { background: var(--color-success-soft); color: var(--color-success); }
.mvrc-banner--precaucion { background: #fdf6d8; color: #8a6d00; }
.mvrc-banner--medio { background: var(--color-warm-soft); color: var(--color-warm); }
.mvrc-banner--alto { background: var(--color-danger-soft); color: var(--color-danger); }

.mvrc-modal-overlay .mvrc-modal {
    width: 100%;
    max-width: 480px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
    transform: translateY(10px) scale(0.98);
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
    overflow: hidden;
}

.mvrc-modal-overlay.is-open .mvrc-modal {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.mvrc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.mvrc-modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.mvrc-modal-body {
    padding: 20px;
    overflow-y: auto;
}

.mvrc-modal-score {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.mvrc-modal-score-value {
    font-size: 22px;
    font-weight: 800;
}

.mvrc-modal-score-label {
    font-size: 13px;
    font-weight: 600;
    opacity: 0.85;
}

.mvrc-modal-score--bajo { background: var(--color-success-soft); color: var(--color-success); }
.mvrc-modal-score--precaucion { background: #fdf6d8; color: #8a6d00; }
.mvrc-modal-score--medio { background: var(--color-warm-soft); color: var(--color-warm); }
.mvrc-modal-score--alto { background: var(--color-danger-soft); color: var(--color-danger); }

.mvrc-findings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mvrc-finding {
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    border-left-width: 3px;
}

.mvrc-finding-title {
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 3px;
}

.mvrc-finding-desc {
    margin: 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.mvrc-finding--alta { border-left-color: var(--color-danger); }
.mvrc-finding--media { border-left-color: var(--color-warm); }
.mvrc-finding--baja { border-left-color: #d4b106; }
.mvrc-finding--info { border-left-color: var(--color-success); }

/* ---------- Compose (panel flotante) ---------- */

.compose-view {
    position: fixed;
    right: 26px;
    bottom: 0;
    width: 580px;
    max-width: calc(100vw - 52px);
    height: 648px;
    max-height: calc(100vh - 44px);
    min-height: 0;
    background: var(--color-surface);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 24px 60px rgba(12, 15, 26, 0.28), 0 0 0 1px rgba(15, 18, 26, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 180;
}

.compose-view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 14px 22px;
    background: var(--gradient-brand);
    color: #fff;
    flex-shrink: 0;
}

.compose-view-header h2 {
    margin: 0;
    font-family: var(--font-brand);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.01em;
}

.compose-view-header .btn-icon {
    background: transparent;
    border-color: transparent;
    color: rgba(255, 255, 255, 0.85);
}

.compose-view-header .btn-icon:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: transparent;
    color: #fff;
    transform: none;
}

.compose-view-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 22px 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.compose-recipients {
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}

.compose-field-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--color-border);
}

.compose-field-row:last-child {
    border-bottom: none;
}

.compose-field-label {
    flex-shrink: 0;
    width: 42px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.chip-input {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    min-height: 24px;
}

/* Color solido + texto blanco (mismo patron que el contador de la carpeta
   activa en el sidebar, ver esa nota mas abajo) -- -soft/-dark daban mal
   contraste en modo oscuro: -soft se vuelve oscuro en ese modo pero -dark
   sigue siendo solo "un poco mas oscuro que el color base" (pensado para
   texto sobre superficies claras), asi que quedaba texto oscuro sobre
   fondo oscuro, casi ilegible (reportado con captura). */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.chip.chip-invalid {
    background: var(--color-danger);
    color: #fff;
}

.chip-remove {
    background: rgba(255, 255, 255, 0.22);
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    cursor: pointer;
    color: inherit;
    font-size: 13px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.chip-remove:hover {
    background: rgba(255, 255, 255, 0.36);
}

.chip-input-text {
    border: none;
    background: none;
    outline: none;
    flex: 1;
    min-width: 140px;
    font-size: 14px;
    padding: 4px 2px;
}

.compose-cc-bcc-toggle {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.compose-subject-input {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 14.5px;
    padding: 4px 2px;
    font-weight: 600;
}

.compose-toolbar {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-wrap: wrap;
    flex-shrink: 0;
    background: var(--color-surface-alt);
    border-radius: 999px;
    padding: 6px 8px;
    width: fit-content;
}

.toolbar-btn {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 13px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s ease, color 0.12s ease;
}

.toolbar-btn:hover {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.toolbar-select {
    border: none;
    background: var(--color-surface);
    border-radius: 999px;
    font-size: 12px;
    padding: 6px 10px;
    color: var(--color-text);
    max-width: 110px;
}

.toolbar-sep {
    width: 1px;
    height: 22px;
    background: var(--color-border);
    margin: 0 4px;
}

.toolbar-spacer {
    flex: 1;
}

.compose-body-wrap {
    background: transparent;
    border: none;
    position: relative;
    min-height: 220px;
    /* Sin esto, si el contenido (ej. una firma grande) no entra en el
       espacio que le tocaria repartido dentro del flex de la columna, el
       navegador lo encoge igual y el contenido se sale por encima de los
       controles de abajo en vez de que sea el panel el que scrollee. */
    flex-shrink: 0;
}

.compose-editor {
    min-height: 220px;
    padding: 10px 2px 18px;
    outline: none;
    font-size: 14px;
    line-height: 1.65;
}

/* Una firma pegada de otro lado (generador externo, etc.) puede traer
   tablas anidadas con imagenes y varias filas de contacto -- crece tanto
   como necesite sin importarle el panel, y termina empujando el resto de
   los controles (adjuntar, selector de firma) fuera de alcance. Se le pone
   un techo de altura fijo con scroll propio: la firma queda contenida en
   su propia "isla" pase lo que pase adentro, y el resto del panel de
   Redactar nunca se mueve por su culpa. display:flow-root + overflow-x
   ademas contienen floats/tablas anchas sin "clearear".*/
#gsmail-signature-block {
    display: flow-root;
    max-width: 100%;
    max-height: 220px;
    overflow-x: auto;
    overflow-y: auto;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

#gsmail-signature-block img {
    max-width: 100%;
    height: auto;
}

.compose-editor img {
    max-width: 100%;
    height: auto;
}

.compose-editor:empty::before {
    content: "Escribe tu mensaje...";
    color: var(--color-icon-muted, #a7abc4);
}

.compose-editor-plain {
    width: 100%;
    min-height: 220px;
    border: none;
    padding: 10px 2px 18px;
    font-size: 14px;
    line-height: 1.65;
    resize: vertical;
    background: transparent;
}

.compose-drop-overlay {
    position: absolute;
    inset: 0;
    background: rgba(47, 95, 219, 0.06);
    border: 2px dashed var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-dark);
    font-weight: 700;
    font-size: 14px;
    pointer-events: none;
}

.compose-attachments-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.compose-attach-hint {
    font-size: 12px;
    color: var(--color-text-muted);
}

.attachment-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-surface-alt);
    border-radius: 999px;
    padding: 7px 8px 7px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text);
}

.attachment-row .attachment-size {
    color: var(--color-text-muted);
    font-weight: 500;
}

.attachment-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1;
    padding: 2px;
}

.attachment-remove:hover {
    color: var(--color-danger);
}

.compose-view-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    flex-shrink: 0;
}

.compose-view-footer .btn-primary {
    border-radius: 999px;
    padding: 11px 26px;
}

@media (max-width: 700px) {
    .compose-field-row {
        flex-wrap: wrap;
    }

    .compose-cc-bcc-toggle {
        margin-left: 54px;
    }
}

@media (max-width: 640px) {
    .compose-view {
        right: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ---------- Vista mobile ----------
 * Por debajo del breakpoint, la app deja de ser 3 columnas y pasa a
 * comportarse como una app movil de una sola pantalla a la vez:
 * - La lista de correos es la vista principal.
 * - El menu (carpetas, redactar, etc.) es un cajon que se abre con el
 *   boton de hamburguesa, encima de todo, con fondo oscuro para cerrarlo
 *   tocando afuera.
 * - Al abrir un correo, el panel de lectura se desliza desde la derecha y
 *   cubre toda la pantalla; se vuelve con la flecha de "Volver" o
 *   deslizando el dedo de izquierda a derecha sobre el correo.
 * Todo esto vive detras de este media query a proposito, para no tocar en
 * nada la vista de escritorio (que sigue siendo la grilla de 3 columnas).
 */
#mobile-menu-btn,
.reading-back-btn {
    display: none;
}

.sidebar-backdrop {
    display: none;
}

@media (max-width: 860px) {
    .app-shell {
        display: block;
        position: relative;
        height: 100vh;
        overflow: hidden;
    }

    /* Si quedo "colapsado" (solo iconos) de una sesion anterior en
       escritorio, en el cajon movil se ve siempre completo -- no aplica
       ese modo compacto aca. */
    .app-shell.is-collapsed {
        grid-template-columns: none;
    }

    .app-shell.is-collapsed .sidebar-brand-label,
    .app-shell.is-collapsed .folder-label,
    .app-shell.is-collapsed .folder-unread,
    .app-shell.is-collapsed .btn-compose .btn-label,
    .app-shell.is-collapsed .session-email,
    .app-shell.is-collapsed #settings-btn .btn-label,
    .app-shell.is-collapsed #logout-btn .btn-label,
    .app-shell.is-collapsed .sidebar-credit {
        display: revert;
    }

    .app-shell.is-collapsed .sidebar-brand,
    .app-shell.is-collapsed .folder-item,
    .app-shell.is-collapsed .btn-compose,
    .app-shell.is-collapsed .sidebar-footer {
        justify-content: revert;
        padding-left: revert;
        padding-right: revert;
    }

    #sidebar-toggle-btn {
        display: none;
    }

    /* Menu como cajon deslizable */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 82vw;
        z-index: 320;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        flex-direction: column;
    }

    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(10, 13, 26, 0.5);
        z-index: 310;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    .sidebar-backdrop.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Lista de correos: pantalla principal */
    .message-list-pane {
        width: 100%;
        height: 100vh;
        border-right: none;
    }

    .pane-header {
        gap: 10px;
    }

    .pane-header h2 {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    #mobile-menu-btn {
        display: inline-flex;
    }

    /* Lectura: se desliza desde la derecha y tapa todo */
    .reading-pane {
        position: fixed;
        inset: 0;
        z-index: 300;
        padding: 0 18px 24px;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .reading-pane.is-open {
        transform: translateX(0);
    }

    .reading-back-btn {
        display: inline-flex;
        position: sticky;
        top: 12px;
        margin: 12px 0 6px;
        background: var(--color-surface);
    }

    .reading-content {
        max-width: 100%;
    }

    /* En una pantalla angosta el remitente + fecha + acciones no entran
       todos en una sola fila -- se acomodan las acciones debajo en vez de
       salirse del panel. */
    .reading-meta {
        flex-wrap: wrap;
    }

    .reading-actions {
        margin-left: auto;
    }
}

/* ---------- Firma en Redactar ---------- */

.compose-signature-picker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.compose-signature-picker label {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.compose-signature-picker select {
    border: 1px solid var(--color-border);
    background: var(--color-surface-alt);
    border-radius: 999px;
    font-size: 12px;
    padding: 6px 10px;
    color: var(--color-text);
    max-width: 160px;
}

/* ---------- Configuracion (modal) ---------- */

.btn-sm {
    padding: 8px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.settings-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.settings-section-header .settings-hint {
    flex: 1;
    margin: 0;
}

.settings-section h3 {
    margin: 0;
    font-size: 15px;
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.settings-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-toggle-title {
    font-size: 14px;
    font-weight: 700;
}

.settings-toggle-desc {
    font-size: 12.5px;
    color: var(--color-text-muted);
}

/* ---------- Configuracion: menu deslizable (menu <-> detalle) ---------- */

.settings-modal-panel {
    overflow: hidden;
}

.settings-back-btn {
    margin-right: -4px;
}

.settings-slider {
    display: flex;
    width: 200%;
    flex: 1;
    min-height: 0;
    transition: transform 0.22s ease;
}

.settings-slider.is-detail {
    transform: translateX(-50%);
}

.settings-pane {
    width: 50%;
    flex-shrink: 0;
    min-width: 0;
    overflow-y: auto;
}

.settings-menu-pane {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 13px 12px;
    border: none;
    background: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    text-align: left;
    transition: background 0.12s ease;
}

.settings-menu-item:hover {
    background: var(--color-surface-alt);
}

/* Los iconos cuadrados no convencieron (ni siquiera despues de arreglarles
   el contraste), y el punto simple tampoco -- una palomita da un poco mas
   de caracter sin necesitar elegir un icono distinto por cada opcion, y no
   se confunde con la flecha de navegacion que ya esta a la derecha. */
.settings-menu-item-label {
    flex: 1;
    position: relative;
    padding-left: 20px;
}

.settings-menu-item-label::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 50%;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    transform: translateY(-50%);
}

.settings-menu-item-chevron {
    display: inline-flex;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.settings-detail {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.quota-bar-wrap {
    height: 10px;
    border-radius: 999px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-top: 10px;
}

.quota-bar {
    height: 100%;
    border-radius: 999px;
    background: var(--gradient-header);
    transition: width 0.3s ease;
}

.quota-bar.is-warning {
    background: var(--color-warm);
}

.quota-bar.is-danger {
    background: var(--color-danger);
}

.quota-label {
    margin: 8px 0 0;
    font-size: 12.5px;
    color: var(--color-text-muted);
    font-weight: 600;
}

.quota-request-btn {
    margin-top: 14px;
}

/* ---------- Configuracion: Imagen para mostrar (solicitud) ---------- */

.settings-warning-box {
    background: var(--color-warm-soft);
    border: 1px solid var(--color-warm);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.settings-warning-box p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text);
}

.settings-warning-box .warning-highlight {
    color: var(--color-warm);
    font-weight: 800;
}

.avatar-cropper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: -6px;
}

.avatar-cropper .settings-hint {
    align-self: stretch;
    margin: 0;
}

.avatar-cropper-viewport {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    cursor: grab;
    touch-action: none;
    flex-shrink: 0;
}

.avatar-cropper-viewport:active {
    cursor: grabbing;
}

.avatar-cropper-viewport img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    user-select: none;
    pointer-events: none;
}

.avatar-cropper-zoom {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 220px;
    color: var(--color-text-muted);
}

.avatar-cropper-zoom input[type="range"] {
    flex: 1;
}

/* ---------- Configuracion: Colores (selector de color personalizado) ---------- */

.theme-current-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-muted);
}

.theme-current-swatch {
    display: inline-block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 0 1.5px var(--color-border);
    background: var(--color-primary);
    flex-shrink: 0;
}

.color-picker {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.color-picker-sv {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: crosshair;
    touch-action: none;
    border: 1px solid var(--color-border);
}

.color-picker-sv-white,
.color-picker-sv-black {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.color-picker-sv-white {
    background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}

.color-picker-sv-black {
    background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

.color-picker-sv-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.color-picker-hue {
    position: relative;
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000);
    cursor: pointer;
    touch-action: none;
}

.color-picker-hue-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

.color-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.color-picker-preview {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.color-picker-hex-field {
    flex: 1;
}

.color-picker-hex-field input {
    text-transform: lowercase;
    font-family: "Courier New", monospace;
}

.avatar-request-status-card {
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.avatar-request-status-card .settings-hint {
    margin: 8px 0 0;
}

.avatar-request-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.avatar-request-status-badge.is-pending {
    background: var(--color-warm-soft);
    color: var(--color-warm);
}

.avatar-request-status-badge.is-rejected {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.avatar-request-status-badge.is-completed {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.signature-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.signature-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
}

.signature-card-main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.signature-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--color-text);
}

.signature-card-type {
    font-size: 12px;
    color: var(--color-text-muted);
}

.signature-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.signature-card-actions .btn-icon {
    width: 32px;
    height: 32px;
}

.badge-default {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-warm-soft);
    color: var(--color-warm);
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.settings-empty {
    font-size: 13px;
    color: var(--color-text-muted);
    padding: 6px 2px;
}

.signature-type-toggle {
    display: flex;
    gap: 18px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

.signature-type-toggle label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-weight: 500;
}

.signature-editor-box-wrap {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.signature-editor-box {
    min-height: 140px;
    max-height: 320px;
    padding: 14px 16px;
    font-size: 13.5px;
    line-height: 1.6;
    display: flow-root;
    overflow-x: auto;
    overflow-y: auto;
}

#signature-content-html img {
    max-width: 100%;
    height: auto;
}

.signature-editor-code {
    font-family: "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre;
}

.signature-default-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

/* ---------- Notificacion de correo nuevo (estilo Windows Live Messenger):
   se asoma desde abajo en la esquina inferior derecha, se queda un rato y
   vuelve a bajar sola. Container aparte del de los toasts normales
   (#toast-container) para no mezclarlas con los avisos de "se guardo",
   "no se pudo eliminar", etc. ---------- */

.new-mail-toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 460;
    display: flex;
    flex-direction: column-reverse;
    gap: 10px;
    pointer-events: none;
}

.new-mail-toast {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    max-width: calc(100vw - 40px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: 14px 14px 14px 16px;
    cursor: pointer;
    transform: translateY(140%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(.2, .8, .3, 1.2), opacity 0.25s ease;
}

.new-mail-toast.is-visible {
    transform: translateY(0);
    opacity: 1;
}

.new-mail-toast.is-leaving {
    transform: translateY(140%);
    opacity: 0;
}

.new-mail-toast-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.new-mail-toast-body {
    flex: 1;
    min-width: 0;
}

.new-mail-toast-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.new-mail-toast-from {
    font-weight: 700;
    font-size: 13.5px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.new-mail-toast-subject {
    font-size: 12.5px;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

.new-mail-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.new-mail-toast-close:hover {
    background: var(--color-surface-alt);
    color: var(--color-text);
}