:root {
  --bg-color: #0f1714;
  --panel-bg: rgba(255, 255, 255, 0.15);
  --panel-bg-fallback: rgba(0, 0, 0, 0.35);
  --text-color: #ffffff;
  --accent-color: #6dd3a0;

  /* bot icon（ルート /assets に置く） */
  --bot-icon: url("/assets/image_1.png");

  /* 背景（ルート /assets に置く） */
  --bg-image: url("/assets/bg.jpg");
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Arial, sans-serif;
  color: var(--text-color);
  background-color: var(--bg-color);

  background:
    linear-gradient(rgba(0,0,0,0.10), rgba(0,0,0,0.10)),
    var(--bg-image) center/cover no-repeat fixed;

  min-height: 100vh;
}

/* iOS/スマホで background-attachment: fixed が重い/効かない対策 */
@media (max-width: 768px){
  body{
    background-attachment: scroll;
  }
}

.screen {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.panel {
  width: 100%;
  max-width: 650px;
  background: var(--panel-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* backdrop-filter 非対応ブラウザのフォールバック */
@supports not ((backdrop-filter: blur(10px))){
  .panel{
    background: var(--panel-bg-fallback);
  }
}

.chatLog {
  height: min(500px, calc(100vh - 230px));
  overflow-y: auto;
  padding: 15px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin-bottom: 20px;
  scroll-behavior: smooth;
}

.chatLog::-webkit-scrollbar { width: 10px; }
.chatLog::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}
.chatLog::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.12);
}

.msg {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}
.msg.user { justify-content: flex-end; }
.msg.bot { justify-content: flex-start; }

.msg.bot::before {
  content: "";
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--bot-icon) center/cover no-repeat;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 0 18px rgba(255,255,255,0.18);
}

.bubble {
  max-width: 80%;
  padding: 14px 20px;
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-wrap;

  overflow-wrap: anywhere;
  word-break: break-word;

  height: auto;
  display: block;
}

.msg.user .bubble {
  background: var(--accent-color);
  color: #003a22;
}
.msg.bot .bubble { background: rgba(255, 255, 255, 0.2); }

.chatForm { display: flex; gap: 10px; }

.chatInput {
  flex: 1;
  padding: 12px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  outline: none;
  background: rgba(255,255,255,0.92);
  color: #0a1d14;
}
.chatInput::placeholder{ color: rgba(0,0,0,0.45); }

.chatBtn {
  padding: 12px 20px;
  border: none;
  background: var(--accent-color);
  border-radius: 10px;
  font-weight: bold;
  cursor: pointer;
  color: #003a22;
  transition: transform .12s ease, filter .12s ease;
}
.chatBtn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.chatBtn:active{ transform: translateY(0px); }

@media (max-width: 520px){
  .screen{ padding: 14px; }
  .panel{ padding: 18px; border-radius: 18px; }
  .bubble{ font-size: 15px; }
  .msg.bot::before{ width: 42px; height: 42px; }
}

.homeBack{
  position: fixed;
  left: 14px;
  top: 14px;
  z-index: 9999;
  padding: 10px 12px;
  border-radius: 999px;
  text-decoration: none;
  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.homeBack:hover{
  border-color: rgba(254,235,112,.55);
  transform: translateY(-1px);
}