#notification-dialog.product-dialog{position:fixed;inset:auto;margin:0;padding:0;width:380px;max-width:calc(100vw - 20px);border:1px solid var(--es-border,#dde3ed);border-radius:14px;background:var(--es-surface,#fff);color:var(--es-text,#273044);box-shadow:0 14px 32px #17243b26;z-index:1000;overflow:auto;transform-origin:top right;box-sizing:border-box}
#notification-dialog .dialog-heading{display:flex;align-items:center;gap:10px;padding:11px 15px;border-bottom:1px solid var(--es-border,#dde3ed);position:sticky;top:0;background:var(--es-surface,#fff);z-index:2}
#notification-dialog .dialog-heading h2{margin:0;font-size:14px;font-weight:600;white-space:nowrap}
#notification-dialog #mark-all-read{margin-left:auto;padding:4px 0;color:#0c9998;background:none;border:0;font-size:12px;font-weight:400;white-space:nowrap;cursor:pointer}
#notification-dialog #mark-all-read:disabled{opacity:.45;cursor:default}
#notification-dialog .dialog-heading .shell-icon{width:23px;height:23px;min-width:23px;min-height:23px;font-size:17px;border:0;background:transparent;color:var(--es-text-muted,#63718c)}
#notification-dialog .notification-tools{padding:7px 15px;gap:8px;font-size:10px;border-bottom:1px solid var(--es-border,#dde3ed)}
#notification-dialog .notification-tools select{font-size:11px;padding:3px 6px;min-height:26px;height:26px;width:100px}
#notification-dialog #show-preferences{font-size:11px;color:var(--es-text-muted,#63718c);margin-left:auto}
#notification-dialog #notification-list{max-height:min(420px,60dvh);overflow:auto}
#notification-dialog .notification-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 25px;gap:8px;padding:12px 14px 12px 35px;border:0;border-bottom:1px solid var(--es-border,#edf0f5)}
#notification-dialog .notification-item::before{content:"";position:absolute;left:16px;top:18px;width:7px;height:7px;border-radius:50%;background:#f07c31}
#notification-dialog .notification-item[data-notification-tone=chat]::before{background:#499cdf}#notification-dialog .notification-item[data-notification-tone=whatsapp]::before{background:#139869}#notification-dialog .notification-item[data-notification-tone=instruction]::before{background:#d6ab28}#notification-dialog .notification-item[data-notification-tone=intimation]::before{background:#8c98a9}
#notification-dialog .notification-open{font-size:12px;line-height:1.5;color:var(--es-text-muted,#63718c);width:100%;overflow-wrap:anywhere}
#notification-dialog .notification-open .severity{display:block;font-size:13px;line-height:1.5;letter-spacing:0;text-transform:none;font-weight:500;color:var(--es-text,#273044);margin:0 0 1px}
#notification-dialog .notification-open small{font-size:10px;color:var(--es-text-muted,#7c89a0);margin-top:4px}
#notification-dialog .notification-state{align-self:center;font-size:0!important;width:25px;height:25px;border:0;border-radius:5px;padding:0;background:transparent;color:var(--es-text-muted,#63718c);opacity:.65}
#notification-dialog .notification-state::before{content:"✓";font-size:14px}#notification-dialog .is-read .notification-state::before{content:"↺"}#notification-dialog .notification-state:hover{opacity:1;background:var(--es-primary-soft,#edf4ff)}
#notification-dialog #notification-prefs{padding:12px 15px;font-size:11px}#notification-dialog .empty-state{padding:24px 18px;font-size:12px;text-align:center;color:var(--es-text-muted,#63718c)}
#notification-dialog :focus-visible{outline:2px solid #0d9488;outline-offset:2px}
@media(max-width:600px){#notification-dialog .notification-tools select{font-size:12px!important}#notification-dialog .notification-state{width:30px;height:32px}}