body {
  margin: 0; font-family: Arial, sans-serif; background:#f7f7f7;
}

.app { display: flex; height: 100vh; }

.sidebar {
  width: 220px; background:#2c3e50; color:white; padding:20px; box-sizing:border-box;
  display:flex; flex-direction:column; gap:10px;
}

.sidebar h2 { margin-top:0; }

.switch {
  display:flex; align-items:center; justify-content:space-between;
  background:#34495e; padding:5px 10px; border-radius:5px; cursor:pointer;
}

.switch input { display:none; }
.switch .slider { width:40px; height:18px; background:#95a5a6; border-radius:9px; position:relative; transition:0.3s; }
.switch input:checked + .slider { background:#27ae60; }
.switch .slider::before {
  content:""; position:absolute; width:14px; height:14px; background:white; border-radius:50%;
  top:2px; left:2px; transition:0.3s;
}
.switch input:checked + .slider::before { transform: translateX(22px); }

.small-switch { font-size:12px; margin-top:10px; }

.sidebar button { padding:8px; margin-top:10px; cursor:pointer; border:none; border-radius:5px; }

.chat-container { flex:1; display:flex; flex-direction:column; padding:10px; box-sizing:border-box; }

.bot-cards { display:flex; gap:10px; flex-wrap: wrap; overflow-y:auto; flex:1; }

.bot-card { flex:1 1 200px; background:white; border-radius:5px; box-shadow:0 2px 5px rgba(0,0,0,0.2); display:flex; flex-direction:column; max-height:70vh; overflow:hidden; }

.bot-header { background:#2980b9; color:white; padding:5px 10px; font-weight:bold; }
.bot-content { padding:10px; flex:1; overflow-y:auto; white-space:pre-wrap; }

.chat-input { display:flex; gap:5px; margin-top:10px; }

.chat-input textarea { flex:1; padding:8px; border-radius:5px; border:1px solid #ccc; resize:none; }

.chat-input button { padding:8px 12px; border:none; border-radius:5px; cursor:pointer; }

.dark-mode { background:#1e1e1e; color:white; }
.dark-mode .sidebar { background:#34495e; }
.dark-mode .bot-card { background:#2c3e50; color:white; }
.dark-mode .bot-header { background:#16a085; }