/* ==========================================================================
   دردشة الفريق — صفحة #teamChatPage (أصناف tc-*)
   نقل لتصميم team-chat.html المرجعي (جذر المستودع) على توكنز Modernize:
   كل لون/ظلّ/حدّ من base.css/dark.css فيتكيّف مع الوضع الليلي تلقائياً.
   الأفاتارات المتدرّجة (tc-bg-*) زخرفية ثابتة في الوضعين.
   ========================================================================== */

/* ---- القشرة: عمود المحادثات + المحادثة + لوحة المحتوى ---- */
#teamChatPage .tc-shell {
    display: grid;
    /* أرضية 480px لعمود الدردشة: تحت العرض الثلاثي لا يُعصر وسط الصفحة أكثر
       من اللازم — واللوحة تنطوي إلى درج تحت 1200px فتترك له المساحة كاملة. */
    grid-template-columns: 280px minmax(480px, 1fr) 320px;
    /* ارتفاع الشاشة مطروحاً منه: حشوة main-content (20+20) + حشوة البطاقة
       (16+16) + الترويسة (70) + فجوة الصفحة (18) + هامش أمان. التمرير داخلي
       في كل عمود — تجربة دردشة لا صفحة تمتد للأسفل. */
    height: calc(100vh - 175px);
    min-height: 480px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: var(--pane-radius, 8px);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    /* حاضنة الأدراج: العمودان الجانبيان يصيران طبقات مطلقة داخل القشرة على
       الشاشات الصغيرة، فيقصّهما overflow ولا يزاحمان سُلّم تكديس المستند.
       isolation ضروري لا تجميلي: بدونه يتنافس 90/95 على مستوى المستند فتطفو
       الورقة فوق درج الشريط الجانبي (--z-sidebar: 60) لو فُتحا معاً على
       الجوال. بالعزل يبقى الرقمان تكديساً محلياً داخل القشرة كما تنصّ
       DESIGN.md، وتظلّ النوافذ (--z-modal) والقوائم العائمة فوقها. */
    position: relative;
    isolation: isolate;
}

/* ---- أفاتار عام + لوحة التدرّجات الزخرفية ---- */
#teamChatPage .tc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    flex: none;
}
#teamChatPage .tc-avatar.sm { width: 22px; height: 22px; font-size: 9.5px; }

#teamChatPage .tc-bg-1 { background: linear-gradient(135deg, var(--primary), var(--accent)); }
#teamChatPage .tc-bg-2 { background: linear-gradient(135deg, var(--danger, #EC7D63), var(--secondary)); }
#teamChatPage .tc-bg-3 { background: linear-gradient(135deg, var(--success), var(--accent)); }
#teamChatPage .tc-bg-4 { background: linear-gradient(135deg, var(--pending-text, #5B3FBF), var(--danger, #EC7D63)); }
#teamChatPage .tc-bg-5 { background: linear-gradient(135deg, var(--secondary), var(--danger, #EC7D63)); }
#teamChatPage .tc-bg-6 { background: linear-gradient(135deg, var(--primary-deep, #1E2A45), var(--primary)); }

/* ==========================================================================
   عمود المحادثات
   ========================================================================== */
#teamChatPage .tc-conv {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-solid);
    border-inline-end: 1px solid var(--border-main);
    min-height: 0;
}

#teamChatPage .tc-conv-head {
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}
#teamChatPage .tc-conv-head h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-title);
}
/* مجموعة أزرار ترويسة العمود (إضافة + إغلاق الدرج) */
#teamChatPage .tc-head-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: none;
}
#teamChatPage .tc-add-btn {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-main);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
#teamChatPage .tc-add-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--light-primary);
}

#teamChatPage .tc-conv-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* بلوغ طرف القائمة لا يمرّر السحب للصفحة خلفها (scroll chaining) — نفس
       نمط درج الشريط الجانبي. يحمي أيضاً من ارتداد iOS فوق القشرة الثابتة. */
    overscroll-behavior: contain;
    padding: 12px 10px;
}

#teamChatPage .tc-sec-label {
    padding: 10px 12px 6px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

#teamChatPage .tc-chat-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.15s ease;
    margin-bottom: 2px;
    position: relative;
}
#teamChatPage .tc-chat-item:hover { background: var(--surface-hover); }
#teamChatPage .tc-chat-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}
#teamChatPage .tc-chat-item.active { background: var(--light-primary); }
#teamChatPage .tc-chat-item.active::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    background: var(--primary);
    border-radius: 999px;
}

#teamChatPage .tc-chat-ico {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    background: var(--bg-main);
    color: var(--text-secondary);
    font-weight: 800;
    font-size: 14px;
    font-family: var(--app-mono-family);
}
#teamChatPage .tc-chat-item.active .tc-chat-ico {
    background: var(--primary);
    color: var(--on-primary, var(--text-light));
}

