:root { --brand:#198754; --sidebar-w:230px; }
* { box-sizing: border-box; }
body { font-family:'Inter',sans-serif; background:#f4f6f9; margin:0; }
.sidebar { position:fixed; top:0; left:0; width:var(--sidebar-w); height:100vh; background:#15212b; color:#cbd5e1; overflow-y:auto; z-index:1000; transition:transform .2s; }
.sidebar-brand { display:flex; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.brand-icon { width:36px; height:36px; border-radius:8px; background:var(--brand); display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; }
.brand-name { display:block; font-weight:700; color:#fff; font-size:.95rem; }
.brand-sub { display:block; font-size:.7rem; color:#94a3b8; }
.sidebar-user { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.user-avatar { width:34px; height:34px; border-radius:50%; background:#334155; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; }
.user-name { display:block; font-size:.82rem; color:#fff; font-weight:600; }
.user-role { display:block; font-size:.7rem; color:#94a3b8; }
.sidebar-nav { padding:10px 0; }
.nav-section { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:#64748b; padding:14px 16px 6px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 16px; color:#cbd5e1; text-decoration:none; font-size:.85rem; }
.nav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
.nav-item.active { background:rgba(25,135,84,.2); color:#fff; border-left:3px solid var(--brand); }
.topbar { position:sticky; top:0; left:0; margin-left:var(--sidebar-w); display:flex; align-items:center; gap:12px; padding:10px 20px; background:#fff; border-bottom:1px solid #e2e8f0; z-index:900; }
.page-title { font-size:1.05rem; font-weight:700; margin:0; }
.btn-icon { background:none; border:none; font-size:1rem; color:#475569; }
.avatar-xs { width:30px; height:30px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.7rem; font-weight:700; }
.main-content { margin-left:var(--sidebar-w); min-height:100vh; }
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:999; }
@media (max-width: 900px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); }
  .topbar, .main-content { margin-left:0; }
  .sidebar-overlay.open { display:block; }
}
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#15212b,#198754); }
.auth-card { width:100%; max-width:420px; background:#fff; border-radius:14px; padding:32px; box-shadow:0 12px 40px rgba(0,0,0,.2); }
.chat-layout { display:flex; gap:14px; height:calc(100vh - 110px); }
.chat-list-pane { width:360px; flex-shrink:0; background:#fff; border-radius:10px; border:1px solid #e2e8f0; display:flex; flex-direction:column; overflow:hidden; }
.chat-list-header { padding:12px 14px; font-weight:600; font-size:.85rem; border-bottom:1px solid #e2e8f0; }
.chat-list-search { display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:1px solid #e2e8f0; color:#94a3b8; }
.chat-list-search input { border:none; outline:none; flex:1; font-size:.85rem; }
.chat-list-items { flex:1; overflow-y:auto; }
.chat-list-item { display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid #f1f5f9; text-decoration:none; color:#1e293b; }
.chat-list-item:hover { background:#f8fafc; }
.chat-list-item.active { background:#e7f5ee; border-left:3px solid var(--brand); }
.chat-list-avatar { width:42px; height:42px; border-radius:50%; background:#334155; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0; }
.chat-list-body { flex:1; min-width:0; }
.chat-list-time { font-size:.7rem; color:#94a3b8; flex-shrink:0; white-space:nowrap; }
.chat-pane { flex:1; min-width:0; background:#fff; border-radius:10px; border:1px solid #e2e8f0; display:flex; flex-direction:column; overflow:hidden; }
.chat-empty { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#94a3b8; }
.chat-header { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid #e2e8f0; }
.chat-box { flex:1; overflow-y:auto; background:#e9edf2; padding:14px; }
.chat-date-sep { text-align:center; margin:10px 0; }
.chat-date-sep span { background:#fff; color:#64748b; font-size:.72rem; padding:3px 12px; border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.08); }
.msg { max-width:70%; padding:8px 12px; border-radius:10px; margin-bottom:8px; font-size:.88rem; position:relative; }
.msg-entrada { background:#fff; }
.msg-saida { background:#d9fdd3; margin-left:auto; }
.msg-corpo { word-wrap:break-word; }
.msg-meta { font-size:.65rem; color:#64748b; text-align:right; margin-top:2px; }
.chat-input-bar { display:flex; align-items:flex-end; gap:8px; padding:10px 14px; border-top:1px solid #e2e8f0; }
.chat-input-bar textarea { flex:1; resize:none; border:1px solid #cbd5e1; border-radius:18px; padding:8px 14px; font-size:.88rem; max-height:120px; font-family:inherit; }
.chat-input-bar textarea:focus { outline:none; border-color:var(--brand); }
.btn-send { border-radius:50%; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
@media (max-width: 767px) {
  .chat-layout { height:calc(100vh - 90px); }
  .chat-list-pane { width:100%; }
  .chat-list-pane.is-hidden-mobile, .chat-pane.is-hidden-mobile { display:none; }
}
.notif-dot { position:absolute; top:2px; right:2px; font-size:.6rem; padding:2px 5px; }
.notif-menu { width:320px; max-height:380px; overflow-y:auto; }
.notif-item { display:flex; gap:10px; align-items:flex-start; }
.notif-icon { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.notif-text { font-size:.85rem; }
.notif-time { font-size:.7rem; }
.badge-atrasado { background:#dc3545; color:#fff; }
.badge-alerta { background:#ffc107; color:#212529; }