/* ======================================================================
   Feedback: toasts + in-app dialogs. The one place these are styled
   (theme variables only, so they follow the colour theme and light mode).
   ====================================================================== */

/* ---------- toast: small, top-centre, never covers the work area ---------- */
.toast{
  position:fixed; top:calc(env(safe-area-inset-top, 0px) + 64px); left:50%; z-index:4400;   /* above the Drive window (4000) and its menus (4100) */
  display:flex; align-items:center; gap:12px; max-width:min(92vw, 460px);
  padding:9px 14px; border-radius:12px; border:1px solid var(--line);
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  color:var(--text); font-size:12.5px; font-weight:600; line-height:1.35;
  opacity:0; transform:translate(-50%, -8px); pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; cursor:pointer; }
.toast span{ min-width:0; overflow-wrap:anywhere; }
.toast button{
  flex:0 0 auto; border:none; background:none; padding:4px 2px; cursor:pointer;
  color:var(--gold); font-weight:800; font-size:12.5px; letter-spacing:.02em;
}
/* phones: the app bar is hidden in the editor, so sit just under the top edge */
body.m-ui.editor-active .toast{ top:calc(env(safe-area-inset-top, 0px) + 10px); }

/* ---------- dialogs ---------- */
.vs-dlg-ov{
  position:fixed; inset:0; z-index:4300; display:flex;   /* above the Drive window (4000) so its prompts can be seen */ align-items:center; justify-content:center; padding:16px;
  background:rgba(5,6,4,.55); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .16s ease;
}
.vs-dlg-ov.show{ opacity:1; }
.vs-dlg{
  width:min(400px, 100%); padding:20px 20px 16px; border-radius:18px;
  background:var(--panel); color:var(--text); border:1px solid var(--line);
  box-shadow:0 24px 70px -20px rgba(0,0,0,.75);
  transform:translateY(8px) scale(.98); transition:transform .16s ease;
}
.vs-dlg-ov.show .vs-dlg{ transform:none; }
.vs-dlg-t{ margin:0 0 6px; font-size:16px; font-weight:700; line-height:1.3; }
.vs-dlg-m{ margin:0 0 4px; font-size:13.5px; line-height:1.5; color:var(--muted); white-space:pre-line; }
.vs-dlg-in{
  width:100%; margin:12px 0 2px; padding:11px 12px; border-radius:11px; font-size:16px;
  background:var(--panel2); color:var(--text); border:1px solid var(--line);
}
.vs-dlg-in:focus{ outline:2px solid var(--gold); outline-offset:1px; }
.vs-dlg-chk{ display:flex; align-items:center; gap:8px; margin:12px 0 0; font-size:13px; color:var(--muted); cursor:pointer; }
.vs-dlg-chk input{ width:16px; height:16px; accent-color:var(--green); }
.vs-dlg-b{ display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }
.vs-dlg-b button{
  min-height:42px; padding:0 18px; border-radius:11px; border:1px solid var(--line);
  background:var(--panel2); color:var(--text); font-size:14px; font-weight:700; cursor:pointer;
}
.vs-dlg-b button.ghost{ background:none; color:var(--muted); }
.vs-dlg-b button.ok{ background:var(--green); border-color:transparent; color:#10170a; }
.vs-dlg-b button.ok.danger{ background:#d9604c; color:#fff; }
.vs-dlg-b.stack{ flex-direction:column; align-items:stretch; }
.vs-dlg-b.stack button{ width:100%; text-align:left; padding:0 16px; }
.vs-dlg-b.stack button.ghost{ text-align:center; }
@media (max-width:520px){
  .vs-dlg-ov{ align-items:flex-end; padding:0; }
  .vs-dlg{ width:100%; border-radius:20px 20px 0 0; padding-bottom:calc(16px + env(safe-area-inset-bottom, 0px)); transform:translateY(24px); }
  .vs-dlg-b:not(.stack){ justify-content:stretch; }
  .vs-dlg-b:not(.stack) button{ flex:1; }
}