/* =====================================================================
   chat_modern.css  -  التصميم العصري (نيلي هادئ) للدردشة العامة
   خفيف: بلا blur ولا will-change، وانتقالات قصيرة على العنصر المُمرَّر عليه فقط.
   لم تُمس: الخطوط، الساعة (.cdate)، المحادثة الخاصة.
   يحافظ على: رسائل الدخول/الخروج/الهدايا في سطر واحد، تصاميم chatbox-N، أغلفة الأعضاء.
   للتراجع: احذف سطر الربط في control/head_load.php فقط.
   ===================================================================== */

:root{
    /* لون الهوية. لتغييره بدّل الأسطر الثلاثة معاً:
       زمردي : #0f9d7a / #38d3a6 / 15,157,122
       ذهبي  : #b8892e / #e3b95f / 184,137,46
       وردي  : #e0607e / #f59bb0 / 224,96,126                    */
    --cm-a:  #6366f1;
    --cm-a2: #818cf8;
    --cm-g:  99,102,241;

    --ci-line:  rgba(127,127,127,.14);
    --ci-hover: rgba(127,127,127,.07);
    --ci-tint:  rgba(var(--cm-g),.09);
    --ci-edge:  rgba(var(--cm-g),.18);
    --ci-r:     14px;
}

/* ---------- 1) رسائل الأعضاء ---------- */
#show_chat .ch_logs{
    display:flex;
    align-items:flex-start;
    gap:12px;
    width:auto;
    margin:1px 8px;
    padding:5px 10px;
    border:0;
    border-radius:var(--ci-r);
    background:transparent;
    box-shadow:none;
    /*contain:layout style;*/
    transition:background-color .15s;
  border-bottom:1px solid rgb(0,0,0,0.08) !important;
    /*border-top:1px solid rgb(0,0,0,0.08) !important;*/
}
#show_chat .ch_logs.log2{ background:transparent; }
#show_chat .ch_logs:hover{ background:var(--ci-hover); }

#show_chat .cavatar{ box-shadow:0 2px 6px rgba(0,0,0,.15); }

/* عمود النص */
#show_chat .my_text{
    display:block;
    flex:1 1 auto;
    min-width:0;
    padding:0;
    top:0;
}
#show_chat .my_text .btable{
    display:flex;
    align-items:flex-start;
    gap:4px;
}
#show_chat .cname{
    display:block;
    flex:1 1 auto;
    min-width:0;
    line-height:1.4;
}
#show_chat .chat_rank{
    display:inline-block;
    height:25px;
    margin:0 0 0 4px;
    vertical-align:middle;
}
#show_chat .cname .username{
    margin:0;
    vertical-align:middle;
    margin-right:-10px;
}

/* الفقاعة: لون ناعم من الهوية وذيل صغير جهة الأفاتار */
#show_chat .chat_message{
    display:block;
    width:fit-content;
    max-width:min(680px, 100%);
    margin-top:5px;
    padding:3px 1px;
    /* background:var(--ci-tint); */
    /* border:1px solid var(--ci-edge); */
    border-radius:var(--ci-r);
    border-start-start-radius:4px;
    box-shadow:none;
    word-break:break-word;
}

/* من اختار تصميم chatbox-N من المتجر يحتفظ بخلفيته: نخفي سهمه فقط ونوحّد الزوايا */
#show_chat .my_text[class*="chatbox-"]{ border-radius:var(--ci-r); }
#show_chat .my_text[class*="chatbox-"]::before{ display:none; }
#show_chat .my_text[class*="chatbox-"] .chat_message{
    background:none;
    border:0;
    padding:0;
    border-radius:0;
    max-width:100%;
}

#show_chat .chat_message img.chat_image,
#show_chat .chat_message .sticker_chat{ border-radius:12px; }

/* زر قائمة الرسالة: لرسائل الأعضاء فقط، ويظهر عند التمرير على الكمبيوتر وثابت هادئ على اللمس */
#show_chat .ch_logs .cclear{
    display:block;
    width:22px;
    flex:none;
    opacity:.4;
    transition:opacity .15s;
}
@media (hover:hover){
    #show_chat .ch_logs .cclear{ opacity:0; }
    #show_chat .ch_logs:hover .cclear{ opacity:.9; }
}

