.case-notifications { position: relative; }
.case-notifications[open] { z-index: 1; }
body.case-notifications-open .workspace-commandbar {
  z-index: 1090;
  overflow: visible;
}
.case-notifications summary { list-style: none; cursor: pointer; position: relative; }
.case-notifications summary::-webkit-details-marker { display: none; }
.case-notifications [hidden] { display: none !important; }
.case-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; border-radius: 12px; padding: 0 4px; display: grid; place-items: center; background: #b43d27; color: white; font-size: 10px; font-weight: 700; }
.case-panel { position: absolute; top: calc(100% + 12px); right: 0; width: min(370px, calc(100vw - 24px)); max-height: min(70vh, 580px); display: flex; flex-direction: column; background: hsl(var(--surface)); color: hsl(var(--ink)); border: 1px solid hsl(var(--line)); border-radius: 16px; box-shadow: 0 18px 50px #101c1b26; z-index: 1100; overflow: hidden; }
.case-panel-heading { padding: 17px 18px 4px; display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.case-panel-heading strong { display: block; font-size: 15px; }
.case-panel-heading span, .case-panel-note, .case-panel-footer span { font-size: 12px; color: #6c7874; }
.case-panel-note { margin: 4px 18px 12px; }
.case-text-button { border: 0; background: transparent; color: #a54321; font-size: 12px; font-weight: 600; padding: 4px; cursor: pointer; }
.case-text-button:disabled { opacity: .45; cursor: default; }
.case-list { overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid hsl(var(--line)); min-height: 65px; }
.case-empty { padding: 20px 18px; margin: 0; color: #6c7874; font-size: 13px; }
.case-item { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid hsl(var(--line)); padding: 6px 12px; }
.case-item.unread { background: color-mix(in srgb, #d46a35 7%, transparent); }
.case-item-open { flex: 1; min-width: 0; text-align: left; border: 0; background: transparent; color: inherit; padding: 8px 6px; cursor: pointer; }
.case-item-open strong, .case-item-open span { display: block; }
.case-item-open strong { font-size: 13px; }
.case-item-open span { color: #6c7874; font-size: 12px; margin-top: 3px; }
.case-panel-footer { padding: 12px 18px 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.case-panel-footer span { flex-basis: 100%; }
.case-push-button { border: 1px solid #a54321; background: #a54321; color: white; border-radius: 9px; padding: 8px 11px; font-size: 12px; font-weight: 650; cursor: pointer; }
.case-notifications button:focus-visible, .case-notifications summary:focus-visible { outline: 3px solid #dd9d77; outline-offset: 2px; }
@media (max-width: 600px) {
  .case-panel {
    position: fixed;
    top: calc(66px + env(safe-area-inset-top, 0px));
    right: 12px;
    left: 12px;
    width: auto;
    max-height: min(calc(100dvh - 82px - env(safe-area-inset-top, 0px)), 580px);
  }
}