/* ==============================================================
   CYANIX AI — cx-upgrades.css  v1.0
   Companion styles for cx-upgrades.js
   All selectors are namespaced under .cx-* or #cx-* to avoid
   collisions with the existing style.css.
============================================================== */

/* ─── 1. ARTIFACT SPLIT-PANEL ──────────────────────────────── */

.cx-artifact-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 44vw;
  min-width: 320px;
  max-width: 900px;
  background: var(--surface, #090d1a);
  border-left: 1px solid var(--border-2, rgba(0,229,255,.14));
  display: flex;
  flex-direction: column;
  z-index: 8000;
  box-shadow: -12px 0 48px rgba(0,0,0,.55), -2px 0 12px rgba(0,229,255,.04);
  transition: transform .32s cubic-bezier(0.25,0.46,0.45,0.94),
              opacity  .28s ease;
  transform: translateX(0);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.cx-artifact-panel.hidden {
  transform: translateX(110%);
  opacity: 0;
  pointer-events: none;
}

/* Shrink main chat area when panel opens (desktop) */
@media (min-width: 901px) {
  .cx-panel-open {
    margin-right: 44vw;
    transition: margin-right .32s cubic-bezier(0.25,0.46,0.45,0.94);
  }
}

/* Header */
.cx-ap-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 48px;
  border-bottom: 1px solid var(--border, rgba(0,229,255,.08));
  background: var(--surface-2, #0d1220);
  flex-shrink: 0;
}

.cx-ap-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
}

