/* Messages: shell layout and the shared kit's pieces (avatar, presence,
   mentions, rich text). Everything uses the app's theme variables so it
   follows light, dark and midnight. */

.msg-page { position: relative; overflow: hidden; }
.msg-app { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--surface); color: var(--text); min-width: 0; }
.msg-loading { padding: 40px; color: var(--muted); }

.msg-top { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--bg); }
.msg-top-gap { flex: 1; }
.msg-search { flex: 0 1 560px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); }
.msg-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.msg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; }
.msg-me { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 6px; }
.msg-top::after { content: ''; flex: 1; }

.msg-body { flex: 1; min-height: 0; display: flex; }
.msg-side { flex: none; width: 260px; border-right: 1px solid var(--line); overflow-y: auto; background: var(--bg); }
.msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.msg-panel { flex: none; width: 380px; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: var(--surface); }
.msg-panel[hidden] { display: none; }

@media (max-width: 1100px) { .msg-has-panel .msg-side { display: none; } }
@media (max-width: 820px) {
  .msg-side { width: 210px; }
  .msg-panel { position: absolute; inset: 49px 0 0 auto; width: min(380px, 100%); z-index: 5; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18); }
}

/* avatars and presence */
.msg-avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 6px; font-weight: 700; overflow: visible; }
.msg-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.msg-presence { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--surface); background: transparent; box-shadow: inset 0 0 0 1.5px var(--dim); }
.msg-presence.active { background: var(--green); box-shadow: none; }
.msg-presence.dnd { background: var(--red); box-shadow: none; }

/* rich text */
.msg-rich { line-height: 1.46; word-break: break-word; }
.msg-rich .msg-line { min-height: 1.2em; }
.msg-rich code { padding: 1px 4px; border-radius: 4px; border: 1px solid var(--line); background: var(--hover); color: #c2410c; font-size: 0.92em; }
.msg-rich pre { margin: 4px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--hover); overflow-x: auto; }
.msg-rich pre code { border: 0; padding: 0; background: none; color: inherit; }
.msg-rich blockquote { margin: 4px 0; padding-left: 10px; border-left: 4px solid var(--line); color: var(--text); }
.msg-rich ul, .msg-rich ol { margin: 2px 0; padding-left: 22px; }
.msg-rich a { color: var(--brand); text-decoration: none; }
.msg-rich a:hover { text-decoration: underline; }
.msg-mention { border: 0; padding: 0 3px; border-radius: 4px; background: var(--brand-soft); color: var(--brand); font: inherit; cursor: pointer; }
.msg-mention.me, .msg-mention.all { background: #fde68a; color: #7c4a03; }
.msg-emoji { font-size: 1.15em; line-height: 1; }