/*
  CORE_IGNITION_FX_V1 (PREVIEW) - efek "menyala" saat pindah ke mode Core.
  html.core-on     = mode Core aktif (ambient tipis, persisten)
  html.core-ignite = sekuens sekali jalan ~1,6 dtk saat baru masuk Core
  Rollback: hapus <link> chat-core-fx.css + blok skrip CORE_IGNITION_FX_V1.
*/

:root {
  --core-glow: 184, 150, 96;   /* copper */
}

/* Aura: lapisan tetap di atas kanvas, tembus klik */
.core-aura {
  position: absolute; left: 0; right: 0; top: 0; height: 70vh;
  pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 70% 55% at 50% -8%,
    rgba(var(--core-glow), .34) 0%, rgba(var(--core-glow), .10) 45%, transparent 72%);
  opacity: 0; transform-origin: 50% 0;
  transition: opacity .9s ease;
  mix-blend-mode: screen;
}
html[data-theme="light"] .core-aura { mix-blend-mode: multiply; }
[data-theme="light"] .core-aura {
  background: radial-gradient(ellipse 70% 55% at 50% -8%,
    rgba(var(--core-glow), .30) 0%, rgba(var(--core-glow), .08) 45%, transparent 72%);
}
html.core-on .core-aura { opacity: .55; }

/* Pil mode: badge Core copper penuh */
html.core-on .mode-pill .think-badge.deep {
  background: rgba(var(--core-glow), .22); color: #e8d3ad;
}
html.core-on[data-theme="light"] .mode-pill .think-badge.deep { color: #6b5634; background: rgba(var(--core-glow), .20); }
.mode-pill { position: relative; overflow: hidden; }
.mode-pill::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 236, 200, .55) 50%, transparent 80%);
  transform: translateX(-120%); opacity: 0;
}

/* Composer: garis copper tipis selama Core */
html.core-on .input-box {
  border-color: rgba(var(--core-glow), .45) !important;
}

/* ── Sekuens nyala ── */
html.core-ignite .core-aura { animation: coreAuraIgnite 1.6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes coreAuraIgnite {
  0%   { opacity: 0;   transform: scaleY(.55) scaleX(.8); }
  30%  { opacity: 1;   transform: scaleY(1.2) scaleX(1.05); }
  100% { opacity: .55; transform: scaleY(1)   scaleX(1); }
}

html.core-ignite .mode-pill::after { animation: corePillSweep .9s .15s ease-out both; }
@keyframes corePillSweep {
  0%   { transform: translateX(-120%); opacity: 1; }
  100% { transform: translateX(120%);  opacity: 1; }
}
html.core-ignite .mode-pill { animation: corePillPulse 1.2s ease-out both; }
@keyframes corePillPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--core-glow), .55); }
  100% { box-shadow: 0 0 0 10px rgba(var(--core-glow), 0); }
}

html.core-ignite .input-box { animation: coreComposerPulse 1.5s .25s ease-out both; }
@keyframes coreComposerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--core-glow), .50), 0 12px 32px rgba(0,0,0,.28); }
  40%  { box-shadow: 0 0 0 6px rgba(var(--core-glow), .16), 0 0 38px rgba(var(--core-glow), .30); }
  100% { box-shadow: 0 0 0 0 rgba(var(--core-glow), 0), 0 12px 32px rgba(0,0,0,.28); }
}

