/* =============================================================
   ROLLIN HOST 2026 — Sistema de Ícones (Lucide)
   Padrão premium: traços finos, geometria limpa, consistente.
   Inspirado em SF Symbols (Apple), Phosphor, Tabler.
   ============================================================= */

/* Base: todo ícone Lucide tem stroke, não fill */
[data-lucide],
.rollin-icon,
svg.lucide {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    vertical-align: middle;
    transition: stroke var(--transition-fast), transform var(--transition-fast);
}

/* Lucide quando hidratado vira um <svg> direto */
svg[class*="lucide"],
.rollin-icon svg {
    width: 1em;
    height: 1em;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ===== Sizes utility ===== */
.rollin-icon-xs  { font-size: 12px; }
.rollin-icon-sm  { font-size: 14px; }
.rollin-icon-md  { font-size: 18px; }
.rollin-icon-lg  { font-size: 22px; }
.rollin-icon-xl  { font-size: 28px; }
.rollin-icon-2xl { font-size: 36px; }
.rollin-icon-3xl { font-size: 48px; }

/* ===== Cores ===== */
.rollin-icon-pink    { color: var(--accent-pink); }
.rollin-icon-cyan    { color: var(--accent-cyan); }
.rollin-icon-purple  { color: var(--accent-purple); }
.rollin-icon-muted   { color: var(--text-muted); }
.rollin-icon-dim     { color: var(--text-dim); }
.rollin-icon-primary { color: var(--text-primary); }

/* ===== Variantes de traço ===== */
.rollin-icon-thin    { stroke-width: 1.25; }
.rollin-icon-regular { stroke-width: 1.75; }
.rollin-icon-bold    { stroke-width: 2.25; }

/* ===== Container (para centralizar ícone em badge/avatar) ===== */
.rollin-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2em;
    height: 2.2em;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
    border: 1px solid var(--border-subtle);
    flex-shrink: 0;
    transition: all var(--transition-base);
}

.rollin-icon-badge-pink {
    background: color-mix(in srgb, var(--accent-pink) 15%, transparent);
    color: var(--accent-pink);
    border-color: color-mix(in srgb, var(--accent-pink) 30%, transparent);
}

.rollin-icon-badge-cyan {
    background: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
    color: var(--accent-cyan);
    border-color: color-mix(in srgb, var(--accent-cyan) 30%, transparent);
}

.rollin-icon-badge-purple {
    background: color-mix(in srgb, var(--accent-purple) 15%, transparent);
    color: var(--accent-purple);
    border-color: color-mix(in srgb, var(--accent-purple) 30%, transparent);
}

.rollin-icon-badge-solid {
    background: var(--gradient-primary);
    color: white;
    border: none;
    box-shadow: var(--shadow-glow-pink);
}

/* ===== Hover states ===== */
.rollin-icon-hover {
    transition: all var(--transition-base);
}

.rollin-icon-hover:hover {
    transform: scale(1.08);
    color: var(--accent-pink);
}

/* ===== Animações prontas ===== */
.rollin-icon-spin { animation: rollinIconSpin 1s linear infinite; }
@keyframes rollinIconSpin { to { transform: rotate(360deg); } }

.rollin-icon-pulse { animation: rollinIconPulse 2s ease-in-out infinite; }
@keyframes rollinIconPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(0.95); }
}

.rollin-icon-bounce { animation: rollinIconBounce 1.2s ease-in-out infinite; }
@keyframes rollinIconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* ===== Fallback enquanto Lucide não carregou: esconde [data-lucide] vazio ===== */
[data-lucide]:empty::before {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background: currentColor;
    opacity: 0.1;
    border-radius: 4px;
    animation: rollinIconSkeleton 1.5s ease-in-out infinite;
}

@keyframes rollinIconSkeleton {
    0%, 100% { opacity: 0.1; }
    50% { opacity: 0.2; }
}

/* Depois que hidratar, para a animação */
[data-lucide] svg ~ *::before { display: none; }

/* ===== Override: botões antigos com <i class="fas ..."> também ganham look consistente ===== */
.btn i.fas,
.btn i.fab,
.btn i.far,
.rollin-hero-chip i,
.rollin-qa-icon i,
.rollin-feed-item i,
.rollin-ai-msg i,
.rollin-menu-icon i {
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased;
}