#teamChatPage .tc-chat-meta { flex: 1; min-width: 0; }
#teamChatPage .tc-chat-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#teamChatPage .tc-chat-preview {
    font-size: 11.5px;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

#teamChatPage .tc-chat-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: none;
}
#teamChatPage .tc-chat-time {
    font-size: 10px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
#teamChatPage .tc-dot-online {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 2px var(--surface-solid);
    flex: none;
}

#teamChatPage .tc-conv-foot {
    padding: 12px;
    border-top: 1px solid var(--border-main);
    flex: none;
}
#teamChatPage .tc-profile-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
}
#teamChatPage .tc-profile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
}
#teamChatPage .tc-profile-role {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 1px;
}
#teamChatPage .tc-profile-card .tc-dot-online { margin-inline-start: auto; }

/* ==========================================================================
   المحادثة الحالية
   ========================================================================== */
#teamChatPage .tc-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
}

/* ---- الترويسة ---- */
#teamChatPage .tc-head {
    flex: none;
    background: var(--surface-solid);
    border-bottom: 1px solid var(--border-main);
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: var(--shadow-sm);
}
#teamChatPage .tc-head-ico {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--primary);
    color: var(--on-primary, var(--text-light));
    display: grid;
    place-items: center;
    font-family: var(--app-mono-family);
    font-weight: 700;
    font-size: 16px;
    flex: none;
}
#teamChatPage .tc-head-info { flex: 1; min-width: 0; }
#teamChatPage .tc-head-info h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-title);
    /* الاسم يُقصّ ولا يزحم أزرار الترويسة — بلا هذا يدفع اسمٌ طويل
       زرّ «محتوى القناة» خارج الشاشة على الجوال. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#teamChatPage .tc-head-titlerow {
    display: flex;
    align-items: center;
    gap: 4px;
    /* مرساة القائمة المنسدلة لتبديل المحادثة (سهم بجانب الاسم على الجوال) */
    position: relative;
}
/* سهم تبديل المحادثة — يظهر على الجوال وحده حيث عمود المحادثات ورقة
   سفلية مخفية، فيصبح السهم بجانب الاسم مدخل التبديل الظاهر. */
#teamChatPage .tc-conv-switch {
    display: none;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    place-items: center;
    flex: none;
    transition: color 0.15s ease, background 0.15s ease;
}
#teamChatPage .tc-conv-switch:hover {
    color: var(--primary);
    background: var(--surface-hover);
}
#teamChatPage .tc-conv-switch svg {
    transition: transform 0.18s ease;
}
#teamChatPage .tc-conv-switch[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
/* القائمة المنسدلة: مرتكزة على صفّ الاسم (لا على أزرار الترويسة) فتتمدّد
   من جهة بداية السطر بالاتجاهين RTL/LTR. */
#teamChatPage .tc-conv-pop {
    inset-inline-end: auto;
    inset-inline-start: 0;
    width: min(280px, calc(100vw - 48px));
    max-height: min(50vh, 380px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#teamChatPage .tc-conv-opt {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: 9px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    padding: 8px 9px;
    cursor: pointer;
    text-align: start;
    transition: background 0.15s ease, color 0.15s ease;
}
#teamChatPage .tc-conv-opt:hover {
    background: var(--surface-hover);
    color: var(--text-title);
}
#teamChatPage .tc-conv-opt.active {
    color: var(--primary);
    font-weight: 700;
}
#teamChatPage .tc-conv-opt-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#teamChatPage .tc-conv-opt-check {
    color: var(--primary);
    display: grid;
    place-items: center;
    flex: none;
}
#teamChatPage .tc-head-sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}
#teamChatPage .tc-head-sub > span:last-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#teamChatPage .tc-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex: none;
    animation: tc-pulse 2s infinite;
}
@keyframes tc-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

#teamChatPage .tc-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}
#teamChatPage .tc-head-btn,
#teamChatPage .tc-top-action {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-main);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
#teamChatPage .tc-head-btn:hover,
#teamChatPage .tc-top-action:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ---- مؤشّر المحتوى المخفيّ ----
   حين تنطوي لوحة القناة إلى درج/ورقة، يصير زرّها هو الأثر الوحيد لوجودها —
   فالشارة تحمل عدد ما ينتظر خلفه (مهام مفتوحة + ملاحظات) كي لا يبدو الزرّ
   بابَاً على فراغ ولا يختفي المحتوى بلا دليل. */
#teamChatPage .tc-panel-toggle,
#teamChatPage .tc-only-mobile { display: none; }
#teamChatPage .tc-panel-toggle { position: relative; }
#teamChatPage .tc-head-badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--primary);
    color: var(--on-primary, var(--text-light));
    border: 2px solid var(--surface-solid);
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
#teamChatPage .tc-head-badge[hidden] { display: none; }
/* نبضة واحدة عند وصول جديد أثناء المزامنة — لحظة معلومة لا حركة دائمة */
@keyframes tc-badge-bump {
    0% { transform: scale(1); }
    45% { transform: scale(1.3); }
    100% { transform: scale(1); }
}
#teamChatPage .tc-head-badge.bump { animation: tc-badge-bump 0.34s cubic-bezier(0.16, 1, 0.3, 1); }

