@charset "UTF-8";

.mok_tb_topbar{height:60px;background:white;display:flex;align-items:center;justify-content:flex-end;padding-right:30px;box-shadow:0 2px 5px rgba(0,0,0,0.1)}
.mok_tb_badge{position:absolute;top:-5px;right:-5px;background:#e41e3f;min-width:22px;height:22px;padding:0 5px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:white;line-height:1}
.mok_tb_panel{width:min(420px, calc(100vw - 24px));background:white;position:fixed;right:12px;top:70px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,0.15);overflow:hidden;transform:scale(.9);transform-origin:top right;opacity:0;visibility:hidden;transition:.25s;z-index:9999}
.mok_tb_panel.show{transform:scale(1);opacity:1;visibility:visible}
.mok_tb_header{padding:15px;font-size:20px;font-weight:600;border-bottom:1px solid #e4e6eb;display:flex;align-items:center;justify-content:space-between;gap:12px}
.mok_tb_header a{font-size:18px;font-weight:600;white-space:nowrap}
.mok_tb_list{max-height:400px;overflow-y:auto}
.mok_tb_panel .mok_tb_notification{display:grid !important;grid-template-columns:55px minmax(0,1fr) 12px !important;gap:12px !important;align-items:flex-start !important;width:100%;padding:12px 14px !important;cursor:pointer;position:relative;transition:.2s;box-sizing:border-box}
.mok_tb_panel .mok_tb_notification:hover{background:#f2f2f2}
.mok_tb_panel .mok_tb_unread{background:#e7f3ff}
.mok_tb_panel .mok_tb_avatar{grid-column:1;width:55px !important;height:55px !important;min-width:55px;border-radius:50%;object-fit:cover;display:block;margin:0 !important}
.mok_tb_panel .mok_tb_content{grid-column:2;min-width:0;max-width:100%;font-size:15px;line-height:1.4;overflow:hidden}
.mok_tb_panel .mok_tb_text{display:block;max-width:100%;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
.mok_tb_panel .mok_tb_time{color:#65676b;font-size:13px;margin-top:3px}
.mok_tb_panel .mok_tb_blue-dot{grid-column:3;width:10px;height:10px;background:#1877f2;border-radius:50%;justify-self:end;margin-top:23px}
.mok_tb_actions{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px}
.mok_tb_btn{border:none;padding:7px 12px;border-radius:7px;margin:0;cursor:pointer;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.2;min-height:34px;box-sizing:border-box}
.mok_tb_btn_icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 16px}
.mok_tb_btn_icon svg{width:16px;height:16px;display:block;fill:currentColor}
.mok_tb_status_text{margin-top:8px;font-size:13px;font-weight:600;color:#65676b}
.mok_tb_accept{background:#1877f2;color:white}
.mok_tb_decline{background:#e4e6eb;color:#050505}
.mok_tb_list::-webkit-scrollbar{width:8px}
.mok_tb_list::-webkit-scrollbar-thumb{background:#ccd0d5;border-radius:10px}
.mok_tb_read{opacity:.68}

@media(max-width:480px){
.mok_tb_panel{right:8px;top:62px;width:calc(100vw - 16px)}
.mok_tb_panel .mok_tb_notification{grid-template-columns:46px minmax(0,1fr) 10px !important;gap:10px !important;padding:10px !important}
.mok_tb_panel .mok_tb_avatar{width:46px !important;height:46px !important;min-width:46px}
.mok_tb_panel .mok_tb_content{font-size:14px}
}