/* web/style.css
 * =======================================
 * Nandenan UI styles
 * =======================================
 */

:root{
  --paper:#f6f3e9;
  --ink:#2b2b2b;
  --muted:#6b6b6b;
  --box:#ffffff;
  --stroke: rgba(0,0,0,.12);
  --radius: 18px;
  --max: 720px;

  --paid: #111;
  --free: #1f8a3b;
  --freeOff: #9aa0a6;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family:
    "Zen Maru Gothic",
    "Hiragino Maru Gothic ProN",
    "Noto Sans JP",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
}

/* Layout */
.page{
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 14px 110px; /* bottom bar space */
}

.appHeader{
  background: transparent;
  border-radius: var(--radius);
  overflow:hidden;
  margin-bottom: 12px;
}

.section{
  background: transparent;
}

.label{
  margin-top: 12px;
  font-weight: 900;
}

.answerWrap{
  position: relative;
}

.answer{
  background: var(--box);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 12px 12px;
  line-height: 1.65;
  white-space: pre-wrap;
}

/* Age */
.ageArea{
  background: var(--box);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 12px;
}

.agePrompt{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.3;
  text-align:center;
  margin-bottom: 10px;
}
.agePrompt span{ display:none; }
.ageArea:has(#age-3-5:checked) .agePrompt .p35{ display:inline; }
.ageArea:has(#age-6-8:checked) .agePrompt .p68{ display:inline; }
.ageArea:has(#age-9-12:checked) .agePrompt .p912{ display:inline; }

.ageSelect{
  width:100%;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  flex-wrap: nowrap;
}
.ageSelect input{ position:absolute; left:-9999px; }

.ageBtn{
  display:block;
  width: 30%;
  max-width: 190px;
  cursor:pointer;
  user-select:none;
}
.ageBtn img{
  width:100%;
  height:auto;
  display:block;
}
.ageBtn .active{ display:none; }
#age-3-5:checked + label .idle{ display:none; }
#age-3-5:checked + label .active{ display:block; }
#age-6-8:checked + label .idle{ display:none; }
#age-6-8:checked + label .active{ display:block; }
#age-9-12:checked + label .idle{ display:none; }
#age-9-12:checked + label .active{ display:block; }

/* Question input */
.qwrap{
  margin-top: 12px;
  background: var(--box);
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 12px;
}

.ticketRow{
  display:flex;
  justify-content:flex-start;
  margin-bottom: 8px;
}

.ticketBadge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
}

.ticketBadge img{
  width: 34px;
  height:auto;
  display:block;
}

.ticketPaid, .ticketFree{
  display:inline-flex;
  align-items:baseline;
  gap:2px;
  font-size: 16px;
}
.ticketPaid .sym{ color: var(--paid); }
.ticketPaid .num{ color: var(--paid); }

.ticketFree .sym{ color: var(--free); }
.ticketFree .num{ color: var(--free); }
.ticketFree.is-zero .sym,
.ticketFree.is-zero .num{
  color: var(--freeOff);
  opacity: .9;
}

.inputWrap{
  position: relative;
}
#questionInput{
  width: 100%;
  min-height: 78px;
  resize: vertical;
  padding: 12px 44px 12px 12px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  font-size: 16px;
  outline: none;
  background: #fff;
}
#questionInput:focus{
  border-color: rgba(0,0,0,.25);
}

.clearBtn{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  padding:0;
  cursor:pointer;
  display:none;
}
.clearBtn img{
  width: 100%;
  height: 100%;
  display:block;
}

.qActions{
  margin-top: 10px;
  display:flex;
  justify-content:center;
}

/* Read button */
.readImgBtn{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 86px;
  cursor:pointer;
}
.readImgBtn img{
  width:100%;
  height:auto;
  display:block;
}
.readImgBtn .active{ display:none; }
.readImgBtn.is-pressing .idle{ display:none; }
.readImgBtn.is-pressing .active{ display:block; }

/* Bottom bar */
.bottomBar{
  position: fixed;
  left:0;
  right:0;
  bottom:0;
  background: rgba(246,243,233,.92);
  border-top: 1px solid var(--stroke);
  backdrop-filter: blur(6px);
  padding: 10px 12px;
  z-index: 50;
}

.bottomInner{
  max-width: var(--max);
  margin: 0 auto;
  display:flex;
  gap: 10px;
  align-items:center;
}

.userIdWrap{
  flex: 1;
  min-width: 180px;
}
.userIdLabel{
  display:block;
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 4px;
}
.userIdInput{
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  outline: none;
  background: #fff;
}

/* Buttons */
.btn{
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
  background: #fff;
  color: var(--ink);
}
.btn:disabled{ opacity: .6; cursor:not-allowed; }

.btnPrimary{
  background: #2563eb;
  border-color: rgba(0,0,0,.05);
  color: #fff;
}

/* Modal */
.overlay{
  position: fixed;
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  background: rgba(0,0,0,.35);
  z-index: 100;
}
.overlay[aria-hidden="true"]{ display:none; }

.modal{
  width: min(680px, 100%);
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.12);
  overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}

.modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-bottom: 1px solid rgba(0,0,0,.10);
}
.modalTitle{
  font-weight: 900;
}
.modalBody{
  padding: 12px 12px;
}
.modalFooter{
  padding: 12px 12px;
  border-top: 1px solid rgba(0,0,0,.10);
  display:flex;
  justify-content:flex-end;
  gap: 10px;
}

.tiny{
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

/* Responsive */
@media (max-width: 520px){
  .bottomInner{
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================
 * 年齢による表示切り替え（復旧）
 * ============================ */
.agePrompt .p35,
.agePrompt .p68,
.agePrompt .p912,
.questionText .q35,
.questionText .q68,
.questionText .q912,
.answerLabel .a35,
.answerLabel .a68,
.answerLabel .a912{
  display:none;
}

body:has(#age-3-5:checked) .agePrompt .p35{ display:inline; }
body:has(#age-3-5:checked) .questionText .q35{ display:block; }
body:has(#age-3-5:checked) .answerLabel .a35{ display:inline; }

body:has(#age-6-8:checked) .agePrompt .p68{ display:inline; }
body:has(#age-6-8:checked) .questionText .q68{ display:block; }
body:has(#age-6-8:checked) .answerLabel .a68{ display:inline; }

body:has(#age-9-12:checked) .agePrompt .p912{ display:inline; }
body:has(#age-9-12:checked) .questionText .q912{ display:block; }
body:has(#age-9-12:checked) .answerLabel .a912{ display:inline; }


/* ============================
 * マイク（送信）ボタンのサイズ固定（デカすぎ対策）
 * ============================ */

/* ボタンの親：中央寄せ & はみ出し防止 */
.qActions{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-top: 10px;
}

/* 画像ボタン自体を固定幅にする */
#voiceImgBtn.imgBtn{
  width: 220px;        /* 基本サイズ */
  max-width: 78vw;     /* 画面が狭いときは縮む */
  height: auto;
  display:block;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
}

/* スマホは少し小さめ */
@media (max-width: 420px){
  #voiceImgBtn.imgBtn{ width: 190px; }
}

/* もしどこかで img { width:100% } が当たってても負けないように */
#voiceImgBtn{
  flex: 0 0 auto;
}