.notification-bell { position: relative; display:inline-grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:7px; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--green); cursor:pointer; }
.notification-bell[hidden] { display:none; }
.notification-bell svg { width:21px; height:21px; }
.notification-bell i { display:none; position:absolute; right:2px; top:1px; width:8px; height:8px; background:#dc7733; border:2px solid var(--paper); border-radius:50%; }
.notification-bell.has-unread i { display:block; }
.customer-header { gap:8px; }
.customer-header .customer-brand { margin-right:auto; min-width:0; }
.customer-header .customer-brand strong { white-space:nowrap; }
.customer-header .customer-avatar { flex:0 0 36px; width:36px; height:36px; }
.notification-center { width:min(440px,calc(100% - 24px)); max-height:calc(100dvh - 32px); padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--paper,#fff); color:var(--ink,#253b31); box-shadow:0 16px 50px #0003; }
.notification-center::backdrop { background:#15291d70; }
.notification-center header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.notification-center h2 { margin:0; font-size:24px; }
.notification-center header button { border:0; background:var(--soft); color:inherit; border-radius:10px; width:34px; height:34px; font-size:24px; cursor:pointer; }
.inbox-hint,.inbox-status { font-size:12px; color:var(--muted); }
.inbox-list { overflow-y:auto; max-height:60dvh; overscroll-behavior:contain; }
.inbox-list article { padding:16px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.inbox-list h3 { margin:0 0 7px; font-size:16px; }
.inbox-list article p { white-space:pre-wrap; margin:0 0 8px; line-height:1.5; }
.inbox-list time { font-size:11px; color:var(--muted); }
.inbox-empty { padding:20px 0; }
.recipient-picker { position:relative; width:100%; }
.recipient-trigger { width:100%; text-align:left; padding:12px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--paper); font:inherit; cursor:pointer; }
.recipient-options { position:relative; margin-top:6px; padding:5px; max-height:210px; overflow-y:auto; border:1px solid var(--line); border-radius:12px; background:var(--paper); box-shadow:0 4px 14px #20382912; }
.recipient-options button { display:block; width:100%; padding:11px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; text-align:left; overflow-wrap:anywhere; cursor:pointer; }
.recipient-options button:hover,.recipient-options button:focus-visible,.recipient-options button[aria-selected=true] { background:var(--soft); color:var(--green); }
@media(max-width:440px){ .customer-header .customer-brand{gap:7px}.customer-header .customer-brand strong{font-size:16px}.customer-header .brand-mark{display:none}.notification-center{padding:18px} }
@media(min-width:361px) and (max-width:440px) { .customer-header .brand-mark { display:inline-grid; width:30px; height:30px; min-width:30px; } .customer-header .customer-brand strong { font-size:15px; } }