/* زرّ إغلاق الورقة/الدرج — مخفيّ ما دام العمود جزءاً من الشبكة */
#teamChatPage .tc-sheet-close {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--border-main);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    place-items: center;
    transition: border-color 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
#teamChatPage .tc-sheet-close:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* ---- جسم المحادثة ---- */
#teamChatPage .tc-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* بلوغ طرف القائمة لا يمرّر السحب للصفحة خلفها (scroll chaining) — نفس
       نمط درج الشريط الجانبي. يحمي أيضاً من ارتداد iOS فوق القشرة الثابتة. */
    overscroll-behavior: contain;
    padding: 16px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

#teamChatPage .tc-day-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 22px 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    flex: none;
}
#teamChatPage .tc-day-divider::before,
#teamChatPage .tc-day-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-main);
}

/* ---- الرسائل ---- */
#teamChatPage .tc-msg {
    display: flex;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 0.15s ease;
}
#teamChatPage .tc-msg:hover { background: var(--surface-hover); }
#teamChatPage .tc-msg > .tc-avatar { align-self: flex-start; margin-top: 20px; }
#teamChatPage .tc-msg-stack { flex: 1; min-width: 0; }

#teamChatPage .tc-msg-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 2px;
    line-height: 1.2;
}
#teamChatPage .tc-msg-name {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-title);
}
#teamChatPage .tc-msg-time {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ---- تجميع رسائل المُرسِل نفسه ----
   الرسالة التالية لمرسلها نفسه بلا أفاتار ولا اسم — الوقت وحده في الترويسة —
   فتتراص تحت رسالته الأولى ولا يتشتت التدفق. الرسائل المتفرقة تفصل بمسافة. */
#teamChatPage .tc-msg + .tc-msg:not(.is-grouped) { margin-top: 10px; }
#teamChatPage .tc-msg.is-grouped { padding-top: 1px; }
#teamChatPage .tc-msg.is-grouped .tc-msg-head { margin-bottom: 0; }

#teamChatPage .tc-bubble {
    display: inline-block;
    max-width: 600px;
    padding: 10px 14px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    border-top-right-radius: 4px;
    color: var(--text-main);
    font-size: 13.5px;
    line-height: 1.65;
    word-break: break-word;
}
#teamChatPage .tc-bubble p { margin: 0; }
#teamChatPage .tc-bubble p + p { margin-top: 6px; }
#teamChatPage .tc-bubble strong { font-weight: 700; color: var(--text-title); }
#teamChatPage .tc-mention {
    color: var(--primary);
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    padding: 1px 6px;
    border-radius: 5px;
    font-weight: 700;
}

/* ---- بطاقة مهمّة داخل الرسالة ---- */
#teamChatPage .tc-task-card {
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    max-width: 480px;
    position: relative;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#teamChatPage .tc-task-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}
#teamChatPage .tc-task-card::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 4px;
}
#teamChatPage .tc-task-card.high::before { background: var(--danger, #EC7D63); }
#teamChatPage .tc-task-card.mid::before { background: var(--warning); }
#teamChatPage .tc-task-card.low::before { background: var(--info); }
#teamChatPage .tc-task-card.done::before { background: var(--success); }
#teamChatPage .tc-task-card.done .tc-task-title {
    color: var(--text-muted);
    text-decoration: line-through;
}

#teamChatPage .tc-task-tags {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
#teamChatPage .tc-task-tag {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: 0.3px;
}
#teamChatPage .tc-task-tag.high { background: var(--light-danger); color: var(--danger, #EC7D63); }
#teamChatPage .tc-task-tag.mid { background: var(--light-warning); color: var(--warning); }
#teamChatPage .tc-task-tag.low { background: var(--light-info); color: var(--info); }
#teamChatPage .tc-task-tag.done { background: var(--light-success); color: var(--success); }
#teamChatPage .tc-task-tag.id {
    background: var(--bg-main);
    color: var(--text-muted);
    font-family: var(--app-mono-family);
}

#teamChatPage .tc-task-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-title);
    margin: 0 0 4px;
    line-height: 1.45;
}
#teamChatPage .tc-task-desc {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0 0 10px;
}
#teamChatPage .tc-task-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11.5px;
    color: var(--text-muted);
}
#teamChatPage .tc-meta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#teamChatPage .tc-meta strong {
    color: var(--text-title);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
#teamChatPage .tc-task-check {
    margin-inline-start: auto;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1.5px solid var(--border-main);
    background: var(--surface-solid);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
    flex: none;
}
#teamChatPage .tc-task-check:hover { border-color: var(--success); }
#teamChatPage .tc-task-check.done {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

