/* ═══════════════════════════════════════════════════════════
   AI — Polar Bear (小梦)  ·  Dreaming Polar
   ═══════════════════════════════════════════════════════════ */

/* ── Shared keyframes ─────────────────────────────────────── */
@keyframes ai-border-flow {
  0%   { background-position: 0 0, 0%   50%; }
  50%  { background-position: 0 0, 100% 50%; }
  100% { background-position: 0 0, 0%   50%; }
}

@keyframes ai-icon-breathe {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(22,163,74,0.55))
            drop-shadow(0 0 2px rgba(22,163,74,0.3));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(22,163,74,0.9))
            drop-shadow(0 0 24px rgba(124,58,237,0.35))
            drop-shadow(0 0 4px rgba(6,182,212,0.2));
    transform: scale(1.07);
  }
}

@keyframes ai-icon-working {
  0%   { filter: drop-shadow(0 0 8px rgba(22,163,74,1)) brightness(1.3); opacity: 1; }
  50%  { filter: drop-shadow(0 0 3px rgba(22,163,74,0.3)) brightness(0.75); opacity: 0.6; }
  100% { filter: drop-shadow(0 0 8px rgba(22,163,74,1)) brightness(1.3); opacity: 1; }
}

@keyframes ai-dialog-in {
  from { opacity: 0; transform: translate(-50%, -21px) scale(0.88); }
  to   { opacity: 1; transform: translate(-50%, -21px) scale(1); }
}

@keyframes ai-glow-pulse {
  0%, 100% { box-shadow:
    0 0 0  1px rgba(22,163,74,0.18),
    0 0 14px rgba(22,163,74,0.18),
    0 6px 28px rgba(0,0,0,0.13); }
  50% { box-shadow:
    0 0 0  1px rgba(22,163,74,0.28),
    0 0 28px rgba(22,163,74,0.28),
    0 0 48px rgba(124,58,237,0.10),
    0 8px 32px rgba(0,0,0,0.18); }
}


/* ── AI Header Button ─────────────────────────────────────── */
.ai-header-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  flex-shrink: 0;
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.ai-header-btn:hover  { transform: scale(1.14); }
.ai-header-btn:active { transform: scale(0.96); }
.ai-header-btn:disabled { cursor: default; }

.ai-header-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
  animation: ai-icon-breathe 3.2s ease-in-out infinite;
}
.ai-header-btn:disabled .ai-header-icon {
  animation: ai-icon-working 0.9s ease-in-out infinite;
}


/* ── AI Header Dialog ─────────────────────────────────────── */
.ai-header-dialog {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -21px);
  flex-direction: column;
  min-width: 340px;
  max-width: 420px;
  border-radius: 14px;
  z-index: 50;
  overflow: hidden;

  background:
    linear-gradient(var(--ai-dialog-bg, rgba(255,255,255,0.96)) 0 100%) padding-box,
    linear-gradient(90deg, #16a34a 0%, #7c3aed 40%, #06b6d4 70%, #16a34a 100%) border-box;
  background-size: 100% 100%, 300% 100%;
  border: 1.5px solid transparent;

  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}

.ai-header-dialog.visible {
  display: flex;
  animation:
    ai-dialog-in  0.28s cubic-bezier(0.34,1.56,0.64,1) forwards,
    ai-border-flow 4s ease infinite,
    ai-glow-pulse  3s ease-in-out infinite;
}

/* ── Main input row ───────────────────────────────────────── */
.ai-dialog-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 14px;
  height: 42px;
}

/* ── Chips row — hidden until dialog hover ────────────────── */
.ai-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 0 10px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: 1px solid transparent;
  transition: max-height 0.22s ease, opacity 0.18s ease, padding 0.22s ease, border-color 0.18s ease;
}

.ai-header-dialog:hover .ai-chips-row {
  max-height: 120px;
  opacity: 1;
  padding: 7px 10px 9px;
  border-top-color: rgba(128,128,128,0.12);
}

