/* Chost 的界面以工具使用为主，样式保持克制、清晰，并优先保证移动端可用。 */
:root {
  color-scheme: light;
  --bg: #f5f7f8;
  --panel: #ffffff;
  --panel-muted: #eef3f5;
  --text: #172126;
  --muted: #60717a;
  --line: #d8e0e4;
  --primary: #0f766e;
  --primary-strong: #115e59;
  --danger: #b42318;
  --shadow: 0 18px 50px rgba(18, 31, 36, 0.12);
}

/* 全局盒模型固定，避免移动端输入区和消息列表在动态内容出现时横向溢出。 */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

/* 本地图标模块会把 data-icon 渲染为 SVG；统一尺寸可以避免按钮和标题因图标加载产生跳动。 */
.chost-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  stroke-width: 2.25;
}

.primary-button .chost-icon,
.secondary-button .chost-icon,
.tool-button .chost-icon,
.icon-button .chost-icon {
  width: 17px;
  height: 17px;
}

/* 首页居中但不使用营销式大横幅，用户进入后可以立即创建或加入房间。 */
.home-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
}

.home-panel {
  width: min(100%, 520px);
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  font-weight: 800;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 32px;
  line-height: 1.1;
}

h2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.3;
}

.brand-row p,
.status-line,
.identity-strip span,
.fingerprint-box span {
  color: var(--muted);
}

.identity-strip,
.fingerprint-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-muted);
}

.identity-strip strong,
.fingerprint-box strong {
  overflow-wrap: anywhere;
  text-align: right;
}

/* 安全码标签固定为不换行，指纹自身可换行，避免 PC 侧栏中标签被挤成孤立单字。 */
.fingerprint-box span {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 本机安全码长度固定为 8 字节指纹，保持单行展示能减少用户人工核对时的误读。 */
.fingerprint-box strong {
  font-size: 14px;
  white-space: nowrap;
}

.home-actions {
  display: grid;
  gap: 18px;
  margin-top: 22px;
}

.join-form {
  display: grid;
  gap: 8px;
}

.join-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  outline: none;
}

input {
  min-height: 44px;
  padding: 0 12px;
}

textarea {
  min-height: 44px;
  max-height: 140px;
  resize: vertical;
  padding: 10px 12px;
}

input:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

.primary-button,
.secondary-button,
.tool-button,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-weight: 700;
}

.primary-button {
  background: var(--primary);
  color: #fff;
}

.primary-button:hover {
  background: var(--primary-strong);
}

.secondary-button,
.tool-button,
.icon-button {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
}

.primary-button:disabled,
.secondary-button:disabled,
.tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.status-line {
  min-height: 20px;
  font-size: 14px;
  line-height: 1.4;
}

/* 房间页在 PC 上使用侧栏 + 聊天区，在移动端压缩为单列。 */
.room-shell {
  display: grid;
  /* 桌面侧栏保留足够宽度，确保房间号和安全码这类长文本不会挤压聊天主区域。 */
  grid-template-columns: minmax(340px, 420px) minmax(0, 1fr);
  min-height: 100vh;
}

.room-side {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-right: 1px solid var(--line);
  background: var(--panel);
  padding: 20px;
}

.room-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 700;
}

.info-block {
  display: grid;
  gap: 10px;
}

/* 房间信息总面板把房间号、安全状态和在线成员合成一个可折叠区域，移动端默认只保留一行入口。 */
.room-info-panel {
  display: grid;
  gap: 12px;
}

/* 总面板摘要行是移动端唯一常驻的辅助信息入口，空间占用要明显小于完整房间信息。 */
.room-info-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  background: var(--panel-muted);
  cursor: pointer;
  list-style: none;
}

/* Safari/Chromium 会给 summary 添加默认小三角，这里隐藏后使用图标和文字状态保持一致视觉。 */
.room-info-summary::-webkit-details-marker {
  display: none;
}

.summary-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

/* 状态文字不承担业务语义，只帮助用户理解当前折叠状态。 */
.summary-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
}

.summary-state::before {
  content: "展开";
}

.room-info-panel[open] .summary-state::before {
  content: "收起";
}

.summary-state::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.room-info-panel[open] .summary-state::after {
  transform: translateY(2px) rotate(225deg);
}

/* 面板内容内部仍保持分组，桌面端展开后等价于原来的侧栏信息结构。 */
.room-info-content {
  display: grid;
  gap: 18px;
}

.room-code-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

code {
  overflow-wrap: anywhere;
  border-radius: 8px;
  background: var(--panel-muted);
  padding: 10px;
  font-size: 13px;
}

