/* =========================================================
   engage-ui.css — Saku no Kaiwa
   Visual layer for: reactions, notification center, daily prompt,
   expanded profile. Uses ONLY the site's tokens (site-tokens.css).
   Prefix: eg-   (streak.css owns sk-)
   Load AFTER corrections.css, profile-extras.css and site-ui.css.
   ========================================================= */

:root { --eg-ease: cubic-bezier(.2, .9, .3, 1.2); }

/* ---------- shared petal burst (fixed-position, JS-spawned) ---------- */
.eg-petal {
  position: fixed; z-index: var(--z-toast-front); pointer-events: none;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  background: linear-gradient(135deg, var(--petal), var(--accent-deep));
  border-radius: 100% 0 100% 0;
  animation: eg-burst .9s cubic-bezier(.15, .8, .3, 1) forwards;
}
@keyframes eg-burst {
  0%   { transform: translate(0, 0) rotate(0) scale(0); opacity: 1; }
  15%  { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .3)) rotate(calc(var(--rot) * .3)) scale(var(--s)); }
  100% { transform: translate(var(--dx), calc(var(--dy) + 46px)) rotate(var(--rot)) scale(calc(var(--s) * .6)); opacity: 0; }
}

/* =========================================================
   1. REACTIONS  (button lives in .message-actions, pills under .bubble)
   ========================================================= */
.eg-add {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 26px; margin: 0; padding: 0;
  color: var(--ink-soft); background: none; border: 1px solid transparent;
  border-radius: var(--radius-pill); cursor: pointer;
  transition: color .2s, border-color .2s, background .2s, transform .2s var(--eg-ease);
}
.eg-add:hover, .eg-add[aria-expanded="true"] {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent); transform: scale(1.12);
}
.eg-add:active { transform: scale(.92); }
.eg-add:focus-visible, .eg-pill:focus-visible, .eg-picker button:focus-visible,
.eg-dp button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.eg-add svg { width: 16px; height: 16px; display: block; }
@media (max-width: 760px) { .eg-add { width: 36px; height: 36px; } }

.eg-rx { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.eg-pill {
  display: inline-flex; align-items: center; gap: 5px; margin: 0;
  padding: 2px 11px 2px 9px; font: inherit; font-size: var(--text-12); line-height: 1.7; letter-spacing: 0;
  color: var(--ink-soft); background: color-mix(in srgb, var(--white) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--moon) 26%, transparent); border-radius: var(--radius-pill);
  cursor: pointer; transition: transform .2s var(--eg-ease), border-color .2s, background .2s, color .2s, box-shadow .3s;
}
.eg-pill:hover { transform: translateY(-2px) scale(1.06); border-color: var(--accent); }
.eg-pill:active { transform: scale(.92); }
.eg-pill:hover .eg-emoji { animation: eg-wiggle .5s ease; }
.eg-emoji { font-size: var(--text-14); display: inline-block; }
.eg-pill.is-mine {
  color: var(--ink); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent) 38%, transparent);
}
.eg-count { display: inline-block; min-width: .7em; text-align: center; font-variant-numeric: tabular-nums; }
.eg-count.is-bump { animation: eg-bump .4s var(--eg-ease); }
.eg-pill.is-pop { animation: eg-pop .45s var(--eg-ease); }
@keyframes eg-wiggle { 25% { transform: rotate(-14deg) scale(1.2); } 60% { transform: rotate(10deg) scale(1.2); } }
@keyframes eg-bump { 0% { transform: translateY(70%); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes eg-pop { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

.eg-picker {
  position: fixed; z-index: var(--z-toast); display: flex; gap: 2px; padding: 6px 8px;
  background: color-mix(in srgb, var(--plum) 96%, transparent); border: 1px solid var(--line);
  border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--black) 55%, transparent);
  opacity: 0; visibility: hidden; transform: translateY(6px) scale(.92); transform-origin: var(--eg-ox, 50%) 100%;
  transition: opacity .18s, transform .28s var(--eg-ease), visibility 0s linear .28s;
}
.eg-picker.is-below { transform-origin: var(--eg-ox, 50%) 0; transform: translateY(-6px) scale(.92); }
/* visibility flips instantly on open so keyboard focus can land in the picker right away */
.eg-picker.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .28s var(--eg-ease), visibility 0s; }
.eg-picker button {
  margin: 0; padding: 4px 6px; font-size: 22px; line-height: 1; background: none; border: 0;
  border-radius: var(--radius-md); cursor: pointer; transition: transform .2s var(--eg-ease), background .2s;
}
.eg-picker button:hover { transform: translateY(-7px) scale(1.4); background: color-mix(in srgb, var(--white) 6%, transparent); }
.eg-picker button.is-on { background: color-mix(in srgb, var(--accent) 22%, transparent); }
@media (max-width: 760px) { .eg-picker button { padding: 6px 8px; } }

