/* ===========================================================
   EXPAI — Holographic UI
   =========================================================== */

/* 글래스 카드 */
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
}
.glass-strong {
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
}

/* 그라데이션 텍스트 */
.gradient-text {
  background: linear-gradient(135deg, #22d3ee 0%, #818cf8 50%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 글로우 보더 */
.glow-border {
  position: relative;
}
.glow-border::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(34,211,238,0.6), rgba(139,92,246,0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* 홀로그램 chip */
.holo-chip {
  background: linear-gradient(90deg,
              rgba(34,211,238,0.18),
              rgba(99,102,241,0.18),
              rgba(139,92,246,0.18));
  background-size: 200% 100%;
  animation: shimmer 4.5s linear infinite;
  border: 1px solid rgba(255,255,255,0.12);
}

/* 마크다운 (다크) */
.prose pre {
  background: rgba(2,6,23,0.7) !important;
  border: 1px solid rgba(99,102,241,0.2);
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  overflow-x: auto;
  color: #e2e8f0;
}
.prose code {
  background: rgba(99,102,241,0.15);
  padding: 0.15em 0.45em;
  border-radius: 0.35em;
  font-size: 0.88em;
  color: #c7d2fe;
}
.prose pre code {
  background: transparent;
  padding: 0;
  color: inherit;
}
.prose strong { color: #f1f5f9; }
.prose a { color: #22d3ee; }
.prose h1, .prose h2, .prose h3 { color: #f1f5f9; }

/* 사이드 채팅 메시지 — 사용자 */
.bubble-user {
  background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  color: white;
  box-shadow: 0 8px 24px -8px rgba(139,92,246,0.6);
}
/* 어시스턴트 */
.bubble-ai {
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* 스크롤바 */
::-webkit-scrollbar         { width: 9px; height: 9px; }
::-webkit-scrollbar-track   { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb   {
  background: linear-gradient(180deg, rgba(99,102,241,0.45), rgba(139,92,246,0.45));
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(99,102,241,0.75), rgba(139,92,246,0.75));
}

/* 입력창 포커스 글로우 */
.input-holo:focus {
  box-shadow:
    0 0 0 2px rgba(34,211,238,0.35),
    0 0 18px rgba(99,102,241,0.45);
  border-color: rgba(34,211,238,0.6);
}

/* 텍스트 입력 placeholder */
::placeholder { color: rgba(148,163,184,0.5); }

/* 버튼 글로우 */
.btn-primary {
  background: linear-gradient(135deg, #06b6d4 0%, #6366f1 50%, #8b5cf6 100%);
  background-size: 200% 100%;
  transition: background-position 0.5s ease;
  box-shadow: 0 6px 20px -8px rgba(99,102,241,0.7);
}
.btn-primary:hover { background-position: 100% 0; }
.btn-primary:disabled {
  background: rgba(100,116,139,0.3);
  box-shadow: none;
  cursor: not-allowed;
}

/* 로고 박스 살짝 떠 있는 느낌 */
.logo-wrap img {
  filter: drop-shadow(0 4px 14px rgba(34,211,238,0.45))
          drop-shadow(0 2px 6px rgba(139,92,246,0.35));
}

/* 작은 점 노드 (SVG 백그라운드 대신 css) */
.node-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, #22d3ee 0%, #818cf8 60%, transparent 70%);
  box-shadow: 0 0 12px rgba(34,211,238,0.7);
}

/* 카드 위에 떠다니는 빛 한 점 */
@keyframes drift {
  0%   { transform: translate(0,0); opacity: 0.5; }
  50%  { transform: translate(8px,-6px); opacity: 1; }
  100% { transform: translate(0,0); opacity: 0.5; }
}
.drift { animation: drift 6s ease-in-out infinite; }