/* ===== Echo Timeline widget ===== */
.echo-tl {
  --eco-bg:      #eef2f4;   /* タイムライン背景 */
  --eco-me:      #b7e4a0;   /* 自分の吹き出し（やわらかい緑） */
  --eco-ecogi:   #ffffff;   /* エコギの吹き出し（白） */
  --eco-ecogi-bd:#dfe6ea;
  --eco-text:    #2b2f33;
  --eco-sub:     #8a949b;
  --eco-av-me:   #6fb98f;
  --eco-av-eco:  #e6b34d;

  box-sizing: border-box;
  max-width: 680px;
  margin: 1.6em auto;
  padding: 16px;
  background: var(--eco-bg);
  border-radius: 16px;
  max-height: 560px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--eco-text);
}
.echo-tl * { box-sizing: border-box; }

.echo-tl__loading,
.echo-tl__empty {
  text-align: center;
  color: var(--eco-sub);
  padding: 24px 8px;
  font-size: 14px;
}

/* 1行（アバター＋吹き出し） */
.echo-tl__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 14px 0;
}
.echo-tl__row--me {
  flex-direction: row-reverse;
}

/* アバター */
.echo-tl__avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  user-select: none;
}
.echo-tl__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.echo-tl__avatar--me    { background: var(--eco-av-me); }
.echo-tl__avatar--ecogi { background: var(--eco-av-eco); }

/* 吹き出しのまとまり */
.echo-tl__bubblewrap {
  display: flex;
  flex-direction: column;
  max-width: 76%;
}
.echo-tl__row--me .echo-tl__bubblewrap { align-items: flex-end; }

.echo-tl__name {
  font-size: 11px;
  color: var(--eco-sub);
  margin: 0 6px 3px;
}

/* 吹き出し本体 */
.echo-tl__bubble {
  position: relative;
  padding: 9px 13px;
  border-radius: 16px;
  word-break: break-word;
  white-space: pre-wrap;
}
.echo-tl__row--ecogi .echo-tl__bubble {
  background: var(--eco-ecogi);
  border: 1px solid var(--eco-ecogi-bd);
  border-bottom-left-radius: 5px;
}
.echo-tl__row--me .echo-tl__bubble {
  background: var(--eco-me);
  border-bottom-right-radius: 5px;
}

.echo-tl__time {
  font-size: 10px;
  color: var(--eco-sub);
  margin: 3px 6px 0;
}

/* スマホ */
@media (max-width: 600px) {
  .echo-tl { padding: 12px; border-radius: 12px; }
  .echo-tl__bubblewrap { max-width: 80%; }
  .echo-tl__avatar { width: 32px; height: 32px; font-size: 14px; }
}

/* 動きを抑える設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .echo-tl { scroll-behavior: auto; }
}

/* ===== echo_stats 案3：1行ミニマル＋パルス ===== */
.echo-stats-host{
  text-align:center;          /* ← これが中央寄せの肝 */
  margin:10px 0 4px;
}
.echo-stats3{
  display:inline-flex;
  align-items:baseline;
  gap:12px;
  color:#5c6066;
  font-size:13px;
  font-weight:600;
}
.echo-stats3__seg{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
}
.echo-stats3__num{
  font-size:22px;
  font-weight:800;
  color:#2F6E6C;
  line-height:1;
  letter-spacing:.02em;
}
.echo-stats3__mid{
  color:#cdd3cf;
  font-weight:400;
}
.echo-stats3__dot{
  width:7px; height:7px;
  border-radius:50%;
  background:#3E8C8A;
  align-self:center;
  animation:echo-stats-pulse 2.4s infinite;
}
@keyframes echo-stats-pulse{
  0%  { box-shadow:0 0 0 0 rgba(62,140,138,.45); }
  70% { box-shadow:0 0 0 7px rgba(62,140,138,0); }
  100%{ box-shadow:0 0 0 0 rgba(62,140,138,0); }
}
.echo-stats3--empty{ font-size:13px; color:#8a949b; }
@media (prefers-reduced-motion:reduce){
  .echo-stats3__dot{ animation:none; }
}