/* 张玉航的星空小站 · AI 管家聊天页样式 v3
   路径：assets/css/page-ai-chat.css
   版本：v1.6.14 (2026-09-17)
   完全重制：模型切换器 / 操作栏 / Markdown 渲染 / Toast
   布局：绝对定位（避免 flex 高度异常），三主题变量跟随 */

/* ========== 兜底变量（v1.6.14 同版补丁 2026-09-17）==========
   根因：--btn-bg/--btn-text/--btn-border/--card-bg/--card-border/--accent
   只在 html[data-theme="xxx"] 里定义，main.css :root 未定义。
   若 theme.js 未设 data-theme（如加载时序、storage 异常），按钮/气泡/卡片全变透明空壳。
   此 :root 兜底优先级 (0,1,0) 低于 html[data-theme] (0,1,1)，主题切换后自动被覆盖。 */
:root{
  --btn-bg: linear-gradient(135deg, #4a3a8a 0%, #7b5ea7 50%, #9370db 100%);
  --btn-text: #fff8e7;
  --btn-border: 1px solid rgba(147,112,219,.4);
  --btn-hover: linear-gradient(135deg, #5a4a9a 0%, #8b6eb7 50%, #a380eb 100%);
  --btn-hover-shadow: 0 4px 14px rgba(147,112,219,.4);
  --card-bg: rgba(30,25,60,.85);
  --card-border: 1px solid rgba(147,112,219,.3);
  --accent: #ffd700;
}

/* ========== 重置 main.css 全局 button !important 规则（v1.6.14 同版补丁 2026-09-17）==========
   根因：main.css 第 569 行 html[data-theme] button 用 !important 给所有 button 设了
   border-radius:28px / padding:14px 32px / border:3px / overflow:hidden / text-shadow 等，
   覆盖了 AI 页面按钮样式，导致按钮变形成大矩形、图标/文字被 padding 挤压不可见。
   此重置用 html[data-theme] body button（优先级 0,1,3 高于 main.css 的 0,1,2）+ !important 覆盖。
   之后 AI 按钮规则用 html[data-theme] 前缀 + !important 重新设置自己的样式。 */
html[data-theme] body button{
  border-radius:0 !important;
  padding:0 !important;
  border:none !important;
  overflow:visible !important;
  text-shadow:none !important;
  box-shadow:none !important;
  letter-spacing:normal !important;
  font-weight:inherit !important;
}


/* ========== 根布局 ========== */
html,body{
  margin:0; padding:0; height:100%; width:100%; overflow:hidden;
}
body{
  position:relative;
  background:var(--bg-primary);
  color:var(--text-primary);
  font-family:inherit;
}

/* ========== 顶部栏 ========== */
.ai-topbar{
  position:absolute; top:0; left:0; right:0; z-index:100;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  padding:10px 14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  backdrop-filter:blur(12px);
}
.ai-topbar-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.ai-topbar-right{ display:flex; align-items:center; gap:8px; flex-shrink:0; }html[data-theme] .ai-icon-btn {
  width:36px; height:36px; border-radius: 50% !important;
  background:var(--surface); color:var(--text-primary);
  border: var(--btn-border) !important;
  box-shadow: none !important; outline:none;
  cursor:pointer; font-family:inherit;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s, background .18s, box-shadow .18s;
  flex-shrink:0;
}html[data-theme] .ai-icon-btn:hover {
  background:var(--surface-hover);
  transform:translateY(-1px);
  box-shadow: var(--btn-hover-shadow) !important;
}html[data-theme] .ai-icon-btn:active { transform:scale(.92); }html[data-theme] .ai-icon-btn svg { display:block; }html[data-theme] .ai-back { background:var(--btn-bg); color:var(--btn-text); }html[data-theme] .ai-back:hover { background:var(--btn-bg); box-shadow: var(--btn-hover-shadow) !important; }

.ai-brand-ava{
  width:38px; height:38px; border-radius:50%;
  object-fit:cover; border:2px solid var(--border);
  box-shadow:0 2px 8px var(--shadow); flex-shrink:0;
}
.ai-brand-info{ display:flex; flex-direction:column; line-height:1.25; min-width:0; }
.ai-brand-name{
  font-size:.92rem; font-weight:700;
  color:var(--text-primary);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ai-brand-status{
  font-size:.66rem; color:var(--text-secondary);
  display:flex; align-items:center; gap:5px;
}
.ai-brand-status.ok{ color:var(--accent-green); }
.ai-brand-status.err{ color:var(--accent-red); }

.dot-pulse{
  width:7px; height:7px; border-radius:50%;
  background:var(--text-secondary);
  animation:dotPulse 1.6s infinite;
  flex-shrink:0;
}
.dot-pulse.ok{ background:var(--accent-green); animation:dotPulseGreen 1.6s infinite; }
.dot-pulse.err{ background:var(--accent-red); animation:dotPulseRed 1.6s infinite; }
@keyframes dotPulse{
  0%,100%{ opacity:.35; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.15); }
}
@keyframes dotPulseGreen{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); box-shadow:0 0 6px var(--accent-green); } }
@keyframes dotPulseRed{ 0%,100%{ opacity:.35; transform:scale(.8); } 50%{ opacity:1; transform:scale(1.15); box-shadow:0 0 6px var(--accent-red); } }

