:root {
  --red:      #ff1a1a;
  --red2:     #ff4400;
  --red-dim:  #8b0000;
  --red-glow: rgba(255, 26, 26, 0.6);
  --dark:     #000000;
  --surface:  #07070a;
  --border:   rgba(255, 26, 26, 0.12);
  --text:     #d4d4d8;
  --text-dim: #444;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
}

#bgCanvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#fightCanvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
#fightCanvas.visible { opacity: 1; }

#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 0;
  gap: 0;
  overflow: hidden;
}

#loader.out {
  animation: loaderOut 1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes loaderOut {
  0%   { opacity: 1; transform: scale(1); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 0; transform: scale(0.96); pointer-events: none; }
}

#loaderStars { position: absolute; inset: 0; overflow: hidden; }

.lstar {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  animation: twinkle var(--d) ease-in-out infinite var(--delay);
}
@keyframes twinkle {
  0%, 100% { opacity: 0.08; transform: scale(1); }
  50%       { opacity: 0.9;  transform: scale(1.6); }
}

.loader-scan {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(255, 255, 255, 0.013) 2px,
    rgba(255, 255, 255, 0.013) 4px
  );
}
.loader-sweep {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,26,26,0.05) 50%, transparent 100%);
  animation: sweep 3.5s linear infinite;
}
@keyframes sweep {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}

.loader-saber {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  opacity: 0;
  transform: translateY(120px);
  animation: saberRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
  filter: drop-shadow(0 0 80px rgba(255, 26, 26, 0.35));
  margin-bottom: 32px;
}
@keyframes saberRise {
  to { opacity: 1; transform: translateY(0); }
}

.l-hilt {
  width: 34px;
  height: 110px;
  background: linear-gradient(
    180deg,
    #bbb 0%, #888 6%, #666 12%,
    #444 20%, #333 40%,
    #444 60%, #555 75%,
    #888 92%, #aaa 100%
  );
  border-radius: 5px 5px 8px 8px;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 24px rgba(0,0,0,0.9), inset 1px 0 2px rgba(255,255,255,0.08);
}
.l-hilt::before {
  content: '';
  position: absolute;
  top: 16px; left: -8px;
  width: 50px; height: 10px;
  background: linear-gradient(90deg, #333, #999, #333);
  border-radius: 3px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.l-hilt::after {
  content: '';
  position: absolute;
  top: 36px; left: -5px;
  width: 44px; height: 6px;
  background: linear-gradient(90deg, #222, #666, #222);
  border-radius: 2px;
}
.l-hilt-detail {
  position: absolute;
  top: 54px; left: 5px;
  width: 24px; height: 4px;
  background: var(--red-dim);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--red);
}

.l-blade-wrap {
  width: 12px;
  height: 0;
  position: relative;
  order: -1;
  overflow: visible;
  
  animation: extendBlade 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
@keyframes extendBlade {
  0%   { height: 0; }
  100% { height: clamp(220px, 35vh, 380px); }
}

.l-blade {
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 100%;
  border-radius: 5px 5px 0 0;
  
  background: linear-gradient(
    0deg,
    #ffffff 0%,
    #ffbbbb 2%,
    #ff5555 6%,
    var(--red) 18%,
    var(--red) 100%   
  );
  box-shadow:
    0 0 4px  3px #fff,
    0 0 14px 6px #ff4444,
    0 0 40px 12px rgba(255, 26, 26, 0.75),
    0 0 90px 28px rgba(255, 26, 26, 0.38),
    0 0 180px 55px rgba(255, 26, 26, 0.18);
  animation: bladePulse 2.2s ease-in-out infinite;
}
@keyframes bladePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.87; }
}

.l-blade::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 100%;
  background: linear-gradient(0deg, rgba(255,255,255,0.9), rgba(255,255,255,0.3), transparent);
  border-radius: inherit;
  animation: bladeCore 2s ease-in-out infinite;
}
@keyframes bladeCore {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

.l-floor {
  width: 0;
  height: 3px;
  background: radial-gradient(ellipse, rgba(255,26,26,0.9) 0%, transparent 70%);
  margin-top: 1px;
  border-radius: 50%;
  animation: floorExpand 1.5s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}
@keyframes floorExpand {
  to { width: clamp(180px, 28vw, 280px); }
}

.loader-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fadeUp 0.8s ease forwards 2.8s;
  text-align: center;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.loader-gif-logo {
  width: clamp(60px, 10vw, 88px);
  height: clamp(60px, 10vw, 88px);
  object-fit: cover;
  border-radius: 6px;
  filter: drop-shadow(0 0 24px rgba(255,26,26,0.7)) drop-shadow(0 0 48px rgba(255,26,26,0.3));
  animation: gifGlow 3s ease-in-out infinite;
}
@keyframes gifGlow {
  0%, 100% { filter: drop-shadow(0 0 20px rgba(255,26,26,0.6)) drop-shadow(0 0 40px rgba(255,26,26,0.25)); }
  50%       { filter: drop-shadow(0 0 36px rgba(255,26,26,0.9)) drop-shadow(0 0 72px rgba(255,26,26,0.45)); }
}

.loader-main-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: 0.16em;
  color: #fff;
  text-shadow: 0 0 40px rgba(255,26,26,0.9), 0 0 80px rgba(255,26,26,0.4);
}
.loader-main-title em { color: var(--red); font-style: normal; }