/* الاقتباس */
#show_chat .cqbox{ margin-top:5px; }
#show_chat .cquote{
    border-radius:10px;
    border-inline-start:3px solid var(--cm-a);
}

/* ---------- 2) رسائل النظام (دخول / خروج / هدايا): سطر واحد كما هي ---------- */
#show_chat .sys_log{
    display:table;
    table-layout:fixed;
    width:100%;
}
#show_chat .sys_log .cclear{
    display:table-cell;
    width:24px;
    opacity:1;
}

/* ---------- 3) أغلفة الأعضاء: قصّ الغلاف بزوايا تناسب البطاقة ---------- */
.chat_log_bg::before, .chat_log1_bg::before, .chat_log2_bg::before{
    clip-path:inset(0 round var(--ci-r) 0 0 var(--ci-r));
}

/* ---------- 4) منطقة الكتابة ---------- */
#main_input .input_table{
    height:46px;
    border-radius:24px;
    background:var(--ci-tint);
    box-shadow:inset 0 0 0 1px var(--ci-edge);
    transition:box-shadow .2s;
}
#main_input .input_table:focus-within{
    box-shadow:inset 0 0 0 1.5px var(--cm-a), 0 3px 12px rgba(var(--cm-g),.18);
}
#main_input #content{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
#main_input .main_item{ opacity:.75; transition:opacity .15s; }
#main_input .main_item:hover{ opacity:1; }
#main_input .send_btn{
    width:38px;
    height:38px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:var(--cm-a);
    box-shadow:0 3px 10px rgba(var(--cm-g),.32);
    cursor:pointer;
    transition:transform .12s, background-color .12s;
}
#main_input .send_btn:hover{ background:var(--cm-a2); }
#main_input .send_btn:active{ transform:scale(.93); box-shadow:none; }

/* ---------- 5) التمرير والجوال ---------- */
#show_chat, #chat_logs_container{
    overflow-x:hidden !important;
    overflow-y:auto !important;
    scrollbar-width:thin;
}
#chat_logs_container::-webkit-scrollbar{ width:5px; }
#chat_logs_container::-webkit-scrollbar-thumb{
    background:rgba(127,127,127,.35);
    border-radius:5px;
}
#chat_logs_container::-webkit-scrollbar-thumb:hover{ background:var(--cm-a); }

@media (max-width:600px){
    #show_chat .ch_logs{ margin:1px 3px; padding:4px 8px; gap:8px; }
    /*#show_chat .chat_message{ padding:3px 10px; }*/
}
@media (prefers-reduced-motion:reduce){
    #show_chat *, #main_input *{ animation:none !important; transition:none !important; }
}

/* ---------- رفع الحاوية الرئيسية للشات والمدخلات ---------- */
#top_chat_container{
    transform:translateY(-5px) !important;
}

/* ---------- 6) رسائل الهمس (splog): الاسم فوق والرسالة تحته ---------- */
#show_chat .splog{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:1px 8px;
    padding:5px 10px;
    border-radius:var(--ci-r);
}
#show_chat .splog .my_text{
    display:block;
    flex:1 1 auto;
    min-width:0;
    padding:0;
}

/* حاوية الاسم: ترتيب أفقي مع نزول الرسالة لسطر جديد */
#show_chat .splog .cname{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:4px !important;
    width:100% !important;
    line-height:1.4;
}

/* الاسم والأيقونة: إلغاء الهامش السلبي */
#show_chat .splog .cname .username{
    margin-right:0 !important;
    margin-left:2px !important;
    display:inline-block !important;
}
#show_chat .splog .cname i{
    margin-left:4px !important;
    margin-right:2px !important;
}

/* الرسالة: سطر كامل تحت الاسم */
#show_chat .splog .sptext,
#show_chat .splog .chat_message{
    flex-basis:100% !important;
    width:100% !important;
    margin:2px 0 0 0 !important;
    padding:0 !important;
    display:block !important;
}

/* زر الإغلاق (×) */
#show_chat .splog .spclear{
    display:block;
    flex:none;
    width:22px;
    text-align:center;
    opacity:.5;
    cursor:pointer;
}
#show_chat .splog .spclear:hover{ opacity:1; }