/**
 * Telegram Channel to Web - 仿 Telegram 频道动态样式表 (V2.0)
 * 适配 WordPress 博客 (深度契合 Argon 主题及日间/暗黑模式)
 * 
 * 改进特性：
 * 1. 移除所有 URL 链接 hover 下划线，保持清爽视觉
 * 2. 深度适配 Argon 主题的 html.darkmode 与 html.darkmode.amoled-dark
 * 3. 图片完整展示无裁切，自适应细长图与居中留白柔和处理
 * 4. 底部分页【加载更多】与【到底提示】组件
 */

:root {
  --tg-primary: #506fe8;
  --tg-primary-hover: #3d5cd4;
  --tg-primary-light: rgba(80, 111, 232, 0.1);
  --tg-bg: #f5f7fb;
  --tg-card-bg: #ffffff;
  --tg-bubble-bg: #ffffff;
  --tg-bubble-border: #e8ecf3;
  --tg-text-main: #2c3345;
  --tg-text-sub: #7a8293;
  --tg-text-muted: #9aa1b2;
  --tg-preview-bg: #f8fafc;
  --tg-image-container-bg: #f3f5f9;
  --tg-reaction-bg: #f0f3f8;
  --tg-reaction-hover: #e4e8f1;
  --tg-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
  --tg-radius-card: 14px;
  --tg-radius-bubble: 12px;
  --tg-radius-sm: 8px;
  --tg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

/* ==================== [Argon 主题与通用暗黑模式适配] ==================== */
/* 1. 系统偏好暗黑模式 */
@media (prefers-color-scheme: dark) {
  :root {
    --tg-primary: #6885f7;
    --tg-primary-hover: #7e98fc;
    --tg-primary-light: rgba(104, 133, 247, 0.15);
    --tg-bg: #1a1e29;
    --tg-card-bg: #232838;
    --tg-bubble-bg: #232838;
    --tg-bubble-border: #2e3447;
    --tg-text-main: #e2e8f0;
    --tg-text-sub: #94a3b8;
    --tg-text-muted: #64748b;
    --tg-preview-bg: #1c2130;
    --tg-image-container-bg: #1c2130;
    --tg-reaction-bg: #2b3245;
    --tg-reaction-hover: #373f57;
    --tg-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  }
}

/* 2. WordPress Argon 主题暗黑模式 (html.darkmode) 及通用暗黑类 */
html.darkmode,
body.darkmode,
body.dark,
html.dark,
html.theme_dark,
body.theme-dark,
[data-theme="dark"] {
  --tg-primary: #6885f7;
  --tg-primary-hover: #7e98fc;
  --tg-primary-light: rgba(104, 133, 247, 0.18);
  --tg-bg: #21252b;
  --tg-card-bg: #282c34;
  --tg-bubble-bg: #282c34;
  --tg-bubble-border: #3b4048;
  --tg-text-main: #abb2bf;
  --tg-text-sub: #828997;
  --tg-text-muted: #5c6370;
  --tg-preview-bg: #21252b;
  --tg-image-container-bg: #1e2227;
  --tg-reaction-bg: #323842;
  --tg-reaction-hover: #3e4451;
  --tg-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* 3. WordPress Argon 主题纯黑模式 (html.darkmode.amoled-dark) */
html.darkmode.amoled-dark,
body.darkmode.amoled-dark {
  --tg-primary: #7590fa;
  --tg-primary-hover: #8ca3fb;
  --tg-primary-light: rgba(117, 144, 250, 0.2);
  --tg-bg: #000000;
  --tg-card-bg: #121212;
  --tg-bubble-bg: #121212;
  --tg-bubble-border: #242424;
  --tg-text-main: #e0e0e0;
  --tg-text-sub: #909090;
  --tg-text-muted: #606060;
  --tg-preview-bg: #0a0a0a;
  --tg-image-container-bg: #080808;
  --tg-reaction-bg: #1c1c1c;
  --tg-reaction-hover: #292929;
  --tg-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

/* 整体容器 */
.tg-feed-wrapper {
  font-family: var(--tg-font);
  width: 100%;
  max-width: 860px;
  margin: 20px auto;
  box-sizing: border-box;
  color: var(--tg-text-main);
  line-height: 1.6;
}

.tg-feed-wrapper * {
  box-sizing: border-box;
}

/* 全局去除链接下划线，保持清爽视觉 */
.tg-feed-wrapper a {
  text-decoration: none !important;
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* 顶部频道信息卡片 */
.tg-channel-header {
  background: var(--tg-card-bg);
  border-radius: var(--tg-radius-card);
  padding: 22px 24px;
  margin-bottom: 24px;
  box-shadow: var(--tg-shadow);
  border: 1px solid var(--tg-bubble-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  transition: all 0.3s ease;
}

.tg-channel-profile {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 260px;
}

.tg-channel-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--tg-primary-light);
  border: 2px solid var(--tg-bubble-border);
}

.tg-channel-meta {
  display: flex;
  flex-direction: column;
}

.tg-channel-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tg-text-main);
  margin: 0 0 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tg-channel-username {
  font-size: 0.88rem;
  color: var(--tg-primary);
  font-weight: 600;
  margin-bottom: 6px;
}

.tg-channel-username:hover {
  color: var(--tg-primary-hover);
}

.tg-channel-desc {
  font-size: 0.88rem;
  color: var(--tg-text-sub);
  margin: 0 0 6px 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.tg-channel-desc a {
  color: var(--tg-primary);
}
.tg-channel-desc a:hover {
  color: var(--tg-primary-hover);
}

.tg-channel-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--tg-text-muted);
}

.tg-stat-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tg-stat-badge {
  background: var(--tg-primary-light);
  color: var(--tg-primary);
  padding: 1px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.tg-channel-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tg-btn-join {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--tg-primary);
  color: #ffffff !important;
  padding: 9px 18px;
  border-radius: 20px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 3px 10px rgba(80, 111, 232, 0.3);
}

.tg-btn-join:hover {
  background: var(--tg-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(80, 111, 232, 0.4);
}

.tg-btn-join svg {
  fill: currentColor;
  width: 16px;
  height: 16px;
}

/* 消息列表主体 */
.tg-msg-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 单条消息包装 */
.tg-msg-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  transition: transform 0.2s ease;
}

/* 发送者头像 */
.tg-msg-user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  margin-top: 4px;
  border: 1px solid var(--tg-bubble-border);
}

