/* ── personal/groups context switcher (topbar) ── */
.hidden { display: none !important; }
.topbar > div:first-child { flex: 1; }
.app-context {
  display: none; position: relative; background: var(--bg);
  border: 1px solid var(--border); border-radius: 11px; padding: 3px; gap: 2px;
}
.app-context.visible { display: flex; }
.app-context button {
  width: 32px; height: 30px; display: grid; place-items: center; border: 0;
  border-radius: 8px; background: transparent; color: var(--muted); padding: 0;
  transition: background-color .22s ease, color .22s ease, transform .22s ease;
}
.app-context button svg { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.app-context button.active {
  background: var(--bg3); color: var(--white);
  box-shadow: 0 2px 10px rgba(0,0,0,.35); transform: translateY(-1px);
}
.app-context button.active svg { transform: scale(1.08); }

/* ── group list / group card ── */
#group-root { padding: 12px; }
.group-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.group-toolbar .search-box { min-width: 0; }
.group-card, .group-panel {
  background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px; margin-bottom: 10px;
}
.group-card { cursor: pointer; }
.group-row { display: flex; align-items: center; gap: 10px; }
.group-grow { flex: 1; min-width: 0; }
.group-title { font-weight: 700; font-size: 14px; }
.group-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Circular (border-radius: 50%), matching every other avatar in the app
   (.avatar, .profile-avatar, .profile-next-peer) — not a rounded square.
   Both width and height are always equal so 50% renders a true circle. */
.group-photo {
  position: relative; width: 42px; height: 42px; border-radius: 50%; background: var(--avatar-bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  flex: 0 0 42px; font-weight: 700;
}
.group-photo.large { width: 54px; height: 54px; flex-basis: 54px; font-size: 21px; }
/* absolute+inset so the loaded photo stacks over the fallback initial
   instead of sitting beside it as a flex sibling (matches .avatar/.avatar-img).
   border-radius is repeated here (not just on .group-photo) because WebKit
   doesn't reliably clip an absolutely-positioned img to an ancestor's
   overflow:hidden — same reason .avatar-img sets its own border-radius. */
.group-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* status chip radius (10px) intentionally matches index.html's .badge chip
   convention, not var(--r) — chips are a distinct radius tier from cards. */
.group-status { font-size: 9px; padding: 4px 7px; border-radius: 10px; background: #24375c; color: var(--accent); white-space: nowrap; }
.group-status.active   { background: var(--green-bg); color: var(--green-tint); }
.group-status.inactive { background: var(--red-bg);   color: var(--red-tint); }

/* corner settings button on the group hero (replaces the old bottom tab) */
.group-icon-btn {
  border: 0; background: transparent; color: var(--muted); padding: 4px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: var(--r); flex: 0 0 auto;
}
.group-icon-btn .cat-icon { width: 18px; height: 18px; margin: 0; }

/* ── group hero stats (shares .stat-tile/.stat-val/.stat-lab with index.html's profile hero) ── */
.group-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 12px; }

/* ── back button, settings form, misc chrome (no personal-UI equivalent) ── */
.group-back { border: 0; background: none; color: var(--accent); font: inherit; padding: 0 0 10px; }
.group-form label {
  display: block; font-size: 10px; color: var(--muted); margin: 10px 0 4px;
  text-transform: uppercase; letter-spacing: .5px;
}
.group-form select, .group-form input {
  width: 100%; background: var(--bg); border: 1px solid var(--border); color: var(--white);
  padding: 9px; border-radius: var(--r);
}
.group-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.group-category {
  display: flex !important; align-items: center; gap: 7px; background: var(--bg);
  padding: 8px; border-radius: var(--r); text-transform: none !important;
  letter-spacing: 0 !important; margin: 0 !important;
}
.group-category input { width: auto; }
.group-actions { display: flex; gap: 8px; margin-top: 12px; }
.group-actions > * { flex: 1; }
.group-role { font-size: 10px; color: var(--muted); }
.group-manager { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.group-manager:last-child { border: 0; }
.group-notice {
  padding: 10px; border: 1px solid var(--notice-border); background: var(--notice-bg);
  color: var(--notice-text); border-radius: var(--r); margin-bottom: 10px; font-size: 11px;
}

/* ── personal/groups context-switch animations ── */
.context-enter-groups #group-root:not(.hidden) { animation: context-in-right .28s cubic-bezier(.2,.8,.2,1) both; }
.context-enter-personal .page.active:not(.hidden) { animation: context-in-left .28s cubic-bezier(.2,.8,.2,1) both; }
.context-enter-groups #group-tabs:not(.hidden) { animation: context-bar-in-right .32s cubic-bezier(.2,.8,.2,1) both; }
.context-enter-personal #personal-tabs:not(.hidden) { animation: context-bar-in-left .32s cubic-bezier(.2,.8,.2,1) both; }
.context-enter-groups #group-tabs:not(.hidden) .tab,
.context-enter-personal #personal-tabs:not(.hidden) .tab { animation: context-bar-item .25s ease-out both; }
.context-enter-groups #group-tabs .tab:nth-child(2),
.context-enter-personal #personal-tabs .tab:nth-child(2) { animation-delay: 35ms; }
.context-enter-groups #group-tabs .tab:nth-child(3),
.context-enter-personal #personal-tabs .tab:nth-child(3) { animation-delay: 70ms; }
.context-enter-groups #group-tabs .tab:nth-child(4),
.context-enter-personal #personal-tabs .tab:nth-child(4) { animation-delay: 105ms; }
.context-enter-personal #personal-tabs .tab:nth-child(5) { animation-delay: 140ms; }

@keyframes context-in-right { from { opacity: .25; transform: translateX(14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes context-in-left { from { opacity: .25; transform: translateX(-14px) scale(.99); } to { opacity: 1; transform: none; } }
@keyframes context-bar-in-right { from { opacity: .2; transform: translate(18px, 8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes context-bar-in-left { from { opacity: .2; transform: translate(-18px, 8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes context-bar-item { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .app-context button, .app-context button svg { transition: none; }
  .context-enter-groups #group-root:not(.hidden),
  .context-enter-personal .page.active:not(.hidden),
  .context-enter-groups #group-tabs:not(.hidden),
  .context-enter-personal #personal-tabs:not(.hidden),
  .context-enter-groups #group-tabs:not(.hidden) .tab,
  .context-enter-personal #personal-tabs:not(.hidden) .tab { animation: none; }
}

/* ── shared tab-transition animations ──
   NOTE: these keyframes/classes are consumed by BOTH index.html's
   switchTab() (personal tabs) and this file's animateGroupTab() (group
   tabs) — they live here for historical reasons, but do not delete or move
   them without updating switchTab() in index.html too. */
.tabs .tab { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.tabs .tab.tab-selecting .cat-icon { animation: tab-icon-select .3s cubic-bezier(.2,.8,.2,1); }
.tab-view-enter-forward, .group-tab-enter-forward { animation: tab-view-in-forward .28s cubic-bezier(.2,.8,.2,1) both; }
.tab-view-enter-back, .group-tab-enter-back { animation: tab-view-in-back .28s cubic-bezier(.2,.8,.2,1) both; }

@keyframes tab-view-in-forward { from { opacity: .2; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes tab-view-in-back { from { opacity: .2; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes tab-icon-select { 0% { transform: scale(.78); } 65% { transform: scale(1.18); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .tabs .tab { transition: none; }
  .tabs .tab.tab-selecting .cat-icon,
  .tab-view-enter-forward, .group-tab-enter-forward,
  .tab-view-enter-back, .group-tab-enter-back { animation: none; }
}