body.winlink-public-beta-shell {
  background: #f3f8ff;
  overflow-x: hidden;
}

body.winlink-profile-media-viewer-open {
  overflow: hidden;
}

body.winlink-profile-edit-open {
  overflow: hidden;
}

body.winlink-profile-info-open {
  overflow: hidden;
}

body.winlink-public-beta-shell #appShell {
  max-width: 100%;
  min-height: 100dvh;
  background: #f3f8ff;
}

body.winlink-public-beta-shell #appScroll,
body.winlink-public-beta-shell .bottom-nav {
  display: none !important;
}

body.winlink-public-beta-shell.winlink-shell-workspace #appScroll {
  display: block !important;
  min-height: 100dvh;
  padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
  background: #f3f8ff;
}

body.winlink-public-beta-shell.winlink-shell-workspace #appScroll .sticky-head,
body.winlink-public-beta-shell.winlink-shell-workspace #appScroll .status-bar,
body.winlink-public-beta-shell.winlink-shell-workspace #appScroll .topbar {
  display: none !important;
}

.winlink-shell {
  --wl-blue-900: #0751b8;
  --wl-blue-800: #075fc8;
  --wl-blue-700: #0869d8;
  --wl-blue-500: #3d97ec;
  --wl-blue-100: #e8f3ff;
  --wl-header-blue-light: #1678d4;
  --wl-header-blue: #075fc8;
  --wl-header-blue-dark: #053f94;
  --wl-brand-gradient: linear-gradient(135deg, var(--wl-header-blue-light) 0%, var(--wl-header-blue) 48%, var(--wl-header-blue-dark) 100%);
  --wl-brand-green: #72d86e;
  --wl-header-icon-bg: rgba(255, 255, 255, 0.14);
  --wl-header-icon-border: rgba(255, 255, 255, 0.22);
  --wl-header-radius: 28px;
  --wl-header-shadow: 0 14px 30px rgba(5, 52, 124, 0.22);
  --wl-bottom-nav-bg: linear-gradient(135deg, var(--wl-header-blue-light) 0%, var(--wl-header-blue) 48%, var(--wl-header-blue-dark) 100%);
  --wl-bottom-nav-icon-size: 18px;
  --wl-bottom-nav-icon-stroke: 2.12;
  --wl-bottom-nav-label-size: 10.2px;
  --wl-bottom-nav-active-color: #ffd84d;
  --wl-bottom-nav-inactive-color: rgba(255, 255, 255, 0.88);
  --wl-bg: #f3f8ff;
  --wl-surface: #ffffff;
  --wl-text: #12345d;
  --wl-muted: #667a96;
  --wl-border: rgba(22, 90, 165, 0.14);
  --wl-radius-md: 16px;
  --wl-radius-lg: 22px;
  --wl-radius-xl: 28px;
  --wl-space-page-x: 12px;
  --wl-space-card: 14px;
  --wl-space-section-gap: 12px;
  --wl-space-field-gap: 8px;
  --wl-state-radius: 16px;
  --wl-finance-radius-sm: 12px;
  --wl-finance-radius-md: 16px;
  --wl-finance-radius-lg: 20px;
  --wl-finance-border: rgba(22, 90, 165, 0.14);
  --wl-finance-border-strong: #b9dfff;
  --wl-finance-panel: #f8fbff;
  --wl-finance-soft: #f3f8ff;
  --wl-finance-success-bg: #ecfdf5;
  --wl-finance-success-fg: #166534;
  --wl-finance-warning-bg: #fff7ed;
  --wl-finance-warning-fg: #c2410c;
  --wl-finance-danger-bg: #fff1f2;
  --wl-finance-danger-fg: #b91c1c;
  --wl-shadow-card: 0 12px 28px rgba(14, 75, 145, 0.1);
  --wl-shadow-soft: 0 8px 20px rgba(14, 75, 145, 0.08);
  --wl-bottom-nav-height: 72px;
  --wl-story-icon-box-size: 48px;
  --wl-story-icon-size: 23px;
  --wl-quick-label-color: #12345d;
  --wl-quick-icon-size: 58px;
  --wl-quick-icon-radius: 19px;
  --wl-quick-icon-glyph: 29px;
  --wl-quick-cashbook-gradient: linear-gradient(135deg, #1478f2 0%, #20b9e8 100%);
  --wl-quick-cashbook-shadow: rgba(20, 120, 242, 0.28);
  --wl-quick-finance-loans-gradient: linear-gradient(135deg, #6d4aff 0%, #315eeb 100%);
  --wl-quick-finance-loans-shadow: rgba(109, 74, 255, 0.3);
  --wl-quick-recent-transactions-gradient: linear-gradient(135deg, #25b85a 0%, #17c9a2 100%);
  --wl-quick-recent-transactions-shadow: rgba(37, 184, 90, 0.28);
  --wl-quick-debt-gradient: linear-gradient(135deg, #ffb43a 0%, #f27a24 100%);
  --wl-quick-debt-shadow: rgba(242, 122, 36, 0.28);
  --wl-quick-cash-out-gradient: linear-gradient(135deg, #ff5d67 0%, #ff7b4d 100%);
  --wl-quick-cash-out-shadow: rgba(255, 93, 103, 0.3);
  --wl-quick-cash-in-gradient: linear-gradient(135deg, #1687f8 0%, #11c8b1 100%);
  --wl-quick-cash-in-shadow: rgba(22, 135, 248, 0.28);
  --wl-quick-reports-gradient: linear-gradient(135deg, #226fe8 0%, #7a55f4 100%);
  --wl-quick-reports-shadow: rgba(34, 111, 232, 0.28);
  --wl-quick-sales-gradient: linear-gradient(135deg, #ff9b2f 0%, #ff624d 100%);
  --wl-quick-sales-shadow: rgba(255, 155, 47, 0.28);
  --wl-quick-inventory-gradient: linear-gradient(135deg, #f8b72a 0%, #f97316 100%);
  --wl-quick-inventory-shadow: rgba(248, 183, 42, 0.28);
  --wl-quick-production-gradient: linear-gradient(135deg, #31bf64 0%, #15945a 100%);
  --wl-quick-production-shadow: rgba(49, 191, 100, 0.28);
  --wl-quick-supply-demand-gradient: linear-gradient(135deg, #14b8a6 0%, #0ea5e9 100%);
  --wl-quick-supply-demand-shadow: rgba(20, 184, 166, 0.28);
  --wl-quick-default-gradient: var(--wl-brand-gradient);
  --wl-quick-default-shadow: rgba(8, 105, 216, 0.24);
  --chat-message-font-size: 20px;
  min-height: 100dvh;
  color: var(--wl-text);
  background: var(--wl-bg);
  padding-bottom: calc(var(--wl-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x: hidden;
}

.winlink-shell *,
.winlink-shell *::before,
.winlink-shell *::after {
  box-sizing: border-box;
}

.winlink-shell button,
.winlink-shell input,
.winlink-shell textarea,
.winlink-shell select {
  font: inherit;
}

.winlink-shell button {
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}

.winlink-shell button:focus-visible,
.winlink-shell input:focus-visible,
.winlink-shell textarea:focus-visible,
.winlink-shell select:focus-visible {
  outline: 3px solid rgba(61, 151, 236, 0.46);
  outline-offset: 2px;
}

.winlink-shell-header {
  position: sticky;
  top: 0;
  z-index: 1200;
  padding: 12px 18px 20px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
  color: #ffffff;
  background:
    radial-gradient(circle at 17% 22%, rgba(255, 255, 255, 0.13), transparent 32%),
    radial-gradient(circle at 82% 12%, rgba(114, 216, 110, 0.08), transparent 28%),
    var(--wl-brand-gradient);
  border-radius: 0 0 var(--wl-header-radius) var(--wl-header-radius);
  box-shadow: var(--wl-header-shadow);
}

.winlink-shell-top {
  width: min(100%, 540px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.winlink-shell-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  letter-spacing: 0;
  flex: 1 1 auto;
}

.winlink-shell-brand img {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 9px 14px rgba(3, 36, 86, 0.24));
}

.winlink-brand-copy {
  min-width: 0;
  inline-size: 96px;
  display: grid;
  gap: 2px;
  line-height: 1.05;
}

.winlink-brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  font-size: 26px;
  line-height: 1;
  font-weight: 850;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow: 0 2px 8px rgba(3, 42, 98, 0.18);
}

.winlink-brand-wordmark span:last-child {
  color: var(--wl-brand-green);
}

.winlink-brand-slogan {
  display: block;
  width: 128%;
  color: rgba(255, 255, 255, 0.92);
  font-size: 10.4px;
  line-height: 1.2;
  font-weight: 520;
  white-space: nowrap;
  transform: scaleX(0.78);
  transform-origin: left center;
  text-shadow: 0 1px 5px rgba(3, 42, 98, 0.14);
}

.winlink-shell-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.winlink-icon-button {
  position: relative;
  width: 40px;
  height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
}

.winlink-header-tool {
  width: 50px;
  padding: 0;
  grid-template-rows: 20px minmax(14px, auto);
  align-content: center;
  justify-items: center;
  gap: 1px;
}

.winlink-header-tool span {
  max-width: 100%;
  color: rgba(255, 255, 255, 0.94);
  font-size: 9.4px;
  line-height: 1.05;
  font-weight: 650;
  letter-spacing: 0;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.winlink-icon-button .wl-icon {
  width: 23px;
  height: 23px;
}

.winlink-icon-button:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.86);
}

.winlink-icon-button:active,
.winlink-shell-bottom-nav button:active,
.winlink-module-card:active,
.winlink-quick-item:active,
.winlink-story:active {
  transform: translateY(1px) scale(0.99);
}

.winlink-header-badge,
.winlink-notification-dot {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 19px;
  height: 19px;
  border-radius: 999px;
  border: 2px solid var(--wl-blue-800);
  background: #ef4444;
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  line-height: 1;
}

.winlink-search {
  width: min(100%, 540px);
  margin: 15px auto 0;
  min-height: 44px;
  border-radius: 999px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 11px 22px rgba(6, 45, 104, 0.16);
  overflow: hidden;
}

.winlink-search button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--wl-blue-700);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.winlink-search .wl-icon {
  width: 19px;
  height: 19px;
}

.winlink-search input {
  width: 100%;
  height: 32px;
  min-height: 32px;
  min-width: 0;
  margin: 0;
  padding: 3px 8px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  outline: 0;
  color: var(--wl-text);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 500;
  background: transparent;
  box-shadow: none;
}

.winlink-search input:focus,
.winlink-search input:focus-visible {
  border-color: transparent;
  outline: none;
  background: transparent;
  box-shadow: none;
}

.winlink-search input::placeholder {
  color: #7d91ab;
}

.winlink-shell-main {
  width: min(100%, 540px);
  margin: 0 auto;
  padding: 12px var(--wl-space-page-x) calc(var(--wl-bottom-nav-height) + env(safe-area-inset-bottom, 0px) + 16px);
}

.winlink-shell-main:focus {
  outline: none;
}

.winlink-points-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 10px;
}

.winlink-points-card {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 62px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 15px;
  text-align: left;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.winlink-points-card:active {
  transform: translateY(1px);
}

.winlink-points-card:focus-visible {
  outline: 2px solid var(--wl-blue-600);
  outline-offset: 2px;
}

.winlink-points-card--win {
  border-color: #f1d67a;
  background: linear-gradient(145deg, #fffbed, #fff2bd);
  color: #765000;
  box-shadow: 0 7px 18px rgba(176, 125, 0, 0.09);
}

.winlink-points-card--ai {
  border-color: #d9c9fa;
  background: linear-gradient(145deg, #fbf8ff, #eadfff);
  color: #5d329b;
  box-shadow: 0 7px 18px rgba(104, 63, 162, 0.09);
}

.winlink-points-card-icon {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.winlink-points-card-icon .wl-icon {
  width: 16px;
  height: 16px;
}

.winlink-points-card-copy {
  display: grid;
  grid-template-columns: max-content max-content;
  align-content: center;
  column-gap: 4px;
  min-width: 0;
  row-gap: 3px;
}

.winlink-points-card-name {
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 750;
}

.winlink-points-card-copy strong {
  font-size: 10.5px;
  line-height: 1.25;
  font-weight: 850;
  white-space: nowrap;
}

.winlink-points-card--win .winlink-points-card-copy strong {
  color: #9c6400;
}

.winlink-points-card--ai .winlink-points-card-copy strong {
  color: #733db1;
}

.winlink-points-card-copy small {
  grid-column: 1 / -1;
  color: #64748b;
  font-size: 9.5px;
  line-height: 1.25;
  white-space: nowrap;
}

.winlink-points-card-chevron {
  align-self: center;
  opacity: 0.62;
}

.winlink-points-card-chevron .wl-icon {
  width: 8px;
  height: 8px;
}

.winlink-tab-panel > h1,
.winlink-profile-title-row h1 {
  margin: 0;
  font-size: 21px;
  line-height: 1.22;
  font-weight: 820;
  letter-spacing: 0;
}

.winlink-panel-copy {
  margin: 4px 2px 14px;
  color: var(--wl-muted);
  font-size: 14px;
  line-height: 1.48;
}

.winlink-section {
  margin: var(--wl-space-section-gap) 0;
}

.winlink-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 2px 9px;
}

.winlink-section-head h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 750;
}

.winlink-stories {
  display: flex;
  gap: 11px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.winlink-stories::-webkit-scrollbar,
.winlink-feed-tabs::-webkit-scrollbar,
.winlink-quick-scroll::-webkit-scrollbar {
  display: none;
}

.winlink-story {
  position: relative;
  flex: 0 0 116px;
  min-height: 166px;
  border: 0;
  border-radius: 22px;
  padding: 12px;
  color: #ffffff;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  grid-template-rows: var(--wl-story-icon-box-size) auto;
  align-content: start;
  align-items: center;
  row-gap: 6px;
  text-align: center;
  box-shadow: var(--wl-shadow-card);
  scroll-snap-align: start;
}

.winlink-story::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 75% 12%, rgba(255, 255, 255, 0.28), transparent 30%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(6, 27, 64, 0.55));
  pointer-events: none;
}

.winlink-story-create {
  background: linear-gradient(160deg, #0751b8, #3d97ec);
}

.winlink-story-report {
  background: linear-gradient(160deg, #075fc8, #22c55e);
}

.winlink-story-ceo {
  background: linear-gradient(160deg, #12345d, #0869d8);
}

.winlink-story-shop {
  background: linear-gradient(160deg, #0869d8, #f59e0b);
}

.winlink-story-awards {
  background: linear-gradient(160deg, #0751b8, #8b5cf6);
}

.winlink-story-icon {
  position: relative;
  z-index: 1;
  width: var(--wl-story-icon-box-size);
  height: var(--wl-story-icon-box-size);
  min-width: var(--wl-story-icon-box-size);
  min-height: var(--wl-story-icon-box-size);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  margin-inline: auto;
  padding: 10px;
  margin-bottom: 10px;
  backdrop-filter: blur(8px);
}

.winlink-story-icon .wl-icon {
  width: var(--wl-story-icon-size);
  height: var(--wl-story-icon-size);
  flex: 0 0 var(--wl-story-icon-size);
  display: block;
}

.winlink-story-icon .wl-icon-plus {
  transform: scale(0.88);
  transform-origin: center;
}

.winlink-story-copy {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: minmax(2.4em, 2.4em) minmax(1.35em, auto);
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin-inline: auto;
  text-align: center;
  align-items: center;
  justify-items: center;
}

.winlink-story-copy b {
  width: 100%;
  min-height: 2.4em;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 780;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.winlink-story-copy small {
  display: block;
  width: 100%;
  min-height: 1.35em;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11.5px;
  line-height: 1.25;
  font-weight: 600;
  text-align: center;
  overflow-wrap: anywhere;
}

.winlink-section[aria-labelledby="wlQuickTitle"],
.winlink-feed-tabs,
.winlink-post {
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-radius-lg);
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow-soft);
}

.winlink-section[aria-labelledby="wlQuickTitle"] {
  padding: 13px 12px 12px;
}

.winlink-quick-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 1px 0 3px;
}

.winlink-quick-grid::-webkit-scrollbar {
  display: none;
}

.winlink-quick-grid--count-1 {
  grid-template-columns: minmax(96px, 128px);
  justify-content: center;
}

.winlink-quick-grid--count-2 {
  grid-template-columns: repeat(2, minmax(96px, 128px));
  justify-content: center;
}

.winlink-quick-grid--count-3 {
  grid-template-columns: repeat(3, minmax(82px, 1fr));
}

.winlink-quick-grid--count-4 {
  grid-template-columns: repeat(4, minmax(72px, 1fr));
}

.winlink-quick-item {
  border: 1px solid rgba(22, 90, 165, 0.12);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--wl-text);
  min-width: 0;
  min-height: 104px;
  padding: 10px 5px 9px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(14, 75, 145, 0.06);
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

.winlink-quick-icon {
  --wl-quick-gradient: var(--wl-quick-default-gradient);
  --wl-quick-shadow: var(--wl-quick-default-shadow);
  width: var(--wl-quick-icon-size);
  height: var(--wl-quick-icon-size);
  border-radius: var(--wl-quick-icon-radius);
  color: #ffffff;
  background: var(--wl-quick-gradient);
  border: 1px solid rgba(255, 255, 255, 0.58);
  display: grid;
  place-items: center;
  box-shadow: 0 12px 22px var(--wl-quick-shadow);
  flex: 0 0 auto;
  transition: box-shadow 0.16s ease;
}

.winlink-quick-icon .wl-icon {
  width: var(--wl-quick-icon-glyph);
  height: var(--wl-quick-icon-glyph);
  color: currentColor;
  stroke-width: 2.35;
}

.winlink-quick-icon .wl-icon-plus,
.winlink-quick-icon .wl-icon-minus {
  width: 30px;
  height: 30px;
  stroke-width: 2.9;
}

.winlink-quick-icon--cashbook {
  --wl-quick-gradient: var(--wl-quick-cashbook-gradient);
  --wl-quick-shadow: var(--wl-quick-cashbook-shadow);
}

.winlink-quick-icon--finance-loans {
  --wl-quick-gradient: var(--wl-quick-finance-loans-gradient);
  --wl-quick-shadow: var(--wl-quick-finance-loans-shadow);
}

.winlink-quick-icon--recent-transactions {
  --wl-quick-gradient: var(--wl-quick-recent-transactions-gradient);
  --wl-quick-shadow: var(--wl-quick-recent-transactions-shadow);
}

.winlink-quick-icon--debt {
  --wl-quick-gradient: var(--wl-quick-debt-gradient);
  --wl-quick-shadow: var(--wl-quick-debt-shadow);
}

.winlink-quick-icon--cash-out {
  --wl-quick-gradient: var(--wl-quick-cash-out-gradient);
  --wl-quick-shadow: var(--wl-quick-cash-out-shadow);
}

.winlink-quick-icon--cash-in {
  --wl-quick-gradient: var(--wl-quick-cash-in-gradient);
  --wl-quick-shadow: var(--wl-quick-cash-in-shadow);
}

.winlink-quick-icon--reports {
  --wl-quick-gradient: var(--wl-quick-reports-gradient);
  --wl-quick-shadow: var(--wl-quick-reports-shadow);
}

.winlink-quick-icon--sales {
  --wl-quick-gradient: var(--wl-quick-sales-gradient);
  --wl-quick-shadow: var(--wl-quick-sales-shadow);
}

.winlink-quick-icon--inventory {
  --wl-quick-gradient: var(--wl-quick-inventory-gradient);
  --wl-quick-shadow: var(--wl-quick-inventory-shadow);
}

.winlink-quick-icon--production {
  --wl-quick-gradient: var(--wl-quick-production-gradient);
  --wl-quick-shadow: var(--wl-quick-production-shadow);
}

.winlink-quick-icon--supply-demand {
  --wl-quick-gradient: var(--wl-quick-supply-demand-gradient);
  --wl-quick-shadow: var(--wl-quick-supply-demand-shadow);
}

.winlink-quick-label {
  max-width: 100%;
  min-height: 2.38em;
  color: var(--wl-quick-label-color);
  font-size: 12.6px;
  font-weight: 700;
  line-height: 1.19;
  text-align: center;
  overflow-wrap: normal;
  word-break: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.winlink-quick-state,
.winlink-quick-warning,
.winlink-quick-empty,
.winlink-empty,
.winlink-loading-state,
.winlink-error-state {
  border-radius: var(--wl-state-radius);
  background: #f4f9ff;
  color: var(--wl-muted);
  padding: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.winlink-quick-empty,
.winlink-empty,
.winlink-loading-state,
.winlink-error-state {
  display: grid;
  gap: 5px;
}

.winlink-quick-empty b,
.winlink-empty b,
.winlink-loading-state b,
.winlink-error-state b {
  color: var(--wl-text);
}

.winlink-quick-warning {
  margin-top: 8px;
  color: #9a3412;
  background: #fff7ed;
}

.winlink-error-state {
  background: #fff2f2;
  color: #b42318;
}

.winlink-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(5, 31, 70, 0.38);
  display: grid;
  align-items: end;
  padding: 18px 12px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

.winlink-profile-centered-backdrop {
  align-items: center;
  justify-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
  min-height: 100dvh;
}

.winlink-quick-pref-dialog {
  width: min(100%, 540px);
  max-height: min(86dvh, 720px);
  margin: 0 auto;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.26);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

.winlink-password-dialog {
  width: min(100%, 460px);
  max-height: min(86dvh, 680px);
  margin: 0 auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.26);
  overflow: hidden;
}

.winlink-profile-edit-dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: min(91dvh, 760px);
  margin: 0 auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.26);
  overflow: hidden;
}

.winlink-profile-media-dialog {
  width: min(100%, 540px);
  max-height: min(90dvh, 740px);
  margin: 0 auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.26);
  overflow: hidden;
}

.winlink-password-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(86dvh, 680px);
}

.winlink-profile-edit-dialog form {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(91dvh, 760px);
}

.winlink-quick-pref-head,
.winlink-quick-pref-footer,
.winlink-password-dialog-head,
.winlink-password-dialog-footer,
.winlink-profile-edit-head,
.winlink-profile-edit-footer,
.winlink-profile-media-head,
.winlink-profile-media-footer {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-quick-pref-head {
  border-bottom: 1px solid var(--wl-border);
}

.winlink-password-dialog-head,
.winlink-profile-edit-head,
.winlink-profile-media-head {
  border-bottom: 1px solid var(--wl-border);
}

.winlink-quick-pref-head h2,
.winlink-quick-pref-head p,
.winlink-quick-pref-body h3,
.winlink-password-dialog-head h2,
.winlink-password-dialog-head p,
.winlink-profile-edit-head h2,
.winlink-profile-edit-head p,
.winlink-profile-media-head h2,
.winlink-profile-media-head p {
  margin: 0;
}

.winlink-quick-pref-head h2,
.winlink-password-dialog-head h2,
.winlink-profile-edit-head h2,
.winlink-profile-media-head h2 {
  font-size: 17px;
  font-weight: 600;
  color: var(--wl-text);
}

.winlink-quick-pref-head p,
.winlink-password-dialog-head p,
.winlink-profile-edit-head p,
.winlink-profile-media-head p {
  margin-top: 3px;
  color: var(--wl-muted);
  font-size: 12.5px;
}

.winlink-quick-pref-head > button,
.winlink-password-dialog-head > button,
.winlink-profile-edit-head > button,
.winlink-profile-media-head > button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--wl-text);
  font-size: 22px;
  cursor: pointer;
}

.winlink-quick-pref-head > button:hover,
.winlink-password-dialog-head > button:hover,
.winlink-profile-edit-head > button:hover,
.winlink-profile-media-head > button:hover,
.winlink-profile-info-head > button:hover {
  background: #dc2626;
  color: #ffffff;
}

.winlink-password-dialog-body,
.winlink-profile-edit-body {
  min-height: 0;
  overflow: auto;
  padding: 9px 14px 0;
  display: grid;
  gap: 9px;
  overscroll-behavior: contain;
}

.winlink-profile-media-body {
  min-height: 0;
  overflow: auto;
  padding: 14px;
  display: grid;
  gap: 13px;
}

.winlink-profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.winlink-profile-edit-section {
  display: grid;
  gap: 8px;
  padding: 0 0 10px;
  border-bottom: 1px solid rgba(213, 226, 242, 0.82);
}

.winlink-profile-edit-section h3 {
  margin: 0;
  color: var(--wl-text);
  font-size: 13px;
  font-weight: 560;
  line-height: 1.2;
}

.winlink-password-field,
.winlink-profile-edit-field {
  display: grid;
  gap: 5px;
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 480;
}

.winlink-profile-edit-field input,
.winlink-profile-edit-field textarea,
.winlink-profile-edit-field select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--wl-text);
  padding: 8px 11px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}

.winlink-profile-edit-field input[aria-invalid="true"],
.winlink-profile-edit-field textarea[aria-invalid="true"],
.winlink-profile-edit-field select[aria-invalid="true"],
.winlink-profile-edit-field.has-error .winlink-profile-username-input,
.winlink-profile-edit-field.has-error .winlink-profile-region-picker button,
.winlink-profile-edit-field.has-error .winlink-profile-occupation-picker > button,
.winlink-profile-edit-privacy-field.has-error .winlink-profile-region-picker button {
  border-color: #dc2626;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}

.winlink-profile-edit-field input[readonly] {
  background: #f4f8fd;
  color: var(--wl-muted);
}

.winlink-profile-edit-field textarea {
  resize: vertical;
  min-height: 78px;
  max-height: 148px;
  line-height: 1.4;
}

.winlink-profile-edit-field small {
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.3;
}

.winlink-profile-edit-field small:empty {
  display: none;
}

.winlink-profile-edit-field .winlink-profile-edit-helper {
  color: var(--wl-muted);
}

.winlink-profile-edit-privacy-field {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.winlink-profile-edit-privacy-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 480;
  line-height: 1.2;
}

.winlink-profile-edit-privacy-control,
.winlink-profile-edit-privacy-control .winlink-profile-edit-field {
  min-width: 0;
}

.winlink-profile-edit-privacy-control .winlink-profile-edit-field > span {
  display: none;
}

.winlink-profile-edit-visibility {
  flex: 0 0 auto;
  max-width: 112px;
  min-height: 30px;
  border: 1px solid rgba(168, 187, 211, 0.72);
  border-radius: 999px;
  background: rgba(248, 251, 255, 0.72);
  color: var(--wl-text);
  padding: 4px 22px 4px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 430;
}

.winlink-profile-region-picker,
.winlink-profile-occupation-picker {
  min-width: 0;
}

.winlink-profile-region-picker button,
.winlink-profile-occupation-picker > button {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: #ffffff;
  color: var(--wl-text);
  padding: 8px 11px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.winlink-profile-region-picker button small,
.winlink-profile-occupation-picker > button small {
  color: var(--wl-muted);
  font-size: 12px;
  font-weight: 400;
}

.winlink-profile-occupation-picker {
  display: grid;
  gap: 6px;
}

.winlink-profile-occupation-picker .winlink-profile-edit-field > span {
  display: none;
}

.winlink-profile-region-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12;
  background: rgba(4, 14, 35, 0.24);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 10px calc(env(safe-area-inset-bottom, 0px) + 10px);
}

.winlink-profile-region-sheet {
  width: min(100%, 520px);
  max-height: min(620px, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 20px));
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(4, 22, 50, 0.24);
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
}

.winlink-profile-region-head {
  min-height: 46px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(213, 226, 242, 0.82);
}

.winlink-profile-region-head h3 {
  margin: 0;
  text-align: center;
  color: var(--wl-text);
  font-size: 15px;
  font-weight: 560;
}

.winlink-profile-region-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--wl-text);
  font-size: 21px;
  cursor: pointer;
}

.winlink-profile-region-search {
  padding: 9px 12px;
}

.winlink-profile-region-search input {
  width: 100%;
  min-height: 39px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: #f8fbff;
  color: var(--wl-text);
  padding: 8px 11px;
  font: inherit;
  font-size: 15px;
  font-weight: 400;
}

.winlink-profile-region-list {
  min-height: 0;
  overflow: auto;
  padding: 2px 8px calc(env(safe-area-inset-bottom, 0px) + 10px);
}

.winlink-profile-region-list button {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wl-text);
  padding: 8px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 430;
}

.winlink-profile-region-list button small {
  color: var(--wl-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.winlink-profile-region-list button b {
  color: var(--wl-muted);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.winlink-profile-region-list button.is-selected {
  background: rgba(8, 105, 216, 0.09);
  color: var(--wl-blue-700);
}

.winlink-profile-region-list button.is-selected b {
  color: var(--wl-blue-700);
}

.winlink-profile-region-list p {
  margin: 18px 8px;
  color: var(--wl-muted);
  text-align: center;
  font-size: 13px;
  font-weight: 400;
}

.winlink-profile-occupation-list .winlink-profile-occupation-group {
  margin: 10px 10px 4px;
  color: var(--wl-muted);
  text-align: left;
  font-size: 11.5px;
  font-weight: 500;
  text-transform: none;
}

.winlink-profile-username-input {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: #ffffff;
  overflow: hidden;
}

.winlink-profile-username-input b {
  padding-left: 12px;
  color: var(--wl-muted);
}

.winlink-profile-username-input input {
  border: 0;
  border-radius: 0;
  min-height: 40px;
  padding-left: 2px;
}

[data-wl-profile-username-status][data-status="ok"] {
  color: #047857;
}

[data-wl-profile-username-status][data-status="checking"] {
  color: var(--wl-muted);
}

.winlink-profile-edit-toggles {
  display: grid;
  gap: 7px;
}

.winlink-profile-edit-account {
  border-bottom: 0;
}

.winlink-profile-edit-account .winlink-profile-row {
  margin: 0;
  box-shadow: none;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
}

.winlink-profile-edit-account .winlink-account-menu-row {
  box-shadow: none;
  border-radius: 12px;
  min-height: 42px;
  padding: 8px 10px;
}

.winlink-profile-edit-toggle {
  min-height: 42px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: #f8fbff;
  color: var(--wl-text);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 11px;
  font-size: 12.5px;
  font-weight: 430;
}

.winlink-profile-edit-toggle span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.winlink-profile-edit-toggle b {
  font-size: 12.5px;
  font-weight: 500;
}

.winlink-profile-edit-toggle small {
  color: var(--wl-muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.3;
}

.winlink-profile-edit-toggle input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.winlink-password-wrap {
  position: relative;
  display: block;
}

.winlink-password-wrap input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--wl-border);
  border-radius: 14px;
  background: #ffffff;
  color: var(--wl-text);
  padding: 10px 54px 10px 12px;
  font: inherit;
  font-size: 16px;
}

.winlink-password-eye {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wl-blue-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.winlink-password-eye svg {
  width: 21px;
  height: 21px;
  display: block;
  pointer-events: none;
}

.winlink-password-eye [data-eye-off] {
  display: none;
}

.winlink-password-eye[aria-pressed="true"] [data-eye-on] {
  display: none;
}

.winlink-password-eye[aria-pressed="true"] [data-eye-off] {
  display: block;
}

.winlink-password-status,
.winlink-profile-edit-status {
  min-height: 20px;
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 400;
}

.winlink-password-status.err,
.winlink-profile-edit-status.err,
.winlink-profile-media-status.err,
.winlink-profile-error {
  color: #b91c1c;
}

.winlink-password-dialog-footer,
.winlink-profile-edit-footer,
.winlink-profile-media-footer {
  border-top: 1px solid var(--wl-border);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
}

.winlink-profile-edit-footer {
  position: sticky;
  bottom: 0;
  background: rgba(255, 255, 255, 0.98);
  z-index: 1;
}

.winlink-password-dialog-footer button,
.winlink-profile-edit-footer button,
.winlink-profile-media-footer button {
  min-height: 44px;
  border: 1px solid var(--wl-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--wl-blue-700);
  padding: 8px 12px;
  font-weight: 480;
  cursor: pointer;
}

.winlink-profile-edit-footer .winlink-primary-action:disabled {
  background: #e8f0fa;
  color: #7a8ca5;
  cursor: not-allowed;
  box-shadow: none;
}

.winlink-profile-edit-discard {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.winlink-profile-edit-discard span {
  min-width: 0;
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 560;
}

.winlink-profile-edit-discard button {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 520;
}

.winlink-identity-backdrop {
  z-index: 1500;
}

.winlink-identity-dialog {
  position: relative;
  width: min(100%, 560px);
  max-height: min(94dvh, 780px);
  margin: 0 auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.26);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.winlink-identity-head {
  min-height: 56px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid var(--wl-border);
}

.winlink-identity-head button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--wl-text);
  font-size: 18px;
  cursor: pointer;
}

.winlink-identity-head h2,
.winlink-identity-head p {
  margin: 0;
}

.winlink-identity-head h2 {
  color: var(--wl-text);
  font-size: 17px;
  font-weight: 600;
}

.winlink-identity-head p {
  margin-top: 3px;
  color: var(--wl-muted);
  font-size: 12px;
  font-weight: 400;
}

.winlink-identity-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 14px calc(env(safe-area-inset-bottom, 0px) + 14px);
  display: grid;
  align-content: start;
  gap: 12px;
  overscroll-behavior: contain;
}

.winlink-identity-empty {
  min-height: 170px;
  display: grid;
  place-items: center;
  gap: 10px;
  text-align: center;
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 400;
}

.winlink-identity-empty b {
  color: var(--wl-text);
  font-size: 14px;
  font-weight: 560;
}

.winlink-identity-form {
  display: grid;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(213, 226, 242, 0.82);
}

.winlink-identity-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.winlink-identity-number-gate,
.winlink-identity-confirm {
  margin: 0;
  color: var(--wl-muted);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.35;
}

.winlink-identity-confirm {
  color: #8a5b00;
}

.winlink-identity-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.winlink-identity-form-actions button,
.winlink-identity-empty button,
.winlink-identity-image-actions button,
.winlink-identity-image-pickers button,
.winlink-identity-document-actions button {
  min-height: 38px;
  border: 1px solid var(--wl-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--wl-blue-700);
  padding: 7px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 480;
  cursor: pointer;
}

.winlink-identity-images {
  display: grid;
  gap: 9px;
}

.winlink-identity-image-slot {
  min-width: 0;
  border: 1px solid var(--wl-border);
  border-radius: 14px;
  background: #f8fbff;
  padding: 10px;
  display: grid;
  gap: 8px;
}

.winlink-identity-image-slot > div:first-child,
.winlink-identity-document-actions {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.winlink-identity-image-slot b,
.winlink-identity-document-actions span {
  color: var(--wl-text);
  font-size: 13px;
  font-weight: 500;
}

.winlink-identity-image-slot small {
  color: var(--wl-muted);
  font-size: 11.5px;
  font-weight: 400;
}

.winlink-identity-image-slot .winlink-identity-image-error {
  color: #b42318;
}

.winlink-identity-image-pickers {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-self: start;
}

.winlink-identity-image-pickers input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.winlink-identity-thumb {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
  background: #edf4fb;
  cursor: pointer;
}

.winlink-identity-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.winlink-identity-image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.winlink-identity-status {
  min-height: 20px;
  color: var(--wl-muted);
  font-size: 12.5px;
  font-weight: 400;
}

.winlink-identity-status.err {
  color: #b91c1c;
}

.winlink-identity-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2600;
  background: rgba(2, 12, 30, 0.92);
  color: #ffffff;
  display: grid;
  place-items: stretch;
}

.winlink-identity-viewer {
  width: 100%;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #07101f;
  overflow: hidden;
}

.winlink-identity-viewer-head {
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 38px;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.winlink-identity-viewer-head button {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 22px;
}

.winlink-identity-viewer-head h2,
.winlink-identity-viewer-head p {
  margin: 0;
}

.winlink-identity-viewer-head h2 {
  font-size: 15px;
  font-weight: 600;
}

.winlink-identity-viewer-head p {
  margin-top: 2px;
  color: rgba(248, 251, 255, 0.68);
  font-size: 11.5px;
  font-weight: 400;
}

.winlink-identity-viewer-stage {
  min-height: 0;
  display: grid;
  place-items: center;
  background: #050b14;
  overflow: hidden;
}

.winlink-identity-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.winlink-quick-pref-body {
  min-height: 0;
  overflow: auto;
  padding: 12px 14px;
  display: grid;
  gap: 14px;
}

.winlink-quick-pref-body section {
  display: grid;
  gap: 8px;
}

.winlink-quick-pref-body h3 {
  color: var(--wl-text);
  font-size: 14px;
}

.winlink-quick-pref-row {
  min-width: 0;
  border: 1px solid var(--wl-border);
  border-radius: 16px;
  background: #ffffff;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
}

.winlink-quick-pref-row.is-disabled {
  background: #f8fbff;
  opacity: 0.76;
}

.winlink-quick-pref-toggle {
  min-width: 0;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--wl-text);
  display: grid;
  grid-template-columns: 22px 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.winlink-quick-pref-toggle:disabled {
  cursor: not-allowed;
}

.winlink-quick-pref-check {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid var(--wl-border);
  display: grid;
  place-items: center;
  color: var(--wl-blue-700);
  font-weight: 900;
}

.winlink-quick-icon--pref {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  box-shadow: 0 8px 16px var(--wl-quick-shadow);
}

.winlink-quick-icon--pref .wl-icon {
  width: 21px;
  height: 21px;
}

.winlink-quick-icon--pref .wl-icon-plus,
.winlink-quick-icon--pref .wl-icon-minus {
  width: 22px;
  height: 22px;
  stroke-width: 2.9;
}

.winlink-quick-pref-toggle b {
  min-width: 0;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.winlink-quick-pref-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.winlink-quick-pref-copy > span {
  color: var(--wl-muted);
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.winlink-quick-pref-row small,
.winlink-quick-pref-badge {
  color: var(--wl-muted);
  font-size: 12px;
  text-align: right;
}

.winlink-quick-pref-badge {
  justify-self: end;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f4f9ff;
  color: var(--wl-muted);
  font-weight: 800;
  line-height: 1.15;
}

.winlink-quick-pref-row.is-disabled .winlink-quick-pref-badge {
  background: #fff7ed;
  color: #9a3412;
}

.winlink-quick-pref-order {
  display: inline-flex;
  gap: 5px;
}

.winlink-quick-pref-order button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--wl-border);
  border-radius: 11px;
  background: #f4f9ff;
  color: var(--wl-blue-700);
  font-weight: 900;
  cursor: pointer;
}

.winlink-quick-pref-order button:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.winlink-quick-pref-empty,
.winlink-quick-pref-error {
  border-radius: 14px;
  padding: 11px;
  background: #f4f9ff;
  color: var(--wl-muted);
  font-size: 13px;
}

.winlink-quick-pref-error {
  background: #fef2f2;
  color: #b91c1c;
}

.winlink-quick-pref-footer {
  border-top: 1px solid var(--wl-border);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
}

.winlink-quick-pref-footer button {
  min-height: 40px;
  border: 1px solid var(--wl-border);
  border-radius: 999px;
  background: #ffffff;
  color: var(--wl-blue-700);
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

.winlink-feed-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding: 4px;
  margin: 10px 0;
  scrollbar-width: none;
  border-radius: 16px;
}

.winlink-feed-tabs button {
  position: relative;
  flex: 0 0 auto;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--wl-muted);
  min-height: 36px;
  padding: 7px 10px;
  font-size: 12.5px;
  font-weight: 760;
  cursor: pointer;
}

.winlink-feed-tabs button.active {
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
}

.winlink-post-list {
  display: grid;
  gap: 12px;
}

.winlink-post {
  padding: 14px;
  border-radius: 22px;
}

.winlink-post-head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
}

.winlink-avatar,
.winlink-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: linear-gradient(160deg, var(--wl-blue-900), var(--wl-blue-500));
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
  box-shadow: 0 8px 14px rgba(8, 105, 216, 0.14);
}

.winlink-profile-avatar {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  position: relative;
  font-size: 18px;
}

.winlink-avatar-business {
  background: linear-gradient(160deg, #12345d, #22c55e);
}

.winlink-avatar .wl-icon,
.winlink-profile-avatar .wl-icon {
  width: 24px;
  height: 24px;
}

.winlink-post-author {
  min-width: 0;
}

.winlink-post h3 {
  margin: 0;
  color: var(--wl-text);
  font-size: 14.5px;
  line-height: 1.25;
  font-weight: 750;
  display: flex;
  align-items: center;
  gap: 5px;
}

.winlink-post-author span {
  color: var(--wl-muted);
  font-size: 12px;
}

.winlink-verified-badge {
  color: var(--wl-blue-700);
  display: inline-grid;
}

.winlink-verified-badge .wl-icon {
  width: 16px;
  height: 16px;
}

.winlink-post-more {
  width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 14px;
  background: #f4f9ff;
  color: var(--wl-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.winlink-post-more .wl-icon {
  width: 20px;
  height: 20px;
}

.winlink-post-badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  margin-top: 10px;
  border-radius: 999px;
  background: rgba(8, 105, 216, 0.09);
  color: var(--wl-blue-700);
  padding: 4px 8px;
  font-size: 11.5px;
  font-weight: 700;
}

.winlink-post p {
  margin: 9px 0 11px;
  color: var(--wl-text);
  font-size: 14.25px;
  line-height: 1.52;
}

.winlink-post-visual {
  position: relative;
  min-height: 142px;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  color: #ffffff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  text-align: center;
}

.winlink-post-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.32), transparent 22%),
    radial-gradient(circle at 78% 18%, rgba(255, 255, 255, 0.18), transparent 25%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(7, 20, 50, 0.22));
}

.winlink-post-visual-platform {
  background: linear-gradient(145deg, #0751b8, #0869d8 58%, #3d97ec);
}

.winlink-post-visual-business {
  background: linear-gradient(145deg, #12345d, #0869d8 52%, #22c55e);
}

.winlink-post-visual span,
.winlink-post-visual b,
.winlink-post-visual small {
  position: relative;
  z-index: 1;
}

.winlink-post-visual span {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  backdrop-filter: blur(8px);
}

.winlink-post-visual .wl-icon {
  width: 25px;
  height: 25px;
}

.winlink-post-visual b {
  font-size: 20px;
  font-weight: 800;
}

.winlink-post-visual small {
  color: rgba(255, 255, 255, 0.82);
  font-size: 12.5px;
  font-weight: 600;
}

.winlink-post-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 9px 0 0;
  color: var(--wl-muted);
  font-size: 12.5px;
}

.winlink-post-stats span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.winlink-post-stats .wl-icon {
  width: 16px;
  height: 16px;
  color: var(--wl-blue-700);
}

.winlink-post-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--wl-border);
}

.winlink-post-actions button {
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wl-muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 11.6px;
  font-weight: 700;
  cursor: pointer;
}

.winlink-post-actions .wl-icon {
  width: 18px;
  height: 18px;
}

.winlink-post-actions button.active,
.winlink-post-actions button[aria-pressed="true"] {
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
}

.winlink-reel-card,
.winlink-supply-card,
.winlink-friends-card,
.winlink-friends-group,
.winlink-profile-card,
.winlink-profile-composer,
.winlink-profile-media,
.winlink-profile-video,
.winlink-section .winlink-profile-row,
.winlink-notification-item,
.winlink-notification-summary,
.winlink-module-card {
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-radius-lg);
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow-soft);
}