/* =========================================================
   2. NOTIFICATIONS  (bell + the existing .notification-center dialog)
   ========================================================= */
.site-notification-bell[data-unread]:not([data-unread="0"]) {
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
}
.site-notification-bell.eg-ring svg { animation: eg-ring 1.1s ease; transform-origin: 50% 8%; }
@keyframes eg-ring { 10% { transform: rotate(18deg); } 25% { transform: rotate(-16deg); } 40% { transform: rotate(12deg); } 55% { transform: rotate(-8deg); } 70% { transform: rotate(4deg); } 100% { transform: none; } }
.notification-count::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--accent);
  animation: eg-pulse 2.2s ease-out infinite; pointer-events: none;
}
@keyframes eg-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.notification-center {
  border-radius: var(--radius-lg); overflow: hidden;
  background:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--decorative-221832) 96%, transparent);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--black) 60%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent);
}
.notification-center h2 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); }
.notification-center h2::before {
  content: "🌸"; display: grid; place-items: center; width: 34px; height: 34px; font-size: 18px;
  border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
}
.notification-subtitle { font-size: var(--text-12); letter-spacing: .06em; }

.notification-item {
  --c: var(--mist); position: relative; padding-left: 66px;
  transition: transform .25s var(--eg-ease), border-color .2s, background .2s, box-shadow .25s;
  animation: eg-item-in .45s var(--eg-ease) both; animation-delay: calc(var(--eg-i, 0) * 55ms);
}
.notification-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 8px 22px color-mix(in srgb, var(--black) 30%, transparent); }
.notification-item.is-unread { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 11%, transparent), color-mix(in srgb, var(--white) 2.5%, transparent) 70%); }
.notification-item[data-engage-kind="correction"] { --c: var(--gold); }
.notification-item[data-engage-kind="honor"] { --c: var(--accent); }
.eg-nicon {
  position: absolute; left: 14px; top: 14px; width: 38px; height: 38px; display: grid; place-items: center;
  font-size: 18px; border-radius: var(--radius-md); color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 14%, transparent);
}
.notification-item.is-unread .eg-nicon::after {
  content: ""; position: absolute; top: -4px; right: -4px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px var(--plum), 0 0 10px var(--accent);
}
@keyframes eg-item-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .notification-item { padding-left: 60px; } .eg-nicon { left: 12px; width: 36px; height: 36px; } }

/* =========================================================
   3. DAILY WRITING PROMPT  (inserted above .chat-history)
   ========================================================= */