/* ---- بطاقة ملاحظة داخل الرسالة ---- */
#teamChatPage .tc-note-card {
    margin-top: 6px;
    padding: 12px 14px 14px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--light-warning), color-mix(in srgb, var(--warning) 6%, transparent));
    border: 1px solid color-mix(in srgb, var(--warning) 20%, transparent);
    max-width: 460px;
    position: relative;
}
#teamChatPage .tc-note-card.pinned {
    background: linear-gradient(135deg, var(--light-warning), color-mix(in srgb, var(--warning) 10%, transparent));
    border-color: var(--warning);
}
#teamChatPage .tc-note-pin {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
#teamChatPage .tc-note-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--text-title);
    margin: 0 0 4px;
    padding-inline-end: 60px;
}
#teamChatPage .tc-note-body {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0;
}
#teamChatPage .tc-note-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--warning) 30%, transparent);
    font-size: 11px;
    color: var(--text-muted);
}

/* ---- التفاعلات ---- */
#teamChatPage .tc-reactions {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
#teamChatPage .tc-reaction {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    font-size: 11.5px;
    color: var(--text-secondary);
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#teamChatPage .tc-reaction:hover { border-color: var(--primary); color: var(--primary); }
#teamChatPage .tc-reaction.acted {
    background: color-mix(in srgb, var(--primary) 10%, transparent);
    border-color: var(--primary);
    color: var(--primary);
}
#teamChatPage .tc-count { font-variant-numeric: tabular-nums; }

/* ---- رسالة نظام ---- */
#teamChatPage .tc-msg.system { gap: 8px; align-items: center; }
#teamChatPage .tc-msg.system .tc-bubble {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--text-main);
    font-size: 12.5px;
    border-top-right-radius: 12px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
#teamChatPage .tc-sys-ico {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    flex: none;
}

/* ---- مؤشّر الكتابة (يُفعَّل عند ربط الدردشة بخادم) ---- */
#teamChatPage .tc-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 22px 0;
    color: var(--text-muted);
    font-size: 11.5px;
    flex: none;
}
#teamChatPage .tc-typing[hidden] { display: none; }
#teamChatPage .tc-typing-dots {
    display: inline-flex;
    gap: 3px;
}
#teamChatPage .tc-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: tc-typing-dot 1.4s infinite ease-in-out;
}
#teamChatPage .tc-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
#teamChatPage .tc-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes tc-typing-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ==========================================================================
   شريط الكتابة
   ========================================================================== */
#teamChatPage .tc-composer {
    flex: none;
    background: var(--surface-solid);
    border-top: 1px solid var(--border-main);
    padding: 14px 22px 16px;
}

#teamChatPage .tc-modes {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
#teamChatPage .tc-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
#teamChatPage .tc-mode-btn:hover { border-color: var(--primary); color: var(--primary); }
#teamChatPage .tc-mode-btn.active {
    background: var(--light-primary);
    border-color: var(--primary);
    color: var(--primary);
}
#teamChatPage .tc-mode-btn[data-mode='task'].active,
#teamChatPage .tc-mode-btn[data-mode='note'].active {
    background: var(--light-warning);
    border-color: var(--warning);
    color: var(--warning);
}

#teamChatPage .tc-composer-card {
    border: 1px solid var(--border-main);
    border-radius: 14px;
    padding: 12px 14px;
    background: var(--bg-main);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#teamChatPage .tc-composer-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent);
    background: var(--surface-solid);
}
#teamChatPage .tc-composer-card[data-mode='task'],
#teamChatPage .tc-composer-card[data-mode='note'] {
    border-color: color-mix(in srgb, var(--warning) 30%, transparent);
    background: var(--light-warning);
}

#teamChatPage .tc-composer textarea {
    width: 100%;
    border: none;
    background: transparent;
    outline: none;
    resize: none;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text-main);
    line-height: 1.6;
    min-height: 24px;
    max-height: 140px;
}
#teamChatPage .tc-composer textarea::placeholder { color: var(--placeholder); }

#teamChatPage .tc-composer-extra {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-main);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
#teamChatPage .tc-composer-extra[hidden] { display: none; }
#teamChatPage .tc-xtra-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 700;
}
#teamChatPage .tc-xtra-field input,
#teamChatPage .tc-xtra-field select {
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    min-width: 60px;
}
#teamChatPage .tc-xtra-field svg { color: var(--text-muted); }

#teamChatPage .tc-composer-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-main);
}
#teamChatPage .tc-tool-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    font-family: inherit;
}
#teamChatPage .tc-tool-btn:hover {
    background: var(--surface-hover);
    color: var(--primary);
}

