/* assets/css/chat.css */
.chat-app { display: flex; height: calc(100vh - 220px); min-height: 480px; font-family: Arial, sans-serif; background:#fff; border:1px solid #e5e7eb; border-radius:8px; overflow:hidden; }
/* Ensure chat start form fields use black font */
#chat-start-form input,
#chat-start-form select {
	color: black !important;
}
.chat-sessions { width: 320px; border-right: 1px solid #e5e7eb; background: #fff; display:flex; flex-direction: column; }
.sessions-header { padding: 12px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.sessions-header h3 { margin:0; font-size:16px; }
.session-controls { display:flex; gap:6px; align-items:center; }
.session-controls input { padding:6px 8px; width:160px; border:1px solid #ddd; border-radius:4px; }
.session-controls button { padding:6px 8px; border:1px solid #ddd; background:#f6f6f6; cursor:pointer; border-radius:4px; }
.sessions-list { overflow-y:auto; padding:8px; flex:1; }
.session-item { padding:10px; border-radius:6px; border:1px solid transparent; margin-bottom:8px; cursor:pointer; background:#fafafa; }
.session-item.active { border-color:#d0d0d0; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.session-top { display:flex; justify-content:space-between; align-items:center; }
.session-title { font-weight:700; font-size:13px; }
.session-unread { background:#e53935; color:#fff; padding:2px 6px; font-size:12px; border-radius:12px; }
.session-sub { color:#666; margin-top:6px; font-size:13px; }
.session-meta { color:#999; margin-top:6px; font-size:12px; }

.chat-window { flex:1; display:flex; flex-direction:column; background:#fff; }
.chat-header { padding:12px 14px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; background:#fafafa; }
.chat-messages { padding:12px; flex:1; overflow-y:auto; background: linear-gradient(#fff,#fbfbfb); }
.chat-input-area { padding:8px; border-top:1px solid #eee; display:flex; gap:8px; align-items:center; }
.chat-input-area input { flex:1; padding:10px 12px; border:1px solid #ddd; border-radius:6px; }

.user-msg { background:#e8f5e9; padding:8px; margin:6px 0; border-radius:8px; max-width:80%; }
.admin-msg { background:#fff3e0; padding:8px; margin:6px 0; border-radius:8px; max-width:80%; margin-left:auto; }
.msg-meta { font-size:12px; color:#666; margin-bottom:4px; }
.msg-body { font-size:14px; color:#222; white-space:pre-wrap; }

.typing-indicator { color:#777; font-style:italic; padding-left:6px; }
.sessions-footer { padding:8px; text-align:center; font-size:12px; color:#666; border-top:1px solid #eee; }

@media (max-width: 900px) {
.chat-app { flex-direction: column; }
.chat-sessions { width: 100%; height: 40%; }
.chat-window { height: 60%; }
}