.eg-dp {
  position: relative; flex: none; isolation: isolate; overflow: hidden; min-width: 0; max-width: 100%;
  margin: 8px clamp(12px, 2.5vw, 22px) 0; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: var(--radius-lg);
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in srgb, var(--glow) 22%, transparent), transparent 58%),
    radial-gradient(80% 120% at 0% 100%, color-mix(in srgb, var(--dusk) 70%, transparent), transparent 62%),
    color-mix(in srgb, var(--night) 70%, transparent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 30%, transparent);
  animation: eg-dp-in .6s var(--eg-ease) both;
}
@keyframes eg-dp-in { from { opacity: 0; transform: translateY(-10px) scale(.98); } to { opacity: 1; transform: none; } }
.eg-dp::before { /* low sun */
  content: ""; position: absolute; z-index: -1; right: -30px; top: -46px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--moon), var(--glow) 58%, transparent 72%); opacity: .42;
  animation: eg-sun 7s ease-in-out infinite alternate;
}
@keyframes eg-sun { to { transform: translate(-8px, 10px) scale(1.07); opacity: .56; } }
.eg-dp-petals { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.eg-dp-petals i {
  position: absolute; top: -12px; left: var(--x); width: 9px; height: 9px; border-radius: 100% 0 100% 0;
  background: var(--accent); opacity: .5; animation: eg-fall var(--t, 10s) linear infinite; animation-delay: var(--d, 0s);
}
@keyframes eg-fall { to { transform: translate(36px, 260px) rotate(420deg); opacity: 0; } }
.eg-dp.is-collapsed .eg-dp-petals { display: none; }

.eg-dp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; min-width: 0; }
.eg-dp-tag { font-size: var(--text-12); letter-spacing: .14em; color: var(--accent); white-space: nowrap; }
.eg-dp-level {
  font-size: var(--text-12); padding: 0 10px; line-height: 1.7; white-space: nowrap; color: var(--gold);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius: var(--radius-pill);
}
.eg-dp-peek { flex: 1 1 0; width: 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-14); color: var(--ink-soft); opacity: 0; transition: opacity .25s; }
.eg-dp.is-collapsed .eg-dp-peek { opacity: 1; }
.eg-dp-spacer { flex: 1; }
.eg-dp.is-collapsed .eg-dp-spacer { display: none; }
.eg-dp-timer { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-12); color: var(--ink-soft); white-space: nowrap; }
.eg-dp-timer > .eg-ring {
  --p: 50; width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), color-mix(in srgb, var(--moon) 16%, transparent) 0);
  -webkit-mask: radial-gradient(circle 6px, transparent 98%, #000); mask: radial-gradient(circle 6px, transparent 98%, #000);
}
.eg-dp.is-collapsed .eg-dp-timer { display: none; }
.eg-dp-toggle {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; margin: 0;
  color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  transition: border-color .2s, color .2s, transform .3s var(--eg-ease);
}
.eg-dp-toggle:hover { color: var(--accent); border-color: var(--accent); }
.eg-dp-toggle svg { width: 14px; height: 14px; transition: transform .35s var(--eg-ease); }
.eg-dp.is-collapsed .eg-dp-toggle svg { transform: rotate(180deg); }