/* ========== 模型选择器 ========== */
.ai-model-switcher{ position:relative; }html[data-theme] .ai-model-btn {
  display:flex; align-items:center; gap:6px;
  padding: 6px 10px 6px 8px !important; border-radius: 22px !important;
  background:var(--surface); color:var(--text-primary);
  border: var(--btn-border) !important;
  cursor:pointer; font-family:inherit;
  transition:background .18s, transform .18s, box-shadow .18s;
}html[data-theme] .ai-model-btn:hover { background:var(--surface-hover); transform:translateY(-1px); }html[data-theme] .ai-model-btn.open { background:var(--surface-hover); box-shadow: var(--btn-hover-shadow) !important; }
.ai-model-emoji{ font-size:1rem; line-height:1; }
.ai-model-label{ display:flex; align-items:center; gap:4px; }
.ai-model-name{
  font-size:.74rem; font-weight:600;
  max-width:88px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ai-model-caret{ display:flex; align-items:center; color:var(--text-secondary); transition:transform .2s; }html[data-theme] .ai-model-btn.open .ai-model-caret { transform:rotate(180deg); }html[data-theme] .ai-model-menu {
  position:absolute; top:calc(100% + 6px); right:0; z-index:150;
  min-width:200px;
  animation:menuIn .18s ease;
}
.ai-model-menu[hidden]{ display:none; }
@keyframes menuIn{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }html[data-theme] .ai-model-menu-inner {
  background:var(--card-bg);
  border: var(--card-border) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 28px var(--shadow) !important;
  padding: 5px !important;
  overflow: hidden !important;
}html[data-theme] .ai-model-opt {
  width:100%;
  display:flex; align-items:center; gap:10px;
  padding: 9px 10px !important; border-radius: 10px !important;
  background:transparent; color:var(--text-primary);
  border: none !important; outline:none; cursor:pointer;
  font-family:inherit; text-align:left;
  transition:background .14s;
}html[data-theme] .ai-model-opt:hover { background:var(--surface-hover); }html[data-theme] .ai-model-opt.active { background:var(--surface); }
.opt-emoji{ font-size:1.15rem; line-height:1; flex-shrink:0; }
.opt-body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.opt-name{ font-size:.82rem; font-weight:600; color:var(--text-primary); }
.opt-desc{ font-size:.66rem; color:var(--text-secondary); }
.opt-check{
  font-size:.85rem; color:var(--accent);
  opacity:0; flex-shrink:0;
}html[data-theme] .ai-model-opt.active .opt-check { opacity:1; }

/* ========== 主区域 ========== */
/* v1.7.0 (2026-09-23)：bottom 从 110px → 0，让输入框贴屏幕底部，
   同时把 .chat-input-area 从 absolute 改为 flex 参与布局，输入区自然占据
   底部，.chat-scroll 用 flex:1 撑满剩余空间。 */
.ai-chat-main{
  position:absolute;
  top:70px; left:0; right:0; bottom:0;
  padding:0 12px;
  display:flex; flex-direction:column;
  overflow:hidden;
}

.chat-scroll{
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:14px 4px 20px;   /* v1.7.0: 底部 8→20px，最后一条消息与输入框留呼吸空间 */
  scroll-behavior:smooth;
}
.chat-scroll::-webkit-scrollbar{ width:6px; }
.chat-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:3px; }
.chat-scroll::-webkit-scrollbar-track{ background:transparent; }

