/* Чат по отклику и подтверждение смены. Токены (--blue, --ink, --line, --radius…) — из catalogue-ui.css. */

.chat { display: flex; flex-direction: column; gap: var(--space-3); min-height: 0; }
.chat-muted { color: var(--muted); font-size: 13px; line-height: 1.5; }

.chat-top { display: flex; align-items: center; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--line); }
.chat-who { display: grid; gap: 2px; min-width: 0; flex: 1; }
.chat-who strong { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-who .chat-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-back { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 18px; cursor: pointer; }
.chat-back:hover { background: var(--ice); }

.chat-avatar { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ice); color: #0758d4; font-weight: 800; overflow: hidden; }
.chat-avatar img { width: 100%; height: 100%; object-fit: cover; }

.chat-badge { flex: none; display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--ice); color: #0758d4; font-size: 12px; font-weight: 700; white-space: nowrap; }
.chat-badge-ok { background: #e8f6ee; color: #1a7f45; }

/* Карточка смены — спокойная поверхность, условия читаются сразу. */
.chat-shift { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.chat-shift-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.chat-shift-head strong { font-size: 16px; }
.chat-shift-facts { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); margin: 0; font-size: 14px; }
.chat-shift-facts dt { color: var(--muted); }
.chat-shift-facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.chat-shift-marks { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: 13px; }
.chat-shift-marks li { padding: 4px 10px; border-radius: 999px; }
.chat-shift-marks .is-ok { background: #e8f6ee; color: #1a7f45; font-weight: 700; }
.chat-shift-marks .is-wait { background: #f2f4f7; color: var(--muted); }
.chat-confirm { width: 100%; }
.chat-ics { justify-self: start; }
.chat-shift-form { display: grid; gap: var(--space-3); }
.chat-field { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.chat-field .cab-input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font: inherit; font-size: 15px; color: var(--ink); background: var(--white); }
.chat-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.chat-shift-edit { display: grid; gap: var(--space-3); }
.chat-edit-toggle { justify-self: start; }

/* Сообщения */
.chat-messages { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: var(--space-2) 2px; list-style: none; max-height: min(52vh, 520px); min-height: 160px; overflow-y: auto; overscroll-behavior: contain; }
.chat-msg { display: flex; }
.chat-msg-mine { justify-content: flex-end; }
.chat-bubble { max-width: min(80%, 460px); padding: 8px 12px 6px; border-radius: 16px; background: #f2f4f7; color: var(--ink); }
.chat-msg-mine .chat-bubble { background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.chat-msg-their .chat-bubble { border-bottom-left-radius: 6px; }
.chat-bubble p { margin: 0; font-size: 15px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble time { display: block; margin-top: 2px; font-size: 11px; opacity: .7; text-align: right; }
.chat-msg-system { flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: var(--space-1) var(--space-4); }
.chat-msg-system p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.chat-msg-system time { font-size: 11px; color: var(--muted); opacity: .8; }
.chat-empty { margin: auto; padding: var(--space-6) var(--space-4); color: var(--muted); font-size: 14px; text-align: center; }

.chat-composer { display: flex; align-items: flex-end; gap: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--line); }
.chat-input { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 22px; font: inherit; font-size: 15px; line-height: 1.4; resize: none; color: var(--ink); background: var(--white); }
.chat-input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.chat-send { flex: none; min-height: 44px; }
.chat-closed { text-align: center; }

/* Список чатов */
.chat-inbox { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.chat-inbox-row { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chat-inbox-row:hover, .chat-inbox-row:focus-visible { background: var(--ice); }
.chat-inbox-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.chat-inbox-title, .chat-inbox-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-inbox-last { color: var(--muted); font-size: 14px; }
.chat-inbox-side { display: grid; justify-items: end; gap: 4px; flex: none; }
.chat-unread { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--blue); color: #fff; font-size: 12px; font-weight: 800; line-height: 22px; text-align: center; }

/* Ближайшие смены */
.chat-upcoming { display: grid; gap: var(--space-2); }
.chat-upcoming-title { font-size: 16px; margin: 0; }
.chat-upcoming-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chat-upcoming-row { display: grid; gap: 2px; justify-items: start; width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.chat-upcoming-row.is-pending { border-left-color: #f5b400; }
.chat-upcoming-row strong { font-size: 15px; }
.chat-upcoming-row:hover { background: var(--ice); }

.chat-open-button .chat-unread { margin-left: 6px; }

@media (max-width: 520px) {
  .chat-top .chat-badge { display: none; }
  .chat-messages { max-height: 48vh; }
  .chat-field-row { grid-template-columns: 1fr; }
}