/* WhatsApp-style two-pane chat. Logical properties throughout so RTL flips
   bubbles/rails automatically; bubble content itself is dir="auto". */

.chat{display:grid; grid-template-columns:320px 1fr; border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; height:100%; min-height:360px}

/* ---- left pane: conversation list ---- */
.chat-side{display:flex; flex-direction:column; border-inline-end:1px solid var(--line); min-width:0; min-height:0}
.chat-search{padding:.65rem .7rem; border-bottom:1px solid var(--line)}
.chat-search input{width:100%}
.chat-filters{display:flex; gap:.35rem; padding:.5rem .7rem; border-bottom:1px solid var(--line)}
.chat-filters .fchip{font-size:.74rem; font-weight:600; padding:.18rem .6rem; border-radius:999px; border:1px solid var(--line-2); color:var(--mut); cursor:pointer; background:transparent}
.chat-filters .fchip.on{color:var(--green); border-color:var(--green); background:var(--green-d)}
.chat-convos{flex:1; overflow:auto}
.convo{display:grid; grid-template-columns:auto 1fr auto; gap:.6rem; padding:.6rem .7rem; cursor:pointer; align-items:center; border-bottom:1px solid var(--line)}
.convo:hover{background:var(--hover)}
.convo.on{background:linear-gradient(90deg, rgba(61,220,132,.10), transparent)}
.convo .avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.85rem;color:#fff;flex:none;overflow:hidden}
.convo .avatar img{width:100%;height:100%;object-fit:cover}
.convo .cv-mid{min-width:0}
.convo .cv-name{font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.convo .cv-preview{color:var(--mut); font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.convo .cv-end{display:flex; flex-direction:column; align-items:flex-end; gap:.25rem}
.convo .cv-time{color:var(--dim); font-size:.7rem; white-space:nowrap}
.convo .cv-unread{background:var(--green); color:#04130a; font:700 .68rem/1 var(--mono); border-radius:999px; padding:.22rem .45rem; min-width:1.3rem; text-align:center}
.chat-more{padding:.6rem; text-align:center; border-top:1px solid var(--line)}

/* ---- right pane: thread ---- */
.chat-main{display:flex; flex-direction:column; min-width:0; min-height:0}
.chat-head{display:flex; align-items:center; gap:.7rem; padding:.6rem .9rem; border-bottom:1px solid var(--line); background:var(--panel-2)}
.chat-head .avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:.8rem;color:#fff;flex:none;overflow:hidden}
.chat-head .avatar img{width:100%;height:100%;object-fit:cover}
.chat-head .meta{min-width:0}
.chat-head .meta b{display:block; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chat-head .meta .jid{color:var(--dim); font-size:.72rem; font-family:var(--mono); direction:ltr; unicode-bidi:isolate}
.chat-head .acts{margin-inline-start:auto; display:flex; gap:.4rem; align-items:center}
.window-badge{font-size:.72rem; font-weight:600; padding:.2rem .55rem; border-radius:999px; border:1px solid currentColor; white-space:nowrap; cursor:default}
.window-badge.open{color:var(--green); background:var(--green-d)}
.window-badge.closed{color:var(--red); background:var(--red-d)}
.window-badge.unknown{color:var(--mut); background:transparent}

.chat-msgs{flex:1; overflow:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:.35rem;
  background:radial-gradient(600px 300px at 70% -10%, rgba(61,220,132,.04), transparent 70%), var(--bg)}
.day-sep{align-self:center; font-size:.7rem; color:var(--mut); background:var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:.15rem .7rem; margin:.5rem 0}
.bubble{max-width:min(72%, 34rem); border-radius:12px; padding:.45rem .65rem .3rem; font-size:.88rem; position:relative; word-break:break-word}
.bubble.in{background:var(--bub-in); border:1px solid var(--line); align-self:flex-start; border-start-start-radius:4px}
.bubble.out{background:var(--bub-out); color:var(--bub-out-text); align-self:flex-end; border-start-end-radius:4px; margin-inline-start:auto}
.bubble .b-text{white-space:pre-wrap; unicode-bidi:plaintext}
.bubble .b-name{font-size:.7rem; font-weight:700; color:var(--blue); margin-bottom:.15rem}
.bubble .b-meta{display:flex; gap:.3rem; align-items:center; justify-content:flex-end; font-size:.66rem; opacity:.75; margin-top:.15rem; unicode-bidi:plaintext}
.bubble .ticks{letter-spacing:-.12em}
.bubble .ticks.read{color:var(--blue)}
.bubble .ticks.failed{color:var(--red); cursor:pointer}
.bubble img.b-img{max-width:100%; max-height:280px; border-radius:8px; display:block; cursor:zoom-in; margin-bottom:.2rem}
.bubble audio{max-width:230px; display:block}
.media-card{display:flex; align-items:center; gap:.55rem; background:rgba(0,0,0,.12); border-radius:8px; padding:.5rem .6rem; margin-bottom:.2rem; font-size:.82rem}
.media-card a{white-space:nowrap}
.jump-pill{position:sticky; bottom:.4rem; align-self:center; background:var(--raise); border:1px solid var(--line-2); border-radius:999px; padding:.3rem .8rem; font-size:.78rem; cursor:pointer; box-shadow:var(--shadow)}

.chat-composer{border-top:1px solid var(--line); padding:.6rem .8rem; display:flex; gap:.5rem; align-items:flex-end; background:var(--panel)}
.chat-composer textarea{flex:1; min-height:2.4rem; max-height:9rem; resize:none; font-family:var(--ui); font-size:.9rem}
.chat-composer .send-btn{white-space:nowrap}
.attach-chip{display:flex; align-items:center; gap:.5rem; background:var(--panel-2); border:1px solid var(--line-2); border-radius:var(--r-s); padding:.4rem .6rem; font-size:.8rem; margin:0 .8rem .4rem}
.attach-chip img{width:36px;height:36px;object-fit:cover;border-radius:6px}
.attach-chip .x{cursor:pointer; color:var(--dim); margin-inline-start:auto}
.attach-chip .x:hover{color:var(--red)}
.attach-panel{border-top:1px solid var(--line); padding:.7rem .9rem; background:var(--panel-2)}
.attach-panel .tabs{display:flex; gap:.4rem; margin-bottom:.6rem}
.attach-panel .tabs .tab{font-size:.78rem; font-weight:600; padding:.25rem .7rem; border-radius:999px; border:1px solid var(--line-2); cursor:pointer; color:var(--mut); background:transparent}
.attach-panel .tabs .tab.on{color:var(--green); border-color:var(--green); background:var(--green-d)}

.chat-empty{flex:1; display:grid; place-items:center; color:var(--dim); text-align:center; padding:2rem}

/* single-pane on small screens */
@media(max-width:760px){
  .chat{grid-template-columns:1fr}
  .chat-side{border-inline-end:0}
  .chat.thread-open .chat-side{display:none}
  .chat:not(.thread-open) .chat-main{display:none}
  .chat-back{display:inline-flex}
}
@media(min-width:761px){ .chat-back{display:none} }

/* Reactions are annotations on another message, not messages — a small chip,
   aligned like a bubble but without the bubble chrome. */
.reaction-line{display:flex; align-items:center; gap:.35rem; align-self:flex-start; padding:.1rem .1rem; margin:-.1rem 0}
.reaction-line.out{align-self:flex-end}
.reaction-line .rx-emoji{font-size:1.05rem; line-height:1}
.reaction-line .rx-lbl{color:var(--dim); font-size:.72rem}

/* Wide screens: give the conversation list room rather than stretching the
   thread pane alone. */
@media(min-width:1500px){ .chat{grid-template-columns:380px 1fr} }
@media(min-width:2000px){ .chat{grid-template-columns:440px 1fr} }