/*css*/
@import "grid.css";
@import "//at.alicdn.com/t/c/font_5015008_tplbb3u6xt.css";

.chat-login{position: relative; width: 100%;height: 100vh; background-image: url("../images/bg.jpg");background-size: cover;}
.chat-login-main{position: absolute;min-width: 320px;max-width: 440px;padding: 12px;border-radius: 12px;left: 50%;top: 50%;background: rgba(255,255,255,.2);z-index: 1;transform: translateX(-50%) translateY(-50%);}
.chat-login-body{background: rgba(255,255,255,1); padding: 30px; border-radius: 12px;}
.chat-login-body h1{font-size: 2rem; text-align: center; margin-bottom: 15px; color: var(--blue-color)}
.chat-form{display: grid; flex-direction: column; gap: 10px }
.chat-form .chat-form-item-inline{display: grid; grid-template-columns: 1fr auto; align-items: center; justify-items: stretch;align-content: center;  height: 100%; gap: 10px;}
.chat-input{padding: 1rem 1.5rem; border-radius: 5px; width: 100%; box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.08) inset; outline: 0; border: 1px solid var(--neutral-300);}
.chat-input:focus{border: 1px solid var(--primary-color); outline: 1px solid var(--primary-color) }
input:focus::-webkit-input-placeholder,textarea:focus::-webkit-input-placeholder {color: transparent;}
input:focus::-moz-placeholder,textarea:focus::-moz-placeholder {color: transparent;}
input:focus:-ms-input-placeholder,textarea:focus:-ms-input-placeholder {color: transparent;}
.chat-form .chat-form-item-hasicon{position: relative}
.chat-form .chat-form-item-hasicon i{position: absolute; right: 10px; z-index: 1; top: 5px; font-size: 1.8rem; color: var(--neutral-500)}
.chat-btn{padding: 1rem 1.5rem; background-color: var(--accent); border-radius: 5px; border: 0; outline: 0; cursor: pointer; font-size: 1.6rem; color: #fff; transition: all 0.3s ease-in;}
.chat-btn:hover{background-color: var(--blue-color);}
.chat-btn i{margin-right: 10px;}
/* 创建自定义复选框外观 */
.custom-checkbox input.chat-radio {opacity: 0;position: absolute;cursor: pointer;height: 0;width: 0;}
.custom-checkbox {display: inline-flex;align-items: center;cursor: pointer;font-size: 14px;user-select: none;padding: 5px;}
.custom-checkbox .checkmark {height: 20px;width: 20px;background-color: var(--neutral-100);border: 2px solid var(--neutral-300);border-radius: 3px;margin-right: 8px;display: inline-block;position: relative;}
.custom-checkbox input.chat-radio:checked ~ .checkmark {background-color: var(--green-color);border-color: var(--green-color);}
.custom-checkbox .checkmark:after {content: "";position: absolute;display: none;left: 6px;top: 2px;width: 5px;height: 10px;border: solid white;border-width: 0 2px 2px 0;transform: rotate(45deg);}
.custom-checkbox input.chat-radio:checked ~ .checkmark:after {display: block;}
.custom-checkbox:hover input.chat-radio:not(:checked) ~ .checkmark {background-color: var(--neutral-200);}
.chat-form-footer{text-align: center; margin-top: 10px; font-size: 1.3rem; color: var(--neutral-700)}
/*chat windows*/
.chat{position: relative; width: 100%; height: 100vh; background-color: var(--neutral-100)}
.chat-body{position: absolute; box-shadow: var(--card-shadow); background-color: #fff; max-width: 980px; min-width: 320px; min-height: 400px; height: 80vh; display: grid; flex-direction: column; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.chat-body.resizeWin{width: 100vw; max-width: inherit; height: 100vh}
.chat-body.resizeWin .chat-window-main,.chat-body.resizeWin .chat-window-sidebar{height: calc(100vh - 70px);}
.chat-window{display: grid; grid-template-columns: 304px 1fr; justify-items: stretch;}
.chat-header{display: grid; grid-template-columns: 1fr auto; padding: 5px 12px; border-top-left-radius: 12px; border-top-right-radius: 12px; height: 70px; align-items: center; background-color: var(--footer-bg); color: #fff;}
.chat-header-title{display: flex; align-items: center; gap: 10px; padding-left: 10px;}
.chat-header-title i{font-size: 3rem;}
.chat-header-title h2{font-size: 2rem; font-weight: 500;}
.chat-header-notify{cursor: pointer; transition: all 0.3s ease; position: relative;}
.chat-header-notify:hover{color: #fff;}
.chat-window-controls{display: flex; gap: 5px; justify-content: end}
.chat-window-controls span{cursor: pointer}
.chat-window-controls span a{color: #fff;}
.chat-window-controls span i{font-size: 1.6rem;}
.chat-header-actions{display: flex; align-items: center; gap: 20px; color: var(--neutral-200); padding-right: 10px;}
.chat-header-actions i{font-size: 2rem;}
.chat-header-actions a{color: var(--neutral-200);}
.chat-header-actions a:hover{color: #fff;}
.chat-header-info{display: flex; align-items: center; gap: 10px}
.chat-header-avatar{width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,.1); overflow: hidden}
.chat-header-is_online .dot{width: 0.8rem;height: 0.8rem; cursor: pointer;border-radius: 50%;background-color: var(--neutral-300); display: inline-block;}
.chat-header-is_online .dot.active {background-color: var(--green-color);}
.chat-header-info h3{font-size: 1.4rem;}
.chat-window-sidebar{height: calc(80vh - 70px); display: flex; flex-direction: column;}
.chat-window-search{padding:12px 16px;}
.chat-window-search label{position: relative}
.chat-window-search .chat-input{border-radius: 20px; padding: 10px 12px 10px 36px; box-shadow: none; border-color: var(--neutral-200)}
.chat-window-search label button{position: absolute; left: 5px; top: 1px; color: var(--neutral-500); outline: 0; border: 0; background: none; cursor: pointer}
.chat-window-search label button i{font-size: 2rem;}
.chat-conversation{flex: 1; overflow-y: auto;white-space: nowrap;-ms-overflow-style: none;scrollbar-width: none;}
.conversation-list-group-title{padding: 10px 12px; background-color: rgba(0,0,0,.02); color: var(--neutral-500); font-weight: 400; font-size: 1.4rem; border-top: 1px solid var(--neutral-200);border-bottom: 1px solid var(--neutral-200)}
.conversation-item{display: grid; grid-template-columns: auto 1fr; justify-items: stretch; height: 100%; cursor: pointer; padding: 16px; gap: 10px; transition: all 0.3s ease-in;}
.conversation-item.active{border-left: 3px solid var(--primary-color); background-color: rgba(61,129,231,.1)}
.conversation-item:hover{background-color: rgba(200, 200, 200, 0.1); transform: translateY(-2px)}
.conversation-item-avatar{width: 50px; height: 50px;}
.conversation-item-content{display: grid; gap: 5px}
.conversation-item-info{display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px}
.conversation-item-username{font-size: 1.4rem; font-weight: 600;}
.conversation-item-summary{font-size: 1.3rem; color: var(--neutral-500)}
.conversation-item-mine{display: grid; grid-template-columns: 1fr auto; align-items: center;}
.conversation-item-time{font-size: 1.2rem; color: var(--neutral-500)}
.conversation-item-unread span{width: 2.2rem; height: 2.2rem; line-height: 2.2rem; margin-left: 10px; text-align: center; color: #fff; font-size: 1.2rem; background-color: var(--primary-color); border-radius: 50%; display: inline-block}
.chat-window-sidebar-footer{padding: 20px;}
.chat-window-add-agent-btn{width: 100%; padding: 8px 0; border-radius: 20px; color: #fff; font-size: 1.4rem; text-align: center; background-color: var(--primary-color); display: block;transition: background 0.3s ease;}
.chat-window-add-agent-btn:hover{background-color: var(--blue-color); color: #fff;}
.chat-window-main{position: relative; min-width: 600px; border-left: 1px solid var(--neutral-200); display: flex; flex-direction: column; height: calc(80vh - 70px);}
.chat-messages-header{display: flex; padding: 0.98rem 1.3rem; border-bottom: 1px solid var(--neutral-200); align-items: center; gap: 10px}
.chat-messages-header-avatar{width: 42px; height: 42px;}
.chat-messages-header-username{font-size: 1.4rem; font-weight: 600}
.chat-messages-header-status{font-size: 1.3rem; color: var(--neutral-700); cursor: pointer}
.chat-messages-header-status .dot{width: 0.8rem; height: 0.8rem; border-radius: 50%; background-color: var(--neutral-300); display: inline-block}
.chat-messages-header-status .dot.active{background-color: var(--green-color);}
.chat-message-notify{cursor: pointer; margin-left: auto; transition: all 0.3s ease; position: relative;}
.chat-message-notify i{font-size: 2rem;}
.chat-message-notify i.icon-notmsg{color: var(--neutral-500);}
.chat-message-notify:hover{opacity: 0.8;}
.chat-window-messages {flex: 1;overflow-y: auto;padding: 20px;background-color: rgba(0, 0, 0, 0.02);}
/* WebKit 滚动条（Chrome, Edge, Safari） */
.chat-window-messages::-webkit-scrollbar,.chat-window-messages:hover::-webkit-scrollbar {width: 8px;}
.chat-window-messages::-webkit-scrollbar-track {background: none;}
.chat-window-messages::-webkit-scrollbar-thumb {border-radius: 4px;transition: background 0.3s ease;background: transparent;}
.chat-window-messages:hover::-webkit-scrollbar-thumb {background: var(--neutral-300);}
.chat-window-messages::-webkit-scrollbar-thumb:hover {background: var(--neutral-500);}
.chat-window-message{display: grid; grid-template-columns: 36px 1fr; gap: 15px;}
.chat-window-message-avatar{width: 36px; height: 36px; border-radius: 50%; display: inline-block; overflow: hidden}
.chat-window-message-content{max-width: 70%}
.chat-window-message-text{font-size: 1.4rem; box-shadow: var(--msg-card-shadow); background-color: #fff; border-radius: 8px; padding: 12px; display: inline-block}
.chat-window-message-time{margin: 20px 0; font-size: 1.2rem; color: var(--neutral-500); text-align: center}
.chat-window-message-mine .chat-window-message{grid-template-columns: 1fr 36px; margin-left: auto;}
.chat-window-message-mine .chat-window-message-avatar{order: 1}
.chat-window-message-mine .chat-window-message-content{ margin-left: auto}
.chat-window-message-mine .chat-window-message-text{background-color: #5ce85c;}
.chat-message-system{font-size: 1.2rem; text-align: center; color: var(--neutral-500)}
.chat-window-footer{max-height: 154px;}
.chat-toolbar{padding: 10px 20px; border-top: 1px solid var(--neutral-200); display: flex; gap: 10px}
.chat-toolbar-btn{border: 0; outline: 0; background: none; cursor: pointer; color: var(--neutral-700)}
.chat-toolbar-btn i{font-size: 1.8rem;}
.chat-window-input-area{padding:10px 20px 15px; display: grid; grid-template-columns: 1fr 50px; align-items: center; gap: 10px}
.chat-window-textarea{width: 100%; font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 1.5rem; font-weight: 500; border: 0 solid var(--neutral-200); outline: 0; border-radius: 5px; overflow-y: auto; scrollbar-width: none; resize:none}
.chat-window-textarea::placeholder{font-size: 1.4rem; color: var(--neutral-500)}
.chat-window-send-btn{border: 0; outline: 0;  background-color: var(--footer-bg); cursor: pointer; height: 100%; border-radius: 5px; color: #fff;}
.chat-window-send-btn i{font-size: 2.4rem;}
.chat-window-send-btn.disabled{background-color: var(--neutral-200)}

/*chat btn controls*/
/* Block: 按钮组容器 */
.btn-group {display: flex;gap: 5px;border-radius: 4px;overflow: hidden;}
/* Element: 按钮组内的按钮 */
.btn-group-btn {padding: 6px 16px;border: 1px solid #ccc;background-color: #fff;font-size: 14px;cursor: pointer;border-radius: 0;outline: none;transition: background-color 0.2s, border-color 0.2s, color 0.2s;}
.btn-group-btn.sm {padding: 3px 10px;}
/* 修饰第一个按钮的左圆角 */
.btn-group-btn:first-child {border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
/* 修饰最后一个按钮的右圆角 */
.btn-group-btn:last-child {border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
/* Modifier: 主要按钮 (例如蓝色) */
.btn-group-btn--primary {background-color: #3d81e7;color: white;border-color: #3d81e7;}
.btn-group-btn--primary:hover {background-color: #0069d9;color: white;border-color: #0062c1;}
.btn-group-btn--primary:active {background-color: #3d81e7;border-color: #3d81e7;}
/* Modifier: 成功按钮 (例如绿色) */
.btn-group-btn--success {background-color: #28a745;color: white;border-color: #28a745;}
.btn-group-btn--success:hover {background-color: #218838;border-color: #1e7e34;}
.btn-group-btn--success:active {background-color: #1e7e34;border-color: #1c7430;}
/* Modifier: 警告按钮 (例如黄色/橙色) */
.btn-group-btn--warning {background-color: #ffc107;color: #212529;border-color: #ffc107;}
.btn-group-btn--warning:hover {background-color: #e0a800;border-color: #d39e00;}
.btn-group-btn--warning:active {background-color: #d39e00;border-color: #c87f00;}
/* Modifier: 危险/错误按钮 (例如红色) */
.btn-group-btn--danger {background-color: #dc3545;color: white;border-color: #dc3545;}
.btn-group-btn--danger:hover {background-color: #c82333;border-color: #bd2130;}
.btn-group-btn--danger:active {background-color: #bd2130;border-color: #b21f2d;}
/* Modifier: 信息按钮 (例如浅蓝色) */
.btn-group-btn--info {background-color: #17a2b8;color: white;border-color: #17a2b8;}
.btn-group-btn--info:hover {background-color: #138496;border-color: #117a8b;}
.btn-group-btn--info:active {background-color: #117a8b;border-color: #10707f;}
/* Modifier: 次要按钮 (例如浅灰色，常用于取消) */
.btn-group-btn--secondary {background-color: #6c757d;color: white;border-color: #6c757d;}
.btn-group-btn--secondary:hover {background-color: #5a6268;border-color: #545b62;}
.btn-group-btn--secondary:active {background-color: #545b62;border-color: #4e555b;}
/* Modifier: 空心/线框按钮 (可选，有时作为基础变体) */
.btn-group-btn--outline {background-color: transparent;color: #007bff;border-color: #007bff;}
.btn-group-btn--outline:hover {background-color: #007bff;color: white;}
/* Modifier: 禁用状态 */
.btn-group-btn:disabled,.btn-group-btn--disabled {opacity: 0.65;cursor: not-allowed;pointer-events: none;}
/* Modifier: 激活/选中状态 (用于切换按钮组) */
.btn-group-btn--active {background-color: #007bff;color: white;border-color: #007bff;box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);}
/* 卡片 */
.grid-card{background-color: #fff; border-radius: 12px; box-shadow: var(--card-shadow); padding: 20px; transition: box-shadow 0.3s ease, transform 0.3s ease;}
.grid-card:hover{box-shadow: var(--card-hover-shadow); transform: translateY(-5px);}
/*management*/
.management-title{display: flex; align-items: center; gap: 16px; padding-left: 10px;}
.management-title a{color: #fff;}
.management-title i{font-size: 2.2rem;}
.management-main{display: flex; flex-direction: column; min-width: 50vw; height: calc(80vh - 70px);}
.management-body{padding: 20px;}
.management-agent-add{padding: 8px 30px; border-radius: 6px; font-size: 1.6rem; background-color: var(--primary-color); color: #fff;transition: background 0.3s ease;}
.management-agent-add:hover{background-color: var(--blue-color); color: #fff;}
.management-agent-list{display: grid; margin-top: 30px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px;}
.management-agent-item{display: flex; gap: 10px; align-items: center;}
.management-agent-avatar{width: 40px; height: 40px; border-radius: 50%;}
.management-agent-avatar img{width: 100%; height: 100%; object-fit: cover; border-radius: 50%;}
.management-agent-info{flex: 1;}
.management-agent-info h3{font-size: 1.6rem; font-weight: 600;}
.management-agent-info p{font-size: 1.4rem; color: var(--text-color);}

/*chat-form-group*/
.chat-form-group{margin: 0 auto; width: 60vw; min-width: 320px; max-width: 600px;}
.form-group-item{display: flex; gap: 10px; align-items: center}
.form-group-item label{text-align: right; font-size: 1.4rem; width: 80px; font-weight: 600;}
.form-group-item input,.form-group-item select,.form-group-item textarea{font-family: 'Microsoft YaHei', Arial, sans-serif; font-size: 1.4rem;}
.form-group-item input{flex: 1;}
.form-group-item select{max-width: 50%;}
.form-group-btn{border: 0; outline: 0; height: 100%; border-radius: 5px; cursor: pointer; padding: 0 15px; background-color: var(--primary-color); color: #fff;transition: background 0.3s ease;}
.form-group-btn:hover{background-color: var(--blue-color);color: #fff;}

@media (max-width: 600px) {
    .chat-window-main{min-width: 100vw;}
}