.chat-messages{
  display:flex; flex-direction:column; gap:14px;
  max-width:820px; margin:0 auto; width:100%;
}

/* ========== 欢迎区 ========== */
.chat-welcome{
  max-width:820px; margin:30px auto 0; width:100%;
  padding:0 4px;
}
.welcome-inner{
  background:var(--card-bg);
  border:var(--card-border);
  border-radius:22px;
  box-shadow:0 8px 28px var(--shadow);
  padding:28px 24px;
  text-align:center;
  animation:welcomeIn .4s ease;
}
@keyframes welcomeIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
.welcome-ava{
  width:64px; height:64px; margin:0 auto 14px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--btn-bg), var(--surface-hover));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px var(--shadow);
}
.welcome-emoji{ font-size:2rem; }
.welcome-title{
  font-size:1.1rem; font-weight:700;
  color:var(--text-primary);
  margin:0 0 8px; line-height:1.4;
}
.welcome-desc{
  font-size:.82rem; color:var(--text-secondary);
  line-height:1.6; margin:0 0 18px;
  max-width:520px; margin-left:auto; margin-right:auto;
}
.welcome-features{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  margin-bottom:22px;
}
.feat-pill{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:14px;
  background:var(--surface); color:var(--text-primary);
  font-size:.72rem; font-weight:500;
  border:var(--btn-border);
}
.feat-icon{ font-size:.85rem; }
.welcome-quick{ margin-top:6px; }
.quick-label{
  font-size:.74rem; color:var(--text-secondary);
  margin-bottom:10px; text-align:left;
}
.quick-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
}html[data-theme] .quick-card {
  display:flex; align-items:center; gap:8px;
  padding: 11px 12px !important; border-radius: 14px !important;
  background:var(--surface); color:var(--text-primary);
  border: var(--btn-border) !important;
  cursor:pointer; font-family:inherit;
  text-align:left;
  transition:background .16s, transform .16s, box-shadow .16s;
}html[data-theme] .quick-card:hover {
  background:var(--surface-hover);
  transform:translateY(-2px);
  box-shadow: var(--btn-hover-shadow) !important;
}html[data-theme] .quick-card:active { transform:scale(.97); }
.qc-icon{ font-size:1.15rem; flex-shrink:0; }
.qc-text{ font-size:.8rem; font-weight:500; }