.eg-dp-collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .4s cubic-bezier(.2, .8, .2, 1); }
.eg-dp.is-collapsed .eg-dp-collapse { grid-template-rows: 0fr; }
.eg-dp-collapse > div { overflow: hidden; min-height: 0; }
.eg-dp-main { padding: 0 18px 16px; }
.eg-dp-q { margin: 0; font-family: var(--font-display); font-size: clamp(var(--text-20), 3.6vw, var(--text-24)); font-weight: 700; line-height: 1.55; color: var(--ink); text-wrap: balance; }
.eg-dp-en { margin: 0; max-height: 0; opacity: 0; overflow: hidden; font-size: var(--text-14); color: var(--ink-soft); transition: max-height .4s ease, opacity .3s, margin .3s; }
.eg-dp.is-open .eg-dp-en { max-height: 6em; opacity: 1; margin-top: 8px; }
.eg-dp-hints { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.eg-dp-hints li {
  padding: 1px 12px; font-size: var(--text-12); line-height: 1.8; color: var(--ink);
  border: 1px dashed color-mix(in srgb, var(--moon) 38%, transparent); border-radius: var(--radius-pill);
  transition: border-color .2s, background .2s; cursor: default;
}
.eg-dp-hints li:hover { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.eg-dp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.eg-dp-actions .btnp, .eg-dp-actions .btng { padding: 8px 18px; letter-spacing: .06em; text-indent: 0; }

@media (max-width: 760px) {
  .eg-dp { margin: 6px 8px 0; }
  .eg-dp-bar { gap: 8px; padding: 8px 8px 8px 12px; }
  .eg-dp-main { padding: 0 14px 14px; }
  .eg-dp-timer span:last-child { display: none; }
  .eg-dp-toggle { width: 36px; height: 36px; }
  .eg-dp-actions > * { flex: 1 1 auto; min-height: 44px; }
}

/* =========================================================
   4. EXPANDED PROFILE  (#profModal / :is(#profBody.pcard,.account-profile-card))
   ========================================================= */
:is(#profModal.modal,.account-dialog) { padding: 0; overflow-x: hidden; border-radius: var(--radius-lg); }
:is(#profBody.pcard,.account-profile-card) { --eg-pad: clamp(18px, 5vw, 30px); padding: 0 var(--eg-pad) 28px; }
#profModal .mclose {
  z-index: 3; color: var(--ink); background: color-mix(in srgb, var(--night) 55%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-radius: 50%;
}
.eg-banner {
  position: relative; height: 124px; margin: 0 calc(var(--eg-pad) * -1); overflow: hidden;
  background: linear-gradient(120deg, var(--dusk), color-mix(in srgb, var(--accent-deep) 80%, var(--dusk)) 55%, var(--glow));
}
.eg-banner::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 82% 130%, color-mix(in srgb, var(--moon) 45%, transparent), transparent 52%),
              radial-gradient(circle at 14% 20%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 42%);
}
.eg-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46px; background: linear-gradient(transparent, color-mix(in srgb, var(--decorative-221836) 92%, transparent)); }
.eg-banner i {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; z-index: 1; border-radius: 100% 0 100% 0;
  background: color-mix(in srgb, var(--petal) 78%, transparent); animation: eg-drift 6s ease-in-out infinite alternate; animation-delay: var(--d, 0s);
}
@keyframes eg-drift { to { transform: translate(14px, 18px) rotate(60deg); } }

:is(#profBody,.account-profile-card) > :is(.avwrap,.account-avatar) { position: relative; z-index: 2; margin: -54px auto 14px; }
:is(#profBody,.account-profile-card) > :is(.avwrap,.account-avatar)::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  border: 2px solid var(--accent); box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: eg-ring-glow 3s ease-in-out infinite alternate;
}
@keyframes eg-ring-glow { to { box-shadow: 0 0 36px color-mix(in srgb, var(--accent) 80%, transparent); transform: scale(1.03); } }
:is(#profBody,.account-profile-card) .pname { font-family: var(--font-display); }
:is(#profBody,.account-profile-card) .pbio, :is(#profBody,.account-profile-card) .honor-profile, :is(#profBody,.account-profile-card) .profile-detail-group {
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--white) 2.5%, transparent);
}
:is(#profBody,.account-profile-card) .pbio { border-left: 3px solid var(--accent); }

/* staggered entrance whenever the modal opens */
:is(#profOverlay.open,.account-overlay.open) :is(#profBody,.account-profile-card) > :not(.eg-banner):not(button) { animation: eg-rise .5s var(--eg-ease) both; }
#profOverlay.open :is(#profBody,.account-profile-card) > :nth-child(3) { animation-delay: .05s; } #profOverlay.open :is(#profBody,.account-profile-card) > :nth-child(4) { animation-delay: .1s; }
#profOverlay.open :is(#profBody,.account-profile-card) > :nth-child(5) { animation-delay: .15s; } #profOverlay.open :is(#profBody,.account-profile-card) > :nth-child(6) { animation-delay: .2s; }
#profOverlay.open :is(#profBody,.account-profile-card) > :nth-child(n+7) { animation-delay: .25s; }
@keyframes eg-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* honor progress (injected inside .honor-profile) */
.eg-honor { margin-top: 12px; text-align: left; }
.eg-honor-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-12); color: var(--ink-soft); margin-bottom: 7px; }
.eg-honor-top b { color: var(--gold); font-weight: 600; }
.eg-bar { height: 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--moon) 14%, transparent); }
.eg-bar i {
  display: block; height: 100%; width: 0; position: relative; border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--glow)); transition: width 1.1s cubic-bezier(.2, .8, .2, 1) .25s;
}
.eg-bar i::after { content: ""; position: absolute; right: -2px; top: 50%; width: 14px; height: 14px; transform: translateY(-50%); border-radius: 50%; background: var(--white); box-shadow: 0 0 12px var(--accent); }
.eg-honor.is-max .eg-bar i::after { display: none; }
.eg-tiers { display: flex; justify-content: space-between; gap: 6px; margin-top: 9px; }
.eg-tiers span {
  flex: 1; text-align: center; font-size: var(--text-12); padding: 2px 4px; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: var(--radius-pill); opacity: .6;
}
.eg-tiers span.is-done { opacity: 1; color: var(--ink); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }

/* =========================================================
   Motion safety
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .eg-petal, .eg-dp, .eg-dp::before, .eg-dp-petals i, .eg-banner i, :is(#profBody,.account-profile-card) > :is(.avwrap,.account-avatar)::after,
  .notification-item, .notification-count::after, .site-notification-bell.eg-ring svg,
  :is(#profOverlay.open,.account-overlay.open) :is(#profBody,.account-profile-card) > *, .eg-pill, .eg-count { animation: none !important; }
  .eg-picker, .eg-dp-collapse, .eg-bar i, .eg-dp-en { transition-duration: .01ms !important; }
}

/* Preserve shared close/report placement and compact phone layouts. */
:is(#profModal,.account-dialog) .profile-report-button{z-index:4;animation:none!important}
.account-dialog .account-close{z-index:4;background:color-mix(in srgb,var(--night) 55%,transparent);backdrop-filter:blur(6px)}
.eg-add:disabled,.eg-pill:disabled{opacity:.55;cursor:default}
.eg-picker{max-width:calc(100vw - 16px);box-sizing:border-box}
.eg-dp.is-collapsed .eg-dp-collapse{opacity:0}
.eg-dp-collapse{transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1),opacity .25s}
.eg-honor-quality{display:block;margin-top:8px;color:var(--ink-soft)}
.chat-searching .eg-dp{display:none}
@media(max-width:760px){.eg-dp-tag{letter-spacing:.03em}.eg-dp-bar{gap:5px}.eg-dp-level{padding:0 7px}.eg-dp-bar .eg-dp-spacer{min-width:0}.eg-picker button{min-width:0;padding:6px;font-size:20px}}
@media(max-width:760px) and (max-height:700px){.eg-dp-main{max-height:25dvh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}}
.account-profile-card>.account-avatar{overflow:visible}
.account-profile-card>.account-avatar img{border-radius:inherit}

/* The selector owns channel tools. Voice and the daily prompt share a row. */
body[data-page="community"] .chanbar>.channel-tools{position:static;margin:0;transform:none}
body[data-page="community"] .chanbar>.channel-tools button{background:transparent;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
body[data-page="community"] #chatUtilityBar{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:10px;padding:8px 14px 0;flex:none;min-width:0}
body[data-page="community"] #chatUtilityBar:empty{display:none}
body[data-page="community"] #chatUtilityBar.has-voice:has(>.eg-dp-slot){grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-page="community"] #chatUtilityBar>.vc-mini-slot{position:static;transform:none;margin:0;width:100%;min-width:0}
#chatUtilityBar .eg-dp{margin:0;min-width:0;width:100%;box-sizing:border-box;box-shadow:0 8px 22px -12px color-mix(in srgb,var(--black) 25%,transparent)}
#chatUtilityBar.has-voice .vc-mini{box-sizing:border-box;height:100%;min-height:64px;gap:8px;padding:10px}
#chatUtilityBar.has-voice .eg-dp-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 8px;min-height:62px;box-sizing:border-box;padding:8px 10px}
#chatUtilityBar.has-voice .eg-dp-tag{font-size:10px;letter-spacing:.02em}
#chatUtilityBar.has-voice .eg-dp-level{justify-self:start;font-size:10px;padding:0 6px}
#chatUtilityBar.has-voice .eg-dp-spacer{display:none}
#chatUtilityBar.has-voice .eg-dp-peek{display:block;grid-column:1/3;grid-row:2;width:auto;font-size:12px;min-width:0}
#chatUtilityBar.has-voice .eg-dp-timer{grid-column:1/3;grid-row:3;justify-self:start;font-size:11px}
#chatUtilityBar.has-voice .eg-dp-toggle{grid-column:3;grid-row:1/4;width:28px;height:28px;align-self:center}
.eg-dp.is-collapsed .eg-dp-timer{display:inline-flex}
.eg-prompt-answer-context{display:flex;align-items:flex-start;gap:8px;margin:0 0 8px;padding:8px 12px;border-left:2px solid var(--accent);border-radius:8px;background:color-mix(in srgb,var(--accent) 9%,transparent);color:var(--ink-soft);font-size:var(--text-12);line-height:1.5;max-width:100%;overflow-wrap:anywhere}
.eg-prompt-answer-context strong{display:block;color:var(--accent);font-weight:500}
.eg-prompt-answer-draft{display:flex;align-items:center;gap:10px;flex:none;margin:6px 14px 0;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--night) 18%,transparent);font-size:var(--text-12);color:var(--ink-soft)}
.eg-prompt-answer-draft>span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eg-prompt-answer-draft button{flex:none;width:28px;height:28px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);font:20px/1 var(--font-ui)}
@media(max-width:760px){
 body[data-page="community"] #chatUtilityBar{padding:6px 10px 0;gap:6px}
 body[data-page="community"] #chatUtilityBar>.vc-mini-slot{width:100%}
 body[data-page="community"] #chatUtilityBar>.vc-mini-slot .vc-mini{height:100%;min-height:98px}
 .eg-dp-bar{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:6px;padding:8px 10px}
 .eg-dp-bar .eg-dp-peek{display:none}.eg-dp-bar .eg-dp-spacer{display:none}
 .eg-dp-timer{justify-self:end;font-size:11px;gap:4px}
 .eg-dp-timer span:last-child{display:inline}.eg-dp-timer>.eg-ring{width:16px;height:16px}
 .eg-dp-tag{font-size:10px;letter-spacing:0}.eg-dp-level{font-size:10px;padding:0 6px}
 .eg-dp-toggle{width:30px;height:30px}.eg-dp-main{padding-inline:12px}
 body[data-page="community"].keyboard-open #chatUtilityBar{display:none}
}
#chatUtilityBar .vc-mini.is-visible{animation:chat-status-in .2s ease both}
#chatUtilityBar .vc-mini.is-leaving{animation:chat-status-out .2s ease both}
@keyframes chat-status-in{from{opacity:0}to{opacity:1}}
@keyframes chat-status-out{from{opacity:1}to{opacity:0}}
body[data-page="community"] #vChat .chat-history .msgs{padding-top:14px}

