*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#FFF8F0;
  --sidebar-bg:#FFF1E6;
  --card-bg:#FFFFFF;
  --primary:#E8734A;
  --primary-hover:#D4613A;
  --primary-light:#FFF0EB;
  --text:#3D2C22;
  --text-light:#8B7B73;
  --text-lighter:#B5A89E;
  --border:#F0E0D4;
  --user-bubble:#E8734A;
  --user-text:#FFFFFF;
  --ai-bubble:#FFFFFF;
  --ai-text:#3D2C22;
  --success:#4CAF50;
  --warning:#FF9800;
  --danger:#E53935;
  --shadow:0 2px 12px rgba(61,44,34,0.08);
  --radius:16px;
  --radius-sm:10px;
}

html,body{
  height:100%;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:18px;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

#lockScreen{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  background:linear-gradient(135deg,#FFF8F0 0%,#FFE8D6 100%);
}

.lock-card{
  background:var(--card-bg);
  border-radius:var(--radius);
  padding:40px 32px;
  box-shadow:var(--shadow);
  text-align:center;
  width:90%;
  max-width:380px;
}

.lock-icon{font-size:48px;margin-bottom:16px}
.lock-card h2{font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text)}
.lock-card p{font-size:16px;color:var(--text-light);margin-bottom:24px}

#passwordInput{
  width:100%;
  padding:14px 16px;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:18px;
  text-align:center;
  outline:none;
  transition:border-color .2s;
  background:var(--bg);
}

#passwordInput:focus{border-color:var(--primary)}

#unlockBtn{
  width:100%;
  margin-top:16px;
  padding:14px;
  background:var(--primary);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}

#unlockBtn:hover{background:var(--primary-hover)}

.error-text{
  color:var(--danger);
  font-size:14px;
  margin-top:12px;
  min-height:20px;
}

#mainApp{
  display:flex;
  height:100vh;
  overflow:hidden;
}

#sidebarOverlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.3);
  z-index:998;
}

#sidebar{
  width:280px;
  min-width:280px;
  background:var(--sidebar-bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  z-index:999;
  transition:transform .3s ease;
}

.sidebar-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 16px 12px;
  border-bottom:1px solid var(--border);
}

.sidebar-header h3{font-size:18px;font-weight:700}

.close-btn{
  background:none;
  border:none;
  font-size:20px;
  cursor:pointer;
  color:var(--text-light);
  display:none;
}

.sidebar-section{padding:16px}

.sidebar-label{
  display:block;
  font-size:15px;
  font-weight:600;
  color:var(--text);
  margin-bottom:8px;
}

#sidebar select,
#sidebar input[type="text"]{
  width:100%;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:16px;
  background:#fff;
  color:var(--text);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  transition:border-color .2s;
}

#sidebar select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%238B7B73'/%3E%3C/svg%3E") no-repeat right 12px center/12px,#fff}

#sidebar select:focus,
#sidebar input[type="text"]:focus{border-color:var(--primary)}

.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:4px;
}

#complianceLabel{font-size:15px;color:var(--primary);font-weight:500}

.toggle-switch{position:relative;width:48px;height:26px;display:inline-block}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:#ccc;
  border-radius:26px;
  transition:.3s;
}

.toggle-slider::before{
  content:"";
  position:absolute;
  height:20px;
  width:20px;
  left:3px;
  bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.3s;
}

.toggle-switch input:checked+.toggle-slider{background:var(--primary)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(22px)}

.sidebar-actions{margin-top:auto;padding-bottom:24px}

.action-btn{
  width:100%;
  padding:12px;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  background:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  color:var(--text);
  transition:all .2s;
}

.action-btn:hover{border-color:var(--primary);color:var(--primary)}
.new-chat-btn{margin-top:8px}

#mainContent{
  flex:1;
  display:flex;
  flex-direction:column;
  min-width:0;
  height:100vh;
}

#topBar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  min-height:56px;
}

.menu-btn{
  display:none;
  background:none;
  border:none;
  font-size:24px;
  cursor:pointer;
  color:var(--text);
}

#topTitle{
  font-size:18px;
  font-weight:700;
  flex:1;
}

.track-badge{
  font-size:13px;
  padding:4px 12px;
  background:var(--primary-light);
  color:var(--primary);
  border-radius:20px;
  font-weight:600;
}

#chatArea{
  flex:1;
  overflow-y:auto;
  padding:20px;
  padding-bottom:8px;
  scroll-behavior:smooth;
}

.welcome{
  text-align:center;
  padding:40px 20px;
  max-width:500px;
  margin:0 auto;
}