/* ========== 消息气泡 ========== */
.msg{
  display:flex; gap:10px; align-items:flex-start;
  animation:msgIn .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes msgIn{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}
.msg-user{ flex-direction:row-reverse; }

.msg-ava{
  flex-shrink:0;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem;
  background:var(--card-bg);
  border:var(--card-border);
  box-shadow:0 2px 8px var(--shadow);
}
.msg-ava.user-ava{
  background:var(--btn-bg); color:var(--btn-text);
  font-weight:700; font-size:.78rem;
}
.msg-ava.ai-ava{ background:var(--card-bg); }
.msg-ava.err-ava{ background:rgba(255,90,120,.16); }

.msg-body{
  flex:1; min-width:0; max-width:calc(100% - 48px);
  overflow:hidden;   /* v1.7.0: 防止气泡撑破容器 */
}
.msg-user .msg-body{ display:flex; flex-direction:column; align-items:flex-end; }

.msg-bubble{
  padding:11px 15px; border-radius:18px;
  font-size:.88rem; line-height:1.6;
  word-break:break-word;
  overflow-wrap:break-word;   /* v1.7.0: 双保险，长单词/URL 强制换行 */
  overflow:hidden;
}
.msg-user .msg-bubble{
  background:var(--btn-bg); color:var(--btn-text);
  border-top-right-radius:6px;
  box-shadow:0 3px 10px var(--shadow);
  white-space:pre-wrap;
}
.msg-ai .msg-bubble{
  background:var(--card-bg); color:var(--text-primary);
  border:var(--card-border);
  border-top-left-radius:6px;
  box-shadow:0 2px 8px var(--shadow);
}
.msg-error .msg-bubble{
  background:rgba(255,90,120,.1);
  color:var(--accent-red);
  border:1px solid var(--accent-red);
  border-top-left-radius:6px;
  font-size:.84rem;
}

/* ========== Markdown 渲染 ========== */
.msg-ai .msg-bubble .md-p{ margin:0 0 8px; }
.msg-ai .msg-bubble .md-p:last-child{ margin-bottom:0; }
.msg-ai .msg-bubble .md-h1{ font-size:1.05rem; font-weight:700; margin:10px 0 6px; }
.msg-ai .msg-bubble .md-h2{ font-size:.98rem; font-weight:700; margin:8px 0 4px; }
.msg-ai .msg-bubble .md-h3{ font-size:.92rem; font-weight:600; margin:6px 0 4px; }
.msg-ai .msg-bubble .md-ul, .msg-ai .msg-bubble .md-ol{
  margin:6px 0; padding-left:22px;
}
.msg-ai .msg-bubble .md-ul{ list-style:disc; }
.msg-ai .msg-bubble .md-ol{ list-style:decimal; }
.msg-ai .msg-bubble .md-ul li, .msg-ai .msg-bubble .md-ol li{
  margin:3px 0; font-size:.86rem; line-height:1.55;
}
.msg-ai .msg-bubble .md-bq{
  margin:6px 0; padding:6px 12px;
  border-left:3px solid var(--accent);
  background:var(--surface);
  border-radius:0 8px 8px 0;
  color:var(--text-secondary);
  font-size:.84rem;
}
.msg-ai .msg-bubble .md-strong{ font-weight:700; color:var(--text-primary); }
.msg-ai .msg-bubble .md-em{ font-style:italic; }
.msg-ai .msg-bubble .md-icode{
  padding:1px 6px; border-radius:5px;
  background:var(--surface); color:var(--accent);
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:.84rem;
}
.msg-ai .msg-bubble .md-code{
  margin:8px 0; padding:12px 14px;
  background:var(--surface);
  border:var(--card-border);
  border-radius:10px;
  overflow-x:auto;
}
.msg-ai .msg-bubble .md-code code{
  font-family:'SF Mono',Menlo,Consolas,monospace;
  font-size:.8rem; line-height:1.5;
  color:var(--text-primary);
  white-space:pre;
}
.msg-ai .msg-bubble .md-a{
  color:var(--accent); text-decoration:underline;
  text-underline-offset:2px;
}

/* ========== 操作栏 ========== */
.msg-actions{
  display:flex; gap:2px; margin-top:5px;
  opacity:0; transition:opacity .18s;
}
.msg:hover .msg-actions{ opacity:1; }
.msg-user .msg-actions{ justify-content:flex-end; }html[data-theme] .msg-action-btn {
  width:26px; height:26px; border-radius: 8px !important;
  background:transparent; color:var(--text-secondary);
  border: none !important; outline:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .14s, color .14s, transform .14s;
}html[data-theme] .msg-action-btn:hover { background:var(--surface-hover); color:var(--text-primary); }html[data-theme] .msg-action-btn:active { transform:scale(.9); }html[data-theme] .msg-action-btn.feedback.up.active { color:var(--accent-green); background:rgba(76,217,100,.12); }html[data-theme] .msg-action-btn.feedback.down.active { color:var(--accent-red); background:rgba(255,90,120,.12); }

.msg-meta{
  font-size:.66rem; color:var(--text-secondary);
  margin-top:4px; padding:0 4px;
}
.msg-user .msg-meta{ text-align:right; }

/* ========== 打字指示器 ========== */
.msg-typing .typing-bubble{
  padding:13px 16px;
  display:flex; gap:5px; align-items:center;
}
.dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--text-secondary);
  animation:dotBounce 1.4s infinite;
}
.dot:nth-child(2){ animation-delay:.16s; }
.dot:nth-child(3){ animation-delay:.32s; }
@keyframes dotBounce{
  0%,80%,100%{ transform:translateY(0); opacity:.4; }
  40%{ transform:translateY(-6px); opacity:1; }
}