@media(max-width:760px){
 body[data-page="community"] .chanbar>.channel-tools{gap:3px}
 body[data-page="community"] .chanbar>.channel-tools button{width:26px;height:26px;min-height:26px}
 body[data-page="community"] .chanbar>.channel-tools svg{width:17px;height:17px}
 body[data-page="community"] .channel-name{white-space:normal;overflow-wrap:normal;text-overflow:clip;font-size:11px;line-height:1.2}
 #chatUtilityBar.has-voice .vc-mini{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;padding:8px;min-height:98px}
 #chatUtilityBar.has-voice .vc-mini .vc-wave{width:16px;gap:2px}
 #chatUtilityBar.has-voice .vc-mini__actions{grid-column:1/-1;justify-content:center;gap:6px}
 #chatUtilityBar.has-voice .vc-mini .vc-btn{width:28px;height:28px;flex:none}
 #chatUtilityBar.has-voice .vc-mini__status,#chatUtilityBar.has-voice .vc-mini__room{font-size:10px}
 #chatUtilityBar.has-voice .eg-dp-bar{grid-template-columns:minmax(0,1fr) auto;min-height:96px;padding:8px;gap:3px}
 #chatUtilityBar.has-voice .eg-dp-tag{grid-column:1/-1;grid-row:1;font-size:9px;white-space:normal}
 #chatUtilityBar.has-voice .eg-dp-level{grid-column:1;grid-row:2}
 #chatUtilityBar.has-voice .eg-dp-peek{grid-column:1/-1;grid-row:3;font-size:11px}
 #chatUtilityBar.has-voice .eg-dp-timer{grid-column:1;grid-row:4;font-size:10px;gap:3px}
 #chatUtilityBar.has-voice .eg-dp-timer>.eg-ring{width:12px;height:12px}
 #chatUtilityBar.has-voice .eg-dp-toggle{grid-column:2;grid-row:4;width:24px;height:24px}
 #chatUtilityBar.has-voice .eg-dp-main{padding:8px;font-size:12px}
 #chatUtilityBar.has-voice .eg-dp-actions{flex-wrap:wrap}
}

