/* ستريتا كونكت — نضيف ورايق */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --line: #e6eaef;
  --text: #1d2733;
  --muted: #77828f;
  --accent: #059669;
  --accent-soft: #e7f6f0;
  --red: #dc2626;
  --amber: #d97706;
  --blue: #2563eb;
}
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}

/* ---- top bar ---- */
.top {
  display: flex; align-items: center; gap: 24px;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding: 10px 22px; position: sticky; top: 0; z-index: 10;
}
.brand { font-weight: 800; font-size: 17px; color: var(--accent); white-space: nowrap; }
.brand-big { font-weight: 800; font-size: 24px; color: var(--accent); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  border: 0; background: transparent; padding: 8px 14px; border-radius: 10px;
  font-size: 14.5px; cursor: pointer; color: var(--muted); font-family: inherit;
}
.tab:hover { background: var(--bg); }
.tab.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

main { max-width: 1180px; margin: 22px auto; padding: 0 18px 60px; }
.view.hidden, .hidden { display: none !important; }

/* ---- cards & layout ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 1px 3px rgba(20,30,45,.04); }
.pad { padding: 16px; overflow-x: auto; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); gap: 14px; margin-top: 12px; }
.row { display: flex; align-items: center; }
.row.between { justify-content: space-between; }
.row.gap { gap: 10px; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; }
.mt { margin-top: 28px; }
.mt-s { margin-top: 12px; }
.center-col { display: flex; flex-direction: column; align-items: center; gap: 12px; }
h2 { font-size: 18px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.err { color: var(--red); font-size: 13.5px; margin-top: 8px; min-height: 1em; }
/* English identifiers inside RTL text: isolate the bidi run so dots/orders don't jump */
code {
  background: var(--bg); padding: 1px 7px; border-radius: 6px; font-size: 12.5px;
  direction: ltr; unicode-bidi: isolate; display: inline-block;
  max-width: 100%; overflow-wrap: anywhere; color: #45525f;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
}

