/* お問い合わせの画面（#otoiawase・/otoiawase/＝src/shared/inquiry.js）。★/assets/inquiry.js が開いたときに読む（/otoiawase/ は head にも）。
   色は tokens（style.css の変数）だけ＝明るい・暗いの両方。アプリのページは --accent がそのアプリの色。
   字は地との差 4.5:1（新しい返信の印の色 --mark は丸だけ＝字には使わない）。押せる所は 44px */
.inq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inq-wait { color: var(--muted); font-size: 14px; }

/* 頭（戻る・見出し） */
.inq-bar { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.inq-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-left: -4px;
  padding: 0 8px 0 4px;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.inq-back span[aria-hidden] { font-size: 22px; line-height: 1; }
.inq-title { border: 0; padding: 0; font-size: 20px; }
.inq-title:focus, .inq-done:focus { outline: none; }

/* ボタン（主＝そのアプリの色の面・副＝線） */
.inq-primary, .inq-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 22px;
  border-radius: 999px;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.inq-primary { border: 0; background: var(--tint, var(--accent)); color: var(--inq-on-primary, #FFFFFF); }
.inq-primary:disabled { background: color-mix(in srgb, var(--fg) 8%, var(--surface)); color: var(--muted); cursor: not-allowed; }
.inq-primary[aria-busy] { opacity: 0.8; }
.inq-secondary { border: 1px solid var(--accent); background: transparent; color: var(--accent); }
@media (hover: hover) { .inq-secondary:hover { background: var(--accent-soft); } }
/* 暗い表示: アプリの外（色の無いページ）の accent は明るい色＝字は地の色（state.css の .gm-primary と同じ） */
@media (prefers-color-scheme: dark) {
  body:not(.is-app) .inq-primary { --inq-on-primary: var(--bg); }
}
.inq-new-btn { align-self: stretch; }
.inq-btns { display: flex; flex-direction: column; gap: 10px; }

/* 一覧 */
.inq-sec { gap: 10px; }
.inq-sec-title { font-size: 15px; color: var(--muted); font-weight: 700; }
.inq-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inq-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.inq-item.is-unread { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
@media (hover: hover) { .inq-item:hover { border-color: var(--accent); } }
.inq-item-top, .inq-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; line-height: 1.5; }
.inq-cat { font-weight: 700; color: var(--fg); }
.inq-status { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); background: color-mix(in srgb, var(--fg) 7%, var(--surface)); }
.inq-status[data-status="in_progress"] { color: var(--accent); background: var(--accent-soft); }
.inq-status[data-status="resolved"] { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }
.inq-new { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--fg); }
.inq-new::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mark); }
.inq-date { margin-left: auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.inq-item-app { font-size: 12px; color: var(--muted); }
.inq-item-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.inq-empty { padding: 14px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; }

/* 新しいお問い合わせ・返信の欄 */
.inq-form { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.inq-kind { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.inq-label { font-size: 15px; font-weight: 700; padding: 0; }
.inq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inq-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--field-line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.inq-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.inq-chip:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); box-shadow: 0 0 0 1px var(--accent) inset; }
.inq-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.inq-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.inq-field textarea {
  width: 100%;
  min-height: 7.5em;
  padding: 12px 14px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.7;
  resize: vertical;
}
.inq-reply textarea { min-height: 5.5em; }
.inq-field textarea::placeholder { color: var(--muted); opacity: 1; }
/* 返事をメールでも受け取る（任意）: 本文の欄と同じ縁・字は 16px（iPhone の Safari が拡大しない） */
.inq-field input[type="email"] {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--field-line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}
/* アプリのページ: 欄の地と角は本文の欄と同じ（★style.css の body.is-app textarea＝--field・10px が .inq-field textarea より強い） */
body.is-app .inq-field input[type="email"] { background: var(--field); border-radius: 10px; }
.inq-field input[aria-invalid="true"] { border-color: var(--warn); }
.inq-help { font-size: 13px; line-height: 1.6; color: var(--muted); }
.inq-count { align-self: flex-end; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inq-count.is-over { color: var(--warn); font-weight: 700; }
.inq-trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.inq-notes { list-style: none; margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--fg) 5%, var(--surface)); display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.inq-notes .inq-note-main { color: var(--fg); font-size: 14px; font-weight: 700; }
.inq-notes .inq-note-warn { color: var(--warn); }
.inq-error { padding: 10px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; line-height: 1.6; scroll-margin: 24px 0 140px; }
.inq-reason { margin-top: -6px; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; }
.inq-reason:empty, .inq-sent-line:empty { display: none; }
.inq-sent-line { padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ok) 12%, var(--surface)); color: var(--ok); font-size: 14px; font-weight: 700; }
.inq-mail { font-size: 13px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }

/* 送信しました（★小さな1行にしない＝大きな ✓ と見出し） */
.inq-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 20px 24px;
  border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line));
  border-radius: 20px;
  background: color-mix(in srgb, var(--ok) 9%, var(--surface));
  text-align: center;
}
.inq-done-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--ok); color: var(--surface); }
.inq-done-title { font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--fg); }
.inq-done-text { font-size: 15px; line-height: 1.75; color: var(--fg); }
.inq-done-note { font-size: 13px; color: var(--warn); }
/* メールでのお知らせの登録ができなかった（★お問い合わせは送れている＝「送信しました」の下に1行） */
.inq-done-warn { padding: 8px 12px; border-radius: 12px; background: var(--warn-soft); color: var(--warn); font-size: 14px; line-height: 1.6; }
/* メールでのお知らせを止める（止めるリンク） */
.inq-stop { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* やり取り（運営＝左・あなた＝右） */
.inq-thread { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.inq-msgs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.inq-msg { display: flex; flex-direction: column; gap: 4px; max-width: 88%; scroll-margin-bottom: 96px; }
.inq-msg.is-user { align-self: flex-end; align-items: flex-end; }
.inq-msg.is-admin { align-self: flex-start; align-items: flex-start; }
.inq-bubble { padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.inq-msg.is-user .inq-bubble { background: var(--accent-soft); color: var(--fg); border-bottom-right-radius: 6px; }
.inq-msg.is-admin .inq-bubble { background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.inq-who { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.inq-reply { padding-top: 14px; border-top: 1px solid var(--line); }