.messages-button { position: relative; }

.messages-button > svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.messages-button__badge {
  position: absolute;
  top: -1px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border: 1.5px solid var(--ui-surface-floating);
  border-radius: var(--radius-full);
  background: var(--ui-notification-badge);
  color: var(--ui-text-on-accent);
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.messages-button__badge[hidden],
.messages-panel[hidden] { display: none; }

.messages-panel {
  --segment-scrollbar-line: color-mix(in srgb, var(--ui-value-primary) 14%, transparent);
  --segment-scrollbar-thumb: color-mix(in srgb, var(--ui-value-primary) 16%, var(--ui-surface-floating));
  --segment-scrollbar-thumb-hover: color-mix(in srgb, var(--ui-value-primary) 28%, var(--ui-surface-floating));
  position: fixed;
  top: calc(var(--ui-header-height) + var(--space-7));
  right: var(--ui-shell-inline-padding);
  z-index: 65;
  width: min(360px, calc(100vw - 28px));
  max-height: min(600px, calc(100vh - var(--ui-header-height) - var(--ui-footer-height) - 24px));
  padding: var(--space-9);
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-lg);
  background: var(--ui-surface-floating);
  color: var(--ui-value-primary);
}

.messages-panel__viewport {
  max-height: calc(min(600px, calc(100vh - var(--ui-header-height) - var(--ui-footer-height) - 24px)) - (2 * var(--space-9)));
  padding-inline-end: var(--space-7);
  padding-block-end: var(--space-7);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: calc(var(--radius-lg) - var(--space-3));
  scrollbar-gutter: stable;
}

.messages-panel__viewport.has-custom-scrollbar {
  scrollbar-width: none;
}

.messages-panel__viewport.has-custom-scrollbar::-webkit-scrollbar {
  display: none;
}

.messages-scrollbar {
  top: var(--space-9);
  right: var(--space-3);
  z-index: 2;
}

.messages-panel__header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: calc(var(--ui-floating-padding-lg) + var(--space-3));
  border-bottom: 1px solid var(--ui-border);
  background: var(--ui-surface-floating);
}

.messages-panel__eyebrow {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--ui-value-muted);
  font-size: var(--ui-font-size-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.messages-panel h2 {
  margin: 0;
  color: var(--ui-value-primary);
}

.messages-panel__close { color: var(--ui-value-muted); }
.messages-panel__close:hover { color: var(--ui-accent); }

.messages-panel__status {
  padding: calc(var(--ui-floating-padding-lg) + var(--space-3));
  color: var(--ui-value-muted);
  font-size: var(--ui-font-size-body-sm);
}

.messages-panel__status:empty { display: none; }

.messages-panel__list { display: grid; }

.app-message {
  display: grid;
  gap: var(--space-7);
  padding: calc(var(--ui-floating-padding-lg) + var(--space-3));
  border-bottom: 1px solid var(--ui-border);
}

.app-message:last-child { border-bottom: 0; }
.app-message.is-unread { background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface-floating)); }

.app-message__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
}

.app-message__date {
  color: var(--ui-value-muted);
  font-size: var(--ui-font-size-micro);
}

.app-message__new {
  color: var(--ui-accent);
  font-size: var(--ui-font-size-micro);
  font-weight: 600;
}

.app-message h3 {
  margin: 0;
  color: var(--ui-value-primary);
}

.app-message p {
  margin: 0;
  color: var(--ui-text-body-secondary);
  line-height: 1.55;
}

.app-message__actions {
  display: flex;
  align-items: center;
  gap: var(--ui-action-gap-wide);
}

.app-message__cta {
  padding: var(--space-5) var(--space-8);
  border: 0;
  border-radius: var(--ui-radius-field);
  background: var(--ui-accent);
  color: var(--ui-text-on-accent);
  text-decoration: none;
}

.app-message__dismiss { margin-left: auto; }

@media (max-width: 899px) {
  .messages-panel { display: none; }
}