.chat-row { display:grid; grid-template-columns:minmax(180px,.8fr) minmax(280px,2fr) auto; gap:22px; align-items:center; padding:20px; border-bottom:1px solid var(--line); color:inherit; text-decoration:none; }
.chat-row:last-child { border-bottom:0; }
.chat-row:hover { background:#f7f6ef; }
.chat-author { display:flex; flex-direction:column; }
.chat-author small,.chat-meta time,.message-bubble small { color:var(--muted); font-size:12px; }
.chat-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-meta { display:flex; align-items:center; gap:10px; }
.chat-meta span { min-width:27px; height:27px; padding:0 7px; display:grid; place-items:center; border-radius:999px; background:var(--lime); font-size:12px; font-weight:800; }
.chat-header { display:flex; align-items:center; gap:24px; margin-bottom:28px; }
.chat-header>div { flex:1; }
.chat-header h1 { margin-bottom:8px; }
.profile-link { color:var(--green); font-weight:800; text-decoration:none; }
.conversation { padding:24px; display:grid; gap:12px; }
.message-line { display:flex; }
.message-line.outgoing { justify-content:flex-end; }
.message-bubble { max-width:min(72%,720px); padding:12px 15px; border-radius:16px 16px 16px 4px; background:#ebe8dd; }
.outgoing .message-bubble { background:#d8f36a; border-radius:16px 16px 4px 16px; }
.message-bubble p { margin:0 0 5px; white-space:pre-wrap; overflow-wrap:anywhere; }
.message-bubble small { display:block; text-align:right; }
.inbox-attachment { display:inline-block; margin:4px 0; padding:4px 9px; border-radius:999px; background:#fff9; color:var(--muted); font-size:12px; font-weight:700; }
.reply-form { position:sticky; bottom:16px; display:flex; align-items:flex-end; gap:12px; margin-top:18px; padding:14px; border-radius:18px; background:var(--ink); }
.reply-form textarea { flex:1; resize:vertical; min-height:52px; max-height:180px; padding:12px; border:0; border-radius:10px; font:inherit; }
@media(max-width:720px) { .chat-row { grid-template-columns:1fr auto; } .chat-preview { grid-column:1/-1; grid-row:2; } .chat-meta time { display:none; } .chat-header { align-items:flex-start; flex-direction:column; } .message-bubble { max-width:88%; } .reply-form { position:static; flex-direction:column; align-items:stretch; } }