.loader-tagline {
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: #2e2e2e;
}

.loader-progress {
  width: clamp(180px, 30vw, 260px);
  height: 1px;
  background: #111;
  overflow: hidden;
  margin-top: 4px;
}
.loader-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, var(--red), #fff, var(--red), transparent);
  box-shadow: 0 0 12px var(--red);
  animation: progressFill 1.3s ease forwards 3.1s;
}
@keyframes progressFill {
  to { width: 100%; }
}

#app {
  display: none;
  height: 100dvh;          
  flex-direction: column;
  position: relative;
  z-index: 1;
}
#app.visible { display: flex; }

#app::before {
  content: '';
  position: fixed; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,0.72) 100%);
  pointer-events: none;
  z-index: 0;
}

#app::after {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent, transparent 3px,
    rgba(0,0,0,0.22) 3px,
    rgba(0,0,0,0.22) 4px
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.38;
}

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(16px, 3vw, 32px);
  height: clamp(56px, 8vh, 68px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(4,4,7,0.98) 0%, rgba(2,2,5,0.96) 100%);
  backdrop-filter: blur(20px);
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
.app-header::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,26,26,0.35) 20%,
    rgba(255,26,26,0.75) 50%,
    rgba(255,26,26,0.35) 80%,
    transparent 100%
  );
}

.header-logo {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 14px);
  min-width: 0;
}

.header-gif {
  width: clamp(30px, 5vw, 42px);
  height: clamp(30px, 5vw, 42px);
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 10px rgba(255,26,26,0.55)) drop-shadow(0 0 22px rgba(255,26,26,0.22));
  animation: headerGifPulse 3s ease-in-out infinite;
}
@keyframes headerGifPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255,26,26,0.5)) drop-shadow(0 0 20px rgba(255,26,26,0.2)); }
  50%       { filter: drop-shadow(0 0 18px rgba(255,26,26,0.85)) drop-shadow(0 0 38px rgba(255,26,26,0.42)); }
}

.header-title-block { min-width: 0; }
.header-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.82rem, 2vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #fff;
  white-space: nowrap;
  line-height: 1;
}
.header-title em { color: var(--red); font-style: normal; }
.header-sub {
  font-size: clamp(0.55rem, 1vw, 0.65rem);
  letter-spacing: 0.28em;
  color: #252525;
  text-transform: uppercase;
  margin-top: 3px;
  font-family: 'Share Tech Mono', monospace;
}

.header-right {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.5vw, 28px);
  flex-shrink: 0;
}
.header-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.header-stat-label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: #222;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
}
.header-stat-val {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: #484848;
  font-family: 'Share Tech Mono', monospace;
}
.status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border: 1px solid rgba(255,26,26,0.14);
  border-radius: 2px;
  background: rgba(255,26,26,0.04);
}
.status-pulse {
  width: 6px; height: 6px;
  background: var(--red);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--red);
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.25; }
}
.status-label {
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3a3a3a;
  font-family: 'Share Tech Mono', monospace;
}

