/* ============================================================
   ShareCardLink - Chat page (status_page.css ke upar)
   ============================================================ */

/* ---------- tabs ---------- */
.ch-tabs{
  position:sticky;top:0;z-index:29;display:flex;gap:6px;
  padding:10px 12px;background:var(--bg);
}
.ch-tab{
  flex:1;border:0;cursor:pointer;background:#e7ebee;color:var(--mut);
  font:600 13.5px/1 inherit;padding:11px 8px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  transition:background .18s,color .18s;
}
.ch-tab.on{background:var(--a);color:#fff}
.ch-badge{
  font-style:normal;background:var(--a);color:#fff;font-size:11px;font-weight:700;
  min-width:19px;height:19px;border-radius:999px;display:inline-grid;place-items:center;padding:0 5px;
}
.ch-tab.on .ch-badge{background:rgba(255,255,255,.28)}

/* ---------- list rows ---------- */
.ch-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:0 0 auto}
.ch-meta em{font-style:normal;font-size:11.5px;color:var(--mut)}
.ch-fo{
  flex:0 0 auto;border:1.5px solid var(--a);background:transparent;color:var(--a);
  font:600 12.5px/1 inherit;padding:8px 14px;border-radius:999px;cursor:pointer;
  transition:background .18s,color .18s;
}
.ch-fo.on{background:var(--a);color:#fff;border-color:var(--a)}
.ch-fo:disabled{opacity:.6}
.ch-msg{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  color:var(--a);background:#e1efea;
}
.ch-msg svg{width:19px;height:19px}
.ch-urow{gap:10px}
.ch-urow .sp-rt span{font-size:12px}

/* ---------- search ---------- */
.ch-search{
  display:flex;align-items:center;gap:10px;margin:0 12px 12px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0 16px;
}
.ch-search svg{width:18px;height:18px;color:var(--mut);flex:0 0 auto}
.ch-search input{
  flex:1;min-width:0;border:0;outline:none;background:transparent;color:var(--tx);
  font:15px/1 inherit;padding:13px 0;
}
.ch-more{text-align:center;padding:16px}
.ch-more button{
  border:1px solid var(--line);background:var(--card);color:var(--tx);
  font:600 13px/1 inherit;padding:11px 20px;border-radius:999px;cursor:pointer;
}

/* ---------- invite ---------- */
.ch-inv{padding:16px;margin-top:12px}
.ch-num{display:flex;gap:10px}
.ch-num input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;outline:none;
  padding:13px 15px;font:15px/1 inherit;color:var(--tx);background:#fff;
}
.ch-num input:focus{border-color:var(--a)}
.ch-num button{
  flex:0 0 auto;border:0;background:var(--a);color:#fff;font:600 14px/1 inherit;
  padding:13px 22px;border-radius:12px;cursor:pointer;
}
.ch-pickc{
  width:100%;margin-top:12px;border:1px dashed var(--line);background:transparent;
  color:var(--tx);font:600 13.5px/1 inherit;padding:14px;border-radius:12px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
.ch-pickc svg{width:20px;height:20px;color:var(--a)}
.ch-note{margin:10px 0 0;font-size:12.5px;color:var(--mut);text-align:center}

/* ---------- thread ---------- */
.ch-thread-top{gap:10px;border-bottom:1px solid var(--line);background:var(--card)}
.ch-t-av{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#dfe5e9;flex:0 0 auto}
.ch-t-n{min-width:0;flex:1}
.ch-t-n b{display:block;font-size:15.5px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-t-n a{font-size:12px;color:var(--a);font-weight:600}

.ch-msgs{
  padding:14px 12px 86px;min-height:calc(100svh - 150px);
  display:flex;flex-direction:column;gap:8px;
  background:#e9edf0;
}
.ch-hint{
  align-self:center;background:#dce6e2;color:#3e5b53;font-size:11.5px;
  padding:7px 14px;border-radius:999px;margin-bottom:6px;
}
.ch-b{
  max-width:78%;padding:9px 13px 7px;border-radius:14px;font-size:14.5px;line-height:1.45;
  word-break:break-word;white-space:pre-wrap;position:relative;
  box-shadow:0 1px 1px rgba(0,0,0,.07);
}
.ch-b em{display:block;font-style:normal;font-size:10.5px;opacity:.6;text-align:right;margin-top:2px}
.ch-b.me{align-self:flex-end;background:#d6f3e6;border-bottom-right-radius:4px}
.ch-b.you{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}

.ch-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:35;display:flex;gap:10px;align-items:center;
  padding:10px 12px max(12px,env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line);
  max-width:720px;margin:0 auto;
}
.ch-bar input{
  flex:1;min-width:0;border:1px solid var(--line);background:#f5f7f8;border-radius:999px;
  outline:none;padding:13px 18px;font:15px/1 inherit;color:var(--tx);
}
.ch-bar input:focus{border-color:var(--a)}

@media (min-width:560px){
  .ch-msgs{max-width:720px;margin:0 auto}
}