/* 独立portal与dialog样式，不改动工作台header或其它业务模块。 */
#studioNotificationsButton {
  position:relative; display:inline-flex; flex:0 0 40px; align-items:center; justify-content:center;
  width:40px; min-width:40px; max-width:40px; height:40px; min-height:40px; padding:0;
  border:1px solid var(--studio-line,#e6eae8); border-radius:10px; background:#fff;
  color:var(--studio-muted,#737e7b); box-shadow:none; cursor:pointer; transform:none;
}
#studioNotificationsButton:hover,#studioNotificationsButton[aria-expanded="true"] { background:var(--studio-green-soft,#eaf3ee); color:var(--studio-green,#26715d); border-color:#c7ddcd; }
#studioNotificationsButton svg { width:20px; height:20px; pointer-events:none; }
#studioNotificationsButton .studio-notifications-badge { position:absolute; right:-4px; top:-5px; min-width:17px; height:17px; padding:0 4px; border:2px solid #fff; border-radius:10px; background:#c54942; color:#fff; font:650 10px/13px var(--ni-font-sans,sans-serif); text-align:center; box-sizing:border-box; }
#studioNotificationsButton[hidden],.studio-notifications-portal [hidden],.studio-notifications-toasts[hidden],#studioNotificationsButton [hidden] { display:none!important; }
.studio-notifications-portal { position:relative; z-index:2147483000; }
.studio-notifications-panel,.studio-notifications-dialog,.studio-notifications-toasts {
  box-sizing:border-box; color:var(--studio-text,#202a29); font:400 13px/1.6 var(--ni-font-sans,system-ui,sans-serif);
  text-align:left; letter-spacing:normal; overflow-wrap:anywhere; color-scheme:light;
}
.studio-notifications-panel *,.studio-notifications-dialog *,.studio-notifications-toasts * { box-sizing:border-box; }
.studio-notifications-panel {
  position:fixed; inset:auto; z-index:2147483001; width:392px; max-width:calc(100vw - 16px); max-width:calc(100dvw - 16px);
  margin:0; padding:0; border:1px solid var(--studio-line,#e6eae8); border-radius:14px; background:#fff;
  box-shadow:0 14px 48px #19382b26,0 2px 8px #19382b0d; overflow:hidden;
  display:flex; flex-direction:column;
}
.studio-notifications-head { display:flex; flex:none; align-items:center; gap:10px; padding:16px 18px 10px; }
.studio-notifications-head h2,.studio-notifications-dialog h2 { margin:0; color:var(--studio-text,#202a29); font:650 16px/1.4 var(--ni-font-sans,system-ui,sans-serif); }
.studio-notifications-head .studio-notifications-icon-button { margin-left:auto; }
.studio-notifications-count { color:var(--studio-muted,#737e7b); font-size:11px; }
.studio-notifications-toolbar { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:6px; padding:0 14px 10px; border-bottom:1px solid var(--studio-line,#e6eae8); }
.studio-notifications-toolbar > span { flex:1; font-size:11px; color:var(--studio-muted,#737e7b); }
.studio-notifications-panel button,.studio-notifications-dialog button,.studio-notifications-toasts button {
  font:550 12px/1.5 var(--ni-font-sans,system-ui,sans-serif); letter-spacing:normal; text-transform:none;
  cursor:pointer; box-shadow:none; transform:none; transition:background 120ms ease;
}
.studio-notifications-text-button { flex:none; min-height:32px; width:auto; padding:5px 8px; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--studio-green,#26715d); }
.studio-notifications-text-button:hover { background:var(--studio-green-soft,#eaf3ee); }
.studio-notifications-text-button:disabled { color:#89938f; background:transparent; cursor:default; opacity:.75; }
.studio-notifications-icon-button { display:inline-flex; flex:0 0 32px; align-items:center; justify-content:center; min-width:32px; width:32px; height:32px; min-height:32px; padding:0; border:0; border-radius:7px; color:var(--studio-muted,#737e7b); background:transparent; }
.studio-notifications-panel .studio-notifications-icon-button,.studio-notifications-dialog .studio-notifications-icon-button,.studio-notifications-toasts .studio-notifications-icon-button { font-size:22px; font-weight:400; }
.studio-notifications-icon-button:hover { color:var(--studio-text,#202a29); background:#edf2ef; }
#studioNotificationsButton:focus-visible,.studio-notifications-panel button:focus-visible,.studio-notifications-dialog button:focus-visible,.studio-notifications-toasts button:focus-visible { outline:2px solid var(--studio-green,#26715d); outline-offset:2px; }
.studio-notifications-list { flex:1 1 auto; min-height:0; margin:0; padding:0; list-style:none; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.studio-notification-row { margin:0; padding:14px 18px 10px; border-bottom:1px solid #edf0ee; background:#f5f9f6; }
.studio-notification-row:last-child { border-bottom:0; }
.studio-notification-row.is-read { background:#fff; }
.studio-notification-heading { display:flex; align-items:flex-start; gap:8px; min-width:0; }
.studio-notification-heading strong { min-width:0; font-size:13px; font-weight:650; }
.studio-notification-dot { flex:0 0 6px; width:6px; height:6px; margin-top:7px; border-radius:50%; background:var(--studio-green,#26715d); }
.is-error .studio-notification-dot { background:#c54942; }
.is-warning .studio-notification-dot { background:#b77d19; }
.is-info .studio-notification-dot { background:#4a79a0; }
.is-read .studio-notification-dot { background:#cbd4ce; }
.studio-notification-message { margin:5px 0 0; font-size:12px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; color:#58635f; }
.studio-notification-meta { display:flex; align-items:center; flex-wrap:wrap; gap:2px; margin-top:5px; }
.studio-notification-meta time { flex:1; padding-right:8px; color:#7e8b84; font-size:10px; font-variant-numeric:tabular-nums; }
.studio-notification-meta [aria-pressed="true"] { color:#7e8b84; }
.studio-notifications-footer { flex:none; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px 12px; padding:9px 16px 12px; border-top:1px solid var(--studio-line,#e6eae8); background:#fff; }
.studio-notifications-note { flex:0 0 100%; margin:0; font-size:10px; line-height:1.6; color:#7e8b84; }
.studio-notifications-empty { margin:0; padding:34px 20px; text-align:center; color:var(--studio-muted,#737e7b); font-size:12px; }
.studio-notifications-dialog {
  position:fixed; inset:0; width:620px; max-width:calc(100vw - 24px); max-width:calc(100dvw - 24px);
  max-height:calc(100vh - 40px); max-height:calc(100dvh - 40px); margin:auto; padding:0;
  border:1px solid var(--studio-line,#e6eae8); border-radius:16px; background:#fff; overflow:hidden;
  box-shadow:0 20px 70px #183a3040; z-index:2147483002;
}
.studio-notifications-dialog[open] { display:flex; flex-direction:column; }
.studio-notifications-dialog:not([open]) { display:none; }
.studio-notifications-dialog::backdrop { background:#18342b55; backdrop-filter:blur(3px); }
.studio-notifications-dialog .studio-notifications-head { padding:18px 22px 12px; }
.studio-notifications-dialog .studio-notifications-toolbar { padding-right:18px; padding-left:18px; }
.studio-notifications-dialog .studio-notification-row { padding-right:22px; padding-left:22px; }
.studio-notifications-range { margin-right:auto; color:var(--studio-muted,#737e7b); font-size:11px; font-variant-numeric:tabular-nums; }
.studio-notifications-pagination { display:flex; align-items:center; gap:5px; }
.studio-notifications-page { min-width:44px; text-align:center; color:var(--studio-muted,#737e7b); font-size:11px; }
.studio-notifications-confirm { width:400px; padding:24px; gap:12px; }
.studio-notifications-confirm > p { margin:0; color:var(--studio-muted,#737e7b); font-size:13px; }
.studio-notifications-confirm-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:10px; }
.studio-notifications-danger-button { min-height:36px; width:auto; padding:7px 14px; border:1px solid #b4423c; border-radius:7px; background:#b4423c; color:#fff; }
.studio-notifications-danger-button:hover { background:#943832; }
.studio-notifications-toasts {
  position:fixed; inset:auto; z-index:2147483647; display:flex; flex-direction:column; gap:8px;
  width:392px; max-width:calc(100vw - 16px); max-width:calc(100dvw - 16px); margin:0; padding:0;
  border:0; background:transparent; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; pointer-events:none;
}
.studio-notifications-toasts::backdrop,.studio-notifications-panel::backdrop { background:transparent; pointer-events:none; }
.studio-notification-toast {
  display:flex; flex:none; align-items:flex-start; gap:8px; width:100%; padding:12px 10px 12px 14px;
  border:1px solid #dce7e0; border-left:3px solid var(--studio-green,#26715d); border-radius:10px;
  background:#fff; box-shadow:0 5px 20px #19382b1f; pointer-events:auto; animation:studio-notification-enter 160ms ease-out;
}
.studio-notification-toast.is-error { border-left-color:#c54942; }
.studio-notification-toast.is-warning { border-left-color:#b77d19; }
.studio-notification-toast.is-info { border-left-color:#4a79a0; }
.studio-notification-toast-content { flex:1; min-width:0; }
.studio-notification-toast-content strong { font-size:13px; font-weight:650; }
.studio-notification-toast .studio-notification-message { max-height:144px; overflow:auto; overscroll-behavior:contain; }
@keyframes studio-notification-enter { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:480px) {
  .studio-notifications-dialog { max-width:calc(100vw - 16px); max-height:calc(100dvh - 24px); border-radius:12px; }
  .studio-notifications-panel .studio-notifications-head,.studio-notifications-dialog .studio-notifications-head { padding:12px; }
  .studio-notification-row,.studio-notifications-dialog .studio-notification-row { padding:12px; }
  .studio-notifications-dialog .studio-notifications-footer { padding:10px 12px; }
  .studio-notifications-confirm { padding:20px; }
  .studio-notifications-toolbar > span { min-width:130px; }
}
@media(prefers-reduced-motion:reduce) {
  .studio-notification-toast { animation:none; }
  .studio-notifications-panel button,.studio-notifications-dialog button,.studio-notifications-toasts button { transition:none; }
}
