/* Chat module styles (roadmap F1sTZ): conversation list, chat bubbles (yours right, theirs left), ticks. */
.chat-av { position: relative; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--navy-hover); color: var(--text-main); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.chat-av img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; }
.chat-item { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.chat-last { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
.chat-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.chat-unread { background: var(--accent-green); color: var(--color-black); font-weight: 800; font-size: 0.72rem; min-width: 20px; padding: 1px 6px; border-radius: var(--radius-pill); text-align: center; }
.chat-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--navy-border); }
.chat-headperson { display: inline-flex; align-items: center; gap: 8px; }
.chat-msgs { height: min(60vh, 560px); min-height: 240px; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: var(--navy-surface); }
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row.mine { justify-content: flex-end; }
.chat-row.theirs { justify-content: flex-start; }
.chat-bubble { max-width: 75%; padding: 8px 12px; border-radius: 16px; background: var(--navy-card); border: 1px solid var(--navy-border); }
.chat-row.mine .chat-bubble { background: var(--accent-blue); border-color: var(--accent-blue); color: var(--color-white); border-bottom-right-radius: 4px; }
.chat-row.theirs .chat-bubble { border-bottom-left-radius: 4px; }
.chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta { font-size: 0.7rem; opacity: 0.75; text-align: right; margin-top: 2px; }
.chat-ticks { letter-spacing: -2px; margin-left: 2px; }
.chat-ticks.read { color: #7dd3fc; font-weight: 800; }
.chat-day { text-align: center; font-size: 0.72rem; color: var(--text-muted); margin: 6px 0; }
.chat-day span { background: var(--navy-card); border-radius: var(--radius-pill); padding: 2px 10px; }
.chat-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--navy-border); align-items: flex-end; }
.chat-form[hidden], .chat-noreply[hidden] { display: none; }
.chat-form textarea { resize: none; max-height: 120px; }
.chat-noreply { padding: 10px 14px; }
.chat-actions { display: inline-flex; gap: 8px; margin-left: auto; }
.chat-sender { font-size: 0.72rem; font-weight: 700; opacity: 0.85; margin-bottom: 2px; }
.chat-del { background: none; border: 0; color: inherit; opacity: 0.6; cursor: pointer; font-size: 0.7rem; padding: 0 2px; min-height: 0; }
.chat-del:hover { opacity: 1; }
.chat-picklist { display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow-y: auto; margin-top: 6px; }
.chat-pick { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.chat-head { flex-wrap: wrap; }
.chat-head > .btn { flex: 0 0 auto; }
.chat-head .chat-headperson { flex: 1 1 120px; min-width: 0; overflow: hidden; }
.chat-headperson > b, .chat-headperson > .small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-headperson > b { flex: 0 1 auto; }
.chat-actions { flex: 0 0 auto; flex-wrap: wrap; }
.chat-actions .btn[hidden] { display: none; }