/* R87.3 — Nerddi universal button system
   Shared button language for Phone, Messenger, People, Pulse and public CTAs. */
:root{
  --nb-radius:16px;
  --nb-radius-pill:999px;
  --nb-shadow-soft:0 12px 30px rgba(12,18,36,.14), inset 0 1px 0 rgba(255,255,255,.22);
  --nb-shadow-strong:0 18px 38px rgba(80,96,255,.24), inset 0 1px 0 rgba(255,255,255,.22);
  --nb-shadow-accent:0 18px 40px rgba(108,79,255,.28), inset 0 1px 0 rgba(255,255,255,.18);
  --nb-shadow-cyan:0 18px 40px rgba(27,192,255,.24), inset 0 1px 0 rgba(255,255,255,.20);
  --nb-border:color-mix(in srgb, var(--qs-line, rgba(120,130,155,.35)) 88%, transparent);
  --nb-surface:color-mix(in srgb, var(--qs-surface, rgba(255,255,255,.92)) 92%, rgba(255,255,255,.40));
  --nb-surface-2:color-mix(in srgb, var(--qs-surface-2, rgba(255,255,255,.82)) 94%, rgba(255,255,255,.20));
  --nb-text:var(--qs-text, var(--text, #101726));
  --nb-muted:color-mix(in srgb, var(--nb-text) 72%, transparent);
  --nb-blue:linear-gradient(135deg,#2781ff 0%,#4b67ff 54%,#7358ff 100%);
  --nb-violet:linear-gradient(135deg,#4f74ff 0%,#7a4bff 54%,#a25dff 100%);
  --nb-presence:linear-gradient(135deg,#0fb6ff 0%,#5d74ff 48%,#8f4dff 100%);
  --nb-success:linear-gradient(135deg,#22c55e 0%,#18b47c 100%);
  --nb-danger:linear-gradient(135deg,#ff637f 0%,#e73a58 100%);
}
html[data-theme="dark"]{
  --nb-shadow-soft:0 16px 38px rgba(0,0,0,.33), inset 0 1px 0 rgba(255,255,255,.07);
  --nb-shadow-strong:0 20px 44px rgba(74,101,255,.32), inset 0 1px 0 rgba(255,255,255,.12);
  --nb-shadow-accent:0 20px 44px rgba(120,88,255,.34), inset 0 1px 0 rgba(255,255,255,.10);
  --nb-shadow-cyan:0 20px 44px rgba(19,170,255,.28), inset 0 1px 0 rgba(255,255,255,.11);
  --nb-border:rgba(255,255,255,.12);
  --nb-surface:rgba(255,255,255,.055);
  --nb-surface-2:rgba(255,255,255,.08);
  --nb-text:var(--qs-text, var(--text, #f4f6fb));
  --nb-muted:rgba(255,255,255,.82);
}

:is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini){
  appearance:none;
  -webkit-appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:11px 16px;
  border-radius:var(--nb-radius);
  border:1px solid var(--nb-border);
  background:var(--nb-surface);
  color:var(--nb-text);
  font-weight:800;
  font-size:.92rem;
  line-height:1.1;
  letter-spacing:-.01em;
  text-decoration:none;
  box-shadow:var(--nb-shadow-soft);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease,filter .18s ease;
  backdrop-filter:blur(14px) saturate(125%);
}

:is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini):hover{
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.22);
}
html[data-theme="dark"] :is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini):hover{
  box-shadow:0 20px 42px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.10);
}
:is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini):active{
  transform:translateY(0) scale(.985);
}
:is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini):focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,#8da2ff 50%, transparent),0 18px 36px rgba(15,23,42,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
:is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini)[disabled],
:is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini).is-disabled{
  opacity:.52;
  pointer-events:none;
  filter:saturate(.7);
  box-shadow:none;
}

/* Primary / promoted actions */
:is(.btn-primary,.qs-primary,.qs-public-nav-auth,.qs-public-cta-primary,.qs-action-primary,.qs-contact-sheet-primary,.qs-phone-network-actions>.qs-primary,.qs-friend-actions .qs-primary-mini,.qs-friend-request-actions .qs-primary-mini){
  background:var(--nb-blue);
  color:#fff!important;
  border-color:transparent;
  box-shadow:var(--nb-shadow-strong);
}
:is(.btn-primary,.qs-primary,.qs-public-nav-auth,.qs-public-cta-primary,.qs-action-primary,.qs-contact-sheet-primary,.qs-phone-network-actions>.qs-primary,.qs-friend-actions .qs-primary-mini,.qs-friend-request-actions .qs-primary-mini):hover{
  filter:brightness(1.03) saturate(1.02);
}

