/* 質問の窓口（アプリと説明書で共通）。色の帯は使わない */
.qa-fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 18px 8px 10px;
  border: 0; border-radius: 999px; background: #141414; color: #FFD000;
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.qa-fab-mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #FFD000; color: #141414; font-size: 18px; }
.qa-panel {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 31;
  width: min(420px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 32px)); overflow-y: auto;
  background: #FFFFFF; color: #141414; border: 1px solid #E4E4E0; border-radius: 16px; padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); font-size: 15px; line-height: 1.7;
}
.qa-panel[hidden], .qa-fab[hidden] { display: none; }
.qa-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qa-title { margin: 0; font-weight: 700; font-size: 17px; }
.qa-close { width: 40px; height: 40px; border: 0; border-radius: 50%; background: #F7F7F4; font-size: 22px; cursor: pointer; color: #141414; }
.qa-note { margin: 6px 0 10px; color: #5F5F5F; font-size: 13px; }
.qa-chips { display: grid; gap: 6px; margin-bottom: 10px; }
.qa-chip { text-align: left; font: inherit; font-size: 14px; padding: 8px 12px; border: 1px solid #E4E4E0; border-radius: 10px; background: #FFF6CC; color: #141414; cursor: pointer; }
.qa-label { display: block; font-size: 13px; color: #5F5F5F; }
.qa-panel textarea { width: 100%; font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid #BDBDB6; border-radius: 8px; resize: vertical; box-sizing: border-box; }
.qa-actions { display: flex; justify-content: flex-end; margin: 8px 0; }
.qa-send { font: inherit; font-weight: 700; min-height: 44px; padding: 6px 18px; border-radius: 10px; border: 0; background: #141414; color: #FFD000; cursor: pointer; }
.qa-send[disabled] { opacity: .7; cursor: wait; }
.qa-answer:empty { display: none; }
.qa-answer { background: #F7F7F4; border-radius: 10px; padding: 10px 12px; }
.qa-text { margin: 0; white-space: pre-wrap; }
.qa-error { color: #B42318; }
.qa-wait { margin: 0; color: #5F5F5F; }
.qa-link { display: inline-block; margin-top: 8px; font-weight: 700; color: #141414; }
.qa-wait .spin { display: inline-block; width: 16px; height: 16px; border: 3px solid #E4E4E0; border-top-color: #141414; border-radius: 50%; animation: qa-spin 1s linear infinite; vertical-align: -3px; margin-right: 6px; }
@keyframes qa-spin { to { transform: rotate(360deg); } }