/* 天玑 · 浏览器端客户端样式
   目标：与 Flet 版一致的心智（微信/LINE 那种列表 + 气泡），但**渲染在本地**。
   外框：圆角卡片 + 阴影 + 浅灰底；页眉品牌绿；页脚状态条。 */

:root {
  --brand: #07c160;          /* 微信绿：页眉与主按钮 */
  --brand-dark: #059748;
  --page: #ededed;           /* 页面底色（卡片才浮得出来） */
  --line: #e3e5e8;
  --text: #1f2329;
  --muted: #8a9099;
  --mine: #95ec69;           /* 自己的气泡（微信绿） */
  --other: #ffffff;
  --sel: #eaf3ff;
  --warn: #e65100;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--page); color: var(--text);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.spacer { flex: 1; }
.grow { flex: 1; }

/* ---------------------------------------------------------------- 登录页 */
.login { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card {
  width: 380px; background: #fff; border-radius: 14px; padding: 22px;
  border: 1px solid var(--line); box-shadow: 0 4px 18px #00000018;
  display: flex; flex-direction: column; gap: 10px;
}
.brand { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.brand h1 { font-size: 20px; margin: 0; }
.brand p { margin: 2px 0 0; font-size: 11px; }
.brand-tile {
  width: 38px; height: 38px; border-radius: 11px; background: var(--brand);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.brand-tile.small { width: 34px; height: 34px; border-radius: 10px; font-size: 16px;
  background: #ffffff33; }

.field { display: block; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; }
.field > span { font-size: 10px; color: var(--muted); }
.field input {
  border: 0; outline: 0; width: 100%; font-size: 15px; padding: 2px 0 0; background: transparent;
  color: inherit;
}
.check { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 4px 0; }
button { font: inherit; cursor: pointer; }
button.primary {
  background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: 10px 14px;
  font-weight: 600;
}
button.primary:hover { background: var(--brand-dark); }
button.ghost-btn {
  background: #f2f3f5; border: 0; border-radius: 8px; padding: 6px 10px; color: var(--text);
}
button.ghost-btn:hover { background: #e8eaed; }
button.icon-btn {
  background: #ffffff26; border: 0; color: #fff; border-radius: 8px; width: 30px; height: 30px;
  font-size: 15px;
}
button.icon-btn:hover { background: #ffffff40; }
.hint { font-size: 11px; color: var(--muted); min-height: 16px; }
.latency-row { font-size: 11px; color: var(--muted); }

/* ---------------------------------------------------------------- 外框 */
.main { height: 100%; padding: 10px; }
.frame {
  height: 100%; background: #fff; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 4px 18px #00000018; display: flex; flex-direction: column; overflow: hidden;
}
.topbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--brand);
  color: #fff;
}
.titles .title { font-weight: 700; font-size: 16px; }
.titles .subtitle { font-size: 11px; color: #ffffffd0; }
.top-room { font-size: 12px; color: #ffffffe6; }
.body { flex: 1; display: flex; min-height: 0; }

/* 左栏 */
.rail { width: 300px; display: flex; flex-direction: column; border-right: 1px solid var(--line);
  min-width: 0; }
.me { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; }
.me:hover { background: #fafbfc; }
.me-text { min-width: 0; }
.me-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.me-sub { font-size: 11px; color: var(--muted); }
.search-row { padding: 0 12px 8px; }
.search-row input {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; outline: 0;
}
.chips { display: flex; gap: 6px; padding: 0 12px 8px; flex-wrap: wrap; }
.chip { font-size: 11px; padding: 3px 9px; border-radius: 10px; background: #f0f1f3;
  color: #5b6069; }
.chip.active { background: var(--brand); color: #fff; }
.list { flex: 1; overflow-y: auto; padding: 0 6px 6px; }
.row { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 8px;
  cursor: pointer; }
.row:hover { background: #f7f8fa; }
.row.active { background: var(--sel); }
.row-main { flex: 1; min-width: 0; }
.row-top { display: flex; gap: 6px; align-items: baseline; }
.row-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.row-time { font-size: 10px; color: var(--muted); margin-left: auto; }
.row-preview { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
.row-preview.breach { color: var(--warn); }
.unread { background: #f5222d; color: #fff; font-size: 10px; border-radius: 9px; padding: 1px 6px;
  min-width: 18px; text-align: center; }
.tabs { display: flex; border-top: 1px solid var(--line); }
.tab { flex: 1; border: 0; background: #fff; padding: 8px 2px; font-size: 12px; color: var(--muted);
  position: relative; }
.tab.active { color: var(--brand); font-weight: 600; }
.badge { position: absolute; top: 3px; right: 12px; background: #f5222d; color: #fff;
  border-radius: 8px; font-size: 10px; padding: 0 5px; }

/* 头像 */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; background: #1e88e5; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex: none;
  background-size: cover; background-position: center; position: relative;
}
.avatar.big { width: 56px; height: 56px; font-size: 20px; }
.avatar .kind {
  position: absolute; right: -2px; bottom: -2px; width: 15px; height: 15px; border-radius: 8px;
  background: #2e7d32; color: #fff; font-size: 9px; display: flex; align-items: center;
  justify-content: center;
}
.avatar .kind.dm { background: #1e88e5; }
.avatar .kind.desk { background: #e65100; }
.avatar .kind.external { background: #6a1b9a; }

/* 会话区 */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #f6f7f8; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); background: #fff; }
.chat-title { font-weight: 600; }
.chat-sub { font-size: 11px; }
.timeline { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column;
  gap: 10px;
  /* 总管工单：「聊天内容选择全选的时候，范围指这一条聊天记录，不要全屏。」
     做法：时间线本身不可选中，只有**单条气泡内部**可选中 —— 手机上长按拖动时
     选区就被限制在这一条消息里，不会蔓延到整屏。
     （「全选」/Ctrl+A 的全屏圈选由 app.js 里的「全选」限单条消息逻辑兜底收窄。） */
  user-select: none;
  -webkit-user-select: none; }
/* 单条消息内部可选中（含里面的链接/代码等子元素） */
.timeline .bubble, .timeline .bubble * { user-select: text; -webkit-user-select: text; }
.msg { display: flex; gap: 8px; align-items: flex-start; }
.msg.mine { flex-direction: row-reverse; }
.bubble-wrap { max-width: 68%; }
.bubble-meta { font-size: 10px; color: var(--muted); margin-bottom: 3px; display: flex; gap: 6px; }
.msg.mine .bubble-meta { justify-content: flex-end; }
.bubble { background: var(--other); border-radius: 10px; padding: 8px 10px; white-space: pre-wrap;
  word-break: break-word; box-shadow: 0 1px 2px #00000010; }
.msg.mine .bubble { background: var(--mine); }
.divider { text-align: center; font-size: 10px; color: var(--muted); margin: 6px 0; }
.composer { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line);
  background: #fff; position: relative; }
/* @提及 弹层（总管工单：打 @ 或点头像出名单） */
.mention-pop {
  position: absolute; left: 12px; bottom: calc(100% + 6px); width: 260px; max-height: 240px;
  overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 6px 20px #00000018; z-index: 30;
}
.mention-item { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px;
  cursor: pointer; }
.mention-item.active { background: #eef4ff; }
.mention-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-kind { color: var(--muted); font-size: 11px; flex: none; }
.avatar[data-mention] { cursor: pointer; }
/* 消息正文里的 @提及 高亮（总管工单：@到自己的要更醒目）。
   注意：这里的 span 是 app.js 在 **esc() 之后** 才插入的，正文本身仍是纯文本。 */
.bubble .mention { color: #1565c0; background: #e8f0fe; border-radius: 4px;
  padding: 0 2px; font-weight: 500; }
.bubble .mention-me { color: #fff; background: #f57c00; border-radius: 4px;
  padding: 0 2px; font-weight: 700; }
.msg.mine .bubble .mention { color: #0d47a1; background: #ffffff9c; }
.msg.mine .bubble .mention-me { color: #fff; background: #e65100; }
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  outline: 0; font: inherit; max-height: 120px;
}
.composer .send { align-self: flex-end; }

/* 右栏 */
.detail { width: 280px; border-left: 1px solid var(--line); padding: 12px; overflow-y: auto;
  background: #fff; }
.detail-title { font-weight: 600; margin-bottom: 6px; }
.detail-body { font-size: 12px; color: #4b5158; display: flex; flex-direction: column; gap: 6px; }

/* 页脚 */
.bottombar { display: flex; align-items: center; gap: 10px; padding: 6px 12px;
  border-top: 1px solid var(--line); background: #f7f8fa; font-size: 11px; }
.pill { color: var(--brand); }
.pill.off { color: var(--warn); }

/* 弹窗与菜单 */
.modal { position: fixed; inset: 0; background: #00000055; display: flex; align-items: center;
  justify-content: center; z-index: 20; }
.modal-card { width: 400px; background: #fff; border-radius: 14px; padding: 18px;
  display: flex; flex-direction: column; gap: 10px; }
.modal-title { font-size: 17px; font-weight: 600; }
.profile-row { display: flex; gap: 12px; align-items: center; }
.profile-actions { display: flex; gap: 8px; }
.presets { display: flex; gap: 8px; flex-wrap: wrap; }
.preset { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; }
.preset.active { border-color: var(--brand); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
.menu { position: fixed; z-index: 30; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 6px 20px #00000022; padding: 4px; display: flex;
  flex-direction: column; min-width: 140px; }
.menu button { background: transparent; border: 0; text-align: left; padding: 8px 10px;
  border-radius: 8px; }
.menu button:hover { background: #f2f3f5; }

/* 右下角浮动提醒（点一下直接进那个会话） */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex;
  flex-direction: column; gap: 8px; max-width: 320px; }
.toast { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--brand);
  border-radius: 10px; box-shadow: 0 8px 24px #00000022; padding: 10px 12px; cursor: pointer;
  animation: toast-in .18s ease-out; }
.toast:hover { background: #fafbfc; }
.toast .t-head { display: flex; gap: 6px; align-items: baseline; }
.toast .t-who { font-weight: 600; font-size: 13px; }
.toast .t-room { font-size: 10px; color: var(--muted); margin-left: auto; }
.toast .t-text { font-size: 12px; color: #4b5158; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.chip .dot { background: #f5222d; color: #fff; border-radius: 8px; padding: 0 4px;
  margin-left: 4px; font-size: 10px; }

/* 在线状态：**主要看头像本身**（用户反馈"右下角一个点表达不出"） */
.avatar.offline { filter: grayscale(1); opacity: .55; }        /* 离线：整张灰掉 */
.avatar.away { box-shadow: 0 0 0 2px #f9a825; }                /* 离开：琥珀描边 */
.avatar.busy { box-shadow: 0 0 0 2px #e53935; }                /* 忙：红色描边 */
.avatar.online { box-shadow: 0 0 0 2px #2e7d32; }              /* 在线：绿色描边 */

/* 在线状态点（辅助：右下角小圆点，四色） */
.avatar .presence { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 6px; border: 2px solid #fff; background: #9e9e9e; }
.avatar .presence.online { background: #2e7d32; }
.avatar .presence.away { background: #f9a825; }
.avatar .presence.busy { background: #e53935; }
.avatar .presence.offline { background: #9e9e9e; }
.typing { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--brand); }
.typing i { width: 4px; height: 4px; border-radius: 2px; background: var(--brand);
  animation: typing-jump .9s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typing-jump { 0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; } }
.own-status { border: 0; background: #ffffff26; color: #fff; border-radius: 8px; padding: 3px 6px;
  font-size: 11px; }

.qr-card { width: 380px; align-items: center; }
.qr-img { width: 248px; height: 248px; image-rendering: pixelated; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; }

/* 窄屏：右栏收起，左栏变窄（手机可用） */
@media (max-width: 900px) {
  .detail { display: none; }
  .rail { width: 40%; min-width: 160px; }
  .main { padding: 0; }
  .frame { border-radius: 0; border: 0; }
}

/* 历史分页入口（贴在时间线顶部） */
.load-older { text-align: center; padding: 6px; font-size: 11px; color: var(--muted); cursor: pointer; }
.load-older:hover { color: var(--brand); }

/* bug#53 消息里的图片（总管要求能发图片） */
.msg-atts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-img {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  display: block;
  cursor: zoom-in;
  background: #f2f2f2;
}
.msg-file { font-size: 12px; opacity: 0.85; }