.winlink-reel-card {
  padding: 16px;
}

.winlink-reel-screen {
  width: min(260px, 82vw);
  aspect-ratio: 9 / 16;
  margin: 0 auto 12px;
  border-radius: 26px;
  background: linear-gradient(180deg, #06294f, #0869d8);
  color: #ffffff;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
}

.winlink-reel-screen span {
  font-size: 15px;
}

.winlink-reel-screen b {
  font-size: 34px;
}

.winlink-reel-card p {
  margin: 0;
  text-align: center;
  color: var(--wl-muted);
  font-weight: 700;
}

.winlink-friends-card {
  padding: 20px 16px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 8px;
}

.winlink-friends-hero {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  color: #ffffff;
  background: var(--wl-brand-gradient);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px rgba(8, 105, 216, 0.18);
}

.winlink-friends-hero .wl-icon {
  width: 28px;
  height: 28px;
}

.winlink-friends-card b,
.winlink-friends-group b {
  color: var(--wl-text);
}

.winlink-friends-card p {
  max-width: 460px;
  margin: 0;
  color: var(--wl-muted);
  line-height: 1.45;
  font-weight: 650;
}

.winlink-friends-grid {
  display: grid;
  gap: 10px;
}

.winlink-friends-group {
  padding: 14px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  opacity: 0.82;
}

.winlink-friends-group span {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: var(--wl-blue-700);
  background: var(--wl-blue-100);
  display: grid;
  place-items: center;
}

.winlink-friends-group .wl-icon {
  width: 22px;
  height: 22px;
}

.winlink-friends-group small {
  color: var(--wl-muted);
  line-height: 1.3;
}

.winlink-friends-center-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.winlink-friends-center-head h1 {
  margin: 0;
}

.winlink-friends-center-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.winlink-friends-center-add,
.winlink-friends-center-scan {
  width: 40px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wl-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: inherit;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}

.winlink-friends-center-add:hover,
.winlink-friends-center-add:active,
.winlink-friends-center-scan:hover,
.winlink-friends-center-scan:active {
  color: var(--wl-blue-900);
  background: rgba(0, 91, 172, 0.07);
}

.winlink-friends-center-scan .wl-icon {
  width: 22px;
  height: 22px;
}

.winlink-friends-center-add span {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.winlink-friends-center-search {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}

.winlink-friends-center-helper {
  margin: 0;
  color: var(--wl-muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.35;
}

.winlink-friends-center-tabs {
  margin-bottom: 10px;
}

.winlink-friends-center-body,
.winlink-friends-center-section {
  display: grid;
  gap: 10px;
}

.winlink-friends-center-section h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--wl-text);
}

.winlink-module-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.winlink-module-card {
  width: 100%;
  min-height: 154px;
  padding: 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  justify-items: start;
  gap: 8px;
  text-align: left;
  color: var(--wl-text);
  cursor: pointer;
  border-radius: 20px;
}

.winlink-module-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.winlink-module-copy b {
  font-size: 14.5px;
  line-height: 1.22;
  overflow-wrap: anywhere;
}

.winlink-module-copy small {
  color: var(--wl-muted);
  font-size: 12.2px;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.winlink-module-status {
  max-width: 96px;
  border-radius: 999px;
  padding: 5px 8px;
  background: #f4f9ff;
  color: var(--wl-muted);
  font-size: 10.8px;
  font-weight: 800;
  text-align: center;
  line-height: 1.16;
  justify-self: start;
  margin-top: auto;
}

.winlink-module-status[data-status="active"] {
  background: #dcfce7;
  color: #166534;
}

.winlink-module-status[data-status="inactive"] {
  background: #fff7ed;
  color: #9a3412;
}

.winlink-module-status[data-status="comingSoon"],
.winlink-module-status[data-status="comingsoon"] {
  background: #e0f2fe;
  color: #075985;
}

.winlink-module-icon {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
  display: grid;
  place-items: center;
}

.winlink-module-icon .wl-icon {
  width: 22px;
  height: 22px;
}

.wl-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.winlink-supply-grid {
  display: grid;
  gap: 12px;
}

.winlink-supply-card {
  padding: 15px;
  display: grid;
  gap: 7px;
}

.winlink-supply-card span {
  color: var(--wl-blue-700);
  font-weight: 800;
}

.winlink-supply-card b {
  font-size: 17px;
}

.winlink-supply-card p {
  margin: 0;
  color: var(--wl-muted);
  line-height: 1.42;
}

.winlink-primary-action,
.winlink-logout-button {
  width: 100%;
  border: 0;
  border-radius: 17px;
  min-height: 50px;
  padding: 12px;
  font-weight: 800;
  cursor: pointer;
  margin-top: 12px;
}

.winlink-primary-action {
  background: var(--wl-blue-700);
  color: #ffffff;
}

.winlink-notification-summary {
  padding: 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.winlink-notification-summary b {
  font-size: 28px;
  color: var(--wl-blue-700);
}

.winlink-notification-list {
  display: grid;
  gap: 9px;
}

.winlink-notification-item {
  padding: 12px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
}

button.winlink-notification-item {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.winlink-notification-item span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: var(--wl-blue-700);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 800;
}

.winlink-notification-item p {
  margin: 0;
  line-height: 1.35;
  display: grid;
  gap: 2px;
}

.winlink-notification-item p b {
  color: var(--wl-blue-900);
  font-size: 13.5px;
}

.winlink-notification-item p small {
  color: var(--wl-muted);
  font-size: 12.5px;
}

.winlink-notification-item.is-read {
  opacity: 0.68;
}

.winlink-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.winlink-chip-row span {
  border-radius: 999px;
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
  padding: 8px 11px;
  font-weight: 800;
}

.winlink-section .winlink-profile-row {
  padding: 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.winlink-profile-row span {
  color: var(--wl-muted);
}

.winlink-profile-row b {
  text-align: right;
  overflow-wrap: anywhere;
}

.winlink-logout-button {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 16px;
  background: #dc2626;
  color: #ffffff;
  font-weight: 850;
  cursor: pointer;
}

.winlink-profile-page {
  width: min(100%, 760px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.winlink-profile-social {
  display: grid;
  gap: 12px;
}

.winlink-account-accordion {
  padding: 0 14px 14px;
  display: grid;
  gap: 12px;
  animation: winlink-account-panel-in 0.18s ease;
}

.winlink-account-accordion[hidden] {
  display: none;
  padding: 0;
  margin: 0;
}

.winlink-account-menu-group {
  display: grid;
  gap: 8px;
}

.winlink-account-menu-group h2 {
  margin: 2px 0;
  color: var(--wl-text);
  font-size: 13px;
}

.winlink-account-menu-row {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--wl-border);
  border-radius: 16px;
  background: rgba(232, 243, 255, 0.52);
  color: var(--wl-text);
  padding: 10px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  text-align: left;
  cursor: pointer;
}

.winlink-account-menu-group .winlink-profile-row {
  border: 1px solid var(--wl-border);
  border-radius: 16px;
  background: rgba(232, 243, 255, 0.52);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-account-menu-row > span:first-child {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--wl-blue-700);
  display: grid;
  place-items: center;
}

.winlink-account-menu-row .wl-icon {
  width: 18px;
  height: 18px;
}

.winlink-account-menu-row.is-danger {
  color: #b91c1c;
}

.winlink-account-menu-row.is-danger > span:first-child {
  color: #dc2626;
  background: #fff1f2;
}

.winlink-account-menu-row.is-danger:hover,
.winlink-account-menu-row.is-danger:active {
  border-color: rgba(220, 38, 38, 0.24);
  background: #fff7f7;
}

.winlink-account-menu-row b {
  display: block;
  font-size: 13.5px;
}

.winlink-profile-card {
  overflow: hidden;
  height: auto;
  position: relative;
  border: 1px solid rgba(193, 211, 232, 0.86);
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(14, 75, 145, 0.1);
}

.winlink-profile-cover {
  min-height: clamp(150px, 32vw, 188px);
  background:
    radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.36), transparent 24%),
    linear-gradient(135deg, rgba(7, 81, 184, 0.9), rgba(8, 105, 216, 0.78) 58%, rgba(114, 216, 110, 0.68)),
    #e8f3ff;
  background-size: cover;
  background-position: center;
  position: relative;
}

.winlink-profile-cover.is-viewable {
  cursor: zoom-in;
}

.winlink-profile-media-button {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--wl-blue-700);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(2, 20, 52, 0.18);
}

.winlink-profile-cover-button {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.winlink-profile-account-button {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
}

.winlink-profile-title-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.winlink-profile-title-row h1 {
  min-width: 0;
}

.winlink-profile-title-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
}

.winlink-profile-back-chip {
  min-height: 36px;
  border: 1px solid rgba(220, 38, 38, 0.16);
  border-radius: 999px;
  background: #ffffff;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2, 20, 52, 0.08);
  white-space: nowrap;
}

.winlink-profile-settings-chip {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wl-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 6px 7px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}

.winlink-profile-settings-chip:hover,
.winlink-profile-settings-chip:active {
  background: rgba(9, 105, 218, 0.08);
}

.winlink-profile-logout-chip {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #dc2626;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 4px 7px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  white-space: nowrap;
}

.winlink-profile-logout-chip:hover,
.winlink-profile-logout-chip:active {
  background: rgba(220, 38, 38, 0.07);
}

.winlink-profile-logout-chip:disabled,
.winlink-profile-back-chip:disabled {
  opacity: 0.72;
  cursor: wait;
}

.winlink-profile-media-button .wl-icon {
  width: 17px;
  height: 17px;
}

.winlink-profile-logout-chip .wl-icon,
.winlink-profile-settings-chip .wl-icon,
.winlink-profile-back-chip .wl-icon {
  width: 15px;
  height: 15px;
  stroke-width: 2.15;
}

.winlink-profile-main {
  padding: 0 18px 6px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: -36px;
}

.winlink-profile-avatar-wrap {
  width: 104px;
  height: 104px;
  position: relative;
  display: grid;
  place-items: center;
}

.winlink-profile-avatar {
  width: 96px;
  height: 96px;
  border: 4px solid #ffffff;
  border-radius: 999px;
  background: var(--wl-brand-gradient);
  color: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 36px;
  font-weight: 900;
  box-shadow: 0 12px 28px rgba(2, 20, 52, 0.2);
  padding: 0;
  appearance: none;
  cursor: default;
}

.winlink-profile-avatar.is-viewable {
  cursor: zoom-in;
}

.winlink-profile-avatar:disabled {
  opacity: 1;
}

.winlink-profile-avatar img,
.winlink-profile-composer-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.winlink-profile-avatar-button {
  position: absolute;
  right: 2px;
  bottom: 2px;
}

.winlink-profile-identity {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding-top: 40px;
}

.winlink-profile-name-row {
  min-width: 0;
  display: inline-grid;
  grid-template-columns: minmax(0, auto) 36px;
  align-items: center;
  justify-content: start;
  gap: 5px;
}

.winlink-profile-identity h2 {
  margin: 0;
  color: var(--wl-text);
  font-size: 24px;
  line-height: 1.12;
  font-weight: 900;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-profile-inline-edit {
  width: 36px;
  height: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wl-blue-700);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
}

.winlink-profile-inline-edit .wl-icon {
  width: 16px;
  height: 16px;
  stroke-width: 2.2;
}

.winlink-profile-username {
  margin: 0;
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.winlink-profile-bio {
  margin: 3px 0 0;
  color: var(--wl-text);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.winlink-profile-soft-prompt {
  justify-self: start;
  min-height: 34px;
  border: 1px solid var(--wl-border);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--wl-blue-700);
  padding: 7px 11px;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}

.winlink-profile-action-row {
  padding: 4px 18px 14px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.winlink-profile-action-row button,
.winlink-profile-empty-panel button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: rgba(248, 251, 255, 0.84);
  color: var(--wl-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.1;
  cursor: pointer;
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.winlink-profile-secondary-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.winlink-profile-action-row .winlink-profile-edit-action {
  background: var(--wl-blue-700);
  color: #ffffff;
  border-color: var(--wl-blue-700);
  min-height: 46px;
}

.winlink-profile-action-row .wl-icon,
.winlink-profile-empty-panel .wl-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.winlink-profile-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.winlink-profile-detail {
  min-width: 0;
  max-width: 100%;
  border-radius: 999px;
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 850;
  text-decoration: none;
}

.winlink-profile-detail span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-profile-detail .wl-icon {
  width: 16px;
  height: 16px;
}

.winlink-other-profile-card .winlink-profile-name-row {
  grid-template-columns: minmax(0, 1fr);
}

.winlink-other-profile-card {
  overflow: visible;
  z-index: 2;
}

.winlink-other-profile-card .winlink-profile-cover {
  border-radius: 21px 21px 0 0;
}

.winlink-other-profile-bio {
  margin: 6px 0 0;
  color: var(--wl-text);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.winlink-other-profile-actions {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.winlink-other-profile-actions .winlink-social-pill,
.winlink-other-profile-actions button {
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 12px;
}

.winlink-social-relationship-menu {
  position: relative;
  display: inline-flex;
  z-index: 8;
}

.winlink-social-friend-menu-button {
  border: 1px solid rgba(0, 91, 172, 0.18);
  background: #eef5fb;
  color: var(--wl-muted);
  font-size: 12px;
  font-weight: 500;
}

.winlink-social-relationship-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 18;
  min-width: 138px;
  max-width: calc(100vw - 24px);
  border: 1px solid rgba(193, 211, 232, 0.92);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 14px 28px rgba(10, 44, 90, 0.14);
  padding: 6px;
}

.winlink-social-relationship-popover button {
  width: 100%;
  min-height: 34px;
  justify-content: flex-start;
  border: 0;
  border-radius: 9px;
  background: #ffffff;
  color: #b91c1c;
  padding: 8px 9px;
  font-size: 12.5px;
  font-weight: 500;
}

.winlink-social-unfriend-dialog {
  width: min(calc(100vw - 32px), 420px);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.24);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.winlink-social-unfriend-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.winlink-social-unfriend-dialog h2,
.winlink-social-unfriend-dialog p {
  margin: 0;
}

.winlink-social-unfriend-dialog h2 {
  color: var(--wl-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}

.winlink-social-unfriend-dialog p {
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}

.winlink-social-unfriend-dialog header button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--wl-muted);
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.winlink-social-unfriend-dialog header button:hover,
.winlink-social-unfriend-dialog header button:active {
  background: #fee2e2;
  color: #991b1b;
}

.winlink-social-unfriend-dialog footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.winlink-social-unfriend-dialog footer button {
  min-height: 36px;
  border: 1px solid rgba(0, 91, 172, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: var(--wl-blue-700);
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.winlink-social-unfriend-dialog footer .winlink-social-unfriend-danger {
  border-color: rgba(220, 38, 38, 0.28);
  color: #b91c1c;
}

.winlink-other-profile-info {
  border: 1px solid rgba(193, 211, 232, 0.86);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(14, 75, 145, 0.08);
  padding: 13px;
}

.winlink-other-profile-info h2 {
  margin: 0 0 10px;
  color: var(--wl-text);
  font-size: 16px;
  font-weight: 900;
}

.winlink-other-profile-info > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.winlink-profile-status {
  padding: 0 18px 16px;
  color: var(--wl-muted);
  font-size: 12.5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.winlink-profile-status p {
  margin: 0;
}

.winlink-profile-retry-button {
  min-height: 34px;
  border: 1px solid rgba(7, 81, 184, 0.2);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--wl-blue-700);
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 850;
  cursor: pointer;
}

.winlink-profile-tabs {
  padding: 2px;
  border: 1px solid var(--wl-border);
  border-radius: 13px;
  background: var(--wl-surface);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  box-shadow: 0 6px 14px rgba(14, 75, 145, 0.06);
}

.winlink-profile-tabs button {
  min-width: 0;
  min-height: 31px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--wl-muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.winlink-profile-tabs button.active {
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
}

.winlink-profile-posts,
.winlink-profile-media {
  display: grid;
  gap: 12px;
}

.winlink-profile-composer {
  padding: 10px;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  display: grid;
}

.winlink-profile-composer-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--wl-brand-gradient);
  color: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-weight: 900;
}

.winlink-profile-composer button {
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--wl-border);
  border-radius: 17px;
  background: #f8fbff;
  color: var(--wl-muted);
  padding: 8px 12px;
  display: grid;
  justify-items: start;
  gap: 2px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.winlink-profile-composer button span {
  color: var(--wl-text);
  overflow-wrap: anywhere;
}

.winlink-profile-composer button small {
  color: var(--wl-muted);
  font-size: 11.5px;
  line-height: 1.25;
}

.winlink-profile-media {
  padding: 0;
}

.winlink-profile-empty-panel {
  border: 1px solid var(--wl-border);
  border-radius: var(--wl-radius-lg);
  background: var(--wl-surface);
  box-shadow: var(--wl-shadow-soft);
  min-height: 132px;
  padding: 18px 16px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 9px;
  text-align: center;
}

.winlink-profile-empty-panel > span {
  width: 40px;
  height: 40px;
  border-radius: 15px;
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
  display: grid;
  place-items: center;
}

.winlink-profile-empty-panel h2,
.winlink-profile-empty-panel p {
  margin: 0;
}

.winlink-profile-empty-panel h2 {
  color: var(--wl-text);
  font-size: 17px;
}

.winlink-profile-empty-panel p {
  color: var(--wl-muted);
  line-height: 1.4;
  font-weight: 650;
}

.winlink-profile-empty-panel button {
  width: auto;
  padding-inline: 14px;
}

.winlink-profile-info-dialog {
  width: min(100%, 460px);
  max-height: min(86dvh, 660px);
  margin: 0 auto;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 24px 60px rgba(2, 20, 52, 0.26);
  overflow: hidden;
}

.winlink-profile-settings-dialog {
  display: flex;
  flex-direction: column;
  max-height: min(86dvh, 660px);
  overflow: hidden;
}

.winlink-profile-info-head,
.winlink-profile-info-footer {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-profile-info-head {
  border-bottom: 1px solid var(--wl-border);
}

.winlink-profile-info-head h2,
.winlink-profile-info-head p,
.winlink-profile-info-body p {
  margin: 0;
}

.winlink-profile-info-head h2 {
  color: var(--wl-text);
  font-size: 17px;
}

.winlink-profile-info-head p,
.winlink-profile-info-body p {
  color: var(--wl-muted);
  line-height: 1.4;
  font-size: 12.5px;
}

.winlink-profile-info-head > button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: #f4f9ff;
  color: var(--wl-text);
  font-size: 22px;
  cursor: pointer;
}

.winlink-profile-info-body {
  padding: 22px 16px;
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.winlink-profile-info-body > span {
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
  display: grid;
  place-items: center;
}

.winlink-profile-info-body b {
  color: var(--wl-text);
  font-size: 16px;
}

.winlink-profile-account-body {
  padding: 14px;
  display: grid;
  gap: 10px;
}

.winlink-profile-settings-dialog .winlink-profile-account-body {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.winlink-profile-account-body .winlink-profile-row {
  margin: 0;
}

.winlink-chat-font-setting {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid rgba(193, 211, 232, 0.72);
  border-radius: 13px;
  background: #f8fbff;
}

.winlink-chat-font-setting-head,
.winlink-chat-font-setting-scale {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-chat-font-setting-head label {
  color: #14334f;
  font-size: 13px;
  font-weight: 600;
}

.winlink-chat-font-setting-head output {
  color: #0969da;
  font-size: 13px;
  font-weight: 700;
}

.winlink-chat-font-setting input[type="range"] {
  width: 100%;
  accent-color: #0969da;
}

.winlink-chat-font-setting-scale {
  color: #71869a;
  font-size: 11px;
  font-weight: 400;
}

.winlink-chat-font-preview {
  display: grid;
  gap: 8px;
  padding-top: 3px;
}

.winlink-chat-font-preview-row {
  display: flex;
  min-width: 0;
}

.winlink-chat-font-preview-row.is-own {
  justify-content: flex-end;
}

.winlink-chat-font-preview-row.is-other {
  justify-content: flex-start;
}

.winlink-chat-font-preview-bubble {
  max-width: min(78%, 360px);
  padding: 8px 10px 7px;
  color: #14334f;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(118, 142, 166, .16);
  border-radius: 14px;
}

.winlink-chat-font-preview-row.is-own .winlink-chat-font-preview-bubble {
  color: #12395f;
  background: #ddecff;
  border-color: rgba(9, 105, 218, .16);
}

.winlink-chat-font-reset {
  justify-self: start;
  min-height: 32px;
  padding: 6px 0;
  color: #0969da;
  background: transparent;
  border: 0;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.winlink-profile-qr-dialog {
  width: min(100%, 500px);
}

.winlink-profile-qr-body {
  padding: 18px 16px 14px;
  display: grid;
  gap: 12px;
  justify-items: center;
  text-align: center;
}

.winlink-profile-qr-person {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  text-align: left;
}

.winlink-profile-qr-person b,
.winlink-profile-qr-person span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-profile-qr-person span {
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 650;
}

.winlink-profile-qr-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wl-blue-700), #14a36d);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  overflow: hidden;
}

.winlink-profile-qr-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.winlink-profile-qr-image {
  width: min(72vw, 280px);
  aspect-ratio: 1;
  border: 1px solid var(--wl-border);
  border-radius: 18px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 12px 28px rgba(2, 20, 52, 0.10);
}

.winlink-profile-qr-error,
.winlink-profile-qr-warning,
.winlink-profile-qr-result {
  width: 100%;
  margin: 0;
  border-radius: 12px;
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.winlink-profile-qr-error {
  background: #fff2f2;
  color: #b42318;
}

.winlink-profile-qr-warning {
  background: #fff8e6;
  color: #8a5a00;
}

.winlink-profile-qr-result {
  background: #eefaf3;
  color: #136c3a;
}

.winlink-profile-qr-scanner {
  width: 100%;
  display: grid;
  gap: 10px;
}

.winlink-profile-qr-camera {
  position: relative;
  width: 100%;
  min-height: 260px;
  border-radius: 16px;
  background: #0f172a;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.winlink-profile-qr-scanner video,
.winlink-profile-qr-camera-wait {
  width: 100%;
  height: 100%;
  min-height: 260px;
  background: #0f172a;
  object-fit: cover;
}

.winlink-profile-qr-camera-wait {
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
}

.winlink-profile-qr-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(68%, 220px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 18px;
  box-shadow: 0 0 0 999px rgba(2, 12, 32, 0.28);
  pointer-events: none;
}

.winlink-profile-qr-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.7);
  color: #ffffff;
  display: grid;
  place-items: center;
  font: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.winlink-profile-qr-helper {
  margin: 0;
  color: var(--wl-muted);
  text-align: center;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
}

.winlink-profile-qr-scan-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.winlink-profile-qr-upload {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 auto;
  min-height: 44px;
  border: 1px dashed var(--wl-border);
  border-radius: 12px;
  color: var(--wl-blue-700);
  font-weight: 500;
  cursor: pointer;
}

.winlink-profile-qr-upload input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.winlink-profile-qr-scan-actions button {
  min-height: 44px;
  border: 1px solid rgba(220, 38, 38, 0.22);
  border-radius: 12px;
  background: #ffffff;
  color: #b91c1c;
  padding: 0 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.winlink-profile-qr-footer {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.winlink-profile-qr-footer button {
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  padding: 6px 4px;
  font-size: 12px;
  font-weight: 500;
}

.winlink-profile-qr-footer .wl-icon {
  width: 19px;
  height: 19px;
}

.winlink-social-dialog {
  width: min(calc(100vw - 32px), 560px);
  max-height: min(86dvh, 720px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.winlink-social-body {
  padding: 12px;
  display: grid;
  gap: 12px;
  max-height: none;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.winlink-social-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-radius: 13px;
  background: #eaf4ff;
  padding: 4px;
}

.winlink-social-tabs button,
.winlink-social-person-action button,
.winlink-social-inline-actions button {
  min-height: 34px;
  border: 1px solid rgba(0, 91, 172, 0.18);
  border-radius: 9px;
  background: #ffffff;
  color: var(--wl-blue-700);
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}

.winlink-social-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}

.winlink-social-tab-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.winlink-social-tabs button.active {
  background: var(--wl-blue-700);
  color: #ffffff;
  border-color: var(--wl-blue-700);
  font-weight: 600;
}

.winlink-social-qr-shortcut {
  display: grid;
  gap: 8px;
  border: 1px solid rgba(0, 91, 172, 0.14);
  border-radius: 12px;
  background: #f8fbff;
  padding: 8px;
}

.winlink-social-qr-shortcut > button {
  min-height: 34px;
  border: 1px solid rgba(0, 91, 172, 0.22);
  border-radius: 10px;
  background: #ffffff;
  color: var(--wl-blue-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: start;
  padding: 0 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.winlink-social-qr-shortcut .wl-icon {
  width: 16px;
  height: 16px;
}

.winlink-social-qr-result {
  display: grid;
  gap: 8px;
}

.winlink-social-search input {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
}

.winlink-social-search input::placeholder {
  color: #7890a8;
  font-weight: 400;
}

.winlink-social-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  padding: 8px 9px;
  background: #ffffff;
  box-shadow: none;
}

.winlink-social-friend {
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding-block: 8px;
}

.winlink-social-person-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.winlink-social-friend-chat-target {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 91, 172, 0.12);
  grid-template-columns: 44px minmax(0, 1fr) auto;
}

.winlink-social-friend-avatar-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  display: block;
}

.winlink-social-friend-unread-badge {
  position: absolute;
  top: -5px;
  right: -6px;
  z-index: 1;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #dc2626;
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  pointer-events: none;
}

.winlink-social-friend-chat-target:hover,
.winlink-social-friend-chat-target:active,
.winlink-social-friend-chat-target:focus-visible,
.winlink-social-friend-chat-target.is-opening {
  background: rgba(0, 91, 172, 0.07);
  outline: none;
}

.winlink-social-person-main button,
.winlink-social-person-identity {
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0;
}

.winlink-social-person-identity {
  min-width: 0;
  border-radius: 10px;
}

.winlink-social-friend-name-button {
  display: block;
  max-width: 100%;
  overflow: hidden;
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.winlink-social-friend-name-button:hover,
.winlink-social-friend-name-button:active {
  color: var(--wl-blue-700);
}

.winlink-social-friend-opening {
  display: block;
  margin-top: 2px;
  color: var(--wl-blue-700);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.winlink-social-person-main button:active,
.winlink-social-person-main button:hover {
  opacity: 0.86;
}

.winlink-social-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--wl-blue-700), #14a36d);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 600;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.winlink-social-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.winlink-social-avatar-large {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

.winlink-social-person b,
.winlink-social-person small,
.winlink-social-person em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-social-person b {
  font-size: 14px;
  font-weight: 560;
  line-height: 1.2;
}

.winlink-social-person small,
.winlink-social-person em,
.winlink-social-hint {
  color: var(--wl-muted);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.3;
}

.winlink-social-person em {
  font-style: normal;
}

.winlink-social-friend-actions {
  display: grid;
  grid-template-columns: repeat(2, 48px);
  gap: 4px;
  padding: 0;
  border: 0;
}

.winlink-social-friend-icon-action {
  position: relative;
  width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wl-blue-700);
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
}

.winlink-social-friend-icon-action:hover,
.winlink-social-friend-icon-action:active {
  background: rgba(0, 91, 172, 0.08);
}

.winlink-social-friend-icon-action[aria-disabled="true"] {
  opacity: 0.62;
  cursor: not-allowed;
}

.winlink-social-friend-icon-action.is-danger {
  color: #b91c1c;
}

.winlink-social-friend-icon-action.is-danger:hover,
.winlink-social-friend-icon-action.is-danger:active {
  background: rgba(185, 28, 28, 0.08);
}

.winlink-social-friend-icon-action .wl-icon {
  width: 18px;
  height: 18px;
}

.winlink-social-friend-message-badge,
.winlink-social-friend-call-badge {
  position: absolute;
  top: 3px;
  right: calc(50% - 17px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: #fff;
  background: #dc2626;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.24);
  pointer-events: none;
}

.winlink-social-friend-call-badge {
  position: absolute;
  top: 3px;
  right: calc(50% - 17px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  color: #fff;
  background: #dc2626;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.24);
  pointer-events: none;
}

.winlink-profile-media-viewer-comment-avatar,
.winlink-profile-media-viewer-comment-author {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}

.winlink-profile-media-viewer-comment-avatar:disabled,
.winlink-profile-media-viewer-comment-author:disabled {
  cursor: default;
}

.winlink-profile-media-viewer-comment-author {
  display: inline;
  font-weight: 560;
  text-align: left;
}

.winlink-profile-media-viewer-comment-avatar:not(:disabled):hover,
.winlink-profile-media-viewer-comment-author:not(:disabled):hover {
  opacity: 0.86;
}

.winlink-social-request-preview {
  display: grid;
  gap: 8px;
  border: 1px solid var(--wl-border);
  border-radius: 12px;
  background: #f8fbff;
  padding: 10px;
}

.winlink-social-request-preview header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.winlink-social-request-preview h3 {
  margin: 0;
  color: var(--wl-text);
  font-size: 14px;
  font-weight: 600;
}

.winlink-social-request-preview header button {
  min-height: 30px;
  border: 1px solid rgba(0, 91, 172, 0.16);
  border-radius: 9px;
  background: #ffffff;
  color: var(--wl-blue-700);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.winlink-social-inline-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-width: max-content;
}

.winlink-social-inline-actions button {
  min-width: 72px;
  padding: 0 10px;
}

.winlink-social-action-accept {
  border-color: rgba(0, 91, 172, 0.32) !important;
  color: var(--wl-blue-700) !important;
}

.winlink-social-action-decline {
  border-color: rgba(220, 38, 38, 0.26) !important;
  color: #b91c1c !important;
}

.winlink-social-action-send,
.winlink-social-action-cancel {
  min-width: 76px;
  padding: 0 10px;
}

.winlink-party-dialog .winlink-social-body {
  gap: 12px;
}

.winlink-party-selected {
  display: grid;
  gap: 3px;
  border: 1px solid #b7d7ef;
  border-radius: 8px;
  background: #eef7ff;
  padding: 10px 12px;
  color: #17334f;
}

.winlink-party-selected span {
  color: var(--wl-muted);
  font-size: 13px;
}

.winlink-party-add-contact {
  justify-self: start;
  border: 1px solid #b7d7ef;
  border-radius: 8px;
  background: #ffffff;
  padding: 9px 12px;
  color: var(--wl-blue-700);
  font-weight: 800;
}

.winlink-party-contact-form {
  display: grid;
  gap: 10px;
  border: 1px solid var(--wl-border);
  border-radius: 8px;
  background: #f8fbfe;
  padding: 12px;
}

.winlink-party-contact-form label {
  display: grid;
  gap: 5px;
  color: #344a61;
  font-size: 13px;
  font-weight: 800;
}

.winlink-party-contact-form input,
.winlink-party-contact-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--wl-border);
  border-radius: 8px;
  padding: 9px 10px;
  background: #ffffff;
  color: #172033;
  font: inherit;
}

.winlink-party-contact-form footer,
.winlink-party-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.winlink-party-card .winlink-social-person-main {
  min-width: 0;
}

.winlink-party-link-badge,
.winlink-contact-link-message {
  border-radius: 999px;
  background: #e8f7ef;
  color: #136843;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 10px;
}

.winlink-contact-link-message {
  border-radius: 8px;
}

.winlink-contact-link-panel {
  display: grid;
  gap: 10px;
  border: 1px solid #d8e7f3;
  border-radius: 10px;
  background: #f8fbfe;
  padding: 12px;
}

.winlink-contact-link-panel header,
.winlink-contact-link-panel footer,
.winlink-contact-link-invite footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}

.winlink-contact-link-panel header span,
.winlink-contact-link-invite small,
.winlink-contact-link-invite p,
.winlink-contact-link-panel p {
  color: var(--wl-muted);
  font-size: 12.5px;
}

.winlink-contact-link-panel p,
.winlink-contact-link-invite p {
  margin: 0;
  line-height: 1.45;
}

.winlink-contact-link-panel input {
  min-width: 0;
  width: 100%;
  border: 1px solid var(--wl-border);
  border-radius: 8px;
  padding: 9px 10px;
  color: #172033;
  font: inherit;
}

.winlink-contact-link-panel img {
  justify-self: center;
  width: min(220px, 100%);
  border-radius: 12px;
  background: #fff;
}

.winlink-contact-link-panel button,
.winlink-contact-link-invite button {
  min-height: 36px;
  border: 0;
  border-radius: 10px;
  background: var(--wl-blue-700);
  color: #ffffff;
  font-weight: 800;
  padding: 0 12px;
}

.winlink-contact-link-invite {
  display: grid;
  gap: 8px;
  border-top: 1px solid #e0ebf5;
  padding-top: 10px;
}

.winlink-social-pill {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  border-radius: 999px;
  padding: 0 10px;
  background: #eef5fb;
  color: var(--wl-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.winlink-social-other-profile {
  border: 1px solid var(--wl-border);
  border-radius: 14px;
  overflow: hidden;
  background: #ffffff;
}

.winlink-social-other-profile > button {
  margin: 8px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #eef5fb;
}

.winlink-social-other-cover {
  height: 118px;
  background: linear-gradient(135deg, var(--wl-blue-700), #14a36d 65%, #f6c350);
  background-size: cover;
  background-position: center;
}

.winlink-social-other-main {
  margin-top: -36px;
  padding: 0 14px 16px;
  display: grid;
  gap: 7px;
}

.winlink-social-other-main h3,
.winlink-social-other-main p {
  margin: 0;
}

@media (max-width: 600px) {
  .winlink-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .winlink-profile-card {
    border-radius: 22px;
  }

  .winlink-profile-cover {
    min-height: 158px;
  }

  .winlink-profile-main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: -36px;
  }

  .winlink-profile-avatar-wrap {
    width: 100px;
    height: 100px;
  }

  .winlink-profile-avatar {
    width: 94px;
    height: 94px;
    font-size: 34px;
  }

  .winlink-profile-identity {
    justify-items: center;
    padding-top: 0;
  }

  .winlink-profile-name-row {
    max-width: 100%;
    justify-content: center;
  }

  .winlink-profile-soft-prompt {
    justify-self: center;
  }

  .winlink-profile-details {
    justify-content: center;
  }

  .winlink-profile-action-row {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 420px) {
  .winlink-shell-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  .winlink-shell-top {
    gap: 8px;
  }

  .winlink-shell-brand {
    gap: 8px;
  }

  .winlink-shell-brand img {
    width: 48px;
    height: 48px;
  }

  .winlink-brand-copy {
    inline-size: 76px;
  }

  .winlink-brand-wordmark {
    font-size: 22px;
  }

  .winlink-brand-slogan {
    font-size: 8.8px;
  }

  .winlink-shell-actions {
    gap: 6px;
  }

  .winlink-icon-button {
    width: 36px;
  }

  .winlink-header-tool {
    width: 44px;
  }

  .winlink-friends-center-head {
    align-items: center;
    gap: 8px;
  }

  .winlink-friends-center-add,
  .winlink-friends-center-scan {
    width: 36px;
    min-height: 36px;
  }

  .winlink-friends-center-add span {
    font-size: 28px;
  }

  .winlink-profile-qr-scan-actions {
    flex-wrap: wrap;
  }

  .winlink-profile-secondary-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .winlink-profile-secondary-actions button {
    min-height: 48px;
    padding: 8px 6px;
    gap: 5px;
    font-size: 12px;
    line-height: 1.15;
  }

  .winlink-social-person {
    grid-template-columns: minmax(0, 1fr);
  }

  .winlink-social-person-action {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
  }

  .winlink-social-friend-actions {
    grid-template-columns: repeat(2, 44px);
    gap: 2px;
  }

  .winlink-social-friend-icon-action {
    width: 44px;
    min-height: 44px;
  }

  .winlink-social-inline-actions {
    display: inline-flex;
    flex-wrap: nowrap;
  }

  .winlink-social-inline-actions button {
    flex: 0 0 auto;
  }
}

@keyframes winlink-account-panel-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.winlink-profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.winlink-profile-avatar.has-image {
  padding: 0;
  overflow: hidden;
}

.winlink-profile-avatar-button {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 36px;
  height: 36px;
}

.winlink-profile-avatar-edit-hit {
  position: absolute;
  left: 54px;
  top: 168px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.winlink-profile-media-preview {
  border: 1px solid var(--wl-border);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(7, 81, 184, 0.88), rgba(114, 216, 110, 0.78)),
    #e8f3ff;
  background-size: cover;
  background-position: center;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  overflow: hidden;
}

.winlink-profile-media-preview-avatar {
  width: 180px;
  height: 180px;
  border-radius: 999px;
  margin: 0 auto;
}

.winlink-profile-media-preview-cover {
  aspect-ratio: 3 / 1;
  width: 100%;
}

.winlink-profile-media-editor {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.winlink-profile-media-cover-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.winlink-profile-media-cover-tools button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid var(--wl-border);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--wl-muted);
  padding: 6px 7px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  overflow-wrap: anywhere;
}

.winlink-profile-media-cover-tools button.active {
  background: #e8f3ff;
  border-color: rgba(7, 81, 184, 0.36);
  color: var(--wl-blue-700);
  font-weight: 600;
}

.winlink-profile-media-crop {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--wl-border);
  background:
    linear-gradient(135deg, rgba(7, 81, 184, 0.88), rgba(114, 216, 110, 0.78)),
    #e8f3ff;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  cursor: grab;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
}

.winlink-profile-media-crop:active {
  cursor: grabbing;
}

.winlink-profile-media-crop-avatar {
  width: min(220px, 74vw);
  aspect-ratio: 1 / 1;
  border-radius: 999px;
}

.winlink-profile-media-crop-cover {
  aspect-ratio: 3 / 1;
  border-radius: 18px;
}

.winlink-profile-media-crop-bg {
  position: absolute;
  inset: -12px;
  background-position: center;
  background-size: cover;
  filter: blur(16px);
  opacity: 0.78;
  transform: scale(1.08);
}

.winlink-profile-media-crop-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(5, 31, 70, 0.16);
}

.winlink-profile-media-crop.has-color-bg .winlink-profile-media-crop-bg {
  inset: 0;
  filter: none;
  opacity: 1;
  transform: none;
}

.winlink-profile-media-crop.has-color-bg .winlink-profile-media-crop-bg::after {
  background: rgba(255, 255, 255, 0.06);
}

.winlink-profile-media-crop-fg {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: none;
  max-height: none;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform-origin: center;
  will-change: transform, width, height;
}

.winlink-profile-media-crop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

.winlink-profile-media-beauty {
  min-width: 0;
  border: 1px solid var(--wl-border);
  border-radius: 14px;
  background: #f8fbff;
  padding: 9px 10px;
  display: grid;
  gap: 7px;
  color: var(--wl-muted);
  font-size: 12px;
  font-weight: 500;
}

.winlink-profile-media-beauty label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.winlink-profile-media-beauty label > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.winlink-profile-media-beauty b {
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 600;
}

.winlink-profile-media-beauty small {
  color: var(--wl-blue-700);
  font-size: 12px;
  font-weight: 500;
}

.winlink-profile-media-beauty input {
  width: 100%;
  min-width: 0;
  accent-color: var(--wl-blue-700);
}

.winlink-profile-media-beauty button {
  justify-self: start;
  min-height: 30px;
  border: 1px solid rgba(7, 81, 184, 0.18);
  border-radius: 999px;
  background: #fff;
  color: var(--wl-blue-700);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.2;
  touch-action: manipulation;
}

.winlink-profile-media-beauty button[aria-pressed="true"] {
  background: rgba(7, 81, 184, 0.08);
}

.winlink-profile-media-gesture-hint {
  margin: -2px 0 0;
  color: var(--wl-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
}

.winlink-profile-media-picker {
  min-height: 48px;
  border: 1px dashed var(--wl-border);
  border-radius: 16px;
  color: var(--wl-blue-700);
  background: #f8fbff;
  display: grid;
  place-items: center;
  padding: 12px;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.winlink-profile-media-picker input {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.winlink-profile-media-status {
  min-height: 20px;
  color: var(--wl-muted);
  font-size: 13px;
  font-weight: 800;
}

.winlink-profile-media-viewer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2400;
  width: 100%;
  height: 100%;
  background: rgba(2, 12, 30, 0.88);
  display: grid;
  place-items: stretch;
  color: #f8fbff;
  overflow: hidden;
  isolation: isolate;
}

.winlink-profile-media-viewer {
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) minmax(178px, 38dvh);
  overflow: hidden;
  background: #07101f;
}

.winlink-profile-media-viewer-head {
  position: relative;
  z-index: 1;
  min-width: 0;
  min-height: 56px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(7, 16, 31, 0.96);
}

.winlink-profile-media-viewer-head button {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.winlink-profile-media-viewer-head > button:first-child {
  width: 34px;
  height: 34px;
  padding: 0;
  font-size: 22px;
  line-height: 1;
}

.winlink-profile-media-viewer-head h2 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-profile-media-viewer-head p {
  margin: 2px 0 0;
  color: rgba(248, 251, 255, 0.68);
  font-size: 11.5px;
  font-weight: 500;
}

.winlink-profile-media-viewer-edit {
  padding: 6px 10px;
  white-space: nowrap;
}

.winlink-profile-media-viewer-stage {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  background: #050b14;
  overflow: hidden;
}

.winlink-profile-media-viewer-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.winlink-profile-media-viewer-stage img.is-loading {
  opacity: 0;
}

.winlink-profile-media-viewer-mode {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(7, 16, 31, 0.72);
  backdrop-filter: blur(10px);
}

.winlink-profile-media-viewer-mode button {
  min-height: 28px;
  border: 0;
  border-radius: 999px;
  padding: 5px 9px;
  background: transparent;
  color: rgba(248, 251, 255, 0.72);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}

.winlink-profile-media-viewer-mode button.active {
  background: rgba(255, 255, 255, 0.94);
  color: #07101f;
}

.winlink-profile-media-viewer-loading,
.winlink-profile-media-viewer-error {
  color: rgba(248, 251, 255, 0.74);
  font-size: 13px;
  font-weight: 550;
  text-align: center;
  padding: 14px;
}

.winlink-profile-media-viewer-social {
  min-height: 0;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  background: #ffffff;
  color: var(--wl-text);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
}

.winlink-profile-media-viewer-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid var(--wl-border);
  border-bottom: 1px solid var(--wl-border);
}

.winlink-profile-media-viewer-actions button,
.winlink-profile-media-viewer-more,
.winlink-profile-media-viewer-composer button {
  min-height: 36px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #42526b;
  font-size: 12px;
  font-weight: 520;
  cursor: pointer;
}

.winlink-profile-media-viewer-actions button {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  padding: 0 3px;
}

.winlink-profile-media-viewer-actions button span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winlink-profile-media-viewer-actions button + button {
  border-left: 1px solid var(--wl-border);
}

.winlink-profile-media-viewer-actions button.active {
  background: #eef6ff;
  color: var(--wl-blue-700);
}

.winlink-profile-media-viewer-actions button:disabled,
.winlink-profile-media-viewer-more:disabled,
.winlink-profile-media-viewer-composer button:disabled {
  opacity: 0.58;
  cursor: wait;
}

.winlink-profile-media-viewer-comments {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding-right: 2px;
}

.winlink-profile-media-viewer-comment {
  min-width: 0;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
}

.winlink-profile-media-viewer-comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--wl-brand-gradient);
  color: #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-size: 13px;
  font-weight: 850;
}

.winlink-profile-media-viewer-comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.winlink-profile-media-viewer-comment b {
  display: block;
  color: var(--wl-text);
  font-size: 12.5px;
  font-weight: 760;
}

.winlink-profile-media-viewer-comment p {
  margin: 2px 0;
  color: var(--wl-text);
  font-size: 13px;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.winlink-profile-media-viewer-comment small,
.winlink-profile-media-viewer-comments-status {
  color: var(--wl-muted);
  font-size: 11.5px;
  font-weight: 500;
}

.winlink-profile-media-viewer-comments-status.err {
  color: #dc2626;
}

.winlink-profile-media-viewer-more {
  justify-self: start;
  min-height: 30px;
  padding: 5px 10px;
}

.winlink-profile-media-viewer-composer {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
  z-index: 2;
  background: #ffffff;
  padding-top: 4px;
}

.winlink-profile-media-viewer-composer textarea {
  width: 100%;
  min-width: 0;
  max-height: 82px;
  border: 1px solid var(--wl-border);
  border-radius: 16px;
  padding: 9px 11px;
  resize: vertical;
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
}

.winlink-profile-media-viewer-composer button {
  min-width: 54px;
  padding: 7px 12px;
  border: 1px solid var(--wl-border);
  border-radius: 999px;
  background: #f8fbff;
  color: var(--wl-blue-700);
}

@media (min-width: 760px) {
  .winlink-profile-media-viewer {
    width: min(760px, 100vw);
    justify-self: center;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

@media (max-width: 360px) {
  .winlink-identity-date-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .winlink-identity-form-actions {
    justify-content: stretch;
  }

  .winlink-identity-form-actions button {
    flex: 1 1 0;
  }

  .winlink-profile-media-viewer {
    grid-template-rows: auto minmax(0, 1fr) minmax(190px, 42dvh);
  }

  .winlink-profile-media-viewer-head {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 7px;
    padding-left: 8px;
    padding-right: 8px;
  }

  .winlink-profile-media-viewer-edit {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 12px;
  }
}

.winlink-shell-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  width: min(100%, 540px);
  margin: 0 auto;
  bottom: 0;
  z-index: 1250;
  min-height: calc(var(--wl-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
  padding: 7px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
  color: var(--wl-bottom-nav-inactive-color);
  background: var(--wl-bottom-nav-bg);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 26px rgba(5, 52, 124, 0.24);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: minmax(54px, auto);
  gap: 0;
  overflow: hidden;
}

/* MOBILEAPP03A2C2: hosted navigation is suppressed only after native activation ack validation. */
html[data-winlink-host="android"][data-winlink-bottom-navigation="native"] .winlink-shell-bottom-nav {
  display: none !important;
}

.winlink-shell-bottom-nav button {
  position: relative;
  min-width: 0;
  min-height: 54px;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--wl-bottom-nav-inactive-color);
  display: grid;
  grid-template-rows: 20px minmax(22px, auto);
  place-items: center;
  align-content: center;
  gap: 1px;
  cursor: pointer;
  font-size: var(--wl-bottom-nav-label-size);
  font-weight: 780;
  line-height: 1.08;
  letter-spacing: 0;
  padding: 5px 2px;
  text-shadow: none;
  -webkit-font-smoothing: antialiased;
}

.winlink-shell-bottom-nav button .wl-icon {
  width: var(--wl-bottom-nav-icon-size);
  height: var(--wl-bottom-nav-icon-size);
  stroke-width: var(--wl-bottom-nav-icon-stroke);
  filter: none;
}

.winlink-shell-bottom-nav button span {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: center;
  overflow: hidden;
  overflow-wrap: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.winlink-shell-bottom-nav button.active {
  color: var(--wl-bottom-nav-active-color);
}

.winlink-shell-bottom-nav button.active .wl-icon {
  stroke-width: 2.3;
}

.winlink-friends-badge {
  position: absolute;
  top: 3px;
  right: 9px;
  min-width: 17px;
  height: 17px;
  border-radius: 999px;
  padding: 0 4px;
  background: #dc2626;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.92);
  display: inline-grid;
  place-items: center;
  font-style: normal;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.24);
  pointer-events: none;
}

.winlink-shell-workspace-bar {
  display: none;
}

body.winlink-public-beta-shell.winlink-shell-workspace .winlink-shell {
  min-height: 0;
  padding-bottom: 0;
}

body.winlink-public-beta-shell.winlink-shell-workspace .winlink-shell-header,
body.winlink-public-beta-shell.winlink-shell-workspace .winlink-shell-main {
  display: none;
}

body.winlink-public-beta-shell.winlink-shell-workspace .winlink-shell-workspace-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100300;
  min-height: calc(env(safe-area-inset-top, 0px) + 56px);
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: #ffffff;
  border-bottom: 1px solid var(--wl-border);
  box-shadow: 0 8px 18px rgba(14, 75, 145, 0.12);
  display: grid;
  grid-template-columns: minmax(94px, auto) 1fr;
  align-items: center;
  gap: 10px;
}

.winlink-shell-workspace-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--wl-blue-800);
  border-radius: 999px;
  background: var(--wl-blue-800);
  color: #ffffff;
  font-weight: 800;
  cursor: pointer;
  min-height: 44px;
  padding: 8px 12px;
}

.winlink-shell-workspace-bar button .wl-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.winlink-shell-workspace-bar b {
  min-width: 0;
  text-align: center;
  font-size: 17px;
  overflow-wrap: anywhere;
  padding-right: 94px;
}

.winlink-empty {
  border: 1px dashed var(--wl-border);
  border-radius: 16px;
  padding: 16px;
  color: var(--wl-muted);
  background: rgba(255, 255, 255, 0.72);
}

.winlink-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (hover: hover) {
  .winlink-post:hover,
  .winlink-story:hover,
  .winlink-quick-item:hover {
    transform: translateY(-1px);
  }
}

@media (min-width: 720px) {
  .winlink-shell {
    background:
      linear-gradient(90deg, rgba(8, 105, 216, 0.08), transparent 24%, transparent 76%, rgba(61, 151, 236, 0.1)),
      var(--wl-bg);
  }

  .winlink-shell-bottom-nav {
    width: min(540px, 100%);
  }

  .winlink-supply-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .winlink-module-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .winlink-shell-header {
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 18px;
    border-radius: 0 0 25px 25px;
  }

  .winlink-shell-main {
    padding-left: 8px;
    padding-right: 8px;
  }

  .winlink-shell-top {
    gap: 8px;
  }

  .winlink-shell-brand {
    gap: 8px;
  }

  .winlink-shell-brand img {
    width: 46px;
    height: 46px;
  }

  .winlink-brand-copy {
    inline-size: 72px;
  }

  .winlink-brand-wordmark {
    font-size: 21px;
  }

  .winlink-brand-slogan {
    font-size: 8.5px;
    width: 128%;
  }

  .winlink-shell-actions {
    gap: 5px;
  }

  .winlink-icon-button {
    width: 34px;
    height: 44px;
  }

  .winlink-header-tool {
    width: 41px;
  }

  .winlink-header-tool span {
    font-size: 8.4px;
  }

  .winlink-search {
    min-height: 44px;
    grid-template-columns: 42px 1fr 42px;
    margin-top: 13px;
  }

  .winlink-search button {
    min-height: 44px;
  }

  .winlink-search input {
    height: 32px;
    min-height: 32px;
    padding-block: 3px;
  }

  .winlink-story {
    flex-basis: 108px;
    min-height: 158px;
    row-gap: 6px;
  }

  .winlink-section[aria-labelledby="wlQuickTitle"] {
    padding: 12px;
  }

  .winlink-quick-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .winlink-quick-item {
    min-height: 100px;
    padding: 9px 4px 8px;
  }

  .winlink-quick-icon {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .winlink-quick-icon .wl-icon {
    width: 27px;
    height: 27px;
  }

  .winlink-quick-icon .wl-icon-plus,
  .winlink-quick-icon .wl-icon-minus {
    width: 28px;
    height: 28px;
  }

  .winlink-quick-label {
    font-size: 12.1px;
    min-height: 2.34em;
  }

  .winlink-post {
    padding: 14px;
  }

  .winlink-post-actions button {
    gap: 3px;
    font-size: 11px;
  }

  .winlink-post-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .winlink-post-actions .wl-icon {
    width: 16px;
    height: 16px;
  }

  .winlink-account-accordion {
    padding-left: 12px;
    padding-right: 12px;
  }

  .winlink-profile-cover {
    min-height: 150px;
  }

  .winlink-profile-main {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: -36px;
  }

  .winlink-profile-avatar-wrap {
    width: 96px;
    height: 96px;
  }

  .winlink-profile-avatar {
    width: 90px;
    height: 90px;
    font-size: 32px;
  }

  .winlink-profile-identity {
    justify-items: center;
    padding-top: 0;
  }

  .winlink-profile-identity h2 {
    font-size: 21px;
  }

  .winlink-profile-name-row {
    max-width: 100%;
    grid-template-columns: minmax(0, auto) 34px;
    justify-content: center;
  }

  .winlink-profile-inline-edit {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }

  .winlink-profile-soft-prompt {
    justify-self: center;
  }

  .winlink-profile-action-row {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 12px;
    padding-right: 12px;
  }

  .winlink-profile-action-row button {
    min-height: 38px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .winlink-profile-details {
    justify-content: center;
  }

  .winlink-profile-composer {
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .winlink-modal-backdrop {
    padding-left: 8px;
    padding-right: 8px;
  }

.winlink-quick-pref-head,
.winlink-quick-pref-body,
.winlink-quick-pref-footer,
.winlink-password-dialog-head,
.winlink-password-dialog-body,
.winlink-password-dialog-footer,
.winlink-profile-edit-head,
.winlink-profile-edit-body,
.winlink-profile-edit-footer,
.winlink-profile-info-head,
.winlink-profile-info-body,
.winlink-profile-info-footer {
    padding-left: 10px;
    padding-right: 10px;
  }

  .winlink-quick-pref-footer,
  .winlink-password-dialog-footer,
  .winlink-profile-edit-footer {
    flex-wrap: wrap;
  }

  .winlink-quick-pref-footer button,
  .winlink-password-dialog-footer button,
  .winlink-profile-edit-footer button {
    flex: 1 1 auto;
  }

  .winlink-profile-edit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .winlink-quick-pref-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .winlink-quick-pref-row small {
    text-align: left;
    padding-left: 30px;
  }

  .winlink-profile-header {
    grid-template-columns: 52px minmax(0, 1fr) 32px;
    gap: 10px;
    padding: 12px;
  }

  .winlink-shell-bottom-nav {
    padding-left: 6px;
    padding-right: 6px;
  }

  .winlink-shell-bottom-nav button {
    font-size: 9.6px;
    border-radius: 13px;
    min-height: 52px;
    padding-left: 1px;
    padding-right: 1px;
    grid-template-rows: 19px minmax(22px, auto);
  }

  .winlink-shell-bottom-nav button .wl-icon {
    width: 17px;
    height: 17px;
  }

  .winlink-module-card {
    min-height: 150px;
  }

  .winlink-module-status {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 330px) {
  .winlink-shell-brand {
    gap: 6px;
  }

  .winlink-shell-brand img {
    width: 38px;
    height: 38px;
  }

  .winlink-brand-copy {
    inline-size: 64px;
  }

  .winlink-brand-wordmark {
    font-size: 19px;
  }

  .winlink-brand-slogan {
    font-size: 8.6px;
  }

  .winlink-shell-actions {
    gap: 4px;
  }

  .winlink-icon-button {
    width: 33px;
    height: 44px;
  }

  .winlink-header-tool {
    width: 39px;
  }

  .winlink-shell-bottom-nav button {
    font-size: 8.4px;
  }

  .winlink-profile-identity b {
    font-size: 15px;
  }

  .winlink-account-menu-row {
    grid-template-columns: 32px minmax(0, 1fr);
    padding: 9px;
  }

  .winlink-profile-title-actions {
    gap: 2px;
  }

  .winlink-profile-settings-chip {
    width: 40px;
    padding-inline: 0;
  }

  .winlink-profile-settings-chip span {
    display: none;
  }
}

/* UIUXPOLISH01C: shared finance/HUI mobile surface polish. */
body.winlink-public-beta-shell #cashbookPage .content {
  max-width: 760px;
  padding-inline: 14px;
}

body.winlink-public-beta-shell #cashbookPage .card {
  border: 1px solid var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-lg);
  box-shadow: 0 10px 24px rgba(14, 75, 145, 0.08);
}

body.winlink-public-beta-shell #cashbookPage h2 {
  color: var(--wl-text);
  letter-spacing: 0;
}

body.winlink-public-beta-shell #cashbookPage .inventory-summary-grid {
  gap: 9px;
}

body.winlink-public-beta-shell #cashbookPage .cash-icon-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.winlink-public-beta-shell #cashbookPage .inventory-stat {
  border-color: var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-md);
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(14, 75, 145, 0.06);
}

body.winlink-public-beta-shell #cashbookPage .inventory-stat span {
  color: var(--wl-muted);
  font-weight: 800;
}

body.winlink-public-beta-shell #cashbookPage .inventory-stat b {
  color: var(--wl-text);
  line-height: 1.15;
}

body.winlink-public-beta-shell #cashbookPage .inventory-card {
  border-color: var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-md);
  box-shadow: 0 8px 18px rgba(14, 75, 145, 0.06);
}

body.winlink-public-beta-shell #cashbookPage .inventory-meta {
  border-top: 1px solid rgba(22, 90, 165, 0.1);
  padding-top: 9px;
}

body.winlink-public-beta-shell .finance-loan-header {
  margin-bottom: 14px;
}

body.winlink-public-beta-shell .finance-loan-header h2 {
  color: var(--wl-text);
  letter-spacing: 0;
}

body.winlink-public-beta-shell .finance-loan-overview {
  gap: 9px;
}

body.winlink-public-beta-shell .finance-loan-direction-stat {
  min-height: 98px;
  border-radius: var(--wl-finance-radius-md);
  box-shadow: 0 8px 18px rgba(14, 75, 145, 0.06);
}

body.winlink-public-beta-shell .finance-loan-status-filter {
  gap: 7px;
  margin: 8px 0 12px;
}

body.winlink-public-beta-shell .finance-loan-status-filter-chip {
  min-height: 36px;
  padding: 7px 10px;
  border-color: var(--wl-finance-border);
  background: #ffffff;
  color: #34516f;
}

body.winlink-public-beta-shell .finance-loan-status-filter-chip.active {
  border-color: var(--wl-blue-700);
  background: var(--wl-blue-100);
  color: var(--wl-blue-700);
}

body.winlink-public-beta-shell .finance-loan-list-add-button,
body.winlink-public-beta-shell .finance-loan-preview-action,
body.winlink-public-beta-shell .finance-loan-primary-action {
  border-color: var(--wl-blue-700);
  background: var(--wl-blue-700);
  box-shadow: 0 8px 18px rgba(8, 105, 216, 0.16);
}

body.winlink-public-beta-shell .finance-loan-quick-calc-button,
body.winlink-public-beta-shell .finance-loan-principal-split-button {
  border-color: #bdebd4;
  background: var(--wl-finance-success-bg);
  color: var(--wl-finance-success-fg);
}

body.winlink-public-beta-shell .finance-loan-modern-card,
body.winlink-public-beta-shell .finance-loan-money-tile,
body.winlink-public-beta-shell .finance-loan-due-box,
body.winlink-public-beta-shell .finance-loan-mini-field,
body.winlink-public-beta-shell .finance-loan-disburse-schedule,
body.winlink-public-beta-shell .finance-loan-modal-panel {
  border-color: var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-lg);
  box-shadow: 0 10px 24px rgba(14, 75, 145, 0.08);
}

body.winlink-public-beta-shell .finance-loan-modern-card {
  padding: 14px;
  gap: 12px;
  background: #ffffff;
}

body.winlink-public-beta-shell .finance-loan-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 13px;
}

