/* WhyAI — iconografía SVG unificada */

.whyai-icon {
    display: block;
    flex-shrink: 0;
    vertical-align: middle;
}

.whyai-icon--sm { width: 14px; height: 14px; }
.whyai-icon--md { width: 18px; height: 18px; }
.whyai-icon--lg { width: 20px; height: 20px; }

.whyai-icon--status-online {
    color: #4ade80;
    width: 12px;
    height: 12px;
}

.whyai-icon--status-offline {
    color: #ff4444;
    width: 12px;
    height: 12px;
}

.online-indicator-status .whyai-icon {
    width: 12px;
    height: 12px;
}

.whyai-icon--gold {
    color: #f5c542;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
}

.icon-btn .whyai-icon {
    display: block;
}

.icon-with-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mode-option h3.icon-with-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--wa-text-soft, #c4c4c4);
    font-weight: 500;
}

.mode-option-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--wa-text-muted, #a3a3a3);
    flex-shrink: 0;
}

.mode-option-icon .whyai-icon {
    width: 20px;
    height: 20px;
}

#online-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#online-indicator::before {
    content: none !important;
    display: none !important;
}

.online-indicator-status {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

#sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
}

#sidebar-toggle .whyai-icon {
    width: 22px;
    height: 22px;
}

#chat-form #image-button,
#guest-chat-form #guest-image-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    line-height: 0;
}

#chat-form #image-button .whyai-icon,
#guest-chat-form #guest-image-button .whyai-icon {
    width: 20px;
    height: 20px;
}

.help-btn-icon,
.profile-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.help-btn-icon .whyai-icon,
.profile-menu-icon .whyai-icon {
    width: 18px;
    height: 18px;
}

.profile-menu-chevron,
.settings-row-action {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.profile-menu-chevron .whyai-icon,
.settings-row-action .whyai-icon {
    width: 16px;
    height: 16px;
    color: #888;
}

.mode-option .current-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    line-height: 0;
}

.mode-option .current-badge .whyai-icon {
    width: 14px;
    height: 14px;
}

.pricing-btn-star .whyai-icon {
    display: block;
}

.pricing-btn-star .whyai-icon.pricing-star-icon,
.profile-menu-icon .whyai-icon.pricing-star-icon {
    width: 14px;
    height: 14px;
}

#pricing-btn .pricing-star-icon,
#pricing-btn .whyai-icon.pricing-star-icon {
    width: 13px;
    height: 13px;
}

.profile-menu-icon .whyai-icon.pricing-star-icon {
    width: 16px;
    height: 16px;
}

.conv-item .del-conv-btn {
    align-items: center;
    justify-content: center;
    line-height: 0;
}

#remove-image {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 4px;
}

.conv-item .del-conv-btn .whyai-icon,
#remove-image .whyai-icon {
    width: 14px;
    height: 14px;
}

/* Móvil: botón eliminar siempre visible */
@media (max-width: 768px) {
    .conv-item .del-conv-btn {
        display: inline-flex !important;
    }
}

.image-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.image-hint .whyai-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

#new-conv-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#new-conv-btn .whyai-icon {
    width: 16px;
    height: 16px;
}

#settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

#settings-btn .whyai-icon {
    width: 18px;
    height: 18px;
}