/* ══════════ «تواصل مع فريق العمل» — support-chat.js ══════════ */
.tc-bg {
  position: fixed; inset: 0; z-index: 650; /* تحت نافذة الدخول برقم الهاتف (700) */
  background: rgb(var(--graphite-rgb) / .764);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity var(--dur-3) var(--ease-standard);
}
.tc-bg.open { opacity: 1; pointer-events: auto; }
.tc-sheet {
  position: relative;
  width: 100%; max-width: 480px; height: min(86vh, 680px);
  height: min(86dvh, 680px);
  display: flex; flex-direction: column;
  background: var(--bg-1, var(--n-950));
  border: 1px solid rgb(var(--mint-rgb) / .236); border-bottom: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--elev-4);
  transform: translateY(24px); transition: transform var(--dur-3) var(--ease-standard);
  font-family: var(--font-ui); color: var(--text, var(--n-50));
  overflow: hidden;
}
.tc-bg.open .tc-sheet { transform: none; }
@media (min-width: 700px) {
  .tc-bg { align-items: center; }
  .tc-sheet { border-radius: var(--r-lg); border-bottom: 1px solid rgb(var(--mint-rgb) / .236); }
}

.tc-head {
  display: flex; align-items: center; gap: var(--phi-0h);
  padding: var(--sp-md) var(--phi-1h);
  background: var(--red, var(--c-primary));
  border-bottom: 1px solid rgb(var(--mint-rgb) / .236);
}
.tc-avatar {
  flex: none; width: var(--h-lg); height: var(--h-lg); border-radius: 50%;
  display: grid; place-items: center;
  background: rgb(var(--graphite-rgb) / .236); border: 1px solid var(--gold, var(--c-accent));
  color: var(--gold, var(--c-accent)); font-size: var(--t-body-lg);
}
.tc-head-txt { flex: 1; min-width: 0; }
.tc-head h3 { margin: 0; font-size: var(--t-body-lg); font-weight: var(--fw-bold); color: var(--gold-h, var(--mint-300)); }
.tc-head p { margin: var(--sp-3xs) 0 0; font-size: var(--t-caption); color: var(--text-2, var(--n-400)); }
.tc-x {
  flex: none; width: var(--icon-box); height: var(--icon-box); border-radius: 50%;
  border: 1px solid rgb(var(--white-rgb) / .146); background: rgb(var(--graphite-rgb) / .236);
  color: var(--text, var(--n-50)); font-size: var(--t-body-lg); cursor: pointer;
}
.tc-x:hover { border-color: var(--gold, var(--c-accent)); color: var(--gold, var(--c-accent)); }

.tc-body {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: var(--phi-1h) var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-sm);
  background: var(--bg-0, var(--n-950));
}
.tc-empty {
  margin: auto; max-width: 300px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-sm);
  color: var(--text-2, var(--n-400)); font-size: var(--t-label); line-height: 1.6;
}
.tc-empty i { font-size: var(--t-h1); color: var(--gold, var(--c-accent)); }
.tc-empty b { color: var(--text, var(--n-50)); font-size: var(--t-body-lg); }

.tc-day { text-align: center; margin: var(--sp-xs) 0 var(--sp-2xs); }
.tc-day span {
  display: inline-block; padding: var(--sp-3xs) var(--phi-0h); border-radius: var(--r-sm);
  background: rgb(var(--white-rgb) / .056); color: var(--text-3, var(--n-600)); font-size: var(--t-caption);
}
.tc-msg {
  max-width: 82%; padding: var(--sp-sm) var(--sp-md) var(--sp-xs); border-radius: var(--r-lg);
  font-size: var(--t-body); line-height: 1.55; word-wrap: break-word; overflow-wrap: anywhere;
}
.tc-msg p { margin: 0; white-space: pre-wrap; }
.tc-msg time { display: block; margin-top: var(--sp-3xs); font-size: var(--t-caption); opacity: .7; text-align: end; }
.tc-msg.me {
  align-self: flex-end; /* رسائلي في الطرف المقابل كما في واتساب العربي */
  background: var(--c-primary);
  border-end-end-radius: var(--r-sm);
}
.tc-msg.them {
  align-self: flex-start;
  background: var(--bg-3, var(--n-900)); border: 1px solid rgb(var(--mint-rgb) / .236);
  border-end-start-radius: var(--r-sm);
}
.tc-msg.failed { opacity: .6; }
.tc-who { display: block; font-size: var(--t-caption); font-weight: var(--fw-bold); color: var(--gold, var(--c-accent)); margin-bottom: var(--sp-3xs); }