body.winlink-public-beta-shell .finance-loan-title-text h3 {
  font-size: 18px;
}

body.winlink-public-beta-shell .finance-loan-action-tile,
body.winlink-public-beta-shell .finance-loan-action-tile.btn {
  height: 78px;
  grid-template-rows: 32px minmax(0, auto);
  gap: 6px;
  border-radius: var(--wl-finance-radius-md);
  box-shadow: 0 7px 16px rgba(14, 75, 145, 0.07);
}

body.winlink-public-beta-shell .finance-loan-action-icon {
  width: 32px;
  height: 32px;
}

body.winlink-public-beta-shell .finance-loan-action-icon svg {
  width: 19px;
  height: 19px;
}

body.winlink-public-beta-shell .finance-loan-form-field input,
body.winlink-public-beta-shell .finance-loan-form-field select,
body.winlink-public-beta-shell .finance-loan-form-field textarea,
body.winlink-public-beta-shell .finance-loan-search input {
  min-height: 44px;
  border-color: var(--wl-finance-border-strong);
  border-radius: var(--wl-finance-radius-sm);
  font-size: 16px;
}

body.winlink-public-beta-shell .finance-loan-modal-head {
  border-bottom: 1px solid rgba(22, 90, 165, 0.1);
}

body.winlink-public-beta-shell .finance-loan-create-actions {
  border-top-color: rgba(22, 90, 165, 0.12);
}

