/* ==========================================================================
   OVERLAYS — modals, drawers, toasts, command palette, context menus
   ========================================================================== */

.overlay-backdrop{
  position: fixed; inset: 0; background: rgba(5,6,10,0.6);
  backdrop-filter: blur(3px); z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
  padding-top: max(var(--space-6), env(safe-area-inset-top));
  padding-right: max(var(--space-6), env(safe-area-inset-right));
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  padding-left: max(var(--space-6), env(safe-area-inset-left));
  overflow-y: auto; overscroll-behavior: contain;
  animation: fadeIn var(--dur-base) var(--ease-out);
}
/* Measure against the *visible* viewport so mobile browser chrome (address bar,
   toolbars) and short landscape screens can never clip a dialog. */
@supports (height: 100dvh){ .overlay-backdrop{ height: 100dvh; } }
@keyframes fadeIn{ from{ opacity: 0;} to{ opacity: 1;} }
@keyframes fadeOut{ from{ opacity: 1;} to{ opacity: 0;} }

.modal{
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  width: 100%; max-width: 560px;
  max-height: 100%;
  min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: modalIn var(--dur-slow) var(--ease-spring);
}
@keyframes modalIn{ from{ opacity: 0; transform: translateY(14px) scale(0.97);} to{ opacity: 1; transform: translateY(0) scale(1);} }
.modal.modal-lg{ max-width: 760px; }
.modal.modal-xl{ max-width: 980px; height: min(880px, 100%); }
.modal.modal-sm{ max-width: 400px; }

.modal-header{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; gap: var(--space-4); flex-wrap: wrap; }
.modal-header > div:first-child{ min-width: 0; flex: 1 1 200px; }
.modal-header h3{ font-size: var(--fs-md); display:flex; align-items:center; gap: 10px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.modal-header p{ font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.modal-body{
  padding: var(--space-6);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  flex: 1 1 auto; min-height: 0;
  /* Lets inner layouts respond to the DIALOG width, not the window width. */
  container-type: inline-size; container-name: modalbody;
}
.modal-footer{ display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); border-top: 1px solid var(--border-subtle); flex-shrink: 0; flex-wrap: wrap; }
.modal-footer .footer-left{ display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-right: auto; }
.modal-footer.spread{ justify-content: space-between; }
.modal-close{ width: 30px; height: 30px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-tertiary); cursor: pointer; background: transparent; border: none; transition: all var(--dur-fast); }
.modal-close:hover{ background: var(--bg-hover); color: var(--text-primary); }
.modal-close svg{ width: 16px; height: 16px; }
.modal-close{ flex-shrink: 0; }

/* ---- Dialogs on narrow screens (mobile portrait) ---- */
@media (max-width: 640px){
  .overlay-backdrop{
    padding: var(--space-3);
    padding-top: max(var(--space-3), env(safe-area-inset-top));
    padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  }
  .modal, .modal.modal-sm, .modal.modal-lg, .modal.modal-xl{ max-width: 100%; }
  .modal.modal-xl{ height: 100%; }
  .modal-header{ padding: var(--space-4); }
  .modal-body{ padding: var(--space-4); }
  .modal-footer{ padding: var(--space-3) var(--space-4); }
  .modal-footer .btn{ flex: 1 1 auto; justify-content: center; }
  .modal-footer .footer-left{ width: 100%; margin-right: 0; }
  .modal-footer .footer-left .btn{ flex: 1 1 auto; }
}

/* ---- Dialogs on short screens (mobile landscape, small laptops) ---- */
@media (max-height: 620px){
  .overlay-backdrop{
    align-items: stretch;
    padding-top: max(var(--space-2), env(safe-area-inset-top));
    padding-bottom: max(var(--space-2), env(safe-area-inset-bottom));
  }
  .modal, .modal.modal-xl{ height: 100%; max-height: 100%; }
  .modal-header{ padding: var(--space-3) var(--space-4); }
  .modal-header p{ display: none; }
  .modal-body{ padding: var(--space-4); }
  .modal-footer{ padding: var(--space-2) var(--space-4); }
}

/* ---------------------------- Drawer (variables / quick panels) ---------- */
.drawer-backdrop{ position: fixed; inset: 0; background: rgba(5,6,10,0.5); z-index: var(--z-modal); animation: fadeIn var(--dur-base); }
.drawer{
  position: fixed; top: 0; right: 0; height: 100vh; width: min(420px, 100%);
  background: var(--bg-elevated); border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg); z-index: calc(var(--z-modal) + 1);
  display: flex; flex-direction: column; animation: drawerIn var(--dur-slow) var(--ease-out);
}
@keyframes drawerIn{ from{ transform: translateX(100%);} to{ transform: translateX(0);} }
@supports (height: 100dvh){ .drawer{ height: 100dvh; } }
.drawer{ padding-bottom: env(safe-area-inset-bottom); }
.drawer .modal-body{ container-type: inline-size; container-name: modalbody; }