#teamChatPage .tc-composer-side {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
}
#teamChatPage .tc-send-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    background: var(--primary);
    color: var(--on-primary, var(--text-light));
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    transition: background 0.15s ease, transform 0.15s ease;
}
#teamChatPage .tc-send-btn:hover { background: var(--primary-hover); transform: translateY(-1px); }
#teamChatPage .tc-send-btn[data-mode='task'],
#teamChatPage .tc-send-btn[data-mode='note'] {
    background: var(--warning);
    box-shadow: rgb(145 158 171 / 18%) 0px 0px 2px 0px,
        color-mix(in srgb, var(--warning) 20%, transparent) 0px 12px 24px -4px;
}

/* ==========================================================================
   لوحة مهام وملاحظات القناة
   ========================================================================== */
#teamChatPage .tc-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-solid);
    border-inline-start: 1px solid var(--border-main);
    min-height: 0;
}

#teamChatPage .tc-panel-head {
    padding: 14px 18px 0;
    flex: none;
}
#teamChatPage .tc-panel-head h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--text-title);
}
#teamChatPage .tc-panel-head .tc-head-group {
    justify-content: space-between;
    margin-bottom: 12px;
}
#teamChatPage .tc-panel-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-main);
}
#teamChatPage .tc-panel-tab {
    flex: 1;
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease, border-color 0.15s ease;
}
#teamChatPage .tc-panel-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
#teamChatPage .tc-panel-tab:hover { color: var(--text-title); }
/* عدّاد داخل التبويب: يفصل «٣ مهام» عن «٥ ملاحظات» بينما تجمعهما شارة الزرّ */
#teamChatPage .tc-panel-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
#teamChatPage .tc-tab-n {
    min-width: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--text-secondary);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 16px;
    font-variant-numeric: tabular-nums;
}
#teamChatPage .tc-tab-n[hidden] { display: none; }
#teamChatPage .tc-panel-tab.active .tc-tab-n {
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    color: var(--primary);
}

#teamChatPage .tc-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* بلوغ طرف القائمة لا يمرّر السحب للصفحة خلفها (scroll chaining) — نفس
       نمط درج الشريط الجانبي. يحمي أيضاً من ارتداد iOS فوق القشرة الثابتة. */
    overscroll-behavior: contain;
    padding: 14px 14px 16px;
}
#teamChatPage .tc-panel-body[hidden] { display: none; }

#teamChatPage .tc-list-item {
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 12px;
    padding: 11px 12px;
    margin-bottom: 8px;
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#teamChatPage .tc-list-item:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

#teamChatPage .tc-list-item.task::before {
    content: '';
    position: absolute;
    top: 10px;
    bottom: 10px;
    inset-inline-start: 4px;
    width: 3px;
    border-radius: 999px;
}
#teamChatPage .tc-list-item.task.high::before { background: var(--danger, #EC7D63); }
#teamChatPage .tc-list-item.task.mid::before { background: var(--warning); }
#teamChatPage .tc-list-item.task.low::before { background: var(--info); }
#teamChatPage .tc-list-item.task.done::before { background: var(--success); }
#teamChatPage .tc-list-item.task.done .tc-item-title {
    color: var(--text-muted);
    text-decoration: line-through;
}

#teamChatPage .tc-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
    margin: 0 0 6px;
    line-height: 1.45;
}
#teamChatPage .tc-item-desc {
    font-size: 11.5px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 8px;
}
#teamChatPage .tc-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    flex-wrap: wrap;
}
#teamChatPage .tc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
#teamChatPage .tc-meta-item.due.soon {
    color: var(--warning);
    font-weight: 700;
}
#teamChatPage .tc-meta-item.is-done {
    color: var(--success);
    font-weight: 700;
}

#teamChatPage .tc-item-check {
    position: absolute;
    top: 11px;
    inset-inline-end: 12px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    border: 1.5px solid var(--border-main);
    background: var(--surface-solid);
    cursor: pointer;
    display: grid;
    place-items: center;
    color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
#teamChatPage .tc-item-check:hover { border-color: var(--success); }
#teamChatPage .tc-item-check.done {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

#teamChatPage .tc-list-item.note {
    background: linear-gradient(135deg, var(--light-warning), color-mix(in srgb, var(--warning) 4%, transparent));
    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
}
#teamChatPage .tc-list-item.note.pinned {
    background: linear-gradient(135deg, var(--light-warning), color-mix(in srgb, var(--warning) 8%, transparent));
    border-color: var(--warning);
}
#teamChatPage .tc-list-item.note .tc-item-title { padding-inline-end: 60px; font-size: 12.5px; }
#teamChatPage .tc-item-body {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#teamChatPage .tc-note-pin-mini {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    color: var(--warning);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* ==========================================================================
   حالة الفراغ + البحث + النوافذ المنبثقة (أعضاء/إيموجي)
   ========================================================================== */
#teamChatPage .tc-empty {
    margin: auto;
    text-align: center;
    color: var(--text-muted);
    padding: 28px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
#teamChatPage .tc-empty[hidden] { display: none; }
#teamChatPage .tc-empty-title {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 800;
    color: var(--text-secondary);
}
#teamChatPage .tc-empty-sub { font-size: 11.5px; }
#teamChatPage .tc-panel-body .tc-empty { padding: 26px 12px; }