.tc-err {
  margin: 0 var(--sp-md) var(--sp-xs); padding: var(--sp-sm) var(--phi-0h); border-radius: var(--r-lg);
  background: rgb(var(--cobalt-rgb) / .236); border: 1px solid rgb(var(--cobalt-rgb) / .618);
  color: var(--danger-300); font-size: var(--t-label);
}
.tc-form {
  padding: var(--phi-0h) var(--phi-0h) calc(var(--phi-0h) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgb(var(--mint-rgb) / .146); background: var(--bg-1, var(--n-950));
  display: flex; flex-direction: column; gap: var(--sp-sm);
}
.tc-name, .tc-row textarea {
  width: 100%; box-sizing: border-box;
  background: var(--bg-2, var(--n-950)); color: var(--text, var(--n-50));
  border: 1px solid rgb(var(--mint-rgb) / .236); border-radius: var(--r-lg);
  font-family: inherit; font-size: var(--t-body-lg); /* لا تكبير تلقائي على iPhone */
  padding: var(--sp-sm) var(--sp-md); outline: none;
}
.tc-name:focus, .tc-row textarea:focus { border-color: var(--gold, var(--c-accent)); }
.tc-row { display: flex; align-items: flex-end; gap: var(--sp-sm); }
.tc-row textarea { resize: none; max-height: 120px; line-height: 1.4; }
.tc-send {
  flex: none; width: var(--touch-min); height: var(--touch-min); border-radius: 50%; border: 0; cursor: pointer;
  background: var(--c-accent);
  color: var(--n-950); font-size: var(--t-body-lg);
}
[dir="rtl"] .tc-send i { transform: scaleX(-1); }
.tc-send:disabled { opacity: .55; cursor: default; }

/* الشارة على زر الصفحة الرئيسية */
[data-team-chat-btn] { position: relative; }
.tc-badge {
  position: absolute; top: 4px; inset-inline-end: var(--sp-2xs);
  min-width: var(--icon-md); height: var(--icon-md); padding: 0 var(--sp-xs); border-radius: var(--r-sm);
  background: var(--gold-h, var(--mint-300)); color: var(--n-950);
  font-size: var(--t-caption); font-weight: var(--fw-bold); line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px var(--red, var(--c-primary));
}

/* شريط العروض (push.js) ثابت أسفل الشاشة بطبقة أعلى — يُخفى والدردشة مفتوحة */
body.tc-open .site-notification { display: none !important; }


/* ══════════ التبويبات والملف والدردشة العامة (v2) ══════════ */
.tc-me { flex: none; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.tc-tabs { display: flex; gap: var(--sp-xs); padding: var(--sp-sm) var(--phi-0h); background: var(--bg-1, var(--n-950)); border-bottom: 1px solid rgb(var(--mint-rgb) / .146); }
.tc-tabs button {
  flex: 1; position: relative; display: flex; align-items: center; justify-content: center; gap: var(--sp-xs);
  padding: var(--sp-sm) var(--sp-xs); border-radius: var(--r-lg); border: 1px solid transparent; background: transparent;
  color: var(--text-2, var(--n-400)); font: inherit; font-size: var(--t-label); font-weight: var(--fw-bold); cursor: pointer;
}
.tc-tabs button[aria-selected="true"] { background: rgb(var(--mint-rgb) / .146); border-color: rgb(var(--mint-rgb) / .382); color: var(--gold-h, var(--mint-300)); }
.tc-tabs small { font-weight: var(--fw-medium); color: var(--mint-300); font-size: var(--t-caption); }
.tc-tab-badge { position: absolute; top: 4px; inset-inline-end: var(--sp-sm); width: 8px; height: 8px; border-radius: 50%; background: var(--gold-h, var(--mint-300)); font-size: 0; }
.tc-banner { padding: var(--sp-sm) var(--sp-md); font-size: var(--t-label); color: var(--text-2, var(--n-400)); background: rgb(var(--mint-rgb) / .056); border-bottom: 1px solid rgb(var(--mint-rgb) / .146); line-height: 1.6; }
.tc-rules summary { cursor: pointer; color: var(--gold, var(--c-accent)); font-weight: var(--fw-bold); }
.tc-rules p { margin: var(--sp-xs) 0 0; }

/* الصورة الشخصية وإطارها حسب عدد الطلبات */
.tc-av {
  --s: 34px; --ring: rgb(var(--white-rgb) / .146);
  flex: none; width: var(--s); height: var(--s); border-radius: 50%; padding: var(--sp-3xs); box-sizing: border-box;
  background: var(--ring); display: inline-grid; place-items: center; overflow: hidden;
}
.tc-av > img, .tc-av > span { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  color: #FFFFFF; font-weight: var(--fw-bold); font-size: calc(var(--s) * .38); box-shadow: 0 0 0 2px var(--bg-0, var(--n-950)); }
.tc-av > i { color: var(--gold-h, var(--mint-300)); font-size: calc(var(--s) * .42); }
.tc-av.t-new { --ring: rgb(var(--white-rgb) / .236); }
.tc-av.t-bronze { --ring: var(--c-warning); }
.tc-av.t-silver { --ring: linear-gradient(135deg, #FFFFFF, var(--n-400), var(--n-50)); }
.tc-av.t-gold { --ring: linear-gradient(135deg, var(--mint-100), var(--c-accent), var(--mint-600), var(--mint-300)); padding: var(--sp-2xs); }
.tc-av.t-diamond { --ring: conic-gradient(from 0deg, var(--mint-300), var(--cobalt-200), var(--c-danger-ink), var(--mint-300), var(--mint-300)); padding: var(--sp-2xs); animation: tc-spin 6744ms linear infinite; }
.tc-av.t-diamond > img, .tc-av.t-diamond > span { animation: tc-spin 6744ms linear infinite reverse; }
.tc-av.staff { --ring: var(--gold-h, var(--mint-300)); background: var(--ring); }
.tc-av.staff > i { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; background: var(--red-dim, var(--n-850)); }
@keyframes tc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tc-av.t-diamond, .tc-av.t-diamond > img, .tc-av.t-diamond > span { animation: none; } }

.tc-tier { display: inline-flex; align-items: center; gap: var(--sp-2xs); padding: 1px var(--sp-sm); border-radius: var(--r-sm); font-size: var(--t-caption); font-weight: var(--fw-bold); white-space: nowrap; }
.tc-tier.t-new { background: rgb(var(--white-rgb) / .09); color: var(--text-2, var(--n-400)); }
.tc-tier.t-bronze { background: rgb(var(--warning-rgb) / .146); color: var(--c-warning); }
.tc-tier.t-silver { background: rgb(var(--ice-rgb) / .146); color: var(--n-50); }
.tc-tier.t-gold { background: rgb(var(--mint-rgb) / .236); color: var(--gold-h, var(--mint-300)); }
.tc-tier.t-diamond { background: rgb(var(--cobalt-rgb) / .236); color: var(--cobalt-100); }
.tc-staff { font-size: var(--t-caption); font-weight: var(--fw-bold); color: var(--n-950); background: var(--gold, var(--c-accent)); padding: 1px var(--sp-sm); border-radius: var(--r-sm); }

/* رسائل الدردشة العامة */
.tc-cm { display: flex; align-items: flex-end; gap: var(--sp-sm); max-width: 90%; align-self: flex-start; }
.tc-cm.me { align-self: flex-end; }
.tc-cm-bubble { min-width: 0; padding: var(--sp-xs) var(--phi-0h) var(--sp-xs); border-radius: var(--r-lg); background: var(--bg-3, var(--n-900)); border: 1px solid rgb(var(--mint-rgb) / .146); border-end-start-radius: var(--r-sm); }
.tc-cm.me .tc-cm-bubble { background: var(--c-primary); border-color: transparent; border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-sm); }
.tc-cm.staff .tc-cm-bubble { border-color: rgb(var(--mint-rgb) / .5); background: var(--c-accent-soft); }
.tc-cm-head { display: flex; align-items: center; gap: var(--sp-xs); flex-wrap: wrap; margin-bottom: var(--sp-3xs); }
.tc-cm-head b { font-size: var(--t-label); color: var(--gold, var(--c-accent)); }
.tc-cm p { margin: 0; font-size: var(--t-body); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.tc-cm-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-xs); }
.tc-cm-foot time { font-size: var(--t-caption); opacity: .65; }
.tc-more { border: 0; background: none; color: inherit; opacity: .55; cursor: pointer; padding: var(--sp-3xs) var(--sp-2xs); font-size: var(--t-label); }
.tc-more:hover { opacity: 1; }
.tc-quote { display: grid; gap: 1px; margin: var(--sp-3xs) 0 var(--sp-xs); padding: var(--sp-xs) var(--sp-sm); border-inline-start: var(--phi-n2) solid var(--gold, var(--c-accent)); background: rgb(var(--graphite-rgb) / .236); border-radius: var(--r-md); font-size: var(--t-caption); }
.tc-quote b { color: var(--gold, var(--c-accent)); font-size: var(--t-caption); }
.tc-quote span { opacity: .85; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tc-quote.big { margin-bottom: var(--phi-0h); }
.tc-older { align-self: center; border: 1px solid rgb(var(--mint-rgb) / .236); background: transparent; color: var(--gold, var(--c-accent)); border-radius: var(--r-sm); padding: var(--sp-2xs) var(--sp-md); font: inherit; font-size: var(--t-caption); cursor: pointer; }

/* فريق العمل: صور وطلبات وردود تلقائية وقراءة */
.tc-sys { align-self: center; max-width: 88%; text-align: center; font-size: var(--t-label); line-height: 1.6; color: var(--text-2, var(--n-400));
  background: rgb(var(--mint-rgb) / .09); border: 1px dashed rgb(var(--mint-rgb) / .382); border-radius: var(--r-lg); padding: var(--sp-sm) var(--sp-md); }
.tc-sys i { color: var(--gold, var(--c-accent)); }
.tc-sys time { display: block; font-size: var(--t-caption); opacity: .6; margin-top: var(--sp-3xs); }
.tc-img { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; margin-bottom: var(--sp-2xs); }
.tc-img img { display: block; width: 220px; max-width: 100%; border-radius: var(--r-lg); object-fit: cover; background: rgb(var(--graphite-rgb) / .236); }
.tc-order { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-sm) var(--phi-0h); margin-bottom: var(--sp-2xs); border-radius: var(--r-lg); background: rgb(var(--graphite-rgb) / .236); border: 1px solid rgb(var(--mint-rgb) / .236); }
.tc-order i { color: var(--gold, var(--c-accent)); font-size: var(--t-h4); }
.tc-order div { display: grid; }
.tc-order b { font-size: var(--t-label); }
.tc-order span { font-size: var(--t-caption); opacity: .85; }
.tc-msg.deleted p { font-style: italic; opacity: .7; }
.tc-read { color: var(--cobalt-300); }
.tc-typing { padding: var(--sp-2xs) var(--sp-md); font-size: var(--t-caption); color: var(--text-2, var(--n-400)); background: var(--bg-0, var(--n-950)); }
.tc-dots { display: inline-flex; gap: var(--sp-2xs); vertical-align: middle; }
.tc-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--gold, var(--c-accent)); animation: tc-dot 984ms infinite var(--ease-standard); }
.tc-dots i:nth-child(2) { animation-delay: var(--dur-2); } .tc-dots i:nth-child(3) { animation-delay: var(--dur-3); }
@keyframes tc-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.tc-chips { display: flex; gap: var(--sp-xs); overflow-x: auto; padding: var(--sp-sm) var(--phi-0h) 0; background: var(--bg-1, var(--n-950)); scrollbar-width: none; }
.tc-chips::-webkit-scrollbar { display: none; }
.tc-chips button { flex: none; border: 1px solid rgb(var(--mint-rgb) / .382); background: rgb(var(--mint-rgb) / .09); color: var(--gold-h, var(--mint-300));
  border-radius: var(--r-sm); padding: var(--sp-xs) var(--sp-md); font: inherit; font-size: var(--t-label); cursor: pointer; white-space: nowrap; }