/* ---------------------------- Toasts -------------------------------------- */
.toast-stack{ position: fixed; bottom: var(--space-6); right: var(--space-6); z-index: var(--z-toast); display: flex; flex-direction: column; gap: 10px; max-width: 360px; pointer-events: none; }
.toast-stack > *{ pointer-events: auto; }
@media (max-width: 640px){
  .toast-stack{ left: var(--space-3); right: var(--space-3); max-width: none; bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
}
.toast{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px; border-radius: var(--radius-md);
  background: var(--bg-glass-strong); backdrop-filter: blur(16px);
  border: 1px solid var(--border-default); box-shadow: var(--shadow-md);
  animation: toastIn var(--dur-base) var(--ease-spring);
  position: relative; overflow: hidden;
}
.toast.leaving{ animation: toastOut var(--dur-base) var(--ease-out) forwards; }
@keyframes toastIn{ from{ opacity: 0; transform: translateX(30px) scale(0.95);} to{ opacity: 1; transform: translateX(0) scale(1);} }
@keyframes toastOut{ to{ opacity: 0; transform: translateX(30px) scale(0.95);} }
.toast-icon{ width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.toast-icon svg{ width: 12px; height: 12px; }
.toast[data-type="success"] .toast-icon{ background: rgba(52,211,153,0.18); color: var(--success-500); }
.toast[data-type="error"] .toast-icon{ background: rgba(248,113,113,0.18); color: var(--danger-500); }
.toast[data-type="warning"] .toast-icon{ background: rgba(245,165,36,0.18); color: var(--warning-500); }
.toast[data-type="info"] .toast-icon{ background: var(--accent-soft); color: var(--accent-strong); }
.toast-content{ flex: 1; min-width: 0; }
.toast-title{ font-size: var(--fs-sm); font-weight: 600; }
.toast-msg{ font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 1px; }
.toast-action{ font-size: var(--fs-xs); font-weight: 700; color: var(--accent-strong); cursor: pointer; margin-top: 6px; display: inline-block; }
.toast-close{ background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 2px; }
.toast-close svg{ width: 13px; height: 13px; }
.toast-progress{ position: absolute; bottom: 0; left: 0; height: 2px; background: var(--accent); animation: toastProgress linear forwards; }
@keyframes toastProgress{ from{ width: 100%;} to{ width: 0%;} }

/* ---------------------------- Command palette ----------------------------- */
.palette-backdrop{ position: fixed; inset: 0; background: rgba(5,6,10,0.55); backdrop-filter: blur(3px); z-index: var(--z-palette); display: flex; align-items: flex-start; justify-content: center; padding: min(12vh, 90px) var(--space-4) var(--space-4); animation: fadeIn var(--dur-fast); }
@supports (height: 100dvh){ .palette-backdrop{ height: 100dvh; } }
@media (max-height: 620px){ .palette-backdrop{ padding-top: var(--space-4); } }
.palette{
  width: 100%; max-width: 620px; max-height: min(60vh, 100%); min-height: 0;
  background: var(--bg-elevated); border: 1px solid var(--border-default);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn var(--dur-base) var(--ease-spring);
}
.palette-input-row{ display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); }
.palette-input-row svg{ width: 18px; height: 18px; color: var(--text-tertiary); flex-shrink: 0; }
.palette-input{ flex: 1; background: none; border: none; color: var(--text-primary); font-size: var(--fs-md); }
.palette-input:focus{ outline: none; }
.palette-input::placeholder{ color: var(--text-tertiary); }
.palette-results{ overflow-y: auto; padding: var(--space-2); flex: 1; }
.palette-group-label{ font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--text-tertiary); padding: 8px 12px 4px; }
.palette-item{ display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius-md); cursor: pointer; font-size: var(--fs-sm); }
.palette-item.selected{ background: var(--bg-active); }
.palette-item-icon{ width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--bg-surface-2); border: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); flex-shrink: 0; }
.palette-item-icon svg{ width: 14px; height: 14px; }
.palette-item-main{ flex: 1; min-width: 0; }
.palette-item-title{ font-weight: 500; }
.palette-item-desc{ font-size: 11px; color: var(--text-tertiary); }
.palette-item-kbd{ font-size: 10px; color: var(--text-tertiary); background: var(--bg-surface-3); padding: 2px 6px; border-radius: 5px; font-family: var(--font-mono); }
.palette-footer{ display: flex; gap: var(--space-4); padding: 9px var(--space-5); border-top: 1px solid var(--border-subtle); font-size: 10.5px; color: var(--text-tertiary); }
.palette-footer span{ display: flex; align-items: center; gap: 5px; }
.palette-footer kbd{ background: var(--bg-surface-3); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); }

/* ---------------------------- Context menu -------------------------------- */
.context-menu{ position: fixed; min-width: 190px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); padding: 6px; animation: menuIn var(--dur-fast) var(--ease-out); }
@keyframes menuIn{ from{ opacity: 0; transform: scale(0.95) translateY(-4px);} to{ opacity: 1; transform: scale(1) translateY(0);} }
.context-menu-item{ display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); cursor: pointer; color: var(--text-secondary); }
.context-menu-item:hover{ background: var(--bg-hover); color: var(--text-primary); }
.context-menu-item svg{ width: 14px; height: 14px; }
.context-menu-item.danger{ color: var(--danger-500); }
.context-menu-item.danger:hover{ background: rgba(248,113,113,0.1); }
.context-menu-sep{ height: 1px; background: var(--border-subtle); margin: 5px 0; }

/* ---------------------------- Dropdown ------------------------------------ */
.dropdown{ position: absolute; min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); padding: 6px; animation: menuIn var(--dur-fast) var(--ease-out); }