/* css/features/characters/characters.css — AV Character System v3, Immersive Mode */

/* ═══ AV Character System v3 ═══════════════════════════════════════════════ */
/* Scale wrapper: inner stage 200×185, outer = sz×sz, CSS scale handles resize */

.av-char-wrap{display:inline-block;position:relative;overflow:hidden;flex-shrink:0;border-radius:14px;background:var(--bg);-webkit-transform:translateZ(0);transform:translateZ(0)}
.av-stage{position:relative;overflow:visible}
/* char-group: anchor at 50% left, 70% top of stage (ref: 200×185) */
.av-char-group{position:absolute;left:50%;top:55%;width:0;height:0;transform-style:preserve-3d;animation:av-float 3.2s ease-in-out infinite}

/* Layer base — 192.51px = 2048 × 0.094 ref */
.av-cl{position:absolute;left:0;top:0;width:192.51px;height:192.51px;transform:translate(-96.26px,-110.92px);pointer-events:none;user-select:none;will-change:transform}
.av-cl img{width:100%;height:100%;object-fit:fill;display:block}

/* Anim classes */
.av-oc1{animation:av-coin-cw  5s linear infinite}
.av-oc2{animation:av-coin-ccw 7s linear infinite}
.av-ob1{animation:av-coin-cw  9s linear infinite}
.av-pr1{animation:av-flat-cw  12s linear infinite}
.av-pr2{animation:av-flat-ccw 16s linear infinite}
.av-gx {animation:av-coin-cw  20s linear infinite}
.av-gxi{animation:av-coin-ccw 15s linear infinite}
.av-gp1{animation:av-pulse-a  3s ease-in-out infinite}
.av-gp2{animation:av-pulse-b  4s ease-in-out infinite}
.av-gp3{animation:av-pulse-a  5s ease-in-out infinite}
.av-rl1{animation:av-flicker  2.4s ease-in-out infinite}
.av-cf {animation:av-cape     3.5s ease-in-out infinite}
.av-ey {animation:av-blink    5s ease-in-out infinite}
.av-ar {animation:av-sway     6s ease-in-out infinite}
.av-scr{mix-blend-mode:screen}
/* FIX ข้อ 8: โหมดจอใหญ่ห้ามดันจอขยายด้านข้าง */
#lc-modal,#sc-copilot,#sc-advisor,#sc-robot-chat{max-width:100vw;overflow-x:hidden}
#lc-modal *,#sc-copilot .av-char-wrap,#sc-advisor .av-char-wrap{max-width:100%}
/* FIX ข้อ 14: เฟรมสี่เหลี่ยมหมุนตามเอฟเฟกต์ — บังคับ blend ที่ตัวรูปด้วย + ตัดขอบ/พื้นหลัง */
.av-cl img{display:block;border:none;background:transparent}
.av-scr img{mix-blend-mode:screen}

/* Keyframes */
@keyframes av-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes av-coin-cw {0%{transform:translate(-96.26px,-110.92px) perspective(500px) rotateY(0deg)}100%{transform:translate(-96.26px,-110.92px) perspective(500px) rotateY(360deg)}}
@keyframes av-coin-ccw{0%{transform:translate(-96.26px,-110.92px) perspective(500px) rotateY(0deg)}100%{transform:translate(-96.26px,-110.92px) perspective(500px) rotateY(-360deg)}}
@keyframes av-flat-cw {0%{transform:translate(-96.26px,-110.92px) rotate(0deg)}100%{transform:translate(-96.26px,-110.92px) rotate(360deg)}}
@keyframes av-flat-ccw{0%{transform:translate(-96.26px,-110.92px) rotate(0deg)}100%{transform:translate(-96.26px,-110.92px) rotate(-360deg)}}
@keyframes av-pulse-a {0%,100%{opacity:.38;transform:translate(-96.26px,-110.92px) scale(.96)}50%{opacity:.80;transform:translate(-96.26px,-110.92px) scale(1.04)}}
@keyframes av-pulse-b {0%,100%{opacity:.22;transform:translate(-96.26px,-110.92px) scale(.94)}50%{opacity:.58;transform:translate(-96.26px,-110.92px) scale(1.06)}}
@keyframes av-blink   {0%,90%,100%{transform:translate(-96.26px,-110.92px) scaleY(1)}93%{transform:translate(-96.26px,-110.92px) scaleY(.05)}}
@keyframes av-cape    {0%,100%{transform:translate(-96.26px,-110.92px) rotate(-1.5deg)}50%{transform:translate(-96.26px,-110.92px) rotate(1.5deg)}}
@keyframes av-flicker {0%,100%{opacity:.55}40%{opacity:.28}70%{opacity:.72}}
@keyframes av-sway    {0%,100%{transform:translate(-96.26px,-110.92px) rotate(-.8deg)}50%{transform:translate(-96.26px,-110.92px) rotate(.8deg)}}

/* ─────────────────────────────────────────────────────
   IMMERSIVE MODE (โหมดจอใหญ่) — cop / adv / lc
   ───────────────────────────────────────────────────── */

/* ── COP (Nova) ── */
.av-cop-imm #cop-starters,
.av-cop-imm #cop-input-row { display:none!important }
.av-cop-imm #cop-imm-mic   { display:flex!important }

/* ── ADV (Nova Elite) ── */
.av-adv-imm #adv-mode-desc,
.av-adv-imm #adv-history-wrap,
.av-adv-imm #adv-input-wrap,
.av-adv-imm #adv-exq-label,
.av-adv-imm #adv-exq-chips,
.av-adv-imm #adv-cat-label,
.av-adv-imm #adv-cats,
.av-adv-imm #adv-form-detail,
.av-adv-imm #adv-form-detail-2,
.av-adv-imm #adv-deep-form  { display:none!important }
.av-adv-imm #adv-imm-mic    { display:flex!important }

/* ── LC / Astra ── */
.av-lc-imm #lc-loading,
.av-lc-imm #lc-content,
.av-lc-imm #lc-controls,
.av-lc-imm #lc-error        { display:none!important }
.av-lc-imm #lc-voice-bar    { display:flex!important }

/* ── Archetype Card (.ac-card) — non-AI archetype display ──
   ใช้ในการ์ดข้างๆ ใน sc-insight และ share card
   ตาม archetype-cards.html style ─────────────────────────── */
.ac-card{display:flex;flex-direction:column;align-items:stretch;border-radius:12px;overflow:hidden;background:var(--bg2);border:none;box-shadow:none;-webkit-transform:translateZ(0);transform:translateZ(0)}
.ac-stage-wrap{position:relative;overflow:hidden;flex-shrink:0}
.ac-footer{padding:5px 6px 7px;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.ac-name{font-size:.60rem;font-weight:700;color:#f1f5f9;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-sub{font-size:.52rem;font-weight:700;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px}