/*
 * 游客聊天页样式。
 *
 * 刻意**不依赖 site.css / console.css**：这个页面会被贴到任何站点上作为匿名聊天窗口，
 * 它必须是一个自包含、打开就对的独立页面。设计语汇仍是品牌绿 + 圆角 + 轻阴影，
 * 但布局按「聊天软件」来做：一条顶栏、一块可滚动的消息区、一条贴底的输入栏。
 */

:root {
  --bg: #eef0f3;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #101820;
  --muted: #6b7683;
  --faint: #98a3b1;
  --border: #e2e6eb;
  --accent: #0a8f4d;
  --accent-dark: #077a41;
  --accent-soft: #e8f6ef;
  --bubble-owner: #ffffff;
  --bubble-guest: #d6f5c0;
  --danger: #c0392b;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(13, 21, 32, .05), 0 12px 32px rgba(13, 21, 32, .06);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

/* --------------------------------- 外壳 --------------------------------- */

.guest-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  overflow: hidden;
}

@media (min-width: 760px) {
  body { padding: 0; background: radial-gradient(1100px 600px at 50% -10%, #e3f3ea 0%, var(--bg) 55%); }
  .guest-shell {
    max-width: 780px;
    height: min(880px, 100dvh - 48px);
    min-height: min(620px, 100dvh - 48px);
    margin: 24px auto;
    border: 1px solid var(--border);
    border-radius: 22px;
    box-shadow: var(--shadow);
  }
}

/* --------------------------------- 顶栏 --------------------------------- */

.guest-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.guest-owner { display: flex; align-items: center; gap: 11px; min-width: 0; }

.guest-avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  object-fit: cover;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.guest-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.guest-owner-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guest-owner-meta b {
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 * 顶栏状态行。
 *
 * 它承载两件事：连接状态（颜色 + 文案），以及「点一下重连」的动作，
 * 所以是一个 button —— 但必须是彻底重绘的 button，不能带任何浏览器原生外观。
 */
.guest-presence {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin: 0;
  padding: 0 2px 0 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  text-align: left;
  cursor: default;
  border-radius: 6px;
  transition: color .15s ease;
}
.guest-presence[data-state="idle"],
.guest-presence[data-state="offline"] { cursor: pointer; }
.guest-presence[data-state="idle"]:hover,
.guest-presence[data-state="offline"]:hover { color: var(--text); }
.guest-presence:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 3px;
}

.guest-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  transition: background .2s ease, box-shadow .2s ease;
}
/* 长轮询正在建立：琥珀色慢闪，让「刚打开」和「已在线」一眼可分。 */
.guest-presence[data-state="connecting"] .guest-dot {
  background: #c98a00;
  box-shadow: 0 0 0 3px rgba(201, 138, 0, .15);
  animation: guest-pulse 1.4s ease-in-out infinite;
}
/* 空闲暂停：没有呼吸动画，避免挂机页面在标签栏里看起来还在活动。 */
.guest-presence[data-state="idle"] .guest-dot {
  background: var(--faint);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--faint) 16%, transparent);
}
.guest-presence[data-state="offline"] .guest-dot {
  background: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 16%, transparent);
}

@keyframes guest-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
  .guest-presence[data-state="connecting"] .guest-dot { animation: none; }
}

/* 顶栏右侧的一排小按钮：语言切换 + 隐私。margin-left:auto 放在容器上，
   这样以后再加按钮也不会有人忘记对齐。 */
.guest-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.guest-ghost {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.guest-ghost:hover { background: var(--surface-2); color: var(--text); }
/* 语言按钮：只有一个地球图标，点一下原地换语言。
   不放「EN / 中」这类字母：这块地方要留给称呼和状态行，图标已经够指代这件事，
   当前是哪门语言看正文即可。
   它也就**不要框**：这里只有「隐私」一个真正的胶囊按钮，语言是个工具，不该长成第二个按钮。
   去掉边框与底色后，用 30×30 的透明热区撑住可点击面积（与「隐私」等高），
   悬停才浮出一层极浅的圆底 —— 有反馈，但不抢眼。 */
.guest-lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 999px;
  color: var(--muted);
}
.guest-lang:hover { background: color-mix(in srgb, var(--surface-2) 80%, transparent); color: var(--text); }
.guest-lang svg { display: block; opacity: .72; }
.guest-lang:hover svg { opacity: 1; }
.guest-ghost[aria-expanded="true"] { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); color: var(--accent-dark); }

/* ------------------------------ 补充联系方式 ------------------------------ */

