:root{
  --bg:#0f141a;
  --bg-elev:#161c23;
  --bg-elev-2:#1f2630;
  --text:#e6edf3;
  --muted:#9aa7b2;
  --brand:#3390ec;
  --primary:var(--brand);
  --bubble:#17212b;
  --bubble-me:#2b5278;
  --pin:#3da5f5;
  --danger:#f47373;
  --ok:#2ecc71;
  --radius:16px;
  --gap:10px;
  --shadow:0 8px 28px rgba(0,0,0,.45);
  --safe-left: calc(env(safe-area-inset-left, 0px) + 48px);
  --select-col: 28px; /* NEW: width of the selection column */
}

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

.drawer{position:fixed; inset:0 auto 0 0; width:min(86vw,380px); background:var(--bg-elev); border-right:1px solid rgba(255,255,255,.06); transform:translateX(-100%); transition:.2s transform ease; z-index:30; display:flex; flex-direction:column}
.drawer.open{transform:none}
.drawer__head{display:flex; align-items:center; padding:14px 16px; gap:12px; background:var(--bg-elev-2); border-bottom:1px solid rgba(255,255,255,.06)}
.brand{font-weight:700; letter-spacing:.2px}
.drawer__head .btn--icon{margin-left:auto}
.rooms{padding:8px}
.room{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; color:var(--text); text-decoration:none; opacity:.9}
.room:hover,.room.active{background:rgba(255,255,255,.06); opacity:1}
.room__icon{width:32px;height:32px;display:grid;place-items:center;background:var(--bg-elev-2);border-radius:10px}
.room__title{flex:1}
.drawer__foot{margin-top:auto; padding:10px; border-top:1px solid rgba(255,255,255,.06)}
.whoami{width:100%; display:flex; align-items:center; gap:10px; background:transparent; border:0; color:inherit; padding:8px 10px; border-radius:12px}
.whoami:hover{background:rgba(255,255,255,.06)}

.avatar{width:36px;height:36px;border-radius:50%;background:#264055;color:#fff;display:grid;place-items:center;font-weight:700;user-select:none;background-size:cover;background-position:center}
.avatar.avatar--img{color:transparent}

/* Top bar */
.topbar{position:sticky; top:0; display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-elev-2); border-bottom:1px solid rgba(255,255,255,.06); z-index:20; backdrop-filter: blur(12px);}
.topbar__burger{margin-left:0;margin-right:6px}
.topbar__title{display:flex; align-items:center; gap:10px}
.topbar__icon{width:28px;height:28px;display:grid;place-items:center;background:var(--bg-elev);border-radius:10px}
.topbar__name{font-weight:600}
.topbar__spacer{flex:1}

