/* ── HUD ──────────────────────────────────────────────────────────────────────────────────
   The app's controls as a futuristic heads-up display: looks only, no layout or behaviour
   changes. Loaded last (after main.css, home3d.css, app3d.css). Everything is tinted from the
   colour theme (--brand / --brand2), so all 20 themes keep working.
   - sidebar sections: glass "modules" with a glowing icon tile, a neon edge on the open one
   - week strip: holographic day tiles, glossy 3D Today / Month / Copy Week pills
   - chat: HUD step cards with hexagon numbers, neon section labels, glass action buttons
   - Auto Pilot / TriVault / Quick Actions / metrics: glass cards with gradient rims + LED status */

:root {
  --hud-rim: color-mix(in srgb, var(--brand) 38%, transparent);
  --hud-rim2: color-mix(in srgb, var(--brand2) 26%, transparent);
  --hud-glass: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 55%, rgba(255, 255, 255, 0.03));
}

/* Gradient-rim helper used by most cards: glass fill + a brand gradient border. */
.sidebar-section-hdr, .ap-card, .qa-btn, .tv-hist-row, .tv-cat-chip, .dash-workout-row,
.tw-athlete-chip, .msg-content ol > li, .btn-action, .tv-loadmore-btn, .chat-item.active {
  --hud-fill: var(--surface, #111827);
}

/* ════════ SIDEBAR ════════ */
.sidebar-sections { padding: 4px 0 6px; }
.sidebar-section { border-top: none; }
.sidebar-section-hdr {
  position: relative;
  margin: 3px 8px;
  padding: 7px 10px 7px 8px;
  gap: 9px;
  border-radius: 12px;
  border: 1px solid transparent;
  background:
    var(--hud-glass) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--brand) 22%, transparent), rgba(255, 255, 255, 0.05) 45%, color-mix(in srgb, var(--brand2) 14%, transparent)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 16px -12px rgba(0, 0, 0, 0.9);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
/* light sweep across the module on hover */
.sidebar-section-hdr::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--brand) 16%, transparent) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 130% 0;
  pointer-events: none;
  transition: background-position 0.6s ease;
}
.sidebar-section-hdr:hover {
  background:
    var(--hud-glass) padding-box,
    linear-gradient(color-mix(in srgb, var(--brand) 7%, var(--hud-fill)), color-mix(in srgb, var(--brand) 7%, var(--hud-fill))) padding-box,
    linear-gradient(120deg, color-mix(in srgb, var(--brand) 60%, transparent), rgba(255, 255, 255, 0.08) 50%, color-mix(in srgb, var(--brand2) 40%, transparent)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 0 22px -8px color-mix(in srgb, var(--brand) 70%, transparent);
  transform: translateX(2px);
}
.sidebar-section-hdr:hover::after { background-position: -30% 0; }

/* The open section lights up: brighter rim, a neon bar on the left edge. */
.sidebar-section:has(> .sb-section-body:not(.collapsed)) > .sidebar-section-hdr {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 20%, transparent), color-mix(in srgb, var(--brand) 4%, transparent) 70%) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(120deg, var(--brand), color-mix(in srgb, var(--brand2) 50%, transparent) 60%, color-mix(in srgb, var(--brand) 25%, transparent)) border-box;
  box-shadow: inset 3px 0 0 var(--brand), 0 0 26px -8px color-mix(in srgb, var(--brand) 80%, transparent);
}

/* Drag handle: only shown on hover (still there, still works). */
.sb-drag-handle { opacity: 0.18; font-size: 11px; transition: opacity 0.15s; margin-right: -3px; }
.sidebar-section-hdr:hover .sb-drag-handle { opacity: 0.6; }