/* 一条贴着输入框上方的窄条：不遮消息、不弹遮罩，问一次就消失。 */
.guest-contact {
  flex: none;
  margin: 0 16px 8px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(13, 21, 32, .04);
  animation: guest-in .18s ease-out;
}
.guest-contact-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 9px; }
.guest-contact-head b { font-size: 13.5px; font-weight: 650; }
.guest-contact-head span { font-size: 12.5px; color: var(--muted); }
.guest-contact-fields { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* 这一行有四个控件（两个输入框、保存、不用了）：高度统一 38px，否则一行里会出现三种高度。 */
.guest-contact-fields input {
  flex: 1 1 130px;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.guest-contact-fields input::placeholder { color: var(--faint); }
.guest-contact-fields input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
/* 选择器要压过文件后面那条 .guest-send 规则（同权重时后写的赢），
   否则保存按钮会独自比同行的输入框高 7px —— 这一行四个控件必须同一高度。 */
.guest-contact-fields .guest-send { flex: none; height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
/* 「不用了」紧跟在保存旁边：`margin-left: auto` 会把它推到最右，和保存之间空出一道 */
.guest-contact-fields .guest-ghost { height: 38px; margin-left: 0; padding: 0 14px; border-radius: 10px; }
@media (max-width: 480px) {
  .guest-contact { margin-inline: 12px; }
  .guest-contact-fields input { flex: 1 1 100%; }
}

/* --------------------------------- 图片 ---------------------------------- */

/* 选图按钮：和发送按钮同高，但不抢主操作的视觉。 */
/* 输入区三件套共用同一个高度基准 45px（= 1 行文字 21px + 上下内边距 22px + 上下边框 2px）。
   早先图片按钮是 38px、又与输入框底部对齐，视觉上就是"它比输入框矮了一截" —— 对齐靠的是
   同一个数字，不是靠 flex-end 恰好把底边对齐。 */
.guest-attach {
  flex: none;
  display: grid;
  place-items: center;
  /* 与清空按钮共用输入区高度变量：窄屏一起变矮，绝不出现一个高一个矮 */
  width: var(--guest-input-h);
  height: var(--guest-input-h);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}
.guest-attach:hover { color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); background: var(--accent-soft); }
.guest-attach:active { transform: translateY(1px); }
.guest-attach:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* 图片气泡：去掉内边距，圆角只留在图片自己的四个角上。 */
.guest-bubble-image { padding: 3px; background: var(--surface); }
.guest-image {
  display: block;
  max-width: 220px;
  max-height: 260px;
  width: auto;
  height: auto;
  border-radius: 12px;
  cursor: zoom-in;
  object-fit: cover;
  background: var(--surface-2);
}
.guest-msg.guest .guest-bubble-image { background: var(--bubble-guest); }

/* 过期的图片（对方发的图只在服务端留 30 分钟）：给一句说明，不留破图标。 */
.guest-image-expired {
  padding: 10px 14px;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-2);
}

/* 看图遮罩 */
.guest-lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(9, 14, 20, .82);
  backdrop-filter: blur(2px);
  cursor: zoom-out;
  animation: guest-fade .16s ease-out;
}
.guest-lightbox img {
  max-width: min(100%, 900px);
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

/* -------------------------------- 隐私说明 ------------------------------- */

.guest-privacy {
  flex: none;
  padding: 14px 20px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--muted);
}
/* 只作用于面板标题：列表项里的 <b> 是行内强调，不能跟着变成块级 */
.guest-privacy > b { display: block; color: var(--text); font-size: 14px; margin-bottom: 6px; }
/* 结论式两行：行距比正文紧一点，读起来像一句注解而不是小作文。 */
.guest-privacy p { margin: 0; line-height: 1.6; }
.guest-privacy p + p { margin-top: 2px; }
.guest-privacy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
/* 顶栏里的「隐私」靠 margin-left:auto 贴右；放进隐私面板后要保持普通布局 */
.guest-privacy-actions .guest-ghost { margin-left: 0; }

/* -------------------------------- 消息区 -------------------------------- */

.guest-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 18px 8px;
  scroll-behavior: smooth;
}

.guest-messages { display: flex; flex-direction: column; gap: 4px; }

.guest-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  color: var(--muted);
  padding: 56px 24px 40px;
}
.guest-empty-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 24px;
  box-shadow: var(--shadow);
}
.guest-empty b { color: var(--text); font-size: 15px; margin-top: 6px; }
.guest-empty p { margin: 0; font-size: 13.5px; max-width: 30ch; line-height: 1.6; }