#teamChatPage .tc-conv-empty {
    padding: 18px 14px;
    font-size: 11.5px;
    color: var(--text-muted);
    text-align: center;
}

/* ---- البحث في المحادثة (شريط يتوسّع في الترويسة) ---- */
#teamChatPage .tc-head-search {
    flex: 1;
    min-width: 120px;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 4px;
    background: var(--bg-main);
    border: 1px solid var(--border-main);
    border-radius: 999px;
    padding: 3px 4px 3px 12px;
}
#teamChatPage .tc-head-search[hidden] { display: none; }
#teamChatPage .tc-head-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-family: inherit;
    font-size: 12.5px;
    color: var(--text-main);
}
#teamChatPage .tc-head-search input::placeholder { color: var(--placeholder); }
#teamChatPage .tc-head-search button {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    flex: none;
    font-family: inherit;
}
#teamChatPage .tc-head-search button:hover {
    background: var(--surface-hover);
    color: var(--danger, #EC7D63);
}

/* ---- النوافذ المنبثقة ---- */
#teamChatPage .tc-head-actions { position: relative; }
#teamChatPage .tc-pop {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    width: 264px;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    box-shadow: var(--shadow-lg, var(--shadow-md));
    padding: 12px 14px;
    z-index: 70;
}
#teamChatPage .tc-pop[hidden] { display: none; }
#teamChatPage .tc-pop-title {
    font-size: 12px;
    font-weight: 800;
    color: var(--text-title);
    margin: 0 0 10px;
}
#teamChatPage .tc-member-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
#teamChatPage .tc-member-meta strong {
    display: block;
    font-size: 12.5px;
    color: var(--text-title);
}
#teamChatPage .tc-member-meta span { font-size: 11px; color: var(--text-muted); }
/* سطر الحضور: نقطة خضراء + «متصل الآن» للحيّ، أو «آخر تواجد: …» للغائب */
#teamChatPage .tc-member-seen {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}
#teamChatPage .tc-member-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    flex: none;
    animation: tc-pulse 2s infinite;
}
#teamChatPage .tc-pop-note {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px dashed var(--border-main);
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.6;
}
/* نافذة الأعضاء: كل الفريق حاضر (متصل وغائب) — العنوان الفرعي يلخّص
   المتواجدين، والقائمة تُمرَّر داخلياً بدل أن تفيض خارج الشاشة. */
#teamChatPage .tc-pop-sub {
    font-size: 11px;
    color: var(--text-muted);
    margin: -4px 0 8px;
}
#teamChatPage .tc-pop-members {
    max-height: min(52vh, 400px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
#teamChatPage .tc-pop-sec {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    margin: 10px 0 6px;
}
#teamChatPage .tc-pop-sec:first-child { margin-top: 0; }
/* النقطة الخضراء داخل سطر صغير (قائمة الإشارة @) — أصغر وأهدأ من نافذة الأعضاء */
#teamChatPage .tc-mention-meta .tc-member-dot {
    display: inline-block;
    animation: none;
}
/* إدارة المشاركين (مدير فقط): كل أعضاء المتجر — المشارك معلّماً ✓، والنقر
   يضيف/يُخرج فوراً (الحالة تُبنى من ردّ الخادم). */
#teamChatPage .tc-manage-list {
    max-height: min(36vh, 260px);
    overflow-y: auto;
    overscroll-behavior: contain;
    display: grid;
    gap: 4px;
}
#teamChatPage .tc-manage-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    border: 1px solid var(--border-main);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 12.5px;
    padding: 6px 9px;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
#teamChatPage .tc-manage-item:hover {
    background: var(--surface-hover);
    color: var(--text-title);
}
#teamChatPage .tc-manage-item.in {
    border-color: color-mix(in srgb, var(--primary) 45%, transparent);
    color: var(--text-title);
}
#teamChatPage .tc-manage-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#teamChatPage .tc-manage-name small {
    display: block;
    font-size: 10.5px;
    color: var(--text-muted);
}
#teamChatPage .tc-manage-mark {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
    color: var(--text-muted);
    border: 1px solid var(--border-main);
}
#teamChatPage .tc-manage-item.in .tc-manage-mark {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}

/* ---- منتقي الإيموجي (يفتح فوق شريط الكتابة) ---- */
#teamChatPage .tc-composer-tools { position: relative; }
#teamChatPage .tc-pop-emoji {
    top: auto;
    bottom: calc(100% + 10px);
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: auto;
}
#teamChatPage .tc-emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
}
#teamChatPage .tc-emoji-grid button {
    border: none;
    background: transparent;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    border-radius: 8px;
    padding: 3px 2px;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
}
#teamChatPage .tc-emoji-grid button:hover {
    background: var(--surface-hover);
    transform: scale(1.18);
}