/* Cincin gelombang dari logo sambutan */
.wel-logo { position: relative; }
.wel-logo::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1.5px solid rgba(var(--core-glow), .8);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
}
html.core-ignite .wel-logo::after { animation: coreRing 1.3s .1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes coreRing {
  0%   { transform: translate(-50%, -50%) scale(.6); opacity: .9; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
html.core-ignite .wel-logo img { animation: coreLogo 1.3s ease-out both; }
@keyframes coreLogo {
  0%   { filter: drop-shadow(0 0 0 rgba(var(--core-glow), 0)); transform: scale(1); }
  35%  { filter: drop-shadow(0 0 22px rgba(var(--core-glow), .75)); transform: scale(1.06); }
  100% { filter: drop-shadow(0 0 0 rgba(var(--core-glow), 0)); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html.core-ignite .core-aura,
  html.core-ignite .mode-pill,
  html.core-ignite .mode-pill::after,
  html.core-ignite .input-box,
  html.core-ignite .wel-logo::after,
  html.core-ignite .wel-logo img { animation: none !important; }
}

/* ── Penguat: sapu cahaya turun ── */
.core-aura::after {
  content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(var(--core-glow), .9), transparent);
  filter: blur(1px); opacity: 0;
}
html.core-ignite .core-aura::after { animation: coreScan 1.1s .1s cubic-bezier(.3, .6, .2, 1) both; }
@keyframes coreScan {
  0%   { top: 0;    opacity: 0; }
  15%  { opacity: 1; }
  100% { top: 62vh; opacity: 0; }
}

/* ── Penguat: cahaya memutari tepi composer sekali ── */
@property --core-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.input-box { position: relative; }
.input-box::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--core-a), transparent 0deg, rgba(var(--core-glow), 1) 40deg, rgba(255, 232, 190, .95) 60deg, transparent 110deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
}
html.core-ignite .input-box::after { animation: coreEdge 1.5s .2s cubic-bezier(.45, .1, .3, 1) both; }
@keyframes coreEdge {
  0%   { --core-a: -60deg; opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { --core-a: 300deg; opacity: 0; }
}

/* ── Penguat: tiga cincin berlapis ── */
.wel-logo::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(var(--core-glow), .6);
  transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
}
html.core-ignite .wel-logo::before { animation: coreRing 1.5s .35s cubic-bezier(.2, .7, .2, 1) both; }
.wel-logo .core-ring3 {
  position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; border-radius: 50%;
  border: 1px solid rgba(var(--core-glow), .4); transform: translate(-50%, -50%) scale(.6); opacity: 0; pointer-events: none;
}
html.core-ignite .wel-logo .core-ring3 { animation: coreRing 1.7s .6s cubic-bezier(.2, .7, .2, 1) both; }

/* Judul Core: masuk halus */
.wel-title.core-swap, .wel-sub.core-swap { animation: coreTitleIn .7s .35s ease-out both; }
@keyframes coreTitleIn {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(4px); }
  100% { opacity: 1; transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.core-ignite .core-aura::after,
  html.core-ignite .input-box::after,
  html.core-ignite .wel-logo::before,
  html.core-ignite .wel-logo .core-ring3,
  .wel-title.core-swap, .wel-sub.core-swap { animation: none !important; }
}

/* ── V2 penguat (lebih berani) ── */
html.core-ignite .core-aura {
  background: radial-gradient(ellipse 95% 75% at 50% -8%,
    rgba(var(--core-glow), .60) 0%, rgba(var(--core-glow), .18) 45%, transparent 75%);
}
/* kilatan tipis seluruh kanvas */
.core-aura::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100vh;
  background: rgba(var(--core-glow), .10); opacity: 0;
}
html.core-ignite .core-aura::before { animation: coreFlash .9s ease-out both; }
@keyframes coreFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

html.core-ignite .wel-logo::after { border-width: 2px; border-color: rgba(var(--core-glow), 1); animation-name: coreRingBig; }
html.core-ignite .wel-logo::before { border-width: 1.5px; border-color: rgba(var(--core-glow), .8); animation-name: coreRingBig; }
html.core-ignite .wel-logo .core-ring3 { border-color: rgba(var(--core-glow), .6); animation-name: coreRingBig; }
@keyframes coreRingBig {
  0%   { transform: translate(-50%, -50%) scale(.7); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}
html.core-ignite .wel-logo img { animation: coreLogoBig 1.6s ease-out both; }
@keyframes coreLogoBig {
  0%   { filter: drop-shadow(0 0 0 rgba(var(--core-glow), 0)) brightness(1); transform: scale(1); }
  30%  { filter: drop-shadow(0 0 34px rgba(var(--core-glow), 1)) brightness(1.5); transform: scale(1.12); }
  100% { filter: drop-shadow(0 0 0 rgba(var(--core-glow), 0)) brightness(1); transform: scale(1); }
}
.wel-title.core-swap em { animation: coreWordGlow 1.8s .45s ease-out both; }
@keyframes coreWordGlow {
  0%   { text-shadow: 0 0 0 rgba(var(--core-glow), 0); }
  35%  { text-shadow: 0 0 22px rgba(var(--core-glow), .95), 0 0 2px rgba(255, 230, 190, .8); }
  100% { text-shadow: 0 0 0 rgba(var(--core-glow), 0); }
}
html.core-ignite .input-box::after { padding: 2px; }
@keyframes coreComposerPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--core-glow), .6), 0 12px 32px rgba(0,0,0,.28); }
  40%  { box-shadow: 0 0 0 5px rgba(var(--core-glow), .18), 0 0 60px rgba(var(--core-glow), .45); }
  100% { box-shadow: 0 0 0 0 rgba(var(--core-glow), 0), 0 12px 32px rgba(0,0,0,.28); }
}
@media (prefers-reduced-motion: reduce) {
  html.core-ignite .core-aura::before, .wel-title.core-swap em { animation: none !important; }
}