.sb-section-title {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.55px;
  gap: 9px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--brand) 35%, transparent);
}
.sidebar-section:has(> .sb-section-body:not(.collapsed)) .sb-section-title {
  color: color-mix(in srgb, var(--brand) 35%, #fff);
}

/* A glowing icon tile in front of every section title (TriVault keeps its own gold coin). */
.sidebar-section[data-sid] .sb-section-title::before {
  content: '';
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 7px;
  background:
    var(--hud-ico) center / 15px 15px no-repeat,
    linear-gradient(145deg, color-mix(in srgb, var(--brand) 32%, transparent), color-mix(in srgb, var(--brand2) 14%, transparent));
  border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--brand) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sidebar-section[data-sid="trivault"] .sb-section-title::before { display: none; }
.sidebar-section[data-sid="quickactions"]  { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.sidebar-section[data-sid="tricoach"]      { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h11l-2 4 2 4H5'/%3E%3C/svg%3E"); }
.sidebar-section[data-sid="recent"]        { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 0 1-9 9H4l2-3'/%3E%3Cpath d='M3 12a9 9 0 0 1 9-9h0a9 9 0 0 1 9 9'/%3E%3Cpath d='M8 10h8M8 14h5'/%3E%3C/svg%3E"); }
.sidebar-section[data-sid="dashpanel"]     { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V10M10 20V4M16 20v-7M22 20H2'/%3E%3C/svg%3E"); }
.sidebar-section[data-sid="friendspanel"]  { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.6a3.5 3.5 0 0 1 0 6.8M18 14.8c1.8.7 3 2.4 3.5 5.2'/%3E%3C/svg%3E"); }
.sidebar-section[data-sid="athletespanel"] { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M10 2h4M12 2v3'/%3E%3C/svg%3E"); }
.sidebar-section[data-sid="autopilot"]     { --hud-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M10 10h4v4h-4zM9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4'/%3E%3C/svg%3E"); }

/* Chevron sits in a small round control. */
.sb-collapse-btn {
  width: 24px; height: 24px; padding: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  background: rgba(255, 255, 255, 0.03);
  color: color-mix(in srgb, var(--brand) 60%, var(--muted));
  position: relative; z-index: 1;
}
.sb-collapse-btn:hover, .sidebar-section-hdr:hover .sb-collapse-btn {
  background: color-mix(in srgb, var(--brand) 18%, transparent);
  color: var(--text);
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--brand) 70%, transparent);
}
.sb-move-btn { position: relative; z-index: 1; }

.sb-section-title .tc-soon-badge {
  text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 10px -2px color-mix(in srgb, var(--brand) 80%, transparent);
}
.sidebar-label-count {
  box-shadow: 0 0 10px -2px color-mix(in srgb, var(--brand) 70%, transparent);
}

/* Group labels inside sections ("FOR YOU", "COACH TOOLS", "RECENT HISTORY"…) with a neon rule. */
.qa-group-lbl, .tv-hist-hdr, .tv-redeem-hdr {
  display: flex; align-items: center; gap: 8px;
  color: color-mix(in srgb, var(--brand) 55%, var(--muted)) !important;
  letter-spacing: 1.6px;
}
.qa-group-lbl::after, .tv-hist-hdr::after, .tv-redeem-hdr::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 45%, transparent), transparent);
}
.ap-group-lbl::after { order: 0; }
.ap-group-lbl .ap-group-chevron { order: 1; }

/* Quick Actions, Auto Pilot and other sidebar cards: glass with a gradient rim + lift. */
.qa-btn, .ap-card {
  border: 1px solid transparent;
  background:
    var(--hud-glass) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 40%, transparent), rgba(255, 255, 255, 0.05) 50%, color-mix(in srgb, var(--brand2) 25%, transparent)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 18px -14px rgba(0, 0, 0, 0.9);
}
.qa-btn:hover, .ap-card:hover {
  background:
    var(--hud-glass) padding-box,
    linear-gradient(color-mix(in srgb, var(--brand) 9%, var(--hud-fill)), color-mix(in srgb, var(--brand) 9%, var(--hud-fill))) padding-box,
    linear-gradient(135deg, var(--brand), rgba(255, 255, 255, 0.1) 50%, var(--brand2)) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 24px -8px color-mix(in srgb, var(--brand) 75%, transparent);
  transform: translateY(-2px);
}
.ap-card-icon, .qa-icon {
  border-radius: 10px;
  background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.22), transparent 55%),
              linear-gradient(145deg, color-mix(in srgb, var(--brand) 34%, transparent), color-mix(in srgb, var(--brand2) 18%, transparent));
  border-color: color-mix(in srgb, var(--brand) 50%, transparent);
  box-shadow: 0 0 14px -3px color-mix(in srgb, var(--brand) 60%, transparent), inset 0 -2px 6px rgba(0, 0, 0, 0.25);
}

