body { font-family: "Vazirmatn", Tahoma, "Segoe UI", sans-serif; margin: 0; background: #0f1419; color: #e7ecf3; line-height: 1.6; }
.topbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; padding: .85rem 1rem; background: #1a2332; }
.topbar a { color: #8ec5ff; text-decoration: none; font-size: .95rem; }
.logout-form { margin-right: auto; margin-left: 0; }
.btn-link { background: transparent; border: 1px solid #556; color: #cbd5e1; padding: .35rem .75rem; }
.container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.card { background: #1a2332; padding: 1rem 1.25rem; border-radius: 10px; }
.login-card { max-width: 420px; margin: 2rem auto; }
.err { color: #ff8a80; }
.hint { color: #94a3b8; font-size: .9rem; }
label { display: block; margin: .65rem 0; }
input { width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: 8px; border: 1px solid #334; background: #0f1419; color: inherit; }
button { margin-top: .5rem; padding: .5rem 1rem; border: 0; border-radius: 8px; background: #3d7eff; color: #fff; cursor: pointer; font-family: inherit; }
button.btn-muted { background: #445566; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.search-row { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
.search-row input { flex: 1; min-width: 200px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; margin-top: .5rem; font-size: .92rem; }
td, th { border-bottom: 1px solid #334; padding: .55rem .4rem; text-align: right; vertical-align: top; }
.text-preview { max-width: 280px; word-break: break-word; }
code { font-size: .85em; background: #243044; padding: .1rem .35rem; border-radius: 4px; }
.pager { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
.pager a { color: #8ec5ff; }

.chat-header { margin-bottom: .75rem; }
.meta-list { list-style: none; padding: 0; margin: .5rem 0; color: #94a3b8; font-size: .9rem; }
.meta-list li { margin: .25rem 0; }
.back-link { color: #8ec5ff; font-size: .9rem; }

.chat-toolbar { display: flex; gap: .5rem; margin-bottom: .5rem; position: sticky; top: 0; z-index: 2; background: #0f1419; padding: .35rem 0; }
.chat-viewport {
  height: min(70vh, 720px);
  overflow-y: auto;
  border: 1px solid #334;
  border-radius: 12px;
  background: #121820;
  padding: .75rem;
}
.chat-thread { display: flex; flex-direction: column; gap: .65rem; min-height: 100%; }
.messages { display: flex; flex-direction: column; gap: .5rem; }
.msg { padding: .65rem .85rem; border-radius: 12px; max-width: min(85%, 520px); word-break: break-word; }
.msg.in { background: #243044; align-self: flex-start; border-bottom-right-radius: 4px; }
.msg.out { background: #1e4d3a; align-self: flex-end; border-bottom-left-radius: 4px; }
.msg .meta { font-size: .78rem; opacity: .85; margin-bottom: .35rem; display: flex; flex-wrap: wrap; gap: .35rem .65rem; }
.msg .sender { font-weight: 600; }
.msg .time { margin-right: auto; }
.msg .text { white-space: pre-wrap; }

.phone-ltr { direction: ltr; text-align: left; unicode-bidi: embed; display: inline-block; }
.platform-badge { display: inline-flex; align-items: center; gap: .35rem; }
.platform-icon { vertical-align: middle; }

.messenger-layout { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 1rem; min-height: 70vh; }
.messenger-sidebar { overflow: hidden; display: flex; flex-direction: column; }
.conv-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; flex: 1; }
.conv-list li a { display: block; padding: .65rem .5rem; border-bottom: 1px solid #334; color: inherit; text-decoration: none; }
.conv-list li.active a { background: #243044; }
.conv-title { display: block; font-weight: 600; }
.conv-meta { font-size: .78rem; color: #94a3b8; }
.chat-info-panel .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .5rem 1rem; font-size: .9rem; }
.chat-info-panel .info-grid span { display: block; color: #94a3b8; font-size: .78rem; }
.identity-hint { background: #2a2f1a; border: 1px solid #665; padding: .5rem .75rem; border-radius: 8px; font-size: .85rem; }
.pagination { margin-top: .75rem; font-size: .88rem; }
.pagination-controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 50; }
.modal-backdrop.open { display: flex; }
.modal { background: #1a2332; padding: 1.25rem; border-radius: 12px; max-width: 420px; width: 92%; }
.modal label.check { display: flex; gap: .5rem; align-items: center; margin: .35rem 0; }
.empty-pane { min-height: 320px; display: flex; align-items: center; justify-content: center; }