:root{--bg: #f5f6f8;--text: #1f2937;--muted: #6b7280;--incoming-bg: #ffffff;--incoming-text: var(--text);--outgoing-bg: #2563eb;--outgoing-text: #ffffff;--bubble-radius: 18px;--bubble-maxw: 70ch;--shadow: 0 2px 6px rgba(0,0,0,.08)}@media (prefers-color-scheme: dark){:root{--bg: #0f1115;--text: #e5e7eb;--muted: #9ca3af;--incoming-bg: #1b1f27;--outgoing-bg: #3b82f6;--outgoing-text: #ffffff;--shadow: 0 2px 12px rgba(0,0,0,.25)}}.messages-container{max-height:300px}@media (max-width: 575.98px){.messages-container{max-height:150px}}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:12px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"}.chat{max-width:720px;margin:0 auto;display:flex;flex-direction:column}.message-row{display:grid;grid-template-columns:auto 1fr;align-items:flex-end;gap:8px 10px}.message-row.incoming{grid-template-columns:auto 1fr}.message-row.outgoing{grid-template-columns:1fr auto;justify-items:end}.avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow)}.bubble-group{display:inline-flex;flex-direction:column;gap:6px;max-width:min(var(--bubble-maxw), 100%)}.bubble{position:relative;display:inline-block;padding:4px 8px 4px;border-radius:var(--bubble-radius);box-shadow:var(--shadow);word-wrap:break-word;overflow-wrap:anywhere}.incoming .bubble{background:var(--incoming-bg);color:var(--incoming-text);border-top-left-radius:6px}.outgoing .bubble{background:var(--outgoing-bg);color:var(--outgoing-text);border-top-right-radius:6px}.incoming .bubble::after,.outgoing .bubble::after{content:"";position:absolute;bottom:0;width:0;height:0;border:8px solid transparent}.incoming .bubble::after{left:-3px;border-right-color:var(--incoming-bg);border-left:0;transform:translateY(2px)}.outgoing .bubble::after{right:-3px;border-left-color:var(--outgoing-bg);border-right:0;transform:translateY(2px)}.meta{display:block;font-size:10px;color:var(--muted);opacity:.9}.outgoing .bubble .meta{color:rgba(255,255,255,0.8)}.meta.right{text-align:right}.meta.left{text-align:left}.bubble:focus{outline:2px solid #93c5fd;outline-offset:2px}.bubble-group .bubble:not(:first-child)::after{display:none;border:none}@media (max-width: 480px){:root{--bubble-maxw: 100% }.chat{padding:12px}.avatar{width:28px;height:28px}.bubble{padding:8px 10px 14px;font-size:13px}.meta{font-size:10px}}.reactions{display:inline-flex;gap:6px;margin-top:4px;font-size:12px;color:var(--muted)}.chat.rounded .bubble{border-radius:22px}.chat.rounded .incoming .bubble{border-top-left-radius:22px}.chat.rounded .outgoing .bubble{border-top-right-radius:22px}.chat.rounded .bubble::after{display:none}