@media (max-width: 420px) {
  body.winlink-public-beta-shell #cashbookPage .inventory-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.winlink-public-beta-shell #cashbookPage .inventory-stat {
    padding: 9px 7px;
  }

  body.winlink-public-beta-shell #cashbookPage .inventory-stat b {
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  body.winlink-public-beta-shell .finance-loan-action-tile,
  body.winlink-public-beta-shell .finance-loan-action-tile.btn {
    height: 74px;
    padding: 7px 4px;
  }
}

.hui-draft-open {
  overflow: hidden;
}

#huiDraftAppRoot {
  position: fixed;
  inset: 0;
  z-index: 2400;
}

.hui-draft-overlay {
  min-height: 100%;
  overflow-y: auto;
  padding: max(12px, env(safe-area-inset-top)) 12px max(18px, env(safe-area-inset-bottom));
  background: rgba(7, 39, 82, 0.42);
}

.hui-draft-shell {
  width: min(100%, 760px);
  min-height: min(760px, calc(100dvh - 28px));
  margin: 0 auto;
  padding: 18px;
  color: var(--wl-text);
  background: #f8fbff;
  border: 1px solid var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-lg);
  box-shadow: 0 20px 56px rgba(3, 35, 84, 0.2);
}

.hui-draft-head,
.hui-draft-toolbar,
.hui-section-title,
.hui-wizard-footer,
.hui-group-card-top,
.hui-group-card-foot,
.hui-head-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.hui-draft-head {
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(22, 90, 165, 0.12);
}

