:root{color:#111827;background:#f4f6f8;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{border:1px solid #d1d5db;background:#fff;border-radius:6px;cursor:pointer;padding:8px 10px}button:disabled{cursor:not-allowed;opacity:.55}button.danger{border-color:#fecaca;color:#991b1b}input,select,textarea{border:1px solid #d1d5db;border-radius:6px;padding:10px;width:100%}textarea{min-height:86px;resize:vertical}.agent-screen,.fatal-screen{display:grid;min-height:100vh;place-items:center;padding:24px}.fatal-card{background:#fff;border:1px solid #fecaca;border-radius:8px;max-width:560px;padding:28px;width:100%}.fatal-card h1{color:#991b1b;margin:0 0 12px}.fatal-card p{color:#374151;margin:0}.agent-card{background:#fff;border:1px solid #e5e7eb;border-radius:8px;display:grid;gap:14px;max-width:420px;padding:28px;width:100%}.agent-card h1,.topbar h1,.conversation-header h2{margin:0}.app-shell{display:grid;grid-template-columns:360px minmax(360px,1fr) 340px;height:100vh;min-width:0}.left-panel,.right-panel{background:#fff;border-color:#e5e7eb;border-style:solid;min-height:0;overflow:auto;padding:16px}.left-panel{border-width:0 1px 0 0}.right-panel{border-width:0 0 0 1px}.main-panel{display:grid;grid-template-rows:auto auto 1fr auto;min-height:0}.topbar,.conversation-header,.agent-info{align-items:center;display:flex;justify-content:space-between;gap:12px}.status-dot{color:#b45309;display:inline-block;font-size:13px;margin-top:4px;text-transform:capitalize}.status-dot.ready{color:#047857}.qr-box{align-items:center;background:#f9fafb;border:1px solid #e5e7eb;border-radius:8px;display:grid;gap:8px;margin:16px 0;padding:12px;text-align:center}.qr-box img{margin:auto;max-width:220px;width:100%}.search{margin:16px 0 10px}.filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}.filters button{font-size:13px;padding:6px 8px;text-transform:capitalize}.filters .active,.chat-row.selected{border-color:#16a34a;background:#ecfdf5}.chat-list{display:grid;gap:8px}.chat-row{display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto;padding:12px;text-align:left;width:100%}.chat-row-main{display:grid;gap:4px;min-width:0}.chat-row-main strong,.chat-row-main span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-row-main span,.chat-row-meta,.conversation-header span,.empty,.notes small{color:#6b7280;font-size:13px}.chat-row-meta{display:grid;justify-items:end;gap:4px}.chat-row-meta em{background:#16a34a;border-radius:999px;color:#fff;font-size:12px;font-style:normal;min-width:22px;padding:2px 6px;text-align:center}.badge{border-radius:999px;font-size:12px;padding:2px 8px;text-transform:capitalize}.badge.open{background:#dcfce7;color:#166534}.badge.pending{background:#fef3c7;color:#92400e}.badge.resolved{background:#e0e7ff;color:#3730a3}.conversation-header{background:#fff;border-bottom:1px solid #e5e7eb;padding:16px 20px}.message-range{display:flex;gap:8px;padding:8px}.message-range button{background:#fff;border:1px solid #d1d5db;cursor:pointer;font-size:13px;padding:6px 10px}.message-range button.active{background:#16a34a;border-color:#16a34a;color:#fff}.messages{align-items:flex-start;display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding:20px}.messages>:first-child{margin-top:auto}.bubble img,.bubble video{max-height:360px;object-fit:contain}.bubble{border-radius:8px;max-width:min(70%,680px);padding:10px 12px}.bubble p{margin:0 0 6px;white-space:pre-wrap;word-break:break-word}.group-sender{color:#0891b2;display:block;font-size:12px;margin-bottom:4px}.ticks{color:#6b7280;font-size:12px;margin-left:6px}.ticks.read{color:#2563eb}.load-more{background:#fff;border:1px solid #e5e7eb;border-radius:8px;cursor:pointer;margin:8px;padding:8px}.load-more:hover{background:#f3f4f6}.reply-tools{align-items:center;display:flex;gap:8px}.reply-tools select{border:1px solid #e5e7eb;border-radius:6px;font-size:13px;padding:4px 8px}.attach-button{border:1px solid #e5e7eb;border-radius:6px;cursor:pointer;font-size:13px;padding:4px 10px;-webkit-user-select:none;user-select:none}.attach-button:hover{background:#f3f4f6}.attach-button.disabled{cursor:default;opacity:.6}.bubble time{color:#6b7280;display:block;font-size:12px;text-align:right}.incoming{background:#fff;border:1px solid #e5e7eb}.outgoing{align-self:flex-end;background:#d9fdd3}.reply-box{background:#fff;border-top:1px solid #e5e7eb;display:grid;gap:10px;grid-template-columns:1fr auto;padding:14px}.reply-tools{grid-column:1 / -1}.reply-box textarea{min-height:96px;resize:vertical}.reply-box button[type=submit]{align-self:end}.right-panel section{border-top:1px solid #e5e7eb;display:grid;gap:10px;padding:18px 0}.right-panel h3{margin:0}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.admin-list{display:grid;gap:8px}.admin-row{align-items:center;display:grid;gap:8px;grid-template-columns:minmax(0,1fr) auto}.admin-row>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tag{align-items:center;display:inline-flex;gap:6px}.tag.attached{background:#f3f4f6}.tag span{border-radius:999px;height:10px;width:10px}.tag-label{align-items:center;display:inline-flex;gap:6px}.tag-label i{border-radius:999px;display:inline-block;height:10px;width:10px}.tag-form,.note-form{display:grid;gap:8px}.color-picker{display:flex;gap:6px;align-items:center}.color-dot{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent}.color-dot.selected{border-color:#111}.search-section-label{color:#6b7280;font-size:12px;font-weight:600;margin:8px 0 2px;text-transform:uppercase}.activity-header{align-items:center;display:flex;gap:8px;justify-content:space-between}.activity-header h3{margin:0}.notes{display:grid;gap:8px}.notes article{border:1px solid #e5e7eb;border-radius:8px;padding:10px}.notes p{margin:0 0 8px}.empty-state{align-self:center;color:#6b7280;justify-self:center}.error,.toast{color:#b91c1c}.toast{background:#fee2e2;border:1px solid #fecaca;border-radius:8px;bottom:18px;cursor:pointer;max-width:520px;padding:12px 14px;position:fixed;right:18px}@media (max-width: 1100px){.app-shell{grid-template-columns:320px minmax(0,1fr)}.right-panel{display:none}}@media (max-width: 760px){.app-shell{grid-template-columns:1fr;height:auto;min-height:100vh}.left-panel,.right-panel{border:0}.main-panel{min-height:70vh}.bubble{max-width:88%}}