* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f4f6f8;
  color: #222;
}

.login-box {
  max-width: 320px;
  margin: 80px auto;
  padding: 30px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.login-box h1 { font-size: 1.3rem; margin: 0 0 10px; }
.login-box input { padding: 10px; border: 1px solid #ccc; border-radius: 6px; }
.login-box button { padding: 10px; border: none; border-radius: 6px; background: #007bff; color: #fff; cursor: pointer; }
.error { color: #d53032; font-size: 0.85rem; min-height: 1.2em; }

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

.sidebar { width: 280px; background: #1e2530; color: #eee; display: flex; flex-direction: column; }
.sidebar-header { padding: 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #333; font-weight: bold; }
.sidebar-header button { background: none; border: none; color: #eee; cursor: pointer; font-size: 1.1rem; }
.icon-link { color: #eee; text-decoration: none; font-size: 1.1rem; margin-right: 10px; }

.settings-page { max-width: 500px; margin: 40px auto; padding: 0 20px; }
.settings-header a { color: #007bff; text-decoration: none; }
.settings-box { background: #fff; border-radius: 10px; padding: 24px; margin-top: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.settings-box h1 { margin-top: 0; font-size: 1.3rem; }
.settings-box h2 { font-size: 1rem; margin-bottom: 6px; }
.settings-box input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; margin: 8px 0; }
.settings-box button { padding: 10px 16px; border: none; border-radius: 6px; background: #007bff; color: #fff; cursor: pointer; }
.success { color: #28a745; font-size: 0.85rem; }

.machines-page { max-width: 1000px; margin: 40px auto; padding: 0 20px; }
.machines-box { background: #fff; border-radius: 10px; padding: 24px; margin-top: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.machines-box h1 { margin-top: 0; font-size: 1.3rem; }
.machines-box h2 { font-size: 1rem; margin: 24px 0 8px; }

.machines-table { width: 100%; border-collapse: collapse; }
.machines-table th, .machines-table td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; font-size: 0.9rem; }
.machines-table input, .machines-table select { width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }
.machines-table button { padding: 6px 10px; border: none; border-radius: 4px; background: #007bff; color: #fff; cursor: pointer; }

.token-cell { display: flex; gap: 4px; align-items: center; }
.token-cell input { font-family: monospace; font-size: 0.8rem; }
.token-cell button { background: #6c757d; padding: 4px 8px; flex-shrink: 0; }

.new-machine-row { display: flex; gap: 8px; align-items: center; }
.new-machine-row input, .new-machine-row select { padding: 8px; border: 1px solid #ccc; border-radius: 6px; }
.new-machine-row input { flex: 1; }
.new-machine-row button { padding: 8px 16px; border: none; border-radius: 6px; background: #28a745; color: #fff; cursor: pointer; }

.send-cell { display: flex; gap: 4px; }
.send-cell input { flex: 1; }
.send-cell button { background: #17a2b8; flex-shrink: 0; }
.send-result { margin: 4px 0 0; font-size: 0.75rem; min-height: 1em; }
.btn-clear-chat { background: #dc3545; white-space: nowrap; }

.escalation-list { flex: 1; overflow-y: auto; }
.escalation-item { padding: 10px 14px; border-bottom: 1px solid #2a323e; cursor: pointer; }
.escalation-item:hover, .escalation-item.active { background: #2a323e; }
.escalation-item p { margin: 4px 0; font-size: 0.85rem; color: #bbb; }
.escalation-item small { color: #888; }
.status-badge { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; margin-left: 6px; }
.status-pending { background: #d53032; }
.status-claimed { background: #f0ad4e; color: #222; }
.hint { padding: 14px; color: #888; font-style: italic; }

.conversation { flex: 1; display: flex; flex-direction: column; }
.conversation-header { padding: 14px; background: #fff; border-bottom: 1px solid #ddd; font-weight: bold; }
.messages { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }

.message { display: flex; }
.message.from-operator { justify-content: flex-start; }
.message.from-ai { justify-content: flex-start; }
.message.from-human { justify-content: flex-end; }
.message.from-system { justify-content: center; }

.bubble { max-width: 60%; padding: 8px 12px; border-radius: 8px; background: #eee; }
.message.from-operator .bubble { background: #e2e8f0; }
.message.from-ai .bubble { background: #dbeafe; }
.message.from-human .bubble { background: #007bff; color: #fff; }
.message.from-system .bubble { background: #fff3cd; font-style: italic; font-size: 0.85rem; }
.message.context-block { justify-content: center; }
.context-bubble {
  background: #fef3c7; border: 1px dashed #d97706; color: #78350f;
  font-size: 0.8rem; max-width: 80%; font-style: normal;
}
.context-bubble div { margin-top: 2px; }
.bubble img { max-width: 100%; border-radius: 6px; display: block; margin-top: 6px; }

.drop-zone {
  margin: 0 14px 8px; padding: 10px; text-align: center; font-size: 0.8rem; color: #888;
  border: 2px dashed #ccc; border-radius: 8px;
}
.drop-zone.drag-active { border-color: #007bff; color: #007bff; background: #eef6ff; }

.reply-row { display: flex; gap: 8px; padding: 14px; background: #fff; border-top: 1px solid #ddd; }
.reply-row input { flex: 1; padding: 8px 12px; border: 1px solid #ccc; border-radius: 6px; }
.reply-row button { padding: 8px 14px; border: none; border-radius: 6px; background: #007bff; color: #fff; cursor: pointer; }
.reply-row button:disabled { background: #aaa; cursor: not-allowed; }