/* Keep the offscreen member drawer from horizontally scrolling the chat. */
@media(max-width:760px){body[data-page="community"] #vChat{overflow:clip}}

/* A fixed header slot lets one continuous card expand over the feed. */
#chatUtilityBar{position:relative;z-index:5}
#chatUtilityBar>.eg-dp-slot{position:relative;min-width:0;align-self:start}
#chatUtilityBar .eg-dp-slot>.eg-dp{position:absolute;inset:0 0 auto;width:100%;overflow:hidden;margin:0;z-index:1;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:radial-gradient(90% 140% at 100% 0%,color-mix(in srgb,var(--glow) 12%,transparent),transparent 58%),color-mix(in srgb,var(--night) 92%,transparent)}
#chatUtilityBar .eg-dp-collapse{position:static;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;visibility:visible;transition:grid-template-rows .3s ease,opacity .2s,visibility 0s}
#chatUtilityBar .eg-dp.is-collapsed .eg-dp-collapse{opacity:0;visibility:hidden;pointer-events:none;transition:grid-template-rows .3s ease,opacity .2s,visibility 0s .3s}
#chatUtilityBar .eg-dp-main{max-height:min(360px,45dvh);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
#chatUtilityBar.has-voice .eg-dp-peek{opacity:1}
body[data-page="community"] #chatUtilityBar>.vc-mini-slot .vc-mini{height:auto;min-height:86px}
body[data-page="community"] .chanbar>.chat-search-button{width:36px;height:36px;min-width:36px;min-height:36px;background:transparent}
@media(max-width:760px){
 body[data-page="community"] .chanbar>.chat-search-button{width:26px;height:26px;min-width:26px;min-height:26px}
 body[data-page="community"] .chanbar>.chat-search-button svg{width:17px;height:17px}
 body[data-page="community"] #chatUtilityBar>.vc-mini-slot .vc-mini{min-height:98px}
 #chatUtilityBar.has-voice .eg-dp-q{font-size:16px;text-wrap:wrap}
 #chatUtilityBar.has-voice .eg-dp-actions button{width:100%;font-size:11px;padding:8px 4px;letter-spacing:0;text-indent:0}
}

.eg-dp-participation{display:flex;align-items:center;gap:10px;margin:14px 0 0;color:var(--ink-soft);font-size:var(--text-12);line-height:1.4}.eg-dp-participation:empty{display:none}.eg-dp-learners{display:inline-flex;flex:none;padding-left:1px}.eg-dp-learners i{display:block;width:20px;height:20px;border:2px solid var(--night);border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--plum));margin-left:-5px}.eg-dp-learners i:first-child{margin-left:0;background:linear-gradient(135deg,var(--dusk),var(--accent))}.eg-dp-learners i:last-child{background:linear-gradient(135deg,var(--accent-deep),var(--accent))}@media(max-width:760px){#chatUtilityBar.has-voice .eg-dp-participation{flex-wrap:wrap;gap:5px;font-size:11px}}

/* Incoming notifications share the site's translucent dusk surfaces. */
.eg-notification-stack{position:fixed;right:max(16px,env(safe-area-inset-right));top:calc(env(safe-area-inset-top) + 82px);width:min(360px,calc(100vw - 32px));display:grid;gap:10px;z-index:var(--z-toast-front)}
.eg-notification-toast{position:relative;background:rgba(31,24,49,.66);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--line);border-radius:18px;box-shadow:0 10px 28px rgba(0,0,0,.2);animation:eg-notification-in .22s ease both;color:var(--ink)}
.eg-notification-open{display:grid;grid-template-columns:24px minmax(0,1fr);gap:6px 9px;width:100%;padding:16px 42px 16px 16px;border:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer;border-radius:18px}
.eg-notification-open strong{font-size:14px;font-weight:600}.eg-notification-symbol{color:var(--accent)}.eg-notification-preview{grid-column:2;font-size:12px;color:var(--ink-soft);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.eg-notification-dismiss{position:absolute;right:8px;top:8px;width:28px;height:28px;padding:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink-soft);font:20px/1 sans-serif;cursor:pointer}
.eg-notification-toast.is-closing{animation:eg-notification-out .2s ease both;pointer-events:none}
@keyframes eg-notification-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}@keyframes eg-notification-out{to{opacity:0;transform:translateY(-8px)}}
@media(max-width:760px){.eg-notification-stack{right:12px;top:calc(env(safe-area-inset-top) + 72px);width:calc(100vw - 24px)}}
@media(prefers-reduced-motion:reduce){.eg-notification-toast,.eg-notification-toast.is-closing{animation-duration:.01ms}}