.chat-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  position: relative;
  z-index: 5;
  scrollbar-width: thin;
  scrollbar-color: #1a0505 transparent;
}
.chat-area::-webkit-scrollbar { width: 3px; }
.chat-area::-webkit-scrollbar-track { background: transparent; }
.chat-area::-webkit-scrollbar-thumb { background: #1c0404; border-radius: 2px; }

.chat-inner {
  max-width: min(800px, 96vw);
  margin: 0 auto;
  padding: clamp(24px, 4vh, 48px) clamp(12px, 3vw, 28px) 16px;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vh, 32px);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 8vh, 90px) 20px;
  text-align: center;
  gap: clamp(14px, 2.5vh, 24px);
}

.empty-gif {
  width: clamp(80px, 14vw, 130px);
  height: clamp(80px, 14vw, 130px);
  object-fit: cover;
  border-radius: 8px;
  filter:
    drop-shadow(0 0 28px rgba(255,26,26,0.55))
    drop-shadow(0 0 60px rgba(255,26,26,0.22));
  animation: emptyGifPulse 4s ease-in-out infinite;
}
@keyframes emptyGifPulse {
  0%, 100% {
    filter: drop-shadow(0 0 28px rgba(255,26,26,0.5)) drop-shadow(0 0 56px rgba(255,26,26,0.2));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 48px rgba(255,26,26,0.8)) drop-shadow(0 0 96px rgba(255,26,26,0.4));
    transform: scale(1.04);
  }
}

.empty-title {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 3.5vw, 2rem);
  font-weight: 900;
  color: #fff;
  letter-spacing: 0.12em;
  text-shadow: 0 0 40px rgba(255,26,26,0.55);
}
.empty-title em { color: var(--red); font-style: normal; }

.empty-tagline {
  font-size: clamp(0.78rem, 1.8vw, 0.88rem);
  color: #2e2e2e;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.9;
}

.hex-deco {
  display: flex;
  gap: 6px;
  opacity: 0.18;
}
.hex-deco span {
  width: 8px; height: 8px;
  background: var(--red);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: hexPulse 2.2s ease-in-out infinite;
}
.hex-deco span:nth-child(2) { animation-delay: 0.3s; }
.hex-deco span:nth-child(3) { animation-delay: 0.6s; }
.hex-deco span:nth-child(4) { animation-delay: 0.9s; }
.hex-deco span:nth-child(5) { animation-delay: 1.2s; }
@keyframes hexPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1; }
}