/* ---- قائمة الإشارة لزميل (@mention) فوق بطاقة الكتابة ---- */
#teamChatPage .tc-composer-card { position: relative; }
#teamChatPage .tc-mention-pop {
    position: absolute;
    bottom: calc(100% + 8px);
    inset-inline: 0;
    background: var(--surface-solid);
    border: 1px solid var(--border-main);
    border-radius: 14px;
    box-shadow: var(--shadow-lg, var(--shadow-md));
    padding: 8px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
#teamChatPage .tc-mention-pop[hidden] { display: none; }
#teamChatPage .tc-mention-pop .tc-pop-title { margin: 2px 8px 6px; }
#teamChatPage .tc-mention-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    transition: background 0.12s ease;
}
#teamChatPage .tc-mention-item:hover,
#teamChatPage .tc-mention-item.active {
    background: var(--light-primary);
}
#teamChatPage .tc-mention-meta { display: flex; flex-direction: column; min-width: 0; }
#teamChatPage .tc-mention-meta strong {
    font-size: 12.5px;
    color: var(--text-title);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#teamChatPage .tc-mention-meta span { font-size: 11px; color: var(--text-muted); }

/* ---- الحذف (محادثة/رسالة/مهمة/ملاحظة) ----
   أزرار الحذف مخفية حتى التحويم لكن مساحتها محجوزة دائماً في التدفق كي
   لا يقفز التخطيط عند ظهورها؛ في اللوحة مطلقة بجانب زر الإنجاز. على
   أجهزة اللمس (لا hover) تظهر بشفافية مخفّضة دائماً. */
#teamChatPage .tc-msg-del,
#teamChatPage .tc-chat-del,
#teamChatPage .tc-task-del {
    width: 22px;
    height: 22px;
    flex: none;
    padding: 0;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
#teamChatPage .tc-msg-del { margin-inline-start: auto; align-self: center; }
#teamChatPage .tc-msg:hover .tc-msg-del,
#teamChatPage .tc-msg-del:focus-visible,
#teamChatPage .tc-chat-item:hover .tc-chat-del,
#teamChatPage .tc-chat-del:focus-visible,
#teamChatPage .tc-task-card:hover .tc-task-del,
#teamChatPage .tc-task-del:focus-visible {
    opacity: 1;
}
#teamChatPage .tc-msg-del:hover,
#teamChatPage .tc-chat-del:hover,
#teamChatPage .tc-task-del:hover,
#teamChatPage .tc-item-del:hover {
    color: var(--danger, #EC7D63);
    background: color-mix(in srgb, var(--danger, #EC7D63) 10%, transparent);
}
#teamChatPage .tc-chat-del,
#teamChatPage .tc-task-del {
    border-color: var(--border-main);
    background: var(--surface-solid);
}
#teamChatPage .tc-chat-del:hover,
#teamChatPage .tc-task-del:hover { border-color: var(--danger, #EC7D63); }

#teamChatPage .tc-item-del {
    position: absolute;
    top: 11px;
    inset-inline-end: 38px; /* بجانب زر الإنجاز (end:12 + عرض 22) */
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;
    border: 1px solid var(--border-main);
    background: var(--surface-solid);
    color: var(--text-muted);
    display: grid;
    place-items: center;
    cursor: pointer;
    font-family: inherit;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
/* الملاحظات بلا زر إنجاز — زر الحذف في موضع الإنجاز نفسه */
#teamChatPage .tc-list-item.note .tc-item-del { inset-inline-end: 12px; }
#teamChatPage .tc-list-item:hover .tc-item-del,
#teamChatPage .tc-item-del:focus-visible { opacity: 1; }
#teamChatPage .tc-item-del:hover { border-color: var(--danger, #EC7D63); }
#teamChatPage .tc-list-item .tc-item-title { padding-inline-end: 36px; }

@media (pointer: coarse) {
    #teamChatPage .tc-msg-del,
    #teamChatPage .tc-chat-del,
    #teamChatPage .tc-task-del,
    #teamChatPage .tc-item-del {
        opacity: 0.6;
    }
}

/* ==========================================================================
   الاستجابة — العمودان الجانبيان ينطويان، ولا يختفيان
   --------------------------------------------------------------------------
   كانا `display: none` تحت العتبات: لوحة القناة (مهام + ملاحظات) تحت 1200px
   وقائمة المحادثات تحت 768px — بلا زرّ ولا أثر، فيفقد مستخدم الجوال المحتوى
   ولا يستطيع حتى تبديل المحادثة. صارا الآن طبقتَين تُستدعيان من زرّ:
     · 769–1200px — لوحة القناة درج ينزلق من حافة نهاية السطر (موضعها نفسه
       على سطح المكتب، فلا ينتقل المحتوى مكاناً في ذهن المستخدم). العتبة
       1200 لا 1100: دونها يضيق وسط الشبكة الثلاثية (280 محادثات + 320 لوحة)
       عن حدّ مريح للدردشة — تنطوي اللوحة مبكراً ويبقى الوسط رحباً، والشارة
       على زرّها تبقى دليل المهام والملاحظات خلفه.
     · ≤768px — العمودان ورقتان ترتفعان من الأسفل، أقرب لمدى الإبهام.
   كلاهما `position: absolute` داخل `.tc-shell` (لا `fixed`): القشرة ذات ارتفاع
   ثابت و`overflow: hidden` فتقصّ الانزلاق وحدها، ولا حاجة لقفل سكرول الصفحة
   ولا لاقتحام سُلّم z المستند — 90/95 تكديس محلّي كما تنصّ DESIGN.md.
   ========================================================================== */