.hui-draft-head h1,
.hui-draft-toolbar h2,
.hui-form-step h2,
.hui-empty h2 {
  margin: 0;
  color: #0a3874;
  letter-spacing: 0;
}

.hui-draft-head p,
.hui-draft-toolbar p,
.hui-step-copy,
.hui-field-hint,
.hui-safe-note,
.hui-empty p,
.hui-status {
  margin: 6px 0 0;
  color: #647a98;
  line-height: 1.5;
}

.hui-eyebrow {
  color: #1971d1 !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hui-close,
.hui-icon-button {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: #45627f;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-size: 26px;
  cursor: pointer;
}

.hui-close:hover,
.hui-close:focus-visible,
.hui-icon-button:hover,
.hui-icon-button:focus-visible {
  color: #fff;
  background: #dc3545;
}

.hui-primary,
.hui-secondary,
.hui-danger-quiet,
.hui-group-card-foot button {
  min-height: 44px;
  padding: 9px 14px;
  border-radius: var(--wl-finance-radius-sm);
  font-weight: 750;
  cursor: pointer;
}

.hui-primary {
  color: #fff;
  background: var(--wl-blue-700);
  border: 1px solid var(--wl-blue-700);
  box-shadow: 0 8px 18px rgba(8, 105, 216, .16);
}

.hui-secondary {
  color: #15528f;
  background: #fff;
  border: 1px solid rgba(21, 82, 143, .22);
}

.hui-danger-quiet {
  color: #a22535;
  background: #fff4f5;
  border: 1px solid #f2c3c9;
}

.hui-primary:disabled,
.hui-secondary:disabled,
.hui-icon-button:disabled {
  opacity: .55;
  cursor: wait;
}

.hui-alert {
  margin: 16px 0 0;
  padding: 11px 13px;
  color: #8f2333;
  background: #fff1f3;
  border: 1px solid #f4c6cc;
  border-radius: 10px;
}

.hui-draft-toolbar {
  margin: 18px 0 14px;
}

.hui-toolbar-actions,
.hui-card-actions,
.hui-member-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hui-group-list {
  display: grid;
  gap: 10px;
}

.hui-group-card,
.hui-empty,
.hui-inline-empty,
.hui-readiness-box {
  padding: 14px;
  background: #fff;
  border: 1px solid var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-md);
  box-shadow: 0 8px 18px rgba(14, 75, 145, .06);
}

