/* public/css/admin.css */
:root {
  --color-primary: #2D2D2D;
  --color-accent: #C9A96E;
  --color-bg: #F7F7F5;
  --color-card: #FFFFFF;
  --color-text: #2D2D2D;
  --color-muted: #888;
  --color-border: #E5E5E0;
  --color-inbound: #F0F0ED;
  --color-outbound: #DCF7D6;
  --color-error: #D9534F;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-bg); color: var(--color-text);
}
button { cursor: pointer; font-family: inherit; }
input, textarea, button {
  font-family: inherit; font-size: 15px;
  border: 1px solid var(--color-border); border-radius: 6px;
  padding: 10px 12px;
}
input:focus, textarea:focus { outline: 2px solid var(--color-accent); }

/* Login page */
.login-wrap {
  display: flex; min-height: 100vh;
  align-items: center; justify-content: center;
}
.login-card {
  background: var(--color-card);
  padding: 32px; border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  width: 360px;
}
.login-card h1 { margin: 0 0 24px; font-size: 20px; }
.login-card label { display: block; font-size: 13px; margin-bottom: 4px; color: var(--color-muted); }
.login-card input { width: 100%; margin-bottom: 16px; }
.login-card button {
  width: 100%; background: var(--color-primary); color: white;
  border: none; padding: 12px; font-weight: 600;
}
.login-card button:hover { background: #000; }
.login-error { color: var(--color-error); font-size: 13px; min-height: 20px; margin-bottom: 8px; }

/* Inbox layout */
.layout { display: grid; grid-template-columns: 340px 1fr; height: 100vh; }
.sidebar { background: var(--color-card); border-right: 1px solid var(--color-border); overflow-y: auto; }
.sidebar-header { padding: 16px; border-bottom: 1px solid var(--color-border); font-weight: 600; display:flex; justify-content:space-between; align-items:center; }
.sidebar-header .logout { font-size: 12px; color: var(--color-muted); background:none; border:none; padding: 4px 8px; }
.conversation-item { padding: 14px 16px; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.conversation-item:hover { background: var(--color-inbound); }
.conversation-item.active { background: var(--color-inbound); }
.conversation-item .name { font-weight: 600; font-size: 14px; }
.conversation-item .phone { font-size: 12px; color: var(--color-muted); }
.conversation-item .preview { font-size: 13px; color: var(--color-muted); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item .status-pill { font-size: 11px; padding: 2px 8px; border-radius: 10px; }
.status-bot_active { background: #DCF7D6; color: #2D5A2D; }
.status-paused_human { background: #FCE4E4; color: #8B1A1A; }
.status-human_takeover { background: #FFF4D6; color: #826500; }
.status-standby { background: #E5E5E0; color: #555; }
.status-closed { background: #E5E5E0; color: #888; }
.main { display: flex; flex-direction: column; height: 100vh; }
.main-header { padding: 16px 24px; border-bottom: 1px solid var(--color-border); background: var(--color-card); }
.messages { flex: 1; overflow-y: auto; padding: 24px; background: var(--color-bg); display: flex; flex-direction: column; }
.message {
  max-width: 540px; margin-bottom: 10px; padding: 10px 14px;
  border-radius: 10px; white-space: pre-wrap; word-break: break-word;
}
.message.inbound { background: var(--color-card); border: 1px solid var(--color-border); margin-right: auto; }
.message.outbound { background: var(--color-outbound); margin-left: auto; }
.message .meta { font-size: 11px; color: var(--color-muted); margin-top: 4px; }
.message img { max-width: 320px; border-radius: 6px; display: block; margin-top: 6px; }
.reply-box { border-top: 1px solid var(--color-border); padding: 16px; background: var(--color-card); }
.reply-box textarea { width: 100%; min-height: 70px; resize: vertical; }
.reply-box .actions { display: flex; justify-content: flex-end; margin-top: 8px; gap: 8px; }
.reply-box button { background: var(--color-primary); color: white; border: none; padding: 8px 20px; font-weight: 600; }
.reply-box button:disabled { opacity: 0.6; cursor: not-allowed; }
.empty { color: var(--color-muted); text-align: center; padding: 40px; }