/* 结构取自 SUMAX 的聊天内容列；颜色沿用两端既有变量，不替换品牌与客服工作台主题。 */
:is(#message-list,#contact-thread) .chat-ui-message.message,
:is(#message-list,#contact-thread) .chat-ui-message.chat-message{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:10px;width:100%;max-width:100%;margin:0 0 18px}
:is(#message-list,#contact-thread) .chat-ui-own{flex-direction:row-reverse}
.chat-sender-avatar{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;margin-top:22px;border:1px solid var(--line,#dcd7ce);border-radius:50%;background:var(--surface,#fff);color:var(--muted,#625c53);font:600 12px/1.2 Manrope,sans-serif}
.chat-ui-own>.chat-sender-avatar{background:var(--wash,#f0ece4)}
.chat-message-stack{display:flex;flex-direction:column;align-items:flex-start;min-width:0;max-width:calc(100% - 86px)}
#message-list .chat-message-stack{max-width:min(78%,620px)}
.chat-ui-own>.chat-message-stack{align-items:flex-end}
.chat-message-content{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:fit-content;min-width:0;max-width:100%}
.chat-ui-own .chat-message-content{align-items:flex-end}
.chat-message-content:focus-visible{outline:2px solid var(--accent,#765336);outline-offset:3px;border-radius:10px}
#message-list .message-meta,#contact-thread .chat-meta{max-width:100%;flex-wrap:wrap;gap:6px;line-height:1.5}
#message-list .message-meta .message-author,#contact-thread .chat-author{overflow-wrap:anywhere}
#message-list .chat-ui-message .message-body,#contact-thread .chat-ui-message .chat-text{box-shadow:none;padding:10px 13px;line-height:1.55;border-radius:4px 12px 12px 12px}
#message-list .chat-ui-own .message-body,#contact-thread .chat-ui-own .chat-text{border-radius:12px 4px 12px 12px}
#message-list .chat-message-content>.care-message-more,#contact-thread .chat-message-content>.chat-more{position:absolute;top:0;right:-44px;left:auto;width:40px;height:40px;min-height:40px;border:0;background:transparent}
#message-list .chat-ui-own .care-message-more,#contact-thread .chat-ui-own .chat-more{right:auto;left:-44px}
/* 操作入口贴着实际气泡，不再按整行或长署名定位。引用条和气泡同属于一个内容组。 */
#message-list .chat-message-content>.care-message-more:hover,#contact-thread .chat-message-content>.chat-more:hover{background:var(--wash,#eeeae3)}
#message-list .message-quote,#contact-thread .chat-quoted{max-width:100%;margin:0 0 6px;padding:8px 10px;border-radius:7px}
.care-message-actions,.chat-action-panel{width:168px;padding:4px;border-radius:10px;box-shadow:0 12px 30px #18251f24}
.care-message-actions:has(.care-action-note),.chat-action-panel:has(.chat-action-note){width:min(300px,calc(100% - 16px))}
.care-message-actions button,.chat-action-panel button{min-height:44px;font-size:13px}
#message-list,#contact-thread{overflow-anchor:none;scroll-behavior:auto}
/* 客户输入区复用 SUMAX 的独立工具栏，输入与附件不抢一行宽度；仍保留原来的发送锁。 */
.contact-composer{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px 16px}
.contact-composer-tools{display:flex;align-items:center;justify-content:space-between;gap:10px}
.contact-composer-tools>label{font-size:13px;font-weight:600;color:var(--ink,#302a23)}
.contact-composer-actions{display:flex;align-items:center;gap:8px}
.contact-composer .contact-send{display:flex;gap:7px;width:auto;height:40px;min-height:40px;padding:0 12px;border-radius:8px;font:600 13px/1.4 Manrope,sans-serif}
.contact-composer .contact-send svg{width:16px;height:16px}
.contact-composer .contact-send:hover{transform:none}
.contact-composer .chat-attachments-add{height:40px;width:40px;min-width:40px;border-color:transparent}
.contact-composer textarea{flex:none;width:100%;box-sizing:border-box;min-height:70px;max-height:120px;border-radius:8px;margin:0;font-size:14px}
.contact-quote-row,.contact-attachment-tray{flex:none;width:100%}
.contact-quote{border-radius:7px;padding:6px 8px}.contact-quote-label{margin:0;font-size:12px;letter-spacing:0}
/* 发送后的图片逐张竖排，最多232px并保留比例；引用预览继续使用小缩略图。 */
.chat-attachments-message:not(.chat-attachments-compact) .chat-attachments-image{max-height:232px;max-width:min(232px,100%)}
/* 无正文的附件消息把整条操作放在署名旁，与第一张图片的单项菜单分开。 */
#contact-thread .chat-message-content:has(>.chat-attachments-message):not(:has(>.chat-text))>.chat-more,
#message-list .chat-message-content:has(.message-file-content):not(:has(.message-body))>.care-message-more{top:-42px}
@media(pointer:coarse){
  #message-list .chat-message-content>.care-message-more,#contact-thread .chat-message-content>.chat-more{width:44px;height:44px}
  .contact-composer .contact-send,.contact-composer .chat-attachments-add{height:44px;min-height:44px}
}
@media(max-width:700px){
  .contact-composer textarea{font-size:16px}
  #contact-thread .chat-message-stack{max-width:calc(100% - 82px)}
  #contact-thread .chat-ui-message{gap:8px}
  .contact-composer{padding:10px 12px}
}