/*
 * chat-cyberpunk-premium.css — Premium cyberpunk chat polish
 *
 * Loaded on [data-platform="cyberpunk"] for chat.html.
 * Brings PTT-grade animations + cyberpunk-ultra effects into the
 * chat message stream. CRT scan-lines, holographic heading gradients,
 * neon glow accents, animated entry, rich formatting hierarchy.
 *
 * All colors flow from the active theme's CSS variables.
 */

/* ══════════════════════════════════════════════════════════
   CRT SCAN-LINE OVERLAY on the chat main panel
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .chat-main {
  position: relative;
}
[data-platform="cyberpunk"] .chat-main::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0, transparent 2px,
    rgba(0,0,0,.12) 2px, rgba(0,0,0,.12) 3px
  );
  mix-blend-mode: multiply;
  opacity: .35;
  border-radius: inherit;
}
[data-platform="cyberpunk"] .ch-messages,
[data-platform="cyberpunk"] .ch-header,
[data-platform="cyberpunk"] .ch-composer { position: relative; z-index: 1; }

/* ══════════════════════════════════════════════════════════
   MESSAGE ENTRY — blur-in with subtle glitch
   ══════════════════════════════════════════════════════════ */
@keyframes cyber-msg-in {
  0%   { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(3px); }
  60%  { opacity: 1; transform: translateY(-1px) scale(1.005); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
[data-platform="cyberpunk"] .msg-row {
  animation: cyber-msg-in .35s cubic-bezier(.2,.8,.2,1) both !important;
}

/* ══════════════════════════════════════════════════════════
   AVATAR GLOW — neon ring on cyberpunk avatars
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-avatar-ai {
  box-shadow: 0 0 8px var(--info, rgba(58,201,255,.4)),
              0 0 20px var(--info, rgba(58,201,255,.15));
  border-color: var(--info, #3ac9ff) !important;
}
[data-platform="cyberpunk"] .msg-avatar-user {
  box-shadow: 0 0 8px var(--accent, rgba(0,255,163,.35)),
              0 0 18px var(--accent, rgba(0,255,163,.1));
  border-color: var(--accent, #00ffa3) !important;
}
[data-platform="cyberpunk"] .msg-row:hover .msg-avatar {
  box-shadow: 0 0 14px var(--accent, rgba(0,255,163,.5)),
              0 0 28px var(--accent, rgba(0,255,163,.2));
}

/* ══════════════════════════════════════════════════════════
   BUBBLE ENHANCEMENTS — holographic left rail on AI msgs
   ══════════════════════════════════════════════════════════ */
/* Holographic gradient rail on assistant bubble left edge */
[data-platform="cyberpunk"] .msg-assistant {
  position: relative;
  overflow: visible;
}
[data-platform="cyberpunk"] .msg-assistant::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px; width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg,
    var(--accent, #00ffa3),
    var(--info, #3ac9ff),
    var(--purple, #b47aff),
    var(--accent, #00ffa3));
  background-size: 100% 300%;
  animation: cyber-holo-rail 5s ease-in-out infinite;
  opacity: .7;
}
@keyframes cyber-holo-rail {
  0%,100% { background-position: 0 0; }
  50%     { background-position: 0 100%; }
}

/* Subtle neon glow on user bubble right edge */
[data-platform="cyberpunk"] .msg-user::after {
  content: "";
  position: absolute;
  right: 0; top: 6px; bottom: 6px; width: 2px;
  border-radius: 1px;
  background: var(--accent, #00ffa3);
  box-shadow: 0 0 6px var(--accent, rgba(0,255,163,.5));
  opacity: .5;
}

/* ══════════════════════════════════════════════════════════
   HEADING HIERARCHY — gradient headings with neon underline
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text h1 {
  background: linear-gradient(90deg, var(--accent), var(--info), var(--purple), var(--accent));
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cyber-heading-shimmer 5s linear infinite;
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, var(--accent), var(--info), var(--purple)) 1;
  padding-bottom: 4px;
  font-family: 'Orbitron', monospace;
  letter-spacing: .06em;
}
[data-platform="cyberpunk"] .msg-text h2 {
  background: linear-gradient(90deg, var(--accent), var(--info));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cyber-heading-shimmer 6s linear infinite;
  border-bottom: 1px solid var(--accent);
}
[data-platform="cyberpunk"] .msg-text h3 {
  color: var(--info);
  border-bottom: 1px solid var(--border);
  text-shadow: 0 0 8px var(--info, rgba(58,201,255,.3));
}
@keyframes cyber-heading-shimmer {
  to { background-position: 300% center; }
}

/* ══════════════════════════════════════════════════════════
   CODE BLOCKS — enhanced with neon edge sweep
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .code-block {
  position: relative;
  overflow: hidden;
}
[data-platform="cyberpunk"] .code-block::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--accent), var(--info), var(--purple), var(--accent), transparent);
  background-size: 200% 100%;
  animation: cyber-code-sweep 3.5s linear infinite;
  opacity: .6;
  z-index: 2;
}
@keyframes cyber-code-sweep {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
[data-platform="cyberpunk"] .code-header {
  background: linear-gradient(135deg, rgba(0,0,0,.7), rgba(0,8,5,.8)) !important;
  backdrop-filter: blur(6px);
}

/* ══════════════════════════════════════════════════════════
   BLOCKQUOTES — neon-accented with glow
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text blockquote {
  border-left: 3px solid var(--purple, #b47aff);
  background: linear-gradient(90deg,
    rgba(180,122,255,.08), transparent 60%);
  box-shadow: -3px 0 12px rgba(180,122,255,.15);
}

/* ══════════════════════════════════════════════════════════
   LISTS — neon bullet markers
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text ul > li::before {
  content: '▹';
  color: var(--accent);
  text-shadow: 0 0 4px var(--accent);
  font-size: 10px;
}
[data-platform="cyberpunk"] .msg-text ol > li::marker {
  color: var(--info);
  font-weight: 900;
  text-shadow: 0 0 4px var(--info);
}

/* ══════════════════════════════════════════════════════════
   BOLD / STRONG — accent-colored on cyberpunk
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text strong {
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-dim);
}

/* ══════════════════════════════════════════════════════════
   LINKS — glow on hover
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text a:hover {
  text-shadow: 0 0 8px var(--info, rgba(58,201,255,.5));
}

/* ══════════════════════════════════════════════════════════
   INLINE CODE — subtle neon tint
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text code:not(pre code) {
  background: rgba(0,255,163,.06);
  border-color: rgba(0,255,163,.2);
  color: var(--warning, #fad015);
  text-shadow: 0 0 4px rgba(250,208,21,.15);
}

/* ══════════════════════════════════════════════════════════
   CALLOUT BLOCKS — neon-themed
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-callout {
  box-shadow: inset 0 0 20px rgba(0,0,0,.3);
}
[data-platform="cyberpunk"] .msg-callout.tip {
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 20px rgba(0,255,163,.04), -3px 0 8px rgba(0,255,163,.08);
}
[data-platform="cyberpunk"] .msg-callout.warn {
  border-color: var(--warning) !important;
  box-shadow: inset 0 0 20px rgba(250,208,21,.04), -3px 0 8px rgba(250,208,21,.08);
}
[data-platform="cyberpunk"] .msg-callout.error {
  border-color: var(--danger) !important;
  box-shadow: inset 0 0 20px rgba(255,77,109,.04), -3px 0 8px rgba(255,77,109,.08);
}

/* ══════════════════════════════════════════════════════════
   HR — animated gradient sweep
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text hr {
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--accent), var(--info), var(--purple), transparent);
  background-size: 200% 100%;
  animation: cyber-code-sweep 4s linear infinite;
  border: none;
}

/* ══════════════════════════════════════════════════════════
   TABLES — neon header bar
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .msg-text th {
  background: linear-gradient(135deg,
    rgba(0,255,163,.12), rgba(58,201,255,.08));
  border-color: var(--accent);
  text-shadow: 0 0 4px var(--accent);
}
[data-platform="cyberpunk"] .msg-text tr:hover td {
  background: rgba(0,255,163,.04);
  box-shadow: inset 0 0 12px rgba(0,255,163,.03);
}

/* ══════════════════════════════════════════════════════════
   SUGGESTION CHIPS — neon glow buttons
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .suggestion-chip {
  border-color: var(--accent) !important;
  text-shadow: 0 0 6px var(--accent-dim);
  box-shadow: 0 0 8px var(--accent-dim);
  transition: all .2s !important;
}
[data-platform="cyberpunk"] .suggestion-chip:hover {
  box-shadow: 0 0 16px var(--accent, rgba(0,255,163,.4)),
              0 0 32px var(--accent, rgba(0,255,163,.15));
  transform: translateY(-1px);
  text-shadow: 0 0 10px var(--accent);
}

/* ══════════════════════════════════════════════════════════
   HEADER SCAN BAR — animated gradient under chat header
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .ch-header {
  position: relative;
}
[data-platform="cyberpunk"] .ch-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--accent, #00ffa3),
    var(--info, #3ac9ff),
    var(--accent, #00ffa3),
    transparent);
  background-size: 300% 100%;
  animation: cyber-scanbar 4s linear infinite;
}
@keyframes cyber-scanbar {
  to { background-position: 300% 0; }
}

/* ══════════════════════════════════════════════════════════
   COMPOSER — neon glow input on focus
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .ch-input:focus {
  box-shadow:
    0 0 0 2px var(--accent-dim, rgba(0,255,163,.1)),
    0 0 20px var(--accent-dim, rgba(0,255,163,.08)),
    inset 0 0 12px rgba(0,255,163,.03) !important;
}

/* ══════════════════════════════════════════════════════════
   EMBED / LINK CARDS — neon edge on hover
   ══════════════════════════════════════════════════════════ */
[data-platform="cyberpunk"] .embed-card:hover,
[data-platform="cyberpunk"] .link-card:hover {
  box-shadow: 0 0 12px var(--info, rgba(58,201,255,.2)),
              inset 0 0 20px rgba(58,201,255,.03);
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION — safety valve
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-platform="cyberpunk"] .msg-row,
  [data-platform="cyberpunk"] .msg-assistant::before,
  [data-platform="cyberpunk"] .code-block::before,
  [data-platform="cyberpunk"] .ch-header::after,
  [data-platform="cyberpunk"] .msg-text hr,
  [data-platform="cyberpunk"] .msg-text h1,
  [data-platform="cyberpunk"] .msg-text h2 {
    animation: none !important;
  }
  [data-platform="cyberpunk"] .chat-main::before { opacity: .15 !important; }
}