#teamChatPage .tc-scrim {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--primary-deep, #1e2a45) 34%, transparent);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.24s ease, visibility 0.24s ease;
    /* السحب على الغشاء لا يحرّك الرسائل تحته (لمس iOS) */
    touch-action: none;
}
#teamChatPage .tc-scrim.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

@media (max-width: 1200px) {
    #teamChatPage .tc-shell {
        grid-template-columns: 240px minmax(0, 1fr);
        height: calc(100vh - 160px);
    }
    #teamChatPage .tc-scrim { display: block; }
    #teamChatPage .tc-panel-toggle { display: grid; }

    #teamChatPage .tc-panel {
        position: absolute;
        z-index: 95;
        top: 0;
        bottom: 0;
        inset-inline-end: 0;
        width: min(340px, 86%);
        box-shadow: var(--shadow-lg, var(--shadow-md));
        /* الافتراض RTL: العمود على الحافة اليسرى فالإخفاء إزاحة سالبة.
           نظيره لـ LTR في i18n.css (نفس نمط درج الشريط الجانبي). */
        transform: translateX(-100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s;
    }
    #teamChatPage .tc-panel.is-open {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
    }
    #teamChatPage .tc-panel .tc-sheet-close { display: grid; }
}

@media (max-width: 768px) {
    #teamChatPage .tc-shell {
        grid-template-columns: minmax(0, 1fr);
        height: calc(100vh - 140px);
        min-height: 420px;
    }
    #teamChatPage .tc-only-mobile { display: grid; }
    /* سهم تبديل المحادثة يظهر بجانب الاسم على الجوال فقط */
    #teamChatPage .tc-conv-switch { display: grid; }

    /* ورقتان سفليتان بالهندسة نفسها — لغة حركة واحدة على الجوال */
    #teamChatPage .tc-conv,
    #teamChatPage .tc-panel {
        position: absolute;
        z-index: 95;
        inset-inline: 0;
        top: auto;
        bottom: 0;
        width: auto;
        height: min(78%, 540px);
        border: 1px solid var(--border-main);
        border-bottom: none;
        /* --radius-xl هو نصف قطر الألواح الكبيرة، ولا يتقلّص على الجوال (DESIGN.md) */
        border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
        box-shadow: var(--shadow-lg, var(--shadow-md));
        transform: translateY(100%);
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.26s;
    }
    #teamChatPage .tc-conv.is-open,
    #teamChatPage .tc-panel.is-open {
        transform: translateY(0);
        visibility: visible;
        pointer-events: auto;
    }
    #teamChatPage .tc-conv .tc-sheet-close,
    #teamChatPage .tc-panel .tc-sheet-close { display: grid; }
    /* الورقة تُغلق بزرّها أو بالغشاء — زرّ «محادثة جديدة» يكفيه العمود */
    #teamChatPage .tc-conv-head { padding: 14px 16px 12px; }
    #teamChatPage .tc-panel-head { padding: 14px 16px 0; }

    #teamChatPage .tc-head { padding: 12px; flex-wrap: wrap; }
    #teamChatPage .tc-head-search { max-width: none; order: 5; flex-basis: 100%; }
    #teamChatPage .tc-body { padding: 10px 12px 12px; }
    #teamChatPage .tc-composer { padding: 10px 12px; }
    #teamChatPage .tc-bubble { max-width: 88%; }
}

/* تقليل الحركة: الحركات الزخرفية فقط — لا خصائص تخطيط هنا (يحرسها
   tests/touch-targets.test.js). */
@media (prefers-reduced-motion: reduce) {
    #teamChatPage .tc-pulse,
    #teamChatPage .tc-typing-dots span,
    #teamChatPage .tc-member-dot {
        animation: none;
    }
    #teamChatPage .tc-conv-switch svg {
        transition: none;
    }
    #teamChatPage .tc-task-card,
    #teamChatPage .tc-list-item,
    #teamChatPage .tc-send-btn,
    #teamChatPage .tc-emoji-grid button,
    #teamChatPage .tc-scrim,
    #teamChatPage .tc-conv,
    #teamChatPage .tc-panel {
        transition: none;
    }
    #teamChatPage .tc-head-badge.bump { animation: none; }
}