.messages-gate{
  padding:40px 24px; text-align:center; border-radius:var(--radius-l);
  border:1px solid var(--line); background:rgba(236,231,220,0.025);
}
.messages-gate p{ margin:0 0 18px; }

.messages-layout{
  display:grid; grid-template-columns:300px 1fr; gap:20px; align-items:stretch;
  height:calc(100vh - 260px); min-height:460px;
}
.messages-layout[hidden]{ display:none; }

.messages-layout__list{
  display:flex; flex-direction:column; gap:4px; overflow-y:auto;
  padding:10px; border-radius:var(--radius-l);
  border:1px solid var(--line); background:rgba(236,231,220,0.025);
}
.messages-layout__list-empty{ align-self:flex-start; }

.chat-list-item{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px; border-radius:var(--radius-m); border:1px solid transparent;
  background:transparent; text-align:left;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.chat-list-item:hover{ background:rgba(236,231,220,0.05); }
.chat-list-item--active{ background:rgba(127,162,201,0.1); border-color:var(--accent-dim); }


/* 3-tier presence (messages.py's _presence) -- same dot shape/position as
   .online-dot above (trades.js's simpler binary dot, out of scope here),
   just with a status-keyed color instead of one fixed green. */
.presence-dot{
  position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%;
  border:2px solid var(--ink-2);
}
.presence-dot[hidden]{ display:none; }
.presence-dot--online{ background:#5fc26a; }
.presence-dot--recent{ background:#e0c25f; }
.presence-dot--offline{ background:#6f6e6a; }
.presence-label{ font-size:0.72rem; color:var(--paper-dim); white-space:nowrap; }
.presence-label[hidden]{ display:none; }
.chat-list-item__body{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.chat-list-item__row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.chat-list-item__name{ font-weight:600; font-size:0.86rem; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-item__time{ flex-shrink:0; font-size:0.68rem; color:var(--paper-dim); }
.chat-list-item__preview{ font-size:0.78rem; color:var(--paper-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-list-item__badge{
  flex-shrink:0; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background:var(--gold); color:var(--ink); font-size:0.66rem; font-weight:700;
}


.thread-placeholder{ flex:1; display:flex; align-items:center; justify-content:center; color:var(--paper-dim); font-size:0.9rem; text-align:center; padding:24px; }
.thread-placeholder[hidden]{ display:none; }
.thread-active{ display:flex; flex-direction:column; min-height:0; flex:1; }
.thread-active[hidden]{ display:none; }

.thread-composer{ border-top:1px solid var(--line); padding:12px 18px; }
.thread-composer__input{
  display:block; width:100%; resize:none; max-height:160px; min-height:40px;
  padding:10px 14px; border-radius:var(--radius-m);
  border:1px solid var(--line); background:var(--ink-3); color:var(--paper);
  font-family:var(--font-body); font-size:0.88rem; line-height:1.5;
  transition:border-color .2s var(--ease);
}
.thread-composer__input:focus{ outline:none; border-color:var(--accent-dim); }
.thread-composer__input:disabled{ opacity:0.5; }
.thread-composer__row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.thread-composer__count{ font-size:0.72rem; color:var(--paper-dim); }

@media (max-width:760px){
  .messages-layout{ grid-template-columns:1fr; height:auto; }
  .messages-layout__list{ max-height:280px; }
  .messages-layout__thread{ height:60vh; }
}