/* /help：自动问答机器人 + 常见问题。只在这一页加载（Pages::help() 的 styles）。
   缅文比中文长得多：所有按钮和 chip 都允许换行，最小点击区域 44px。 */

.help { padding-top: 16px; padding-bottom: 32px; display: grid; gap: 20px; max-width: 760px; }

.help__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.help__title { margin: 0; font-size: 24px; line-height: 1.3; }
.help__human { min-height: 44px; white-space: normal; }

.help-bot {
  display: grid; gap: 12px; padding: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}

.help-log { display: grid; gap: 10px; }
.help-msg { max-width: 92%; padding: 10px 14px; border-radius: var(--radius); line-height: 1.6; overflow-wrap: anywhere; }
.help-msg p { margin: 0; }
.help-msg p + p, .help-msg p + .help-q, .help-msg .help-q + .help-none { margin-top: 6px; }
.help-msg--bot { justify-self: start; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-900); }
.help-msg--user { justify-self: end; background: var(--teal-600); color: #fff; }
.lang-my .help-msg { line-height: 1.9; }

.help-note { font-size: 13px; color: var(--ink-600); }

.help-handoff { border-color: var(--teal-300); background: var(--teal-50); display: grid; gap: 8px; }
.help-handoff .btn { min-height: 44px; white-space: normal; justify-self: start; }

.help-answer__audience { font-size: 12.5px; font-weight: 600; color: var(--ink-600); }
.help-answer__title { margin: 2px 0 6px; font-size: 16px; line-height: 1.4; }
.help-answer__text, .help-faq__answer .help-answer__text { white-space: pre-line; margin: 0; }
.help-answer__handoff {
  display: grid; gap: 6px; margin: 6px 0 10px; padding: 10px 12px;
  border-radius: var(--radius-sm); background: var(--amber-50); color: var(--amber-700); font-size: 14px;
}
.help-answer__handoff .btn { justify-self: start; white-space: normal; min-height: 40px; }
.help-answer__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.help-answer__actions .btn { white-space: normal; text-align: start; min-height: 40px; height: auto; padding-block: 6px; }

.help-q {
  display: flex; align-items: flex-start; gap: 6px; width: 100%; min-height: 44px; padding: 8px 4px;
  border: 0; border-top: 1px solid var(--line); background: none; color: var(--teal-700);
  font: inherit; font-weight: 600; text-align: start; cursor: pointer;
}
.help-q:first-of-type { border-top: 0; }
.help-q .i { flex: none; margin-top: .3em; }
.help-q:hover { color: var(--teal-600); text-decoration: underline; text-underline-offset: 3px; }
.help-none { min-height: 44px; }

.help-related { margin-top: 12px; }
.help-related__title { font-size: 13px; font-weight: 600; color: var(--ink-600); }

.help-feedback { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.help-feedback__q { font-size: 13px; color: var(--ink-600); }
.help-feedback__buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.help-feedback__buttons .btn { white-space: normal; height: auto; min-height: 40px; padding-block: 6px; }

.help-topics__title { margin: 4px 0 0; font-size: 15px; }
.help-topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.help-topics .chip {
  min-height: 44px; padding: 8px 14px; font-size: 14px; white-space: normal; line-height: 1.4;
  background: var(--teal-50); color: var(--teal-800); border: 1px solid var(--teal-100); text-decoration: none;
}
.help-topics .chip:hover { border-color: var(--teal-500); }

.help-form { display: flex; gap: 8px; align-items: stretch; }
.help-form[hidden] { display: none; }
.help-form__input { flex: 1 1 auto; min-width: 0; min-height: 48px; font-size: 16px; }
.help-form__send { flex: none; min-height: 48px; }
@media (max-width: 420px) { .help-form__send-text { display: none; } }

.help-faq { display: grid; gap: 16px; }
.help-faq__cat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px 16px; scroll-margin-top: 80px; }
.help-faq__cat-title { margin: 8px 0; font-size: 16px; }
.help-faq__item { border-top: 1px solid var(--line); }
.help-faq__item summary {
  min-height: 44px; padding: 10px 0; cursor: pointer; font-weight: 600; line-height: 1.5;
  list-style-position: outside; overflow-wrap: anywhere;
}
.help-faq__answer { padding: 0 0 14px; color: var(--ink-800); line-height: 1.7; overflow-wrap: anywhere; }
.lang-my .help-faq__answer { line-height: 1.9; }

.help-contact { scroll-margin-top: 80px; }

.help-dialog {
  width: min(520px, calc(100vw - 32px)); max-height: 85vh; padding: 40px 0 8px; border: 0;
  border-radius: var(--radius-lg); background: var(--surface); color: inherit; overflow: auto;
}
.help-dialog::backdrop { background: rgba(23, 21, 18, .45); }
.help-dialog .me-panel { border: 0; }
.help-dialog__close {
  position: absolute; top: 4px; right: 4px; width: 44px; height: 44px;
  display: grid; place-items: center; border: 0; background: none; color: var(--ink-700); cursor: pointer;
}