/* Wriline v2 · notices, toasts, modals and popovers.
   Every floating surface uses the same language as the pages: white paper,
   28px radius, soft blue shadow, pill buttons, gradient primary action and a
   light blue veil instead of a dark backdrop. Loaded last. */

/* ---------- Toasts ---------- */
.p3a-toast-region {
  position: fixed; z-index: 120; left: 50%; right: auto; top: auto; bottom: 28px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px; width: max-content; max-width: calc(100vw - 32px); pointer-events: none;
}
.p3a-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: min(320px, calc(100vw - 32px)); max-width: min(520px, calc(100vw - 32px));
  padding: 8px 8px 8px 10px; border: 1px solid rgb(255 255 255 / 95%) !important; border-left: 1px solid rgb(255 255 255 / 95%) !important;
  border-radius: 999px !important; background: rgb(255 255 255 / 96%) !important; background-image: none !important;
  box-shadow: 0 18px 44px rgb(40 70 180 / 18%) !important; color: var(--wl-ink, #0E1530); font-family: var(--wl-body);
  animation: wl-toast-in 260ms cubic-bezier(.2, .8, .2, 1);
}
.p3a-toast:has(.p3a-toast__msg:is([data-long], :not(:empty))) { }
.p3a-toast { border-radius: 26px !important; }
.p3a-toast__icon {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; margin: 0;
  background: linear-gradient(135deg, #2B57F2, #7C97FF); color: #fff !important; font-size: 18px !important;
}
.p3a-toast--success .p3a-toast__icon { background: linear-gradient(135deg, #12A26B, #5FD3A3); }
.p3a-toast--error .p3a-toast__icon { background: linear-gradient(135deg, #D64545, #F08A8A); }
.p3a-toast--warn .p3a-toast__icon { background: linear-gradient(135deg, #E3A21A, #F5C96B); }
.p3a-toast__body { flex: 1; min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.p3a-toast__msg { font-size: 13.5px !important; font-weight: 500; line-height: 1.45 !important; color: var(--wl-ink, #0E1530); }
.p3a-toast__action {
  min-height: 32px !important; height: 32px; margin: 0 !important; padding: 0 14px !important; border: 0; border-radius: 999px;
  background: var(--wl-grad) !important; color: #fff !important; font-size: 12.5px; font-weight: 600; cursor: pointer; text-decoration: none !important;
}
.p3a-toast__close {
  flex: none; width: 34px !important; height: 34px !important; min-height: 34px; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: #F4F7FF !important; color: var(--wl-muted, #5A6380) !important; cursor: pointer;
}
.p3a-toast__close:hover { background: #E6EDFF !important; color: var(--wl-blue-ink, #2448D8) !important; }
.p3a-toast.is-dismissing { animation: wl-toast-out 200ms ease forwards; }
@keyframes wl-toast-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes wl-toast-out { to { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (max-width: 699px) {
  .p3a-toast-region { bottom: calc(var(--p3a-dock-clearance, 88px) + 8px); }
  .p3a-toast { border-radius: 24px !important; }
}

/* ---------- Inline notices and banners ---------- */
:is(#form-banner, #progress-banner, .p3c-notice, .p3s-role-banner):not(.hidden):not([hidden]), .p3c-warning, .p3r-modal__warn {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px !important; border: 0 !important; border-radius: 20px !important;
  background: #EEF3FF !important; color: #2448D8 !important; font-size: 13px; font-weight: 500; line-height: 1.5; box-shadow: none !important;
}
:is(#form-banner, #progress-banner)[class*="red"], :is(#form-banner, #progress-banner)[class*="rose"], .p3c-notice[data-kind="error"] { background: #FFF0F0 !important; color: #9A1C1C !important; }
:is(#form-banner, #progress-banner)[class*="emerald"], :is(#form-banner, #progress-banner)[class*="green"] { background: #E9F8F1 !important; color: #0F5A40 !important; }
:is(#form-banner, #progress-banner)[class*="amber"]:not(.hidden), .p3c-warning.p3c-warning, .p3r-modal__warn.p3r-modal__warn { background: #FFF6E3 !important; color: #7A4A00 !important; }
.p3r-modal__warn b { color: #7A4A00 !important; }

/* ---------- Modals and dialogs ---------- */
:is(.p3r-modal-backdrop, .p3c-paste-backdrop, .p3s-settings-modal, .p3a-shortcut-overlay, .studio-library__detail-backdrop, [class*="modal-backdrop"]) {
  background: rgb(214 225 255 / 55%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
:is(.p3r-modal, .p3a-shortcut-overlay__dialog, dialog.keyword-import, .p3c-paste-modal, .p3c-bulk-modal, .p3r-reader-modal) {
  border: 0 !important; border-radius: 28px !important; background: #fff !important; box-shadow: 0 30px 80px rgb(40 70 180 / 22%) !important;
  color: var(--wl-ink, #0E1530); font-family: var(--wl-body);
}
dialog.keyword-import::backdrop { background: rgb(214 225 255 / 55%); }
.p3r-modal-backdrop.is-open .p3r-modal:not(.p3r-modal--diff) { animation: wl-modal-in 260ms cubic-bezier(.2, .8, .2, 1); }
@keyframes wl-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
:is(.p3r-modal, .p3c-paste-modal, .p3c-bulk-modal, dialog.keyword-import) .p3r-modal__head,
.p3a-shortcut-overlay__head {
  display: flex; align-items: center; gap: 12px; padding: 20px 24px !important; border-bottom: 1px solid #EEF1FA !important; background: none;
}
:is(.p3r-modal, .p3c-paste-modal, .p3c-bulk-modal, dialog.keyword-import) .p3r-modal__head :is(h2, h3),
.p3a-shortcut-overlay__head :is(h2, h3) {
  margin: 0; flex: 1; font-family: var(--wl-display); font-size: 20px !important; font-weight: 700; letter-spacing: -.01em; color: var(--wl-ink, #0E1530);
}
:is(.p3r-modal__close, .p3a-shortcut-overlay__close) {
  flex: none; width: 38px !important; height: 38px !important; border: 0; border-radius: 50% !important; display: grid; place-items: center;
  background: #F4F7FF !important; color: var(--wl-muted, #5A6380) !important; font-size: 20px; cursor: pointer;
}
:is(.p3r-modal__close, .p3a-shortcut-overlay__close):hover { background: #E6EDFF !important; color: #2448D8 !important; }
.p3r-modal__body { padding: 20px 24px; font-size: 14px; line-height: 1.6; color: #2B3456; }
.p3r-modal__body :is(input:not([type="checkbox"]):not([type="radio"]), select, .mselect-button) { min-height: 42px; border: 1px solid #E4E9F7 !important; border-radius: 999px !important; background: #fff !important; padding: 0 16px; }
.p3r-modal__body textarea { border: 1px solid #E4E9F7 !important; border-radius: 18px !important; background: #fff !important; padding: 10px 14px; }
.p3r-modal__body label:not(:has(input[type="checkbox"], input[type="radio"])) { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: #2B3456; }
.p3r-modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 14px 24px 20px !important; border-top: 1px solid #EEF1FA !important; background: none; }
/* Buttons inside any floating surface */
:is(.p3r-modal, .p3c-paste-modal, .p3c-bulk-modal, dialog.keyword-import, .p3a-shortcut-overlay__dialog, .p3s-range-popover) :is(.p3r-btn, button.p3c-primary, [data-cancel], [data-apply]) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-height: 42px; padding: 0 18px;
  border: 1px solid #E4E9F7; border-radius: 999px !important; background: #fff; color: var(--wl-ink, #0E1530); font-size: 13.5px; font-weight: 600; box-shadow: none;
}
:is(.p3r-modal, .p3c-paste-modal, .p3c-bulk-modal, dialog.keyword-import, .p3s-range-popover) :is(.p3r-btn--blue, .p3r-btn--primary, .p3r-btn--success, button.p3c-primary, [data-apply], [data-action="apply"]) {
  background: var(--wl-grad) !important; color: #fff !important; border-color: transparent !important; box-shadow: 0 8px 18px rgb(43 87 242 / 24%) !important;
}
:is(.p3r-modal, .p3c-paste-modal, .p3c-bulk-modal) :is(.p3r-btn--danger, [data-action="delete"], .studio-danger) { background: #FFF0F0 !important; border-color: #FFD2D2 !important; color: #9A1C1C !important; }
:is(.p3r-modal, .p3c-paste-modal, .p3c-bulk-modal, dialog.keyword-import) :is(.p3r-btn, button):disabled { opacity: .55; }
/* Keyboard shortcut overlay */
.p3a-shortcut-overlay__dialog { padding: 0 !important; overflow: hidden; }
.p3a-shortcut-overlay__list { padding: 16px 24px 22px; display: grid; gap: 8px; }
.p3a-shortcut-overlay__list li { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: #F7F9FF; font-size: 13px; }
.p3a-shortcut-overlay__list kbd { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 8px; background: #fff; border: 1px solid #E4E9F7; display: inline-grid; place-items: center; font-family: var(--wl-body); font-size: 12px; font-weight: 700; color: #2448D8; }

/* ---------- Popovers and dropdowns ---------- */
.mselect-popover, .p3s-range-popover, .p3e-delete-status-menu, [class*="dd-menu"], [class*="-dropdown__menu"] {
  border: 1px solid rgb(255 255 255 / 95%) !important; border-radius: 20px !important; background: #fff !important;
  box-shadow: 0 18px 44px rgb(40 70 180 / 16%) !important; padding: 6px !important;
}
.mselect-popover :is([role="option"], .mselect-option) { border-radius: 12px !important; padding: 9px 12px !important; font-size: 13.5px; }
.mselect-popover :is([role="option"], .mselect-option):is(:hover, [aria-selected="true"], .is-active, .is-selected) { background: #EEF3FF !important; color: #2448D8 !important; }
.mselect-popover input[type="search"] { border-radius: 999px !important; border: 1px solid #E4E9F7 !important; }

/* ---------- Loading states ---------- */
.p3r-loading, .p3s-model-import-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px; color: var(--wl-muted, #5A6380); font-size: 13px; }
.p3r-loading::before, .p3s-model-import-loading::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #D6E0FF; border-top-color: #2B57F2; animation: wl-spin .8s linear infinite;
}
@keyframes wl-spin { to { transform: rotate(360deg); } }
.seo-v3-ai--loading { padding: 12px 14px; border-radius: 16px; background: #EEF3FF; color: #2448D8 !important; }
@media (prefers-reduced-motion: reduce) {
  .p3a-toast, .p3a-toast.is-dismissing, .p3r-modal-backdrop.is-open .p3r-modal, .p3r-loading::before { animation: none !important; }
}