* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; background:#fff; }
.ai-chat-wrap { display:flex; width:100%; height:100vh; overflow:hidden; }

.chat-left { 
  width:240px; 
  background:#f7f8fa; 
  border-right:1px solid #e5e6eb; 
  display:flex; 
  flex-direction:column;
  transition:all 0.3s;
}
@media (max-width:768px) {
  .chat-left { 
    width:0; 
    opacity:0; 
    pointer-events:none;
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    z-index:100;
  }
  .chat-left.show {
    width:240px;
    opacity:1;
    pointer-events:auto;
  }
}

.left-top { padding:18px 16px; border-bottom:1px solid #e5e6eb; }
.new-chat-btn { width:100%; height:40px; border-radius:8px; background:#1677ff; color:#fff; border:none; font-size:14px; display:flex; align-items:center; justify-content:center; gap:6px; }
.new-chat-btn:hover { background:#0968e8; }
.left-menu { padding:12px 10px; }
.menu-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; color:#333; cursor:pointer; margin-bottom:4px; }
.menu-item:hover { background:#eef4ff; color:#1677ff; }
.history-title { font-size:12px; color:#999; padding:10px 16px; }
.history-list { flex:1; overflow-y:auto; padding:0 10px; }
.history-item { padding:9px 12px; border-radius:8px; font-size:13px; color:#666; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.history-item:hover { background:#eef4ff; }

.user-info-bottom {
  padding:12px 16px;
  border-top:1px solid #e5e6eb;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
}
.user-avatar-sidebar {
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
}
.user-money-box {
  flex:1;
}
.user-money-label {
  font-size:12px;
  color:#999;
  margin-bottom:2px;
}
.user-money-num {
  font-size:15px;
  font-weight:bold;
  color:#FF0000;
}
.logout-btn {
  font-size:12px;
  color:#fff;
  background:#ff4d4f;
  border:none;
  border-radius:4px;
  padding:4px 8px;
  cursor:pointer;
  width:60px;
  height:24px;
  line-height:16px;
}
.logout-btn:hover {
  background:#e64346;
}
.recharge-btn {
  font-size:12px;
  color:#fff;
  background:#1677ff;
  border:none;
  border-radius:4px;
  padding:4px 8px;
  cursor:pointer;
  width:60px;
  height:24px;
  line-height:16px;
}
.recharge-btn:hover {
  background:#0968e8;
}
.login-btn {
  width:100%;
  height:36px;
  background:#1677ff;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:14px;
}
.login-btn:hover {
  background:#0968e8;
}

.chat-right { flex:1; display:flex; flex-direction:column; height:100%; }
.chat-head { 
  height:60px; 
  line-height:60px; 
  text-align:center; 
  font-size:15px; 
  color:#333; 
  border-bottom:1px solid #e5e6eb;
  position:relative;
}
.chat-head .menu-toggle {
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  color:#333;
  cursor:pointer;
  display:none;
}
@media (max-width:768px) {
  .chat-head .menu-toggle { display:flex; }
}

.chat-content { 
  flex:1; 
  padding:20px 15px; 
  overflow-y:auto; 
  background:#fff; 
}
@media (min-width:769px) {
  .chat-content { padding:20px 40px; }
}
.empty-box { text-align:center; margin-top:60px; }
@media (min-width:769px) {
  .empty-box { margin-top:120px; }
}
.empty-box h3 { 
  font-size:20px; 
  color:#333; 
  margin-bottom:20px; 
  font-weight:500;
  padding:0 10px;
}
@media (min-width:769px) {
  .empty-box h3 { font-size:26px; margin-bottom:30px; }
}
.fast-ask { 
  display:flex; 
  flex-wrap:wrap; 
  gap:8px; 
  justify-content:center;
  padding:0 10px;
}
@media (min-width:769px) {
  .fast-ask { gap:12px; }
}
.fast-ask-item { 
  padding:8px 14px; 
  border:1px solid #e5e6eb; 
  border-radius:20px; 
  font-size:12px; 
  color:#666; 
  cursor:pointer; 
}
@media (min-width:769px) {
  .fast-ask-item { padding:10px 18px; font-size:13px; }
}
.fast-ask-item:hover { border-color:#1677ff; color:#1677ff; background:#f7faff; }

.msg-row { 
  display:flex; 
  margin-bottom:16px; 
  gap:8px; 
  align-items: flex-start;
}
@media (min-width:769px) {
  .msg-row { margin-bottom:24px; gap:12px; }
}
.msg-row.user { flex-direction:row-reverse; }
.msg-avatar { 
  width:34px; 
  height:34px; 
  border-radius:50%; 
  flex-shrink:0; 
}
@media (min-width:769px) {
  .msg-avatar { width:38px; height:38px; }
}
.msg-bubble { 
  max-width:85%; 
  padding:10px 12px; 
  border-radius:12px; 
  font-size:14px; 
  line-height:1.6; 
  word-break:break-all;
  white-space:pre-wrap;
}
@media (min-width:769px) {
  .msg-bubble { max-width:70%; padding:14px 16px; line-height:1.7; }
}
.ai-bubble { background:#f7f8fa; border-bottom-left-radius:4px; }
.user-bubble { background:#1677ff; color:#fff; border-bottom-right-radius:4px; }

.ai-image-pure {
  max-width: 220px;
  width: 50%;
  border-radius: 10px;
  cursor: pointer;
}

.chat-img { 
  max-width:180px; 
  border-radius:8px; 
  margin-top:8px; 
  cursor:pointer; 
}
@media (min-width:769px) {
  .chat-img { max-width:220px; margin-top:10px; }
}

.chat-input-box { 
  padding:12px 15px 15px; 
  border-top:1px solid #e5e6eb; 
}
@media (min-width:769px) {
  .chat-input-box { padding:16px 30px 20px; }
}
.img-preview-box { 
  margin-bottom:8px; 
  display:flex; 
  gap:6px; 
  flex-wrap:wrap;
}
@media (min-width:769px) {
  .img-preview-box { margin-bottom:10px; gap:8px; }
}
.preview-img { 
  width:70px; 
  height:70px; 
  object-fit:cover; 
  border-radius:8px; 
  border:1px solid #eee; 
}
@media (min-width:769px) {
  .preview-img { width:90px; height:90px; }
}

.input-wrap {
  position:relative;
  border:1px solid #e5e6eb;
  border-radius:28px;
  padding:10px 14px;
  background:#fff;
}
@media (min-width:769px) {
  .input-wrap { padding:12px 18px; }
}

.tool-bar {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
  flex-wrap:wrap;
}
@media (min-width:769px) {
  .tool-bar { gap:16px; }
}
.tool-item {
  font-size:13px;
  color:#595959;
  cursor:pointer;
  padding:4px 6px;
  border-radius:8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space:nowrap;
}
@media (min-width:769px) {
  .tool-item { font-size:14px; gap:6px; }
}
.tool-item:hover {
  background:#f0f2f5;
  color:#1677ff;
}
.tool-item i {
  font-size: 16px;
}

.input-row { display:flex; align-items:flex-end; gap:8px; }
#userText {
  flex:1;
  border:none;
  outline:none;
  resize:none;
  min-height:24px;
  max-height:100px;
  font-size:14px;
  line-height:1.5;
  background:transparent;
}
@media (min-width:769px) {
  #userText { min-height:26px; max-height:120px; line-height:1.6; }
}
.send-btn {
  width:34px;
  height:34px;
  border-radius:50%;
  background:#1677ff;
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
@media (min-width:769px) {
  .send-btn { width:36px; height:36px; }
}
.send-btn.disabled { background:#dcdde0; cursor:not-allowed; }

.round-popup { border-radius:16px !important; overflow:hidden !important; }
.round-popup dd { padding:8px 12px; border-radius:10px; cursor:pointer; }
.round-popup dd:hover { background:#eef4ff; color:#1677ff; }

#imageModal{position:fixed;inset:0;background:#000/90;z-index:9999;display:none;align-items:center;justify-content:center;padding:1rem;}
#imageModal img{max-width:100%;max-height:90vh;border-radius:8px;}
#imageModal .close-btn{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:#f56c6c;color:#fff;border:0;cursor:pointer;}

@media (max-width:768px) {
  .layui-layer { max-width:90vw !important; }
}