.guest-time {
  align-self: center;
  margin: 12px 0 6px;
  font-size: 12px;
  color: var(--faint);
  letter-spacing: .02em;
}

.guest-msg { display: flex; align-items: flex-end; gap: 8px; margin: 2px 0; animation: guest-in .18s ease-out; }
.guest-msg.guest { justify-content: flex-end; }

@keyframes guest-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guest-msg { animation: none; }
  .guest-thread { scroll-behavior: auto; }
}

.guest-bubble {
  position: relative;
  max-width: min(76%, 520px);
  padding: 10px 14px;
  border-radius: 15px;
  background: var(--bubble-owner);
  box-shadow: 0 1px 1px rgba(13, 21, 32, .05);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  font-size: 14.8px;
}
.guest-msg.owner .guest-bubble { border-bottom-left-radius: 5px; }
.guest-msg.guest .guest-bubble { background: var(--bubble-guest); border-bottom-right-radius: 5px; }

.guest-msg.guest.is-failed .guest-bubble {
  background: #fdecea;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 24%, transparent);
}

.guest-msg-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 4px 0;
  font-size: 11.5px;
  color: var(--faint);
  justify-content: flex-end;
}
.guest-retry {
  border: 0;
  background: none;
  padding: 0;
  color: var(--danger);
  font-size: 11.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 对方正在「输入」：只在我们刚发出消息、等待回复时短暂出现 */
.guest-typing { display: inline-flex; gap: 4px; padding: 12px 15px; background: var(--surface); border-radius: 15px; border-bottom-left-radius: 5px; }
.guest-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--faint);
  animation: guest-blink 1.2s infinite ease-in-out;
}
.guest-typing i:nth-child(2) { animation-delay: .18s; }
.guest-typing i:nth-child(3) { animation-delay: .36s; }
@keyframes guest-blink { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* --------------------------------- 提示 --------------------------------- */

.guest-notice {
  flex: none;
  margin: 0 18px 6px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fff6e5;
  border: 1px solid #f2dfb8;
  color: #8a5a00;
  font-size: 12.8px;
  text-align: center;
}
.guest-notice.err { background: #fdecea; border-color: #f3c9c4; color: var(--danger); }

/* -------------------------------- 输入区 -------------------------------- */

.guest-composer {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 14px;
  /*
   * 输入区三件套（清空 / 选图 / 输入框）共用同一个高度变量。
   * 窄屏把它调小时，三个控件会一起变矮 —— 以前是各自写死 45px，
   * 想省一点宽度就只能改一个，然后立刻歪掉（这也是"输入框很短"的根源：
   * 两个 45px 方块 + 发送按钮把 375px 的屏幕吃掉大半）。
   */
  --guest-input-h: 45px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
}

/* 清空本地记录：与选图按钮**同一套尺寸与边框**（45×45、1px 边框、圆角 12），
   否则一行里两个图标按钮一个有线一个没线，看着就不像一套控件。
   它仍然是次要操作：常态用 --muted 的灰，悬停才换成危险色。 */
.guest-broom {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--guest-input-h);
  height: var(--guest-input-h);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  /* 用 --muted 而不是 --faint：它是可点控件，浅到看不清等于没有（对比度也过不了 3:1） */
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}
.guest-broom:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
  background: color-mix(in srgb, var(--danger) 7%, var(--surface));
}
.guest-broom:active { transform: translateY(1px); }
.guest-broom:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

