/* ModalShell, DrawerShell, global notification and loading lifecycle. */
.modal-backdrop { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); overscroll-behavior: contain; }
.modal-panel { display: flex; flex-direction: column; min-width: 0; width: min(640px,100%); max-height: min(880px,calc(100dvh - 48px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--dialog-radius); box-shadow: var(--dialog-shadow); overflow: hidden; }
.modal-size-sm { width: min(448px,100%); }
.modal-size-md { width: min(640px,100%); }
.modal-size-lg { width: min(820px,100%); }
.modal-size-xl { width: min(1000px,100%); }
.modal-panel > form { display: flex; flex-direction: column; min-height: 0; }
.modal-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-shrink: 0; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.modal-head > div { min-width: 0; }
.modal-head h2 { padding-right: 30px; font-size: 18px; line-height: 28px; }
.modal-head p { color: var(--muted); margin-top: 4px; font-size: 13px; }
.modal-close-button { position: absolute; top: 18px; right: 18px; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: var(--muted); font-size: 0; }
.modal-close-button::before { content: ""; width: 18px; height: 18px; background: currentColor; mask: url("icons/x.svg") center / contain no-repeat; }
.modal-close-button:hover:not(:disabled) { background: var(--hover); }
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; scroll-padding-block: 12px; }
.modal-body > label + label,.modal-body > label + .form-grid,.modal-body > .form-grid + label { margin-top: 16px; }
.modal-actions { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.modal-actions button { min-width: 72px; }
.account-switch-popover {
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  background: transparent;
}
.account-switch-popover .account-switch-modal {
  position: fixed;
  top: calc(56px + 12px + 37px + 8px);
  left: 12px;
  width: min(264px, calc(100vw - 48px));
  max-height: calc(100dvh - 132px);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.account-switch-popover .modal-head { padding: 10px 12px 8px; }
.account-switch-popover .modal-head h2 { font-size: 14px; line-height: 22px; }
.account-switch-popover .modal-close-button { top: 4px; right: 4px; width: 32px; height: 32px; }
.account-switch-popover .modal-body { padding: 8px; }
.account-switch-popover .account-switch-search { margin: 0; }
.account-switch-popover .account-switch-list { gap: 4px; margin-top: 8px; }
.account-switch-popover .account-switch-row { min-height: 40px; padding: 8px; gap: 8px; border-radius: var(--radius); }
.account-switch-popover .account-switch-row-main { gap: 0; }
.account-switch-popover .account-switch-row-main > span:last-child,
.account-switch-popover .account-switch-row-counts { display: none; }
.account-switch-popover .account-switch-row-status { gap: 0; }
.account-switch-popover .account-switch-row-status .status-chip + .status-chip { display: none; }
.account-switch-popover .modal-actions { padding: 8px; }
.account-switch-popover #closeAccountSwitchSecondary { display: none; }
.account-switch-popover #accountSwitchManage { width: 100%; min-height: 36px; }
.modal-footer-status { margin-right: auto; max-width: 60%; }
.modal-action-spacer { flex: 1; }
body.modal-open,body.reply-test-drawer-open { overflow: hidden; }
body.mobile-overlay-scroll-locked { position: fixed; top: var(--mobile-overlay-scroll-y,0); left: var(--mobile-overlay-scroll-x,0); width: 100%; overflow: hidden; }
html.mobile-overlay-scroll-locked { overflow: hidden; }
.ai-reply-test-backdrop { display: none; position: fixed; inset: 0; z-index: 80; background: var(--scrim); }
.ai-reply-test-backdrop.open { display: block; }
.ai-reply-test-drawer { position: fixed; inset: 0 0 0 auto; width: min(1040px,calc(100vw - 48px)); height: 100dvh; z-index: 90; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--dialog-shadow); transform: translateX(100%); visibility: hidden; transition: transform 180ms ease,visibility 180ms; }
.ai-reply-test-drawer.open { transform: translateX(0); visibility: visible; }
.ai-reply-test-panel { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.ai-reply-test-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.ai-reply-test-head .icon-button { width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 0; background: transparent; border: 0; }
.ai-reply-test-head .icon-button::before { content: ""; width: 18px; height: 18px; background: currentColor; mask: url("icons/x.svg") center / contain no-repeat; }
.ai-reply-test-head p { color: var(--muted); font-size: 12px; }
.ai-reply-test-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
.reply-test-actions { padding: 16px 24px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--line); background: var(--surface); flex-shrink: 0; }
.reply-test-actions > span { margin-right: auto; font-size: 12px; color: var(--muted); }
.global-feedback { position: fixed; bottom: 24px; right: 24px; z-index: 21000; display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; width: min(380px,calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--panel-radius); box-shadow: var(--shadow); font-size: 13px; }
.global-feedback strong { display: block; margin-bottom: 3px; }
.global-feedback p { color: var(--muted); overflow-wrap: anywhere; }
.global-feedback-icon { display: block; flex: 0 0 20px; width: 20px; height: 20px; color: var(--brand); font-size: 0; }
.global-feedback-icon::before { content: ""; display: block; width: 20px; height: 20px; mask: url("icons/info.svg") center / contain no-repeat; background: currentColor; }
.global-feedback.error .global-feedback-icon { color: var(--danger); }
.global-feedback.success .global-feedback-icon { color: var(--success); }
.global-feedback.success .global-feedback-icon::before { mask-image: url("icons/check.svg"); }
#saveState { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.route-progress { position: fixed; inset: 0 0 auto; z-index: 30000; height: var(--progress-height); pointer-events: none; opacity: 1; transition: opacity var(--progress-motion) linear; }
.route-progress-bar { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--progress-brand); transform: translate3d(-100%,0,0); transition: transform var(--progress-motion) linear; will-change: transform; }
.route-progress-peg { position: absolute; right: 0; width: 100px; height: 100%; box-shadow: var(--progress-glow); transform: rotate(3deg) translate(0,-4px); }
.route-progress[data-phase="fading"] { opacity: 0; }
.is-refresh-loading { position: relative; min-height: 120px; }
.page-list-loading { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--surface); border-radius: inherit; color: var(--muted); padding: 24px; min-height: 110px; }
.page-list-loading.is-leaving { opacity: 0; transition: opacity 200ms linear; }
.page-list-loading-track { display: none; }
.page-list-loading-spinner,.loading-inline-spinner,.login-submit-spinner { display: inline-block; flex: 0 0 18px; width: 18px; height: 18px; background: currentColor; mask: url("icons/loader-circle.svg") center / contain no-repeat; animation: ui-spin 1s linear infinite; }
.page-list-loading-spinner { color: var(--brand); }
button.is-loading { position: relative; pointer-events: none; }
button.is-loading::after { content: ""; display: inline-block; width: 16px; height: 16px; background: currentColor; mask: url("icons/loader-circle.svg") center / contain no-repeat; animation: ui-spin 1s linear infinite; }
button.is-loading:has(.loading-inline-spinner)::after,.header-refresh-button.is-loading::after { display: none; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media(max-width:768px) {
  .modal-backdrop { padding: 12px; align-items: center; height: var(--ui-viewport-height,100dvh); top: var(--ui-viewport-top,0px); bottom: auto; }
  .modal-panel { max-height: calc(var(--ui-viewport-height,100dvh) - 24px); width: 100%; }
  .modal-head { padding: 18px 16px 14px; }
  .modal-head h2 { font-size: 17px; }
  .modal-close-button { top: 12px; right: 10px; width: 40px; height: 40px; }
  .modal-body { padding: 16px; }
  .modal-actions { padding: 12px 16px max(12px,env(safe-area-inset-bottom)); gap: 8px; }
  .modal-actions button { flex: 0 1 auto; min-height: 44px; }
  .modal-footer-status { max-width: 100%; width: 100%; }
  .modal-action-group { margin-left: auto; }
  .ai-reply-test-drawer { width: 100%; border-left: 0; }
  .ai-reply-test-head,.ai-reply-test-body { padding: 16px; }
  .reply-test-actions { padding: 12px 16px max(12px,env(safe-area-inset-bottom)); }
  .reply-test-actions > span { width: 100%; }
  .global-feedback { right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); }
}