:root{--ws-topband-h:52px}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:var(--fp-font-body);color:var(--fp-color-text);line-height:1.55;background:var(--fp-color-bg);
  -webkit-font-smoothing:antialiased;overflow:hidden;
  height:100vh; /* dự phòng cho trình duyệt chưa hỗ trợ dvh */
  height:100dvh; /* Dynamic Viewport Height thật — tự trừ thanh địa chỉ mobile, input dock không còn bị đẩy khuất màn hình */
}
h1,h2,h3{font-family:var(--fp-font-heading);color:var(--fp-color-secondary);font-weight:700}
button{font-family:inherit;cursor:pointer;border:none;background:none}
textarea,input{font-family:inherit}

/* ===== Thanh định danh trên cùng — lối thoát luôn hiển thị ===== */
.ws-topband{
  height:var(--ws-topband-h);display:flex;align-items:center;justify-content:space-between;padding:0 18px;
  background:var(--fp-glass-bg);backdrop-filter:blur(var(--fp-blur-glass)) saturate(var(--fp-glass-sat));
  -webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(var(--fp-glass-sat));
  border-bottom:1px solid var(--fp-glass-border);
  flex-shrink:0; /* không bao giờ bị co lại khi thiếu chỗ — luôn neo top:0 vững chãi */
}
.ws-topband__back{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.ws-topband__mark{width:28px;height:28px;border-radius:9px;flex-shrink:0;background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.ws-topband__name{font-size:13.5px;font-weight:700;color:var(--fp-color-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-topband__home{font-size:12.5px;font-weight:700;color:var(--fp-color-primary);text-decoration:none;white-space:nowrap;flex-shrink:0}
.ws-topband__home:hover{text-decoration:underline}
@media (max-width:640px){.ws-topband__name{display:none}}

/* Admin Bar của WordPress đã bị tắt TOÀN CỤC cho mọi trang frontend qua
   filter 'show_admin_bar' trong functions.php (kể cả Super Admin) — nên
   KHÔNG còn nhánh CSS bù trừ ".admin-bar .ws-shell{...}" nào ở đây, và cũng
   không cần lặp lại việc tắt admin bar riêng cho trang này nữa. Toàn màn
   hình luôn là 100dvh trừ đúng chiều cao thanh định danh --ws-topband-h. */
.ws-shell{
  display:flex;position:relative;overflow:hidden;
  height:calc(100vh - var(--ws-topband-h));
  height:calc(100dvh - var(--ws-topband-h));
}

/* ============ SIDEBAR ============ */
.ws-sidebar{
  width:266px;flex-shrink:0;background:var(--fp-glass-bg);backdrop-filter:blur(var(--fp-blur-glass)) saturate(var(--fp-glass-sat));
  -webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(var(--fp-glass-sat));
  border-right:1px solid var(--fp-glass-border);display:flex;flex-direction:column;
  transition:width .35s var(--fp-ease), transform .35s var(--fp-ease);
}
.ws-shell.sidebar-collapsed .ws-sidebar{width:72px}
.sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;flex-shrink:0}
.sidebar-brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--fp-color-secondary);white-space:nowrap;overflow:hidden}
.sidebar-brand .mark{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:700;flex-shrink:0}
.ws-shell.sidebar-collapsed .sidebar-brand span{display:none}
.icon-btn{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--fp-color-text-muted);font-size:15px;flex-shrink:0;transition:background .2s ease;
}
.icon-btn:hover{background:rgba(28,61,58,.06)}
.sidebar-toggle-icon{transition:transform .35s var(--fp-ease)}
.ws-shell.sidebar-collapsed .sidebar-toggle-icon{transform:rotate(180deg)}

.btn-new-chat{
  margin:0 14px 12px;padding:11px;border-radius:14px;background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));
  color:#fff;font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 8px 18px rgba(13,148,136,.2);white-space:nowrap;overflow:hidden;
}
.ws-shell.sidebar-collapsed .btn-new-chat span{display:none}

.sidebar-search{padding:0 14px 12px;flex-shrink:0}
.ws-shell.sidebar-collapsed .sidebar-search{display:none}
.sidebar-search input{
  width:100%;padding:9px 12px;border-radius:11px;border:1px solid var(--fp-color-border);background:#fff;font-size:13px;
}
.sidebar-search input:focus{outline:none;border-color:var(--fp-color-primary)}

