/* ============================================================
   首页「喊单动态」竖形长条 —— 显示 GMGN / fomo 的喊单推文
   只使用 assets/style.css 已有的变量与字体（--font / --display）
   ============================================================ */

/* Dashboard 主体 + 右侧竖条 */
.dash-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 306px;
  gap: 18px;
  align-items: stretch;
}

.co-rail {
  display: flex; flex-direction: column;
  padding: 20px 20px 16px;
  border: 1px solid rgba(255, 47, 208, .42);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(28, 22, 68, .88), rgba(16, 12, 44, .72));
  box-shadow:
    0 0 26px rgba(168, 85, 247, .2),
    inset 0 0 0 1px rgba(34, 211, 238, .1),
    inset 0 0 40px rgba(168, 85, 247, .09);
}

.co-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
.co-rail-live { margin-left: auto; font-size: 10.5px; letter-spacing: .04em; opacity: .85; }
.co-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
  animation: co-pulse 2s ease-in-out infinite;
}
@keyframes co-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* 一条喊单 = 一条推文 */
.co-rail-body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(168, 120, 255, .35) transparent;
}
.co-post {
  display: flex; flex-direction: column; gap: 8px;
  flex: 0 0 auto;
  padding: 15px 0; border-bottom: 1px dashed rgba(168, 120, 255, .14);
}
.co-post:last-child { border-bottom: 0; }

.co-post-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.co-plat {
  width: 22px; height: 22px; border-radius: 7px; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  border: 1px solid var(--line-soft); background: rgba(168, 120, 255, .1);
}
.co-plat.gmgn { color: #ffe9c9; background: rgba(255, 138, 31, .14); border-color: rgba(255, 138, 31, .4); }
.co-plat.fomo { color: #ffd9f6; background: rgba(255, 47, 208, .14); border-color: rgba(255, 47, 208, .4); }
.co-handle {
  font-weight: 700; font-size: 13.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-when { margin-left: auto; font-size: 10.5px; color: var(--muted); white-space: nowrap; }

.co-text {
  margin: 0; font-size: 13.5px; line-height: 1.62; color: #cdc4ee;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

.co-rail-foot {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 10.5px; line-height: 1.6; color: var(--muted);
}
.co-empty { padding: 24px 0; color: var(--muted); font-size: 13px; }

/* 窄屏：竖条落回卡片下面，推文两列排 */
@media (max-width: 1080px) {
  .dash-row { grid-template-columns: 1fr; }
  .co-rail { border-radius: 20px; padding: 18px 20px; }
  .co-rail-body { flex-direction: row; flex-wrap: wrap; gap: 0 22px; overflow: visible; }
  .co-post { flex: 1 1 260px; }
}

@media (max-width: 620px) {
  .co-post { flex: 1 1 100%; }
}