.member-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-list li {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.member-list strong,
.member-list span {
  overflow-wrap: anywhere;
}

.member-list span {
  color: var(--muted);
  font-size: 12px;
}

.chat-panel {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 100vh;
}

.message-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding: 20px;
}

.empty-state {
  margin: auto;
  color: var(--muted);
  text-align: center;
}

.message {
  width: min(78%, 680px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  padding: 12px;
  box-shadow: 0 6px 24px rgba(18, 31, 36, 0.08);
}

.message.outbound {
  align-self: flex-end;
  border-color: rgba(15, 118, 110, 0.35);
  background: #e8f6f3;
}

.message.inbound {
  align-self: flex-start;
}

.message-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
}

.message-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.attachment-card {
  display: grid;
  gap: 10px;
}

.attachment-card > strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.attachment-preview img,
.attachment-preview video,
.attachment-preview audio {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

.composer {
  display: grid;
  /* 输入区包含敏感开关、图片按钮、普通附件按钮、文本框和发送按钮；显式列宽避免移动端新增按钮后挤压错位。 */
  grid-template-columns: auto auto auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--line);
  background: var(--panel);
  padding: 12px;
}

/* 敏感开关是发送端的消息级隐私标记；勾选后新消息和附件消息都会带玻璃遮罩。 */
.sensitive-toggle {
  display: inline-flex;
  min-height: 42px;
}

.sensitive-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sensitive-toggle-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 0 14px;
  color: var(--text);
  font-weight: 700;
}

.sensitive-toggle input:checked + .sensitive-toggle-box {
  border-color: rgba(180, 35, 24, 0.38);
  background: #fff1ef;
  color: var(--danger);
}

.sensitive-toggle input:focus-visible + .sensitive-toggle-box {
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.15);
}

/* 上传和错误提示移入输入区内部，不再在发送按钮下方额外占用一条状态栏。 */
.composer-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.composer-status[hidden] {
  display: none;
}

.composer-status .secondary-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}

/* 敏感消息的内容容器需要相对定位，玻璃遮罩才能覆盖文字、图片和附件操作。 */
.sensitive-content {
  position: relative;
  overflow: hidden;
  min-height: 36px;
  border-radius: 8px;
}

/* 玻璃遮罩默认覆盖敏感内容，并配合内容模糊形成“看得出有内容但无法读清”的效果。 */
.sensitive-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(15, 118, 110, 0.16);
  background: rgba(245, 247, 248, 0.62);
  color: var(--primary-strong);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  opacity: 1;
  transition: opacity 0.16s ease;
  pointer-events: none;
}

.sensitive-overlay .chost-icon {
  width: 20px;
  height: 20px;
}

.message.sensitive .sensitive-content > :not(.sensitive-overlay) {
  filter: blur(10px);
  opacity: 0.72;
  transition:
    filter 0.16s ease,
    opacity 0.16s ease;
}

/* 鼠标移入或键盘聚焦时临时揭开遮罩；移出后 CSS 自动恢复遮罩。 */
.message.sensitive:hover .sensitive-overlay,
.message.sensitive:focus-within .sensitive-overlay {
  opacity: 0;
}

.message.sensitive:hover .sensitive-content > :not(.sensitive-overlay),
.message.sensitive:focus-within .sensitive-content > :not(.sensitive-overlay) {
  filter: none;
  opacity: 1;
}

.attachment-loading {
  color: var(--muted);
  font-size: 13px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 780px) {
  .home-shell {
    align-items: stretch;
    padding: 14px;
  }

  .home-panel {
    align-self: center;
    padding: 20px;
  }

  .join-row {
    grid-template-columns: 1fr;
  }

  .room-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .room-side {
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* 移动端关闭时彻底隐藏房间号、安全状态和成员列表，只留下一个紧凑入口。 */
  .room-info-panel:not([open]) .room-info-content {
    display: none;
  }

  .chat-panel {
    min-height: 0;
  }

  .message-list {
    padding: 14px;
  }

  .message {
    width: 100%;
  }

  .composer {
    /* 移动端保留图片快捷按钮，前三列是紧凑工具按钮，文本框占剩余宽度，发送按钮独占下一行。 */
    grid-template-columns: auto auto auto minmax(0, 1fr);
  }

  .composer .primary-button {
    grid-column: 1 / -1;
  }

  .sensitive-toggle-box {
    padding: 0 12px;
  }
}

@media (min-width: 781px) {
  /* 桌面端房间信息默认展开，隐藏总折叠入口，保持侧栏为稳定的信息面板。 */
  .room-info-panel[open] > .room-info-summary {
    display: none;
  }
}