.hui-group-card h3 {
  margin: 0;
  color: #123f76;
}

.hui-group-card p {
  margin: 5px 0 0;
  color: #647a98;
}

.hui-status-pill,
.hui-readiness {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  color: #725d08;
  background: #fff7d6;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.hui-readiness.is-ready {
  color: #126c45;
  background: #e7f8ef;
}

.hui-group-meta,
.hui-review-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.hui-group-meta div,
.hui-review-grid div {
  min-width: 0;
  padding: 8px 9px;
  background: var(--wl-finance-panel);
  border: 1px solid rgba(22, 90, 165, 0.08);
  border-radius: var(--wl-finance-radius-sm);
}

.hui-group-meta dt,
.hui-review-grid span,
.hui-review-members span,
.hui-slot-summary span {
  display: block;
  color: #71849d;
  font-size: 12px;
}

.hui-group-meta dd,
.hui-review-grid b {
  margin: 3px 0 0;
  color: #123f76;
}

.hui-group-card-foot {
  padding-top: 12px;
  border-top: 1px solid rgba(22, 90, 165, .1);
}

.hui-group-card-foot button {
  padding: 6px 10px;
  color: #0869d8;
  background: transparent;
  border: 0;
}

.hui-empty {
  padding: 26px 18px;
  text-align: center;
}

.hui-empty-icon {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  color: #0869d8;
  background: #e7f2ff;
  border-radius: 50%;
  font-size: 30px;
}

.hui-empty .hui-primary {
  margin-top: 18px;
}

.hui-safe-note {
  margin-top: 18px;
  text-align: center;
  font-size: 13px;
}

.hui-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 16px 0;
  padding: 4px;
  background: #edf5fe;
  border: 1px solid rgba(22, 90, 165, 0.1);
  border-radius: var(--wl-finance-radius-md);
}

.hui-steps button {
  min-width: 0;
  min-height: 44px;
  padding: 6px 4px;
  color: #71849d;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-size: 12px;
  cursor: pointer;
}

.hui-steps button span {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: 0 auto 4px;
  color: #55708e;
  background: #e7eff8;
  border-radius: 50%;
  font-weight: 800;
}

.hui-steps button.is-active,
.hui-steps button.is-done {
  color: #0869d8;
  background: #ffffff;
  font-weight: 800;
  box-shadow: 0 6px 14px rgba(14, 75, 145, 0.08);
}

.hui-steps button.is-active span,
.hui-steps button.is-done span {
  color: #fff;
  background: #0869d8;
}

.hui-step-content {
  min-height: 360px;
}

.hui-form-step h2 {
  margin-bottom: 4px;
}

.hui-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.hui-form-grid label {
  display: grid;
  gap: 6px;
  color: #254d79;
  font-size: 13px;
  font-weight: 750;
}

.hui-form-grid label:nth-child(2) {
  grid-column: 1 / -1;
}

.hui-form-grid label span {
  color: #71849d;
  font-weight: 500;
}

.hui-form-grid input,
.hui-form-grid select,
.hui-form-grid textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: #12345d;
  background: #fff;
  border: 1px solid var(--wl-finance-border-strong);
  border-radius: var(--wl-finance-radius-sm);
  outline: 0;
  font-size: 16px;
}

.hui-form-grid textarea {
  resize: vertical;
}

.hui-form-grid input:focus,
.hui-form-grid select:focus,
.hui-form-grid textarea:focus {
  border-color: #3d97ec;
  box-shadow: 0 0 0 3px rgba(61, 151, 236, .16);
}

.hui-section-title {
  align-items: flex-start;
  margin-bottom: 18px;
}

.hui-member-list,
.hui-slot-list {
  display: grid;
  gap: 9px;
}

.hui-member-card,
.hui-slot-row,
.hui-review-members > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-md);
}

.hui-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  color: #fff;
  background: #1678d4;
  border-radius: 50%;
  font-weight: 800;
}

.hui-member-copy,
.hui-slot-row > div:first-child {
  min-width: 0;
  display: grid;
  gap: 2px;
  flex: 1 1 auto;
}

.hui-member-copy b,
.hui-slot-row b {
  overflow: hidden;
  color: #123f76;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-member-actions {
  margin-left: auto;
  justify-content: flex-end;
}

.hui-member-state {
  color: #63758a;
  font-size: 12px;
  white-space: nowrap;
}

.hui-member-state.is-ready {
  color: #13744c;
  font-weight: 700;
}

.hui-member-copy span,
.hui-member-copy small,
.hui-slot-row small {
  overflow: hidden;
  color: #71849d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-slot-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 12px;
}

.hui-slot-summary div {
  padding: 10px;
  text-align: center;
  background: var(--wl-finance-panel);
  border: 1px solid rgba(22, 90, 165, 0.08);
  border-radius: var(--wl-finance-radius-sm);
}

.hui-slot-summary b {
  display: block;
  margin-top: 4px;
  color: #0a579e;
  font-size: 20px;
}

.hui-slot-summary b.is-danger {
  color: #b32939;
}

.hui-stepper {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hui-stepper button {
  width: 38px;
  min-height: 38px;
  color: #0869d8;
  background: #edf5fe;
  border: 1px solid #c9dff4;
  border-radius: 10px;
  font-size: 21px;
  cursor: pointer;
}

.hui-stepper output {
  min-width: 24px;
  color: #123f76;
  text-align: center;
  font-weight: 800;
}

.hui-review-members {
  margin-top: 18px;
}

.hui-review-members h3 {
  margin: 0 0 8px;
  color: #123f76;
}

.hui-review-members > div {
  justify-content: space-between;
  border-radius: 8px;
}

.hui-review-members > div b {
  color: #0869d8;
}

.hui-contribution-list {
  display: grid;
  gap: 9px;
  margin: 12px 0 18px;
}

.hui-contribution-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(120px, .55fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--wl-finance-border);
  border-radius: var(--wl-finance-radius-sm);
}

