:root {
  --bg: #f7f5f2;
  --fg: #1c1917;
  --muted: #57534e;
  --card: #fff;
  --line: #e7e5e4;
  --primary: #1c1917;
  --primary-fg: #fff;
  --secondary: #e7e5e4;
  --radius: 12px;
  --max: 42rem;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-wrap: anywhere;
}
html.embed, body.embed-body {
  background: var(--card);
  /* 不用 overflow-x:hidden 裁切：与独立页一致，靠 min-width:0 与 .tile-row 组内滚动折行，
     横溢由 e2e/widget.spec.mjs 的 scrollWidth<=366 断言兜底（t-6b46afb6 P2-2）。 */
  max-width: 100%;
  width: 100%;
}
body.embed-body {
  padding-bottom: 0;
}
.embed-content {
  max-width: 100%;
  padding: 0.75rem 1rem 1rem;
}
body.embed-body .form-actions {
  /* 产品站底部 CTA 会盖住贴 iframe 底边的提交钮，留出安全间距。 */
  padding-bottom: max(4.5rem, calc(env(safe-area-inset-bottom, 0px) + 3.5rem));
}
.hp-field {
  /* 勿用 left:-10000px：会把 document.scrollWidth 撑出视口（tools/e2e 与 390 走查）。 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}
a { color: inherit; }
button, a, select, summary, label, .tile, .btn { cursor: pointer; }
button:disabled, a[aria-disabled="true"] { cursor: default; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.site-header, .site-footer, .content {
  max-width: min(var(--max), 100%);
  width: 100%;
  margin: 0 auto;
  padding: 1rem 1.25rem;
  min-width: 0;
}
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: space-between;
}
.brand { font-weight: 700; text-decoration: none; }
.site-header nav, .site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  min-width: 0;
  max-width: 100%;
}
.site-header nav a, .site-footer nav a {
  min-width: 0;
  overflow-wrap: anywhere;
}
.lang-switch {
  min-width: 0;
  max-width: 100%;
}
.lang-switch select {
  min-width: 0;
  min-height: 2.5rem;
  max-width: 100%;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}
.content { padding-bottom: 2rem; min-width: 0; }
/* 横幅 fixed 贴底会挡住页脚链接；有横幅时给 body 留出点击空间。 */
body:has(#cookie-banner:not([hidden])) {
  padding-bottom: 8rem;
}
.hero h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hero p, section p { color: var(--muted); }
section { margin: 2rem 0; }
.legal h1 { font-size: 1.5rem; }
.legal, .legal p, .legal ul, .legal li {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.legal-list {
  margin: 0.4rem 0 1rem;
  padding-left: 1.2rem;
}
.legal-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0.75rem 0 1.25rem;
  min-width: 0;
  max-width: 100%;
}
.legal-item {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  min-width: 0;
  max-width: 100%;
}
.legal-item h3 {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}
.legal-item p {
  margin: 0.25rem 0;
}
.legal-note {
  min-height: 1.6em;
  color: var(--muted);
  font-size: 0.95rem;
}
.privacy-entry {
  margin-top: 1.25rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.privacy-entry a { text-decoration: underline; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  font: inherit;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); }
.btn-secondary { background: var(--secondary); color: var(--fg); }
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--card);
  border-top: 1px solid var(--line);
  padding: 0.9rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
}
.cookie-banner[hidden] { display: none; }
.cookie-banner p { margin: 0; flex: 1 1 12rem; min-width: 0; }
.cookie-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
}
.cookie-actions .btn { flex: 1 1 6rem; min-width: 0; }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }

