/* /app/messages — direct messages. Same palette as shell.css / the Figma "Auth" frame:
   white cards, primary #4F46E5, brand #5F33E1, text #111827 / #64748B, borders #E7EAF2. */

.msg {
    display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px;
    height: calc(100vh - 64px); height: calc(100dvh - 64px); min-height: 420px;
}

/* thread list */
.msg__list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.msg__title { margin: 0 0 4px; }
.msg__threads { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.msg__thread {
    display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid transparent; border-radius: 12px;
    background: #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .05); text-decoration: none; color: inherit;
}
.msg__thread:hover { background: #F5F7FA; }
.msg__thread.is-active { border-color: #5F33E1; background: #EEE9FF; }
.msg__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: #EEE9FF; }
.msg__avatar--blank { display: flex; align-items: center; justify-content: center; background: #5F33E1; color: #fff; font-size: 15px; font-weight: 600; }
.msg__thread-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.msg__thread-top, .msg__thread-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.msg__thread-name { font-size: 14px; font-weight: 600; color: #111827; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__thread-time { flex: none; font-size: 12px; color: #94A3B8; }
.msg__thread-preview { font-size: 13px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__badge {
    flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #4F46E5; color: #fff; font-size: 11px; font-weight: 700;
}

/* chat */
.msg__chat {
    min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 12px; box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
}
.msg__placeholder { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.msg__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #E7EAF2; }
.msg__head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msg__head-sub { font-size: 12px; color: #64748B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg__author { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: #5F33E1; }
.msg__back { display: none; font-size: 20px; color: #4F46E5; text-decoration: none; }
.msg__head-name { font-size: 16px; font-weight: 600; color: #111827; text-decoration: none; }
.msg__head-name:hover { color: #4F46E5; }
.msg__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.msg__empty { margin: auto; }
.msg__row { display: flex; }
.msg__row.is-me { justify-content: flex-end; }
.msg__bubble { max-width: 72%; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: #F1F3F9; color: #111827; }
.msg__bubble.is-me { border-radius: 14px 14px 4px 14px; background: #4F46E5; color: #fff; }
.msg__text { margin: 0; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__time { display: block; margin-top: 2px; font-size: 11px; text-align: right; opacity: .65; }
.msg__notice { margin: 0 16px 8px; }
.msg__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px; border-top: 1px solid #E7EAF2; }
.msg__input {
    flex: 1; min-width: 0; padding: 10px 12px; box-sizing: border-box; resize: none; background: #fff;
    border: 1px solid #D7DFEA; border-radius: 8px; font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.4; color: #111827;
    transition: border-color .2s, box-shadow .2s;
}
.msg__input:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.msg__send { margin-top: 0; }
.msg__send:disabled { opacity: .5; cursor: default; }

@media screen and (max-width: 720px) {
    .msg { grid-template-columns: 1fr; height: calc(100vh - 40px); height: calc(100dvh - 40px); }
    /* one pane at a time: the list, or the open chat */
    .msg .msg__chat { display: none; }
    .msg.has-chat .msg__list { display: none; }
    .msg.has-chat .msg__chat { display: flex; }
    .msg__back { display: inline; }
    .msg__bubble { max-width: 86%; }
}