.hui-contribution-row > div:first-child,
.hui-contribution-money {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.hui-contribution-row b,
.hui-contribution-money span {
  color: #123f76;
}

.hui-contribution-row span,
.hui-contribution-row small {
  overflow: hidden;
  color: #71849d;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hui-contribution-money {
  text-align: right;
}

.hui-readiness-box {
  margin-top: 14px;
  color: #526b88;
}

.hui-readiness-box.is-ready {
  color: #126c45;
  background: #effbf5;
  border-color: #bde8d0;
}

.hui-readiness-box.is-blocked {
  color: #8a5b10;
  background: #fffaf0;
  border-color: #f1d99f;
}

.hui-readiness-box ul,
.hui-warning-list ul {
  margin: 8px 0 0;
  padding-left: 19px;
}

.hui-warning-list {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(146, 101, 14, .16);
}

.hui-wizard-footer {
  position: sticky;
  bottom: 0;
  margin-top: 16px;
  padding: 12px 0 calc(2px + env(safe-area-inset-bottom, 0px));
  background: #f8fbff;
  border-top: 1px solid rgba(22, 90, 165, .12);
}

@media (max-width: 600px) {
  .hui-draft-overlay { padding: 0; }
  .hui-draft-shell { min-height: 100dvh; width: 100%; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .hui-draft-head h1 { font-size: 22px; }
  .hui-group-meta, .hui-review-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hui-form-grid { grid-template-columns: 1fr; }
  .hui-form-grid label:nth-child(2) { grid-column: auto; }
  .hui-steps button { font-size: 10px; }
  .hui-steps button span { width: 22px; height: 22px; }
  .hui-draft-toolbar { align-items: flex-start; }
  .hui-draft-toolbar .hui-primary { flex: 0 0 auto; padding-inline: 11px; }
  .hui-toolbar-actions, .hui-member-actions { width: 100%; }
  .hui-contribution-row { grid-template-columns: 1fr; }
  .hui-contribution-money { text-align: left; }
}

@media (max-width: 360px) {
  .hui-draft-head, .hui-draft-toolbar, .hui-section-title { align-items: flex-start; }
  .hui-draft-toolbar, .hui-section-title { flex-direction: column; }
  .hui-draft-toolbar .hui-primary, .hui-section-title .hui-secondary { width: 100%; }
  .hui-steps { gap: 0; }
  .hui-steps button { font-size: 9px; }
}

.winlink-chat-open {
  overflow: hidden;
  overscroll-behavior-x: none;
}

.winlink-chat-open .winlink-shell-bottom-nav {
  display: none;
}

.winlink-chat-surface {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  background: #f5f8fc;
}

.winlink-chat-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100dvh;
  overflow-x: hidden;
  color: #18344f;
  background: #f5f8fc;
}

.winlink-chat-conversation {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.winlink-chat-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 8px;
  align-items: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: rgba(255, 255, 255, .94);
  border-bottom: 1px solid rgba(86, 118, 150, .16);
  backdrop-filter: blur(12px);
}

.winlink-chat-head button {
  width: 38px;
  height: 38px;
  color: #17496f;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.winlink-chat-head button:hover,
.winlink-chat-head button:active {
  background: #e8f1fb;
}

.winlink-chat-head h1 {
  margin: 0;
  overflow: hidden;
  color: #102c45;
  font-size: 18px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-head p,
.winlink-chat-peer small {
  margin: 3px 0 0;
  overflow: hidden;
  color: #6b7d90;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-body,
.winlink-chat-message-scroll {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.winlink-chat-body {
  padding: 10px 10px calc(16px + env(safe-area-inset-bottom, 0px));
}

.winlink-chat-inbox-list {
  display: grid;
  gap: 7px;
}

.winlink-chat-inbox-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  color: inherit;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(87, 118, 150, .14);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(28, 53, 77, .05);
}

.winlink-chat-inbox-row.is-unread {
  border-color: rgba(9, 105, 218, .28);
  background: #f8fbff;
}

.winlink-chat-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  color: #fff;
  background: #1168b7;
  border-radius: 50%;
  font-weight: 800;
  object-fit: cover;
}

.winlink-chat-inbox-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.winlink-chat-inbox-name {
  overflow: hidden;
  color: #12344f;
  font-size: 15px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-inbox-preview {
  overflow: hidden;
  color: #6d7f91;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-inbox-meta {
  display: grid;
  justify-items: end;
  gap: 6px;
  min-width: 38px;
  color: #7c8c9d;
  font-size: 11px;
}

.winlink-chat-inbox-meta i {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  color: #fff;
  background: #0969da;
  border-radius: 999px;
  font-style: normal;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
}

.winlink-chat-empty,
.winlink-chat-state {
  display: grid;
  place-items: center;
  min-height: 190px;
  padding: 26px 18px;
  color: #61758a;
  text-align: center;
}

.winlink-chat-empty h2,
.winlink-chat-state b {
  margin: 0 0 5px;
  color: #173b5d;
  font-size: 18px;
}

.winlink-chat-empty p {
  margin: 0;
  font-size: 14px;
}

.winlink-chat-state button,
.winlink-chat-more,
.winlink-chat-new {
  justify-self: center;
  min-height: 34px;
  padding: 0 13px;
  color: #0969da;
  background: #eaf3ff;
  border: 1px solid #c7def8;
  border-radius: 999px;
  font-weight: 800;
}

.winlink-chat-peer {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  width: 100% !important;
  height: auto !important;
  min-width: 0;
  padding: 0 !important;
  text-align: left;
}

.winlink-chat-peer .winlink-chat-avatar {
  width: 40px;
  height: 40px;
  flex-basis: 40px;
}

.winlink-chat-peer span {
  min-width: 0;
}

.winlink-chat-conversation-head {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.winlink-chat-peer-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: max-content;
}

.winlink-chat-head .winlink-chat-peer-action {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: #0969da;
  background: transparent;
  border: 0;
  border-radius: 999px;
  touch-action: manipulation;
}

.winlink-chat-head .winlink-chat-peer-action svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.winlink-call-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(8px);
}

.winlink-call-sheet {
  width: min(360px, calc(100vw - 28px));
  max-width: 100%;
  padding: 18px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
  color: #102033;
}

.winlink-call-peer {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.winlink-call-peer .winlink-chat-avatar,
.winlink-call-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  font-size: 24px;
}

.winlink-call-peer h2 {
  margin: 0 0 2px;
  font-size: 18px;
  line-height: 1.25;
  color: #0f2f57;
}

.winlink-call-peer p,
.winlink-call-peer small,
.winlink-call-status,
.winlink-call-error {
  margin: 0;
  min-width: 0;
}

.winlink-call-peer p {
  font-size: 15px;
  font-weight: 700;
}

.winlink-call-peer small {
  display: block;
  margin-top: 1px;
  color: #64748b;
  font-size: 12px;
}

.winlink-call-status {
  margin-top: 14px;
  color: #475569;
  font-size: 13px;
  line-height: 1.38;
}

.winlink-call-error {
  margin-top: 10px;
  color: #b42318;
  font-size: 13px;
}

.winlink-call-network {
  margin: 8px 0 0;
  color: #8a5a00;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.winlink-call-network.is-reconnecting {
  color: #b42318;
}

.winlink-call-network.is-recovered {
  color: #15803d;
}

.winlink-call-duration {
  margin: 12px 0 0;
  color: #0f2f57;
  font-size: 24px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.winlink-call-audio-unlock {
  width: 100%;
  margin-top: 12px;
  min-height: 40px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 91, 172, 0.1);
  color: #07599f;
  font-weight: 700;
}

.winlink-call-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.winlink-call-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  min-width: 112px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  touch-action: manipulation;
}

.winlink-call-action[hidden] {
  display: none !important;
}

.winlink-call-action svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.winlink-call-action.is-accept {
  background: #16a34a;
}

.winlink-call-action.is-decline {
  background: #dc2626;
}

.winlink-call-action.is-muted {
  background: #005bac;
}

.winlink-call-action.is-muted[aria-pressed="true"] {
  background: #64748b;
}

.winlink-call-action.is-audio-output {
  background: #0f766e;
}

.winlink-call-action.is-audio-output[aria-pressed="true"] {
  background: #0369a1;
}

.winlink-call-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

/* M4G active-call presentation. Incoming calls intentionally keep their separate sheet. */
.winlink-call-backdrop.is-active-call {
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(48, 145, 255, 0.5), transparent 42%),
    linear-gradient(160deg, #0872d5 0%, #0751a6 46%, #061c3c 100%);
  backdrop-filter: none;
}

.winlink-call-cover,
.winlink-call-visual-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.winlink-call-cover {
  z-index: -2;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  filter: blur(12px) saturate(0.92);
  transform: scale(1.06);
  transition: opacity 180ms ease;
}

.winlink-call-cover.is-ready {
  opacity: 0.78;
}

.winlink-call-backdrop.is-active-call .winlink-call-visual-overlay {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(1, 24, 57, 0.28) 0%, rgba(2, 31, 70, 0.46) 46%, rgba(2, 15, 36, 0.9) 100%),
    linear-gradient(135deg, rgba(0, 102, 211, 0.4), rgba(4, 23, 55, 0.22));
}

.winlink-call-backdrop.is-active-call .winlink-call-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.winlink-call-backdrop.is-active-call .winlink-call-peer {
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(34px, 9vh, 92px);
  text-align: center;
}

.winlink-call-backdrop.is-active-call .winlink-call-avatar,
.winlink-call-backdrop.is-active-call .winlink-call-peer .winlink-chat-avatar {
  width: clamp(112px, 31vw, 146px);
  height: clamp(112px, 31vw, 146px);
  flex-basis: auto;
  border: 3px solid rgba(255, 255, 255, 0.76);
  font-size: 48px;
  box-shadow: 0 18px 52px rgba(0, 16, 42, 0.36);
}

.winlink-call-backdrop.is-active-call .winlink-call-peer h2 {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.winlink-call-backdrop.is-active-call .winlink-call-peer p {
  max-width: min(84vw, 440px);
  color: #fff;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800;
  line-height: 1.16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-call-backdrop.is-active-call .winlink-call-peer small {
  color: rgba(255, 255, 255, 0.7);
}

.winlink-call-backdrop.is-active-call .winlink-call-status {
  min-height: 24px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.winlink-call-backdrop.is-active-call .winlink-call-duration {
  margin-top: 16px;
  min-width: 92px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #fff;
  background: rgba(1, 18, 44, 0.72);
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.92);
  font-variant-numeric: tabular-nums;
  box-shadow: 0 6px 20px rgba(0, 10, 30, 0.2);
}

.winlink-call-backdrop.is-active-call .winlink-call-error,
.winlink-call-backdrop.is-active-call .winlink-call-network {
  color: #fff;
  background: rgba(3, 18, 42, 0.46);
  border-radius: 999px;
  padding: 7px 12px;
}

.winlink-call-feedback {
  position: absolute;
  left: 50%;
  bottom: calc(max(22px, env(safe-area-inset-bottom)) + 126px);
  z-index: 2;
  max-width: calc(100vw - 36px);
  margin: 0;
  padding: 8px 13px;
  border-radius: 999px;
  color: #fff;
  background: rgba(3, 15, 36, 0.82);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 8px 24px rgba(0, 10, 30, 0.24);
}

.winlink-call-feedback[hidden] {
  display: none !important;
}

.winlink-call-backdrop.is-active-call .winlink-call-actions {
  flex-wrap: nowrap;
  gap: clamp(10px, 5vw, 30px);
  width: min(100%, 430px);
  margin-top: auto;
  padding-top: 150px;
}

.winlink-call-backdrop.is-active-call .winlink-call-action {
  position: relative;
  flex: 1 1 0;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 96px;
  padding: 0;
  border-radius: 18px;
  color: #fff;
  background: transparent;
  font-size: 13px;
}

.winlink-call-backdrop.is-active-call .winlink-call-action svg {
  box-sizing: content-box;
  width: 26px;
  height: 26px;
  padding: 19px;
  border-radius: 50%;
  background: rgba(12, 55, 105, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 9px 24px rgba(0, 13, 36, 0.24);
}

.winlink-call-backdrop.is-active-call [data-wl-call-action="audio-output"] { order: 1; }
.winlink-call-backdrop.is-active-call [data-wl-call-action="hangup"] { order: 2; }
.winlink-call-backdrop.is-active-call [data-wl-call-action="mute"] { order: 3; }

.winlink-call-backdrop.is-active-call .is-hangup svg {
  background: #ef3340;
  transform: rotate(135deg);
}

.winlink-call-backdrop.is-active-call .is-audio-output.is-active-state svg,
.winlink-call-backdrop.is-active-call .is-audio-output[aria-pressed="true"] svg,
.winlink-call-backdrop.is-active-call .is-muted.is-active-state svg,
.winlink-call-backdrop.is-active-call .is-muted[aria-pressed="true"] svg {
  color: #0751a6;
  background: #fff !important;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18), 0 10px 28px rgba(0, 13, 36, 0.28);
}

.winlink-call-backdrop.is-active-call .is-muted.is-active-state::after,
.winlink-call-backdrop.is-active-call .is-muted[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 31px;
  left: 50%;
  width: 31px;
  height: 3px;
  border-radius: 999px;
  background: #dc2626;
  transform: translate(-50%, -50%) rotate(-45deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.68);
  pointer-events: none;
}

.winlink-call-backdrop.is-active-call .winlink-call-action:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

.winlink-call-backdrop.is-active-call .winlink-call-action:disabled {
  cursor: default;
  opacity: 0.46;
}

.winlink-call-backdrop.is-active-call .winlink-call-action:disabled svg,
.winlink-call-backdrop.is-active-call .winlink-call-action.is-active-state:disabled svg,
.winlink-call-backdrop.is-active-call .winlink-call-action[aria-pressed="true"]:disabled svg {
  color: #fff;
  background: rgba(12, 55, 105, 0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.13), 0 9px 24px rgba(0, 13, 36, 0.24);
}

.winlink-call-backdrop.is-active-call .is-muted:disabled::after {
  display: none;
}

@media (max-width: 360px), (max-height: 620px) {
  .winlink-call-backdrop.is-active-call .winlink-call-sheet {
    padding-inline: 10px;
  }
  .winlink-call-backdrop.is-active-call .winlink-call-peer {
    margin-top: 18px;
    gap: 9px;
  }
  .winlink-call-backdrop.is-active-call .winlink-call-avatar,
  .winlink-call-backdrop.is-active-call .winlink-call-peer .winlink-chat-avatar {
    width: 96px;
    height: 96px;
  }
  .winlink-call-backdrop.is-active-call .winlink-call-actions {
    gap: 6px;
    padding-top: 112px;
  }
  .winlink-call-backdrop.is-active-call .winlink-call-action svg {
    width: 23px;
    height: 23px;
    padding: 16px;
  }
}

/* M4G1 native-like foreground incoming screen; identity is hydrated only from authorized hosted data. */
.winlink-call-backdrop.is-incoming-call {
  place-items: stretch;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(48, 145, 255, 0.5), transparent 42%),
    linear-gradient(160deg, #0872d5 0%, #0751a6 46%, #061c3c 100%);
  backdrop-filter: none;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-visual-overlay {
  z-index: -1;
  background: linear-gradient(180deg, rgba(1, 24, 57, 0.24), rgba(2, 18, 43, 0.88));
}

.winlink-call-backdrop.is-incoming-call .winlink-call-sheet {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  padding: max(32px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom));
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-peer {
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  margin-top: clamp(34px, 9vh, 92px);
  text-align: center;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-avatar,
.winlink-call-backdrop.is-incoming-call .winlink-call-peer .winlink-chat-avatar {
  width: clamp(112px, 31vw, 146px);
  height: clamp(112px, 31vw, 146px);
  flex-basis: auto;
  border: 3px solid rgba(255, 255, 255, 0.76);
  font-size: 48px;
  box-shadow: 0 18px 52px rgba(0, 16, 42, 0.36);
}

.winlink-call-backdrop.is-incoming-call .winlink-call-peer h2 {
  margin: 0 0 4px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 16px;
  font-weight: 700;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-peer p {
  max-width: min(84vw, 440px);
  color: #fff;
  font-size: clamp(24px, 7vw, 34px);
  font-weight: 800;
  line-height: 1.16;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-peer small,
.winlink-call-backdrop.is-incoming-call .winlink-call-status {
  color: rgba(255, 255, 255, 0.8);
}

.winlink-call-backdrop.is-incoming-call .winlink-call-status {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-actions {
  flex-wrap: nowrap;
  gap: clamp(26px, 12vw, 64px);
  width: min(100%, 360px);
  margin-top: auto;
  padding-top: 130px;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-action {
  flex: 1 1 0;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
  min-height: 104px;
  padding: 0;
  border-radius: 18px;
  color: #fff;
  background: transparent;
  font-size: 14px;
}

.winlink-call-backdrop.is-incoming-call .winlink-call-action svg {
  box-sizing: content-box;
  width: 29px;
  height: 29px;
  padding: 21px;
  border-radius: 50%;
  box-shadow: 0 10px 28px rgba(0, 13, 36, 0.3);
}

.winlink-call-backdrop.is-incoming-call .is-decline svg { background: #e13b4a; }
.winlink-call-backdrop.is-incoming-call .is-accept svg { background: #1078e8; }

.winlink-call-backdrop.is-incoming-call .winlink-call-action:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 360px), (max-height: 620px) {
  .winlink-call-backdrop.is-incoming-call .winlink-call-sheet { padding-inline: 10px; }
  .winlink-call-backdrop.is-incoming-call .winlink-call-peer { margin-top: 18px; gap: 9px; }
  .winlink-call-backdrop.is-incoming-call .winlink-call-avatar,
  .winlink-call-backdrop.is-incoming-call .winlink-call-peer .winlink-chat-avatar { width: 96px; height: 96px; }
  .winlink-call-backdrop.is-incoming-call .winlink-call-actions { gap: 24px; padding-top: 110px; }
  .winlink-call-backdrop.is-incoming-call .winlink-call-action svg { width: 26px; height: 26px; padding: 18px; }
}

.winlink-chat-message-scroll {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  padding: 10px 10px 14px;
  background: #eef4fb;
}

.winlink-chat-date {
  align-self: center;
  margin: 5px 0;
  padding: 4px 9px;
  color: #6d7f91;
  background: rgba(255, 255, 255, .82);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.winlink-chat-bubble-row {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: clip;
  padding-bottom: 8px;
}

.winlink-chat-bubble-row.is-own {
  align-items: flex-end;
}

.winlink-chat-bubble-row.is-other {
  align-items: flex-start;
}

.winlink-chat-bubble {
  position: relative;
  width: fit-content;
  min-width: min-content;
  max-width: min(78%, 560px);
  padding: 8px 10px 7px;
  color: #14334f;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(118, 142, 166, .16);
  border-radius: 14px;
  box-shadow: none;
}

.winlink-chat-bubble-row.is-own .winlink-chat-bubble {
  color: #12395f;
  background: #ddecff;
  border-color: rgba(9, 105, 218, .16);
}

.winlink-chat-bubble-row.is-media .winlink-chat-bubble,
.winlink-chat-bubble-row.is-recalled .winlink-chat-bubble {
  width: auto;
  color: #14334f;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  padding: 0;
}

.winlink-chat-bubble p {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
  font-size: 14px;
  line-height: 1.38;
}

.winlink-chat-bubble .winlink-chat-text-content,
.winlink-chat-font-preview .winlink-chat-text-content {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: var(--chat-message-font-size, 20px);
  line-height: 1.42;
  font-weight: 400;
}

.winlink-chat-image-button,
.winlink-chat-video-button {
  position: relative;
  display: block;
  width: min(68vw, 300px);
  max-width: 100%;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
  border-radius: 8px;
  box-shadow: none;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

.winlink-chat-media-cluster {
  display: grid;
  justify-items: end;
  max-width: 100%;
  min-width: 0;
  gap: 4px;
}

.winlink-chat-bubble-row.is-other .winlink-chat-media-cluster {
  justify-items: start;
}

.winlink-chat-reply-quote {
  display: grid;
  gap: 3px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 6px;
  padding: 6px 7px;
  color: #36546e;
  background: rgba(255, 255, 255, .48);
  border: 0;
  border-left: 3px solid rgba(9, 105, 218, .32);
  border-radius: 8px;
  text-align: left;
  line-height: 1.2;
  cursor: pointer;
}

.winlink-chat-bubble-row.is-other .winlink-chat-reply-quote {
  background: rgba(235, 242, 249, .72);
}

.winlink-chat-reply-quote b,
.winlink-chat-reply-preview b {
  overflow: hidden;
  color: #14334f;
  font-size: 11px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-reply-snippet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  color: #60758a;
  font-size: 12px;
  font-weight: 400;
}

.winlink-chat-reply-snippet span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-reply-snippet img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: cover;
  border-radius: 6px;
}

.winlink-chat-bubble-row.is-reply-highlight .winlink-chat-bubble {
  outline: 2px solid rgba(9, 105, 218, .28);
  outline-offset: 3px;
  transition: outline-color .18s ease;
}

.winlink-chat-message-footer {
  position: absolute;
  bottom: -33px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 10px;
  width: auto;
  max-width: calc(100% - 12px);
  margin-top: 0;
  line-height: 1;
  min-inline-size: 0;
}

.winlink-chat-bubble-row.is-own .winlink-chat-message-footer {
  right: 7px;
}

.winlink-chat-bubble-row.is-other .winlink-chat-message-footer {
  left: 7px;
}

.winlink-chat-message-footer-left,
.winlink-chat-message-footer-right {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.winlink-chat-message-footer-left {
  justify-content: flex-start;
  flex: 0 1 auto;
  overflow: hidden;
}

.winlink-chat-message-footer-right {
  justify-content: flex-end;
  flex: 0 0 auto;
  margin-left: 0;
}

.winlink-chat-media-quick-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 1px;
  padding-right: 1px;
  line-height: 1;
  flex: 0 0 auto;
  max-width: 100%;
  white-space: nowrap;
}

.winlink-chat-media-quick {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  padding: 0;
  color: #28516f;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  line-height: 1;
  touch-action: manipulation;
}

.winlink-chat-media-quick svg {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  min-width: 21px;
  min-height: 21px;
  max-width: 21px;
  max-height: 21px;
  aspect-ratio: 1 / 1;
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
  transform: none;
}

.winlink-chat-media-quick .wl-icon-heart,
.winlink-chat-media-quick .wl-icon-share {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: transparent;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.winlink-chat-context-menu .wl-icon-reply,
.winlink-chat-context-menu .wl-icon-share,
.winlink-chat-media-quick .wl-icon-share {
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform: none;
}

.winlink-chat-media-quick.is-reaction {
  color: #dc2626;
}

.winlink-chat-media-quick.is-reaction.is-active {
  color: #dc2626;
}

.winlink-chat-media-quick.is-heart-selected svg {
  fill: #dc2626;
  stroke: #dc2626;
}

.winlink-chat-reaction-emoji {
  display: block;
  font-size: 21px;
  line-height: 1;
}

.winlink-chat-media-quick.is-share {
  color: #0f8f6f;
}

.winlink-chat-reaction-summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  margin: 0 1px;
  padding: 0;
  min-height: 0;
  color: #28516f;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}

.winlink-chat-reaction-summary span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.winlink-chat-reaction-summary svg {
  display: block;
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  min-width: 21px;
  min-height: 21px;
  max-width: 21px;
  max-height: 21px;
  aspect-ratio: 1 / 1;
  fill: #dc2626;
  stroke: #dc2626;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform: none;
}

.winlink-chat-image-button img,
.winlink-chat-video-button video,
.winlink-chat-video-button img,
.winlink-chat-video-placeholder {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: cover;
  background: #dfe8f2;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-select: none;
}

.winlink-chat-video-button video {
  object-fit: cover;
}

.winlink-chat-bubble-row.is-own .winlink-chat-image-button img,
.winlink-chat-bubble-row.is-own .winlink-chat-video-button img,
.winlink-chat-bubble-row.is-own .winlink-chat-video-placeholder {
  background: rgba(255, 255, 255, .2);
}

.winlink-chat-video-play {
  position: absolute;
  inset: 50% auto auto 50%;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #fff;
  background: rgba(4, 17, 29, .66);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.winlink-chat-video-play svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.winlink-chat-video-button small,
.winlink-chat-media-tile small {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 2px 5px;
  color: #fff;
  background: rgba(4, 17, 29, .68);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.winlink-chat-image-caption {
  margin-top: 7px !important;
}

.winlink-chat-message-meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 31px;
  max-width: min(78%, 560px);
  min-width: 0;
  overflow: hidden;
  color: #788da2;
  font-size: 10px;
  line-height: 1.15;
  text-align: right;
}

.winlink-chat-bubble-row.is-other .winlink-chat-message-meta {
  justify-content: flex-start;
  text-align: left;
}

.winlink-chat-bubble time {
  color: inherit;
  font-size: inherit;
}

.winlink-chat-bubble-row.is-own .winlink-chat-message-meta {
  color: #788da2;
}

.winlink-chat-message-status {
  color: #7b8da0;
  font-size: inherit;
  font-weight: 400;
}

.winlink-chat-bubble-row.is-media .winlink-chat-message-meta,
.winlink-chat-bubble-row.is-recalled .winlink-chat-message-meta {
  color: #788da2;
  padding: 0 2px;
}

.winlink-chat-bubble-row.is-media .winlink-chat-message-status {
  color: #7b8da0;
  padding: 0 2px;
}

.winlink-chat-bubble-row.is-action-selected .winlink-chat-image-button,
.winlink-chat-bubble-row.is-action-selected .winlink-chat-video-button {
  outline: 2px solid rgba(0, 91, 172, .34);
  outline-offset: 3px;
}

.winlink-chat-recalled {
  color: #788da2;
  font-style: italic;
}

.winlink-chat-context-layer {
  position: fixed;
  inset: 0;
  z-index: 170;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(8, 24, 39, .28);
}

.winlink-chat-context-sheet {
  width: min(calc(100vw - 24px), 520px);
  display: grid;
  gap: 12px;
  padding: 10px 12px 14px;
  background: rgba(255, 255, 255, .99);
  border: 1px solid rgba(154, 176, 200, .48);
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 18px 52px rgba(15, 35, 56, .28);
}

.winlink-chat-context-grip {
  justify-self: center;
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: #b8c7d6;
}

.winlink-chat-context-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: #14334f;
}

.winlink-chat-context-title b {
  font-size: 15px;
  font-weight: 500;
}

.winlink-chat-context-title span {
  min-width: 0;
  color: #667f98;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}

.winlink-chat-context-menu {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.winlink-chat-context-menu button {
  min-width: 0;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 2px;
  color: #14334f;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  line-height: 1.15;
}

.winlink-chat-context-menu button:hover,
.winlink-chat-context-menu button:active {
  background: rgba(0, 91, 172, .06);
}

.winlink-chat-context-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #005bac;
  background: transparent;
  border: 0;
  border-radius: 999px;
}

.winlink-chat-context-menu svg {
  width: 27px;
  height: 27px;
  stroke-width: 2.2;
}

.winlink-chat-context-menu button.is-download .winlink-chat-context-icon {
  color: #0284c7;
}

.winlink-chat-context-menu button.is-share .winlink-chat-context-icon {
  color: #16a34a;
}

.winlink-chat-context-menu button.is-delete .winlink-chat-context-icon {
  color: #dc2626;
}

.winlink-chat-context-menu button.is-recall .winlink-chat-context-icon {
  color: #ea580c;
}

.winlink-chat-context-menu button.is-details .winlink-chat-context-icon {
  color: #475569;
}

.winlink-chat-details-backdrop {
  z-index: 181;
}

.winlink-chat-reaction-layer,
.winlink-chat-reaction-details-layer,
.winlink-chat-share-layer {
  position: fixed;
  inset: 0;
  z-index: 175;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 12px);
  background: rgba(8, 24, 39, .22);
}

.winlink-chat-reaction-details-sheet {
  width: min(calc(100vw - 24px), 440px);
  max-height: min(70vh, 560px);
  display: grid;
  grid-template-rows: auto auto minmax(80px, 1fr);
  gap: 10px;
  padding: 12px;
  color: #14334f;
  background: #fff;
  border: 1px solid rgba(154, 176, 200, .38);
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 18px 52px rgba(15, 35, 56, .26);
}

.winlink-chat-reaction-details-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-chat-reaction-details-sheet h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

.winlink-chat-reaction-details-sheet header button {
  width: 32px;
  height: 32px;
  padding: 0;
  color: #536b84;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
}

.winlink-chat-reaction-detail-tabs {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  color: #536b84;
  font-size: 12px;
}

.winlink-chat-reaction-detail-tabs span {
  flex: 0 0 auto;
  padding: 3px 7px;
  background: rgba(0, 91, 172, .06);
  border-radius: 999px;
}

.winlink-chat-reaction-detail-list {
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 4px;
}

.winlink-chat-reaction-detail-row {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  padding: 7px 2px;
}

.winlink-chat-reaction-detail-row .winlink-chat-avatar {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
  font-size: 12px;
  font-weight: 600;
}

.winlink-chat-reaction-detail-row span {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.winlink-chat-reaction-detail-row b {
  overflow: hidden;
  color: #14334f;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-reaction-detail-row small {
  overflow: hidden;
  color: #71859a;
  font-size: 11px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-reaction-detail-row i {
  font-style: normal;
  font-size: 22px;
  line-height: 1;
}

.winlink-chat-reaction-detail-empty {
  margin: 8px 0;
  color: #71859a;
  font-size: 13px;
  text-align: center;
}

.winlink-chat-reaction-picker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(154, 176, 200, .36);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(15, 35, 56, .22);
}

.winlink-chat-reaction-picker button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 24px;
}

.winlink-chat-reaction-picker button.is-active,
.winlink-chat-reaction-picker button:active {
  background: rgba(0, 91, 172, .08);
}

.winlink-chat-share-sheet {
  width: min(calc(100vw - 24px), 480px);
  max-height: min(78vh, 680px);
  display: grid;
  grid-template-rows: auto auto minmax(130px, 1fr) auto auto auto auto;
  gap: 10px;
  padding: 13px 13px calc(env(safe-area-inset-bottom, 0px) + 13px);
  color: #14334f;
  background: #fff;
  border: 1px solid rgba(154, 176, 200, .4);
  border-radius: 16px 16px 12px 12px;
  box-shadow: 0 20px 54px rgba(15, 35, 56, .26);
}

.winlink-chat-share-sheet header,
.winlink-chat-share-sheet footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-chat-share-sheet h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.winlink-chat-share-sheet header button {
  width: 32px;
  height: 32px;
  color: #667f98;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}

.winlink-chat-share-search input,
.winlink-chat-share-note textarea {
  width: 100%;
  border: 1px solid rgba(154, 176, 200, .55);
  border-radius: 10px;
  color: #14334f;
  background: #f8fbfe;
}

.winlink-chat-share-search input {
  height: 40px;
  padding: 0 12px;
  font-size: 14px;
}

.winlink-chat-share-list {
  display: grid;
  gap: 4px;
  overflow: auto;
  min-height: 120px;
}

.winlink-chat-share-list button {
  min-height: 54px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 10px;
  padding: 7px 6px;
  color: #14334f;
  background: transparent;
  border: 0;
  border-radius: 10px;
  text-align: left;
}

.winlink-chat-share-list button.is-selected,
.winlink-chat-share-list button:active {
  background: rgba(0, 91, 172, .07);
}

.winlink-chat-share-list b,
.winlink-chat-share-list small {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.winlink-chat-share-list b {
  font-size: 13px;
  font-weight: 500;
}

.winlink-chat-share-list small,
.winlink-chat-share-note span,
.winlink-chat-share-sheet footer small {
  color: #667f98;
  font-size: 12px;
  font-weight: 400;
}

.winlink-chat-share-list i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: #0f8f6f;
  border-radius: 999px;
  font-style: normal;
  font-size: 14px;
}

.winlink-chat-share-list i:empty {
  background: rgba(154, 176, 200, .24);
}

.winlink-chat-share-note {
  display: grid;
  gap: 5px;
}

.winlink-chat-share-note textarea {
  min-height: 58px;
  padding: 8px 10px;
  resize: none;
  font-size: 13px;
}

.winlink-chat-share-error,
.winlink-chat-share-result,
.winlink-chat-share-empty {
  margin: 0;
  color: #667f98;
  font-size: 12px;
}

.winlink-chat-share-error {
  color: #b91c1c;
}

.winlink-chat-share-result {
  color: #0f8f6f;
}

.winlink-chat-share-sheet footer button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #005bac;
  border: 0;
  border-radius: 999px;
}

.winlink-chat-share-sheet footer button:disabled {
  opacity: .42;
}

.winlink-chat-details-sheet {
  width: min(calc(100vw - 32px), 380px);
  display: grid;
  gap: 12px;
  padding: 14px;
  color: #14334f;
  background: #fff;
  border: 1px solid rgba(154, 176, 200, .48);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(15, 35, 56, .24);
}

.winlink-chat-details-sheet header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.winlink-chat-details-sheet h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 900;
}

.winlink-chat-details-sheet header button {
  width: 32px;
  height: 32px;
  color: #667f98;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 22px;
  line-height: 1;
}

.winlink-chat-details-sheet header button:hover,
.winlink-chat-details-sheet header button:active {
  color: #fff;
  background: #dc2626;
}

.winlink-chat-details-sheet dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.winlink-chat-details-sheet dl div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid #e5edf5;
}

.winlink-chat-details-sheet dt {
  color: #667f98;
  font-size: 12px;
  font-weight: 800;
}

.winlink-chat-details-sheet dd {
  min-width: 0;
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.winlink-chat-confirm-backdrop {
  z-index: 180;
}

.winlink-chat-confirm-dialog {
  width: min(calc(100vw - 32px), 340px);
  display: grid;
  gap: 10px;
  padding: 16px;
  background: #fff;
  border: 1px solid rgba(154, 176, 200, .48);
  border-radius: 8px;
  box-shadow: 0 18px 48px rgba(15, 35, 56, .24);
}

.winlink-chat-confirm-dialog h2,
.winlink-chat-confirm-dialog p {
  margin: 0;
}

.winlink-chat-confirm-dialog h2 {
  color: #14334f;
  font-size: 16px;
  font-weight: 900;
}

.winlink-chat-confirm-dialog p {
  color: #53687a;
  font-size: 13px;
  line-height: 1.35;
}

.winlink-chat-confirm-error {
  color: #b42335 !important;
  font-weight: 800;
}

.winlink-chat-confirm-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.winlink-chat-confirm-dialog footer button {
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid #d5e1ee;
  border-radius: 8px;
  background: #f7faff;
  color: #14334f;
  font-weight: 800;
}

.winlink-chat-confirm-dialog footer .winlink-chat-confirm-danger {
  color: #fff;
  background: #b42335;
  border-color: #b42335;
}

.winlink-chat-composer {
  display: grid;
  gap: 7px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  padding: 9px 10px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96);
  border-top: 1px solid rgba(86, 118, 150, .16);
}

.winlink-chat-composer-bar {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: end;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 4px 5px;
  background: #f6f8fb;
  border: 1px solid rgba(118, 142, 166, .18);
  border-radius: 20px;
  box-shadow: none;
}

.winlink-chat-composer-bar:focus-within {
  background: #f8fbff;
  border-color: rgba(9, 105, 218, .14);
}

.winlink-chat-composer-field {
  min-width: 0;
  align-self: center;
}

.winlink-chat-gallery-button,
.winlink-chat-composer button[type="submit"] {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  color: #4c6b86;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  line-height: 1;
  touch-action: manipulation;
}

.winlink-chat-gallery-button svg,
.winlink-chat-composer button[type="submit"] svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.9;
}

.winlink-chat-composer textarea {
  width: 100%;
  min-height: 36px;
  max-height: calc((1.35em * 5) + 22px);
  resize: none;
  padding: 8px 2px;
  color: #14334f;
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  line-height: 1.35;
  overflow-y: hidden;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
}

.winlink-chat-composer textarea:focus,
.winlink-chat-composer textarea:focus-visible {
  outline: 0;
  box-shadow: none;
}

.winlink-chat-composer textarea::placeholder {
  color: #8aa0b4;
}

.winlink-chat-reply-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 8px;
  color: #36546e;
  background: #f4f8fc;
  border: 1px solid rgba(118, 142, 166, .16);
  border-left: 3px solid rgba(9, 105, 218, .34);
  border-radius: 12px;
}

.winlink-chat-reply-preview > span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.winlink-chat-reply-preview button {
  width: 34px;
  height: 34px;
  padding: 0;
  color: #60758a;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
}

.winlink-chat-reply-preview button:hover,
.winlink-chat-reply-preview button:active {
  color: #fff;
  background: #dc2626;
}

.winlink-chat-composer button[type="submit"] {
  color: #0969da;
}

.winlink-chat-composer button[type="submit"]:disabled {
  color: #8ba0b3;
  background: transparent;
}

.winlink-chat-image-input {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.winlink-chat-media-picker,
.winlink-chat-send-error {
  grid-column: 1 / -1;
}

.winlink-chat-media-picker {
  display: grid;
  gap: 9px;
  max-height: min(42dvh, 310px);
  padding: 8px;
  overflow-y: auto;
  background: #f7faff;
  border: 1px solid #d9e5f1;
  border-radius: 8px;
}

.winlink-chat-media-picker-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
}

.winlink-chat-media-picker-head span {
  min-width: 0;
  color: #14334f;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.winlink-chat-media-picker-head button {
  width: 34px;
  height: 34px;
  color: #47657f;
  background: #fff;
  border: 1px solid #d5e1ee;
  border-radius: 8px;
}

.winlink-chat-media-picker-head button:disabled {
  color: #8ba0b3;
  background: #e2e9f1;
  border-color: #d5e1ee;
}

.winlink-chat-media-picker-head .winlink-chat-media-send {
  width: 38px;
  color: #fff;
  background: #0969da;
  border-color: #0969da;
}

.winlink-chat-media-picker-head .winlink-chat-media-send:disabled {
  color: #8ba0b3;
  background: #e2e9f1;
  border-color: #d5e1ee;
}

.winlink-chat-media-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 84px));
  gap: 7px;
  align-items: start;
}

.winlink-chat-media-cell {
  position: relative;
  width: 84px;
  max-width: 100%;
}

.winlink-chat-media-tile {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  color: #14334f;
  background: #fff;
  border: 1px solid #d5e1ee;
  border-radius: 8px;
}

.winlink-chat-media-tile.is-action {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 11px;
}

.winlink-chat-media-tile svg {
  width: 20px;
  height: 20px;
}

.winlink-chat-media-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.winlink-chat-media-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.winlink-chat-media-tile .winlink-chat-video-play {
  width: 30px;
  height: 30px;
}

.winlink-chat-media-tile .winlink-chat-video-play svg {
  width: 16px;
  height: 16px;
}

.winlink-chat-media-tile b {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: #0969da;
  border: 3px solid #fff;
  border-radius: 999px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.winlink-chat-media-tile.is-selected {
  border-color: rgba(9, 105, 218, .38);
  box-shadow: none;
}

.winlink-chat-pending-media {
  overflow: hidden;
}

.winlink-chat-pending-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(8, 24, 39, 0);
  transition: background .18s ease;
}

.winlink-chat-bubble-row.is-uploading .winlink-chat-pending-media::after,
.winlink-chat-bubble-row.is-processing .winlink-chat-pending-media::after {
  background: rgba(8, 24, 39, .32);
}

.winlink-chat-pending-order {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: #fff;
  background: #0969da;
  border: 2px solid rgba(255, 255, 255, .92);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}

.winlink-chat-pending-remove {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  color: #14334f;
  background: rgba(255, 255, 255, .94);
  border: 0;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(8, 24, 39, .16);
  font-size: 20px;
  line-height: 1;
}

.winlink-chat-pending-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #fff;
  background: rgba(8, 24, 39, .34);
  text-align: center;
}

.winlink-chat-pending-overlay strong {
  font-size: 13px;
  font-weight: 700;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .4);
}

.winlink-chat-pending-overlay button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(9, 105, 218, .92);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  font-size: 21px;
  line-height: 1;
}

.winlink-chat-pending-overlay.is-error {
  background: rgba(127, 29, 29, .42);
}

.winlink-chat-pending-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid rgba(255, 255, 255, .42);
  border-top-color: #fff;
  border-radius: 999px;
  animation: winlink-chat-video-spin .8s linear infinite;
}

.winlink-chat-media-tile.is-sending {
  border-color: #0969da;
}

.winlink-chat-media-remove {
  position: absolute;
  top: -7px;
  left: -7px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #9f1d32;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(244, 199, 207, .95);
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(15, 35, 56, .14);
  font-size: 20px;
  line-height: 1;
}

.winlink-chat-media-remove:disabled {
  color: #8ba0b3;
  background: #e2e9f1;
  border-color: #d5e1ee;
}

.winlink-chat-media-status {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  color: #fff;
  background: #0f8f6f;
  border-radius: 999px;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.winlink-chat-media-status.is-failed {
  background: #dc2626;
}

.winlink-chat-send-error {
  color: #9f1d32;
  font-size: 12px;
  font-weight: 700;
}

.winlink-chat-media-pending {
  color: #14334f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}

.winlink-chat-media-meta {
  color: #53687a;
  font-size: 12px;
  font-weight: 700;
}

.winlink-chat-video-progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 5px;
  padding: 8px;
  color: #fff;
  text-align: center;
  background: rgba(5, 17, 30, .56);
}

.winlink-chat-video-progress-ring {
  --wl-video-progress: 0;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background:
    radial-gradient(circle at center, rgba(5, 17, 30, .86) 0 55%, transparent 56%),
    conic-gradient(#ffffff calc(var(--wl-video-progress) * 1%), rgba(255, 255, 255, .26) 0);
}

.winlink-chat-video-progress[data-phase="PROCESSING"] .winlink-chat-video-progress-ring,
.winlink-chat-video-progress:not([style]) .winlink-chat-video-progress-ring {
  border: 4px solid rgba(255, 255, 255, .34);
  border-top-color: #ffffff;
  background: rgba(5, 17, 30, .76);
  animation: winlink-chat-video-spin .85s linear infinite;
}

.winlink-chat-video-progress-ring b {
  position: static;
  width: auto;
  height: auto;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.winlink-chat-video-progress strong {
  max-width: 100%;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
}

.winlink-chat-video-progress small {
  max-width: 100%;
  color: rgba(255, 255, 255, .88);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
}

@keyframes winlink-chat-video-spin {
  to { transform: rotate(360deg); }
}

.winlink-chat-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  background: rgba(4, 17, 29, .94);
}

.winlink-chat-video-viewer {
  height: 100dvh;
  padding: 0;
  background: #000;
  overflow: hidden;
}

.winlink-chat-image-viewer > button {
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: 12px;
  width: 38px;
  height: 38px;
  color: #fff;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
}

.winlink-chat-image-viewer img,
.winlink-chat-image-viewer video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}

.winlink-chat-video-viewer video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background: #000;
  object-fit: contain;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  user-select: none;
}

.winlink-chat-image-viewer > .winlink-chat-video-viewer-close {
  top: calc(env(safe-area-inset-top, 0px) + 18px);
  right: 20px;
  width: 44px;
  height: 44px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.winlink-chat-video-viewer.is-controls-visible .winlink-chat-video-viewer-close {
  opacity: 1;
  pointer-events: auto;
}

.winlink-chat-video-viewer-playback {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity .16s ease;
}

.winlink-chat-video-viewer.is-controls-visible .winlink-chat-video-viewer-playback {
  opacity: 1;
  pointer-events: auto;
}

.winlink-chat-video-viewer-playback-row {
  display: grid;
  grid-template-columns: 48px 62px 48px;
  align-items: center;
  gap: 18px;
}

.winlink-chat-video-viewer-playback button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: rgba(4, 17, 29, .58);
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  line-height: 1;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .2);
}

.winlink-chat-video-viewer-playback button.is-side {
  width: 48px;
  height: 48px;
  font-weight: 400;
}

.winlink-chat-video-viewer-playback button.is-side svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.2;
}