.guest-composer textarea {
  flex: 1 1 auto;
  min-height: var(--guest-input-h);
  max-height: 128px;
  resize: none;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  /* 固定像素行高：45 = 21 + 11×2 + 1×2，与左右两个按钮严格相等。
     用行高比例（1.5）会算出 22.5px，四舍五入后左右就对上不了。 */
  line-height: 21px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.guest-composer textarea:focus {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.guest-composer textarea::placeholder { color: var(--faint); }
.guest-composer textarea:disabled { background: var(--surface); color: var(--faint); }

.guest-send {
  flex: none;
  height: var(--guest-input-h);
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background .15s ease, transform .06s ease;
}
.guest-send:hover { background: var(--accent-dark); }
.guest-send:active { transform: scale(.98); }
.guest-send:disabled { background: #b9c2cc; cursor: not-allowed; }

/* --------------------------------- 弹层 --------------------------------- */

.guest-sheet {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(12, 20, 30, .42);
  backdrop-filter: blur(3px);
  animation: guest-fade .18s ease-out;
}
@keyframes guest-fade { from { opacity: 0; } to { opacity: 1; } }

.guest-sheet-card {
  width: 100%;
  max-width: 520px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 26px 24px calc(24px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 40px rgba(13, 21, 32, .16);
}

@media (min-width: 760px) {
  .guest-sheet { align-items: center; }
  .guest-sheet-card { border-radius: 20px; padding-bottom: 24px; }
}

.guest-sheet-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  font-size: 20px;
  margin-bottom: 14px;
}
.guest-sheet-card h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.guest-sheet-sub { margin: 8px 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.guest-field { display: grid; gap: 6px; margin-bottom: 14px; }
.guest-field > span { font-size: 13px; color: var(--muted); font-weight: 600; }
.guest-field em { font-style: normal; color: var(--accent-dark); font-size: 11.5px; margin-left: 4px; }
.guest-field small { font-size: 11.5px; color: var(--faint); font-weight: 500; margin-left: 4px; }
.guest-field input {
  width: 100%;
  padding: 11px 13px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.guest-field input:focus {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

.guest-sheet-error { margin: 0 0 12px; color: var(--danger); font-size: 12.8px; }

.guest-primary {
  display: block;
  width: 100%;
  padding: 12px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: background .15s ease;
}
.guest-primary:hover { background: var(--accent-dark); }

.guest-fineprint { margin: 14px 0 0; font-size: 11.8px; color: var(--faint); line-height: 1.6; text-align: center; }

/* 技术支持署名：一行居中小字，品牌名是唯一的强调色。 */
.guest-brand {
  flex: none;
  margin: 0;
  /* 现在它是底栏唯一的一行：自己承担底部安全区留白。 */
  padding: 6px 18px calc(10px + env(safe-area-inset-bottom));
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--faint);
}
.guest-brand a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transition: color .15s ease;
}
.guest-brand a:hover { color: var(--accent-dark); text-decoration: underline; }
.guest-brand a:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

/* ------------------------------ 入口不可用 ------------------------------ */

.guest-fatal {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  padding: 40px 24px;
  text-align: center;
}
.guest-fatal-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 24px;
  box-shadow: var(--shadow);
}
.guest-fatal b { font-size: 18px; margin-top: 6px; }
.guest-fatal p { margin: 0; max-width: 34ch; color: var(--muted); font-size: 13.5px; line-height: 1.7; }
.guest-fatal .guest-primary { width: auto; margin-top: 10px; padding-inline: 26px; }

/* 窄屏收紧留白，避免顶栏 + 输入栏挤掉消息区 */
@media (max-width: 420px) {
  .guest-bar { padding: 10px 14px; }
  .guest-thread { padding: 14px 13px 6px; }
  .guest-bubble { max-width: 82%; }

}

/*
 * 输入区：把被两侧按钮吃掉的空间还给输入框。
 *
 * 断点用 480px 而不是 420px：iPhone 14 Pro Max / Plus 这类 428~430px 的机型也在手机范围内，
 * 用 420 只照顾到 375 的老机型（截图里那台就是 430）。桌面（≥560px）完全不受影响。
 *
 * 375px 屏幕上原来是：两枚 45px 方块 + 发送 76px + 三个 10px 间隙 + 左右 20px 内边距
 * = 236px，输入框只剩 139px，打一句话就折行。这里做四件事，互不冲突：
 *   ① 高度变量 45 → 40（三个控件仍然严格等高，靠的是同一个变量）；
 *   ② 行高 21 → 18、上下内边距 11 → 10（40 = 18 + 20 + 2，数字对得上）；
 *   ③ 间隙 10 → 7、左右内边距 10 → 8；
 *   ④ 发送按钮左右内边距 20 → 14。
 * 输入框多出约 50px（≈ +36%），按钮可点区域仍有 40px（高于 40px 的无障碍建议下限）。
 */
@media (max-width: 480px) {
  .guest-composer {
    --guest-input-h: 40px;
    gap: 7px;
    padding: 8px;
  }
  .guest-composer textarea {
    padding: 9px 12px;
    line-height: 18px;
    border-radius: 11px;
  }
  .guest-broom,
  .guest-attach { border-radius: 11px; }
  .guest-send {
    padding: 0 14px;
    border-radius: 11px;
  }
}

/* 记住过英文的访客：词典到位前先不画中文，避免"先中文再闪成英文"。
   这段必须和 i18n.js 的 i18n-loading 类配合，只影响可见性，不影响布局测量。 */
html.i18n-loading body { visibility: hidden; }