:root{
  --bg:#0f1714;
  --panel:rgba(255,255,255,0.06);
  --text:rgba(255,255,255,0.92);
  --muted:rgba(255,255,255,0.6);
  --accent:#6dd3a0;
}

*{
  box-sizing:border-box;
}

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

  /* 🔥 背景画像＋暗幕 */
  background:
    linear-gradient(rgba(15,23,20,0.70), rgba(15,23,20,0.88)),
    url("/assets/bg.jpg") center/cover no-repeat fixed;

  min-height:100vh;
}

.screen{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:40px 20px;
}

.panel{
  width:100%;
  max-width:680px;
  background:var(--panel);
  backdrop-filter:blur(10px);
  border-radius:18px;
  padding:28px;
  box-shadow:0 20px 50px rgba(0,0,0,0.45);
}

.banner h1{
  margin:0 0 10px 0;
  font-size:26px;
}

.banner p{
  margin:0 0 20px 0;
  color:var(--muted);
}

.chatLog{
  min-height:240px;
  max-height:400px;
  overflow-y:auto;
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,0.25);
  margin-bottom:16px;
}

.msg{
  display:flex;
  margin-bottom:12px;
}

.msg.user{
  justify-content:flex-end;
}

.msg.bot{
  justify-content:flex-start;
}

.bubble{
  max-width:75%;
  padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.5;
  word-break:break-word;
}

.msg.user .bubble{
  background:var(--accent);
  color:#003a22;
}

.msg.bot .bubble{
  background:rgba(255,255,255,0.12);
  color:var(--text);
}

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

.chatInput{
  flex:1;
  padding:10px 12px;
  border-radius:10px;
  border:none;
  font-size:14px;
}

.chatBtn{
  padding:10px 16px;
  border-radius:10px;
  border:none;
  cursor:pointer;
  background:var(--accent);
  color:#003a22;
  font-weight:bold;
}

.chatBtn:disabled{
  opacity:0.6;
  cursor:not-allowed;
}

.chatHint{
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

.notice{
  margin-top:20px;
  font-size:12px;
  color:var(--muted);
}