:root { --bg:#f6f3f1; --panel:#fff; --ink:#171717; --muted:#7b7470; --border:#e8e1dd; --accent:#ed6f97; --soft:#fbf8f6; --danger:#a33a3a; }
* { box-sizing:border-box; }
html,body,#app { margin:0; width:100%; height:100%; }
body { font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.login-shell { min-height:100%; display:grid; place-items:center; padding:24px; }
.login-card { width:min(440px,100%); background:#fff; border:1px solid var(--border); border-radius:24px; padding:30px; box-shadow:0 24px 70px rgba(35,24,29,.1); }
.brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:19px; }
.brand-mark { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; background:var(--accent); color:#fff; }
.login-card h1 { margin:30px 0 8px; font-size:29px; letter-spacing:-.03em; }
.login-card p { margin:0 0 25px; color:var(--muted); line-height:1.5; }
.field { display:grid; gap:7px; margin-bottom:15px; }
.field label { font-size:13px; font-weight:650; }
.field input { width:100%; border:1px solid var(--border); border-radius:13px; padding:13px 14px; outline:none; }
.field input:focus { border-color:#d98aa4; box-shadow:0 0 0 3px rgba(237,111,151,.12); }
.primary { border:0; border-radius:13px; background:var(--accent); color:#fff; padding:13px 16px; font-weight:750; }
.primary:disabled { opacity:.5; }
.error { color:var(--danger); font-size:13px; margin-top:12px; }
.shell { height:100%; display:grid; grid-template-columns:360px minmax(0,1fr); background:#fff; }
.sidebar { border-right:1px solid var(--border); min-width:0; display:grid; grid-template-rows:auto auto 1fr; background:var(--soft); }
.side-head { padding:17px 18px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.side-head .brand { font-size:16px; }
.icon-button { width:38px; height:38px; border:1px solid var(--border); border-radius:12px; background:#fff; display:grid; place-items:center; }
.filters { display:flex; gap:7px; padding:0 14px 13px; overflow:auto; }
.filter { border:1px solid var(--border); border-radius:11px; background:#fff; color:#5f5955; padding:8px 10px; font-size:12px; white-space:nowrap; }
.filter.active { background:#171717; border-color:#171717; color:#fff; }
.conversation-list { overflow:auto; }
.conversation-item { width:100%; border:0; border-top:1px solid var(--border); background:transparent; text-align:left; padding:14px 15px; display:grid; grid-template-columns:44px 1fr auto; gap:11px; color:inherit; }
.conversation-item:hover,.conversation-item.active { background:#fff; }
.avatar { width:44px; height:44px; border-radius:50%; background:#efe8e4; display:grid; place-items:center; font-weight:800; color:#5e5651; }
.conversation-main { min-width:0; }
.conversation-name { font-size:14px; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-preview { margin-top:5px; font-size:12px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.conversation-meta { text-align:right; font-size:11px; color:var(--muted); }
.unread { margin-top:8px; margin-left:auto; min-width:20px; height:20px; padding:0 5px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--accent); font-size:11px; }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:5px; background:#aaa; }
.status-human_requested { background:#d84949; }.status-human { background:#2b8e62; }.status-ai { background:#9671d2; }.status-closed { background:#aaa; }
.chat { min-width:0; display:grid; grid-template-rows:auto 1fr auto; background:#fdfcfc; }
.empty { height:100%; display:grid; place-items:center; color:var(--muted); text-align:center; padding:30px; }
.chat-head { min-height:75px; border-bottom:1px solid var(--border); padding:13px 18px; display:flex; align-items:center; gap:12px; background:#fff; }
.chat-head-copy { min-width:0; flex:1; }
.chat-title { font-weight:800; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-sub { color:var(--muted); font-size:12px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.actions { display:flex; gap:7px; }
.action { border:1px solid var(--border); background:#fff; border-radius:11px; padding:9px 11px; font-size:12px; font-weight:650; }
.action.accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.messages { overflow:auto; padding:24px 24px 10px; background:linear-gradient(180deg,#fcfaf9 0%,#fff 100%); }
.message { display:flex; margin-bottom:12px; }
.message.visitor { justify-content:flex-start; }.message.operator,.message.ai { justify-content:flex-end; }.message.system { justify-content:center; }
.message-bubble { max-width:min(680px,78%); border:1px solid var(--border); background:#fff; padding:10px 12px; border-radius:15px; white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; line-height:1.45; box-shadow:0 3px 12px rgba(20,15,17,.035); }
.message.operator .message-bubble { background:var(--accent); color:#fff; border-color:var(--accent); border-bottom-right-radius:5px; }
.message.ai .message-bubble { background:#201f20; color:#fff; border-color:#201f20; border-bottom-right-radius:5px; }
.message.visitor .message-bubble { border-bottom-left-radius:5px; }
.message.system .message-bubble { max-width:85%; background:#f5f1ef; text-align:center; color:#625c58; font-size:12px; }
.message-time { opacity:.65; font-size:10px; margin-top:5px; }
.typing { display:none; padding:0 26px 8px; color:var(--muted); font-size:12px; }.typing.active { display:block; }
.compose-wrap { border-top:1px solid var(--border); background:#fff; padding:11px 14px 14px; }
.compose { border:1px solid var(--border); border-radius:16px; display:flex; align-items:flex-end; gap:10px; padding:7px 8px 7px 13px; }
.compose textarea { flex:1; border:0; outline:0; resize:none; max-height:120px; min-height:40px; padding:9px 0; line-height:1.4; }
.send { width:42px; height:42px; border:0; border-radius:13px; background:var(--accent); color:#fff; font-weight:900; }
.mobile-back { display:none; }
@media (max-width:800px) {
  .shell { grid-template-columns:1fr; }
  .sidebar.is-hidden { display:none; }
  .chat { display:none; }
  .chat.is-visible { display:grid; position:fixed; inset:0; z-index:10; }
  .mobile-back { display:grid; }
  .actions .action:not(.accent) { display:none; }
}