/* App-wide "raised" button treatment for primary/secondary CTAs (forms + composer + FAB).
   Icon-only round buttons (header icons, kebab menus) intentionally stay flat — giving every
   small icon a bevel looks busy; only real calls-to-action get the embossed 3D look.
   Selectors are prefixed with "html body" purely to out-specify the existing skin layers
   (telegram-shell.css, whatsapp-ux.css, composer-polish.css, mobile-messenger.css) which set
   button colors with !important and load *after* this file (injected by ui.js at runtime) —
   without the extra specificity, whichever skin loads last would win regardless of intent.
   Colors come from theme-colors.css's --theme-primary(-dark/-edge) so the active color theme
   (Settings > تم رنگی) drives every button automatically. */
/* .send (composer) is intentionally NOT in this list — the composer's mic/send/attach/emoji
   are a flat, plain Telegram-style icon group (see voice-message.css), not a raised CTA. */
:root{
  --btn-secondary-top:#ffffff;
  --btn-secondary-bottom:#f2f5f4;
  --btn-secondary-edge:#d7e2df;
}

html body .primary,html body .profile-save,html body .notification-save,
html body .privacy-panel footer button:last-child,html body .sessions-panel footer button,
html body .registration-panel footer button:last-child,
html body .floating,html body #create-conversation{
  background:linear-gradient(180deg,var(--theme-primary),var(--theme-primary-dark))!important;
  color:#fff!important;
  border:0!important;
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 3px 0 var(--theme-primary-edge),0 6px 14px color-mix(in srgb,var(--theme-primary-dark) 40%,transparent)!important;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,background .2s ease!important;
}
html body .primary:hover,html body .profile-save:hover,html body .notification-save:hover,
html body .privacy-panel footer button:last-child:hover,html body .sessions-panel footer button:hover,
html body .registration-panel footer button:last-child:hover,
html body .floating:hover,html body #create-conversation:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 4px 0 var(--theme-primary-edge),0 9px 18px color-mix(in srgb,var(--theme-primary-dark) 50%,transparent)!important;
}
html body .primary:active,html body .profile-save:active,html body .notification-save:active,
html body .privacy-panel footer button:last-child:active,html body .sessions-panel footer button:active,
html body .registration-panel footer button:last-child:active,
html body .floating:active,html body #create-conversation:active{
  transform:translateY(2px);
  box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 1px 0 var(--theme-primary-edge),0 2px 6px color-mix(in srgb,var(--theme-primary-dark) 30%,transparent)!important;
}

/* Secondary / cancel buttons: lighter raised card, not flat */
html body .profile-cancel,html body .privacy-panel footer button:first-child,
html body .registration-panel .registration-cancel,html body .notification-cancel,
html body #cancel,html body #label-cancel{
  background:linear-gradient(180deg,var(--btn-secondary-top),var(--btn-secondary-bottom))!important;
  color:#315d54!important;
  box-shadow:0 1px 0 #fff inset,0 2px 0 var(--btn-secondary-edge),0 4px 10px #14322d14!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
html body .profile-cancel:hover,html body .privacy-panel footer button:first-child:hover,
html body .registration-panel .registration-cancel:hover,html body .notification-cancel:hover,
html body #cancel:hover,html body #label-cancel:hover{
  transform:translateY(-1px);
  box-shadow:0 1px 0 #fff inset,0 3px 0 var(--btn-secondary-edge),0 6px 14px #14322d1f!important;
}
html body .profile-cancel:active,html body .privacy-panel footer button:first-child:active,
html body .registration-panel .registration-cancel:active,html body .notification-cancel:active,
html body #cancel:active,html body #label-cancel:active{
  transform:translateY(1px);
  box-shadow:0 1px 0 var(--btn-secondary-edge),0 1px 3px #14322d14!important;
}

/* Floating new-chat button: a touch more lift since it's the single most prominent CTA.
   Unlike the rectangular CTAs above, this is a plain circle sitting on open background —
   the hard-edged "0 4px 0 var(--theme-primary-edge)" offset shadow those use (no blur, a flat
   color band) traces the button's own round outline and reads as a second, darker circle
   peeking out from behind it ("two green buttons on top of each other"). Blurred-only
   elevation shadows (Material-style) give the same lifted feel without that illusion, so the
   FAB gets its own rest/hover/active shadows instead of inheriting the hard-edge ones above. */
html body .floating{box-shadow:0 2px 0 rgba(255,255,255,.28) inset,0 6px 18px color-mix(in srgb,var(--theme-primary-dark) 50%,transparent)!important}
html body .floating:hover{box-shadow:0 2px 0 rgba(255,255,255,.28) inset,0 8px 22px color-mix(in srgb,var(--theme-primary-dark) 55%,transparent)!important}
html body .floating:active{box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 3px 10px color-mix(in srgb,var(--theme-primary-dark) 35%,transparent)!important}