.tc-reply { display: flex; align-items: center; gap: var(--sp-sm); padding: var(--sp-xs) var(--sp-md); background: var(--bg-2, var(--n-950)); border-top: 1px solid rgb(var(--mint-rgb) / .236); font-size: var(--t-label); }
.tc-reply > i { color: var(--gold, var(--c-accent)); }
.tc-reply div { flex: 1; min-width: 0; display: grid; }
.tc-reply b { color: var(--gold, var(--c-accent)); }
.tc-reply span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
.tc-reply button { border: 0; background: none; color: inherit; cursor: pointer; }
.tc-attach { flex: none; width: var(--touch-min); height: var(--touch-min); border-radius: 50%; border: 1px solid rgb(var(--mint-rgb) / .236); background: transparent; color: var(--gold, var(--c-accent)); cursor: pointer; font-size: var(--t-body-lg); }
.tc-send small { font-weight: var(--fw-bold); font-size: var(--t-label); }
.tc-note { padding: var(--phi-0h) var(--sp-md) calc(var(--phi-0h) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgb(var(--mint-rgb) / .146); background: var(--bg-1, var(--n-950));
  text-align: center; font-size: var(--t-label); color: var(--text-2, var(--n-400)); }
.tc-err.ok { background: rgb(var(--mint-rgb) / .146); border-color: rgb(var(--mint-rgb) / .5); color: var(--mint-100); }

/* طبقة داخل النافذة: الملف، الإرفاق، خيارات الرسالة، الصورة الكاملة */
.tc-layer { position: absolute; inset: 0; z-index: 5; background: rgb(var(--graphite-rgb) / .764); display: flex; align-items: flex-end; justify-content: center; }
.tc-card { position: relative; width: 100%; max-height: 88%; overflow-y: auto; background: var(--bg-1, var(--n-950)); border-top: 1px solid rgb(var(--mint-rgb) / .382);
  border-radius: var(--r-lg) var(--r-lg) 0 0; padding: var(--phi-1h) var(--phi-1h) calc(var(--phi-1h) + env(safe-area-inset-bottom, 0px)); display: grid; gap: var(--sp-sm); }
.tc-card h4 { margin: 0 0 var(--sp-2xs); color: var(--gold-h, var(--mint-300)); font-size: var(--t-body-lg); }
.tc-card h5 { margin: var(--sp-xs) 0 0; color: var(--text-2, var(--n-400)); font-size: var(--t-label); font-weight: var(--fw-bold); }
.tc-layer-x { position: absolute; top: .6rem; inset-inline-end: var(--phi-0h); width: var(--icon-box); height: var(--icon-box); border-radius: 50%; border: 1px solid rgb(var(--white-rgb) / .146); background: rgb(var(--graphite-rgb) / .236); color: inherit; cursor: pointer; }
.tc-opt { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: var(--phi-0h); text-align: start; padding: var(--phi-0h) var(--sp-md); border-radius: var(--r-lg);
  border: 1px solid rgb(var(--mint-rgb) / .236); background: var(--bg-2, var(--n-950)); color: var(--text, var(--n-50)); font: inherit; font-size: var(--t-body); cursor: pointer; }
.tc-opt i { grid-row: span 2; color: var(--gold, var(--c-accent)); font-size: var(--t-body-lg); }
.tc-opt small { color: var(--text-2, var(--n-400)); font-size: var(--t-caption); }
.tc-opt.danger, .tc-opt.danger i { color: var(--danger-300); }
.tc-orders { display: grid; gap: var(--sp-sm); }
.tc-full { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--r-lg); }
.tc-btn { display: inline-flex; align-items: center; gap: var(--sp-xs); justify-content: center; padding: var(--sp-sm) var(--sp-md); border-radius: var(--r-lg); border: 0; cursor: pointer;
  background: var(--c-accent); color: var(--n-950); font: inherit; font-weight: var(--fw-bold); font-size: var(--t-label); }