/* 消息气泡 */
.tg-msg-bubble {
  position: relative;
  background: var(--tg-bubble-bg);
  border-radius: var(--tg-radius-bubble);
  padding: 14px 18px;
  border: 1px solid var(--tg-bubble-border);
  box-shadow: var(--tg-shadow);
  max-width: 100%;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* 气泡小尖角 */
.tg-msg-bubble::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--tg-bubble-bg);
  z-index: 2;
}

.tg-msg-bubble::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 14px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 9px solid var(--tg-bubble-border);
  z-index: 1;
}

/* 气泡顶部作者信息 */
.tg-msg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.tg-msg-author {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--tg-primary);
}

.tg-msg-author:hover {
  color: var(--tg-primary-hover);
}

/* 转发标识 */
.tg-msg-forwarded {
  font-size: 0.82rem;
  color: var(--tg-text-sub);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.tg-msg-forwarded-name {
  font-weight: 600;
  color: var(--tg-primary);
}

/* 正文文字 */
.tg-msg-text {
  font-size: 0.95rem;
  color: var(--tg-text-main);
  line-height: 1.65;
  margin-bottom: 10px;
}

.tg-msg-text a {
  color: var(--tg-primary);
  word-break: break-all;
}

.tg-msg-text a:hover {
  color: var(--tg-primary-hover);
}

/* Emoji */
.tg-msg-text .emoji,
.tg-reaction .emoji {
  display: inline-block;
  width: 18px;
  height: 18px;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: -3px;
  margin: 0 1px;
}

.tg-msg-text .emoji b,
.tg-reaction .emoji b {
  opacity: 0;
  display: none;
}

/* ==================== [图片完整展示与美化] ==================== */
.tg-msg-photos {
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tg-msg-photo-link {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: var(--tg-radius-sm);
  overflow: hidden;
  position: relative;
  background: var(--tg-image-container-bg);
  border: 1px solid var(--tg-bubble-border);
  padding: 6px;
  transition: all 0.25s ease;
}

.tg-msg-photo-link:hover {
  border-color: var(--tg-primary);
  box-shadow: 0 4px 14px rgba(80, 111, 232, 0.12);
}

/* 图片完整展示：自适应宽高，绝对不裁切，居中展示 */
.tg-msg-photo-img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 650px;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.25s ease;
}

.tg-msg-photo-link:hover .tg-msg-photo-img {
  transform: scale(1.008);
}

/* 文件/文档附件卡片 */
.tg-msg-document {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--tg-preview-bg);
  border: 1px solid var(--tg-bubble-border);
  border-radius: var(--tg-radius-sm);
  padding: 12px 14px;
  margin: 10px 0;
  color: inherit;
  transition: all 0.2s ease;
}

.tg-msg-document:hover {
  border-color: var(--tg-primary);
  background: var(--tg-primary-light);
}

.tg-doc-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tg-primary);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tg-doc-icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.tg-doc-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.tg-doc-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--tg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tg-doc-extra {
  font-size: 0.8rem;
  color: var(--tg-text-muted);
  margin-top: 2px;
}