/* Auto Pilot status: an LED dot in front of ACTIVE / OFF / COMING SOON; ACTIVE pulses. */
.ap-card-status { display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent; padding: 3px 7px 3px 6px; }
.ap-card-status::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0;
}
.ap-card-status.on {
  border-color: color-mix(in srgb, var(--brand2) 45%, transparent);
  background: color-mix(in srgb, var(--brand2) 14%, transparent);
  color: color-mix(in srgb, var(--brand2) 55%, #fff);
}
.ap-card-status.on::before { box-shadow: 0 0 8px 1px currentColor; animation: hudLed 1.8s ease-in-out infinite; }
.ap-card-status.off { border-color: rgba(255, 255, 255, 0.08); }
.ap-card-status.off::before { opacity: 0.45; }
.ap-card-status.soon { border-color: rgba(251, 191, 36, 0.35); }
@keyframes hudLed { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Recent chats */
.chat-item { border: 1px solid transparent; }
.chat-item:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.chat-item.active { border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.chat-item-icon { opacity: 0.75; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--brand) 60%, transparent)); }

/* TriVault */
.tv-tabs {
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent) !important;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
}
.tv-tab.active { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 16px -3px color-mix(in srgb, var(--brand) 80%, transparent); color: #0a0a12; }
.tv-balance-ring { animation: hudRingGlow 3.2s ease-in-out infinite; }
@keyframes hudRingGlow {
  0%, 100% { box-shadow: 0 0 30px -6px rgba(251, 191, 36, 0.55), inset 0 0 24px -10px rgba(251, 191, 36, 0.4); }
  50%      { box-shadow: 0 0 44px -4px rgba(251, 191, 36, 0.75), inset 0 0 30px -8px rgba(251, 191, 36, 0.55); }
}
.tv-cat-chip {
  border-radius: 12px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--tvc, #818cf8) 22%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  border-color: color-mix(in srgb, var(--tvc, #818cf8) 45%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 14px -8px color-mix(in srgb, var(--tvc, #818cf8) 70%, transparent);
  transition: transform 0.15s, box-shadow 0.15s;
}
.tv-cat-chip:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 18px -4px var(--tvc, #818cf8); }
.tv-cat-val { text-shadow: 0 0 10px color-mix(in srgb, var(--tvc, #818cf8) 70%, transparent); }
.tv-hist-row {
  overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tvc, #818cf8) 10%, transparent), rgba(255, 255, 255, 0.02) 60%);
  border-color: color-mix(in srgb, var(--tvc, #818cf8) 22%, rgba(255, 255, 255, 0.05));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: transform 0.15s, border-color 0.15s;
}
.tv-hist-row:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--tvc, #818cf8) 50%, transparent); }
.tv-hist-plus {
  padding: 2px 7px; border-radius: 20px;
  background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.35);
}
.tv-loadmore-btn {
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent) padding-box,
    linear-gradient(color-mix(in srgb, var(--brand) 10%, var(--hud-fill)), color-mix(in srgb, var(--brand) 10%, var(--hud-fill))) padding-box,
    linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand2) 60%, transparent)) border-box;
  color: color-mix(in srgb, var(--brand) 55%, #fff);
  letter-spacing: 0.6px;
  box-shadow: 0 0 16px -6px color-mix(in srgb, var(--brand) 70%, transparent);
  transition: box-shadow 0.15s, transform 0.1s;
}
.tv-loadmore-btn:hover:not(:disabled) { box-shadow: 0 0 22px -4px var(--brand); }
.tv-loadmore-btn:active:not(:disabled) { transform: translateY(1px); }

/* Workout Metrics / Friends / Athletes */
.dash-range-chip, .dash-filter-chip, .friend-chip, .dash-tab-btn { transition: box-shadow 0.15s, background 0.15s, color 0.15s, border-color 0.15s; }
.dash-range-chip.active, .dash-filter-chip.active, .friend-chip.active {
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--brand) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.dash-workout-row {
  border: 1px solid transparent !important;
  background:
    var(--hud-glass) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, transparent), rgba(255, 255, 255, 0.04) 55%, color-mix(in srgb, var(--brand2) 20%, transparent)) border-box !important;
  transition: transform 0.15s, box-shadow 0.15s;
}
.dash-workout-row:hover { transform: translateY(-1px); box-shadow: 0 0 18px -8px var(--brand); }
.dash-vol-item {
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%), rgba(255, 255, 255, 0.02);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
}
.dash-graph-bar-click { transition: filter 0.15s, transform 0.15s; transform-origin: bottom; }
.dash-graph-bar-click:hover { filter: brightness(1.3) drop-shadow(0 0 6px currentColor); transform: scaleY(1.04); }