.winlink-chat-video-viewer-playback button.is-play {
  width: 62px;
  height: 62px;
  font-size: 25px;
  font-weight: 700;
}

.winlink-chat-video-viewer-controls {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 12px max(14px, env(safe-area-inset-right, 0px)) max(14px, env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}

.winlink-chat-video-viewer.is-controls-visible .winlink-chat-video-viewer-controls {
  opacity: 1;
  pointer-events: auto;
}

.winlink-chat-video-viewer-progress {
  display: grid;
  gap: 5px;
  margin-bottom: 2px;
}

.winlink-chat-video-viewer-time {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, .88);
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.winlink-chat-video-viewer-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
  gap: 12px;
}

.winlink-chat-video-viewer-reactions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.winlink-chat-video-viewer-reactions button,
.winlink-chat-video-viewer-share {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  border-radius: 999px;
  line-height: 1;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .55);
}

.winlink-chat-video-viewer-reactions button {
  font-size: 24px;
}

.winlink-chat-video-viewer-reactions button.is-active {
  transform: translateY(-2px) scale(1.08);
  text-shadow: 0 0 0 #fff, 0 2px 12px rgba(255, 255, 255, .34);
}

.winlink-chat-video-viewer-share {
  color: #5eead4;
}

.winlink-chat-video-viewer-share svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.winlink-chat-video-viewer-seek {
  width: 100%;
  accent-color: #5eead4;
}

@media (max-width: 360px) {
  .winlink-chat-head {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    padding-inline: 8px;
  }
  .winlink-chat-conversation-head {
    grid-template-columns: 38px minmax(0, 1fr) 84px;
    gap: 6px;
  }
  .winlink-chat-peer {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 7px;
  }
  .winlink-chat-peer .winlink-chat-avatar {
    width: 38px;
    height: 38px;
    flex-basis: 38px;
  }
  .winlink-chat-head .winlink-chat-peer-action {
    width: 40px;
    height: 40px;
  }
  .winlink-chat-body,
  .winlink-chat-message-scroll,
  .winlink-chat-composer {
    padding-inline: 8px;
  }
  .winlink-chat-inbox-row {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 8px;
  }
  .winlink-chat-avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .winlink-chat-bubble {
    max-width: 84%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .winlink-shell *,
  .winlink-shell *::before,
  .winlink-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}