/* Messages, Notifications and Search (Dashboard & Operations redesign). Classes are prefixed pui-msg-, pui-notif-, pui-search-. */

/* Messages: one bordered shell, conversation list left, thread right. */
.pui-msg-shell { width: 100%; box-sizing: border-box; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 640px; }
.pui-msg-heading { padding: 10px 16px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); }
.pui-msg-list .pui-search-input { width: 100%; }
.pui-msg-list { flex: 1 1 320px; max-width: 380px; border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.pui-msg-conv { padding: 12px 16px; border-top: 1px solid var(--border); cursor: pointer; align-items: flex-start; }
.pui-msg-conv:hover { background: var(--accent); }
.pui-msg-conv[aria-current="true"] { background: var(--tone-info-bg); }
.pui-msg-thread { display: flex; flex-direction: column; min-width: 0; }
.pui-msg-thread-head { padding: 14px 20px; border-bottom: 1px solid var(--border); align-items: center; }
.pui-msg-body { padding: 20px; background: var(--background); min-height: 0; max-height: 640px; }
.pui-msg-composer { padding: 12px 16px; border-top: 1px solid var(--border); }
.pui-msg-bubble { max-width: 72%; padding: 9px 12px; border-radius: 12px; line-height: 1.4; }
.pui-msg-bubble.in { background: var(--muted); border-bottom-left-radius: 4px; }
.pui-msg-bubble.out { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: 4px; }

/* Notifications: one card, day groups, a tone icon per alert. */
.pui-notif-list { max-width: 960px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pui-notif-day { padding: 10px 20px; background: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); border-top: 1px solid var(--border); }
.pui-notif-day:first-child { border-top: 0; }
.pui-notif-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--border); }
.pui-notif-day + .pui-notif-row { border-top: 1px solid var(--border); }
.pui-notif-row.unread { background: oklch(0.975 0.012 250); }
.pui-notif-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex: none; }
.pui-notif-icon.tone-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.pui-notif-icon.tone-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.pui-notif-icon.tone-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.pui-notif-icon.tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.pui-notif-icon.tone-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }

/* Search: grouped results in one card. */
.pui-search-input { height: 36px; background: var(--card); box-shadow: none; }
.pui-search-card { max-width: 960px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.pui-search-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground); border-top: 1px solid var(--border); }
.pui-search-group .cn-button { height: auto; padding: 0; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--foreground); }
.pui-search-result { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--border); color: var(--foreground); text-decoration: none; }
.sc-vstack > a.sc-link.pui-search-result { display: flex; width: 100%; }
a.pui-search-result:hover { background: var(--accent); text-decoration: none; }
.pui-tab-count { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--muted-foreground); background: var(--background); border-radius: 999px; padding: 1px 6px; }
.pui-search-result > .sc-hstack { flex: 1 1 auto; width: 100%; }
.pui-search-result .sc-vstack { gap: 0 !important; }

/* Chat fill (the page itself never scrolls; only the conversation list rows and the thread do). */
.pui-msg-shell { flex-wrap: wrap; }
.pui-msg-list-rows { flex: 1 1 auto; min-height: 0; }
.pui-page-fill .pui-msg-list-rows { overflow-y: auto; }
.pui-page-fill .pui-msg-list-rows > * { flex-shrink: 0; }
.sc-scroll-view.pui-msg-body { display: flex; flex-direction: column-reverse; }
.sc-scroll-view.pui-msg-body > * { flex: none; }
.pui-page-fill .pui-msg-composer { flex: none; }
.pui-page-fill .pui-msg-thread-head { flex: none; }
/* On narrow screens the panes stack and the page scrolls normally again. */
@media (max-width: 800px) {
  .pui-main-fill { overflow-y: auto; display: block; }
  .pui-page-fill { height: auto; overflow: visible; }
  .pui-page-fill .pui-msg-shell { flex-wrap: wrap; min-height: 0; }
  .pui-page-fill .pui-msg-list { max-width: none; flex-basis: 100%; max-height: 320px; }
  .pui-page-fill .pui-msg-thread { flex-basis: 100%; min-height: 480px; }
  .pui-page-fill .pui-msg-body { max-height: 420px; }
}
@media (max-width: 800px) { .pui-page-fill .pui-msg-list { border-right: 0; border-bottom: 1px solid var(--border); } }