/* ── CORE_STAGE_TRACK_V1: panel tahapan Core ── */
.msg.core-tracking .reason-wrap,
.msg.core-tracking .typing,
.msg.core-tracking .agentic-indicator,
.msg.core-tracking .deep-badge { display: none !important; }

.core-track { margin: 2px 0 14px; max-width: 520px; animation: ctIn .45s ease-out both; }
@keyframes ctIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.ct-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tx-3); }
.ct-mark {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: rgb(var(--core-glow)); box-shadow: 0 0 0 0 rgba(var(--core-glow), .6);
  animation: ctBeat 1.8s ease-out infinite;
}
.core-track.collapsed .ct-mark { animation: none; box-shadow: none; }
@keyframes ctBeat { 0% { box-shadow: 0 0 0 0 rgba(var(--core-glow), .55); } 100% { box-shadow: 0 0 0 9px rgba(var(--core-glow), 0); } }
.ct-title { font-weight: 600; color: var(--tx); letter-spacing: .01em; }
.ct-model { color: var(--tx-3); }
.ct-time { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--tx-3); }

.ct-rail { position: relative; height: 2px; margin: 10px 0 12px; background: var(--brd); border-radius: 2px; overflow: hidden; }
.ct-rail span {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px;
  background: linear-gradient(90deg, rgba(var(--core-glow), .55), rgb(var(--core-glow)));
  transition: width .8s cubic-bezier(.2, .7, .2, 1);
}
.ct-rail span::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 60px; right: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 236, 205, .9), transparent);
  animation: ctShine 1.6s ease-in-out infinite;
}
@keyframes ctShine { 0% { transform: translateX(-120px); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateX(40px); opacity: 0; } }

.ct-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ct-step { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.35; color: var(--tx-3); transition: color .3s ease; }
.ct-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; border: 1.5px solid var(--tx-4); transition: all .3s ease; }
.ct-step.done { color: var(--tx-2); }
.ct-step.done .ct-dot { background: rgb(var(--core-glow)); border-color: rgb(var(--core-glow)); }
.ct-step.active { color: var(--tx); }
.ct-step.active .ct-dot { border-color: rgb(var(--core-glow)); background: transparent; box-shadow: 0 0 0 3px rgba(var(--core-glow), .18); animation: ctBeat 1.8s ease-out infinite; }
.ct-step.active .ct-label {
  background: linear-gradient(90deg, var(--tx) 0%, var(--tx) 40%, rgb(var(--core-glow)) 50%, var(--tx) 60%, var(--tx) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: ctText 2.4s linear infinite;
}
@keyframes ctText { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.ct-step.pending { color: var(--tx-4); }
.ct-step.failed { color: var(--tx-3); }
.ct-step.failed .ct-dot { border-color: var(--tx-3); }
.ct-note { margin-top: 12px; font-size: 12.5px; color: var(--tx-4); }

/* ringkas sesudah jawaban mulai */
.ct-sum {
  display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 6px 3px 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: var(--tx-3);
}
.ct-sum:hover { color: var(--tx); }
.ct-sum svg { width: 12px; height: 12px; transition: transform .2s ease; }
.core-track.open .ct-sum svg { transform: rotate(90deg); }
.core-track.collapsed .ct-steps { display: none; margin-top: 8px; padding-left: 2px; gap: 7px; }
.core-track.collapsed.open .ct-steps { display: flex; }
.core-track.collapsed .ct-step { font-size: 13px; }
.core-track.collapsed { margin-bottom: 8px; }

/* ── STREAM_CASCADE_V1: fade kata lebih lembut + kursor titik ── */
.m-txt .w { animation: wfadeSoft .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes wfadeSoft {
  from { opacity: 0; filter: blur(3px); transform: translateY(1px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}
.streaming-cursor {
  width: 8px !important; height: 8px !important; border-radius: 50% !important;
  margin-left: 4px !important; vertical-align: .05em !important;
  background: rgb(var(--core-glow)) !important;
  animation: cursorSoft 1.4s ease-in-out infinite !important;
}
@keyframes cursorSoft {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); box-shadow: 0 0 10px rgba(var(--core-glow), .6); }
}

@media (prefers-reduced-motion: reduce) {
  .ct-mark, .ct-step.active .ct-dot, .ct-step.active .ct-label, .ct-rail span::after, .core-track { animation: none !important; }
  .ct-step.active .ct-label { -webkit-text-fill-color: currentColor; background: none; }
  .m-txt .w { animation: none !important; }
  .streaming-cursor { animation: none !important; }
}
/* label "Core" lama redundan bila panel tahapan ada */
.m-body:has(.core-track) .deep-badge { display: none !important; }