.sidebar-groups{flex:1;overflow-y:auto;padding:0 10px 14px}

.sidebar-empty{
  margin:20px 10px;padding:28px 18px;text-align:center;border-radius:16px;
  background:rgba(255,255,255,0.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.25);box-shadow:0 8px 32px 0 rgba(0,0,0,0.05);
}
.sidebar-empty__icon{display:block;font-size:26px;margin-bottom:10px}
.sidebar-empty p{font-size:12px;color:var(--fp-color-text-muted);line-height:1.6;margin:0}
.ws-shell.sidebar-collapsed .sidebar-groups{display:none}
.group-label{font-size:10.5px;font-weight:700;color:var(--fp-color-text-muted);text-transform:uppercase;letter-spacing:.04em;padding:10px 8px 6px}
.convo-item{
  display:block;width:100%;text-align:left;padding:9px 10px;border-radius:11px;font-size:13px;color:var(--fp-color-text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s ease;
}
.convo-item:hover{background:rgba(28,61,58,.06)}
.convo-item.is-active{background:rgb(61 139 130/12%);color:var(--fp-color-primary);font-weight:600}
.convo-item .snippet{display:block;font-size:11px;color:var(--fp-color-text-muted);font-weight:400;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo-item.is-active .snippet{color:var(--fp-color-primary);opacity:.7}

/* ============ MAIN ============ */
.ws-main{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}
.ws-topbar{
  height:var(--fp-header-h);flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 18px;
  border-bottom:1px solid var(--fp-color-border);background:rgba(255,255,255,.5);backdrop-filter:blur(10px);
}
.only-mobile{display:none}
.topbar-title{flex:1;min-width:0}
.topbar-title h1{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-model{font-size:11px;color:var(--fp-color-text-muted);display:inline-flex;align-items:center;gap:5px}

/* ===== Huy hiệu hạng tài khoản — CHỈ hiển thị trên mobile (xem .only-mobile) ===== */
.tier-badge{
  flex-shrink:0;font-size:10.5px;font-weight:700;padding:6px 11px;border-radius:999px;white-space:nowrap;
  background:rgba(255,255,255,0.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.25);box-shadow:0 4px 14px rgba(0,0,0,.05);
}
.tier-badge--guest{color:#92620a;background:rgb(245 158 11/14%);border-color:rgb(245 158 11/28%)}
.tier-badge--member{color:#1d4ed8;background:rgb(37 99 235/12%);border-color:rgb(37 99 235/26%)}
.tier-badge--pro{
  color:#0f5c52;background:linear-gradient(135deg,rgb(13 148 136/16%),rgb(217 164 6/16%));
  border-color:rgb(13 148 136/32%);
}
.topbar-model::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--fp-color-success)}

.ws-conversation{flex:1;overflow-y:auto;padding:26px 18px 10px;display:flex;flex-direction:column;gap:20px;scrollbar-width:thin;scrollbar-color:rgba(61,139,130,.3) transparent}
.ws-conversation::-webkit-scrollbar{width:6px}
.ws-conversation::-webkit-scrollbar-thumb{background:rgba(61,139,130,.3);border-radius:999px}
.ws-conversation::-webkit-scrollbar-track{background:transparent}
.msg-row{display:flex;flex-direction:column;max-width:680px}
.msg-row.user{align-self:flex-end;align-items:flex-end}
.msg-row.assistant{align-self:flex-start;align-items:flex-start}

.ctx-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ctx-pill{
  display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--fp-color-primary);
  background:rgb(61 139 130/9%);border:1px solid rgb(61 139 130/16%);padding:5px 11px;border-radius:999px;
}

.bubble{padding:13px 17px;border-radius:20px;font-size:14.5px;line-height:1.6}
.msg-row.user .bubble{background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));color:#fff;border-bottom-right-radius:6px}
.msg-row.assistant .bubble{
  background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.35);color:var(--fp-color-text);border-bottom-left-radius:6px;
}
.bubble .cursor{display:inline-block;width:2px;height:15px;background:var(--fp-color-primary);margin-left:2px;vertical-align:middle;animation:blink 1s infinite}
@keyframes blink{50%{opacity:0}}