/* Footer */
.sidebar-footer { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 45%, transparent), transparent) 1; }
.model-badge {
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand2) 18%, transparent), color-mix(in srgb, var(--brand) 10%, transparent));
  box-shadow: 0 0 12px -4px color-mix(in srgb, var(--brand2) 80%, transparent);
}

/* Logo + New button */
.logo { text-shadow: 0 0 18px color-mix(in srgb, var(--brand) 45%, transparent); }

/* ════════ WEEK STRIP ════════ */
.tw-strip {
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--brand) 50%, transparent), color-mix(in srgb, var(--brand2) 40%, transparent), transparent) 1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 5%, transparent), transparent);
}
.tw-strip-label-text { text-shadow: 0 0 10px color-mix(in srgb, var(--brand) 70%, transparent); }

/* Today / Month / Copy Week: glossy 3D pills with a light sweep. */
.tw-nav-btn.tw-nav-pill {
  position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 70%, #fff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 52%),
    linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.22),
    0 3px 0 -1px color-mix(in srgb, var(--brand2) 45%, #05070f),
    0 0 18px -4px color-mix(in srgb, var(--brand) 80%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  letter-spacing: 0.3px;
}
.tw-nav-btn.tw-nav-pill::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
  pointer-events: none;
}
.tw-nav-btn.tw-nav-pill:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 52%),
    linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow:
    inset 0 -3px 6px rgba(0, 0, 0, 0.22),
    0 3px 0 -1px color-mix(in srgb, var(--brand2) 45%, #05070f),
    0 0 26px -2px color-mix(in srgb, var(--brand) 90%, transparent);
}
.tw-nav-btn.tw-nav-pill:hover::after { left: 120%; }
.tw-nav-btn.tw-nav-pill:active { transform: translateY(2px); box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.25), 0 1px 0 -1px color-mix(in srgb, var(--brand2) 45%, #05070f), 0 0 12px -4px var(--brand); }
.tw-nav-btn:not(.tw-nav-pill) {
  width: 24px; height: 24px; border-radius: 50%;
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: color-mix(in srgb, var(--brand) 55%, #fff);
}
.tw-nav-btn:not(.tw-nav-pill):hover { box-shadow: 0 0 12px -3px var(--brand); }

/* Athlete chips */
.tw-athlete-chip {
  border: 1px solid transparent;
  background:
    var(--hud-glass) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 30%, transparent), rgba(255, 255, 255, 0.06)) border-box;
}
.tw-athlete-chip:hover {
  background:
    var(--hud-glass) padding-box,
    linear-gradient(color-mix(in srgb, var(--brand) 10%, var(--hud-fill)), color-mix(in srgb, var(--brand) 10%, var(--hud-fill))) padding-box,
    linear-gradient(135deg, var(--brand), rgba(255, 255, 255, 0.1)) border-box;
}
.tw-athlete-chip.selected {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--brand) 26%, transparent), color-mix(in srgb, var(--brand2) 10%, transparent)) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand2)) border-box;
  box-shadow: 0 0 16px -3px color-mix(in srgb, var(--brand) 75%, transparent);
}
.tw-athlete-avatar { border-color: color-mix(in srgb, var(--brand) 35%, transparent); color: color-mix(in srgb, var(--brand) 40%, var(--muted)); }
.tw-athlete-avatar-me { box-shadow: 0 0 10px -1px var(--brand); }

