:root{
      --bg:#111;--panel:#1b1b1b;--panel2:#222;--text:#eee;--muted:#9aa0a6;--primary:#0ea5e9;--ok:#16a34a;--err:#dc2626;
      --bubble-bot:#333;--bubble-user:#0ea5e9;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Noto Sans,Arial;background:var(--bg);color:var(--text)}
    .wrap{max-width:1200px;margin:auto;padding:10px;display:grid;grid-template-rows:auto auto 1fr auto;min-height:100vh;gap:10px}

    /* Status banner */
    .banner{display:none;padding:10px 12px;border-radius:8px;border:1px solid #00000022}
    .banner.ok{display:block;background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.35);color:#bbf7d0}
    .banner.err{display:block;background:rgba(220,38,38,.12);border-color:rgba(220,38,38,.35);color:#fecaca}

    header{display:flex;justify-content:space-between;align-items:center;padding:10px;background:var(--panel2);border-radius:8px}
    header h1{margin:0;font-size:18px}

    .main{display:grid;grid-template-columns:350px 1fr;gap:10px}
    @media(max-width:900px){.main{grid-template-columns:1fr}}

    /* Roster */
    .roster{background:var(--panel);padding:10px;border-radius:8px;overflow:auto}
    .card{display:grid;grid-template-columns:80px 1fr;gap:10px;background:#2a2a2a;padding:8px;border-radius:6px;margin-bottom:8px}
    .card img{width:80px;height:80px;border-radius:6px;object-fit:cover}
    .card button{margin-top:6px;padding:6px 8px;border:none;border-radius:6px;background:var(--primary);color:#fff;cursor:pointer}

    /* Chat */
    .chat{background:var(--panel);border-radius:8px;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;position:relative}
    .chat-header{padding:8px 12px;background:var(--panel2)}

    /* NEW: Chat body with avatar column */
    .chat-body{display:grid;grid-template-columns:120px 1fr;gap:12px;height:100%;overflow-y:auto;scroll-behavior:smooth;align-items:start;padding:10px}
    .avatar-col{position:sticky;top:0;align-self:start}
    .avatar-col img{width:100px;height:100px;border-radius:10px;object-fit:cover;display:block}

    .messages{display:flex;flex-direction:column;min-height:100%}
    .msg{margin:6px 0;max-width:72%}
    .msg.user{margin-left:auto;text-align:right}
    .bubble{display:inline-block;padding:8px 12px;border-radius:12px;background:var(--bubble-bot)}
    .msg.user .bubble{background:var(--bubble-user);color:#fff}

    /* Inline composer hidden; use dock */
    .composer{display:none;padding:8px;gap:6px;background:var(--panel2)}
    .composer input{flex:1;padding:8px;border-radius:6px;border:1px solid #00000033;background:#fff;color:#111}
    .composer button{padding:8px 12px;border:none;border-radius:6px;background:var(--primary);color:#fff;cursor:pointer}

    /* Docked composer fixed to viewport */
    .composer-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:10px;z-index:50;display:flex;gap:8px;background:var(--panel2);padding:10px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.45);width:min(900px,95vw)}
    .composer-dock input{flex:1;padding:10px;border-radius:8px;border:1px solid #00000033;background:#fff;color:#111}
    .composer-dock button{padding:10px 14px;border:none;border-radius:8px;background:var(--primary);color:#fff;cursor:pointer}

    footer{padding:10px;text-align:center;color:var(--muted)}