.tc-btn.ghost { background: transparent; border: 1px solid rgb(var(--white-rgb) / .236); color: var(--text, var(--n-50)); }
.tc-prof { display: flex; align-items: center; gap: var(--phi-1h); }
.tc-prof-btns { display: grid; gap: var(--sp-sm); }
.tc-lbl { font-size: var(--t-label); color: var(--text-2, var(--n-400)); }
.tc-card .tc-row .tc-name { flex: 1; }
.tc-tierbox { display: grid; gap: var(--sp-xs); padding: var(--phi-0h) var(--sp-md); border-radius: var(--r-lg); background: rgb(var(--graphite-rgb) / .236); border: 1px solid rgb(var(--mint-rgb) / .236); font-size: var(--t-label); }
.tc-tierbox b { color: var(--gold-h, var(--mint-300)); }
.tc-tierbox > span { color: var(--text-2, var(--n-400)); }
.tc-tiers { display: flex; gap: var(--sp-xs); flex-wrap: wrap; margin-top: var(--sp-2xs); }
.tc-tiers span { display: inline-flex; align-items: center; gap: var(--sp-2xs); padding: var(--sp-3xs) var(--sp-sm); border-radius: var(--r-sm); font-size: var(--t-caption); background: rgb(var(--white-rgb) / .056); opacity: .7; }
.tc-tiers span.on { opacity: 1; background: rgb(var(--mint-rgb) / .236); color: var(--gold-h, var(--mint-300)); font-weight: var(--fw-bold); }
.tc-tiers small { opacity: .7; }
.tc-card-note { margin: 0; font-size: var(--t-caption); color: var(--text-2, var(--n-400)); }
.tc-card-err { margin: 0; font-size: var(--t-label); color: var(--danger-300); }

/* زر «الدردشة العامة» في الصفحة الرئيسية (بعرض الشبكة) */
.hero-btn-community { grid-column: 1 / -1; aspect-ratio: auto !important; flex-direction: row !important; gap: var(--sp-sm) !important; padding: var(--phi-0h) var(--phi-1h) !important; font-size: var(--t-label) !important; }
.hero-btn-community small { font-weight: var(--fw-medium); opacity: .8; font-size: var(--t-caption); }

/* العناصر المخفية بالخاصية hidden تبقى مخفية مهما كان تنسيقها (flex/grid) */
.tc-sheet [hidden], .tc-bg [hidden] { display: none !important; }