:root{
  --bg:#efefef;
  --panel:#ffffff;
  --border:#d2d2d2;
  --bar:#f5f5f5;
  --bar2:#e9e9e9;
  --text:#222;
  --muted:#707070;
  --accent:#cc0033;
  --blue:#2b65d9;
  --green:#2e8b57;
  --yellow:#ffe87a;
  --pink:#b72e84;
  --purple:#6a5acd;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.35 -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.app{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh; /* mobile browser chrome aware */
}

/* Top bar */
.topbar{
  height:38px;
  background:linear-gradient(#444,#2f2f2f);
  color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 10px;
  border-bottom:1px solid #000;
}
.brand{display:flex;align-items:center;gap:8px}
.logo{
  width:36px;height:22px;border-radius:2px;
  background:#000;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:12px;letter-spacing:.5px;
}
.title{font-weight:600;opacity:.9}
.top-actions{display:flex;align-items:center;gap:6px}
.badge{background:#d00;color:#fff;border-radius:10px;padding:2px 6px;font-size:12px}
.btn.icon{background:#3a3a3a;border:1px solid #222;color:#eee;border-radius:3px;padding:4px 6px;cursor:pointer}

/* Channel header */
.channelbar{
  height:34px;background:var(--bar);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px;
}
.channel-left{display:flex;align-items:center;gap:10px}
.tag{font-weight:700;background:#fff;border:1px solid var(--border);padding:4px 6px;border-radius:3px}
.topic{color:#444}
.channel-right{display:flex;align-items:center;gap:10px}
.counter{color:#444;font-weight:600}
.mini-icons .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-left:3px;border:1px solid #888}
.mini-icons .red{background:#e55}
.mini-icons .yellow{background:#fc5}
.mini-icons .green{background:#6c6}
/* mini-icons removed in markup */

/* Main */
.main{display:grid;grid-template-columns:1fr 384px;gap:8px;padding:8px;flex:1;min-height:0}
.chat,.roster{background:var(--panel);border:1px solid var(--border);border-radius:2px;overflow:hidden}
.chat{display:flex;flex-direction:column;min-height:0}

/* Messages */
.messages{padding:8px 10px;overflow:auto;flex:1;min-height:0}
.msg{padding:3px 0;border-bottom:1px dotted #eee}
.msg .time{color:var(--muted);margin-right:6px}
.msg .nick{font-weight:600}
.msg .nick.blue{color:var(--blue)}
.msg .nick.green{color:var(--green)}
.msg .nick.purple{color:var(--purple)}
.msg .nick.pink{color:var(--pink)}
.msg .nick.orange{color:#c56a00}
.msg .nick.teal{color:#208c9b}
.msg .nick.gray{color:#555}
.msg .highlight{background:#fff59a;padding:1px 3px;border-radius:2px}
.msg .highlight.yellow{background:var(--yellow)}
.msg.join{color:#2f7d32}
.msg.leave{color:#888}
.msg.sys em{color:#27408b;font-style:normal;font-weight:600}
.msg.kick{color:#d0342c}
.emoji{opacity:.8}

/* Roster */
.roster{display:flex;flex-direction:column}
.roster-head{background:var(--bar2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:6px;gap:8px}
.left-head{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.tabs{display:flex;gap:6px}
.tab{border:1px solid var(--border);background:#fff;border-radius:3px;padding:4px 8px;cursor:pointer}
.tab.active{background:#fdfdfd;box-shadow:inset 0 0 0 1px #ddd}
.roster-tools{display:flex;align-items:center;gap:8px}
.filters{display:flex;gap:4px}
.roster-tools .pill{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:0 6px;cursor:pointer}
.filter-btn.active{background:#e7f0ff;border-color:#8bb3ff}
.left-head .search{margin-left:4px;flex:1 1 auto;width:auto;min-width:0}
.search{height:28px;border:1px solid var(--border);border-radius:14px;padding:0 10px}
.roster-list{overflow:auto;height:100%;position:relative}
.user{display:grid;grid-template-columns:22px 1fr 42px 36px 26px;gap:6px;padding:6px 8px;border-bottom:1px solid #f0f0f0;font-size:13px;align-items:center;position:relative;cursor:pointer}
.user.sel{background:#e7f0ff}
.user:hover{background:#f5f9ff}
.u-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-age{color:#666;justify-self:end}
.u-score{justify-self:end;color:#666}
.u-score.hot{color:#c00;font-weight:700}
.u-icn{color:#666;text-align:center}
.u-cam{color:#1976d2;justify-self:end}
.u-cam.off{color:#aaa}

/* Gender colors in roster */
.user[data-gender="m"] .u-name{color:var(--blue)}
.user[data-gender="f"] .u-name{color:var(--pink)}
.user[data-gender="u"] .u-name{color:var(--purple)}
.user[data-gender="m"] .u-icn{color:var(--blue)}
.user[data-gender="f"] .u-icn{color:var(--pink)}
.user[data-gender="u"] .u-icn{color:var(--purple)}

/* Private panes */
.pm-pane{background:var(--panel);border:1px solid var(--border);border-top:0;border-radius:0 0 2px 2px;padding:12px;overflow:auto;flex:1}
.pm-welcome{color:#555}

.chat-tabs .tab i[data-close], .chat-tabs .tab [data-close]{margin-left:6px;opacity:.6}
.chat-tabs .tab [data-close]:hover{opacity:1}

/* Hover card */
.hover-card{position:fixed;z-index:100;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:10px;min-width:240px;pointer-events:auto}
.hover-card .hc-name{font-weight:700;margin-bottom:4px}
.hover-card .hc-meta{color:#666;margin-bottom:8px}
.hover-card .btn.small{background:#fff;border:1px solid var(--border);border-radius:4px;padding:6px 8px;cursor:pointer}
.hover-card[data-gender="m"] .hc-name{color:var(--blue)}
.hover-card[data-gender="f"] .hc-name{color:var(--pink)}
.hover-card[data-gender="u"] .hc-name{color:var(--purple)}

/* Compose */
.compose{display:grid;grid-template-columns:120px minmax(220px,300px) 1fr 140px;gap:8px;align-items:center;background:var(--panel);border-top:1px solid var(--border);padding:8px 10px}
.preview{width:100%;height:64px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;background:#fff;color:#111;font-weight:700;border-radius:6px}
.preview .me{display:flex;align-items:center;gap:10px}
.me-avatar{width:42px;height:42px;border-radius:50%;background:#e0e0e0;color:#333;display:flex;align-items:center;justify-content:center;font-weight:800}
.cam-btn{width:42px;height:42px;border-radius:21px;border:1px solid var(--border);background:#f5f5f5;cursor:pointer}
.cam-btn.active{background:#e6f4ff;color:#1976d2;border-color:#8bb3ff}
.tools{display:flex;flex-direction:row;gap:8px;align-items:center;align-self:center;overflow-x:auto}
.t{background:#fff;border:1px solid var(--border);border-radius:6px;width:44px;height:44px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:700}
.t.toggle.active{background:#e7f0ff;border-color:#8bb3ff}
.input{height:44px;border:1px solid var(--border);border-radius:6px;padding:0 10px;font-size:14px}
.chat-tabs{display:flex;gap:6px;padding:6px;border-bottom:1px solid var(--border);background:var(--bar2)}
.chat-tabs .tab{border:1px solid var(--border);background:#fff;border-radius:3px;padding:4px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.chat-tabs .tab.active{background:#fdfdfd;box-shadow:inset 0 0 0 1px #ddd}
.send{height:44px;background:linear-gradient(#e9e9e9,#dcdcdc);border:1px solid #999;border-radius:6px;font-weight:600;cursor:pointer}

.webcams{background:#f3f8ff;border-top:1px solid var(--border);padding:6px 10px;display:flex;justify-content:flex-end}
.cta{background:#1976d2;color:#fff;border:0;border-radius:3px;padding:8px 12px;font-weight:600;cursor:pointer}

/* Scrollbars for a desktop feel */
.messages::-webkit-scrollbar,.roster-list::-webkit-scrollbar{width:10px}
.messages::-webkit-scrollbar-thumb,.roster-list::-webkit-scrollbar-thumb{background:#d0d0d0;border-radius:6px}

/* Desktop width similar to screenshot */
@media (min-width: 1200px){
  .app{max-width:none;margin:0;box-shadow:none}
}

/* Responsive */
@media (max-width: 1024px){
  .main{grid-template-columns:1fr 360px}
}

@media (max-width: 860px){
  .main{grid-template-columns:1fr}
  .roster{
    position:fixed;top:38px;right:0;bottom:0;
    width:min(384px, 92vw);
    transform:translateX(100%);
    transition:transform .25s ease;
    box-shadow:-8px 0 24px rgba(0,0,0,.15);
    z-index:20;
  }
  body.roster-open .roster{transform:translateX(0)}
  /* dim the chat behind the open roster */
  body.roster-open::after{
    content:'';position:fixed;inset:0;
    background:rgba(0,0,0,.3);z-index:19;
  }
}

@media (max-width: 600px){
  /* Channelbar: let topic shrink gracefully */
  .topic{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:45vw}
  /* Title: shrink instead of overflow */
  .title{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;max-width:28vw}

  /* Compose: row 1 = input + send, row 2 = tools */
  .compose{
    display:flex;flex-wrap:wrap;gap:6px;
    padding:6px 8px;align-items:center;
  }
  .preview{display:none}
  .input{order:1;flex:1 1 0;min-width:0}
  .send{order:2;flex:0 0 auto;padding:0 14px}
  .tools{order:3;flex:0 0 100%}

  /* Full-width roster on very narrow phones */
  .roster{width:100%;max-width:100vw}

  /* Hover card: stay within viewport on mobile */
  .hover-card{
    left:8px !important;right:8px !important;
    width:auto !important;min-width:0 !important;
    max-width:calc(100vw - 16px) !important;
  }

  /* Thinner scrollbars */
  .messages::-webkit-scrollbar,.roster-list::-webkit-scrollbar{width:4px}
}

/* Join modal */
.join-modal{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;z-index:500;
}
.join-modal[hidden]{display:none !important}
.join-box{
  background:#fff;border-radius:10px;padding:28px 24px;
  width:min(360px, 94vw);box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.join-logo{
  width:40px;height:26px;border-radius:3px;
  background:#222;color:#fff;font-weight:700;font-size:13px;
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.join-box h2{margin:0 0 18px;font-size:17px;font-weight:700}
.join-box input[type=text],
.join-box input[type=number]{
  display:block;width:100%;height:40px;
  border:1px solid var(--border);border-radius:6px;
  padding:0 10px;margin-bottom:10px;font-size:14px;
  font-family:inherit;
}
.join-box input[type=text]:focus,
.join-box input[type=number]:focus{outline:2px solid var(--blue);border-color:transparent}
.jf-gender{display:flex;gap:14px;margin-bottom:12px;font-size:13px}
.jf-gender label{display:flex;align-items:center;gap:5px;cursor:pointer}
.jf-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.jf-cam{
  display:flex;align-items:center;gap:8px;
  margin:10px 0 18px;font-size:13px;cursor:pointer;
}
.join-box button[type=submit]{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;height:42px;background:var(--accent);color:#fff;
  border:0;border-radius:6px;font-size:15px;font-weight:600;cursor:pointer;
}
.join-box button[type=submit]:hover{background:#b00028}

/* Popovers */
.popover{position:fixed;z-index:200;background:#fff;border:1px solid var(--border);border-radius:6px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px}
.popover[hidden]{display:none !important}
#emoji-panel{display:grid;grid-template-columns:repeat(6, 32px);gap:6px}
#emoji-panel .em{width:32px;height:32px;border:0;background:transparent;cursor:pointer;font-size:18px}
.color-pop{padding:10px}
.color-pop .palette{display:grid;grid-template-columns:repeat(10, 20px);gap:6px;margin-bottom:8px}
.color-pop .swatch{width:20px;height:20px;border-radius:50%;border:1px solid #bbb;background:var(--c);cursor:pointer}
.color-pop .swatch:focus{outline:2px solid #1976d2;outline-offset:2px}
.color-pop .picker-inline{display:flex;align-items:center;justify-content:center}