.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-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-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; }
}