/* Secondary / glass buttons */
:is(.btn-ghost,.qs-secondary,.qs-public-cta-secondary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>.qs-secondary,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-glass,.qs-presence-knock-actions button,.centro-card-cta,.qs-public-network-action){
  background:linear-gradient(180deg,color-mix(in srgb,var(--nb-surface-2) 95%, rgba(255,255,255,.24)), color-mix(in srgb,var(--nb-surface) 96%, rgba(255,255,255,.10)));
  color:var(--nb-text);
}

/* Nerddi Phone button hierarchy */
.qs-presence-friend-actions{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  width:100%;
}
.qs-presence-friend-actions > button,
.qs-presence-friend-actions > a{
  width:100%;
  min-width:0;
}
.qs-presence-call{
  background:linear-gradient(180deg,color-mix(in srgb,#2f87ff 16%, var(--nb-surface)) 0%, color-mix(in srgb,#5e74ff 10%, var(--nb-surface-2)) 100%);
  border-color:color-mix(in srgb,#5e74ff 45%, transparent);
  color:var(--nb-text);
}
.qs-presence-video-call{
  background:var(--nb-violet)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:var(--nb-shadow-accent)!important;
}
.qs-presence-primary{
  background:var(--nb-presence)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:var(--nb-shadow-cyan)!important;
}
.qs-presence-ready-mini{
  min-height:40px;
  border-radius:999px!important;
  padding:0 15px!important;
  font-size:.78rem!important;
}
.qs-presence-readiness,
.qs-presence-empty,
.qs-presence-knock,
.qs-presence-friend-card{
  box-shadow:0 18px 38px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.15);
}
html[data-theme="dark"] .qs-presence-readiness,
html[data-theme="dark"] .qs-presence-empty,
html[data-theme="dark"] .qs-presence-knock,
html[data-theme="dark"] .qs-presence-friend-card{
  box-shadow:0 20px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}

/* Compact action contexts */
.qs-friend-actions a,
.qs-friend-actions button,
.qs-friend-request-actions a,
.qs-friend-request-actions button,
.qs-qr-modal-actions button,
.qs-profile-action,
.qs-primary-mini,
.qs-secondary,
.qs-primary{
  min-height:40px;
  font-size:.86rem;
}
.qs-friend-actions button,
.qs-friend-actions a,
.qs-friend-request-actions button,
.qs-friend-request-actions a{
  border-radius:14px;
}

/* Public surface CTAs */
.qs-public-cta,
.qs-public-cta-primary,
.qs-public-cta-secondary,
.qs-public-nav-auth,
.btn{
  border-radius:999px;
  padding-inline:20px;
}

/* Destructive/end-call accent remains clear */
.qs-presence-end,
button[data-presence-hangup]{
  background:var(--nb-danger)!important;
  color:#fff!important;
  border-color:transparent!important;
  box-shadow:0 18px 40px rgba(231,58,88,.28)!important;
}

/* Keep icon-only utility buttons untouched enough to stay circular where needed */
.qs-qr-modal-actions button,
.qs-r36-header-actions .qs-primary,
.qs-r36-header-actions .qs-secondary{justify-content:center}

@media(max-width:760px){
  :is(.btn,.btn-primary,.btn-ghost,.qs-primary,.qs-secondary,.qs-primary-mini,.qs-public-nav-auth,.qs-public-cta,.qs-public-cta-primary,.qs-public-cta-secondary,.qs-profile-action,.qs-action-primary,.qs-action-secondary,.qs-action-mini,.qs-action-utility,.qs-network-action,.qs-value-card-action,.qs-calls-link-button,.qs-phone-settings-button,.qs-phone-network-actions>a,.qs-phone-network-actions>button,.qs-friend-actions a,.qs-friend-actions button,.qs-friend-request-actions a,.qs-friend-request-actions button,.qs-qr-modal-actions button,.qs-presence-primary,.qs-presence-glass,.qs-presence-call,.qs-presence-video-call,.qs-presence-ready-mini,.qs-presence-knock-actions button,.qs-contact-sheet-primary,.qs-public-network-action,.centro-card-cta,.qs-primary-mini){
    min-height:46px;
    font-size:.9rem;
  }
  .qs-presence-friend-actions{grid-template-columns:1fr}
}
