.notification-dock {
  position:fixed;
  bottom:12px;
  right:12px;
  width:min(360px,calc(100vw - 24px));
  z-index:10000;
  background:white;
  color:#18364d;
  border:1px solid #b5c9db;
  border-radius:14px;
  box-shadow:0 5px 24px #18364d33;
  padding:12px;
  font:14px system-ui}

 .notification-dock header {
  padding:0;
  background:white;
  border:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px}

 .notification-dock button,.notification-modal button {
  border:0;
  border-radius:8px;
  padding:9px;
  background:#126dba;
  color:white;
  font:inherit;
  cursor:pointer}

 .notification-preview {
  max-height:110px;
  overflow:auto;
  margin-top:8px;
  white-space:pre-line}

 .notification-modal {
  width:min(620px,calc(100vw - 24px));
  max-height:80vh;
  overflow:auto;
  border:1px solid #b5c9db;
  border-radius:16px;
  padding:20px;
  color:#18364d;
  background:white}

 .notification-modal::backdrop {
  background:#18364d66}

 .notification-modal article {
  padding:12px;
  margin:8px 0;
  border:1px solid #b5c9db;
  border-radius:10px}

 body {
  padding-bottom:210px!important}

.notification-count-badge { background:#d93025; color:white; border-radius:20px; padding:3px 8px; min-width:24px; text-align:center; font-weight:800; }
.notification-count-badge:empty { display:none; }
.order-count-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin:12px 0; }
.order-count-chip,.notification-modal .order-count-chip { display:flex; align-items:center; justify-content:space-between; gap:8px; border:1px solid #cbdfee; border-radius:12px; padding:12px; background:#e8f2fc; color:#18364d; font:inherit; cursor:pointer; }
.order-count-chip strong { background:white; border-radius:20px; padding:2px 9px; color:#126dba; }
.notification-order-summary { border-bottom:1px solid #d9e5ef; margin-bottom:20px; }
.notification-entry { position:relative; }
.notification-entry.unread { border-left:4px solid #126dba; }
.notification-entry.unread::after { content:''; position:absolute; top:12px; right:12px; width:8px; height:8px; border-radius:50%; background:#126dba; }

.notification-modal { position:fixed; margin:0; padding:0; max-width:none; max-height:none; min-width:0; overflow:hidden; }
.notification-window-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#e8f2fc; border-bottom:1px solid #d9e5ef; }
.notification-modal .notification-drag-handle { flex:1; text-align:left; background:transparent; color:#18364d; font-weight:750; cursor:move; touch-action:none; user-select:none; }
.notification-window-body { height:calc(100% - 78px); overflow:auto; padding:16px 20px 28px; overscroll-behavior:contain; }
.notification-modal .notification-resize-handle { position:absolute; bottom:0; right:0; width:30px; height:30px; padding:0; cursor:nwse-resize; touch-action:none; background:#e8f2fc; color:#126dba; font-size:22px; }
.notification-modal button:focus-visible { outline:3px solid #126dba; outline-offset:2px; }

.notification-status-icons { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.notification-status-icons:empty { display:none; }
.notification-dock .notification-status-icon { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:5px 8px; background:#e8f2fc; color:#155a95; border:1px solid #d4e5f5; border-radius:9px; }
.notification-status-icon span { display:flex; }
.notification-status-icon strong { font-size:13px; }
.notification-dock .notification-status-icon.new { background:#fff1cf; color:#885000; }
.notification-dock .notification-status-icon.delivered { background:#def5e6; color:#186c40; }
.notification-dock .notification-status-icon.cancelled { background:#ffebe8; color:#9b251d; }
.notification-dock .notification-status-icon:focus-visible { outline:3px solid #126dba; outline-offset:2px; }

@keyframes easyMandiNoticePulse{0%{transform:translateY(10px);box-shadow:0 0 0 rgba(22,108,73,0)}45%{transform:translateY(-3px);box-shadow:0 0 0 5px rgba(22,108,73,.2)}100%{transform:translateY(0);box-shadow:0 5px 24px rgba(24,54,77,.2)}}
@keyframes easyMandiNoticeCount{0%,100%{transform:scale(1)}35%{transform:scale(1.36)}}
.notification-dock.notification-updated{animation:easyMandiNoticePulse .85s ease-out}
.notification-count-badge.notification-bounce{animation:easyMandiNoticeCount .65s ease-out}
.notification-sound-toggle{border:1px solid #cadbd0;border-radius:8px;background:transparent;font-size:15px;padding:5px 8px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.notification-dock.notification-updated,.notification-count-badge.notification-bounce{animation:none!important}}

@keyframes easyMandiNoticeEntry{from{opacity:.35;transform:translateX(14px)}to{opacity:1;transform:translateX(0)}}
.notification-entry-new{animation:easyMandiNoticeEntry .65s ease-out}
@media(prefers-reduced-motion:reduce){.notification-entry-new{animation:none!important}}