@brdgapp/ui 0.1.0 → 0.1.1

package/src/styles.css

@@ -1,848 +1 @@
-/* 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;
-  }
-}
+@import "./network-people-helper/styles.css";