:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #1d2521; background: #f5f5f3; }
* { box-sizing: border-box; }
body { margin: 0; padding: 24px; }
.conversation { display: flex; flex-direction: column; width: min(100%, 760px); height: calc(100vh - 48px); margin: auto; background: #fff; border: 1px solid #e1e3df; border-radius: 8px; }
.conversation__header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; border-bottom: 1px solid #e1e3df; }
.conversation__header h1 { margin: 0; font-size: 16px; }
.conversation__connection { color: #286b49; font-size: 13px; }
.conversation__connection--offline { color: #68716b; }
.conversation__body { display: flex; flex-direction: column; gap: 24px; flex: 1; overflow: auto; padding: 24px; }
.empty { margin: auto; text-align: center; color: #68716b; font-size: 14px; }
.empty h2, .empty h3 { font-size: 15px; color: #1d2521; }
.message { display: flex; align-items: flex-start; gap: 12px; }
.message__avatar { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 6px; background: #1d2521; color: #fff; font-weight: bold; }
.message__content { min-width: 0; }
.message__meta { display: flex; gap: 12px; align-items: baseline; margin-bottom: 8px; font-size: 12px; }
.message__time, .message__chat { color: #68716b; font-size: 12px; }
.message__bubble { padding: 12px 16px; border-radius: 8px; background: #f2f3f2; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; }
.message__chat { margin-top: 8px; }
@media (max-width: 600px) { body { padding: 0; } .conversation { height: 100dvh; border: 0; border-radius: 0; } }