/* A personal, in-app inbox. It shares the studio's quiet paper-and-rose palette. */
.nt-bell {
  display: inline-flex; position: relative; align-items: center; justify-content: center;
  width: 44px; min-width: 44px; height: 44px; padding: 10px; flex-shrink: 0;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: #806b77; cursor: pointer;
}
.nt-bell:hover, .nt-bell[aria-expanded="true"] { background: #f0e6e8; border-color: #e7d8df; color: #704454; }
.nt-bell svg, .nt-empty-icon svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nt-badge {
  position: absolute; right: 1px; top: 1px; min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 12px;
  border: 2px solid var(--paper, #fffefc); background: #8f5969; color: #fffefc;
  font: 600 9px/1 var(--sans, sans-serif); font-variant-numeric: tabular-nums;
}
.nt-badge[hidden], .nt-refresh[hidden], .nt-more[hidden], .nt-mark-read[hidden], .nt-unread-dot[hidden] { display: none; }
dialog.nt-panel {
  position: fixed; inset: 0 0 0 auto; margin: 0; padding: 0; width: 462px; max-width: 100vw;
  height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
  border: 0; border-left: 1px solid #e5d9df; border-radius: 14px 0 0 14px;
  background: #fffefc; color: #353238; overflow: hidden; box-shadow: -15px 0 55px rgb(53 35 46 / 12%);
}
dialog.nt-panel[open] { display: flex; flex-direction: column; }
dialog.nt-panel::backdrop { background: rgb(47 38 43 / 34%); backdrop-filter: none; }
.nt-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 25px 24px 18px; flex-shrink: 0; }
.nt-panel-head h2 { color: #493942; font-size: 22px; font-weight: 600; line-height: 1.55; margin: 0; letter-spacing: .2px; }
.nt-panel-subtitle { margin: 5px 0 0; color: #7c6b75; font-size: 12px; line-height: 1.8; }
.nt-close {
  width: 44px; height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 9px; background: transparent; color: #8c7582; padding: 0;
  font: 300 28px/1 var(--sans, sans-serif); cursor: pointer;
}
.nt-close:hover { background: #f4edef; color: #704454; }
.nt-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 25px 15px; border-bottom: 1px solid #ebe1e5; flex-shrink: 0; }
.nt-tools-note { color: #86717e; font-size: 11px; line-height: 1.7; }
.nt-read-all, .nt-mark-read {
  border: 0; background: transparent; color: #8b5a73; font-family: inherit; font-size: 12px;
  line-height: 1.7; padding: 7px 0; min-height: 35px; cursor: pointer;
}
.nt-read-all:hover, .nt-mark-read:hover { color: #704454; text-decoration: underline; text-underline-offset: 3px; }
.nt-read-all:disabled { opacity: .48; cursor: default; text-decoration: none; }
.nt-refresh {
  flex-shrink: 0; width: calc(100% - 48px); min-height: 41px; margin: 14px 24px 0;
  border: 1px solid #e5d1dc; border-radius: 8px; padding: 9px 12px; background: #f4ebef;
  color: #83556e; font: 12px/1.7 var(--sans, sans-serif); cursor: pointer;
}
.nt-refresh:hover { border-color: #c4a2b4; background: #f0e4ea; }
.nt-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 8px 24px 15px; }
.nt-item { padding: 16px 0 8px; border-bottom: 1px solid #eee4e9; }
.nt-item:last-child { border-bottom: 0; }
.nt-message { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; color: #65515e; cursor: pointer; border-radius: 5px; }
.nt-item-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.nt-item h3.nt-item-title { color: #6b5664; font-size: 14px; font-weight: 500; line-height: 1.8; overflow-wrap: anywhere; margin: 0; }
.nt-unread .nt-item-title { color: #5e3e52; font-weight: 600; }
.nt-unread-dot { display: block; width: 6px; height: 6px; min-width: 6px; margin-top: 10px; border-radius: 50%; background: #aa7e96; }
.nt-item-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: #7c6674; line-height: 1.95; margin: 8px 0 12px; }
.nt-item-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.nt-item-kind, .nt-item-time { color: #8b7583; font-size: 11px; line-height: 1.8; }
.nt-item-kind { color: #8e667e; }
.nt-item-actions { display: flex; justify-content: flex-end; min-height: 27px; }
.nt-mark-read { font-size: 11px; min-height: 31px; }
.nt-panel-footer { flex-shrink: 0; padding: 0 24px calc(16px + env(safe-area-inset-bottom)); background: #fffefc; }
.nt-status { font-size: 12px; line-height: 1.8; color: #7f6876; margin: 0; padding: 8px 0 0; overflow-wrap: anywhere; }
.nt-status:empty { display: none; }
.nt-status.nt-status-error { color: #a05c66; }
.nt-more { width: 100%; min-height: 43px; margin-top: 12px; border: 1px solid #e3d5de; border-radius: 8px; background: #fffefc; color: #8b647b; font-size: 12px; line-height: 1.7; padding: 10px 13px; cursor: pointer; }
.nt-more:hover { border-color: #bea0b0; background: #faf5f7; }
.nt-empty { padding: 68px 15px 45px; text-align: center; }
.nt-empty-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 20px; border: 1px solid #ead9e3; border-radius: 50%; color: #af8c9f; background: #f6eef2; }
.nt-empty h3 { color: #765468; font-size: 16px; font-weight: 500; line-height: 1.8; margin: 0; }
.nt-empty p { color: #8b7281; font-size: 12px; line-height: 1.9; max-width: 260px; margin: 11px auto 0; }
.nt-loading { text-align: center; padding: 55px 12px; color: #98798c; font-size: 13px; line-height: 1.9; }
.nt-bell:focus-visible, .nt-panel button:focus-visible { outline: 2px solid #a0748e; outline-offset: 3px; }
@media (max-width: 760px) {
  .top-right .nt-bell { width: 44px; height: 44px; min-width: 44px; margin: 0 -3px; }
  .nt-bell svg { width: 21px; height: 21px; }
  .nt-read-all { min-height: 44px; padding: 9px 0; }
  .nt-mark-read { min-height: 44px; padding: 10px 0; }
}
@media (max-width: 600px) {
  .top-right:has(.nt-bell) .verified-pill { display: none; }
  dialog.nt-panel { width: 100vw; max-width: 100vw; border-left: 0; border-radius: 0; }
  .nt-panel-head { padding: 23px 21px 13px; }
  .nt-panel-head h2 { font-size: 21px; }
  .nt-tools { padding: 0 22px 12px; }
  .nt-list { padding: 6px 22px 13px; }
  .nt-item { padding-top: 18px; }
  .nt-refresh { margin-left: 22px; margin-right: 22px; width: calc(100% - 44px); }
  .nt-panel-footer { padding-left: 22px; padding-right: 22px; }
  .nt-item-body { font-size: 13px; }
  .nt-item-time { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .nt-bell, .nt-panel, .nt-panel button { transition: none !important; animation: none !important; }
}