.cx-ap-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: var(--r-sm, 7px);
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-3, #6278a0);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .18s ease;
  letter-spacing: .02em;
}
.cx-ap-tab:hover  { color: var(--text-2, #b0c4e8); background: var(--surface-3, #111828); }
.cx-ap-tab.active {
  color: var(--accent, #00e5ff);
  background: var(--accent-soft, rgba(0,229,255,.08));
  border-color: var(--border-2, rgba(0,229,255,.14));
}

.cx-ap-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cx-ap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: var(--r-sm, 7px);
  color: var(--text-3, #6278a0);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .15s ease;
}
.cx-ap-btn:hover { color: var(--text-1, #e8f0ff); background: var(--surface-3, #111828); border-color: var(--border, rgba(0,229,255,.08)); }
.cx-ap-close:hover { color: var(--red, #ff3b5c); background: var(--red-bg, rgba(255,59,92,.10)); }

/* Body panes */
.cx-ap-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.cx-ap-pane {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.cx-ap-pane.hidden { display: none; }

.cx-ap-iframe {
  width: 100%; height: 100%;
  border: none;
  background: #fff;
  border-radius: 0;
}

/* Code pane */
.cx-ap-code-pre {
  margin: 0;
  padding: 16px;
  font-family: var(--font-mono, 'Space Mono', monospace);
  font-size: .78rem;
  line-height: 1.65;
  color: var(--text-1, #e8f0ff);
  background: transparent;
  overflow: auto;
  height: 100%;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Resize handle */
.cx-ap-resize-handle {
  position: absolute;
  top: 0; left: -4px;
  width: 8px; height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}
.cx-ap-resize-handle:hover { background: linear-gradient(90deg, transparent, rgba(0,229,255,.15), transparent); }

/* Preview button (injected into code blocks) */
.cx-preview-btn {
  background: rgba(0,229,255,.08) !important;
  color: var(--accent, #00e5ff) !important;
  border: 1px solid rgba(0,229,255,.2) !important;
  margin-left: 6px;
}
.cx-preview-btn:hover { background: rgba(0,229,255,.16) !important; }

/* Mobile: bottom sheet */
@media (max-width: 900px) {
  .cx-artifact-panel {
    top: auto;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 65vh;
    border-left: none;
    border-top: 1px solid var(--border-2, rgba(0,229,255,.14));
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -12px 48px rgba(0,0,0,.6);
    transform: translateY(0);
  }
  .cx-artifact-panel.hidden {
    transform: translateY(115%);
  }
  .cx-ap-resize-handle { display: none; }
}

/* ─── 2. VISUAL DEEP SEARCH ────────────────────────────────── */

.cx-search-viz {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 6px 0;
  border-radius: var(--r-lg, 16px);
  background: var(--surface-2, #0d1220);
  border: 1px solid var(--border, rgba(0,229,255,.08));
  max-width: 460px;
  animation: cxSvIn .28s cubic-bezier(0.34,1.48,0.64,1);
  transition: opacity .3s ease, transform .3s ease;
}
@keyframes cxSvIn { from{opacity:0;transform:translateY(8px) scale(.97);}to{opacity:1;transform:none;} }

.cx-search-viz.hidden { display: none; }

.cx-sv-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cx-sv-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border-2, rgba(0,229,255,.14));
  border-top-color: var(--accent, #00e5ff);
  border-radius: 50%;
  animation: cxSpin .8s linear infinite;
  flex-shrink: 0;
}
@keyframes cxSpin { to { transform: rotate(360deg); } }

.cx-sv-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-2, #b0c4e8);
  letter-spacing: .02em;
}

.cx-sv-dots {
  display: flex;
  gap: 4px;
  margin-left: 4px;
}
.cx-sv-dots span {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent, #00e5ff);
  opacity: 0.4;
  animation: cxDotPulse 1.2s ease-in-out infinite;
}
.cx-sv-dots span:nth-child(2) { animation-delay: .2s; }
.cx-sv-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes cxDotPulse { 0%,100%{opacity:.4;} 50%{opacity:1;transform:scale(1.3);} }

/* Source chips */
.cx-sv-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cx-sv-sources.hidden { display: none; }

.cx-sv-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 5px;
  border-radius: var(--r-full, 9999px);
  background: var(--surface-3, #111828);
  border: 1px solid var(--border, rgba(0,229,255,.08));
  font-size: .72rem;
  color: var(--text-3, #6278a0);
}
.cx-sv-favicon {
  width: 12px; height: 12px;
  border-radius: 2px;
}

/* Fade-out animation */
.cx-sv-fade-out {
  opacity: 0 !important;
  transform: translateY(-6px) scale(.97) !important;
  pointer-events: none;
}

/* ─── 3. CONTEXT FOLD INDICATOR ────────────────────────────── */

/* Shown as a system message bubble when fold occurs */
.cx-context-fold-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-full, 9999px);
  background: rgba(124,58,237,.06);
  border: 1px solid rgba(124,58,237,.15);
  color: var(--violet, #7c3aed);
  font-size: .74rem;
  font-family: var(--font-mono, monospace);
  margin: 4px auto;
  width: fit-content;
  max-width: 90%;
  text-align: center;
}

/* ─── 4. OPTIMISTIC UI ─────────────────────────────────────── */

.cx-optimistic-row {
  opacity: 0.75;
  pointer-events: none;
}
.cx-optimistic-row .msg-bubble {
  position: relative;
  overflow: hidden;
}
.cx-optimistic-row .msg-bubble::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: cxOptShimmer 1.2s ease-in-out infinite;
}
@keyframes cxOptShimmer { 0%{background-position:200% 0;} 100%{background-position:-200% 0;} }

.cx-optimistic-remove {
  animation: cxOptOut .18s ease forwards;
}
@keyframes cxOptOut { to{opacity:0;transform:translateY(-4px);} }

/* ─── 5. VAD — no extra UI, ring color changes are done via JS ─ */

/* When VAD detects speech during TTS playback, pulse the overlay rings */
.cx-voice-overlay.cx-vad-interrupt .cxv-ring-1,
.cx-voice-overlay.cx-vad-interrupt .cxv-ring-2,
.cx-voice-overlay.cx-vad-interrupt .cxv-ring-3 {
  border-color: var(--rose, #ff2d78) !important;
  animation: cxVadPulse .4s ease-in-out 3;
}
@keyframes cxVadPulse { 0%,100%{opacity:.3;}50%{opacity:1;transform:scale(1.08);} }

/* ─── 6. INCOGNITO MODE ────────────────────────────────────── */

.cx-incognito-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full, 9999px);
  background: rgba(255,200,64,.08);
  border: 1px solid rgba(255,200,64,.25);
  color: #f0c040;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  font-family: var(--font-mono, monospace);
  animation: cxIncognitoGlow 2.4s ease-in-out infinite;
}
.cx-incognito-badge.hidden { display: none; }
@keyframes cxIncognitoGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,200,64,0); }
  50%     { box-shadow: 0 0 10px 2px rgba(255,200,64,.18); }
}

/* Settings row */
.cx-incognito-setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-top: 1px solid var(--border, rgba(0,229,255,.08));
}

/* Toggle switch */
.cx-toggle {
  position: relative;
  display: inline-block;
  width: 40px; height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.cx-toggle input { opacity: 0; width: 0; height: 0; }
.cx-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--surface-3, #111828);
  border: 1px solid var(--border-2, rgba(0,229,255,.14));
  border-radius: 99px;
  transition: background .2s ease, border-color .2s ease;
}
.cx-toggle-track::before {
  content: '';
  position: absolute;
  left: 3px; top: 3px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--text-3, #6278a0);
  transition: transform .2s ease, background .2s ease;
}
.cx-toggle input:checked + .cx-toggle-track {
  background: rgba(0,229,255,.12);
  border-color: var(--accent, #00e5ff);
}
.cx-toggle input:checked + .cx-toggle-track::before {
  transform: translateX(18px);
  background: var(--accent, #00e5ff);
}

/* ─── 8. COMPLIX THINK PANEL ───────────────────────────────── */

.cx-think-panel {
  margin: 8px 0;
  border-radius: var(--r-lg, 16px);
  background: var(--surface-2, #0d1220);
  border: 1px solid var(--border, rgba(0,229,255,.08));
  overflow: hidden;
  animation: cxTpIn .24s ease;
  transition: opacity .3s ease, transform .3s ease;
  max-width: 520px;
}
@keyframes cxTpIn { from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;} }
.cx-think-panel.hidden  { display: none; }
.cx-fade-out { opacity: 0 !important; transform: translateY(-4px) scale(.98) !important; transition: all .3s ease !important; pointer-events: none; }

.cx-tp-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  cursor: pointer;
}

.cx-tp-dots {
  display: flex;
  gap: 4px;
}
.cx-tp-dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent, #00e5ff);
  opacity: 0.5;
  animation: cxTpDot 1.4s ease-in-out infinite;
}
.cx-tp-dots span:nth-child(2) { animation-delay: .22s; }
.cx-tp-dots span:nth-child(3) { animation-delay: .44s; }
@keyframes cxTpDot { 0%,100%{opacity:.3;transform:scale(1);}50%{opacity:1;transform:scale(1.25);} }

.cx-tp-title {
  flex: 1;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-3, #6278a0);
  letter-spacing: .04em;
  font-family: var(--font-mono, monospace);
}

.cx-tp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: var(--r-sm, 7px);
  color: var(--text-4, #3a4d70);
  background: transparent;
  cursor: pointer;
  border: none;
  transition: color .15s ease, transform .2s ease;
}
.cx-tp-toggle:hover { color: var(--text-2, #b0c4e8); }
.cx-tp-toggle.rotated svg { transform: rotate(180deg); }

.cx-tp-body {
  border-top: 1px solid var(--border, rgba(0,229,255,.08));
  padding: 10px 12px;
}
.cx-tp-body.hidden { display: none; }

.cx-tp-stages {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cx-tp-stage {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--r-full, 9999px);
  border: 1px solid var(--border, rgba(0,229,255,.08));
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-4, #3a4d70);
  background: transparent;
  transition: all .2s ease;
  font-family: var(--font-mono, monospace);
}
.cx-tp-stage.active {
  border-color: var(--accent, #00e5ff);
  color: var(--accent, #00e5ff);
  background: var(--accent-soft, rgba(0,229,255,.08));
  box-shadow: 0 0 8px var(--accent-glow, rgba(0,229,255,.22));
  animation: cxStageActive 1.6s ease-in-out infinite;
}
@keyframes cxStageActive { 0%,100%{box-shadow:0 0 6px var(--accent-glow);}50%{box-shadow:0 0 16px var(--accent-glow);} }
.cx-tp-stage.done {
  color: var(--green-text, #00cc82);
  border-color: rgba(0,255,163,.18);
  background: rgba(0,255,163,.04);
}

.cx-tp-stage-icon { font-size: 11px; }
.cx-tp-stage-label { font-size: .72rem; }
.cx-tp-stage-status { font-size: .68rem; opacity: .6; margin-left: 2px; }

.cx-tp-log {
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: none;
}
.cx-tp-log::-webkit-scrollbar { display: none; }

.cx-tp-log-line {
  font-size: .7rem;
  color: var(--text-4, #3a4d70);
  font-family: var(--font-mono, monospace);
  padding: 1px 0;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── GLOBAL UTILITY ───────────────────────────────────────── */

/* Smooth panel transitions */
.cx-panel-open {
  transition: margin-right .32s cubic-bezier(0.25,0.46,0.45,0.94) !important;
}

/* Shared fade-in */
@keyframes cxFadeIn { from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;} }

/* High-z overlays ordering */
#cx-artifact-panel   { z-index: 8000; }
#cx-incognito-badge  { z-index: 7000; }
#cx-search-viz       { z-index: 100;  }
#cx-think-panel      { z-index: 100;  }

/* ─── RESPONSIVE REFINEMENTS ───────────────────────────────── */
@media (max-width: 700px) {
  .cx-tp-stages { gap: 4px; }
  .cx-tp-stage  { padding: 2px 8px; font-size: .68rem; }
  .cx-search-viz { max-width: 100%; border-radius: var(--r, 11px); }
  .cx-sv-source-chip { font-size: .68rem; }
  .cx-ap-tab span { display: none; } /* icon only on mobile */
  .cx-ap-header { padding: 0 8px; }
}

/* ─── DARK/LIGHT THEME OVERRIDES ───────────────────────────── */
[data-theme="light"] .cx-artifact-panel {
  background: var(--surface, #fff);
  border-color: var(--border-2, rgba(37,99,235,.20));
  box-shadow: -8px 0 32px rgba(0,0,0,.12);
}
[data-theme="light"] .cx-ap-header   { background: var(--surface-2, #f4f7fc); }
[data-theme="light"] .cx-ap-code-pre { color: var(--text-1, #0a1628); }
[data-theme="light"] .cx-search-viz  { background: var(--surface-2, #f4f7fc); }
[data-theme="light"] .cx-think-panel { background: var(--surface-2, #f4f7fc); }

[data-theme="neon"] .cx-ap-tab.active        { color: #c840ff; background: rgba(200,64,255,.08); border-color: rgba(200,64,255,.25); }
[data-theme="neon"] .cx-sv-spinner           { border-top-color: #c840ff; }
[data-theme="neon"] .cx-tp-stage.active      { border-color: #c840ff; color: #c840ff; background: rgba(200,64,255,.08); }
[data-theme="neon"] .cx-incognito-badge      { border-color: rgba(200,64,255,.35); color: #c840ff; }

[data-theme="midnight"] .cx-ap-tab.active    { color: #4488ff; background: rgba(68,136,255,.08); }
[data-theme="midnight"] .cx-sv-spinner       { border-top-color: #4488ff; }
[data-theme="midnight"] .cx-tp-stage.active  { border-color: #4488ff; color: #4488ff; }

/* ─── ACCESSIBILITY ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cx-sv-spinner,
  .cx-sv-dots span,
  .cx-tp-dots span,
  .cx-optimistic-row .msg-bubble::after,
  .cx-incognito-badge,
  .cx-tp-stage.active {
    animation: none;
  }
  .cx-artifact-panel,
  .cx-panel-open {
    transition: none !important;
  }
}