@brdgapp/ui 0.1.0 → 0.1.2

package/src/network-people-helper/styles.css

@@ -0,0 +1,848 @@
+/* Bridge network people helper.
+   Position defaults come from data-placement. Override with:
+   --bridge-helper-top, --bridge-helper-right, --bridge-helper-bottom,
+   --bridge-helper-left, --bridge-helper-z
+*/
+
+.bridge-network-helper-anchor,
+.bridge-network-helper__person-menu-content,
+.bridge-network-nudge {
+  --bridge-helper-fg: var(--foreground, #0f172a);
+  --bridge-helper-bg: var(--background, #ffffff);
+  --bridge-helper-muted: var(--muted, #f1f5f9);
+  --bridge-helper-muted-fg: var(--muted-foreground, #64748b);
+  --bridge-helper-border: var(--border, #e2e8f0);
+  --bridge-helper-accent: #0038ff;
+  color: var(--bridge-helper-fg);
+  font-family: inherit;
+}
+
+.bridge-network-helper-anchor {
+  position: fixed;
+  z-index: var(--bridge-helper-z, 40);
+  top: var(--bridge-helper-top, var(--bridge-helper-preset-top, auto));
+  right: var(--bridge-helper-right, var(--bridge-helper-preset-right, auto));
+  bottom: var(--bridge-helper-bottom, var(--bridge-helper-preset-bottom, auto));
+  left: var(--bridge-helper-left, var(--bridge-helper-preset-left, auto));
+  display: flex;
+  width: min(100vw - 1.5rem, 22rem);
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.bridge-network-helper-anchor *,
+.bridge-network-helper-anchor *::before,
+.bridge-network-helper-anchor *::after,
+.bridge-network-helper__person-menu-content,
+.bridge-network-helper__person-menu-content * {
+  box-sizing: border-box;
+}
+
+.bridge-network-helper-anchor[data-placement="bottom-end"] {
+  --bridge-helper-preset-bottom: 1.25rem;
+  --bridge-helper-preset-right: 1.25rem;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+.bridge-network-helper-anchor[data-placement="bottom-start"] {
+  --bridge-helper-preset-bottom: 1.25rem;
+  --bridge-helper-preset-left: 1.25rem;
+  align-items: flex-end;
+  justify-content: flex-start;
+}
+
+.bridge-network-helper-anchor[data-placement="top-end"] {
+  --bridge-helper-preset-top: 1.25rem;
+  --bridge-helper-preset-right: 1.25rem;
+  align-items: flex-start;
+  justify-content: flex-end;
+}
+
+.bridge-network-helper-anchor[data-placement="top-start"] {
+  --bridge-helper-preset-top: 1.25rem;
+  --bridge-helper-preset-left: 1.25rem;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+@media (min-width: 640px) {
+  .bridge-network-helper-anchor[data-placement="bottom-end"] {
+    --bridge-helper-preset-bottom: 1.75rem;
+    --bridge-helper-preset-right: 1.75rem;
+  }
+
+  .bridge-network-helper-anchor[data-placement="bottom-start"] {
+    --bridge-helper-preset-bottom: 1.75rem;
+    --bridge-helper-preset-left: 1.75rem;
+  }
+
+  .bridge-network-helper-anchor[data-placement="top-end"] {
+    --bridge-helper-preset-top: 1.75rem;
+    --bridge-helper-preset-right: 1.75rem;
+  }
+
+  .bridge-network-helper-anchor[data-placement="top-start"] {
+    --bridge-helper-preset-top: 1.75rem;
+    --bridge-helper-preset-left: 1.75rem;
+  }
+}
+
+.bridge-network-helper .helper-icon,
+.bridge-network-nudge .helper-icon {
+  width: 26px;
+  height: auto;
+  display: block;
+  overflow: visible;
+}
+
+.bridge-network-helper .dot,
+.bridge-network-nudge .dot {
+  fill: #ffffff;
+  transform-box: fill-box;
+  transform-origin: center;
+}
+
+.bridge-network-helper .nudge .dot {
+  animation: bridgeHelperSubtleNudge 5.5s ease-in-out infinite;
+}
+
+.bridge-network-helper .nudge .d1 { animation-delay: 0s; }
+.bridge-network-helper .nudge .d2 { animation-delay: 0.04s; }
+.bridge-network-helper .nudge .d3 { animation-delay: 0.08s; }
+.bridge-network-helper .nudge .d4 { animation-delay: 0.12s; }
+.bridge-network-helper .nudge .d5 { animation-delay: 0.16s; }
+.bridge-network-helper .nudge .d6 { animation-delay: 0.2s; }
+.bridge-network-helper .nudge .d7 { animation-delay: 0.24s; }
+.bridge-network-helper .nudge .d8 { animation-delay: 0.28s; }
+.bridge-network-helper .nudge .d9 { animation-delay: 0.32s; }
+.bridge-network-helper .nudge .d10 { animation-delay: 0.36s; }
+.bridge-network-helper .nudge .d11 { animation-delay: 0.4s; }
+.bridge-network-helper .nudge .d12 { animation-delay: 0.44s; }
+.bridge-network-helper .nudge .d13 { animation-delay: 0.48s; }
+.bridge-network-helper .nudge .d14 { animation-delay: 0.52s; }
+.bridge-network-helper .nudge .d15 { animation-delay: 0.56s; }
+
+@keyframes bridgeHelperSubtleNudge {
+  0%, 82%, 100% { transform: translate(0, 0) scale(1); }
+  85% { transform: translateY(-2.5px) scale(1.04); }
+  88% { transform: translateY(2px) scale(0.985); }
+  91% { transform: translateY(-1px) scale(1.015); }
+  94% { transform: translate(0, 0) scale(1); }
+}
+
+.bridge-network-helper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  width: 100%;
+  pointer-events: auto;
+}
+
+.bridge-network-nudge {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.55rem;
+  margin: 0;
+  padding: 0.35rem 0.55rem 0.35rem 0.35rem;
+  border: 1px solid color-mix(in oklab, var(--bridge-helper-border) 70%, transparent);
+  border-radius: 1.25rem;
+  background: color-mix(in oklab, var(--bridge-helper-bg) 94%, transparent);
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(10px);
+  text-align: left;
+  cursor: pointer;
+}
+
+.bridge-network-nudge:hover {
+  border-color: color-mix(in oklab, var(--bridge-helper-accent) 28%, var(--bridge-helper-border));
+}
+
+.bridge-network-nudge__icon,
+.bridge-network-helper__icon-btn {
+  display: inline-flex;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 9999px;
+  background: var(--bridge-helper-accent);
+  padding: 0;
+  box-shadow: 0 8px 20px rgba(0, 56, 255, 0.28);
+  cursor: pointer;
+}
+
+.bridge-network-nudge__line,
+.bridge-network-helper__line {
+  margin: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  line-height: 1.3;
+  color: var(--bridge-helper-fg);
+}
+
+.bridge-network-nudge__line {
+  flex: 1 1 auto;
+}
+
+.bridge-network-nudge__count,
+.bridge-network-helper__count {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  color: var(--bridge-helper-accent);
+  text-decoration: underline;
+  text-decoration-color: color-mix(in oklab, var(--bridge-helper-accent) 35%, transparent);
+  text-underline-offset: 2px;
+}
+
+.bridge-network-helper__count {
+  display: inline;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.bridge-network-nudge__avatars,
+.bridge-network-helper__avatars {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+}
+
+.bridge-network-helper__avatars {
+  margin-left: 0.1rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  border-radius: 9999px;
+}
+
+.bridge-network-nudge__avatars > * + *,
+.bridge-network-helper__avatars > * + * {
+  margin-left: -0.35rem;
+}
+
+.bridge-network-nudge__toggle,
+.bridge-network-helper__toggle {
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--bridge-helper-muted) 55%, transparent);
+  color: var(--bridge-helper-muted-fg);
+  padding: 0;
+}
+
+.bridge-network-helper__toggle {
+  cursor: pointer;
+}
+
+.bridge-network-nudge__toggle {
+  margin-left: auto;
+}
+
+.bridge-network-nudge__toggle svg,
+.bridge-network-helper__toggle svg,
+.bridge-network-helper__person-menu > svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.bridge-network-helper__dismiss-bar {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-bottom: 0.35rem;
+  padding-right: 0.2rem;
+}
+
+.bridge-network-helper__dismiss-link,
+.bridge-network-helper__dismiss-action,
+.bridge-network-helper__dismiss-cancel {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  font-size: 0.6875rem;
+  line-height: 1.2;
+  cursor: pointer;
+}
+
+.bridge-network-helper__dismiss-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in oklab, var(--bridge-helper-border) 70%, transparent);
+  background: color-mix(in oklab, var(--bridge-helper-bg) 92%, transparent);
+  padding: 0.25rem 0.55rem;
+  color: var(--bridge-helper-muted-fg);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
+  backdrop-filter: blur(8px);
+}
+
+.bridge-network-helper__dismiss-link svg {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}
+
+.bridge-network-helper__dismiss-confirm {
+  margin: 0;
+  border-radius: 9999px;
+  border: 1px solid color-mix(in oklab, var(--bridge-helper-border) 70%, transparent);
+  background: color-mix(in oklab, var(--bridge-helper-bg) 92%, transparent);
+  padding: 0.25rem 0.55rem;
+  font-size: 0.6875rem;
+  line-height: 1.2;
+  color: var(--bridge-helper-muted-fg);
+  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
+}
+
+.bridge-network-helper__dismiss-action {
+  font-weight: 600;
+  color: var(--bridge-helper-accent);
+}
+
+.bridge-network-helper__dismiss-sep {
+  margin: 0 0.25rem;
+  color: color-mix(in oklab, var(--bridge-helper-muted-fg) 50%, transparent);
+}
+
+.bridge-network-helper__shell {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  min-height: 2.5rem;
+  width: max-content;
+  max-width: 100%;
+  margin-left: auto;
+  border-radius: 1.25rem;
+  overflow: hidden;
+  transition: background-color 320ms ease, box-shadow 320ms ease, border-color 320ms ease, padding 320ms ease;
+}
+
+.bridge-network-helper__row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  min-height: 2.5rem;
+}
+
+.bridge-network-helper--icon .bridge-network-helper__shell {
+  width: 2.5rem;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+}
+
+.bridge-network-helper--icon .bridge-network-helper__row {
+  gap: 0;
+}
+
+.bridge-network-helper--icon .bridge-network-helper__icon-btn {
+  animation: bridgeHelperIconEnter 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.bridge-network-helper--revealing .bridge-network-helper__shell,
+.bridge-network-helper--expanded .bridge-network-helper__shell,
+.bridge-network-helper--list .bridge-network-helper__shell {
+  width: max-content;
+  max-width: 100%;
+  padding: 0.25rem 0.4rem 0.25rem 0.25rem;
+  border: 1px solid color-mix(in oklab, var(--bridge-helper-border) 70%, transparent);
+  background: color-mix(in oklab, var(--bridge-helper-bg) 94%, transparent);
+  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.12);
+  backdrop-filter: blur(10px);
+}
+
+.bridge-network-helper--list .bridge-network-helper__shell {
+  width: 100%;
+  padding-bottom: 0.45rem;
+}
+
+.bridge-network-helper--revealing .bridge-network-helper__row,
+.bridge-network-helper--expanded .bridge-network-helper__row,
+.bridge-network-helper--list .bridge-network-helper__row {
+  min-width: 0;
+  max-width: 100%;
+  justify-content: flex-start;
+}
+
+.bridge-network-helper--list {
+  align-items: stretch;
+}
+
+.bridge-network-helper--list .bridge-network-helper__note-reveal,
+.bridge-network-helper--list .bridge-network-helper__note-reveal-inner {
+  flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+}
+
+.bridge-network-helper--list .bridge-network-helper__toggle {
+  margin-left: auto;
+}
+
+.bridge-network-helper__note-reveal {
+  display: grid;
+  grid-template-columns: 0fr;
+  min-width: 0;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition: grid-template-columns 620ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
+}
+
+.bridge-network-helper--revealing .bridge-network-helper__note-reveal,
+.bridge-network-helper--expanded .bridge-network-helper__note-reveal,
+.bridge-network-helper--list .bridge-network-helper__note-reveal {
+  grid-template-columns: 1fr;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bridge-network-helper__note-reveal-inner {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  overflow: hidden;
+  transform: translateX(0.85rem);
+  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bridge-network-helper--revealing .bridge-network-helper__note-reveal-inner,
+.bridge-network-helper--expanded .bridge-network-helper__note-reveal-inner,
+.bridge-network-helper--list .bridge-network-helper__note-reveal-inner {
+  transform: translateX(0);
+}
+
+.bridge-network-helper__content {
+  display: flex;
+  min-width: 0;
+  flex: 0 1 auto;
+  align-items: center;
+  overflow: hidden;
+}
+
+.bridge-network-helper__list {
+  display: grid;
+  grid-template-rows: 0fr;
+  width: 0;
+  max-width: 100%;
+  opacity: 0;
+  overflow: hidden;
+  pointer-events: none;
+  transition: grid-template-rows 480ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms ease, margin-top 480ms cubic-bezier(0.22, 1, 0.36, 1), width 480ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.bridge-network-helper--list .bridge-network-helper__list {
+  grid-template-rows: 1fr;
+  width: 100%;
+  margin-top: 0.45rem;
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.bridge-network-helper__list-inner {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.bridge-network-helper__list-panel {
+  display: flex;
+  flex-direction: column;
+  max-height: min(22rem, 52vh);
+  border-top: 1px solid color-mix(in oklab, var(--bridge-helper-border) 30%, transparent);
+  padding: 0.45rem 0.1rem 0.1rem;
+}
+
+.bridge-network-helper__search {
+  position: relative;
+  flex-shrink: 0;
+  margin: 0 0.2rem 0.4rem;
+}
+
+.bridge-network-helper__search-icon {
+  position: absolute;
+  top: 50%;
+  left: 0.65rem;
+  z-index: 1;
+  width: 0.85rem;
+  height: 0.85rem;
+  transform: translateY(-50%);
+  color: var(--bridge-helper-muted-fg);
+  pointer-events: none;
+}
+
+.bridge-network-helper__search-input {
+  width: 100%;
+  height: 2rem;
+  padding: 0 0.7rem 0 1.9rem;
+  border-radius: 0.65rem;
+  border: 1px solid color-mix(in oklab, var(--bridge-helper-border) 45%, transparent);
+  background: color-mix(in oklab, var(--bridge-helper-bg) 80%, transparent);
+  color: var(--bridge-helper-fg);
+  font: inherit;
+  font-size: 0.75rem;
+  outline: none;
+}
+
+.bridge-network-helper__search-input:focus-visible {
+  border-color: color-mix(in oklab, var(--bridge-helper-accent) 45%, var(--bridge-helper-border));
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--bridge-helper-accent) 14%, transparent);
+}
+
+.bridge-network-helper__list-scroll {
+  min-height: 0;
+  flex: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.bridge-network-helper__list-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1.25rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--bridge-helper-muted-fg);
+}
+
+.bridge-network-helper__list-status.is-error {
+  color: #e13535;
+}
+
+.bridge-network-helper__people {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.bridge-network-helper__person {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.65rem;
+  padding: 0.55rem 0.6rem;
+  border-radius: 0.75rem;
+  animation: bridgeHelperPersonEnter 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.bridge-network-helper__person:hover {
+  background: color-mix(in oklab, var(--bridge-helper-muted) 55%, transparent);
+}
+
+.bridge-network-helper__person--skeleton {
+  animation: none;
+}
+
+.bridge-network-helper__person-copy {
+  min-width: 0;
+  flex: 1;
+}
+
+.bridge-network-helper__person-name,
+.bridge-network-helper__person-meta {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bridge-network-helper__person-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--bridge-helper-fg);
+}
+
+.bridge-network-helper__person-meta {
+  font-size: 11px;
+  color: color-mix(in oklab, var(--bridge-helper-muted-fg) 80%, transparent);
+}
+
+.bridge-network-helper__share-link {
+  display: inline-flex;
+  max-width: 100%;
+  align-items: center;
+  gap: 0.35rem;
+  margin-top: 0.2rem;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--bridge-helper-muted-fg);
+  font: inherit;
+  font-size: 0.6875rem;
+  line-height: 1.25;
+  cursor: pointer;
+  text-align: left;
+}
+
+.bridge-network-helper__share-link-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--bridge-helper-accent);
+}
+
+.bridge-network-helper__share-link-icon {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex-shrink: 0;
+}
+
+.bridge-network-helper__share-link-icon.is-copied,
+.bridge-network-helper__person-menu-icon.is-copied {
+  color: #0ea02e;
+}
+
+.bridge-network-helper__person-menu {
+  display: inline-flex;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.1rem;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  padding: 0;
+  color: color-mix(in oklab, var(--bridge-helper-muted-fg) 70%, transparent);
+  cursor: pointer;
+}
+
+.bridge-network-helper__person-menu:hover,
+.bridge-network-helper__person-menu[data-state="open"] {
+  color: var(--bridge-helper-fg);
+  background: color-mix(in oklab, var(--bridge-helper-muted) 70%, transparent);
+}
+
+.bridge-network-helper__person-menu-content {
+  position: fixed;
+  z-index: 60;
+  width: 15.5rem;
+  overflow: hidden;
+  border-radius: 0.9rem;
+  border: 1px solid color-mix(in oklab, var(--bridge-helper-border) 55%, transparent);
+  background: var(--bridge-helper-bg);
+  padding: 0.35rem;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12);
+}
+
+.bridge-network-helper__person-menu-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.7rem;
+  border: 0;
+  border-radius: 0.65rem;
+  background: transparent;
+  padding: 0.65rem 0.75rem;
+  color: color-mix(in oklab, var(--bridge-helper-fg) 78%, transparent);
+  font: inherit;
+  font-size: 0.8125rem;
+  line-height: 1.2;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.bridge-network-helper__person-menu-item.has-description {
+  align-items: flex-start;
+}
+
+.bridge-network-helper__person-menu-item:hover,
+.bridge-network-helper__person-menu-item:focus-visible {
+  background: color-mix(in oklab, var(--bridge-helper-muted) 55%, transparent);
+  color: var(--bridge-helper-fg);
+}
+
+.bridge-network-helper__person-menu-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: color-mix(in oklab, var(--bridge-helper-fg) 62%, transparent);
+}
+
+.bridge-network-helper__person-menu-icon svg,
+.bridge-network-helper__person-menu-item > svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+}
+
+.bridge-network-helper__person-menu-label,
+.bridge-network-helper__person-menu-description {
+  display: block;
+}
+
+.bridge-network-helper__person-menu-description {
+  margin-top: 0.125rem;
+  font-size: 11px;
+  font-weight: 400;
+  line-height: 1.35;
+  color: var(--bridge-helper-muted-fg);
+}
+
+.bridge-network-helper__load-more {
+  height: 1px;
+  width: 100%;
+}
+
+.bridge-network-helper__skeleton {
+  display: block;
+  border-radius: 9999px;
+  background: color-mix(in oklab, var(--bridge-helper-muted) 80%, transparent);
+}
+
+.bridge-network-helper__skeleton--avatar {
+  width: 2rem;
+  height: 2rem;
+  flex-shrink: 0;
+}
+
+.bridge-network-helper__skeleton--menu {
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+}
+
+.bridge-network-helper__skeleton--line {
+  height: 0.625rem;
+  width: 9rem;
+  margin-top: 0.35rem;
+}
+
+.bridge-network-helper__skeleton--line.is-name {
+  height: 0.875rem;
+  width: 7rem;
+  margin-top: 0;
+}
+
+.bridge-network-helper__skeleton--line.is-long {
+  width: 10rem;
+}
+
+.bridge-network-helper-avatar {
+  position: relative;
+  display: inline-block;
+  flex-shrink: 0;
+}
+
+.bridge-network-helper-avatar--sm {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 9px;
+}
+
+.bridge-network-helper-avatar--md {
+  width: 2rem;
+  height: 2rem;
+  font-size: 10px;
+}
+
+.bridge-network-helper-avatar__face {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: 9999px;
+  background: var(--bridge-helper-muted);
+  box-shadow: 0 0 0 2px var(--bridge-helper-bg);
+}
+
+.bridge-network-helper-avatar__face img,
+.bridge-network-helper-avatar__fallback {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  object-fit: cover;
+  object-position: top;
+  font-weight: 600;
+  color: white;
+}
+
+.bridge-network-helper-avatar__fallback.is-0 { background: linear-gradient(to bottom right, #475569, #1e293b); }
+.bridge-network-helper-avatar__fallback.is-1 { background: linear-gradient(to bottom right, #0038ff, #1e4fd6); }
+.bridge-network-helper-avatar__fallback.is-2 { background: linear-gradient(to bottom right, #7450da, #5a3fb8); }
+.bridge-network-helper-avatar__fallback.is-3 { background: linear-gradient(to bottom right, #0ea02e, #0b7d24); }
+.bridge-network-helper-avatar__fallback.is-4 { background: linear-gradient(to bottom right, #e19500, #c47f00); }
+.bridge-network-helper-avatar__fallback.is-5 { background: linear-gradient(to bottom right, #e13535, #b82b2b); }
+
+.bridge-network-helper-avatar__badge {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  width: 0.5rem;
+  height: 0.5rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background: var(--bridge-helper-accent);
+  color: white;
+  box-shadow: 0 0 0 1px var(--bridge-helper-bg);
+}
+
+.bridge-network-helper-avatar--md .bridge-network-helper-avatar__badge {
+  width: 0.625rem;
+  height: 0.625rem;
+  box-shadow: 0 0 0 1.5px var(--bridge-helper-bg);
+}
+
+.bridge-network-helper-avatar__badge svg {
+  width: 0.35rem;
+  height: 0.35rem;
+  stroke-width: 3.5;
+}
+
+@keyframes bridgeHelperIconEnter {
+  0% { opacity: 0; transform: scale(0.62); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+@keyframes bridgeHelperPersonEnter {
+  0% { opacity: 0; transform: translateY(6px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bridge-network-helper .dot,
+  .bridge-network-helper__icon-btn,
+  .bridge-network-helper__person {
+    animation: none !important;
+  }
+
+  .bridge-network-helper__list,
+  .bridge-network-helper__shell,
+  .bridge-network-helper__note-reveal,
+  .bridge-network-helper__note-reveal-inner {
+    transition: none !important;
+  }
+
+  .bridge-network-helper__note-reveal-inner {
+    transform: none !important;
+  }
+}