:root{
  --bg: #0b0c10;
  --panel: #111217;
  --muted: #a4a7b0;
  --text: #e9e9ee;
  --accent: #7c5cff;
  --accent-2: #4cc3ff;
  --border: #242633;
  --chip: #1b1d27;
}
html,body{height:100%;}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: linear-gradient(180deg, #0b0c10 0%, #0b0c10 220px, #0e1016 221px, #0e1016 100%);
}
a{color: var(--accent); text-decoration: none;}
.muted{color: var(--muted);}
.tiny{font-size: 12px;}
.app{display:grid; grid-template-columns: 280px 1fr; height:100vh;}

/* Sidebar */
.sidebar{ border-right: 1px solid var(--border); background: var(--panel); display:flex; flex-direction:column; min-width: 260px; }
.sidebar-header{ display:flex; align-items:center; justify-content:space-between; padding: 14px; border-bottom:1px solid var(--border); }
.logo{ font-weight: 800; letter-spacing: 0.5px; }
.icon-btn{ background: transparent; border: 1px solid var(--border); color: var(--text); padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.icon-btn:hover{ background: #1a1b24; }
.me-block{ padding: 12px 14px; border-bottom:1px solid var(--border);}
.me-name{ font-weight: 600; }
.me-id{ color: var(--muted); overflow-wrap:anywhere; }
.sidebar-section{ padding: 10px 8px; }
.section-title{ font-size:12px; letter-spacing: 1px; color: var(--muted); text-transform:uppercase; padding: 4px 6px; }
.conv-list{ list-style:none; margin:6px 0 8px; padding:0; }
.conv-item{ display:flex; flex-direction:column; gap:2px; padding:8px 10px; border-radius:10px; cursor:pointer; }
.conv-item:hover{ background: #161824; }
.conv-item.active{ background: var(--chip); border:1px solid var(--border); }
.conv-item .title{ font-weight:600; font-size: 14px; }
.conv-item .sub{ color: var(--muted); font-size: 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.section-actions{ display:flex; gap:6px; }
.section-actions input{ flex:1; background:#0f1119; border:1px solid var(--border); color:var(--text); border-radius: 8px; padding:8px 10px; }
.btn{ background:#191b26; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:8px 12px; cursor:pointer; }
.btn.small{ padding:6px 10px; }
.btn.primary{ background: linear-gradient(90deg, var(--accent), var(--accent-2)); border:0; color:black; font-weight:600; }
.btn.primary:hover{ filter: brightness(1.05); }

/* Main */
.main{ display:grid; grid-template-rows: auto 1fr auto; height:100vh;}
.main-header{ display:flex; align-items:center; justify-content:space-between; padding: 14px 16px; border-bottom:1px solid var(--border); background: #0f1017; }
.conv-title{ font-weight:700; font-size:16px; }
.conv-subtitle{ color: var(--muted); font-size:12px; }
.messages{ padding: 14px 16px; overflow-y:auto; background: radial-gradient(1200px 400px at 50% -10%, rgba(124,92,255,.08), rgba(76,195,255,.06) 40%, transparent 70%) no-repeat, transparent; }
.message{ margin: 8px 0; padding: 10px 12px; border-radius: 12px; border:1px solid var(--border); background: #12131b; }
.message .meta{ color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.message .text{ white-space: pre-wrap; word-break: break-word; }
.composer{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--border); background: #0f1017; }
.composer input{ flex:1; background:#0f1119; border:1px solid var(--border); color:var(--text); border-radius: 12px; padding:12px 14px; }

/* Auth page */
.auth-body{ display:flex; align-items:center; justify-content:center; background: radial-gradient(800px 280px at 50% -10%, rgba(124,92,255,.1), rgba(76,195,255,.08) 36%, transparent 70%) no-repeat, #0b0c10; }
.auth-card{ width: 380px; padding: 22px; border-radius:16px; background:#111217; border:1px solid var(--border); }
.auth-card h1{ margin: 8px 0 10px; }
.auth-card form{ display:flex; flex-direction:column; gap:10px; }
.auth-card label{ display:flex; flex-direction:column; gap:6px; font-size: 14px;}
.auth-card input{ background:#0f1119; border:1px solid var(--border); color:var(--text); border-radius: 10px; padding:10px 12px; }
.row{ display:flex; align-items:center; gap:10px; }
.checkbox{ display:flex; align-items:center; gap:8px; }