/* ============ MARKDOWN RENDER + COPY/SELECT ============ */
.message-content,.ai-response-text{user-select:text!important;-webkit-user-select:text!important}
.ai-response-text{white-space:pre-wrap;word-break:break-word;line-height:1.6;color:#1e293b;font-size:.95rem}
.ai-response-text p{margin:0 0 12px}
.ai-response-text p:last-child{margin-bottom:0}
.ai-response-text ul,.ai-response-text ol{margin:0 0 12px 20px;padding:0}
.ai-response-text li{margin-bottom:6px}
.ai-response-text h3,.ai-response-text h4{font-weight:700;margin-top:12px;margin-bottom:8px;color:#0f172a}
.ai-response-text strong{font-weight:700;color:#0f172a}
.msg-row.user .ai-response-text strong{color:#fff}

/* ============ MESSAGE ACTION BAR (AI + User) ============ */
.message-actions{
  display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin-top:8px;width:fit-content;
  opacity:.75;transition:opacity .2s ease;
  background:rgba(255,255,255,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.5);border-radius:999px;padding:4px;
  box-shadow:0 2px 10px rgba(15,23,42,.07);
}
.msg-row:hover .message-actions{opacity:1}
.action-btn{
  display:flex;align-items:center;justify-content:center;width:28px;height:28px;padding:5px;border-radius:999px;
  background:transparent;color:#94a3b8;border:none;cursor:pointer;transition:background .15s ease,color .15s ease;position:relative;flex-shrink:0;
}
.action-btn svg{width:16px;height:16px;flex-shrink:0}
.action-btn:hover{background:rgba(100,116,139,.1);color:#475569}
.action-btn.is-active{color:#0284C7}
.action-btn.is-copied{color:#16a34a}

.user-message-actions{
  display:flex;flex-wrap:nowrap;align-items:center;gap:2px;margin-top:6px;width:fit-content;
  opacity:0;transition:opacity .2s ease;align-self:flex-end;
  background:rgba(255,255,255,.7);border:1px solid rgba(226,232,240,.6);border-radius:999px;padding:4px;
  box-shadow:0 2px 10px rgba(15,23,42,.07);
}
.msg-row.user:hover .user-message-actions{opacity:1}

.more-menu-wrap{position:relative}
.more-menu-popover{
  position:absolute;bottom:calc(100% + 6px);left:0;min-width:200px;background:#fff;
  border:1px solid rgba(148,163,184,.35);border-radius:16px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:8px;z-index:20;
}
.more-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:none;background:transparent;
  border-radius:10px;font-size:13px;color:#334155;text-align:left;cursor:pointer;transition:background .15s ease;
  white-space:nowrap;
}
.more-menu-item:hover{background:#f1f5f9}
.more-menu-item svg{width:16px;height:16px;color:#94a3b8;flex-shrink:0}

.msg-attachments{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.msg-attachments img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--fp-color-border)}

.typing-dots{display:flex;gap:4px;padding:14px 17px;background:rgba(255,255,255,0.55);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.35);border-radius:20px;border-bottom-left-radius:6px;width:fit-content}
.typing-dots span{width:6px;height:6px;border-radius:50%;background:var(--fp-color-text-muted);animation:tdot 1.2s infinite}
.typing-dots span:nth-child(2){animation-delay:.2s}.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes tdot{0%,80%,100%{opacity:.25}40%{opacity:1}}

.warn-alert{
  margin-top:10px;max-width:680px;border-radius:16px;padding:14px 16px;font-size:12.5px;line-height:1.6;
  display:flex;gap:10px;align-items:flex-start;
  background:rgb(245 158 11/9%);border:1px solid rgb(245 158 11/28%);color:#92620a;
}
.warn-alert.is-error{background:rgb(239 68 68/9%);border-color:rgb(239 68 68/28%);color:#a1281f}
.warn-alert .w-icon{font-size:16px;flex-shrink:0}

/* ============ COMPOSER ============ */
.ws-composer{flex-shrink:0;padding:12px 18px 18px}
.upload-queue{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.upload-queue:empty{display:none}
.upload-item{position:relative;width:60px;height:60px;border-radius:14px;overflow:hidden;flex-shrink:0;background:var(--fp-color-border)}
.upload-item img{width:100%;height:100%;object-fit:cover;filter:blur(10px);opacity:.5;transform:scale(1.1);transition:filter .5s ease,opacity .5s ease,transform .5s ease}
.upload-item.is-loaded img{filter:blur(0);opacity:1;transform:scale(1)}
.upload-item .del{
  position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;background:rgba(28,61,58,.7);
  color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;
}

.composer-bar{
  display:flex;align-items:flex-end;gap:6px;background:#FFFFFF;
  border:1px solid rgba(148,163,184,.5);border-radius:999px;padding:8px 8px 8px 6px;
  box-shadow:0 4px 20px rgba(0,0,0,.06);transition:border-radius .25s ease;
}
.composer-bar.is-multiline{border-radius:28px}
.composer-icon-btn{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  color:#64748b;font-size:20px;line-height:1;background:transparent;transition:background .2s ease, color .2s ease;
}
.composer-icon-btn:hover{background:#f1f5f9;color:#0284C7}
#composerInput{
  flex:1;border:none;background:transparent;resize:none;max-height:120px;font-size:14.5px;color:#1e293b;
  padding:9px 4px;line-height:1.5;
}
#composerInput:focus{outline:none}
#composerInput::placeholder{color:#94a3b8}

.composer-action-btn{
  position:relative;width:42px;height:42px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.composer-action-btn .composer-icon-svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:18px;height:18px}
.composer-action-btn.is-mic .icon-send{display:none}
.composer-action-btn.is-send .icon-mic{display:none}

.composer-action-btn.is-mic{background:transparent;color:#64748b}
.composer-action-btn.is-mic:hover{background:#f1f5f9}
.composer-action-btn.is-mic::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #0EA5E9;opacity:0}
.composer-action-btn.is-mic.is-recording::before{animation:micPulse 1.4s ease-out infinite}
@keyframes micPulse{0%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.6)}}
.composer-action-btn.is-mic.is-recording{background:var(--fp-color-error);color:#fff;animation:micBeat 1s ease-in-out infinite}
@keyframes micBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

.composer-action-btn.is-send{background:#38BDF8;color:#0C4A6E}
.composer-action-btn.is-send:hover{filter:brightness(1.05)}
.composer-action-btn[disabled]{opacity:.35;pointer-events:none}

/* ============ VOICE RECORDING BAR ============ */
.voice-bar{
  display:none;align-items:center;gap:12px;background:#FFFFFF;
  border:1px solid rgba(148,163,184,.5);border-radius:999px;padding:10px 16px;box-shadow:0 4px 20px rgba(0,0,0,.06);
}
.voice-bar.is-open{display:flex}
.voice-cancel{
  width:34px;height:34px;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.voice-wave{flex:1;display:flex;align-items:center;justify-content:center;gap:3px;height:30px}
.voice-wave span{width:3px;border-radius:3px;background:#0EA5E9;animation:wave 1s ease-in-out infinite}
.voice-wave span:nth-child(odd){animation-duration:.7s}
.voice-wave span:nth-child(1){animation-delay:0s}.voice-wave span:nth-child(2){animation-delay:.1s}
.voice-wave span:nth-child(3){animation-delay:.2s}.voice-wave span:nth-child(4){animation-delay:.3s}
.voice-wave span:nth-child(5){animation-delay:.15s}.voice-wave span:nth-child(6){animation-delay:.25s}
.voice-wave span:nth-child(7){animation-delay:.05s}.voice-wave span:nth-child(8){animation-delay:.35s}
@keyframes wave{0%,100%{height:6px}50%{height:26px}}
.voice-timer{font-size:13px;font-weight:700;color:var(--fp-color-secondary);font-variant-numeric:tabular-nums;flex-shrink:0}
.voice-stop{
  background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));color:#fff;font-size:13px;font-weight:700;
  padding:9px 18px;border-radius:999px;flex-shrink:0;
}

/* ============ HUD (right panel) ============ */
.ws-hud{
  width:260px;flex-shrink:0;background:var(--fp-glass-bg);backdrop-filter:blur(var(--fp-blur-glass)) saturate(var(--fp-glass-sat));
  -webkit-backdrop-filter:blur(var(--fp-blur-glass)) saturate(var(--fp-glass-sat));
  border-left:1px solid var(--fp-glass-border);padding:16px;overflow-y:auto;
  transition:transform .35s var(--fp-ease);
}
.hud-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hud-head h3{font-size:13.5px}
.hud-block{margin-bottom:20px}
.hud-label{font-size:10.5px;font-weight:700;color:var(--fp-color-text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.model-switch{display:flex;background:rgba(28,61,58,.06);border-radius:999px;padding:3px}
.model-switch button{flex:1;padding:7px 0;border-radius:999px;font-size:12px;font-weight:700;color:var(--fp-color-text-muted);transition:all .25s var(--fp-ease)}
.model-switch button.is-active{background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));color:#fff}
.hud-note{font-size:11px;color:var(--fp-color-text-muted);margin-top:8px;line-height:1.5}

/* ===== Hạn mức sử dụng trong ngày — khối chính của HUD ===== */
.hud-quota-block{
  padding:14px;border-radius:16px;margin:-2px -2px 18px;
  background:rgba(255,255,255,0.45);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,0.25);box-shadow:0 8px 32px 0 rgba(0,0,0,0.05);
}
.hud-quota-block .hud-label{margin-bottom:10px;letter-spacing:.04em}
.quota-track{height:8px;border-radius:999px;background:rgba(28,61,58,.1);overflow:hidden;margin-bottom:8px}
.quota-track__fill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(135deg,var(--fp-color-primary),var(--fp-color-cta));
  transition:width .5s var(--fp-ease), background .3s var(--fp-ease);
}
.quota-track__fill.is-warning{background:#ef4444}
.quota-text{font-size:12.5px;font-weight:700;color:var(--fp-color-secondary);margin-bottom:2px}
.quota-tier{font-size:11px;color:var(--fp-color-text-muted)}

.hud-status{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--fp-color-text);line-height:1.5}
.hud-status__dot{width:8px;height:8px;border-radius:50%;background:var(--fp-color-success);flex-shrink:0;margin-top:4px;animation:hudPulse 1.8s ease-in-out infinite}
@keyframes hudPulse{0%,100%{opacity:1}50%{opacity:.4}}

.account-card{border:1px solid rgba(255,255,255,0.35);border-radius:14px;padding:12px;margin-bottom:8px;background:rgba(255,255,255,0.5);backdrop-filter:blur(10px);display:flex;flex-direction:column;gap:3px}
.account-card__name{font-size:13px;font-weight:700;color:var(--fp-color-secondary)}
.account-card__desc{font-size:11.5px;color:var(--fp-color-text-muted)}
.hud-login-link{display:block;font-size:12px;font-weight:700;color:var(--fp-color-primary);text-decoration:none}
.hud-login-link:hover{text-decoration:underline}

/* ============ Scrim (mobile drawers) ============ */
.ws-scrim{position:fixed;inset:0;background:rgba(15,30,28,.4);opacity:0;pointer-events:none;transition:opacity .3s var(--fp-ease);z-index:80}
.ws-scrim.is-open{opacity:1;pointer-events:auto}
.no-anim{transition:none !important}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .ws-hud{position:fixed;top:var(--ws-topband-h);right:0;bottom:0;z-index:90;transform:translateX(100%);border-left:1px solid var(--fp-glass-border)}
  .ws-hud.is-open{transform:translateX(0)}
  .only-desktop-hud{display:none}
}
@media (min-width:1081px){ .ws-hud .hud-head .icon-btn{display:none} }

@media (max-width:820px){
  .ws-sidebar{position:fixed;top:var(--ws-topband-h);left:0;bottom:0;z-index:90;transform:translateX(-100%);width:270px !important}
  .ws-sidebar.is-open{transform:translateX(0)}
  .ws-shell.sidebar-collapsed .ws-sidebar{width:270px}
  .only-mobile{display:flex}
  .sidebar-head .icon-btn:not(.only-mobile-close){display:none}
}
@media (max-width:640px){
  .msg-row{max-width:100%}
  .ws-conversation{padding:18px 12px 6px}
  .ws-composer{padding:10px 12px 14px}
}