.work-chat {
  width: min(100% - 40px, 1080px);
  margin: 0 auto 32px;
}

.work-chat-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.work-chat-header h3 { margin: 0 0 4px; }
.work-chat-connection { color: var(--muted); font-size: 0.9rem; }

.work-chat-shell {
  display: flex;
  flex-direction: column;
  height: min(72vh, 740px);
  min-height: 400px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  overflow: hidden;
}

.work-chat-history-bar { flex: 0 0 auto; min-height: 8px; text-align: center; }
.work-chat-history-bar:has(button) { padding: 8px; border-bottom: 1px solid var(--line); }
.work-chat-history-bar .btn { padding: 7px 14px; }

.work-chat-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overscroll-behavior: contain;
}

.work-chat-message {
  width: fit-content;
  max-width: min(78%, 620px);
  min-width: 120px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--detail-bg);
  overflow-wrap: anywhere;
}

.work-chat-message.is-own {
  align-self: flex-end;
  background: var(--secondary-btn-bg);
}

.work-chat-message-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 5px;
  font-size: 0.87rem;
}

.work-chat-message-head time, .work-chat-delivery { color: var(--muted); font-size: 0.78rem; }
.work-chat-message p { margin: 0; white-space: pre-wrap; }
.work-chat-photo { display: block; max-width: 100%; max-height: 330px; border-radius: 4px; margin: 4px 0 8px; }
.work-chat-delivery { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 7px; }
.work-chat-delivery .btn { padding: 4px 8px; font-size: 0.78rem; }

.work-chat-compose { flex: 0 0 auto; padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.work-chat-compose form { display: grid; gap: 7px; }
.work-chat-compose textarea { width: 100%; resize: vertical; min-height: 62px; max-height: 150px; }
.work-chat-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }
.work-chat-actions .btn { margin-left: auto; }
.work-chat-photo-picker { cursor: pointer; color: var(--accent-2); font-weight: 600; }
.work-chat-photo-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.work-chat-photo-picker:focus-within { outline: 2px solid var(--focus-outline); outline-offset: 4px; }
.work-chat-file-name { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.work-chat-error { color: var(--accent); margin: 0; font-size: 0.9rem; }
.work-chat-error:empty { display: none; }

@media (max-width: 640px) {
  .work-chat { width: calc(100% - 24px); }
  .work-chat-shell { height: min(68dvh, 640px); min-height: 360px; }
  .work-chat-feed { padding: 12px; }
  .work-chat-message { max-width: 90%; }
  .work-chat-message-head { flex-wrap: wrap; gap: 2px 8px; }
  .work-chat-compose { padding: 10px; }
}