/* ============================================================
   基础组件样式: 背景 / 玻璃 / 按钮 / 输入 / 气泡 / 弹窗 / 表情面板 / 灯箱 / Toast
   依赖 tokens.css 设计令牌
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--font-size);
  color: var(--color-text);
  background: var(--color-bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 极光背景(前后台共用) ---------- */
.aurora {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background:
    radial-gradient(1200px 800px at 80% -10%, var(--color-blob-1), transparent 60%),
    radial-gradient(900px 700px at -10% 90%, var(--color-blob-2), transparent 60%),
    radial-gradient(700px 600px at 110% 80%, var(--color-blob-3), transparent 60%),
    var(--color-bg);
}
.aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 20%, transparent 75%);
}
.aurora::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(40% 30% at 30% 40%, rgba(124, 92, 255, .16), transparent 70%),
    radial-gradient(35% 28% at 75% 55%, rgba(79, 209, 229, .13), transparent 70%);
  animation: aurora-drift 18s var(--ease-out) infinite alternate;
  filter: blur(40px);
}
@keyframes aurora-drift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::after { animation: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- 玻璃 ---------- */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border: var(--glass-border-w) solid var(--glass-border);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight);
}

/* ---------- 视图 ---------- */
.view { height: 100%; }
.view-center {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.hidden { display: none !important; }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 20px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  color: var(--color-text);
  background: var(--hover);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-base) var(--ease-out),
              opacity var(--duration-fast);
  user-select: none;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 14px; font-size: var(--text-xs); border-radius: 9px; }

.btn-primary {
  color: #fff;
  background: var(--accent-grad);
  box-shadow: var(--glow);
}
.btn-primary:hover { box-shadow: 0 0 30px rgba(124, 92, 255, .45); }

.btn-ghost {
  background: transparent;
  border: var(--glass-border-w) solid var(--glass-border);
  color: var(--color-text-sub);
}
.btn-ghost:hover { background: var(--hover); color: var(--color-text); }

.btn-danger { background: var(--color-danger); color: #fff; }
.btn-warn { background: var(--color-warning); color: #241a02; }
.btn-ok { background: var(--color-success); color: #04150c; }

/* 图标按钮 */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-sub);
  font-size: 19px;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast), color var(--duration-fast);
}
.icon-btn:hover { background: var(--hover); color: var(--color-text); transform: scale(1.06); }
.icon-btn:active { transform: scale(.95); }

/* 工具按钮(聊天输入区) */
.tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-sub);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.tool-btn:hover { background: var(--hover); color: var(--color-text); transform: translateY(-1px); }

/* 提醒按钮呼吸动画 */
.remind-btn { animation: remind-pulse 1.8s ease-in-out infinite; color: var(--color-warning); }
.remind-btn.cooldown { animation: none; opacity: .65; }
@keyframes remind-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* ---------- 输入框 ---------- */
.field input, .tb-search, .set-control input[type="text"], .set-control input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  border: var(--glass-border-w) solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
  outline: none;
  transition: border-color var(--duration-base), box-shadow var(--duration-base), background var(--duration-base);
}
.field input:focus, .tb-search:focus, .set-control input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--active);
  background: var(--glass-bg-strong);
}
.field { margin-bottom: 14px; }
.field input::placeholder, .tb-search::placeholder { color: var(--color-text-faint); }

/* ---------- 登录卡片 ---------- */
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 42px 38px;
  border-radius: var(--radius-lg);
  animation: card-in var(--duration-slow) var(--ease-out);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
.login-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 20px;
  background: var(--accent-grad);
  box-shadow: var(--glow);
}
.login-title { text-align: center; font-size: var(--text-2xl); font-weight: 800; letter-spacing: .5px; }
.login-sub { text-align: center; color: var(--color-text-sub); font-size: var(--text-xs); margin: 6px 0 26px; }
.login-error { min-height: 20px; margin-top: 12px; text-align: center; color: var(--color-danger); font-size: var(--text-xs); }

/* ---------- 头像 ---------- */
.avatar {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--accent-grad-soft);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.avatar-char {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: var(--glow);
  flex-shrink: 0;
  user-select: none;
}
.avatar-lg { width: 64px; height: 64px; font-size: 26px; border-radius: var(--radius-full); }

/* ---------- 消息 ---------- */
.msg { display: flex; flex-direction: column; margin-bottom: 14px; animation: msg-in var(--duration-base) var(--ease-out); }
@keyframes msg-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.msg-row { display: flex; align-items: flex-end; gap: 10px; max-width: 82%; }
.msg-mine .msg-row { flex-direction: row-reverse; margin-left: auto; }
.msg-body { display: flex; flex-direction: column; min-width: 0; }
.msg-mine .msg-body { align-items: flex-end; }
.msg-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
  color: var(--color-text-faint);
  margin: 0 6px 4px;
}
.msg-mine .msg-meta { flex-direction: row-reverse; }
.msg-bubble {
  padding: 10px 15px;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  line-height: 1.55;
  word-break: break-word;
  background: var(--bubble-theirs);
  color: var(--bubble-theirs-text);
  box-shadow: var(--shadow-sm);
  max-width: 100%;
}
.msg-theirs .msg-bubble { border-top-left-radius: 5px; }
.msg-mine .msg-bubble {
  background: var(--bubble-mine);
  color: var(--bubble-mine-text);
  border-top-right-radius: 5px;
  box-shadow: var(--shadow-md);
}

.msg-img {
  display: block;
  max-width: 260px;
  max-height: 300px;
  border-radius: 12px;
  cursor: zoom-in;
  object-fit: cover;
  transition: transform var(--duration-fast);
}
.msg-img:hover { transform: scale(1.015); }
.msg-video { max-width: 280px; max-height: 340px; border-radius: 12px; }
.msg-emoji { max-width: 140px; max-height: 140px; vertical-align: middle; }
.emoji-inline { width: 26px; height: 26px; vertical-align: -4px; margin: 0 1px; }

.msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  max-width: 300px;
  padding: 4px 2px;
}
.file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border-radius: 10px;
  background: var(--accent-grad-soft);
  flex-shrink: 0;
}
.file-info { flex: 1; min-width: 0; }
.file-name { font-size: var(--text-sm); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 11px; opacity: .7; margin-top: 2px; }
.file-dl {
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 700;
  text-decoration: none;
  flex-shrink: 0;
  padding: 6px 12px;
  border-radius: var(--radius-full);
  background: var(--hover);
}
.file-dl:hover { background: var(--active); }

.day-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: var(--color-text-faint);
  font-size: 11px;
}
.day-divider::before, .day-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--glass-border);
}
.day-divider span { padding: 4px 12px; border-radius: var(--radius-full); background: var(--hover); }

/* 在线状态点 */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-on { background: var(--color-success); box-shadow: 0 0 8px var(--color-success); }
.dot-off { background: var(--color-text-faint); }

/* ---------- 弹窗 ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-lg); }
.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 16, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: fade-in var(--duration-base);
}
.modal-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 86vh;
  overflow-y: auto;
  border-radius: var(--radius-lg);
  animation: modal-in var(--duration-base) var(--ease-spring);
  z-index: 1;
}
.modal-sm { max-width: 360px; }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 8px;
}
.modal-head h3 { font-size: var(--text-lg); font-weight: 700; }
.modal-close {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-sub);
  font-size: 16px;
  cursor: pointer;
  transition: background var(--duration-fast);
}
.modal-close:hover { background: var(--hover); color: var(--color-text); }
.modal-body { padding: 14px 22px 22px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 0 22px 20px; }

/* 设置行 */
.set-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--glass-border); }
.set-row:last-child { border-bottom: none; }
.set-label { width: 84px; flex-shrink: 0; font-size: var(--text-sm); color: var(--color-text-sub); }
.set-control { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.set-val { font-size: var(--text-sm); color: var(--color-primary); font-weight: 700; min-width: 28px; }
input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--color-primary); }

/* ---------- 表情面板 ---------- */
.emoji-panel {
  position: fixed;
  z-index: 90;
  width: 360px;
  max-height: 380px;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in var(--duration-base) var(--ease-out);
}
.emoji-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 14px 0;
  border-bottom: 1px solid var(--glass-border);
}
.emoji-tab {
  flex: 1;
  padding: 9px 0;
  border: none;
  background: transparent;
  color: var(--color-text-sub);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  border-radius: 9px 9px 0 0;
  transition: color var(--duration-fast), background var(--duration-fast);
}
.emoji-tab.active { color: var(--color-primary); background: var(--hover); }
.emoji-tab-body { overflow-y: auto; padding: 12px; flex: 1; }
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.emoji-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-size: 24px;
  cursor: pointer;
  transition: background var(--duration-fast), transform var(--duration-fast);
}
.emoji-cell:hover { background: var(--hover); transform: scale(1.15); }
.emoji-cell img { width: 80%; height: 80%; object-fit: contain; border-radius: 6px; }
.emoji-add { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 0 4px; border-top: 1px solid var(--glass-border); }
.emoji-add-hint { font-size: 11px; color: var(--color-text-faint); }
.emoji-empty { text-align: center; color: var(--color-text-sub); padding: 28px 0; font-size: var(--text-xs); line-height: 1.8; }

/* ---------- 灯箱 ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 6, 12, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: zoom-out;
  animation: fade-in var(--duration-base);
}
.lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  animation: modal-in var(--duration-base) var(--ease-out);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 300;
  padding: 12px 22px;
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  background: var(--glass-bg-strong);
  border: var(--glass-border-w) solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-md);
  animation: toast-in var(--duration-base) var(--ease-spring);
  max-width: min(90vw, 480px);
  text-align: center;
}
.toast.ok { color: var(--color-success); }
.toast.err { color: var(--color-danger); }
.toast.info { color: var(--color-info); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 14px) scale(.95); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-text-faint); }

/* 分段控件 */
.seg { display: flex; background: var(--input-bg); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
.seg-btn {
  border: none;
  padding: 7px 18px;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-sub);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-base);
}
.seg-btn.active { background: var(--accent-grad); color: #fff; box-shadow: var(--glow); }

/* 状态徽标 */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
}
.status-badge.normal { background: rgba(61, 220, 151, .15); color: var(--color-success); }
.status-badge.frozen { background: rgba(255, 182, 72, .15); color: var(--color-warning); }
.status-badge.blocked { background: rgba(255, 107, 125, .15); color: var(--color-danger); }

/* 输入区占位符 */
.chat-input:empty::before {
  content: attr(data-placeholder);
  color: var(--color-text-faint);
  pointer-events: none;
}

/* 移动端表情面板: 全宽贴底(前后台共用) */
@media (max-width: 768px) {
  .emoji-panel {
    width: calc(100vw - 20px);
    left: 10px !important;
    right: 10px;
    top: auto !important;
    bottom: 8px;
    max-height: 46vh;
    border-radius: 20px;
  }
  /* 消息气泡(前后台共用) */
  .msg-row { max-width: 90%; gap: 7px; }
  .msg-avatar { width: 30px; height: 30px; }
  .msg-bubble { padding: 9px 13px; font-size: 15px; border-radius: 14px; }
  .msg-img { max-width: 200px; max-height: 240px; }
  .msg-video { max-width: 230px; }
  .msg-file { min-width: 200px; max-width: 250px; }
  .msg-emoji { max-width: 120px; max-height: 120px; }
}