.notification-center { position: relative; z-index: 100; }
.notification-trigger { position: relative; display: inline-grid; width: 42px; height: 42px; place-items: center; padding: 0; border: 1px solid var(--line, #d7deea); border-radius: 7px; color: var(--ink, #111827); background: var(--surface, #fff); font-size: 20px; line-height: 1; }
.notification-trigger:hover, .notification-trigger[aria-expanded="true"] { border-color: var(--accent, var(--orange, #f97316)); color: var(--accent-deep, var(--orange-dark, #c2410c)); background: var(--accent-soft, var(--orange-soft, #fff4e8)); }
.notification-trigger.has-unread { border-color: #ff7438; color: #ff7438; box-shadow: 0 0 0 3px rgba(255, 116, 56, .15); animation: notification-bell-pulse 1.35s ease-in-out infinite; }
.notification-count { position: absolute; top: -7px; right: -7px; display: grid; min-width: 19px; height: 19px; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: #d92d20; font-size: 10px; font-weight: 900; line-height: 1; }
.notification-panel {
  position: fixed;
  z-index: 2147483000;
  top: var(--notification-panel-top, 72px);
  left: var(--notification-panel-left, 12px);
  display: flex;
  width: var(--notification-panel-width, min(390px, calc(100vw - 24px)));
  max-width: calc(100vw - 24px);
  max-height: var(--notification-panel-max-height, min(520px, calc(100vh - 84px)));
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--line, #d7deea);
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 20px 38px rgba(15, 23, 42, .20);
}
.notification-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 13px; border-bottom: 1px solid var(--line, #d7deea); }
.notification-panel-head strong { font-size: 15px; }
.notification-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.notification-read-all { padding: 4px 0; border: 0; color: var(--blue, #2563eb); background: transparent; font-size: 12px; font-weight: 850; }
.notification-read-all:hover { color: var(--accent-deep, #c2410c); }
.notification-phone-button { min-height: 31px; padding: 5px 9px; border: 1px solid #f97316; border-radius: 6px; color: #9a3412; background: #fff7ed; font-size: 11px; font-weight: 900; }
.notification-phone-button.active { border-color: #17a673; color: #067653; background: #e9fbf4; }
.notification-phone-button:disabled { cursor: not-allowed; opacity: .6; }
.notification-phone-status { display: block; padding: 8px 13px; border-bottom: 1px solid #e7edf5; color: #667085; background: #f8fafc; font-size: 11px; font-weight: 750; line-height: 1.35; }
.notification-phone-status.active { color: #067653; background: #edfdf6; }
.notification-phone-status.prompt { display:grid; gap:2px; color:#9a3412; border-left:3px solid #f97316; background:#fff7ed; }
.notification-phone-status.prompt b { color:#9a3412; font-size:11px; }
.notification-phone-status.prompt span { color:#7c4a29; font-weight:700; }
.notification-list { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.notification-item { display: grid; width: 100%; gap: 3px; padding: 11px 13px; border: 0; border-bottom: 1px solid #edf1f6; color: inherit; background: #fff; text-align: left; }
.notification-item:last-child { border-bottom: 0; }
.notification-item:hover { background: #f8fafc; }
.notification-item.unread { border-left: 3px solid var(--accent, #f97316); background: #fffaf5; }
.notification-item strong { font-size: 13px; }
.notification-item span { color: var(--muted, #667085); font-size: 12px; line-height: 1.35; }
.notification-item time { color: #98a2b3; font-size: 11px; }
.notification-empty { padding: 24px 14px; color: var(--muted, #667085); font-size: 13px; text-align: center; }

.notification-attention-stack {
  position: fixed;
  z-index: 2147483001;
  top: 18px;
  right: 18px;
  display: grid;
  width: min(520px, calc(100vw - 36px));
  gap: 10px;
  pointer-events: none;
}
.notification-attention {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  overflow: hidden;
  pointer-events: auto;
  border: 1px solid #ff8a50;
  border-left: 5px solid #ff641f;
  border-radius: 11px;
  color: #172033;
  background: #fffaf6;
  box-shadow: 0 24px 70px rgba(13, 23, 38, .32), 0 0 0 4px rgba(255, 100, 31, .12);
  animation: notification-attention-enter .34s ease-out, notification-attention-pulse 1.6s ease-in-out 2 .45s;
}
.notification-attention-icon {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #ff641f;
  box-shadow: 0 0 0 7px rgba(255, 100, 31, .14);
  font-size: 26px;
  font-weight: 950;
}
.notification-attention-copy { display: grid; min-width: 0; gap: 3px; }
.notification-attention-copy > span { color: #c2410c; font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.notification-attention-copy strong { color: inherit; font-size: 16px; line-height: 1.25; }
.notification-attention-copy p { margin: 0; color: #475467; font-size: 13px; line-height: 1.42; overflow-wrap: anywhere; }
.notification-attention-copy time { color: #7b8798; font-size: 11px; }
.notification-attention-actions { display: grid; grid-template-columns: auto auto; gap: 7px; align-items: center; }
.notification-attention-actions button { min-height: 35px; padding: 7px 11px; border: 1px solid #cdd6e3; border-radius: 6px; color: #344054; background: #fff; font-size: 12px; font-weight: 900; }
.notification-attention-actions .notification-attention-open { border-color: #ff641f; color: #fff; background: #ff641f; }
.notification-attention-actions .notification-attention-dismiss { position: absolute; top: 5px; right: 6px; min-width: 25px; min-height: 25px; padding: 0; border: 0; color: #667085; background: transparent; font-size: 21px; }

@keyframes notification-bell-pulse {
  0%, 100% { transform: rotate(0); box-shadow: 0 0 0 3px rgba(255, 116, 56, .12); }
  15% { transform: rotate(-7deg); }
  30% { transform: rotate(7deg); box-shadow: 0 0 0 7px rgba(255, 116, 56, 0); }
  45% { transform: rotate(0); }
}
@keyframes notification-attention-enter {
  from { opacity: 0; transform: translate3d(28px, -12px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes notification-attention-pulse {
  0%, 100% { box-shadow: 0 24px 70px rgba(13, 23, 38, .32), 0 0 0 4px rgba(255, 100, 31, .12); }
  50% { box-shadow: 0 24px 70px rgba(13, 23, 38, .38), 0 0 0 10px rgba(255, 100, 31, .04); }
}

html[data-ponto-theme="operations"] .notification-panel {
  color: #e8eef6;
  border-color: #35465e;
  background: #111824;
  box-shadow: 0 22px 55px rgba(0, 0, 0, .45);
}
html[data-ponto-theme="operations"] .notification-panel-head { border-color: #2d3b4f; }
html[data-ponto-theme="operations"] .notification-panel-head strong { color: #f2f6fb; }
html[data-ponto-theme="operations"] .notification-read-all {
  color: #72d8d2;
  background: transparent;
}
html[data-ponto-theme="operations"] .notification-read-all:hover { color: #a2eee9; }
html[data-ponto-theme="operations"] .notification-phone-button {
  border-color: #ff7438;
  color: #ffd5c2;
  background: #2b1b18;
}
html[data-ponto-theme="operations"] .notification-phone-button.active {
  border-color: #39d3a1;
  color: #a7f3d9;
  background: #102d27;
}
html[data-ponto-theme="operations"] .notification-phone-status {
  color: #aab7c7;
  border-color: #2d3b4f;
  background: #0e1622;
}
html[data-ponto-theme="operations"] .notification-phone-status.active { color: #7ee4c3; background: #10231f; }
html[data-ponto-theme="operations"] .notification-phone-status.prompt { color:#ffd3bd; border-left-color:#ff7438; background:#2b1b18; }
html[data-ponto-theme="operations"] .notification-phone-status.prompt b { color:#ffd3bd; }
html[data-ponto-theme="operations"] .notification-phone-status.prompt span { color:#d8b09d; }
html[data-ponto-theme="operations"] .notification-item {
  color: #dce5ef;
  border-color: #29374a;
  background: #111824;
}
html[data-ponto-theme="operations"] .notification-item:hover { background: #182334; }
html[data-ponto-theme="operations"] .notification-item.unread {
  border-left-color: #ff7438;
  background: #1d191a;
}
html[data-ponto-theme="operations"] .notification-item strong { color: #eef3f9; }
html[data-ponto-theme="operations"] .notification-item span { color: #aab7c7; }
html[data-ponto-theme="operations"] .notification-item time,
html[data-ponto-theme="operations"] .notification-empty { color: #8190a4; }
html[data-ponto-theme="operations"] .notification-attention {
  color: #f5f7fb;
  border-color: #a94c2b;
  border-left-color: #ff7438;
  background: #171b25;
  box-shadow: 0 24px 75px rgba(0, 0, 0, .58), 0 0 0 4px rgba(255, 116, 56, .13);
}
html[data-ponto-theme="operations"] .notification-attention-copy > span { color: #ff9a6b; }
html[data-ponto-theme="operations"] .notification-attention-copy p { color: #c4cfdd; }
html[data-ponto-theme="operations"] .notification-attention-copy time { color: #8999ad; }
html[data-ponto-theme="operations"] .notification-attention-actions button { border-color: #40516a; color: #e7edf6; background: #152033; }
html[data-ponto-theme="operations"] .notification-attention-actions .notification-attention-open { border-color: #ff7438; color: #10141d; background: #ff7438; }
html[data-ponto-theme="operations"] .notification-attention-actions .notification-attention-dismiss { color: #a9b7c8; background: transparent; }

@media (max-width: 640px) {
  .notification-panel {
    max-width: calc(100vw - 16px);
    border-radius: 8px;
  }
  .notification-panel-head { align-items: flex-start; }
  .notification-panel-actions { display: grid; justify-items: end; }
  .notification-attention-stack { top: 8px; right: 8px; width: calc(100vw - 16px); }
  .notification-attention { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; padding: 15px 13px; }
  .notification-attention-icon { width: 40px; height: 40px; font-size: 22px; }
  .notification-attention-actions { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .notification-attention-actions button:not(.notification-attention-dismiss) { width: 100%; min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .notification-trigger.has-unread,
  .notification-attention { animation: none; }
}

html[data-ponto-theme="heritage"] .notification-trigger {color:#ead49d;border-color:#52604d;background:#192d22}
html[data-ponto-theme="heritage"] .notification-trigger:hover,
html[data-ponto-theme="heritage"] .notification-trigger[aria-expanded="true"] {color:#102018;border-color:#d3b878;background:#c7a767}
html[data-ponto-theme="heritage"] .notification-trigger.has-unread {color:#e3c77f;border-color:#b99a5e;box-shadow:0 0 0 3px rgba(185,154,94,.15)}
html[data-ponto-theme="heritage"] .notification-panel {color:#f3ecdc;border-color:#52604d;border-radius:4px;background:#13251c;box-shadow:0 24px 62px rgba(0,0,0,.5)}
html[data-ponto-theme="heritage"] .notification-panel-head {border-color:#405343;background:#102018}
html[data-ponto-theme="heritage"] .notification-panel-head strong {color:#f5efdf;font-family:Georgia,"Times New Roman",serif}
html[data-ponto-theme="heritage"] .notification-read-all {color:#dec78f;background:transparent}
html[data-ponto-theme="heritage"] .notification-phone-button {color:#ead49d;border-color:#8f825f;background:#302b20}
html[data-ponto-theme="heritage"] .notification-phone-button.active {color:#c8ddbc;border-color:#587353;background:#1b3221}
html[data-ponto-theme="heritage"] .notification-phone-status {color:#aa9f87;border-color:#405343;background:#0e1d16}
html[data-ponto-theme="heritage"] .notification-phone-status.active {color:#c8ddbc;background:#1b3221}
html[data-ponto-theme="heritage"] .notification-phone-status.prompt {color:#ead49d;border-left-color:#b99a5e;background:#302b20}
html[data-ponto-theme="heritage"] .notification-phone-status.prompt b {color:#ead49d}
html[data-ponto-theme="heritage"] .notification-phone-status.prompt span {color:#c6b99e}
html[data-ponto-theme="heritage"] .notification-item {color:#e8dfcb;border-color:#314437;background:#13251c}
html[data-ponto-theme="heritage"] .notification-item:hover {background:#1d3327}
html[data-ponto-theme="heritage"] .notification-item.unread {border-left-color:#b99a5e;background:#29291f}
html[data-ponto-theme="heritage"] .notification-item strong {color:#f5efdf}
html[data-ponto-theme="heritage"] .notification-item span {color:#b9ad91}
html[data-ponto-theme="heritage"] .notification-item time,
html[data-ponto-theme="heritage"] .notification-empty {color:#8f927f}
html[data-ponto-theme="heritage"] .notification-attention {color:#f5efdf;border-color:#8f713d;border-left-color:#c8a96b;border-radius:4px;background:#17291f;box-shadow:0 24px 75px rgba(0,0,0,.58),0 0 0 4px rgba(185,154,94,.12)}
html[data-ponto-theme="heritage"] .notification-attention-icon {color:#102018;background:#c8a96b;box-shadow:0 0 0 7px rgba(185,154,94,.14)}
html[data-ponto-theme="heritage"] .notification-attention-copy > span {color:#dec78f}
html[data-ponto-theme="heritage"] .notification-attention-copy p {color:#d8cdb5}
html[data-ponto-theme="heritage"] .notification-attention-copy time {color:#9f967f}
html[data-ponto-theme="heritage"] .notification-attention-actions button {color:#e8dfcb;border-color:#52604d;background:#192d22}
html[data-ponto-theme="heritage"] .notification-attention-actions .notification-attention-open {color:#102018;border-color:#d3b878;background:#c8a96b}