/* ========== 输入区 ========== */
/* v1.7.0 (2026-09-23)：从 absolute 改为 flex 参与布局，
   让输入框自然贴屏幕底部；.chat-scroll 用 flex:1 自动撑满剩余空间。
   原来 absolute + bottom:0 相对 .ai-chat-main，而 .ai-chat-main bottom:110px，
   导致输入框实际距离屏幕底部有 110px 空隙。现改为 flex 布局彻底贴底。 */
.chat-input-area{
  flex-shrink:0;
  margin-top:8px;
  padding:10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--card-bg);
  border-top:1px solid var(--border);
}
.chat-input-wrap{ max-width:820px; margin:0 auto; width:100%; }
.chat-input-box{
  display:flex; gap:8px; align-items:flex-end;
  background:var(--surface);
  border:var(--btn-border);
  border-radius:20px;
  padding:5px 5px 5px 14px;
  transition:border-color .18s, box-shadow .18s;
}
.chat-input-box:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(255,255,255,.05);
}
#chatInput{
  flex:1; resize:none; border:none; outline:none;
  background:transparent; color:var(--text-primary);
  padding:8px 0;
  font-size:.9rem; font-family:inherit; line-height:1.5;
  max-height:140px; min-height:32px;
}
#chatInput::placeholder{ color:var(--text-secondary); opacity:.7; }
#chatInput:disabled{ opacity:.55; cursor:not-allowed; }html[data-theme] .ai-send {
  flex-shrink:0;
  width:40px; height:40px; border-radius: 50% !important;
  background:var(--btn-bg); color:var(--btn-text);
  border: none !important; outline:none; box-shadow: none !important;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .18s, box-shadow .18s, opacity .18s;
}html[data-theme] .ai-send:hover:not(:disabled) {
  transform:scale(1.08); box-shadow: var(--btn-hover-shadow) !important;
}html[data-theme] .ai-send:active:not(:disabled) { transform:scale(.92); }html[data-theme] .ai-send:disabled { opacity:.4; cursor:not-allowed; }html[data-theme] .ai-send.loading svg { animation:sendSpin .8s linear infinite; }
@keyframes sendSpin{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } }

.chat-input-meta{
  display:flex; align-items:center; gap:6px;
  margin-top:5px; padding:0 8px;
  font-size:.66rem; color:var(--text-secondary);
}
.meta-divider{ opacity:.5; }
.meta-spacer{ flex:1; }
.meta-hint{ color:var(--accent); font-weight:600; }
#charCount.warn{ color:var(--accent-red); }
#rateInfo.rate-wait{ color:var(--accent-red); font-weight:600; }

