/* The header's Invite pill and the toast it falls back to.
   Glass, hairline, 6px radius — the same treatment every other small control in
   ALY already uses. Tokens only. */
.aly-topbar-gap { flex: 1 1 auto; min-width: 0; }

.aly-invite {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 34px; padding: 0 12px;
  border: 1px solid var(--hair-2); border-radius: 999px;
  background: var(--glass-2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: var(--text); font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.aly-invite:hover { background: var(--surface); border-color: var(--btn-hover-border, var(--hair-2)); }
.aly-invite:active { transform: scale(0.97); }
.aly-invite-icon {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.aly-invite-label { white-space: nowrap; }

/* The header carries only ☰, the orb and this, so the word stays at phone
   width and gives up its room only on the narrowest screens — an unlabelled
   share glyph is a guess, and "Invite" is the whole point of the control. */
@media (max-width: 360px) {
  .aly-invite { padding: 0 10px; min-width: 38px; justify-content: center; }
  .aly-invite-label { display: none; }
}

/* The clipboard confirmation. Above the composer, clear of the home indicator. */
.aly-toast {
  position: fixed; left: 50%; z-index: 90;
  bottom: calc(86px + max(env(safe-area-inset-bottom, 0px), var(--alyssiun-safe-bottom, 0px)));
  transform: translate(-50%, 12px);
  margin: 0; padding: 9px 16px;
  border: 1px solid var(--hair-2); border-radius: 999px;
  background: var(--surface); color: var(--text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--card-shadow, 0 20px 50px -30px rgba(0, 0, 0, 0.6));
  font-size: 13px; line-height: 1.3; max-width: min(88vw, 420px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.aly-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) {
  .aly-invite, .aly-toast { transition: none; }
  .aly-invite:active { transform: none; }
  .aly-toast { transform: translate(-50%, 0); }
}