/* Vizi Avatar (issue #426 Faz 1)
 * End-user yardımcı persona için tek-kaynak SVG avatar.
 * Renkler CSS değişkenleriyle override edilebilir; default Vizitmor
 * primary palette (indigo → purple).
 */

.vizi-avatar {
    /* Vizi palette — Varyant H FINAL (May 2026 preview onayı sonrası):
     * Vizitmor logo ikon gradient yönüne (indigo → fuchsia, 135°)
     * tam uyumlu. Önceki Faz 5 Polish (Yön B, `#818cf8 → #d8b4fe`)
     * preview turunda Varyant H ile değiştirildi.
     */
    --vizi-color-1: #6366f1;       /* indigo (logo birincil — Varyant H) */
    --vizi-color-2: #e879f9;       /* fuchsia (logo ikon ucu — Varyant H) */
    --vizi-eye: #ffffff;           /* göz beyazı */
    --vizi-pupil: #4338ca;         /* koyu indigo pupil — kontrast + canlılık */
    --vizi-accent: #f5d0fe;        /* açık fuchsia accent (thought-bubble) */
    --vizi-mouth: #ffffff;         /* ağız beyaz */

    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
}

.vizi-avatar svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Boyut varyasyonları */
.vizi-avatar--sm  { width: 24px;  height: 24px;  }
.vizi-avatar--md  { width: 40px;  height: 40px;  }
.vizi-avatar--lg  { width: 64px;  height: 64px;  }
.vizi-avatar--xl  { width: 96px;  height: 96px;  }

/* ---------------------------------------------------------------------------
 * Vizi public mark (issue #862 → redesign #873) — PUBLIC-only AI asistan markı.
 * Panel-içi `.vizi-avatar` (robot yüz) ile AYRI class → panel CSS etkilenmez.
 * Sohbet baloncuğu + kıvılcım glyph; Vizitmor logo "V"sinden BİLİNÇLİ olarak
 * farklı (harf-V YASAK). Yüz/göz/anten/ağız yok. Boyutlar `.vizi-avatar--*`
 * ile birebir aynı px (layout parity).
 * ------------------------------------------------------------------------- */
.vizi-public-mark {
    /* Vizitmor logo ikon gradient yönüne (indigo → fuchsia, 135°) uyumlu. */
    --vizi-mark-color-1: #6366f1;   /* indigo (logo birincil) */
    --vizi-mark-color-2: #e879f9;   /* fuchsia (logo ikon ucu) */
    --vizi-mark-glyph:   #ffffff;   /* beyaz sohbet baloncuğu (V DEĞİL) */

    display: inline-block;
    line-height: 0;
    flex-shrink: 0;
    max-width: 100%;   /* mobil ≤767.98px taşma koruması (KURAL 18) */
}

.vizi-public-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.vizi-public-mark--sm  { width: 24px;  height: 24px;  }
.vizi-public-mark--md  { width: 40px;  height: 40px;  }
.vizi-public-mark--lg  { width: 64px;  height: 64px;  }
.vizi-public-mark--xl  { width: 96px;  height: 96px;  }

/* Renk override örnekleri (kullanıcı isterse override edebilir):
 * .vizi-avatar.brand-purple { --vizi-color-1: #6d28d9; --vizi-color-2: #c026d3; }
 */

/* State — default: göz daireleri görünür, blink kapalı */
.vizi-avatar .vizi-eye-open  { display: inline; }
.vizi-avatar .vizi-eye-blink { display: none; }
.vizi-avatar .vizi-thought   { display: none; }

.vizi-avatar.vizi-state-blink .vizi-eye-open  { display: none; }
.vizi-avatar.vizi-state-blink .vizi-eye-blink { display: inline; }

.vizi-avatar.vizi-state-thinking .vizi-thought { display: inline; }

/* Thinking state — thought bubble'ları yumuşak nabız, eyes hafifçe yukarı */
.vizi-avatar.vizi-state-thinking .vizi-thought-1 { animation: vizi-thought-pulse 1.4s ease-in-out infinite; }
.vizi-avatar.vizi-state-thinking .vizi-thought-2 { animation: vizi-thought-pulse 1.4s ease-in-out 0.25s infinite; }
.vizi-avatar.vizi-state-thinking .vizi-thought-3 { animation: vizi-thought-pulse 1.4s ease-in-out 0.5s infinite; }

@keyframes vizi-thought-pulse {
    0%, 100% { opacity: 0.35; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}

/* Tüm thought-bubble'ların ortak transform-origin'i — yukarı sağ köşe */
.vizi-avatar .vizi-thought {
    transform-origin: 52px 12px;
    transform-box: fill-box;
}

/* Reduced-motion kullanıcı tercihi — animasyonu kapat */
@media (prefers-reduced-motion: reduce) {
    .vizi-avatar.vizi-state-thinking .vizi-thought-1,
    .vizi-avatar.vizi-state-thinking .vizi-thought-2,
    .vizi-avatar.vizi-state-thinking .vizi-thought-3 {
        animation: none;
    }
}