.chat-shell { width: min(1260px, calc(100% - 40px)); }
.chat-layout { display: grid; grid-template-columns: minmax(380px,.9fr) minmax(430px,1.1fr); }
.chat-editor,.chat-preview-pane { min-width: 0; padding: 26px; }
.chat-preview-pane { border-left: 1px solid var(--line); }
.avatar-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 18px; }
.avatar-upload { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; background: #fafcfd; cursor: pointer; font-size: 12px; }
.avatar-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.avatar-sample { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 42px; border-radius: 10px; background: var(--brand); color: #fff; font-weight: 850; }
.avatar-sample.self { background: #27a564; }
.message-compose { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #f8fafb; }
.message-list-head { display: flex; justify-content: space-between; margin: 22px 0 10px; font-size: 12px; }
.text-action { padding: 0; border: 0; background: transparent; color: var(--brand); font-size: 11px; font-weight: 800; }
.message-list { max-height: 330px; display: grid; gap: 8px; overflow-y: auto; }
.message-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.message-row > span { padding: 4px 7px; border-radius: 999px; background: #edf2f5; color: var(--muted); font-size: 9px; font-weight: 850; }
.message-row.self > span { background: #e9f8ef; color: #258050; }
.message-row p { margin: 0; overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.message-row button { width: 28px; height: 28px; border: 0; border-radius: 8px; background: #fff0f2; color: var(--danger); }
.phone-preview { width: min(100%,430px); margin: 18px auto 0; overflow: hidden; border: 8px solid #1b242c; border-radius: 30px; background: #ededed; box-shadow: 0 25px 60px rgba(13,31,47,.18); }
#chatCanvas { display: block; width: 100%; height: auto; }
@media (max-width:900px){.chat-layout{grid-template-columns:1fr}.chat-preview-pane{border-top:1px solid var(--line);border-left:0}.message-list{max-height:none}}
@media (max-width:600px){.chat-shell{width:min(100% - 24px,1260px)}.chat-editor,.chat-preview-pane{padding:18px}.avatar-fields{grid-template-columns:1fr}}