/* arklab.css */

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f8ff;
  background: #050c18;
}

body {
  background-image:
    linear-gradient(
      rgba(3, 9, 20, 0.56),
      rgba(3, 9, 20, 0.74)
    ),
    url("./images/arklab.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* 画面全体の土台 */
.infinity-desk {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 42%) minmax(360px, 1fr);
  gap: 32px;
  padding: 40px;
  box-sizing: border-box;
}

/* Infinity立ち絵エリア */
/* Infinity立ち絵エリア */
.character-area {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.character-area img {
  max-height: 88vh;
  max-width: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 6px rgba(210, 245, 255, 0.46))
    drop-shadow(0 0 18px rgba(90, 190, 255, 0.34))
    drop-shadow(0 0 36px rgba(40, 130, 255, 0.20))
    drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55))
    brightness(1.07);
  animation: infinityGlow 5.8s ease-in-out infinite;
  will-change: filter;
}

@keyframes infinityGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 5px rgba(190, 235, 255, 0.36))
      drop-shadow(0 0 14px rgba(90, 190, 255, 0.24))
      drop-shadow(0 0 28px rgba(40, 130, 255, 0.14))
      drop-shadow(0 18px 40px rgba(0, 0, 0, 0.55))
      brightness(1.06);
  }

  50% {
    filter:
      drop-shadow(0 0 9px rgba(220, 250, 255, 0.68))
      drop-shadow(0 0 26px rgba(110, 210, 255, 0.48))
      drop-shadow(0 0 48px rgba(55, 150, 255, 0.28))
      drop-shadow(0 18px 44px rgba(0, 0, 0, 0.58))
      brightness(1.095);
  }
}

/*@media (prefers-reduced-motion: reduce) {
  .character-area img {
    animation: none;
  }
}
*/

/* 会話パネル：transparent dark crystal */
.chat-panel {
  align-self: center;
  background:
    linear-gradient(
      145deg,
      rgba(18, 42, 76, 0.38),
      rgba(4, 12, 28, 0.52)
    );
  backdrop-filter: blur(1px) saturate(120%);
  -webkit-backdrop-filter: blur(1px) saturate(120%);
  border: 1px solid rgba(175, 225, 255, 0.36);
  border-radius: 22px;
  padding: 24px;
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.46),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(90, 180, 255, 0.10);
  position: relative;
  overflow: hidden;
}

.chat-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at 15% 0%,
      rgba(150, 220, 255, 0.20),
      transparent 42%
    ),
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.10),
      transparent 30%,
      transparent 72%,
      rgba(120, 210, 255, 0.08)
    );
  pointer-events: none;
}

.chat-title,
.chat-subtitle,
.chat-log,
.turnstile-row,
.input-row {
  position: relative;
  z-index: 1;
}

/* タイトル */
.chat-title {
  margin: 0 0 6px;
  font-size: 24px;
  letter-spacing: 0.04em;
}

.chat-subtitle {
  margin: 0 0 20px;
  color: rgba(230, 242, 255, 0.72);
  font-size: 14px;
}

/* 会話ログ */
.chat-log {
  min-height: 280px;
  max-height: 52vh;
  overflow-y: auto;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(
      160deg,
      rgba(1, 8, 20, 0.42),
      rgba(1, 6, 16, 0.54)
    );
  border: 1px solid rgba(170, 225, 255, 0.18);
  box-shadow:
    inset 0 0 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 吹き出し */
.message {
  margin: 0 0 14px;
  line-height: 1.75;
  font-size: 15px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}

.message.user {
  color: #cfe9ff;
}

.message.infinity {
  color: #ffffff;
}

.message.error {
  color: #ffd6d6;
}

/* Turnstile */
.turnstile-row {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start;
}

/* 入力エリア */
.input-row {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.input-row input {
  flex: 1;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(175, 225, 255, 0.30);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.10),
      rgba(255, 255, 255, 0.055)
    );
  color: #ffffff;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 rgba(100, 190, 255, 0);
}

.input-row input::placeholder {
  color: rgba(230, 242, 255, 0.48);
}

.input-row input:focus {
  border-color: rgba(150, 215, 255, 0.70);
  box-shadow:
    0 0 0 3px rgba(80, 170, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.input-row button {
  padding: 12px 20px;
  border: none;
  border-radius: 14px;
  background:
    linear-gradient(
      180deg,
      rgba(105, 185, 255, 0.98),
      rgba(62, 145, 230, 0.96)
    );
  color: white;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 10px 24px rgba(45, 135, 230, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.input-row button:hover {
  background:
    linear-gradient(
      180deg,
      rgba(130, 205, 255, 1),
      rgba(78, 160, 240, 1)
    );
}

.input-row button:disabled,
.input-row input:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* スマホ対応 */
@media (max-width: 800px) {
  .infinity-desk {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 16px;
  }

  .character-area {
    max-height: 42vh;
  }

  .character-area img {
    max-height: 42vh;
  }

  .chat-panel {
    align-self: stretch;
  }

  .input-row {
    flex-direction: column;
  }

  .input-row button {
    width: 100%;
  }
}