/* Administrator preview: a readable inbox, consistent with the personal workspace. */
body.wyl-frontend-preview .wyl-account-page.is-messages {
  --wyl-message-danger: #bd3549;
  width: min(1100px, calc(100% - 48px));
  max-width: 1100px;
  padding: 24px 0 40px;
}
html[data-wyl-theme="dark"] body.wyl-frontend-preview .wyl-account-page.is-messages { --wyl-message-danger: #ff8492; }
body.wyl-frontend-preview .wyl-message-center { min-width: 0; gap: 16px; }
body.wyl-frontend-preview .wyl-message-center [hidden] { display: none !important; }
body.wyl-frontend-preview .wyl-message-center .wyl-icon { width: 18px; height: 18px; flex: 0 0 18px; stroke-width: 1.8; }

/* Counts already live in the filters; the header explains the current unread state. */
body.wyl-frontend-preview .wyl-message-toolbar { min-height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px; margin: 0; padding: 0; border: 0; }
body.wyl-frontend-preview .wyl-message-toolbar-copy { min-width: 0; }
body.wyl-frontend-preview .wyl-message-toolbar-copy h1 { margin: 0; color: var(--wyl-ink); font: 650 24px/1.4 var(--wyl-ui-font); }
body.wyl-frontend-preview .wyl-message-toolbar-copy > p { margin: 4px 0 0; color: var(--wyl-muted); font-size: 13px; line-height: 1.6; white-space: normal; }
body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-overview { display: none; }
body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-hero-actions { grid-column: 2; margin: 0; gap: 10px; }
body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-hero-actions > a,
body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-read-all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border: 1px solid var(--wyl-line);
  border-radius: 8px;
  background: var(--wyl-surface);
  color: var(--wyl-ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
  transition: border-color 160ms ease-out, background-color 160ms ease-out, color 160ms ease-out;
}
body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-read-all { border-color: transparent; background: color-mix(in srgb, var(--wyl-jade) 9%, var(--wyl-surface)); color: var(--wyl-jade); }
body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-read-all:disabled { opacity: .65; cursor: wait; }

body.wyl-frontend-preview .wyl-message-filters { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 0; padding: 4px; border: 1px solid var(--wyl-line); border-radius: 12px; background: var(--wyl-surface); box-shadow: none; }
body.wyl-frontend-preview .wyl-message-filters a { min-width: 0; min-height: 44px; gap: 7px; padding: 8px 12px; border-radius: 8px; color: var(--wyl-muted); font-size: 14px; font-weight: 550; line-height: 1.5; white-space: nowrap; box-shadow: none; }
body.wyl-frontend-preview .wyl-message-filters a b { min-width: 24px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--wyl-surface-soft); color: var(--wyl-ink-2); font-size: 11px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
body.wyl-frontend-preview .wyl-message-filters a.is-active { background: color-mix(in srgb, var(--wyl-jade) 9%, var(--wyl-surface)); color: var(--wyl-jade); font-weight: 650; box-shadow: none; }
body.wyl-frontend-preview .wyl-message-filters a.is-active b { background: var(--wyl-surface); color: var(--wyl-jade); }

/* The message itself is the detail view: long titles and body text remain available. */
body.wyl-frontend-preview .wyl-message-list { overflow: hidden; border: 1px solid var(--wyl-line); border-radius: 12px; background: var(--wyl-surface); box-shadow: none; }
body.wyl-frontend-preview .wyl-message-list:not(:has(.wyl-message-item)) { display: none; }
body.wyl-frontend-preview .wyl-message-center .wyl-message-item { min-width: 0; min-height: 0; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; padding: 20px 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; scroll-margin-top: calc(var(--wyl-header-height) + 16px); }
body.wyl-frontend-preview .wyl-message-center .wyl-message-item + .wyl-message-item { border-top: 1px solid var(--wyl-line); }
body.wyl-frontend-preview .wyl-message-center .wyl-message-item::before { display: none; }
body.wyl-frontend-preview .wyl-message-center .wyl-message-item .wyl-message-type-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--wyl-surface-soft); color: var(--wyl-muted); }
body.wyl-frontend-preview .wyl-message-center .wyl-message-item.is-unread .wyl-message-type-icon { background: color-mix(in srgb, var(--wyl-jade) 9%, var(--wyl-surface)); color: var(--wyl-jade); }
body.wyl-frontend-preview .wyl-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--wyl-muted); font-size: 12px; line-height: 1.5; }
body.wyl-frontend-preview .wyl-message-meta span { color: var(--wyl-muted); font-weight: 500; letter-spacing: 0; }
body.wyl-frontend-preview .wyl-message-meta time::before { margin-right: 8px; color: var(--wyl-muted); }
body.wyl-frontend-preview .wyl-message-title { gap: 8px; margin-top: 5px; }
body.wyl-frontend-preview .wyl-message-item h2 { display: block; min-width: 0; max-width: 65ch; overflow: visible; margin: 0; color: var(--wyl-ink); font: 600 16px/1.6 var(--wyl-ui-font); white-space: normal; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
body.wyl-frontend-preview .wyl-message-item.is-unread h2 { font-weight: 650; }
body.wyl-frontend-preview .wyl-message-unread-dot { width: 6px; height: 6px; flex-basis: 6px; margin-top: 9px; background: var(--wyl-jade); box-shadow: none; }
body.wyl-frontend-preview .wyl-message-item p { display: block; max-width: 70ch; overflow: visible; margin: 8px 0 0; color: var(--wyl-ink-2); font-size: 14px; font-weight: 400; line-height: 1.75; white-space: pre-line; overflow-wrap: anywhere; -webkit-line-clamp: unset; }
body.wyl-frontend-preview .wyl-message-actions { min-width: 0; min-height: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; }
body.wyl-frontend-preview .wyl-message-actions > div { min-width: 0; display: flex; flex: 1 1 200px; flex-wrap: wrap; align-items: center; gap: 0 16px; }
body.wyl-frontend-preview .wyl-message-actions a { min-width: 0; min-height: 44px; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; padding: 8px 0; border-radius: 4px; color: var(--wyl-jade); font-size: 13px; font-weight: 550; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; text-underline-offset: 3px; }
body.wyl-frontend-preview .wyl-message-actions button { min-width: 118px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 7px; padding: 10px 12px; border: 1px solid var(--wyl-line); border-radius: 8px; background: var(--wyl-surface-soft); color: var(--wyl-ink-2); font-size: 13px; font-weight: 550; line-height: 1.5; white-space: nowrap; cursor: pointer; }
body.wyl-frontend-preview .wyl-message-actions button:disabled { opacity: .65; cursor: wait; }
body.wyl-frontend-preview .wyl-message-actions :is(a, button),
body.wyl-frontend-preview .wyl-message-empty a { scroll-margin-top: calc(var(--wyl-header-height) + 16px); scroll-margin-bottom: 20px; }
body.wyl-frontend-preview .wyl-message-filters a { scroll-margin-top: calc(var(--wyl-header-height) + 12px); }
body.wyl-frontend-preview .wyl-message-status { margin-top: 6px; color: var(--wyl-jade); font-size: 12px; line-height: 1.65; overflow-wrap: anywhere; }
body.wyl-frontend-preview .wyl-message-status.is-error { color: var(--wyl-message-danger); }
body.wyl-frontend-preview .wyl-message-item.is-leaving { opacity: 0; transform: translateY(-4px); }

body.wyl-frontend-preview .wyl-message-empty { min-height: 260px; padding: 32px 24px; border: 1px solid var(--wyl-line); border-radius: 12px; background: var(--wyl-surface); }
body.wyl-frontend-preview .wyl-message-empty > span { width: 44px; height: 44px; border-radius: 8px; background: var(--wyl-surface-soft); color: var(--wyl-muted); }
body.wyl-frontend-preview .wyl-message-empty h2 { margin-top: 16px; font: 650 18px/1.5 var(--wyl-ui-font); }
body.wyl-frontend-preview .wyl-message-empty p { max-width: 48ch; margin-top: 6px; color: var(--wyl-muted); font-size: 14px; line-height: 1.75; }
body.wyl-frontend-preview .wyl-message-empty a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 16px; padding: 10px 14px; border: 1px solid var(--wyl-line); border-radius: 8px; color: var(--wyl-jade); font-size: 13px; line-height: 1.5; }
body.wyl-frontend-preview .wyl-message-empty a[data-wyl-message-remaining] { border-color: transparent; background: var(--wyl-preview-action); color: var(--wyl-preview-action-ink); }
body.wyl-frontend-preview .wyl-message-pages { grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 12px; margin-top: 4px; }
body.wyl-frontend-preview .wyl-message-pages > div { min-width: 0; justify-content: safe center; gap: 6px; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--wyl-line) transparent; }
body.wyl-frontend-preview .wyl-message-pages :is(a, .current, .dots) { min-width: 44px; min-height: 44px; height: 44px; flex: 0 0 auto; padding: 0 12px; border: 1px solid var(--wyl-line); border-radius: 8px; background: var(--wyl-surface); color: var(--wyl-ink-2); font-size: 13px; font-weight: 500; line-height: 1.5; font-variant-numeric: tabular-nums; }
body.wyl-frontend-preview .wyl-message-pages .current { border-color: transparent; background: var(--wyl-preview-action); color: var(--wyl-preview-action-ink); font-weight: 650; }
body.wyl-frontend-preview .wyl-message-pages .dots { min-width: 20px; padding: 0; border: 0; background: transparent; color: var(--wyl-muted); }
body.wyl-frontend-preview .wyl-message-pages > :is(.prev, .next) { gap: 6px; }
body.wyl-frontend-preview .wyl-message-center :is(a, button):focus-visible { outline: 2px solid var(--wyl-jade); outline-offset: 3px; }
body.wyl-frontend-preview .wyl-message-filters a:focus-visible,
body.wyl-frontend-preview .wyl-message-pages a:focus-visible { outline-offset: -3px; }
@media (hover: hover) {
  body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-hero-actions > a:hover,
  body.wyl-frontend-preview .wyl-message-actions button:not(:disabled):hover,
  body.wyl-frontend-preview .wyl-message-pages a:hover,
  body.wyl-frontend-preview .wyl-message-empty a:hover { border-color: var(--wyl-jade); background: var(--wyl-surface-soft); color: var(--wyl-jade); }
  body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-read-all:not(:disabled):hover { border-color: transparent; background: color-mix(in srgb, var(--wyl-jade) 14%, var(--wyl-surface)); }
  body.wyl-frontend-preview .wyl-message-actions a:hover { color: var(--wyl-jade); text-decoration: underline; }
}
@media (max-width: 640px) {
  body.wyl-frontend-preview .wyl-account-page.is-messages { width: 100%; max-width: none; padding: 16px 12px 24px !important; }
  body.wyl-frontend-preview .wyl-message-center { gap: 16px; }
  body.wyl-frontend-preview .wyl-message-toolbar { min-height: 54px; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
  body.wyl-frontend-preview .wyl-message-toolbar-copy h1 { font-size: 22px; }
  body.wyl-frontend-preview .wyl-message-toolbar-copy > p { font-size: 12px; }
  body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-hero-actions { gap: 0; }
  body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-hero-actions > a { display: none; }
  body.wyl-frontend-preview .wyl-message-toolbar .wyl-message-read-all { min-height: 44px; padding: 10px 12px; font-size: 13px; }
  body.wyl-frontend-preview .wyl-message-filters { position: sticky; top: calc(var(--wyl-header-height) + 8px); z-index: 9; gap: 4px; margin: 0; padding: 4px; overflow: visible; }
  body.wyl-frontend-preview .wyl-message-filters a { min-width: 0; min-height: 44px; gap: 4px; padding: 8px 4px; font-size: 14px; }
  body.wyl-frontend-preview .wyl-message-filters a b { min-width: 22px; height: 20px; padding-inline: 4px; font-size: 11px; }
  body.wyl-frontend-preview .wyl-message-center .wyl-message-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 18px 16px; scroll-margin-top: calc(var(--wyl-header-height) + 78px); }
  body.wyl-frontend-preview .wyl-message-center .wyl-message-item .wyl-message-type-icon { width: 32px; height: 32px; border-radius: 8px; }
  body.wyl-frontend-preview .wyl-message-item h2 { font-size: 15px; line-height: 1.65; }
  body.wyl-frontend-preview .wyl-message-meta { gap: 4px 6px; }
  body.wyl-frontend-preview .wyl-message-meta time::before { margin-right: 6px; }
  body.wyl-frontend-preview .wyl-message-actions { gap: 8px 12px; }
  body.wyl-frontend-preview .wyl-message-actions > div { flex-basis: 124px; gap: 0 8px; }
  body.wyl-frontend-preview .wyl-message-actions button { min-width: 112px; margin-left: auto; padding-inline: 8px; }
  body.wyl-frontend-preview .wyl-message-actions :is(a, button),
  body.wyl-frontend-preview .wyl-message-empty a { scroll-margin-top: calc(var(--wyl-header-height) + 78px); scroll-margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
  body.wyl-frontend-preview .wyl-message-empty { min-height: 250px; padding: 28px 20px; }
  body.wyl-frontend-preview .wyl-message-pages { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 6px; }
  body.wyl-frontend-preview .wyl-message-pages > :is(.prev, .next) { width: 44px; min-width: 44px; padding: 0; }
  body.wyl-frontend-preview .wyl-message-pages :is(a, .current) { min-width: 44px; padding-inline: 10px; }
  body.wyl-frontend-preview .wyl-message-pages > :is(.prev, .next) span { display: none; }
}
@media (max-width: 360px) {
  body.wyl-frontend-preview .wyl-message-center .wyl-message-item { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding-inline: 12px; }
  body.wyl-frontend-preview .wyl-message-center .wyl-message-item .wyl-message-type-icon { width: 28px; height: 32px; }
  body.wyl-frontend-preview .wyl-message-actions > div { flex-basis: 100%; }
  body.wyl-frontend-preview .wyl-message-pages > div > .dots,
  body.wyl-frontend-preview .wyl-message-pages > div > a:first-child:has(+ .dots),
  body.wyl-frontend-preview .wyl-message-pages > div > .dots + a:last-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.wyl-frontend-preview .wyl-message-center :is(.wyl-message-item, .wyl-message-read-all, .wyl-message-filters a, .wyl-message-hero-actions > a) { transition: none; }
  body.wyl-frontend-preview .wyl-message-item.is-leaving { transform: none; }
}