/* Logo Suvilabs "Dua Bulan Sabit" + animasi saat AI bekerja.
   Palet "Benang Emas": champagne → emas → perunggu; tanpa ungu. */
:root {
  --mark-c1: #ac803a;
  --mark-c2: #c4984d;
  --mark-c3: #dcb866;
  --mark-c4: #f5d996;
  --mark-c5: #e2b967;
}
:root[data-theme="light"] { --mark-c1: #9f712f; --mark-c2: #b88a3f; --mark-c3: #cfa455; --mark-c4: #e0b96e; --mark-c5: #c99a45; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --mark-c1: #9f712f; --mark-c2: #b88a3f; --mark-c3: #cfa455; --mark-c4: #e0b96e; --mark-c5: #c99a45; }
}

/* overflow hidden: animasi tidak pernah keluar dari kotak logo / menimpa teks di sebelahnya. */
.suvi-mark { display: block; flex: none; overflow: hidden; contain: paint; }
.suvi-mark .sm-glow { opacity: 0; transform-box: view-box; transform-origin: 32px 32px; }
.suvi-mark .sm-spin { transform-box: view-box; transform-origin: 32px 32px; }

/* Aktif: buka → putar 180° bersama → kunci; berulang (0°→180°→360°) tanpa lompatan warna. */
.suvi-mark.is-active .sm-spin { animation: sm-spin 3s cubic-bezier(.65, 0, .35, 1) infinite; }
.suvi-mark.is-active .sm-top { animation: sm-open-top 1.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.suvi-mark.is-active .sm-bottom { animation: sm-open-bottom 1.5s cubic-bezier(.65, 0, .35, 1) infinite; }
.suvi-mark.is-active .sm-glow { animation: sm-glow 1.5s ease-in-out infinite; }

@keyframes sm-spin { 0%, 12% { transform: rotate(0deg); } 38%, 62% { transform: rotate(180deg); } 88%, 100% { transform: rotate(360deg); } }
@keyframes sm-open-top { 0%, 20%, 80%, 100% { transform: translate(0, 0); } 50% { transform: translate(-1.2px, -3.6px); } }
@keyframes sm-open-bottom { 0%, 20%, 80%, 100% { transform: translate(0, 0); } 50% { transform: translate(1.2px, 3.6px); } }
@keyframes sm-glow { 0%, 100% { opacity: .15; transform: scale(.8); } 50% { opacity: .9; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .suvi-mark.is-active .sm-spin, .suvi-mark.is-active .sm-top, .suvi-mark.is-active .sm-bottom { animation: none; }
  .suvi-mark.is-active .sm-glow { animation: sm-glow 2.4s ease-in-out infinite; }
}

/* Penempatan di chat: kepala jawaban & sambutan memakai warna logo sendiri (bukan warna ikon). */
.app .chat .msg.ai .ai-mark { color: inherit; background: none; border: 0; width: 24px; height: 24px; display: grid; place-items: center; }
.app .chat .msg.ai .ai-mark .suvi-mark { width: 22px; height: 22px; }
.welcome-symbol .suvi-mark { width: 100%; height: 100%; }
.buddy .suvi-mark, .work-buddy .suvi-mark { width: 30px; height: 30px; }