.welcome-icon{font-size:56px;margin-bottom:16px}
.welcome h2{font-size:22px;font-weight:700;margin-bottom:8px}
.welcome p{font-size:16px;color:var(--text-light);margin-bottom:24px;line-height:1.6}

.quick-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.quick-btn{
  padding:14px 16px;
  background:var(--card-bg);
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:16px;
  color:var(--text);
  cursor:pointer;
  text-align:left;
  transition:all .2s;
}

.quick-btn:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-light)}

.message{margin-bottom:16px;animation:fadeIn .3s ease}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.message-user{
  display:flex;
  justify-content:flex-end;
}

.bubble-user{
  background:var(--user-bubble);
  color:var(--user-text);
  padding:12px 16px;
  border-radius:var(--radius) var(--radius) 4px var(--radius);
  max-width:80%;
  line-height:1.6;
  word-break:break-word;
  white-space:pre-wrap;
}

.message-ai{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.bubble-ai{
  background:var(--ai-bubble);
  color:var(--ai-text);
  padding:14px 18px;
  border-radius:var(--radius) var(--radius) var(--radius) 4px;
  max-width:85%;
  line-height:1.7;
  word-break:break-word;
  white-space:pre-wrap;
  box-shadow:var(--shadow);
  font-size:17px;
}

.ai-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
  flex-wrap:wrap;
}

.ai-action-btn{
  padding:6px 14px;
  border:1.5px solid var(--border);
  border-radius:20px;
  background:#fff;
  font-size:14px;
  cursor:pointer;
  transition:all .2s;
  color:var(--text-light);
}

.ai-action-btn:hover{border-color:var(--primary);color:var(--primary)}

.ai-action-btn.copied{border-color:var(--success);color:var(--success)}

.compliance-checking{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-size:14px;
  color:var(--text-light);
}

.compliance-checking .spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid var(--border);
  border-top-color:var(--primary);
  border-radius:50%;
  animation:spin .8s linear infinite;
}

@keyframes spin{to{transform:rotate(360deg)}}

.compliance-safe{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:8px;
  font-size:14px;
  color:var(--success);
  font-weight:500;
}

.compliance-warning{
  margin-top:8px;
  padding:12px 14px;
  background:#FFF8E1;
  border:1.5px solid #FFE082;
  border-radius:var(--radius-sm);
  font-size:15px;
  line-height:1.6;
}

.compliance-warning .warning-header{
  font-weight:600;
  color:var(--warning);
  margin-bottom:6px;
}

.rewrite-content{
  margin-top:8px;
  padding:10px 12px;
  background:#fff;
  border-radius:8px;
  border:1px solid var(--border);
  white-space:pre-wrap;
  line-height:1.6;
}

.typing-indicator{
  display:inline-flex;
  gap:4px;
  padding:14px 18px;
}

.typing-indicator span{
  width:8px;
  height:8px;
  background:var(--text-lighter);
  border-radius:50%;
  animation:typing 1.4s infinite both;
}

.typing-indicator span:nth-child(2){animation-delay:.2s}
.typing-indicator span:nth-child(3){animation-delay:.4s}

@keyframes typing{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

#inputArea{
  padding:12px 20px 20px;
  background:var(--card-bg);
  border-top:1px solid var(--border);
}

.input-row{
  display:flex;
  gap:10px;
  align-items:flex-end;
  max-width:800px;
  margin:0 auto;
}

#userInput{
  flex:1;
  padding:12px 16px;
  border:2px solid var(--border);
  border-radius:var(--radius-sm);
  font-size:17px;
  line-height:1.5;
  resize:none;
  outline:none;
  background:var(--bg);
  color:var(--text);
  max-height:120px;
  overflow-y:auto;
  transition:border-color .2s;
  font-family:inherit;
}

#userInput:focus{border-color:var(--primary)}

#sendBtn{
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all .2s;
  flex-shrink:0;
}

#sendBtn:hover:not(:disabled){background:var(--primary-hover);transform:scale(1.05)}
#sendBtn:disabled{opacity:.4;cursor:not-allowed;transform:none}

@media(max-width:768px){
  #sidebar{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    transform:translateX(-100%);
  }

  #sidebar.open{transform:translateX(0)}

  #sidebarOverlay.show{display:block}

  .close-btn{display:block}
  .menu-btn{display:block}

  #chatArea{padding:12px}
  #inputArea{padding:8px 12px 16px}

  .bubble-user,.bubble-ai{max-width:92%}

  .quick-actions{gap:8px}
}

@media(max-width:480px){
  html,body{font-size:16px}
  .lock-card{padding:28px 20px}
  .bubble-ai{font-size:16px}
}