.ai-chip {
  padding: 3px 11px;
  border-radius: 20px;
  border: 1px solid var(--border, #e2e8f0);
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 0.71rem;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.13s, border-color 0.13s, color 0.13s;
}
.ai-chip:hover {
  background: rgba(22,163,74,0.07);
  border-color: #16a34a;
  color: #16a34a;
}

/* ── Input wrapper + ghost text ───────────────────────────── */
.ai-input-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.ai-ghost-overlay {
  position: absolute;
  inset: 0;
  padding: 0 8px;
  display: flex;
  align-items: center;
  pointer-events: none;
  font-size: 0.83rem;
  letter-spacing: 0.01em;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  z-index: 0;
}

.ai-ghost-typed { color: transparent; white-space: pre; }
.ai-ghost-rest  { color: var(--text-muted, #94a3b8); opacity: 0.5; white-space: pre; }

.ai-header-input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: none;
  background: transparent;
  color: var(--text, #102040);
  font-size: 0.83rem;
  letter-spacing: 0.01em;
  outline: none;
}
.ai-header-input::placeholder { color: var(--text-muted, #94a3b8); opacity: 0.6; }

.ai-header-submit {
  height: 28px;
  padding: 0 14px;
  background: linear-gradient(135deg, #16a34a 0%, #0ea5e9 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  color: #fff;
  border: none;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-position 0.4s ease, box-shadow 0.3s, transform 0.18s;
  box-shadow: 0 2px 10px rgba(22,163,74,0.35);
}
.ai-header-submit:hover {
  background-position: 100% 50%;
  box-shadow: 0 4px 18px rgba(14,165,233,0.45), 0 0 24px rgba(22,163,74,0.25);
  transform: translateY(-1px);
}
.ai-header-submit:active  { transform: translateY(0); box-shadow: none; }
.ai-header-submit:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

.ai-header-cancel {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-muted, #94a3b8);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.ai-header-cancel:hover { background: rgba(0,0,0,0.07); color: var(--text, #102040); }


/* ── Ask AI button (on error output blocks) ──────────────── */
.ask-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 4px 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #16a34a;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  transition: color 0.2s, box-shadow 0.25s, transform 0.18s;

  background:
    linear-gradient(var(--surface, #fff) 0 100%) padding-box,
    linear-gradient(90deg, #16a34a, #7c3aed) border-box;
  border: 1.5px solid transparent;
}
.ask-ai-btn:hover {
  color: #15803d;
  box-shadow: 0 0 12px rgba(22,163,74,0.3), 0 0 24px rgba(124,58,237,0.12);
  transform: translateY(-1px);
}
.ask-ai-btn:disabled { opacity: 0.5; cursor: default; transform: none; }


/* ── AI explanation output block ──────────────────────────── */
.output-ai-explanation {
  margin-top: 10px;
  padding: 12px 16px;
  border-radius: 0 8px 8px 0;
  border: 1px solid rgba(22,163,74,0.2);
  border-left: 3px solid;
  border-image: linear-gradient(180deg, #16a34a, #7c3aed) 1;
  background: linear-gradient(135deg, rgba(22,163,74,0.04) 0%, rgba(124,58,237,0.03) 100%);
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--text, #102040);
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 0 20px rgba(22,163,74,0.03), 0 2px 12px rgba(0,0,0,0.06);
}

.ai-explanation-label {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: linear-gradient(90deg, #16a34a, #7c3aed);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 6px;
}


/* ── Terminal toolbar button ──────────────────────────────── */
.dp-terminal-toolbar-btn {
  height: 28px;
  padding: 0 10px;
  border: 1.5px solid var(--border, #e2e8f0);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.dp-terminal-toolbar-btn:hover,
.dp-terminal-toolbar-btn.active {
  background: rgba(100,116,139,0.08);
  border-color: var(--text-muted, #64748b);
  color: var(--text, #102040);
  box-shadow: 0 0 8px rgba(100,116,139,0.15);
}


/* ── Dark / Grey / Aurora theme overrides ─────────────────── */
[data-theme="dark"]   { --ai-dialog-bg: rgba(13,17,23,0.94); }
[data-theme="grey"]   { --ai-dialog-bg: rgba(22,27,34,0.94); }
[data-theme="aurora"] { --ai-dialog-bg: rgba(7,7,26,0.94);   }

/* ── Dark theme icon — invert to white + green glow ─────── */
[data-theme="dark"] .ai-header-icon {
  animation: ai-icon-breathe-dark 3.2s ease-in-out infinite;
}
[data-theme="dark"] .ai-header-btn:disabled .ai-header-icon {
  animation: ai-icon-working-dark 0.9s ease-in-out infinite;
}
[data-theme="dark"] .ai-header-btn:hover { background: rgba(63,185,80,0.1); }

@keyframes ai-icon-breathe-dark {
  0%, 100% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 5px rgba(63,185,80,0.6))
            drop-shadow(0 0 2px rgba(63,185,80,0.35));
    transform: scale(1);
  }
  50% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 13px rgba(63,185,80,0.95))
            drop-shadow(0 0 26px rgba(63,185,80,0.4));
    transform: scale(1.07);
  }
}
@keyframes ai-icon-working-dark {
  0%   { filter: brightness(0) invert(1) drop-shadow(0 0 9px rgba(63,185,80,1));  opacity: 1; }
  50%  { filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(63,185,80,0.3)); opacity: 0.55; }
  100% { filter: brightness(0) invert(1) drop-shadow(0 0 9px rgba(63,185,80,1));  opacity: 1; }
}

/* ── Grey theme icon ─────────────────────────────────────── */
[data-theme="grey"] .ai-header-icon {
  animation: ai-icon-breathe-grey 3.2s ease-in-out infinite;
}
[data-theme="grey"] .ai-header-btn:disabled .ai-header-icon {
  animation: ai-icon-working-dark 0.9s ease-in-out infinite; /* reuse dark */
}
[data-theme="grey"] .ai-header-btn:hover { background: rgba(87,171,90,0.1); }

@keyframes ai-icon-breathe-grey {
  0%, 100% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 5px rgba(87,171,90,0.6))
            drop-shadow(0 0 2px rgba(87,171,90,0.35));
    transform: scale(1);
  }
  50% {
    filter: brightness(0) invert(1)
            drop-shadow(0 0 13px rgba(87,171,90,0.95))
            drop-shadow(0 0 26px rgba(87,171,90,0.4));
    transform: scale(1.07);
  }
}

/* ── Aurora theme icon — white + purple glow ─────────────── */
[data-theme="aurora"] .ai-header-icon {
  animation: ai-icon-breathe-aurora 3.2s ease-in-out infinite;
}
[data-theme="aurora"] .ai-header-btn:disabled .ai-header-icon {
  animation: ai-icon-working-aurora 0.9s ease-in-out infinite;
}
[data-theme="aurora"] .ai-header-btn:hover { background: rgba(192,132,252,0.12); }

@keyframes ai-icon-breathe-aurora {
  0%, 100% {
    filter: brightness(0) invert(1)
            sepia(1) saturate(2.5) hue-rotate(230deg)
            drop-shadow(0 0 5px rgba(192,132,252,0.65))
            drop-shadow(0 0 2px rgba(99,102,241,0.4));
    transform: scale(1);
  }
  50% {
    filter: brightness(0) invert(1)
            sepia(1) saturate(2.5) hue-rotate(230deg)
            drop-shadow(0 0 14px rgba(192,132,252,0.95))
            drop-shadow(0 0 28px rgba(99,102,241,0.5))
            drop-shadow(0 0 6px rgba(6,182,212,0.3));
    transform: scale(1.08);
  }
}
@keyframes ai-icon-working-aurora {
  0%   { filter: brightness(0) invert(1) sepia(1) saturate(2.5) hue-rotate(230deg) drop-shadow(0 0 10px rgba(192,132,252,1));  opacity: 1; }
  50%  { filter: brightness(0) invert(1) sepia(1) saturate(2.5) hue-rotate(230deg) drop-shadow(0 0 3px  rgba(192,132,252,0.3)); opacity: 0.55; }
  100% { filter: brightness(0) invert(1) sepia(1) saturate(2.5) hue-rotate(230deg) drop-shadow(0 0 10px rgba(192,132,252,1));  opacity: 1; }
}

[data-theme="aurora"] .ai-header-dialog.visible {
  background:
    linear-gradient(var(--ai-dialog-bg) 0 100%) padding-box,
    linear-gradient(90deg, #c084fc 0%, #6366f1 40%, #06b6d4 70%, #c084fc 100%) border-box;
  background-size: 100% 100%, 300% 100%;
}
[data-theme="aurora"] .ai-header-submit {
  background: linear-gradient(135deg, #c084fc 0%, #6366f1 100%);
  box-shadow: 0 2px 10px rgba(192,132,252,0.4);
}
[data-theme="aurora"] .ai-header-submit:hover {
  box-shadow: 0 4px 20px rgba(192,132,252,0.5), 0 0 28px rgba(99,102,241,0.3);
}
[data-theme="aurora"] .ask-ai-btn {
  background:
    linear-gradient(var(--surface, #07071a) 0 100%) padding-box,
    linear-gradient(90deg, #c084fc, #6366f1) border-box;
  color: #c084fc;
}
[data-theme="aurora"] .ask-ai-btn:hover {
  box-shadow: 0 0 14px rgba(192,132,252,0.4), 0 0 28px rgba(99,102,241,0.2);
}