/* ========== 登录锁屏 ========== */
.lock-screen{
  display:none; position:fixed; inset:0; z-index:200;
  background:radial-gradient(ellipse at 50% 40%,rgba(168,85,247,.18),rgba(10,8,28,.94) 70%);
  backdrop-filter:blur(10px);
  align-items:center; justify-content:center;
}
.lock-screen.show{ display:flex; }
.lock-card{
  max-width:380px; margin:20px; padding:36px 30px;
  background:var(--card-bg); border:var(--card-border);
  border-radius:24px; text-align:center;
  box-shadow:0 12px 40px var(--shadow);
}
.lock-icon{ font-size:3rem; margin-bottom:14px; }
.lock-card h3{ font-size:1.15rem; font-weight:700; margin:0 0 10px; color:var(--text-primary); }
.lock-card p{ font-size:.86rem; line-height:1.6; color:var(--text-secondary); margin:0 0 20px; }html[data-theme] .lock-btn {
  display:inline-block; padding: 11px 26px !important;
  background:var(--btn-bg); color:var(--btn-text);
  border: none !important; outline:none; border-radius: 22px !important;
  font-size:.88rem; font-weight: 600 !important; text-decoration:none;
  transition:transform .15s, box-shadow .15s;
}html[data-theme] .lock-btn:hover { transform:translateY(-2px); box-shadow: var(--btn-hover-shadow) !important; }

/* ========== Toast ========== */
.toast{
  position:fixed; bottom:130px; left:50%; transform:translateX(-50%) translateY(20px);
  z-index:300;
  background:var(--card-bg); color:var(--text-primary);
  border:var(--card-border);
  border-radius:20px;
  padding:9px 18px;
  font-size:.78rem; font-weight:500;
  box-shadow:0 6px 22px var(--shadow);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
  white-space:nowrap;
}
.toast.show{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* ========== 移动端 ========== */
@media (max-width:600px){
  .ai-topbar{ padding:8px 10px; gap:6px; }
  .ai-brand-ava{ width:34px; height:34px; }
  .ai-brand-name{ font-size:.84rem; }
  .ai-brand-status{ font-size:.6rem; }html[data-theme] .ai-icon-btn { width:32px; height:32px; }html[data-theme] .ai-model-btn { padding: 5px 8px 5px 7px !important; }
  .ai-model-name{ font-size:.68rem; max-width:60px; }
  .ai-model-emoji{ font-size:.9rem; }
  .ai-ver-badge{ display:none; }
  .ai-chat-main{ top:60px; bottom:0; }   /* v1.7.0: 输入区贴屏底 */
  .welcome-inner{ padding:20px 16px; }
  .welcome-ava{ width:54px; height:54px; }
  .welcome-emoji{ font-size:1.6rem; }
  .welcome-title{ font-size:.98rem; }
  .welcome-desc{ font-size:.76rem; }
  .feat-pill{ font-size:.66rem; padding:4px 9px; }
  .quick-grid{ grid-template-columns:1fr; }
  .qc-text{ font-size:.78rem; }
  .msg-bubble{ font-size:.84rem; padding:10px 13px; }
  .msg-ava{ width:30px; height:30px; font-size:.85rem; }
  .msg-body{ max-width:calc(100% - 42px); }
  .chat-input-area{ padding:8px 10px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .chat-input-meta{ font-size:.6rem; }
  .meta-hint{ display:none; }
  .toast{ bottom:120px; font-size:.72rem; padding:8px 14px; }
}

@media (max-width:380px){
  .ai-brand-ava{ width:30px; height:30px; }html[data-theme] .ai-icon-btn { width:30px; height:30px; }
  .ai-model-name{ max-width:48px; }
  .ai-chat-main{ top:55px; bottom:0; }
  .msg-ava{ width:28px; height:28px; }
  .msg-body{ max-width:calc(100% - 40px); }
}