/* The webmail (webmail-login.html, webmail-inbox.html): the panel's login look (style.css: the
   floating mail icons, the card, its fields and button). Signed in, a bar at the top with the
   mailbox, and the inbox that's coming, in a card in the middle. */
/* (body.auth.webmail-home: this file comes before style.css, whose body.auth would win otherwise;
   one column that can be narrower than a long address, which then ends in …) */
body.auth.webmail-home { grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }

.webmail-bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 0.85rem clamp(1rem, 4vw, 2rem);
  border-bottom: 1px solid var(--auth-card-border);
  background: var(--auth-card-bg);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  min-width: 0;
}
.webmail-brand { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.1rem; letter-spacing: -0.01em; }
.webmail-brand img { border-radius: 10px; }
.webmail-brand strong { color: var(--bar-blue); font-weight: 700; }
.webmail-who { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.webmail-who form { flex: none; margin: 0; }
.webmail-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1463f3, #0195fb);
  box-shadow: 0 0 16px -4px rgba(1, 149, 251, 0.85);
  color: #fff;
  font-weight: 800;
}
.webmail-email { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.webmail-logout { padding: 0.45rem 1rem; font-size: 0.9rem; white-space: nowrap; }

/* The inbox that's coming: the card in the middle of the screen */
.webmail-soon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 1.5rem var(--gutter) 0;
}
.webmail-soon .welcome-animation { margin-top: -0.5rem; }
.webmail-soon .auth-hint { margin-bottom: 1rem; }
.webmail-soon-note {
  margin: 0;
  padding: 0.9rem 1rem;
  border: 1px solid var(--auth-card-border);
  border-radius: 14px;
  background: rgba(1, 149, 251, 0.07);
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
.webmail-soon-note strong { color: var(--ink); }

@media (max-width: 640px) {
  .webmail-bar { padding-inline: 1rem; }
  .webmail-bar .webmail-brand span { display: none; }
  .webmail-who { gap: 0.5rem; }
  .webmail-logout { padding: 0.4rem 0.85rem; }
}