* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif; }
body { background: #ece5dd; color: #111; }

.app { display: flex; flex-direction: column; height: 100vh; max-width: 720px; margin: 0 auto; background: #fff; box-shadow: 0 0 24px rgba(0,0,0,.08); }

.topbar { display: flex; gap: 16px; align-items: center; padding: 10px 16px; background: #075e54; color: #fff; }
.topbar .brand { font-weight: 700; }
.topbar .identity { margin-left: auto; font-size: 14px; }
.topbar select { padding: 6px 8px; border-radius: 6px; border: 0; }
.topbar .link { color: #cfeee9; font-size: 13px; text-decoration: none; }

.chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.messages { flex: 1; overflow-y: auto; padding: 16px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='1' fill='%23d8d2c5'/></svg>"); }

.msg { max-width: 80%; margin: 6px 0; padding: 8px 12px; border-radius: 8px; line-height: 1.35; word-wrap: break-word; white-space: pre-wrap; box-shadow: 0 1px 0 rgba(0,0,0,.08); }
.msg.outbound { background: #fff; margin-right: auto; border-top-left-radius: 0; }
.msg.inbound { background: #dcf8c6; margin-left: auto; border-top-right-radius: 0; }
.msg.system { background: #fff5cc; border: 1px solid #f0e1a3; max-width: 100%; text-align: center; font-size: 13px; color: #6a5d1c; }
.msg .meta { display: block; font-size: 10px; color: #666; margin-top: 4px; text-align: right; }

.msg .form-card { padding: 8px; }
.msg .form-card h4 { margin: 0 0 8px; }
.msg .form-card label { display: block; font-size: 13px; margin: 6px 0 2px; }
.msg .form-card input, .msg .form-card select { width: 100%; padding: 6px 8px; font: inherit; border: 1px solid #ccc; border-radius: 6px; }
.msg .form-card .btn { margin-top: 10px; }

.task-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 10px; margin: 6px 0; }
.task-card h5 { margin: 0 0 4px; }
.task-card .cat { color: #666; font-size: 12px; }
.task-card a { color: #075e54; }

.action-bar { display: flex; gap: 8px; padding: 8px 16px; background: #f6f6f6; border-top: 1px solid #e5e5e5; min-height: 0; flex-wrap: wrap; }
.action-bar:empty { display: none; }
.btn { background: #075e54; color: #fff; border: 0; padding: 8px 14px; border-radius: 6px; cursor: pointer; font-weight: 600; font-size: 14px; }
.btn.secondary { background: #eee; color: #333; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.composer { display: flex; gap: 8px; padding: 10px; background: #f0f0f0; border-top: 1px solid #ddd; }
.composer input[type=text] { flex: 1; padding: 10px 12px; border: 0; border-radius: 24px; font: inherit; background: #fff; }
.composer button { background: #075e54; color: #fff; border: 0; border-radius: 24px; padding: 0 18px; cursor: pointer; font-weight: 600; }

/* Admin */
.admin { padding: 24px; max-width: 1100px; margin: 0 auto; background: #f5f5f5; min-height: 100vh; }
.admin h1 { margin: 0 0 16px; color: #075e54; }
.admin h2 { margin: 24px 0 8px; }
.admin .row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.admin .col { flex: 1 1 480px; min-width: 0; }
.admin .card { background: #fff; border-radius: 8px; padding: 12px; margin: 8px 0; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.admin table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; }
.admin th, .admin td { text-align: left; padding: 8px 10px; font-size: 13px; }
.admin th { background: #075e54; color: #fff; }
.admin tr:nth-child(even) { background: #fafafa; }
.admin img.thumb { max-width: 240px; max-height: 240px; border-radius: 6px; border: 1px solid #ddd; }
.admin .actions { display: flex; gap: 8px; margin-top: 8px; }
.admin .danger { background: #c0392b; }
.admin .info { color: #666; font-size: 12px; }