/* Backwire additions to Element Web: install banner, iPhone sheet, notification pill, toasts (see app.js). */
.bw-banner {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  z-index: 4000; display: flex; align-items: center; gap: 12px; width: min(560px, calc(100vw - 24px));
  padding: 12px 12px 12px 14px; border-radius: 16px; background: #141414; color: #f5f5f5;
  border: 1px solid rgba(212, 168, 67, 0.35); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  font: 14px/1.4 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 900px) { .bw-banner { left: 20px; transform: none; bottom: 20px; width: 380px; } }
.bw-banner-mark { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.bw-banner-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bw-banner-text strong { font-weight: 600; font-size: 14px; }
.bw-banner-text span { color: #a3a3a3; font-size: 13px; }
.bw-btn {
  flex: none; padding: 9px 16px; border-radius: 999px; border: 0; background: #d4a843; color: #0a0a0a;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer;
}
.bw-btn:hover { background: #e6bc5a; }
.bw-btn-wide { width: 100%; margin-top: 18px; padding: 12px; font-size: 15px; }
.bw-x { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: #a3a3a3; font-size: 22px; line-height: 1; cursor: pointer; }
.bw-x:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.bw-sheet {
  position: fixed; inset: 0; z-index: 4100; background: rgba(0, 0, 0, 0.6); display: flex; align-items: flex-end; justify-content: center;
  font: 15px/1.5 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 700px) { .bw-sheet { align-items: center; } }
.bw-sheet-card {
  width: min(520px, 100vw); max-height: 90vh; overflow: auto; background: #111; color: #f5f5f5;
  border-radius: 20px 20px 0 0; padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px)); border: 1px solid rgba(255, 255, 255, 0.08);
}
@media (min-width: 700px) { .bw-sheet-card { border-radius: 20px; } }
.bw-sheet-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bw-sheet-head img { width: 40px; height: 40px; border-radius: 10px; }
.bw-sheet-head h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.bw-p { margin: 0 0 14px; color: #d4d4d4; }
.bw-fine { margin: 14px 0 0; color: #a3a3a3; font-size: 13px; }
.bw-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.bw-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: #1a1a1a; }
.bw-step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #d4a843; color: #0a0a0a; font-weight: 700; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.bw-step-body { color: #e5e5e5; }
.bw-step-body strong { color: #fff; }
.bw-ico { display: inline-flex; vertical-align: middle; margin: 0 2px; color: #4da3ff; position: relative; top: -1px; }
.bw-toast {
  position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 4200;
  padding: 10px 16px; border-radius: 999px; background: #1f1f1f; color: #fff; border: 1px solid rgba(255, 255, 255, 0.1);
  font: 14px/1.3 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  transition: opacity .35s ease, transform .35s ease;
}
.bw-toast-hide { opacity: 0; transform: translateX(-50%) translateY(8px); }