.message {
  display: flex;
  gap: clamp(10px, 2vw, 18px);
  animation: msgReveal 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes msgReveal {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.message.user { flex-direction: row-reverse; }

.msg-avatar {
  width: clamp(32px, 5vw, 40px);
  height: clamp(32px, 5vw, 40px);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.message.user .msg-avatar {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  color: #333;
}
.message.assistant .msg-avatar {
  background: rgba(255,26,26,0.04);
  border: 1px solid rgba(255,26,26,0.25);
  box-shadow: 0 0 18px rgba(255,26,26,0.12);
  overflow: hidden;
  padding: 2px;
}
.ai-avatar-gif {
  width: 100%; height: 100%;
  border-radius: 2px;
  object-fit: cover;
}

.msg-body { flex: 1; min-width: 0; }

.msg-label {
  font-size: 0.61rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 7px;
  font-family: 'Share Tech Mono', monospace;
  display: flex;
  align-items: center;
  gap: 7px;
}
.message.user .msg-label      { justify-content: flex-end; color: #222; }
.message.assistant .msg-label { color: rgba(255,26,26,0.55); }

.msg-label-line { flex: 1; height: 1px; max-width: 80px; }
.message.assistant .msg-label-line { background: linear-gradient(90deg, rgba(255,26,26,0.3), transparent); }
.message.user .msg-label-line      { background: linear-gradient(270deg, rgba(255,255,255,0.05), transparent); }

.msg-bubble {
  padding: clamp(12px, 2vw, 18px) clamp(14px, 2.5vw, 22px);
  font-size: clamp(0.88rem, 2vw, 0.96rem);
  line-height: 1.75;
}
.message.user .msg-bubble {
  background: rgba(255,255,255,0.022);
  border: 1px solid #141414;
  border-radius: 3px 0 3px 3px;
  color: #7a7a7a;
  text-align: right;
}
.message.assistant .msg-bubble {
  background: linear-gradient(135deg, rgba(10,3,3,0.97) 0%, rgba(7,2,2,0.99) 100%);
  border: 1px solid rgba(255,26,26,0.09);
  border-left: 2px solid rgba(255,26,26,0.45);
  border-radius: 0 3px 3px 3px;
  color: var(--text);
  box-shadow: 0 4px 36px rgba(0,0,0,0.55), inset 0 0 28px rgba(255,26,26,0.015);
  position: relative;
}
.message.assistant .msg-bubble::before {
  content: '';
  position: absolute;
  top: -1px; right: -1px;
  width: 14px; height: 14px;
  border-top: 1px solid rgba(255,26,26,0.18);
  border-right: 1px solid rgba(255,26,26,0.18);
}
.message.assistant .msg-bubble::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 9px; height: 9px;
  border-bottom: 1px solid rgba(255,26,26,0.12);
  border-right: 1px solid rgba(255,26,26,0.12);
}

.typing-indicator { display: flex; gap: 6px; padding: 4px 0; align-items: center; }
.typing-dot {
  width: 5px; height: 5px;
  background: var(--red-dim);
  border-radius: 50%;
  animation: tdot 1.3s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.18s; }
.typing-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes tdot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.3; }
  30%           { transform: translateY(-7px); opacity: 1; background: var(--red); }
}

.msg-bubble pre {
  background: #040404;
  border: 1px solid #181818;
  border-left: 2px solid var(--red-dim);
  border-radius: 2px;
  padding: 12px 16px;
  overflow-x: auto;
  margin: 12px 0;
  font-size: 0.82rem;
  color: #666;
  font-family: 'Share Tech Mono', monospace;
}
.msg-bubble code {
  font-family: 'Share Tech Mono', monospace;
  background: rgba(255,26,26,0.07);
  border: 1px solid rgba(255,26,26,0.14);
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 0.86em;
  color: var(--red);
}
.msg-bubble pre code { background: none; border: none; padding: 0; color: #666; }

.input-zone {
  padding: clamp(10px, 2vh, 16px) clamp(12px, 3vw, 28px) clamp(14px, 3vh, 24px);
  border-top: 1px solid rgba(255,26,26,0.07);
  background: linear-gradient(0deg, rgba(2,2,5,0.99) 0%, rgba(4,4,8,0.95) 100%);
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}
.input-zone::before {
  content: '';
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,26,26,0.18) 30%,
    rgba(255,26,26,0.48) 50%,
    rgba(255,26,26,0.18) 70%,
    transparent
  );
}

.input-inner { max-width: min(800px, 96vw); margin: 0 auto; }

.input-box {
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(255,26,26,0.11);
  border-radius: 3px;
  background: rgba(5,3,3,0.85);
  transition: border-color 0.3s, box-shadow 0.3s;
  overflow: hidden;
  position: relative;
}
.input-box::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,26,26,0.05), transparent);
  background-size: 200% 100%;
  animation: inputShimmer 5s linear infinite;
  pointer-events: none;
}
@keyframes inputShimmer {
  from { background-position:  200% 0; }
  to   { background-position: -200% 0; }
}
.input-box:focus-within {
  border-color: rgba(255,26,26,0.32);
  box-shadow: 0 0 0 1px rgba(255,26,26,0.07), 0 0 28px rgba(255,26,26,0.07);
}

#input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.9rem, 2vw, 1rem);
  font-weight: 500;
  line-height: 1.6;
  padding: clamp(11px, 2vh, 15px) clamp(12px, 2vw, 20px);
  resize: none;
  min-height: 50px;
  max-height: 180px;
  letter-spacing: 0.02em;
  position: relative;
  z-index: 1;
}
#input::placeholder { color: #1c1c1c; }

.send-btn {
  width: clamp(42px, 6vw, 50px);
  height: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #282828;
  transition: color 0.2s, filter 0.2s;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.send-btn:hover {
  color: var(--red);
  filter: drop-shadow(0 0 8px var(--red));
}
.send-btn:disabled { opacity: 0.18; cursor: not-allowed; }
.send-btn svg { width: 18px; height: 18px; }

.input-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 0.6rem;
  color: #181818;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
}
.input-footer::before,
.input-footer::after {
  content: '';
  flex: 1;
  max-width: 100px;
  height: 1px;
}
.input-footer::before { background: linear-gradient(90deg, transparent, #0f0f0f); }
.input-footer::after  { background: linear-gradient(270deg, transparent, #0f0f0f); }

@media (max-width: 480px) {
  .header-stat { display: none; }
  .header-sub  { display: none; }
}