:root {
  --sidebar-width: 365px;
  --brand: #159447;
  --brand-dark: #0d6f35;
  --chat-bg: #eef2f0;
  --bubble-in: #ffffff;
  --bubble-out: #d9fdd3;
  --border: #e6ebe8;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: #f6f8f7; color: #19231e; }
.tiny { font-size: .75rem; }
.min-w-0 { min-width: 0; }
.app-shell { height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; overflow: hidden; }
.sidebar { min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.sidebar-head { flex: 0 0 auto; }
.brand { font-weight: 800; letter-spacing: -.02em; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #adb5bd; display: inline-block; box-shadow: 0 0 0 4px rgba(173,181,189,.12); }
.status-dot.connected { background: #20a35b; box-shadow: 0 0 0 4px rgba(32,163,91,.14); }
.status-dot.qr { background: #f59f00; box-shadow: 0 0 0 4px rgba(245,159,0,.14); }
.status-dot.connecting { background: #0d6efd; box-shadow: 0 0 0 4px rgba(13,110,253,.14); }
.chat-list { overflow-y: auto; flex: 1 1 auto; }
.chat-item { width: 100%; border: 0; border-bottom: 1px solid var(--border); background: #fff; padding: 12px 14px; text-align: left; display: flex; gap: 10px; align-items: center; transition: background .15s ease; }
.chat-item:hover, .chat-item.active { background: #f1f8f4; }
.chat-avatar, .avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; font-weight: 700; color: #fff; background: linear-gradient(135deg, #1f9f57, #2f70d0); }
.chat-meta { min-width: 0; flex: 1; }
.chat-line { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.chat-preview { color: #6f7c75; font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-time { font-size: .7rem; color: #8a9790; white-space: nowrap; }
.unread { min-width: 20px; height: 20px; border-radius: 999px; padding: 0 6px; display: inline-grid; place-items: center; background: #1fa855; color: #fff; font-size: .68rem; font-weight: 700; }
.chat-pane { min-width: 0; height: 100vh; position: relative; }
.bg-chat { background-color: var(--chat-bg); background-image: radial-gradient(rgba(15, 72, 42, .055) 1px, transparent 1px); background-size: 22px 22px; }
.empty-state { position: absolute; inset: 0; display: grid; place-content: center; padding: 24px; }
.empty-icon { font-size: 54px; filter: grayscale(.2); }
.chat-section { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.chat-header { min-height: 64px; }
.message-list { overflow-y: auto; padding: 22px max(18px, 6vw); display: flex; flex-direction: column; gap: 8px; }
.message-row { display: flex; }
.message-row.out { justify-content: flex-end; }
.bubble { max-width: min(650px, 78%); padding: 9px 11px 6px; border-radius: 12px; background: var(--bubble-in); box-shadow: 0 1px 1px rgba(0,0,0,.07); white-space: pre-wrap; overflow-wrap: anywhere; }
.message-row.out .bubble { background: var(--bubble-out); border-top-right-radius: 4px; }
.message-row.in .bubble { border-top-left-radius: 4px; }
.bubble-time { text-align: right; color: #7b877f; font-size: .68rem; margin-top: 4px; }
.composer textarea { resize: none; max-height: 130px; }
.qr-wrap { width: 340px; max-width: 100%; min-height: 340px; display: grid; place-items: center; border-radius: 20px; background: #f8faf9; border: 1px solid var(--border); padding: 10px; }
.notes-list { overflow-y: auto; }
.note-card { border: 1px solid #e1e6e3; border-radius: 12px; padding: 12px; margin-bottom: 10px; background: #fffdf2; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.login-page { min-height: 100%; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 15% 20%, rgba(33, 190, 94,.13), transparent 32%), linear-gradient(135deg,#f4fbf6,#edf4f8); }
.login-card { width: min(430px, 100%); border-radius: 22px; }
.login-badge { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: var(--brand); color: #fff; font-weight: 900; font-size: 1.3rem; box-shadow: 0 10px 25px rgba(21,148,71,.25); }

@media (max-width: 991.98px) {
  .app-shell { display: block; position: relative; }
  .sidebar { width: 100%; position: absolute; inset: 0; z-index: 1; }
  .chat-pane { width: 100%; position: absolute; inset: 0; z-index: 2; transform: translateX(100%); transition: transform .18s ease; }
  body.chat-open .chat-pane { transform: translateX(0); }
  .bubble { max-width: 88%; }
  .message-list { padding: 18px 12px; }
}