/* ================= THINKING ANIMATION — DENAI DESIGN SYSTEM ================= */

.thinking-msg {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ===== Card ===== */
.thinking-bubble {
  background: #ffffff;
  border: 1px solid #e7e8eb;
  border-radius: 14px;
  padding: 18px 20px;
  min-width: 300px;
  max-width: 480px;
  box-shadow: 0 4px 16px rgba(25, 28, 30, 0.07);
  position: relative;
  overflow: hidden;
}

/* Subtle shimmer using brand red, not blue */
.thinking-bubble::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(183, 19, 26, 0.04), transparent);
  animation: shimmer 2.4s infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* ===== Header ===== */
.thinking-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #f0f1f4;
}

/* Spinning ring around icon */
.thinking-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(183, 19, 26, 0.15);
  border-top-color: #b7131a;
  animation: spinRing 0.9s linear infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.thinking-icon .material-symbols-outlined {
  font-size: 14px;
  color: #b7131a;
  position: absolute;
  animation: none; /* icon stays still, ring spins */
}

@keyframes spinRing {
  to { transform: rotate(360deg); }
}

.thinking-text {
  font-size: 14px;
  font-weight: 700;
  color: #191c1e;
  letter-spacing: 0.2px;
  flex: 1;
}

/* "MEMPROSES" badge replacing dots */
.thinking-dots {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(183, 19, 26, 0.07);
  border-radius: 999px;
  gap: 0;
}

.thinking-dots span {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b7131a;
  /* override bounce animation from old CSS */
  animation: badgePulse 2s ease-in-out infinite;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
}

/* Only show first span as text badge */
.thinking-dots span:nth-child(2),
.thinking-dots span:nth-child(3) {
  display: none;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

/* ===== Steps ===== */
.thinking-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.thinking-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
  opacity: 0.45;
  background: transparent;
}

.thinking-step.active {
  opacity: 1;
  background: rgba(183, 19, 26, 0.04);
  border-color: rgba(183, 19, 26, 0.15);
  animation: stepSlideIn 0.3s ease-out;
}

.thinking-step.completed {
  opacity: 0.65;
  background: rgba(22, 163, 74, 0.04);
  border-color: rgba(22, 163, 74, 0.12);
}

@keyframes stepSlideIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Step icon wrapper */
.thinking-step .step-icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.thinking-step .step-icon .material-symbols-outlined {
  font-size: 18px;
  color: #9CA3AF;
}

/* Active step: pulsing dot */
.thinking-step.active .step-icon .material-symbols-outlined {
  color: #b7131a;
  animation: iconPulse 1.2s ease-in-out infinite;
}

/* Completed step: green check */
.thinking-step.completed .step-icon .material-symbols-outlined {
  color: #16a34a;
  animation: none;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.8; }
}

/* Step text group */
.thinking-step .step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.thinking-step span {
  font-size: 13px;
  font-weight: 500;
  color: #9CA3AF;
  line-height: 1.4;
}

.thinking-step.active span {
  color: #191c1e;
  font-weight: 600;
}

.thinking-step.completed span {
  color: #5b403d;
}

/* Active step progress bar */
.thinking-step .step-progress {
  height: 2px;
  background: rgba(183, 19, 26, 0.12);
  border-radius: 999px;
  overflow: hidden;
  display: none;
}

.thinking-step.active .step-progress {
  display: block;
}

.thinking-step .step-progress-fill {
  height: 100%;
  width: 60%;
  background: #b7131a;
  border-radius: 999px;
  animation: progressSlide 1.6s ease-in-out infinite;
}

@keyframes progressSlide {
  0%   { width: 15%; margin-left: 0; }
  50%  { width: 50%; margin-left: 20%; }
  100% { width: 15%; margin-left: 85%; }
}

/* ===== Cancel / Hentikan Button ===== */
.cancel-btn {
  width: 100%;
  padding: 9px 16px;
  background: transparent;
  border: 1.5px solid rgba(183, 19, 26, 0.3);
  border-radius: 9px;
  color: #b7131a;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 0.2px;
}

.cancel-btn .material-symbols-outlined {
  font-size: 16px;
}

.cancel-btn:hover {
  background: rgba(183, 19, 26, 0.06);
  border-color: rgba(183, 19, 26, 0.5);
  transform: translateY(-1px);
}

.cancel-btn:active {
  transform: translateY(0);
}

/* ===== STOP BUTTON (send button transformation) ===== */
.stop-btn {
  background: #b7131a !important;
  border-color: #b7131a !important;
  color: #fff !important;
}

.stop-btn:hover {
  background: #db322f !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(183, 19, 26, 0.35);
}

/* ===== STOPPED RESPONSE ===== */
.stopped-response-msg {
  animation: fadeInUp 0.3s ease-out;
}

.stopped-response-bubble {
  background: #f8f9fc !important;
  border: 1px solid #e7e8eb !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  min-width: 240px;
  max-width: 480px;
}

.stopped-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f1f4;
}

.stopped-header::before {
  content: '⏹';
  font-size: 16px;
  opacity: 0.7;
}

.stopped-text {
  font-size: 14px;
  font-weight: 500;
  color: #9CA3AF;
  font-style: italic;
}

.stopped-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.regenerate-btn {
  flex: 1;
  padding: 7px 12px;
  background: rgba(183, 19, 26, 0.06);
  border: 1px solid rgba(183, 19, 26, 0.2);
  border-radius: 8px;
  color: #b7131a;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.regenerate-btn svg {
  width: 14px;
  height: 14px;
}

.regenerate-btn:hover {
  background: rgba(183, 19, 26, 0.12);
  border-color: rgba(183, 19, 26, 0.35);
  transform: translateY(-1px);
}

.dismiss-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid #e7e8eb;
  border-radius: 6px;
  color: #9CA3AF;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dismiss-btn svg {
  width: 13px;
  height: 13px;
}

.dismiss-btn:hover {
  background: rgba(183, 19, 26, 0.07);
  border-color: rgba(183, 19, 26, 0.2);
  color: #b7131a;
}

/* ===== ACCESSIBILITY ===== */
.cancel-btn:focus-visible {
  outline: 2px solid #b7131a;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .thinking-msg,
  .thinking-bubble::before,
  .thinking-icon,
  .thinking-dots span,
  .thinking-step,
  .stop-btn { animation: none; }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .thinking-bubble {
    min-width: auto;
    max-width: 100%;
    padding: 14px 16px;
  }
}