.chat-panel{
  width:100%;display:none;flex-direction:column;
  overflow:hidden;
  background:var(--bg);
}
.desktop-empty-state{display:none}

.chat-header-mobile{
  height:var(--topbar-h);padding:0 12px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
  background:var(--panel);
  border-bottom:1px solid var(--border);
}
.back-btn,.menu-btn{
  width:36px;height:36px;border:none;
  background:transparent;color:var(--text-secondary);
  font-size:18px;border-radius:var(--r-sm);cursor:pointer;flex-shrink:0;
}
.chat-title-mobile{
  flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-size:17px;font-weight:700;color:var(--text);
}

.messages-list-mobile{
  flex:1;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:10px 14px;
  display:flex;flex-direction:column;gap:2px;
}
.date-separator{
  text-align:center;font-size:13px;font-weight:600;
  margin:14px auto 8px;padding:4px 14px;border-radius:var(--r-full);
  background:var(--panel-glass);color:var(--text-secondary);
  display:inline-block;align-self:center;
}

.message-mobile{display:flex;flex-direction:column;max-width:80%;animation:fadeIn .18s ease}
.message-mobile.own{align-self:flex-end}
.message-mobile.other{align-self:flex-start}
.message-content-mobile{padding:9px 14px;border-radius:var(--r-lg);font-size:15px;line-height:1.45;word-break:break-word}
.message-mobile.own .message-content-mobile{
  background:var(--bubble-own);color:#fff;border-bottom-right-radius:var(--r-xs);
  box-shadow:var(--shadow-sm);
}
.message-mobile.other .message-content-mobile{
  background:var(--bubble-other);color:var(--text);border-bottom-left-radius:var(--r-xs);
  box-shadow:var(--shadow-sm);border:1px solid var(--border);
}
.message-time-mobile{font-size:11px;color:var(--text-tertiary);margin-top:3px;padding:0 6px}
.message-mobile.own .message-time-mobile{text-align:right;color:rgba(255,255,255,.50)}

.message-file-image{max-width:260px;overflow:hidden;border-radius:var(--r-md);margin-bottom:4px;cursor:pointer}
.file-preview-img{width:100%;height:auto;display:block}
.message-file{
  display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:var(--r-md);
  background:var(--soft);color:var(--text);cursor:pointer;margin-bottom:4px;font-size:14px;text-decoration:none;
}

.input-area-mobile{
  display:flex;align-items:flex-end;gap:8px;
  padding:6px 12px calc(6px + env(safe-area-inset-bottom,0px));
  min-height:var(--composer-h);
  background:var(--panel);
  border-top:1px solid var(--border);
}
.attach-btn-mobile{
  width:38px;height:38px;border-radius:50%;border:none;
  background:var(--soft);color:var(--text-secondary);font-size:16px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.send-btn-mobile{
  width:38px;height:38px;border-radius:50%;border:none;
  background:linear-gradient(135deg,#005f6d,#0a7c88);color:#fff;font-size:16px;flex-shrink:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow);
}
.send-btn-mobile:disabled{opacity:.35;cursor:default}
.message-input-mobile{
  flex:1;min-height:38px;max-height:120px;resize:none;
  border:1.5px solid var(--border);outline:none;border-radius:20px;
  background:var(--panel);padding:9px 16px;
  font:inherit;font-size:15px;line-height:1.35;color:var(--text);
  overflow-y:auto;
}
.message-input-mobile:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-glow)}

/* DARK */
body.dark-theme .chat-header-mobile,
body.dark-theme .input-area-mobile{background:var(--panel)}
body.dark-theme .message-mobile.other .message-content-mobile{background:var(--bubble-other);color:var(--text);border-color:var(--border-strong)}
body.dark-theme .message-input-mobile{background:var(--soft);color:var(--text);border-color:var(--border)}
body.dark-theme .message-file{background:var(--soft);color:var(--text)}

/* MOBILE */
@media(max-width:980px){
  .chat-panel{display:none}
  body:not(.chat-open) .chat-panel{display:none !important}
  body.chat-open .chat-panel{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    overflow:hidden !important;
  }
  .desktop-empty-state{display:none !important}
}