/* Day tiles: holographic panels; today pulses, the selected day gets corner brackets. */
.tw-day-chip {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s, background 0.15s, transform 0.12s, box-shadow 0.15s;
}
.tw-day-chip:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), rgba(255, 255, 255, 0.01));
  border-color: color-mix(in srgb, var(--brand) 35%, transparent);
  transform: translateY(-2px);
}
.tw-day-chip.today {
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  animation: hudToday 2.8s ease-in-out infinite;
}
@keyframes hudToday {
  0%, 100% { box-shadow: 0 0 10px -5px var(--brand), inset 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 20px -4px var(--brand), inset 0 0 12px -6px var(--brand); }
}
.tw-day-chip.selected {
  border-color: var(--brand);
  background:
    radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--brand) 28%, transparent), transparent 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--brand2) 5%, transparent));
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--brand) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.tw-day-chip.selected::before, .tw-day-chip.selected::after {
  content: ''; position: absolute; width: 9px; height: 9px; pointer-events: none;
  border: 2px solid color-mix(in srgb, var(--brand) 60%, #fff);
  filter: drop-shadow(0 0 3px var(--brand));
}
.tw-day-chip.selected::before { top: -2px; left: -2px; border-right: none; border-bottom: none; border-radius: 4px 0 0 0; }
.tw-day-chip.selected::after { bottom: -2px; right: -2px; border-left: none; border-top: none; border-radius: 0 0 4px 0; }
.tw-day-chip.selected .tw-day-chip-num { text-shadow: 0 0 10px var(--brand); }
.tw-done-row, .tw-detail { transition: box-shadow 0.15s, border-color 0.15s; }
.tw-done-row:hover { box-shadow: 0 0 18px -8px #22c55e; }

/* ════════ CHAT ════════ */
/* Numbered steps become HUD cards with a hexagon index, tinted by the colour theme. */
.msg-content ol > li {
  border: 1px solid transparent;
  border-left: none;
  border-radius: 12px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 11%, transparent), rgba(255, 255, 255, 0.015) 70%) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(110deg, color-mix(in srgb, var(--brand) 55%, transparent), rgba(255, 255, 255, 0.05) 45%, color-mix(in srgb, var(--brand2) 25%, transparent)) border-box;
  box-shadow: inset 3px 0 0 var(--brand), 0 8px 18px -14px rgba(0, 0, 0, 0.9);
  transition: transform 0.15s, box-shadow 0.2s;
}
.msg-content ol > li:hover {
  border-color: transparent;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand) 18%, transparent), rgba(255, 255, 255, 0.02) 70%) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(110deg, var(--brand), rgba(255, 255, 255, 0.08) 45%, var(--brand2)) border-box;
  box-shadow: inset 3px 0 0 var(--brand), 0 0 22px -8px color-mix(in srgb, var(--brand) 75%, transparent);
  transform: translateX(3px);
}
.msg-content ol > li::before {
  width: 25px; height: 27px;
  border-radius: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 70%, #fff), var(--brand) 45%, var(--brand2));
  color: #07090f;
  font-weight: 900;
  box-shadow: none;
  filter: drop-shadow(0 0 6px var(--brand));
}
.msg-content h2 {
  border-left-color: var(--brand);
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand) 16%, transparent), transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--brand) 12%, transparent);
}
.msg-content h3 {
  display: flex; align-items: center; gap: 8px;
  color: color-mix(in srgb, var(--brand2) 60%, #fff);
  border-bottom: none;
  letter-spacing: 1.6px;
  text-shadow: 0 0 12px color-mix(in srgb, var(--brand2) 60%, transparent);
}
.msg-content h3::before {
  content: ''; width: 7px; height: 7px; transform: rotate(45deg); flex-shrink: 0;
  background: var(--brand2); box-shadow: 0 0 8px var(--brand2);
}
.msg-content h3::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--brand2) 55%, transparent), transparent);
}
.msg-content h1 { background: linear-gradient(135deg, #f8fafc 0%, color-mix(in srgb, var(--brand) 60%, #fff) 80%); -webkit-background-clip: text; background-clip: text; }

/* Try Again / Copy / Speak / Branch: glass pills that glow on hover. */
.btn-action {
  border-radius: 100px;
  padding: 5px 12px;
  border: 1px solid transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01)) padding-box,
    linear-gradient(var(--hud-fill), var(--hud-fill)) padding-box,
    linear-gradient(135deg, color-mix(in srgb, var(--brand) 35%, transparent), rgba(255, 255, 255, 0.06)) border-box;
  transition: color 0.12s, box-shadow 0.15s, transform 0.1s, background 0.15s;
}
.btn-action:hover {
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)) padding-box,
    linear-gradient(color-mix(in srgb, var(--brand) 14%, var(--hud-fill)), color-mix(in srgb, var(--brand) 14%, var(--hud-fill))) padding-box,
    linear-gradient(135deg, var(--brand), var(--brand2)) border-box;
  box-shadow: 0 0 16px -5px var(--brand);
}
.btn-action:hover svg { filter: drop-shadow(0 0 4px var(--brand)); }
.btn-action:active { transform: translateY(1px); }

