/* Web app (iPhone and browser) on top of the desktop styles: room for the
   notch and home indicator, finger-sized targets, no window-control gap. */

body.web {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --titlebar: calc(44px + var(--safe-top));
  height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}
body.web .titlebar {
  padding: var(--safe-top) 8px 0 16px;
}
body.web .icon-btn { width: 40px; height: 40px; }
body.web .icon-btn svg { width: 20px; height: 20px; }

/* Main window */
body.web .composer { padding-bottom: calc(12px + var(--safe-bottom)); }
body.web #text-input { font-size: 16px; } /* smaller text makes iOS zoom in on focus */
body.web .mic { width: 52px; height: 52px; }
body.web .file-chip .remove { width: 32px; height: 32px; }
body.web .confirm { padding-bottom: calc(12px + var(--safe-bottom)); }
body.web .confirm-actions .btn { min-height: 44px; padding-inline: 18px; }

/* Settings: what only exists on a PC or is managed by the server */
body.web .desktop-only { display: none !important; }
body.web .field input, body.web .field select { height: 40px; font-size: 16px; }

/* ── Login ── */
body.login {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom));
}
.login-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 360px);
  text-align: center;
}
.login-mark { width: 72px; height: 72px; color: var(--accent); }
.login-card h1 { margin: 0; font-family: var(--font-title); font-size: 28px; font-weight: 600; letter-spacing: -.01em; }
.login-sub { margin: -6px 0 18px; color: var(--muted); }
.login-card section, .login-card form { display: grid; gap: 12px; width: 100%; }
.login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  font-size: var(--fs-body);
  text-decoration: none;
}
.login-link {
  justify-self: center;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-link:hover { color: var(--text); }
.login-help { margin: 0; color: var(--muted); font-size: var(--fs-small); text-align: left; }
.login-field { display: grid; gap: 6px; color: var(--muted); font-size: var(--fs-small); text-align: left; }
.login-field input {
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--well);
  font-size: 16px;
  letter-spacing: .04em;
}
.login-field input:focus { border-color: var(--accent); outline: none; }
.login-error { min-height: 1.5em; margin: 0; color: var(--danger); font-size: var(--fs-small); }