/* DESKTOP */
@media(min-width:981px){
  .chat-panel,.desktop-empty-state{display:none;height:100%}
  body.desktop-chat-open .chat-panel{display:flex !important}
  body.desktop-chat-open .desktop-empty-state{display:none !important}
  body:not(.desktop-chat-open) .desktop-empty-state{display:flex;align-items:center;justify-content:center;background:transparent}
  .desktop-empty-state-inner{max-width:380px;text-align:center;padding:40px}
  .desktop-empty-icon{font-size:52px;margin-bottom:16px;width:88px;height:88px;border-radius:var(--r-xl);background:linear-gradient(135deg,#005f6d,#0a7c88);color:#fff;display:inline-flex;align-items:center;justify-content:center;box-shadow:var(--shadow-glow)}
  .desktop-empty-title{font-size:26px;font-weight:800;margin-bottom:8px;color:var(--text)}
  .desktop-empty-text{color:var(--text-secondary);font-size:15px;line-height:1.5}
  #back-to-chats{display:none !important}
  .message-mobile{max-width:60%}
  .input-area-mobile{padding:10px 16px 12px}
  .message-input-mobile{border-radius:24px;padding:10px 18px}
}

/* ===== TELEGRAM-STYLE BUBBLES ===== */
.msg{
  display:flex;flex-direction:column;max-width:80%;
  margin:1px 0;animation:fadeIn .15s ease;
}
.msg.own{align-self:flex-end}
.msg.other{align-self:flex-start}

.msg-sender{
  font-size:13px;font-weight:600;
  color:var(--brand);
  padding:0 10px 2px;
}

.msg-text{
  padding:7px 10px 6px;
  border-radius:14px;
  font-size:15px;line-height:1.4;
  word-break:break-word;
  position:relative;
}

.msg.own .msg-text{
  background:var(--bubble-own);color:#fff;
  border-bottom-right-radius:4px;
  box-shadow:0 1px 3px rgba(0,95,109,.15);
}
.msg.other .msg-text{
  background:var(--bubble-other);color:var(--text);
  border-bottom-left-radius:4px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  border:1px solid var(--border);
}

/* Time INSIDE bubble, bottom-right like Telegram */
.msg-time{
  float:right;
  font-size:11px;
  margin:4px -4px -2px 12px;
  white-space:nowrap;
  line-height:1;
}
.msg.own .msg-time{color:rgba(255,255,255,.55)}
.msg.other .msg-time{color:var(--text-tertiary)}

/* Images */
.msg-image{
  max-width:280px;overflow:hidden;
  border-radius:14px;margin-bottom:2px;cursor:pointer;
}
.msg-image img{width:100%;height:auto;display:block;border-radius:14px}

/* Files */
.msg-file{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;border-radius:10px;
  background:var(--soft);color:var(--text);
  font-size:14px;text-decoration:none;margin-bottom:2px;
}

/* Dark mode bubbles */
body.dark-theme .msg.other .msg-text{
  background:var(--bubble-other);color:var(--text);
  border-color:var(--border-strong);box-shadow:none;
}
body.dark-theme .msg-file{background:var(--soft);color:var(--text)}

@media(min-width:981px){
  .msg{max-width:60%}
}

/* ===== REPLY BAR ===== */
.reply-bar{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  background:var(--panel);
  border-top:1px solid var(--border);
  border-left:3px solid var(--brand);
  position:fixed;bottom:var(--composer-h);left:0;right:0;
  z-index:998;
}
.reply-preview{display:flex;flex-direction:column;flex:1;min-width:0}
.reply-label{font-size:12px;font-weight:700;color:var(--brand)}
.reply-text{font-size:13px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reply-cancel{border:none;background:none;font-size:22px;color:var(--text-tertiary);cursor:pointer;padding:4px}

/* ===== REPLY REF IN BUBBLE ===== */
.msg-reply-ref{
  font-size:12px;font-weight:500;
  padding:6px 10px 4px;
  margin:0 2px 4px;
  border-left:3px solid var(--brand);
  border-radius:4px;
  background:rgba(0,95,109,.06);
  cursor:pointer;
}
.reply-ref-label{color:var(--brand);font-weight:600}
body.dark-theme .msg-reply-ref{background:rgba(0,95,109,.12)}

/* ===== CONTEXT MENU ===== */
.msg-context-menu{
  position:fixed;z-index:10000;
  background:var(--panel);
  border-radius:var(--r-md);
  box-shadow:var(--shadow-float);
  border:1px solid var(--border);
  padding:4px;min-width:160px;
  animation:fadeIn .12s ease;
}
.msg-menu-item{
  padding:11px 14px;border-radius:var(--r-sm);
  font-size:15px;cursor:pointer;
  transition:background var(--transition);
}
.msg-menu-item:hover,.msg-menu-item:active{background:var(--soft)}

/* DARK */
body.dark-theme .reply-bar{background:var(--panel);border-color:var(--border)}
body.dark-theme .msg-context-menu{background:var(--panel);border-color:var(--border-strong)}

/* ===== TYPING INDICATOR ===== */
.typing-indicator .msg-text{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;
  color:var(--text-secondary);font-size:14px;
}
.typing-dots{display:inline-flex;gap:4px;align-items:center}
.typing-dots .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--brand);opacity:.4;
  animation:typingBounce 1.4s infinite ease-in-out both;
}
.typing-dots .dot:nth-child(2){animation-delay:0.16s}
.typing-dots .dot:nth-child(3){animation-delay:0.32s}
@keyframes typingBounce{
  0%,80%,100%{transform:scale(0.6);opacity:.4}
  40%{transform:scale(1);opacity:1}
}