/* ---- buttons ---- */
.btn {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  padding: 8px 16px; border-radius: 10px; cursor: pointer; font-size: 14px; font-family: inherit;
}
.btn:hover { border-color: #c9d2dc; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.btn.primary:hover { filter: brightness(1.06); }
.btn.danger { color: var(--red); }
.btn.mini { padding: 4px 9px; font-size: 12.5px; border-radius: 8px; white-space: nowrap; }
.btn.wide { width: 100%; }
.seg {
  border: 1px solid var(--line); background: var(--card); padding: 7px 16px;
  border-radius: 999px; cursor: pointer; font-size: 13.5px; color: var(--muted); font-family: inherit;
}
.seg.active { background: var(--text); border-color: var(--text); color: #fff; font-weight: 600; }

/* ---- hook cards ---- */
.hook-card { padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.hook-card .head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; }
.hook-card .name { font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
/* meta = flex items (no literal dots) so RTL/LTR pieces never reorder or dangle */
.hook-card .meta {
  font-size: 12.5px; color: var(--muted);
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; line-height: 1.9;
}
.hook-card .meta > span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hook-card .tpl {
  background: var(--bg); border-radius: 10px; padding: 9px 11px; font-size: 13.5px;
  white-space: pre-wrap; max-height: 96px; overflow: hidden; color: #3c4856;
  unicode-bidi: plaintext; overflow-wrap: anywhere; position: relative; line-height: 1.8;
}
.hook-card .tpl::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 22px;
  background: linear-gradient(transparent, var(--bg));
}
.hook-card .url {
  font-size: 11.5px; color: var(--muted); direction: ltr; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--bg); border-radius: 8px; padding: 5px 9px;
}
.hook-card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.pill { font-size: 11.5px; padding: 3px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.pill.on { background: var(--accent-soft); color: var(--accent); }
.pill.off { background: #f1f3f6; color: var(--muted); }
.pill.erp { background: #eef2ff; color: #4f46e5; }

/* ---- tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th { text-align: right; color: var(--muted); font-weight: 600; padding: 7px 9px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 8px 9px; border-bottom: 1px solid #f0f3f6; vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .ltr { direction: ltr; text-align: left; }

/* ---- status chips ---- */
.st { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.st.queued { background: #fef3e2; color: var(--amber); }
.st.sent { background: #f1f3f6; color: #5b6672; }
.st.delivered { background: #e2f0ff; color: var(--blue); }
.st.read { background: var(--accent-soft); color: var(--accent); }
.st.failed { background: #fdeaea; color: var(--red); }
.st.received { background: #eef2ff; color: #4f46e5; }
.failreason { color: var(--red); font-size: 12.5px; margin-top: 3px; }

/* ---- stats chips ---- */
.chips { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 18px; text-align: center; min-width: 108px; }
.chip .n { font-size: 21px; font-weight: 800; }
.chip .l { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.chip.warn .n { color: var(--amber); }
.chip.bad .n { color: var(--red); }
.chip.ok .n { color: var(--accent); }
.chip.info .n { color: var(--blue); }

/* ---- inbox ---- */
.inbox { display: grid; grid-template-columns: 320px 1fr; gap: 14px; height: calc(100vh - 150px); min-height: 440px; }
.chatlist { overflow-y: auto; }
.chat-item { padding: 12px 14px; border-bottom: 1px solid #f0f3f6; cursor: pointer; }
.chat-item:hover { background: var(--bg); }
.chat-item.active { background: var(--accent-soft); }
.chat-item .top-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.chat-item .who { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item .when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.chat-item .last { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; }
.badge { background: var(--accent); color: #fff; font-size: 11px; border-radius: 999px; padding: 1px 7px; font-weight: 700; }
.thread { display: flex; flex-direction: column; overflow: hidden; }
.thread-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 700; }
.thread-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fafbfc; }
.msg { max-width: 72%; padding: 9px 13px; border-radius: 14px; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.msg.in { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-top-right-radius: 4px; }
.msg.out { align-self: flex-end; background: #d8f4e7; border-top-left-radius: 4px; }
.msg .mmeta { display: flex; gap: 6px; justify-content: flex-end; font-size: 11px; color: var(--muted); margin-top: 4px; }
.thread-input { display: flex; gap: 9px; padding: 12px; border-top: 1px solid var(--line); }
.thread-input input { flex: 1; }

/* ---- forms ---- */
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px;
  font-size: 14px; font-family: inherit; background: var(--card); color: var(--text);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); margin-top: 10px; }
textarea { resize: vertical; }

/* ---- modal ---- */
.modal { position: fixed; inset: 0; background: rgba(15,23,32,.45); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 18px; }
.modal-card { background: var(--card); border-radius: 16px; padding: 22px; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; }
.preview { background: var(--bg); border-radius: 10px; padding: 12px; margin-top: 12px; font-size: 13.5px; white-space: pre-wrap; }

/* ---- login ---- */
.login { position: fixed; inset: 0; background: var(--bg); display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 36px; width: 320px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.login-card input { text-align: center; font-size: 20px; letter-spacing: 6px; }

/* ---- link view ---- */
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-start: 4px; }
.dot.on { background: #22c55e; }
.dot.off { background: #cbd5e1; }
.dot.mid { background: var(--amber); }
.qr { width: 280px; height: 280px; border-radius: 12px; border: 1px solid var(--line); }
.note { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 10px 13px; font-size: 13px; line-height: 1.7; }

/* ---- toast ---- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  background: #223041; color: #fff; padding: 11px 20px; border-radius: 12px;
  font-size: 14px; z-index: 200; box-shadow: 0 6px 24px rgba(15,25,40,.25);
  max-width: min(92vw, 460px); text-align: center;
  animation: toast-in .18s ease-out;
}
.toast.bad { background: #a01d1d; }
.toast.ok { background: var(--accent); }
@keyframes toast-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } to { opacity: 1; transform: translateX(-50%); } }

@media (max-width: 760px) {
  .inbox { grid-template-columns: 1fr; height: auto; }
  .chatlist { max-height: 260px; }
  .top { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
  .tabs { width: 100%; justify-content: space-between; gap: 2px; }
  .tab { padding: 7px 9px; font-size: 13px; }
  main { margin-top: 12px; padding: 0 12px 50px; }
  .chip { min-width: 88px; padding: 8px 12px; flex: 1; }
  .modal { padding: 10px; }
  .modal-card { padding: 16px; }
}