/* 
   Chat Style - Final Organized Version
   Clean, Optimized, and Error-Free
*/

/* --- 1. General & Basic Styles --- */
@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@400;700&family=El+Messiri:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@400;700&display=swap');

body {
    background: linear-gradient(90deg, #ffffff 50%, #f7f2ff 100%);
    color: #444;
    font-family: 'Almarai', sans-serif;
}

a {
    color: orange;
    text-decoration: none;
}

button {
    background: transparent;
    color: #fff;
    border: none;
    cursor: pointer;
}

input, 
textarea, 
.post_input_container {
    background: #f6f6f6;
    border: 1px solid #e6e6e6 !important;
}

.setdef {
    color: #333;
}

/* --- 2. Layout & Containers --- */
.backglob, 
.back_chat, 
.back_priv, 
.back_panel, 
.back_menu, 
.back_box, 
.back_modal, 
.page_element, 
.back_quote {
    background: #fff;
}

.back_pmenu {
    background: #292929;
    color: #fff;
}

.back_input {
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}



/* headers colors and top box colors */
.bhead { background:linear-gradient(to right,#673ab7,#673ab7); color:#fff; }
.modal_top { background:#222; color:#fff; }
.pro_top { background:linear-gradient(to right,#673ab7,#673ab7); color:#fff; }
.bfoot { background:linear-gradient(to right,#673ab7,#673ab7); color:#fff; }
.back_ptop { background:linear-gradient(to right,#673ab7,#673ab7); color:#fff; }
.foot { background:#222; color:#fff; }

/* button colors */
.theme_btn, .back_theme {
background:#03add8;
color:#fff;
border-radius:6px;
}

.default_btn, .back_default {
background:#222;
color:#fff;
border-radius:6px;
}

.defaultd_btn {
background:#333;
color:#fff;
border-radius:6px;
}

.ok_btn {
background:#74b20e;
color:#fff;
border-radius:6px;
}

.warn_btn {
background:orange;
color:#fff;
border-radius:6px;
}

.delete_btn {
background:#cc0000;
color:#fff;
border-radius:6px;
}

.send_btn {
background:#673ab7;
color:#fff;
border-radius:50%;
}


.default_btn {
    background: rgba(0, 0, 0, 0) linear-gradient( 117deg , #8744ff, #673ab7) repeat scroll 0% 0%;
    color: #fff;

}

.theme_btn {
    background: #3ab753;
}
.small_modal_in {
    border-radius: 3px;
    margin: 0 auto;
    max-width: 900px;
    width: 100%;
    font-weight: 700;
}

.large_button_rounded {
    font-weight: 700;
    padding: 15px 5px;
    border-radius: 5px;
    font-size: 30px;
    width: 260px;
    margin-top: 10px;
    box-shadow: #ccc 0 2px 4px 0;
    font-family: 'Almarai', sans-serif;
}

.loginana {
    padding: 15px 5px;
    border-radius: 5px;
    font-size: 27px;
    width: 260px;
    margin-top: 15px;
    background: transparent linear-gradient(117deg, #fe9150, #fe6446) repeat scroll 0% 0%;
    font-weight: 700;
    box-shadow: #ccc 0 2px 4px 0;
    font-family: 'Almarai', sans-serif;
}

/* private log bubble colors - MODIFIED COLORS */
.target_private, .hunt_quote {
    color:#fff; 
    background: linear-gradient(135deg, #43a047 0%, #93E9BE 100%) !important; /* أخضر (المستلم) */
    border-radius: 15px 15px 15px 4px;
    border: 1px solid #43a047;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.hunter_private, .targ_quote {
    color:#fff; 
    background: linear-gradient(135deg, #673ab7 0%, #9575cd 100%) !important; /* بنفسجي (الراسل) */
    border-radius: 15px 15px 4px 15px;
    border: 1px solid #673ab7;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}



.cquote {
    background: rgba(0, 0, 0, 0.05) !important;
    border: solid 1px #5d38b0;
    width: 100%;
    line-height: 17px;
    border-left: solid 4px #6038b1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    padding: 10px 10px 10px 40px;
}

.cquote::before {
    font-family: "Font Awesome 6 Free";
    content: "\f10d";
    font-weight: 900;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #e7d9ff;
    font-size: 20px;
}

.cqname { color: #000; }
.cqmess { color: #666; }

/* --- 6. Special Components --- */
.welecome {
    transition: all .2s ease;
    position: absolute;
    width: 160px;
    height: 60px;
    text-align: center;
    z-index: 10;
    transform: rotate(316deg);
    top: -10px;
    left: -130px;
    line-height: 80px;
    color: #fff;
    background: #4caf50;
    font-family: 'Almarai', sans-serif;
    font-size: 17px;
    margin-left: 70px;
}

.warning-msg {
    color: #6e6e6e;
    border-radius: 10px;
    display: inline-block;
    cursor: pointer;
    border: 3px solid;
    font-size: 15px;
    font-family: 'Almarai', sans-serif;
    padding: 8px;
    text-decoration: none;
    margin-top: 20px;
    box-shadow: rgba(187, 187, 187, 0.55) 0 0 5px 1px;
    border-color: #f44336 #9c27b0 #ff9800 #4caf50;
    text-align: right;
    line-height: 1.75;
}

.test_call {
    border: solid 1px #dfdfdf;
    margin-top: 10px;
    padding: 10px;
    text-align: center;
    font-family: 'Almarai', sans-serif;
    border-radius: 5px;
    color: #415452;
    box-shadow: rgba(247, 247, 247, 0.55) 0 0 5px 1px;
}

.agree2022 {
    overflow: hidden;
    background: #fff8f5;
    color: #6f6f6f;
    font-family: 'IBM Plex Sans Arabic', sans-serif;
    font-size: 12px;
    margin-top: 20px;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    direction: rtl;
    box-shadow: rgba(187, 187, 187, 0.1) 0 0 5px 1px;
}

/* --- 7. Lists & Menus --- */
.fmenu_item {
    display: table;
    width: 100%;
    table-layout: fixed;
    padding: 15px 1px 15px 10px;
    cursor: pointer;
    border-radius: 5px;
    background: #f6f6f6;
    margin-bottom: 5px;
}

.blisting { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.blisting:hover { background: rgba(0, 0, 0, 0.05); }

.blist { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }

.bpmenu:hover { background: rgba(255, 255, 255, 0.1); }
.bsub { background: rgba(0, 0, 0, 0.1); }
.bsub:hover { background: rgba(0, 0, 0, 0.2); }

.bmenu, .submenu { border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.bmenu:hover, .submenu:hover { background: rgba(0, 0, 0, 0.05); }

/* --- 8. Status & Helpers --- */
.offline { opacity: 0.5; }
.theme_color { color: #03add8; }
.error { color: red; }
.success { color: #74b20e; }
.word { color: orange; }

.bback { background: rgba(0, 0, 0, 0.05); }
.bbackb { background: rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.08); }
.bhover:hover, .bhoverr:hover { background: rgba(0, 0, 0, 0.05); }
.bbackhover { background: rgba(0, 0, 0, 0.05); }
.bbackhover:hover { background: rgba(0, 0, 0, 0.025); }
.bbackhoverb { background: rgba(0, 0, 0, 0.05); }
.bbackhoverb:hover { background: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.08); }

/* --- 9. Borders --- */
.bborder { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.tborder { border-top: 1px solid rgba(0, 0, 0, 0.08); }
.lborder, .ppanel { border-left: 1px solid rgba(0, 0, 0, 0.08); }
.rborder { border-right: 1px solid rgba(0, 0, 0, 0.08); }
.fborder { border: 1px solid rgba(0, 0, 0, 0.08); }

/* --- 10. User & Messaging Specifics --- */
.user { color: #333; }
.chat_system { color: #999; }
.menui { color: #764cca; }
.subi { color: #5f38b2; }
.reply_item { background: #f6f6f6; }
.main_post_item { color: rgba(0, 0, 0, 0.5); }
.input_item {
    color: #673ab7;
}
.input_item i:not(.record):not(.record-circle):not(.record-circle *):not(.fa-spin) {
    background: #F1E9FF;
    color: #673ab7;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}
.input_item i.record {
    background: #F1E9FF;
    color: #673ab7;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
}
.input_item i.record-circle {
    background: #F1E9FF;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex !important;
    vertical-align: middle;
}
.input_item i.fa-spin {
    background: #F1E9FF;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    -webkit-animation: none;
    animation: none;
}
.input_item i.fa-spin:before {
    display: inline-block;
    -webkit-animation: fa-spin 1s infinite linear;
    animation: fa-spin 1s infinite linear;
}

.list_mood {
    color: #383838;
    font-family: system-ui, -apple-system, sans-serif;
    font-weight: 700;
    background: linear-gradient(117deg, #ffffff, #eeeeee);
    box-shadow: #ebebeb 4px 1px 2px 0;
    border-radius: 5px;
    margin-bottom: 1px;
    margin-top: 3px;
    padding: 5px;
}

.my_notice { color: #fff; background: #03add8; }
.system_text { background: #ededed; color: #666; }

/* --- 11. Responsive & UI Components --- */
.tab_menu { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
.tab_selected { background: rgba(0, 0, 0, 0.08); }

.modal_mback { background: rgba(0, 0, 0, 0.04); }
.modal_mborder { border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.modal_selected { background: rgba(255, 255, 255, 0.08); border: solid 2px #673ab7; }
.modal_back { background-color: rgba(0, 0, 0, 0.4); }

.log2 { background: rgba(0, 0, 0, 0.028); }
.topic_log { background: #d9f2e6; color: #0d261a; }

.bprogress { background: #74b20e; color: #fff; }
.bnotify { background: red; color: #fff; }
.foot_notify, .head_notify { border: 1px solid #fff; }

.sub_date { color: #888; }
.sub_chat, .sub_priv { color: #ccc; }
.sub_text { color: #888; }

.plikes { background-color: rgba(100, 100, 100, 0.3); color: #fff; }
.bspin { color: rgba(0, 0, 0, 0.3); }

/* --- 12. External UI Libraries Fixes --- */
.selectboxit-list, .selectboxit-btn { background-color: #f6f6f6; color: #666; border: 1px solid #e6e6e6 !important; }
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: #ededed; color: #666; }
.selectboxit-default-arrow { border-top: 4px solid #666; }
.selectboxit-btn.selectboxit-enabled:hover { background: #f6f6f6; color: #666; }
.selectboxit-options { background: #fff; border: 1px solid #ccc; }
.selectboxit-list .selectboxit-option-anchor { color: #666; }

.boom_slider .ui-widget-content { background: #ededed; }
.boom_slider .ui-state-default, .boom_slider .ui-state-active { background: #999 !important; }
.boom_slider .ui-slider-range { background: #ccc; }