/*
 * tl-avatar-frame.css — [2026-05-30 / Claude #916] 會員 T1–T5 等級頭像框（共用視覺系統）
 * 用法：搭配 tl-avatar-frame.js 的 tlAvatarFrame.html()/render()。
 * 規則：只用於「個人/會員」頭像；公司 logo / 組織牆不可套。深淺底色皆可用（白色內圈分隔）。
 * tier 標記用文字 T1–T5（不只靠顏色），符合 a11y。
 */
.tl-avatar-frame {
  --tlaf-size: 48px;
  --tlaf-ring: #8a93a3;          /* 預設 T1 */
  --tlaf-ring2: #c2cad6;
  --tlaf-glow: transparent;
  --tlaf-glowsize: 0px;
  --tlaf-pad: 3px;
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  width: var(--tlaf-size);
  height: var(--tlaf-size);
  padding: var(--tlaf-pad);
  box-sizing: border-box;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tlaf-ring) 0%, var(--tlaf-ring2) 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 0 var(--tlaf-glowsize) var(--tlaf-glow);
  line-height: 0;
  vertical-align: middle;
}
.tl-avatar-frame__img,
.tl-avatar-frame__fallback {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  border: 2px solid #ffffff;     /* 白色內圈：深/淺底皆清楚分隔 ring 與照片 */
  display: block;
}
.tl-avatar-frame__img {
  object-fit: cover;
  background: #1e293b;           /* 圖透明/載入前的底 */
}
.tl-avatar-frame__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #334155, #1e293b);
  color: #e2e8f0;
  font-weight: 800;
  font-size: calc(var(--tlaf-size) * 0.4);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  user-select: none;
}
/* 等級文字標記（右下角 pill）—— 不只靠顏色 */
.tl-avatar-frame__tier {
  position: absolute;
  right: -3px;
  bottom: -3px;
  min-width: calc(var(--tlaf-size) * 0.34);
  height: calc(var(--tlaf-size) * 0.34);
  padding: 0 4px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: calc(var(--tlaf-size) * 0.2);
  font-weight: 900;
  line-height: calc(var(--tlaf-size) * 0.34);
  letter-spacing: -0.3px;
  text-align: center;
  color: #0b1220;
  background: var(--tlaf-ring2);
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* T1 — 克制銀灰、無 glow（基本身分） */
.tl-avatar-frame--t1 { --tlaf-ring: #8a93a3; --tlaf-ring2: #c2cad6; --tlaf-glow: transparent; --tlaf-glowsize: 0px; }
/* T2 — 驗證藍（藍勾勾） */
.tl-avatar-frame--t2 { --tlaf-ring: #1d9bf0; --tlaf-ring2: #7cc6fb; --tlaf-glow: rgba(29,155,240,0.35); --tlaf-glowsize: 6px; }
/* T3 — 信任綠（防護） */
.tl-avatar-frame--t3 { --tlaf-ring: #10b981; --tlaf-ring2: #6ee7b7; --tlaf-glow: rgba(16,185,129,0.30); --tlaf-glowsize: 6px; }
/* T4 — 紫/靛企業尊榮（雙環感、較強） */
.tl-avatar-frame--t4 { --tlaf-ring: #7c3aed; --tlaf-ring2: #c4b5fd; --tlaf-glow: rgba(124,58,237,0.40); --tlaf-glowsize: 8px; --tlaf-pad: 4px; }
/* T5 — 金色頂級（精緻 highlight，不浮誇） */
.tl-avatar-frame--t5 { --tlaf-ring: #d4af37; --tlaf-ring2: #f7e08a; --tlaf-glow: rgba(212,175,55,0.45); --tlaf-glowsize: 10px; --tlaf-pad: 4px; }

@media (prefers-reduced-motion: reduce) {
  .tl-avatar-frame { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06); }
}