/* TULU 卡片留言组件 · comment-widget.css v0.1.0
 * 沿用站点设计变量(base.css :root), 保证与工具页/游戏页风格一致。
 * 两种形态:
 *   .tc-inline 工具页底部评论区
 *   .tc-fab + .tc-drawer 游戏页右下角 💬 按钮与抽屉(默认收起)
 */

.tc { font-size: 14px; color: var(--ink); }

/* 头部:标题 + 状态 */
.tc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tc-title { font-weight: 500; }
.tc-status {
  font-size: 12px; padding: 2px 8px; border-radius: 10px;
  background: var(--gray-soft); color: var(--gray-ink);
}
.tc-status[data-state="on"] { background: var(--green-soft); color: var(--green-ink); }

/* 消息流 */
.tc-log {
  height: 220px; overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  line-height: 1.7;
  -webkit-overflow-scrolling: touch;
}
.tc-line { word-break: break-word; }
.tc-msg + .tc-msg { margin-top: 2px; }
.tc-sys { color: var(--ink-3); font-size: 12px; font-style: italic; }

/* 输入行 */
.tc-input-row { display: flex; gap: 8px; margin-top: 8px; }
.tc-input {
  flex: 1; min-height: 44px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px;
  background: var(--paper); font-size: 14px; outline: none;
}
.tc-input:focus { border-color: var(--yellow); }
.tc-send {
  padding: 0 18px; border: 0; border-radius: 10px;
  background: var(--navy); color: #fff; font-size: 14px; cursor: pointer;
}
.tc-send:disabled, .tc-input:disabled { opacity: .5; cursor: not-allowed; }

/* ===== 工具页:底部评论区 ===== */
.tc-inline { max-width: 720px; margin: 0 auto 18px; padding: 0 14px; }

/* ===== 游戏页:💬 悬浮按钮 + 抽屉 ===== */
.tc-fab {
  position: fixed;
  right: 14px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 45;
  width: 46px; height: 46px;
  border: 0; border-radius: 50%;
  background: rgba(15, 27, 61, .88);
  color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.tc-drawer {
  position: fixed;
  z-index: 46;
  right: 0; bottom: 0; left: 0;
  max-height: 62vh;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .16);
  transform: translateY(102%);
  transition: transform .22s ease;
  display: flex; flex-direction: column;
}
.tc-drawer.open { transform: translateY(0); }
.tc-drawer .tc-log { flex: 1 1 auto; height: auto; min-height: 120px; }
.tc-close {
  margin-left: auto;
  border: 0; background: transparent;
  font-size: 20px; line-height: 1;
  color: var(--ink-2); cursor: pointer;
}

/* 窄屏收紧 */
@media (max-height: 640px) {
  .tc-log { height: 160px; }
  .tc-drawer { max-height: 70vh; }
}
@media (max-width: 480px) {
  .tc-inline { padding: 0 10px; }
  .tc-send { padding: 0 14px; }
}