/* Pinned bar — always visible under top bar */
.pinned{position:sticky; top:56px; display:flex; align-items:center; gap:10px; padding:10px 12px; background:linear-gradient(180deg,#224968,#163248); border-top:1px solid rgba(0,0,0,.45); border-bottom:1px solid rgba(0,0,0,.85); box-shadow:0 2px 0 rgba(0,0,0,.65) inset; z-index:18}
.pinned.hidden{display:none}
.pinned__icon{margin-right:2px}
.pinned__text{color:var(--text); text-decoration:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; flex:1}

.app{min-height:100vh; display:flex; flex-direction:column}
.messages{flex:1; overflow:auto; padding:10px 10px 18px; position:relative}

/* Message layout — compact like Telegram */
.msg{display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto auto; gap:2px 6px; align-items:start; margin:4px 0; padding-right:4px; position:relative}
.msg__avatar{grid-column:1; grid-row:1 / span 2; align-self:end; width:44px; height:44px}

/* Hide meta (we render name/time inside bubble) */
.msg__meta{display:none}

/* Bubble with compact paddings and in-bubble time */
.msg__bubble{grid-column:2; grid-row:2; background:var(--bubble); border-radius:var(--radius); padding:8px 40px 18px 10px; display:inline-block; width:fit-content; max-width:min(68vw, 520px); position:relative; word-wrap:break-word}
.msg--me .msg__bubble{background:var(--bubble-me)}

/* Author header inside bubble (when not forwarded) */
.msg__header{margin:-2px 0 4px}
.msg__author-in{font-weight:600; font-size:12.5px; text-decoration:none; cursor:pointer}
.msg__author-in:hover{text-decoration:underline}
.msg__forward{font-size:12.5px; color:var(--muted); margin:-2px 0 4px}
.msg__forward-name{color:#fff; font-weight:600}

/* Time inside bubble */
.msg__time-in{position:absolute; right:28px; bottom:6px; font-size:11.5px; color:rgba(255,255,255,.65)}
.msg--me .msg__time-in{color:rgba(255,255,255,.8)}

.msg__reply{display:flex; gap:8px; align-items:center; margin:-2px 0 6px; padding:6px 8px; border-left:3px solid var(--brand); background:rgba(255,255,255,.05); border-radius:8px}
.msg__reply.hidden{display:none}
.msg__reply-name{font-weight:600; font-size:12.5px}
.msg__reply-text{font-size:12.5px; color:var(--muted)}

.msg__image{border-radius:12px; max-width:min(420px, 80vw); display:block}
.filecard{display:flex; gap:10px; align-items:center}
.filecard__text{display:flex; flex-direction:column}

/* Reactions */
.msg__reactions{display:flex; gap:6px; margin-top:6px; flex-wrap:wrap}
.msg__reactions.hidden{display:none}
.react-pill{display:inline-flex; gap:6px; align-items:center; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); padding:2px 8px; border-radius:999px; font-size:13px}
.react-pill.me{outline:1px solid var(--brand)}

/* === Selection (Forward) — Telegram-like round check === */
.msg__select{
  position:absolute;
  left:8px;                           /* consistent left gutter */
  top: var(--sel-top, 24px);           /* JS sets this to bubble center */
  transform: translateY(-50%);
  width:24px; height:24px; 
  border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  background:rgba(0,0,0,.15);
  box-shadow:0 0 0 2px var(--bg);      /* ring for crispness on any bg */
  opacity:0; pointer-events:none; z-index:2;
  transition:.15s background-color ease,.15s border-color ease,.15s box-shadow ease,.15s opacity ease;
}
.select-mode .msg__select{opacity:1; pointer-events:auto}
.msg__select.selected{
  background:var(--brand); 
  border-color:var(--brand);
  box-shadow:0 0 0 2px var(--bg), inset 0 0 0 2px rgba(255,255,255,.12);
}
.msg__select::after{
  content:"✓";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  font-size:14px; font-weight:700; line-height:1;
  color:#fff; opacity:0;
}
.msg__select.selected::after{opacity:1}

/* Composer — glass */
.composer{position:sticky; bottom:0; display:flex; align-items:center; gap:10px; padding:10px; background:linear-gradient(180deg, rgba(15,20,26,0), rgba(15,20,26,.7) 30%, rgba(15,20,26,1) 60%); flex-wrap:wrap}
.composer .attach{font-size:18px}
.composer__input{flex:1; padding:12px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.08); background:rgba(31,38,49,.65); color:var(--text); outline:none; backdrop-filter: blur(12px)}
.btn--send{width:56px;height:40px; border-radius:999px; border:0; background:var(--brand); color:#fff; font-weight:700}

/* Reply preview block */
.reply{display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:8px 10px; margin:0 0 8px; flex:1 1 100%; max-width:100%; overflow:hidden; backdrop-filter: blur(10px)}
.reply.hidden{display:none}
.reply__bar{width:3px; height:30px; background:var(--brand); border-radius:2px}
.reply__title{font-size:13px; color:var(--muted)}
.reply__snippet{font-size:13px; color:var(--text); opacity:.9; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

/* Context & actions — glass */
.ctx{position:fixed; inset:0; background:rgba(0,0,0,.25); z-index:40; display:flex; align-items:flex-end; justify-content:center}
.ctx.hidden{display:none}
.ctx__reactions{position:fixed; transform:translate(-50%,-100%); background:rgba(31,38,49,.7); border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:6px; display:flex; gap:6px; box-shadow:var(--shadow); backdrop-filter: blur(12px)}
.ctx__reactions button{background:transparent; border:0; font-size:24px; padding:6px 10px; border-radius:10px}
.ctx__reactions button:active{background:rgba(255,255,255,.08)}
.ctx__sheet{width:100%; background:rgba(22,28,35,.9); border-top:1px solid rgba(255,255,255,.06); padding:6px 8px; backdrop-filter: blur(12px)}
.ctx__sheet button{display:block; width:100%; text-align:left; background:transparent; border:0; color:var(--text); padding:12px 10px; border-radius:10px}
.ctx__sheet button:active{background:rgba(255,255,255,.06)}
.only-admin{display:inline-block}
.only-admin.hidden{display:none}

/* Bottom select bar — glass */
.selectbar{position:fixed; left:0; right:0; bottom:0; display:flex; align-items:center; gap:10px; padding:10px; background:rgba(22,28,35,.9); border-top:1px solid rgba(255,255,255,.06); z-index:35; backdrop-filter: blur(12px)}
.selectbar.hidden{display:none}
.selectbar__spacer{flex:1}

/* Log panel */
.logpanel{position:fixed; inset:16px; background:var(--bg-elev-2); border:1px solid rgba(255,255,255,.06); border-radius:12px; z-index:50; display:flex; flex-direction:column}
.logpanel.hidden{display:none}
.logpanel__head{display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid rgba(255,255,255,.06)}
.logpanel__spacer{flex:1}
.logpanel__body{flex:1; margin:0; padding:10px; overflow:auto; font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

/* Buttons (glass look) */
.btn{background:transparent;border:0;color:inherit}
.btn--icon{width:36px;height:36px;border-radius:10px;background:rgba(31,38,49,.55);border:1px solid rgba(255,255,255,.06);color:inherit;display:grid;place-items:center;font-size:18px;backdrop-filter: blur(12px)}
.btn--icon:active{background:rgba(255,255,255,.08)}
.btn--brand{background:var(--brand); color:#fff; border-radius:10px; padding:8px 12px}
.hidden{display:none}
.toast{position:fixed; left:50%; transform:translate(-50%,0); bottom:74px; background:rgba(0,0,0,.85); padding:10px 14px; border-radius:12px; color:#fff; z-index:60; opacity:0; pointer-events:none; transition:.2s opacity ease}
.toast.show{opacity:1}


/* Status ticks (Telegram-like) */
.msg__ticks{position:absolute; right:8px; bottom:6px; display:inline-flex; align-items:center; gap:2px; font-size:12px; color:rgba(255,255,255,.55)}
.msg--me .msg__ticks{color:var(--brand)}

/* Scroll-to-bottom / unread button */
.jump{position:fixed; right:14px; bottom:86px; width:44px; height:44px; border-radius:50%; border:0; background:rgba(31,38,49,.9); color:#fff; font-size:20px; box-shadow:var(--shadow); display:grid; place-items:center; z-index:25}
.jump.hidden{display:none}
.jump:active{transform:translateY(1px)}

.pinned__text:hover{text-decoration:underline;cursor:pointer}

.blink{animation:blink 1.2s ease}
@keyframes blink{0%,100%{outline:0}50%{outline:2px solid var(--brand); outline-offset:2px}}

/* Edited mark */
.msg__edited{position:absolute; right:72px; bottom:6px; font-size:11.5px; color:rgba(255,255,255,.55)}
/* Editing mode */
.composer.editing .composer__input{outline:2px solid var(--brand)}