.end-user-page, .end-user-form {
  min-width: 0;
  max-width: 100%;
}
.sk-fieldset {
  /* fieldset+grid 会让 legend 变成 0×0（Playwright toBeVisible 失败），也容易按 min-content 撑开 390 视口。 */
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem 0.9rem 1rem;
  margin: 0 0 1rem;
  min-width: 0;
  min-inline-size: 0;
  width: 100%;
  max-width: 100%;
  background: var(--card);
}
.sk-fieldset::after {
  content: "";
  display: table;
  clear: both;
}
.sk-fieldset legend {
  display: table;
  float: left;
  width: 100%;
  box-sizing: border-box;
  font-weight: 600;
  padding: 0 0.4rem;
  margin: 0 0 0.35rem;
  color: var(--fg);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.tile-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  overscroll-behavior-x: contain;
  padding: 0.15rem 0 0.35rem;
  /* fieldset 的 min-content 会按瓷砖合计宽度撑开页面；width:0 + min-width:100% 让滚动发生在行内。 */
  width: 0;
  min-width: 100%;
  max-width: 100%;
}
.tile {
  flex: 0 0 5.75rem;
  box-sizing: border-box;
  /* button 的 UA min-width:auto 会按文案 min-content 撑开行，进而撑开 390 视口。 */
  width: 5.75rem;
  min-width: 0;
  max-width: 5.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  gap: 0.35rem;
  margin: 0;
  padding: 0.55rem 0.4rem 0.5rem;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  /* 固定高度：<button> 作为 flex item 不会 stretch，日文「返信済み」换行后会和其他瓷砖不等高。 */
  height: 6.5rem;
  min-height: 6.5rem;
  max-height: 6.5rem;
  text-align: center;
  position: relative;
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  white-space: normal;
  /* overflow:visible 时部分引擎忽略 button/label 的 height，文案会溢出并撑开 scrollWidth。 */
  overflow: hidden;
}
.tile input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.tile:has(input:checked),
.tile:has(input:focus-visible),
.tile.is-selected,
.tile:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.tile:has(input:checked),
.tile.is-selected {
  background: #f5f5f4;
}
.tile-specimen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 2.25rem;
}
.tile-specimen-question { background: #e7e5e4; color: #1c1917; }
.tile-specimen-bug { background: #1c1917; color: #fff; }
.tile-specimen-idea { background: #d6d3d1; color: #1c1917; }
.tile-specimen-other { background: #f5f5f4; color: #44403c; border: 1px solid var(--line); }
.tile-specimen-followup { background: #1c1917; color: #fff; }
.tile-specimen-extra { background: #e7e5e4; color: #1c1917; }
.tile-specimen-thanks { background: #d6d3d1; color: #1c1917; }
.tile-specimen-all { background: #e7e5e4; color: #1c1917; }
.tile-specimen-pending { background: #f5f5f4; color: #1c1917; border: 1px solid var(--line); }
.tile-specimen-replied { background: #1c1917; color: #fff; }
.tile-specimen-closed { background: #d6d3d1; color: #1c1917; }
.tile-name {
  font-size: 0.78rem;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  max-width: 100%;
  color: var(--fg);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.field {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.3rem;
  margin: 0.65rem 0 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  clear: both;
}
.field > label {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
}
.field:first-of-type { margin-top: 0.15rem; }
.field input,
.field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--fg);
  font: inherit;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.form-status {
  /* border-box 下 padding 吃掉 min-height；3.2em 不够装繁中两行错误文案，会把表单顶下去。 */
  min-height: 48px;
  min-height: max(48px, 4.4em);
  margin: 0 0 0.75rem;
  padding: 0.25rem 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}
.form-status.is-error { color: #9f1239; }
.form-status.is-ok { color: #166534; }
.form-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 0.25rem;
  min-width: 0;
  max-width: 100%;
}
.form-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  align-self: stretch;
  min-height: 2.5rem;
  height: auto;
  cursor: pointer;
}
/* V3（t-7141eb6f）：reset 二次确认行默认隐藏；确认时与原操作行等高互换，
   按钮同 flex 拉伸规则，不引起下方内容布局抖动。 */
.reset-confirm-actions {
  display: none;
}
form.is-confirming > .form-actions:not(.reset-confirm-actions) {
  display: none;
}
form.is-confirming > .reset-confirm-actions {
  display: flex;
}
.thread-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}
.thread-msg {
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  min-width: 0;
  max-width: 100%;
}
.thread-msg-agent { background: #f5f5f4; }
.thread-meta {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.25rem;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.thread-body {
  margin: 0;
  color: var(--fg);
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.end-user-form[aria-busy="true"] .btn-primary { opacity: 0.72; }

.login-widget { min-height: 3.5rem; margin: 1rem 0; }
.inbox-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.inbox-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  min-width: 0;
}
.inbox-item-link {
  display: block;
  padding: 0.75rem 0.9rem;
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.inbox-item-top {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
}
.ticket-label { font-weight: 700; }
.unreplied-flag {
  font-size: 0.8rem;
  color: #9f1239;
}
.inbox-status { font-size: 0.85rem; color: var(--muted); }
.inbox-subject {
  margin: 0.2rem 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.inbox-filter, .inbox-status-form {
  margin: 0 0 1rem;
  min-width: 0;
  max-width: 100%;
}
.weekly-summary {
  margin: 0 0 1.25rem;
  min-width: 0;
  max-width: 100%;
}
.weekly-list {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}
.weekly-list li {
  margin: 0.35rem 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.listen-inbox {
  margin: 1.5rem 0 0;
  min-width: 0;
  max-width: 100%;
}
.listen-inbox h2 { margin: 0 0 0.35rem; font-size: 1.15rem; }
.listen-clusters, .listen-items, .listen-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
  max-width: 100%;
}
.listen-cluster {
  margin: 0.75rem 0;
  min-width: 0;
}
.listen-cluster h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.listen-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 0.7rem 0.85rem;
  margin: 0 0 0.5rem;
  min-width: 0;
  max-width: 100%;
}
.listen-excerpt, .listen-link a {
  margin: 0.2rem 0;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.listen-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.5rem;
  align-items: stretch;
}
.listen-tag-form, .listen-tag-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: stretch;
  min-width: 0;
  max-width: 100%;
  margin: 0.35rem 0 0;
}
.listen-tag-form { margin: 0; }
.listen-tag-btn, .listen-tag-add .btn {
  min-height: 2.5rem;
}
.listen-tag-add input[type="text"] {
  min-width: 0;
  width: 8rem;
  max-width: 100%;
  min-height: 2.5rem;
  padding: 0.35rem 0.6rem;
}

@media (max-width: 400px) {
  .site-header, .site-footer, .content { padding-left: 0.9rem; padding-right: 0.9rem; }
  .site-header { align-items: stretch; }
  .site-header nav { flex: 1 1 100%; }
  .lang-switch { flex: 1 1 100%; }
  .lang-switch select { width: 100%; }
  body:has(#cookie-banner:not([hidden])) {
    padding-bottom: 12rem;
  }
  .cookie-banner {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner p { flex: 1 1 auto; }
  .cookie-actions { width: 100%; flex-wrap: wrap; }
  .cookie-actions .btn { flex: 1 1 6rem; }
  .form-actions .btn { flex: 1 1 0; }
  .hero h1 { font-size: 1.45rem; }
}