/* Shared sign-in buttons for /login/ and the /chat/ start (one layout, two options, in this order):
   1. Continue with Google  (Google's branding: standard multicolor "G", light theme = white fill, #747775 1px stroke,
      #1F1F1F text, Roboto Medium; pill shape allowed; the logo is never recolored or resized out of proportion)
   2. Continue with email
   Every option is a full-width pill >= 48px tall. */
.gsi-btn { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 52px; padding: 0 22px 0 16px;
  border-radius: 999px; background: #fff; border: 1px solid #747775; color: #1f1f1f; text-decoration: none; cursor: pointer;
  font-family: Roboto, "Google Sans", Arial, sans-serif; font-weight: 500; font-size: 16px; letter-spacing: .25px; line-height: 20px;
  transition: box-shadow .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.gsi-btn:hover { background: #f2f2f2; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15); }
.gsi-btn:active { background: #e8e8e8; }
.gsi-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gsi-btn .gsi-logo { width: 20px; height: 20px; flex: none; display: block; }
.gsi-btn[hidden], .email-btn[hidden] { display: none !important; }
.email-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 22px;
  border-radius: 999px; background: #0c0c0c; border: 1px solid #3a3a3a; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; cursor: pointer; }
.email-btn:hover { border-color: #6a6a6a; }
.email-btn .pv-icon { width: 20px; height: 20px; flex: none; }