:root{
  --primary:#2872FA;
  --text:#6C737D;
  --bg:#F7F9FC;
  --card:#FFFFFF;
  --border:#E6EAF0;
  --shadow: 0 10px 25px rgba(16,24,40,0.06);
  --radius: 14px;
}

html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .topbar { direction: rtl; }
html[dir="rtl"] .controls { justify-content: flex-start; }
html[dir="rtl"] .brand { flex-direction: row; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app{min-height:100%; display:flex; flex-direction:column;}

.topbar{
  position: sticky;
  top: 0;
  z-index: 20;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  background: rgba(247,249,252,0.9);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}

.brand{display:flex; align-items:center; gap:12px;}
.logo{
  height:36px;
  width:auto;
  display:block;
}
.logo-dot{
  width:14px; height:14px;
  border-radius:999px;
  background: var(--primary);
  box-shadow: 0 0 0 6px rgba(40,114,250,0.12);
}
.brand-title{color:#111827; font-weight:700; letter-spacing:0.2px;}
.brand-subtitle{font-size:12px; margin-top:2px;}

.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.control{display:flex; flex-direction:column; gap:6px;}
.control label{font-size:12px;}
select{
  height:38px;
  border:1px solid var(--border);
  border-radius:12px;
  padding:0 12px;
  background: var(--card);
  color:#111827;
  outline:none;
}

.btn{
  height:38px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--card);
  color:#111827;
  cursor:pointer;
  box-shadow: 0 4px 12px rgba(16,24,40,0.04);
}
.btn:hover{transform: translateY(-1px);}
.btn:active{transform: translateY(0);}

.btn.primary{
  background: var(--primary);
  border-color: rgba(40,114,250,0.35);
  color:white;
}
.btn.secondary{
  background: transparent;
}

.upload-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background: rgba(40,114,250);
  color: white;
}
.upload-btn input{display:none;}

.main{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap:18px;
  padding:18px 20px 24px;
}

.chat{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  min-height: calc(100vh - 90px);
}

.messages{
  padding:18px;
  overflow:auto;
  flex:1;
}

.msg{
  display:flex;
  margin-bottom:14px;
}
.bubble{
  max-width: 78%;
  padding:12px 14px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: #fff;
  line-height:1.45;
  white-space:pre-wrap;
}
.msg.user{justify-content:flex-end;}
.msg.user .bubble{
  background: rgba(40,114,250,0.08);
  border-color: rgba(40,114,250,0.25);
}
.msg.assistant{justify-content:flex-start;}
.msg.assistant .bubble{
  background: #FFFFFF;
}

.bubble.rtl{
  direction: rtl;
  text-align: right;
}

.meta{
  margin-top:8px;
  font-size:12px;
  color: var(--text);
}

.composer{
  display:flex;
  gap:10px;
  padding:12px;
  border-top:1px solid var(--border);
}
textarea{
  flex:1;
  resize:none;
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  font-size:14px;
  outline:none;
  color:#111827;
  background:#fff;
  min-height:38px;
  max-height:140px;
}

.status{
  padding:0 12px 12px;
  font-size:12px;
  color: var(--text);
}

.side{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:14px;
}
.card-title{color:#111827; font-weight:700;}
.card-subtitle{font-size:12px; margin-top:4px; margin-bottom:10px;}

.sources{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.source-item{
  padding:10px 10px;
  border:1px dashed var(--border);
  border-radius:12px;
  font-size:13px;
  color:#111827;
  background: rgba(40,114,250,0.05);
}

.tips{margin:10px 0 0 18px; padding:0; font-size:13px; line-height:1.5;}

.toggle{flex-direction:row; align-items:center; gap:10px;}
.toggle-labels{display:flex; flex-direction:column; gap:2px;}
.toggle-title{font-size:12px; color:#111827; font-weight:600;}
.toggle-hint{font-size:11px;}

.switch{position:relative; display:inline-block; width:44px; height:24px;}
.switch input{display:none;}
.slider{
  position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background:#E9EEF7;
  border:1px solid var(--border);
  border-radius:999px;
  transition: .2s;
}
.slider:before{
  position:absolute; content:"";
  height:18px; width:18px;
  left:3px; top:2px;
  background:rgba(40,114,250,0.75);
  border-radius:999px;
  box-shadow: 0 6px 14px rgba(16,24,40,0.12);
  transition: .2s;
}
input:checked + .slider{
  background: rgba(40,114,250,0.20);
  border-color: rgba(40,114,250,0.35);
}
input:checked + .slider:before{
  transform: translateX(20px);
}

@media (max-width: 980px){
  .main{grid-template-columns: 1fr; }
  .chat{min-height: 70vh;}
}