.chat-panel { min-height: 680px; padding: 0; overflow: hidden; }
.chat-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-header h2 { margin: 0; }
.chat-self-status { color: var(--muted); font-size: 12px; font-weight: 800; }
.chat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 620px; }
.chat-sidebar { min-width: 0; border-right: 1px solid var(--line); background: rgba(0, 0, 0, 0.12); }
.chat-view-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 12px; border-bottom: 1px solid var(--line); }
.chat-view-tab { position: relative; min-width: 0; min-height: 38px; padding: 0 8px; font-size: 12px; }
.chat-view-tab.active { border-color: var(--gold); color: var(--gold); }
.chat-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; line-height: 1; }
.chat-sidebar-list { max-height: 548px; overflow-y: auto; padding: 8px; }
.chat-list-button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; margin-bottom: 4px; padding: 7px 8px; border-color: transparent; background: transparent; text-align: left; }
.chat-list-button:hover, .chat-list-button.active { border-color: var(--line); background: var(--button); }
.chat-presence-dot { width: 9px; height: 9px; border-radius: 50%; background: #70756c; }
.chat-presence-dot.online { background: #55bd72; }
.chat-presence-dot.busy { background: var(--gold); }
.chat-presence-dot.retired { background: var(--danger); }
.chat-list-copy { min-width: 0; }
.chat-list-name, .chat-list-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-name { color: var(--text); font-weight: 800; }
.chat-list-preview { margin-top: 2px; color: var(--muted); font-size: 11px; }
.chat-main { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.chat-conversation-header { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.chat-conversation-title { min-width: 0; flex: 1; }
.chat-conversation-title strong, .chat-conversation-title span { display: block; }
.chat-conversation-title span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.chat-mobile-back { display: none; width: 38px; min-width: 38px; height: 38px; padding: 0; font-size: 20px; }
.chat-messages { min-height: 0; flex: 1; overflow-y: auto; padding: 14px; background: rgba(0, 0, 0, 0.1); }
.chat-message { max-width: 76%; margin: 0 0 12px; }
.chat-message.own { margin-left: auto; }
.chat-message-meta { display: flex; gap: 8px; margin-bottom: 3px; color: var(--muted); font-size: 10px; }
.chat-message.own .chat-message-meta { justify-content: flex-end; }
.chat-message-body { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--text); line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-message.own .chat-message-body { border-color: rgba(240, 200, 75, 0.42); background: #29291f; }
.chat-empty { padding: 28px 14px; color: var(--muted); text-align: center; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-composer input { min-width: 0; }
.chat-composer button { width: 42px; min-width: 42px; padding: 0; font-size: 18px; }
.chat-error { padding: 8px 14px; border-top: 1px solid rgba(255, 95, 95, 0.5); color: #ff9b9b; font-size: 12px; }

@media (max-width: 820px) {
  .chat-panel { min-height: 570px; }
  .chat-layout { display: block; min-height: 510px; }
  .chat-sidebar { min-height: 510px; border-right: 0; }
  .chat-sidebar-list { max-height: 440px; }
  .chat-main { min-height: 510px; }
  .chat-layout.mobile-conversation .chat-sidebar { display: none; }
  .chat-layout:not(.mobile-conversation) .chat-main { display: none; }
  .chat-mobile-back { display: inline-flex; align-items: center; justify-content: center; }
  .chat-message { max-width: 88%; }
  .chat-header { align-items: flex-start; flex-direction: column; }
}