/* ============================================================
   styles.css
   Seluruh CSS Momenin Studio (dipindah dari <style> di momenin.html).
   ============================================================ */

  :root{
    --bg:#17140F; --surface:#221C15; --surface-2:#2C251A; --text:#F4EEE1;
    --muted:#A79A83; --accent:#F5C518; --accent-ink:#1A1508; --shutter:#E1483A;
    --line: rgba(244,238,225,0.14); --radius: 16px;
    --font-display: 'Bebas Neue', 'Arial Narrow', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-script: 'Caveat', cursive;
  }
  @media (prefers-color-scheme: light){
    :root:not([data-theme="dark"]){
      --bg:#EDE6D6; --surface:#FBF8F1; --surface-2:#F1EADA; --text:#231C12;
      --muted:#7A6E58; --accent:#B8860B; --accent-ink:#FFFBEF; --shutter:#C43B2E;
      --line: rgba(35,28,18,0.14);
    }
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:hidden;}
  body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
  #app{max-width:640px;margin:0 auto;padding:20px 16px 60px;min-height:100vh;}
  .marquee{text-align:center;margin:8px 0 22px;}
  .marquee h1{font-family:var(--font-display);font-size:clamp(38px,9vw,56px);letter-spacing:2px;margin:0;color:var(--text);}
  .bulbs{display:flex;justify-content:center;gap:7px;margin-top:6px;}
  .bulbs span{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);opacity:.85;}
  .bulbs span:nth-child(3n){opacity:.4;box-shadow:none;}
  .tagline{font-family:var(--font-script);color:var(--muted);font-size:19px;text-align:center;margin:2px 0 0;}
  .subheadline{color:var(--muted);font-size:13px;text-align:center;margin:2px 0 0;letter-spacing:.3px;opacity:.85;}
  .card{border-radius:var(--radius);padding:22px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line);overflow-x:hidden;}
  .card h2{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;margin:0 0 4px;}
  .subtext{color:var(--muted);font-size:14px;margin:0 0 16px;}
  button{font-family:var(--font-body);font-weight:600;font-size:15px;border-radius:999px;border:1px solid transparent;padding:13px 22px;cursor:pointer;transition:transform .08s ease, opacity .15s ease;}
  button:active{transform:scale(.97);}
  button:disabled{opacity:.4;cursor:not-allowed;transform:none;}
  .btn-primary{background:var(--accent);color:var(--accent-ink);width:100%;}
  .btn-shutter{background:var(--shutter);color:#fff;}
  .btn-ghost{background:transparent;color:var(--text);border-color:var(--line);}
  .btn-sm{padding:8px 14px;font-size:13px;}
  .btn-row{display:flex;gap:10px;flex-wrap:wrap;}
  .btn-row button{flex:1;min-width:110px;}
  /* FITUR (revisi): tombol "Ambil Foto" lebih besar dari "Selesai Sesi Sekarang" saat
     sesi foto -- rasio 70:30, berlaku sama di semua ukuran layar (termasuk saat
     .floating-wrap melayang fixed di bawah layar HP). */
  #capture-controls #btn-capture{flex:7 1 0%;min-width:0;}
  #capture-controls #btn-end-early{flex:3 1 0%;min-width:0;}
  input[type="text"]{width:100%;font-family:var(--font-display);font-size:26px;letter-spacing:6px;text-align:center;background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;text-transform:uppercase;}
  input[type="text"]::placeholder{letter-spacing:2px;font-family:var(--font-body);font-size:14px;color:var(--muted);}
  input.url-input{font-family:var(--font-body);font-size:13px;letter-spacing:normal;text-transform:none;text-align:left;padding:10px 12px;}
  .hidden{display:none !important;}
  .room-code-display{font-family:var(--font-display);font-size:44px;letter-spacing:8px;text-align:center;color:var(--accent);margin:6px 0 2px;}
  .copy-hint{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px;}
  .video-pair{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0;}
  .video-pair.solo{grid-template-columns:1fr;max-width:280px;margin-left:auto;margin-right:auto;}
  .video-pair-shell{position:relative;}
  .video-slot{position:relative;aspect-ratio:1/1;background:#000;border-radius:12px;overflow:hidden;border:1px solid var(--line);}
  .video-slot video{width:100%;height:100%;object-fit:cover;opacity:0.9999;transform:translateZ(0);}
  /* Banyak browser/perangkat MEMANG mengirim stream kamera depan yang sudah
     ter-mirror secara bawaan (di luar kendali CSS) -- makanya menghapus mirror
     CSS saja tidak cukup. Preview di sini sengaja di-mirror lagi lewat CSS supaya
     hasilnya balik ke orientasi asli (natural, tidak terbalik), dan saat difoto
     framenya JUGA di-flip balik di canvas (lihat captureFrameDataURL) supaya
     preview & hasil foto konsisten sama-sama TIDAK terbalik. Berlaku untuk kamera
     lokal (KAMU) maupun kamera pasangan yang diterima lewat WebRTC (PASANGAN) --
     keduanya sama-sama kamera depan/selfie di perangkat masing-masing. */
  #video-local, #video-remote{transform:scaleX(-1) translateZ(0);}
  .video-slot .tag{position:absolute;bottom:6px;left:8px;font-size:11px;font-weight:700;background:rgba(0,0,0,.55);color:#fff;padding:3px 8px;border-radius:999px;letter-spacing:.5px;}
  .mic-btn{width:100%;margin:4px 0 10px;padding:9px 16px;font-size:13.5px;}
  .status-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);justify-content:center;margin:4px 0 14px;}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--muted);}
  .dot.live{background:#4CAF66;box-shadow:0 0 6px #4CAF66;}
  fieldset{border:none;padding:0;margin:0 0 18px;min-width:0;max-width:100%;overflow:hidden;}
  legend{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px;}
  .choice-row{display:flex;gap:8px;flex-wrap:wrap;}
  .choice-pill{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:14px;font-weight:600;cursor:pointer;}
  .choice-pill.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);}
  .swatch-row{display:flex;gap:10px;flex-wrap:wrap;}
  #scr-customize .swatch-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #scr-customize .swatch-row .swatch{flex:0 0 auto;}
  /* FITUR (revisi): tema warna & background di layar SEBELUM sesi foto (lobby) sekarang
     bisa digeser ke samping (slide horizontal), sama seperti di layar Sentuhan Terakhir. */
  #scr-lobby .swatch-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #scr-lobby .swatch-row .swatch{flex:0 0 auto;}
  /* FITUR (revisi): semua pilihan di lobby (Tata Letak, Jumlah Foto, Timer Jepretan,
     Bentuk Foto, Overlay Bingkai) sekarang bisa digeser ke samping (slide horizontal),
     senada dengan Tema Warna -- supaya tidak numpuk ke bawah / berantakan. */
  #scr-lobby .choice-row{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #scr-lobby .choice-row .choice-pill{flex:0 0 auto;white-space:nowrap;}
  .swatch{width:38px;height:38px;border-radius:10px;border:2px solid transparent;cursor:pointer;}
  .swatch.active{border-color:var(--text);}
  .sticker-row{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;min-width:0;max-width:100%;flex:1;}
  .sticker-row .sticker-btn{flex:0 0 auto;}
  .sticker-btn{font-size:22px;line-height:1;padding:8px 10px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;}
  .timer{font-family:var(--font-display);font-size:40px;letter-spacing:2px;text-align:center;color:var(--text);margin:6px 0 0;}
  .timer.low{color:var(--shutter);}
  .slot-indicator{text-align:center;color:var(--muted);font-size:14px;margin-bottom:10px;}
  .countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:64px;color:#fff;background:rgba(0,0,0,.35);pointer-events:none;z-index:10;}
  .note{font-size:12.5px;color:var(--muted);text-align:center;margin:-4px 0 10px;}

  .slot-picker{display:flex;gap:8px;overflow-x:auto;margin:12px 0;padding-bottom:6px;}
  .slot-card{
    flex:0 0 auto;width:64px;height:64px;border-radius:10px;overflow:hidden;
    border:2px solid var(--line);background:var(--surface-2);position:relative;cursor:pointer;
    display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);
  }
  .slot-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
  .slot-card.filled{border-color:var(--accent);}
  .slot-card.active{border-color:var(--shutter); box-shadow:0 0 0 2px var(--shutter);}
  .slot-card .num{position:absolute;top:2px;left:4px;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.5);border-radius:6px;padding:0 4px;}
  .slot-card .retake-badge{position:absolute;bottom:2px;right:2px;font-size:12px;background:rgba(0,0,0,.6);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;}
  .split-thumb{display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%;}
  .split-thumb img{width:100%;height:100%;object-fit:cover;}

  canvas#stripCanvas, canvas#sessionPreviewCanvas, canvas#lobbyPreviewCanvas{max-width:100%;border-radius:10px;display:block;margin:0 auto 10px;touch-action:none;}
  canvas#sessionPreviewCanvas, canvas#lobbyPreviewCanvas{max-width:130px;}
  canvas#stripCanvas{cursor:grab;max-width:280px;}
  .preview-wrap{text-align:center;}
  .settings-layout{display:flex;gap:14px;align-items:flex-start;}
  .settings-layout .preview-col{flex:0 0 110px;text-align:center;}
  .settings-layout .choices-col{flex:1;min-width:0;}
  .settings-layout .choices-col fieldset:last-child{margin-bottom:0;}
  /* Kamera lebih besar & jelas saat sesi foto -- berlaku di semua ukuran layar
     (dulu hanya dibesarkan khusus di HP, sekarang seragam PC/tablet/HP) karena
     kamera tidak lagi berbagi baris dengan kolom pratinjau strip. */
  #video-pair-anchor-session .video-pair.solo{max-width:600px;}
  /* FITUR (revisi): pratinjau strip TIDAK lagi ditampilkan langsung di samping kamera --
     canvas-nya (#session-preview-block) tetap ada di DOM (terus digambar ulang) tapi
     disembunyikan; isinya baru terlihat lewat modal zoom saat tombol "Pratinjau Strip"
     ditekan. Ini sekarang berlaku SAMA di semua ukuran layar (PC maupun HP), bukan
     cuma di HP seperti sebelumnya -- supaya kamera selalu dapat ruang penuh & lega. */
  #session-preview-block{display:none;}
  /* FITUR (revisi): grid 2 kolom bersama supaya tombol "Pratinjau Strip" benar-benar
     rata tengah di BAWAH tulisan "Cek Hasil Foto Strip" (bukan rata kiri) -- label &
     isinya jadi satu kolom grid yang sama (baris 1 = label, baris 2 = isi), lebar
     kolom otomatis mengikuti konten terlebar di kolom itu (label ATAU isi, mana yang
     lebih lebar) -- berlaku sama di semua ukuran layar. */
  .timer-row{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;justify-items:center;column-gap:28px;row-gap:4px;}
  .timer-row p{margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);}
  .timer-row .timer{margin:0;}
  @media (max-width:480px){
    .settings-layout{gap:10px;}
    .settings-layout .preview-col{flex:0 0 84px;}
    canvas#lobbyPreviewCanvas{max-width:68px;}
    /* FITUR (revisi/lanjutan): perbesar LAGI kotak kamera khusus di HP -- padding
       kartu & padding halaman dipangkas KHUSUS saat layar sesi foto aktif, supaya
       kamera dapat lebar tampilan semaksimal mungkin (video-pair.solo sudah mengikuti
       100% lebar wadahnya, jadi memperlebar wadahnya = memperbesar kameranya). */
    #scr-session .card{padding-left:8px;padding-right:8px;}
    body:has(#scr-session:not(.hidden)) #app{padding-left:6px;padding-right:6px;}
  }
  .filter-row{display:flex;gap:10px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;min-width:0;max-width:100%;}
  .filter-thumb{flex:0 0 auto;width:66px;text-align:center;cursor:pointer;}
  .filter-thumb img, .filter-thumb canvas, .filter-thumb .swatch-fallback{width:66px;height:66px;border-radius:12px;object-fit:cover;border:2px solid var(--line);display:block;background:var(--surface-2);}
  .filter-thumb.active img, .filter-thumb.active canvas, .filter-thumb.active .swatch-fallback{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);}
  .filter-thumb .label{display:block;font-size:11px;color:var(--muted);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .field-block{margin:0 0 18px;min-width:0;}
  .field-legend{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:8px;display:flex;align-items:center;gap:8px;}
  .soon-tag{background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;letter-spacing:.03em;text-transform:none;}
  .ai-theme-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
  .ai-theme-card{border:1px solid var(--line);border-radius:10px;padding:10px 4px;text-align:center;background:var(--surface-2);cursor:pointer;position:relative;transition:border-color .2s ease;}
  .ai-theme-card:hover{border-color:var(--accent);}
  /* FITUR (revisi): state kartu tema AI yang benar-benar TERPILIH (klik), beda dari
     sekadar hover -- supaya jelas tema mana yang akan dipakai saat tombol Generate ditekan. */
  .ai-theme-card.selected{border-color:var(--accent);border-width:2px;box-shadow:0 0 0 1px var(--accent);background:var(--surface);}
  .ai-theme-card .emoji{font-size:20px;display:block;margin-bottom:4px;}
  .ai-theme-card .name{font-size:10.5px;font-weight:600;color:var(--text);display:block;line-height:1.25;}
  .ai-theme-card .card-soon{position:absolute;top:-6px;right:-4px;background:linear-gradient(135deg,#f97316,#ef4444);color:#fff;font-size:8px;font-weight:800;padding:1px 5px;border-radius:6px;}
  .filter-thumb.active .label{color:var(--text);font-weight:600;}
  .banner{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:13.5px;color:var(--muted);margin-bottom:14px;}
  /* FITUR (baru, TRANSPARAN): indikator kecil & jujur setiap kali sesuatu (foto per-
     jepretan, GIF) otomatis dikirim/tersimpan ke server -- BUKAN diam-diam, selalu
     terlihat apa adanya (termasuk kalau gagal terkirim). */
  .save-indicator{font-size:12px;color:var(--muted);text-align:center;margin:6px 0 0;}
  .save-indicator.save-indicator-error{color:var(--shutter);}
  .banner.error{border-color:var(--shutter);color:var(--shutter);}
  .banner b{color:var(--text);}
  .overlay-toolbar-row{display:flex;gap:8px;align-items:flex-start;min-width:0;}
  .overlay-toolbar-row #btn-add-text{flex:0 0 auto;}
  .overlay-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:16px;}
  .overlay-panel .row{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
  select, input[type="color"]{
    font-family:var(--font-body);font-size:14px;background:var(--surface);color:var(--text);
    border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  }
  input[type="color"]{padding:2px;width:44px;height:36px;cursor:pointer;}
  footer.foot{text-align:center;color:var(--muted);font-size:12px;margin-top:24px;}
  .zoom-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
  .zoom-modal.hidden{display:none;}
  .zoom-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,3,0.88);}
  .zoom-modal-content{position:relative;z-index:1;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;}
  .zoom-modal-content img{max-width:100%;max-height:78vh;border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,0.55);display:block;}
  .zoom-modal-close{position:absolute;top:-16px;right:-12px;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--accent-ink);border:none;font-size:15px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:0;line-height:1;z-index:5;}
  /* FITUR (revisi): tombol navigasi kiri/kanan di zoom modal untuk lihat hasil lain */
  /* FITUR (perbaikan): z-index di atas supaya tombol X & navigasi tidak pernah ketutupan
     oleh overlay watermark (.wm-box::after) pada gambar yang sedang di-zoom. */
  .zoom-modal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,0.55);color:#fff;border:1px solid rgba(255,255,255,0.35);font-size:20px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;z-index:5;}
  .zoom-modal-nav.hidden{display:none !important;}
  .zoom-modal-nav.prev{left:-8px;}
  .zoom-modal-nav.next{right:-8px;}
  @media (max-width:480px){
    .zoom-modal-nav.prev{left:2px;}
    .zoom-modal-nav.next{right:2px;}
  }
  .zoom-modal-caption{color:rgba(255,255,255,0.6);font-size:12px;margin:10px 0 0;text-align:center;}
  canvas#sessionPreviewCanvas, canvas#lobbyPreviewCanvas{cursor:zoom-in;}

  /* FITUR (baru): popup "Pilih Fitur Room" -- kartu tengah sederhana, senada tema
     gelap/terang aplikasi, dipakai saat "Buat Room Baru" ditekan. */
  .choice-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
  .choice-modal.hidden{display:none;}
  .choice-modal-backdrop{position:absolute;inset:0;background:rgba(8,6,3,0.72);}
  .choice-modal-card{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;max-width:360px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,0.4);}
  .choice-modal-title{font-family:var(--font-display);font-size:26px;letter-spacing:.5px;margin:0 0 6px;}
  .choice-modal-options{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
  .choice-modal-options button{width:100%;text-align:left;display:flex;flex-direction:column;gap:2px;padding:14px 18px;}
  .choice-modal-desc{display:block;font-size:12px;font-weight:500;opacity:.85;white-space:normal;}

  /* Bar aksi: layout normal (inline, flex rata) di desktop, jadi navbar melayang di bawah layar HP */
  .floating-wrap{display:flex;gap:10px;flex-wrap:wrap;}
  .floating-wrap button{flex:1;min-width:110px;}
  /* FITUR (revisi): varian ditumpuk vertikal (mis. tombol Bagikan di atas Mulai Sesi Baru) */
  .floating-wrap.stack{flex-direction:column;}
  .floating-wrap.stack button{width:100%;}
  .floating-spacer{display:none;}
  @media (max-width:680px){
    .floating-wrap{
      position:fixed; left:0; right:0; bottom:0; z-index:60;
      background:var(--surface); border-top:1px solid var(--line);
      padding:12px 16px calc(12px + env(safe-area-inset-bottom));
      margin:0; box-shadow:0 -6px 18px rgba(0,0,0,.28);
      flex-wrap:nowrap;
    }
    .floating-wrap.hidden{display:none !important;}
    .floating-wrap button{margin:0;flex:1;min-width:0;font-size:14px;padding:13px 10px;}
    .floating-spacer{display:block;height:78px;}
  }

  /* FITUR: FLASH LAYAR (efek kedip putih saat shutter jepret) */
  .flash-overlay {
    position: fixed; inset: 0; background-color: #fff; z-index: 9999;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease-out;
  }
  .flash-overlay.active { opacity: 1; transition: none; }

  /* FITUR (revisi): pilihan Overlay Bingkai -- horizontal scroll seperti pilihan filter,
     supaya tidak berantakan / kepotong di layar Android/iOS yang sempit. */
  #c-choice-frame{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;min-width:0;max-width:100%;}
  #c-choice-frame .choice-pill{flex:0 0 auto;white-space:nowrap;}

  /* FITUR (revisi): pratinjau GIF setelah diekspor, + tombol efek musik saat pratinjau */
  #gif-preview-wrap{text-align:center;margin:6px 0 16px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px;}
  #gif-preview-img{max-width:220px;width:100%;border-radius:12px;border:1px solid var(--line);display:block;margin:0 auto 10px;background:#000;}

  /* FITUR (revisi): watermark tipis "PREVIEW MOMENIN STUDIO" di SEMUA area pratinjau
     (strip yang sedang diedit, pratinjau lobby/sesi, hasil AI, GIF) -- ini overlay CSS
     murni di layar (ikut kefoto kalau di-screenshot), BUKAN digambar ke file aslinya --
     file yang benar-benar diunduh lewat tombol Unduh tetap bersih tanpa watermark ini. */
  .wm-box{position:relative;display:inline-block;}
  .wm-box::after{
    content:'';
    position:absolute; inset:0;
    pointer-events:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='110'><text x='-10' y='60' font-family='Arial, sans-serif' font-size='15' font-weight='700' fill='white' transform='rotate(-22 100,60)'>PREVIEW MOMENIN STUDIO</text></svg>");
    background-repeat:repeat;
    opacity:0.3;
    mix-blend-mode:overlay;
    border-radius:inherit;
  }

  /* FITUR (revisi): ilustrasi loading saat generate AI -- non-modal, tidak menutup layar,
     jadi sisa halaman tetap bisa dipakai selama proses berjalan. */
  .ai-loading-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 14px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;text-align:center;}
  .ai-loading-icon{font-size:34px;animation:ai-bounce 1.1s ease-in-out infinite;}
  .ai-spinner{width:20px;height:20px;border:3px solid rgba(244,238,225,0.25);border-top-color:var(--accent);border-radius:50%;animation:ai-spin 0.8s linear infinite;}
  @keyframes ai-spin{to{transform:rotate(360deg);}}
  @keyframes ai-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}}