/* === Modal (ZIP-style popup) === */
.modal-backdrop[hidden] { display: none !important; }

.modal-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3000;

  background: rgba(0,0,0,0.55);

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));

  box-sizing: border-box;
  height: 100vh;
}

@supports (height: 100dvh) {
  .modal-backdrop { height: 100dvh; }
}

.modal-card {
  width: min(520px, 94vw);
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(20,20,24,0.92);
  color: #fff;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
  padding: 18px 16px;
  backdrop-filter: blur(10px);
}

@supports (height: 100dvh) {
  .modal-card { max-height: calc(100dvh - 32px); }
}

.modal-card h3 { margin: 0 0 10px 0; font-size: 18px; }

.modal-text { margin: 0 0 10px 0; opacity: 0.9; line-height: 1.35; }

.modal-list { margin: 0 0 16px 18px; padding: 0; opacity: 0.9; line-height: 1.4; }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
}

.btn-secondary { background: rgba(255,255,255,0.10); color: #fff; }
.btn-secondary:hover { background: rgba(255,255,255,0.16); }

.btn-primary { background: rgba(255,215,120,0.95); color: #111; }
.btn-primary:hover { background: rgba(255,215,120,1); }

/* ✅ Invite modal additions (input + message) */
.modal-label {
  display: block;
  font-size: 13px;
  opacity: 0.85;
  margin: 10px 2px 6px 2px;
}

.modal-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: inherit;
  outline: none;
}

/* ✅ ALSO style the real input id in your HTML */
#inviteEditorEmail {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font: inherit;
  outline: none;
}

.modal-input::placeholder,
#inviteEditorEmail::placeholder {
  color: rgba(255,255,255,0.55);
}

.modal-input:focus,
#inviteEditorEmail:focus {
  border-color: rgba(255,215,120,0.55);
  box-shadow: 0 0 0 3px rgba(255,215,120,0.12);
}

/* Message box */
.modal-msg {
  margin-top: 10px;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  line-height: 1.35;
}

/* ✅ ALSO style the real msg id in your HTML */
#inviteEditorMsg {
  margin-top: 10px;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  line-height: 1.35;
}

.modal-msg.ok,
#inviteEditorMsg.ok {
  border-color: rgba(10,122,47,0.35);
  background: rgba(10,122,47,0.18);
}

.modal-msg.err,
#inviteEditorMsg.err {
  border-color: rgba(176,0,32,0.35);
  background: rgba(176,0,32,0.18);
}

/* Dark mode tweaks */
@media (prefers-color-scheme: dark) {
  header {
    background: rgba(20, 20, 24, 0.92);
    box-shadow: 0 2px 10px rgba(0,0,0,0.35);
  }
  header h1 { color: #fff; }
  .icon-button svg { color: #fff; }
  .icon-button:hover { background: rgba(255,255,255,0.08); }
}

/* Light mode tweaks for modal input */
@media (prefers-color-scheme: light) {
  .modal-input,
  #inviteEditorEmail {
    border: 1px solid rgba(0,0,0,0.14);
    background: rgba(0,0,0,0.04);
    color: #111;
  }
  .modal-input::placeholder,
  #inviteEditorEmail::placeholder {
    color: rgba(0,0,0,0.5);
  }

  .modal-card {
    background: rgba(255,255,255,0.92);
    color: #111;
    border-color: rgba(0,0,0,0.10);
  }

  .btn-secondary { background: rgba(0,0,0,0.06); color: #111; }
  .btn-secondary:hover { background: rgba(0,0,0,0.10); }
}