/* Tech6Sense notification bell (assets/js/notify.js). Uses the host site's colour tokens when present
   (main-site: --bg-card/--text-primary…, play-site: --surface/--text…), so it follows light/dark themes.
   The SAME file lives in main-site and play-site — keep the copies identical. */
.t6n, .t6n-panel {
  --n-bg: var(--bg-card, var(--surface, #fff));
  --n-bg2: var(--bg-secondary, var(--surface2, #f1f5f9));
  --n-text: var(--text-primary, var(--text, #0f172a));
  --n-sub: var(--text-secondary, var(--muted, #475569));
  --n-faint: var(--text-muted, var(--faint, #94a3b8));
  --n-line: var(--border, var(--line, rgba(15, 23, 42, .08)));
  --n-acc: var(--accent, var(--primary, #0d6e56));
  --n-acc-soft: var(--accent-light, var(--primary-soft, #d1fae5));
  --n-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 48px -18px rgba(15, 23, 42, .32);
}
.t6n { position: relative; display: inline-flex; flex: none; }
.t6n svg, .t6n-panel svg, .t6n-ask svg, .t6n-toast svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* bell button */
.t6n-btn {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--n-bg2); border: 1px solid var(--n-line); color: var(--n-sub); cursor: pointer; padding: 0;
  transition: color .15s, border-color .15s, background .15s;
}
.t6n-btn:hover, .t6n.is-open .t6n-btn { color: var(--n-acc); border-color: var(--n-acc); background: var(--n-acc-soft); }
.t6n-btn:focus-visible { outline: 2px solid var(--n-acc); outline-offset: 2px; }
.t6n-btn svg { width: 17px; height: 17px; }
.t6n-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e11d48; color: #fff; font: 700 10.5px/18px system-ui, -apple-system, sans-serif; text-align: center;
  box-shadow: 0 0 0 2px var(--n-bg); pointer-events: none;
}
.t6n-badge[hidden] { display: none; }
.t6n.is-new .t6n-btn svg { animation: t6n-ring .9s ease; transform-origin: 50% 10%; }
@keyframes t6n-ring { 0%,100% { transform: rotate(0) } 15% { transform: rotate(14deg) } 30% { transform: rotate(-12deg) } 45% { transform: rotate(8deg) } 60% { transform: rotate(-5deg) } 75% { transform: rotate(2deg) } }

/* panel */
.t6n-panel {
  position: absolute; top: calc(100% + 10px); right: -8px; z-index: 1200; width: 380px; max-width: calc(100vw - 16px);
  background: var(--n-bg); color: var(--n-text); border: 1px solid var(--n-line); border-radius: 16px; box-shadow: var(--n-shadow);
  display: flex; flex-direction: column; max-height: min(560px, calc(100vh - 90px)); overflow: hidden;
  font-family: inherit; text-align: left; animation: t6n-in .16s ease-out;
}
.t6n-panel[hidden] { display: none; }
@keyframes t6n-in { from { opacity: 0; transform: translateY(-6px) } to { opacity: 1; transform: none } }
.t6n-head { display: flex; align-items: center; gap: 6px; padding: 12px 12px 10px 16px; border-bottom: 1px solid var(--n-line); }
.t6n-title { flex: 1; font-size: .95rem; font-weight: 700; letter-spacing: -.01em; color: var(--n-text); }
.t6n-icon {
  width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--n-sub); display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
.t6n-icon:hover { background: var(--n-bg2); color: var(--n-text); }
.t6n-icon[hidden] { display: none; }
.t6n-icon svg { width: 16px; height: 16px; }
.t6n-back { margin-left: -6px; }
.t6n-x { display: none; }

.t6n-cta { display: flex; align-items: center; gap: 10px; margin: 10px 12px 2px; padding: 9px 10px 9px 12px; border-radius: 12px; background: var(--n-acc-soft); color: var(--n-text); font-size: .8rem; font-weight: 600; }
.t6n-cta[hidden] { display: none; }
.t6n-cta > svg { color: var(--n-acc); }
.t6n-cta span { flex: 1; }
.t6n-pill {
  border: 0; border-radius: 999px; background: var(--n-acc); color: #fff; font: inherit; font-size: .76rem; font-weight: 700;
  padding: 6px 13px; cursor: pointer; text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center;
}
.t6n-pill:hover { filter: brightness(1.08); color: #fff; text-decoration: none; }

.t6n-body { overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.t6n-body[hidden] { display: none; }
.t6n-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 10px; border-radius: 12px; color: var(--n-text); text-decoration: none; position: relative;
  transition: background .12s;
}
.t6n-item:hover { background: var(--n-bg2); text-decoration: none; color: var(--n-text); }
.t6n-item.is-unread { background: color-mix(in srgb, var(--n-acc-soft) 55%, transparent); }
.t6n-item.is-unread:hover { background: var(--n-acc-soft); }
.t6n-ico { width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.t6n-ico svg { width: 17px; height: 17px; }
.t6n-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.t6n-txt b { font-size: .84rem; font-weight: 650; line-height: 1.3; color: var(--n-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t6n-txt span { font-size: .77rem; line-height: 1.35; color: var(--n-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t6n-txt em { font-style: normal; font-size: .7rem; font-weight: 600; color: var(--n-faint); margin-top: 1px; }
.t6n-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--n-acc); flex: none; margin-top: 6px; }
.t6n-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 42px 16px; color: var(--n-faint); font-size: .82rem; font-weight: 600; }
.t6n-empty svg { width: 30px; height: 30px; stroke-width: 1.5; }
.t6n-more { display: flex; justify-content: center; padding: 12px; }
.t6n-more[hidden] { display: none; }
.t6n-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--n-line); border-top-color: var(--n-acc); animation: t6n-spin .7s linear infinite; }
@keyframes t6n-spin { to { transform: rotate(360deg) } }

/* kind colours */
.t6n-k-course { background: #dcfce7; color: #15803d; }
.t6n-k-update { background: #ede9fe; color: #6d28d9; }
.t6n-k-blog { background: #dbeafe; color: #1d4ed8; }
.t6n-k-job { background: #fef3c7; color: #b45309; }
.t6n-k-tech { background: #cffafe; color: #0e7490; }
.t6n-k-announcement { background: #ffe4e6; color: #be123c; }
.t6n-k-quiz { background: #f3e8ff; color: #7e22ce; }
.t6n-k-play { background: #fef9c3; color: #a16207; }
.t6n-k-general, .t6n-k-set { background: var(--n-bg2); color: var(--n-sub); }

/* settings */
.t6n-settings { padding: 8px 10px 12px; }
.t6n-settings[hidden] { display: none; }
.t6n-row { display: flex; align-items: center; gap: 11px; padding: 10px 6px; border-bottom: 1px solid var(--n-line); }
.t6n-row:last-child { border-bottom: 0; }
.t6n-rtxt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t6n-rtxt b { font-size: .84rem; font-weight: 650; color: var(--n-text); }
.t6n-rtxt small { font-size: .72rem; color: var(--n-faint); }
.t6n-rtxt small a { color: var(--n-acc); font-weight: 600; }
.t6n-chip { font-size: .7rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--n-bg2); color: var(--n-sub); white-space: nowrap; }
.t6n-chip--off { background: #ffe4e6; color: #be123c; }
.t6n-switch {
  width: 40px; height: 24px; border-radius: 12px; border: 0; background: var(--n-line); position: relative; cursor: pointer; flex: none; padding: 0;
  transition: background .15s;
}
.t6n-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .15s; }
.t6n-switch.is-on { background: var(--n-acc); }
.t6n-switch.is-on i { transform: translateX(16px); }
.t6n-switch:disabled { opacity: .5; cursor: default; }

/* invitation card + toast */
.t6n-ask {
  position: fixed; left: 16px; bottom: 16px; z-index: 1300; width: 340px; max-width: calc(100vw - 32px);
  display: flex; align-items: center; gap: 11px; padding: 12px 10px 12px 12px; border-radius: 16px;
  background: var(--bg-card, var(--surface, #fff)); color: var(--text-primary, var(--text, #0f172a));
  border: 1px solid var(--border, var(--line, rgba(15, 23, 42, .1))); box-shadow: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 48px -18px rgba(15, 23, 42, .32);
  opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; font-family: inherit;
}
.t6n-ask.is-in { opacity: 1; transform: none; }
.t6n-ask .t6n-ico { width: 38px; height: 38px; }
.t6n-ask-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.t6n-ask-txt b { font-size: .86rem; font-weight: 700; }
.t6n-ask-txt span { font-size: .75rem; color: var(--text-secondary, var(--muted, #475569)); }
.t6n-ask .t6n-pill { background: var(--accent, var(--primary, #0d6e56)); }
.t6n-ask .t6n-icon { color: var(--text-muted, var(--faint, #94a3b8)); }
.t6n-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 1400; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px; background: #0f172a; color: #fff; font-size: .84rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: t6n-in .16s ease-out;
}
.t6n-toast svg { color: #34d399; }

@media (max-width: 560px) {
  .t6n-btn { width: 34px; height: 34px; }
  /* moved to <body> while open (notify.js), so no header stacking context can cover it */
  .t6n-panel { position: fixed; z-index: 2147483000; left: 8px; right: 8px; width: auto; max-width: none; top: 64px; max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
  .t6n-x { display: inline-flex; }
  .t6n-ask { left: 8px; right: 8px; bottom: calc(72px + env(safe-area-inset-bottom, 0px)); width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .t6n-panel, .t6n-toast { animation: none; }
  .t6n.is-new .t6n-btn svg { animation: none; }
}
/* main-site dark theme: softer icon tiles */
[data-theme="dark"] .t6n-k-course { background: rgba(34, 197, 94, .16); color: #4ade80; }
[data-theme="dark"] .t6n-k-update { background: rgba(139, 92, 246, .18); color: #a78bfa; }
[data-theme="dark"] .t6n-k-blog { background: rgba(59, 130, 246, .18); color: #60a5fa; }
[data-theme="dark"] .t6n-k-job { background: rgba(245, 158, 11, .16); color: #fbbf24; }
[data-theme="dark"] .t6n-k-tech { background: rgba(6, 182, 212, .16); color: #22d3ee; }
[data-theme="dark"] .t6n-k-announcement { background: rgba(244, 63, 94, .16); color: #fb7185; }
[data-theme="dark"] .t6n-k-quiz { background: rgba(168, 85, 247, .18); color: #c084fc; }
[data-theme="dark"] .t6n-k-play { background: rgba(234, 179, 8, .16); color: #facc15; }
[data-theme="dark"] .t6n-chip--off { background: rgba(244, 63, 94, .16); color: #fb7185; }