/* ChrisEmm Connect – Chat UI Pro 0.9.6 */
.chat-application {
    --chat-panel: rgba(12, 20, 37, .92);
    --chat-panel-strong: rgba(18, 29, 51, .96);
    --chat-line: rgba(255,255,255,.075);
    --chat-accent: #7583ff;
    --chat-accent-2: #5cd1b0;
    gap: 14px;
    padding: 0;
}
.chat-sidebar,.chat-main {
    border: 1px solid var(--chat-line);
    background: linear-gradient(160deg,var(--chat-panel-strong),var(--chat-panel));
    box-shadow: 0 20px 65px rgba(0,0,0,.28);
    backdrop-filter: blur(18px);
}
.chat-sidebar { border-radius: 22px; }
.chat-main { border-radius: 24px; overflow: hidden; }
.panel-heading,.chat-header {
    border-bottom: 1px solid var(--chat-line);
    background: rgba(255,255,255,.018);
}
.panel-label {
    color: var(--chat-accent-2);
    letter-spacing: .13em;
    font-size: .62rem;
    font-weight: 900;
}
.room-list,.online-users { padding: 10px; gap: 6px; }
.room-item,.online-user {
    position: relative;
    border: 1px solid transparent;
    border-radius: 14px;
    transition: transform .18s ease,border-color .18s ease,background .18s ease;
}
.room-item:hover,.online-user:hover {
    transform: translateY(-1px);
    border-color: rgba(117,131,255,.24);
    background: rgba(117,131,255,.08);
}
.room-item.active {
    border-color: rgba(117,131,255,.38);
    background: linear-gradient(135deg,rgba(117,131,255,.19),rgba(92,209,176,.07));
    box-shadow: inset 3px 0 0 var(--chat-accent);
}
.room-icon {
    border-radius: 11px;
    background: rgba(117,131,255,.13);
    color: #cdd2ff;
}
.chat-header { min-height: 76px; padding: 14px 18px; }
.chat-header h1 { font-size: 1.06rem; letter-spacing: -.02em; }
.connection-status {
    border: 1px solid var(--chat-line);
    border-radius: 999px;
    padding: 7px 10px;
    background: rgba(255,255,255,.035);
}
.connection-status.online::before {
    content: ""; display:inline-block; width:7px; height:7px; margin-right:7px;
    border-radius:50%; background:#59d59b; box-shadow:0 0 0 4px rgba(89,213,155,.12);
}
.messages {
    padding: 18px 18px 24px;
    scroll-behavior: smooth;
    background:
      radial-gradient(circle at 50% 0,rgba(117,131,255,.055),transparent 34%),
      rgba(4,9,18,.23);
}
.chat-message {
    position: relative;
    gap: 11px;
    margin: 3px 0;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 15px;
    transition: background .16s ease,border-color .16s ease;
}
.chat-message:hover {
    background: rgba(255,255,255,.035);
    border-color: rgba(255,255,255,.045);
}
.message-avatar,.online-avatar {
    flex: 0 0 auto;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
.message-avatar { width: 42px; height: 42px; border-radius: 14px; }
.online-avatar { width: 38px; height: 38px; border-radius: 13px; }
.message-avatar img,.online-avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.message-meta { gap: 7px; }
.message-meta strong,.chat-profile-link { font-size: .88rem; font-weight: 850; text-decoration:none; }
.message-meta time { margin-left:auto; opacity:.72; }
.message-text { color: var(--text-soft); line-height:1.55; word-break:break-word; }
.role-badge { padding: 3px 7px; border-radius:999px; font-size:.58rem; letter-spacing:.04em; }
.chat-composer {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: end;
    gap: 10px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--chat-line);
    background: rgba(10,17,31,.94);
}
.chat-composer-tools { display:flex; gap:6px; padding-bottom:2px; }
.composer-tool {
    width: 40px; height: 40px; display:grid; place-items:center;
    border:1px solid var(--chat-line); border-radius:12px;
    color:var(--text-soft); background:rgba(255,255,255,.035); cursor:pointer;
}
.composer-tool:hover { border-color:rgba(117,131,255,.35); background:rgba(117,131,255,.12); }
.composer-field { border:1px solid rgba(255,255,255,.1); border-radius:16px; background:rgba(255,255,255,.035); }
.chat-composer textarea { min-height:44px; padding:12px 66px 12px 14px; background:transparent!important; border:0!important; }
.send-button { min-height:44px; border-radius:14px; padding-inline:18px; box-shadow:0 10px 26px rgba(109,124,255,.24); }
.character-count { right:12px; bottom:9px; }
.chat-emoji-panel {
    position:absolute; left:14px; bottom:70px; z-index:70;
    width:min(330px,calc(100vw - 32px)); padding:12px;
    border:1px solid var(--chat-line); border-radius:17px;
    background:rgba(15,24,43,.98); box-shadow:0 24px 70px rgba(0,0,0,.45);
}
.chat-emoji-panel[hidden] { display:none; }
.chat-emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; }
.chat-emoji-button { border:0; border-radius:9px; padding:7px 3px; font-size:1.25rem; background:transparent; cursor:pointer; }
.chat-emoji-button:hover { background:rgba(117,131,255,.14); }
.chat-jump-latest {
    position:absolute; right:18px; bottom:82px; z-index:20;
    border:1px solid rgba(117,131,255,.32); border-radius:999px; padding:8px 12px;
    color:#e7e9ff; background:rgba(20,29,52,.95); box-shadow:0 12px 30px rgba(0,0,0,.3); cursor:pointer;
}
.chat-jump-latest[hidden] { display:none; }
.online-dot { box-shadow:0 0 0 4px rgba(89,213,155,.1); }
.sidebar-information { margin:10px; border-radius:14px; background:linear-gradient(145deg,rgba(117,131,255,.09),rgba(92,209,176,.045)); }
@media (max-width: 1100px) { .chat-application { gap:0; } }
@media (max-width: 720px) {
  .main-content { padding:0; }
  .chat-main { border-radius:0; border-left:0; border-right:0; }
  .chat-header { min-height:66px; }
  .messages { padding:12px 8px 18px; }
  .chat-message { padding:9px 8px; }
  .message-avatar { width:38px; height:38px; border-radius:12px; }
  .chat-composer { grid-template-columns:auto minmax(0,1fr); padding:9px; }
  .send-button { grid-column:1/-1; width:100%; }
  .composer-tool { width:38px; height:38px; }
}