:root {
  --tg-bg: #0f172a;
  --tg-panel: #111827;
  --tg-panel-2: #0b1220;
  --tg-border: #1f2937;
  --tg-text: #e5e7eb;
  --tg-muted: #94a3b8;
  --tg-accent: #2a8cff;
  --tg-accent-2: #1d4ed8;
  --tg-bubble: #1f2937;
  --tg-bubble-me: #2a8cff;
}

.yg-app { display:grid; grid-template-columns: 320px 1fr; min-height: 100vh; background: var(--tg-bg); color: var(--tg-text); }
.yg-sidebar { background: var(--tg-panel); border-right:1px solid var(--tg-border); padding:1rem 0; display:flex; flex-direction:column; }
.yg-brand { font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin:0 1.2rem 1rem; color:#e2e8f0; }
.yg-user { font-size:.85rem; color:var(--tg-muted); margin:0 1.2rem .8rem; }
.yg-actions { display:flex; gap:.6rem; margin:0 1.2rem 1rem; flex-wrap:wrap; }
.yg-chats { display:flex; flex-direction:column; gap:.2rem; padding:0 .6rem; overflow-y:auto; }
.yg-chat-item { padding:.8rem .9rem; border-radius:12px; cursor:pointer; display:flex; flex-direction:column; gap:.2rem; }
.yg-chat-item.active { background: rgba(42,140,255,.18); }
.yg-chat-item:hover { background: rgba(148,163,184,.12); }

.yg-search { margin:0 1.2rem 1rem; }
.yg-search input { width:100%; padding:.65rem .9rem; border-radius:10px; border:1px solid var(--tg-border); background: var(--tg-panel-2); color: var(--tg-text); }

.yg-main { padding:0; display:flex; flex-direction:column; }
.yg-panel { max-width:520px; margin:2rem auto; background: var(--tg-panel); border:1px solid var(--tg-border); border-radius:16px; padding:1.5rem; }
.yg-panel input { width:100%; margin:.35rem 0; padding:.75rem .9rem; border-radius:10px; border:1px solid var(--tg-border); background: var(--tg-panel-2); color:var(--tg-text); }
.yg-note { margin-top:.8rem; font-size:.85rem; color:var(--tg-muted); }
.yg-divider { height:1px; background:var(--tg-border); margin:1rem 0; }

.yg-chat { display:flex; flex-direction:column; height: 100vh; }
.yg-chat-header { padding: .9rem 1.2rem; border-bottom:1px solid var(--tg-border); display:flex; align-items:center; gap:.8rem; background: var(--tg-panel); }
.yg-chat-title { font-weight:700; }
.yg-chat-meta { color:var(--tg-muted); font-size:.8rem; }
.yg-messages { flex:1; overflow-y:auto; padding:1.2rem; display:flex; flex-direction:column; gap:.5rem; background: linear-gradient(180deg, #0b1220, #0f172a); }
.yg-msg { padding:.55rem .8rem; border-radius:14px; max-width:70%; font-size:.95rem; line-height:1.4; }
.yg-msg.me { background: var(--tg-bubble-me); margin-left:auto; color:white; }
.yg-msg.them { background: var(--tg-bubble); border:1px solid var(--tg-border); }
.yg-reactions { margin-top:6px; font-size:.85rem; color:#e5e7eb; }

.yg-compose { display:flex; gap:.6rem; align-items:center; padding: .8rem 1.2rem; border-top:1px solid var(--tg-border); background: var(--tg-panel); }
.yg-compose input[type="text"], .yg-compose input#yg-message { flex:1; padding:.7rem .9rem; border-radius:10px; border:1px solid var(--tg-border); background: var(--tg-panel-2); color:var(--tg-text); }
.yg-compose input[type="file"] { color:var(--tg-muted); }

.btn { background: var(--tg-accent); color: #fff; border-radius:10px; padding:.6rem .9rem; text-transform:none; letter-spacing:0; font-weight:600; }
.btn.btn-ghost { background: transparent; border:1px solid var(--tg-border); color: var(--tg-text); }
.btn.btn-secondary { background: var(--tg-accent-2); color:white; }

.hidden { display:none; }