/* Secondary buttons in cards (outline / ghost styles) get the same glass treatment. */
.action-btn:not(.action-btn-primary):not(.action-btn-success), .ap-btn-ghost, .btn-settings-cancel, .mv-cancel-btn, .cal-nav-btn, .dash-nav-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px color-mix(in srgb, var(--brand) 18%, transparent);
  transition: box-shadow 0.15s, transform 0.1s, background 0.15s;
}
.action-btn:not(.action-btn-primary):not(.action-btn-success):hover, .ap-btn-ghost:hover, .btn-settings-cancel:hover, .mv-cancel-btn:hover, .cal-nav-btn:hover, .dash-nav-btn:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 0 1px color-mix(in srgb, var(--brand) 45%, transparent), 0 0 16px -6px var(--brand);
}
.action-btn-success { box-shadow: 0 0 18px -6px #34d399, inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.ap-btn-primary, .mv-confirm-btn, .sw-add-btn {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 -1px color-mix(in srgb, var(--brand) 35%, #05070f), 0 8px 20px -8px color-mix(in srgb, var(--brand) 70%, transparent);
}

/* Top bar controls */
.btn-theme {
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.15s, background 0.15s, color 0.15s;
}
.btn-theme:hover { box-shadow: 0 0 14px -4px var(--brand), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

/* Settings tabs, zone tabs */
.zones-tab.active, .settings-tab.active, .wc-tab.active {
  box-shadow: 0 0 14px -4px color-mix(in srgb, var(--brand) 80%, transparent);
}

/* ════════ LIGHT THEME: keep it clean ════════ */
body.light .sidebar-section-hdr, body.light .qa-btn, body.light .ap-card, body.light .btn-action,
body.light .tw-athlete-chip, body.light .msg-content ol > li, body.light .dash-workout-row {
  --hud-fill: #ffffff;
  --hud-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
}
body.light .sb-section-title { text-shadow: none; }
body.light .sidebar-section:has(> .sb-section-body:not(.collapsed)) .sb-section-title { color: color-mix(in srgb, var(--brand2) 70%, #000); }
body.light .msg-content h3 { color: color-mix(in srgb, var(--brand2) 75%, #000); text-shadow: none; }
body.light .tw-day-chip { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); }

@media (prefers-reduced-motion: reduce) {
  .tw-day-chip.today, .tv-balance-ring, .ap-card-status.on::before { animation: none; }
  .sidebar-section-hdr:hover, .qa-btn:hover, .ap-card:hover, .msg-content ol > li:hover, .tw-day-chip:hover { transform: none; }
  .tw-nav-btn.tw-nav-pill::after, .sidebar-section-hdr::after { display: none; }
}