:root {
  --cm-b: #0066B3; --cm-bd: #004E8C; --cm-bl: #0085D0;
  --ink: #1B2A3A; --ink2: #4A5568; --ink3: #7B8794;
  --line: #E2E8F0; --bg: #F0F2F5; --card: #FFF;
  --red: #DC2626; --red-bg: #FEF2F2;
  --amber: #D97706; --amber-bg: #FFFBEB;
  --green: #059669; --green-bg: #ECFDF5;
  --radius: 12px; --radius-sm: 8px;
  --sbw: 280px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",-apple-system,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.6;overflow:hidden;
  height:100vh;
}

/* ===== 整体布局 ===== */
.app-layout{display:flex;height:100vh}
.mobile-menu-btn{display:none;position:fixed;top:10px;left:10px;z-index:100;background:var(--cm-b);color:#fff;border:none;border-radius:8px;padding:6px 12px;font-size:18px;cursor:pointer}

/* ===== 侧边栏 ===== */
.sidebar{
  width:var(--sbw);min-width:var(--sbw);background:var(--card);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  overflow-y:auto;z-index:50;
}
.sb-top{padding:16px 14px 10px;border-bottom:1px solid var(--line)}
.sb-brand{
  display:flex;align-items:center;gap:8px;margin-bottom:16px;
  padding:0 2px;cursor:pointer;
}
.sb-cmcc{height:28px}
.sb-name{font-size:18px;font-weight:700;color:var(--ink)}
.sb-badge{
  font-size:10px;font-weight:700;background:var(--cm-b);color:#fff;
  padding:1px 6px;border-radius:999px;letter-spacing:1px;
}
.sb-nav{display:flex;flex-direction:column;gap:4px}
.sb-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;
  border-radius:var(--radius-sm);text-decoration:none;color:var(--ink2);
  transition:all .15s;cursor:pointer;
}
.sb-item:hover{background:var(--bg)}
.sb-item.active{background:var(--cm-b);color:#fff}
.sb-item.active small{color:rgba(255,255,255,.7)}
.sb-item div{display:flex;flex-direction:column}
.sb-item strong{font-size:14px}
.sb-item small{font-size:11px;color:var(--ink3)}
.sb-icon{width:20px;height:20px;flex-shrink:0}

/* 历史记录 */
.sb-history{flex:1;overflow-y:auto;padding:10px 14px 20px}
.sb-history-head{
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;color:var(--ink2);margin-bottom:8px;
}
.btn-icon{background:none;border:none;font-size:14px;cursor:pointer;opacity:.6}
.btn-icon:hover{opacity:1}
.sb-history-list{display:flex;flex-direction:column;gap:4px}
.history-entry{
  padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer;
  font-size:12px;transition:all .15s;border:1px solid transparent;
  display:flex;align-items:center;gap:8px;
}
.history-entry:hover{background:var(--bg);border-color:var(--line)}
.history-entry .h-icon{font-size:16px;flex-shrink:0}
.history-entry .h-info{overflow:hidden}
.history-entry .h-title{font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-entry .h-meta{font-size:10.5px;color:var(--ink3);margin-top:1px}
.history-entry .h-del{font-size:14px;opacity:0;transition:opacity .15s;margin-left:auto;cursor:pointer;flex-shrink:0}
.history-entry:hover .h-del{opacity:.5}
.history-entry .h-del:hover{opacity:1;color:var(--red)}

/* ===== 主内容区 ===== */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tab-panel{display:none;flex-direction:column;flex:1;overflow:hidden}
.tab-panel.active{display:flex}

.tab-header{padding:20px 28px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.tab-header h2{font-size:20px;color:var(--ink)}
.tab-header p{font-size:13px;color:var(--ink3);margin-top:4px}

/* ===== 聊天界面 ===== */
.chat-box{flex:1;overflow-y:auto;padding:16px 28px 8px}
.chat-welcome{text-align:center;padding:40px 20px 20px}
.welcome-card{display:inline-block;text-align:center}
.welcome-avatar{width:72px;height:72px;border-radius:18px;box-shadow:0 3px 16px rgba(0,102,179,.15);margin-bottom:12px}
.welcome-card h3{font-size:20px;color:var(--ink);margin-bottom:4px}
.welcome-card p{font-size:13px;color:var(--ink3);margin-bottom:16px}

.quick-prompts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.qp-btn{
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--card);color:var(--ink2);font-size:13px;cursor:pointer;
  transition:all .15s;
}
.qp-btn:hover{border-color:var(--cm-bl);color:var(--cm-b);background:rgba(0,102,179,.04)}

.chat-messages{display:flex;flex-direction:column;gap:12px;padding-bottom:8px}
.msg{max-width:82%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.7;animation:msgIn .25s ease}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-user{align-self:flex-end;background:var(--cm-b);color:#fff;border-bottom-right-radius:4px}
.msg-ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px}
.msg-ai .ai-content{white-space:pre-wrap}
.msg-ai .ai-content strong{color:var(--ink)}
.msg.loading{opacity:.6}
.msg-time{font-size:10.5px;margin-top:4px;opacity:.5}

.chat-input-bar{
  padding:10px 28px 16px;background:var(--card);border-top:1px solid var(--line);
  display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;
}
.chat-input-wrap{flex:1;display:flex;align-items:flex-end;gap:6px;background:var(--bg);border-radius:20px;padding:6px 6px 6px 16px;border:1px solid var(--line);transition:border-color .15s}
.chat-input-wrap:focus-within{border-color:var(--cm-bl)}
.chat-input-wrap textarea{
  flex:1;border:none;outline:none;background:transparent;
  font-size:14px;resize:none;max-height:120px;line-height:1.5;
  font-family:inherit;color:var(--ink);padding:6px 0;
}
.chat-input-wrap textarea::placeholder{color:var(--ink3)}
.btn-send{
  width:36px;height:36px;border-radius:50%;background:var(--cm-b);color:#fff;
  border:none;font-size:16px;cursor:pointer;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .15s;
}
.btn-send:hover{background:var(--cm-bd);transform:scale(1.05)}
.btn-send:disabled{opacity:.5;cursor:not-allowed;transform:none}
.chat-upload-label{
  font-size:12px;color:var(--ink3);cursor:pointer;padding:6px 0;
  white-space:nowrap;
}
.chat-upload-label:hover{color:var(--cm-b)}
.file-info-small{font-size:11px;color:var(--cm-b);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== 起草页面 ===== */
.draft-area{flex:1;overflow-y:auto;padding:20px 28px 30px}
.draft-form-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;margin-bottom:16px;
}
.draft-form-card h3{font-size:16px;color:var(--ink);margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-item{display:flex;flex-direction:column;gap:4px}
.form-item.full{grid-column:1/-1}
.form-item label{font-size:13px;font-weight:500;color:var(--ink2)}
.form-item input,.form-item textarea,.form-item select{
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 12px;font-size:14px;font-family:inherit;color:var(--ink);
}
.form-item input:focus,.form-item textarea:focus,.form-item select:focus{
  outline:none;border-color:var(--cm-bl);
  box-shadow:0 0 0 3px rgba(0,102,179,.06);
}
.form-item textarea{resize:vertical;min-height:60px}
.draft-btn{width:100%;margin-top:16px;padding:12px;font-size:15px}

.draft-result{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.draft-result .dr-actions{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.draft-result .dr-body{font-size:14px;white-space:pre-wrap;line-height:1.7;color:var(--ink)}

/* ===== 通用按钮 ===== */
.btn-main{
  background:linear-gradient(135deg,var(--cm-b) 0%,var(--cm-bd) 100%);
  color:#fff;border:none;border-radius:var(--radius-sm);
  font-weight:700;cursor:pointer;transition:opacity .15s;
}
.btn-main:hover{opacity:.9}
.btn-outline{
  background:#fff;color:var(--cm-b);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:8px 16px;font-size:13px;cursor:pointer;
}
.btn-outline:hover{border-color:var(--cm-bl)}

/* ===== 加载 ===== */
.spin{display:inline-block;width:16px;height:16px;border:2px solid var(--line);border-top-color:var(--cm-b);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 风险标记 */
.r-tag{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px}
.r-tag-fatal{background:var(--red-bg);color:var(--red)}
.r-tag-important{background:var(--amber-bg);color:var(--amber)}
.r-tag-suggest{background:rgba(0,102,179,.08);color:var(--cm-b)}

/* ===== 响应式 ===== */
@media(max-width:800px){
  .sidebar{position:fixed;left:-320px;top:0;bottom:0;z-index:90;transition:left .3s;box-shadow:4px 0 20px rgba(0,0,0,.1)}
  .sidebar.open{left:0}
  .mobile-menu-btn{display:block}
  .main-area{margin-left:0}
  .form-grid{grid-template-columns:1fr}
  .chat-input-bar{padding:8px 12px 12px}
  .tab-header{padding:14px 16px 10px}
  .chat-box{padding:12px}
  .draft-area{padding:12px}
}

/* 协作者模式：滚动条美化 */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:#aaa}