/* The branded dialog: the one sheet the whole app asks through, in place of
   window.confirm and window.prompt. Same glass and panel look as .modal /
   .sheet in app.css, with its own class names so nothing collides. */

.hbdlg{
  --hbdlg-scrim:rgba(3,5,9,.88);
  position:fixed;inset:0;z-index:400;display:none;place-content:center;padding:22px;
  background:var(--hbdlg-scrim);backdrop-filter:blur(7px);
}
.hbdlg.open{display:grid}
.hbdlg [hidden]{display:none!important}
:root[data-theme="day"] .hbdlg{--hbdlg-scrim:rgba(15,21,34,.46)}

.hbdlg-sheet{
  position:relative;overflow:hidden;
  background:var(--panel);border:1px solid var(--line);border-radius:17px;
  width:100%;max-width:440px;padding:24px;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  animation:hbdlg-in .18s cubic-bezier(.2,.9,.3,1.2);
}
:root[data-theme="day"] .hbdlg-sheet{box-shadow:0 30px 70px rgba(15,21,34,.22)}
/* the brand stripe every surface in the app carries */
.hbdlg-sheet::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--hot),var(--hot2),var(--cool),var(--grape));opacity:.9;
}
.hbdlg-sheet.danger::before{background:linear-gradient(90deg,var(--bad),var(--hot))}
@keyframes hbdlg-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.hbdlg-sheet{animation:none}}

.hbdlg-sheet h2{font:800 20px/1.25 var(--mono);letter-spacing:-.6px;color:var(--ink)}
/* overflow-wrap because one caller shows a raw invite link: a long token has
   nowhere to break, and the sheet clips it. max-height keeps the buttons on
   screen when the text runs long. */
.hbdlg-body{
  color:var(--mute);font-size:14px;line-height:1.6;white-space:pre-line;margin-top:9px;
  overflow-wrap:anywhere;max-height:46vh;overflow:auto;
}

.hbdlg-field{display:block;margin-top:17px}
.hbdlg-lab{display:block;font:700 10px/1 var(--mono);letter-spacing:1.4px;text-transform:uppercase;color:var(--mute);margin-bottom:8px}
.hbdlg-input{
  width:100%;min-width:0;background:var(--panel2);color:var(--ink);
  border:1px solid var(--line);border-radius:9px;padding:11px 13px;
}
.hbdlg-input:focus{outline:2px solid var(--hot);outline-offset:1px}

.hbdlg-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.hbdlg .btn:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
.hbdlg .btn.hbdlg-danger{background:linear-gradient(135deg,var(--bad),var(--hot));color:#fff;box-shadow:0 8px 22px rgba(255,59,92,.3)}
.hbdlg .btn.hbdlg-danger:hover{box-shadow:0 12px 30px rgba(255,59,92,.4)}

/* on a phone the buttons go full width, the confirm on top */
@media(max-width:480px){
  .hbdlg{padding:16px}
  .hbdlg-actions{flex-direction:column-reverse}
  .hbdlg-actions .btn{width:100%}
}