/* css/modules/msg.css: the .msg-* module — split out of css/app.css by #360's sibling stage (#362).
   Load order is core.css, then every modules/*.css alphabetically; rules here
   are in their original relative order, and no selector in this file appears in
   any other (asserted in tests/css-split-check.js). */

.msg-wrap{display:flex;gap:16px;height:calc(100vh - 170px);min-height:440px}
.msg-list{width:300px;flex:none;overflow:auto;padding:8px}
.msg-drv{display:block;width:100%;text-align:left;background:none;padding:10px 12px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.msg-drv:hover{background:#f5f8fd}
.msg-drv.is-active{background:#eef4ff;border-color:var(--blue)}
.msg-drv__top{display:flex;align-items:center;gap:8px}
.msg-drv__top b{font-size:14px}
.msg-unread{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:900;min-width:18px;height:18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.msg-drv__sub{color:var(--muted);font-size:12px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-thread{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden}
.msg-thread__hd{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:10px}
.msg-thread__hd span{color:var(--muted);font-weight:700;font-size:13px}
.msg-scroll{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f7f9fc}
.msg-bub{max-width:74%;padding:9px 12px;border-radius:14px}
.msg-bub__t{font-size:14px;line-height:1.35}
.msg-bub__m{font-size:11px;font-weight:700;color:var(--muted-2);margin-top:3px}
.msg-bub--in{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-bub--out{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.msg-bub--out .msg-bub__m{color:rgba(255,255,255,.72)}
.msg-empty{margin:auto;color:var(--muted);font-weight:700}
.msg-compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.msg-compose input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit}
@media(max-width:820px){.msg-wrap{flex-direction:column;height:auto}.msg-list{width:auto;max-height:190px}.msg-thread{height:68vh}}