/* 网页链接预览卡片 (Link Preview) */
.tg-msg-link-preview {
  display: block;
  border-left: 3px solid var(--tg-primary);
  background: var(--tg-preview-bg);
  border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
  padding: 10px 14px;
  margin: 10px 0;
  color: inherit;
  transition: background 0.2s ease;
}

.tg-msg-link-preview:hover {
  background: var(--tg-primary-light);
}

.tg-preview-site {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tg-primary);
  margin-bottom: 2px;
}

.tg-preview-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tg-text-main);
  margin-bottom: 4px;
}

.tg-preview-desc {
  font-size: 0.84rem;
  color: var(--tg-text-sub);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tg-preview-thumb {
  margin-top: 8px;
  border-radius: 4px;
  max-height: 180px;
  width: 100%;
  object-fit: cover;
}

/* 互动表情 (Reactions) 胶囊 */
.tg-msg-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 6px 0;
}

.tg-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tg-reaction-bg);
  color: var(--tg-text-main);
  padding: 3px 9px;
  border-radius: 14px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  user-select: none;
}

.tg-reaction:hover {
  background: var(--tg-reaction-hover);
  border-color: var(--tg-bubble-border);
  transform: translateY(-1px);
}

.tg-reaction-count {
  color: var(--tg-text-sub);
  font-size: 0.8rem;
}

/* 底部元信息 */
.tg-msg-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--tg-text-muted);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--tg-bubble-border);
}

.tg-msg-views {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.tg-msg-views svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.tg-msg-date {
  color: var(--tg-text-muted);
}

.tg-msg-date:hover {
  color: var(--tg-primary);
}

.tg-msg-edited {
  font-style: italic;
  opacity: 0.8;
}

/* ==================== [底部分页与加载更多组件] ==================== */
.tg-feed-pagination {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tg-btn-loadmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tg-card-bg);
  color: var(--tg-primary);
  border: 1px solid var(--tg-bubble-border);
  box-shadow: var(--tg-shadow);
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  transition: all 0.25s ease;
  user-select: none;
}

.tg-btn-loadmore:hover:not(:disabled) {
  background: var(--tg-primary);
  color: #ffffff;
  border-color: var(--tg-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(80, 111, 232, 0.25);
}

.tg-btn-loadmore:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* 旋转 Loading 图标 */
.tg-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: tg-spin 0.75s linear infinite;
}

@keyframes tg-spin {
  100% {
    transform: rotate(360deg);
  }
}

/* 已经到底啦提示 */
.tg-feed-nomore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  color: var(--tg-text-muted);
  font-size: 0.82rem;
  padding: 12px 0;
}

.tg-feed-nomore::before,
.tg-feed-nomore::after {
  content: "";
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: var(--tg-bubble-border);
}

/* 底部状态信息 */
.tg-feed-footer-meta {
  text-align: center;
  font-size: 0.78rem;
  color: var(--tg-text-muted);
  margin-top: 14px;
  padding: 4px 0;
}

/* 骨架屏加载动画 */
.tg-skeleton {
  background: linear-gradient(90deg, var(--tg-bubble-border) 25%, var(--tg-preview-bg) 37%, var(--tg-bubble-border) 63%);
  background-size: 400% 100%;
  animation: tg-skeleton-pulse 1.4s ease infinite;
  border-radius: 4px;
}

@keyframes tg-skeleton-pulse {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.tg-skeleton-card {
  height: 120px;
  margin-bottom: 16px;
  border-radius: var(--tg-radius-bubble);
}

/* 错误态 */
.tg-feed-state {
  text-align: center;
  padding: 40px 20px;
  background: var(--tg-card-bg);
  border-radius: var(--tg-radius-card);
  border: 1px solid var(--tg-bubble-border);
  box-shadow: var(--tg-shadow);
}

.tg-feed-state-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.tg-feed-state-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--tg-text-main);
  margin-bottom: 8px;
}

.tg-feed-state-desc {
  font-size: 0.88rem;
  color: var(--tg-text-sub);
  margin-bottom: 16px;
}

.tg-btn-retry {
  background: var(--tg-primary);
  color: #fff;
  border: none;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.tg-btn-retry:hover {
  opacity: 0.9;
}

/* 移动端自适应 */
@media (max-width: 768px) {
  .tg-feed-wrapper {
    margin: 10px auto;
    padding: 0 10px;
  }
  .tg-channel-header {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  .tg-channel-actions {
    width: 100%;
  }
  .tg-btn-join {
    width: 100%;
    justify-content: center;
  }
  .tg-msg-item {
    gap: 8px;
  }
  .tg-msg-user-avatar {
    width: 32px;
    height: 32px;
  }
  .tg-msg-bubble {
    padding: 12px 14px;
  }
  .tg-msg-photo-img {
    max-height: 450px;
  }
}