.order-chat-dialog { --chat-bg: var(--bg, #fff); --chat-surface: var(--surface, #f4f6f4); --chat-text: var(--text, #142219); --chat-line: var(--line, #d3dad5); --chat-accent: var(--green, #157547); width: min(100%, 40rem); max-width: 100%; height: calc(100dvh - max(1rem, env(safe-area-inset-top))); max-height: none; margin: auto auto 0; padding: 0; border: 1px solid var(--chat-line); border-radius: 1.7rem 1.7rem 0 0; background: var(--chat-bg); color: var(--chat-text); overflow: hidden; }
.order-chat-dialog[open] { display: flex; flex-direction: column; }
.order-chat-dialog::backdrop { background: #0009; }
.order-chat-header { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: 1.15rem; border-bottom: 1px solid var(--chat-line); }
.order-chat-header h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.order-chat-header p { margin: .35rem 0 0; color: var(--muted, #627067); font-size: .85rem; }
.order-chat-close { flex-shrink: 0; width: 2.8rem; height: 2.8rem; border: 0; border-radius: 50%; background: var(--chat-surface); color: inherit; font-size: 2rem; }
.order-chat-log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.order-chat-empty { margin: auto; text-align: center; color: var(--muted, #627067); line-height: 1.6; max-width: 20rem; }
.order-chat-empty::before { content: '◌'; display: block; font-size: 3rem; }
.order-chat-message { align-self: flex-start; max-width: 85%; border: 1px solid var(--chat-line); border-radius: 1rem 1rem 1rem .25rem; background: var(--chat-surface); padding: .75rem; }
.order-chat-message.is-own { align-self: flex-end; border-radius: 1rem 1rem .25rem 1rem; background: color-mix(in srgb, var(--chat-accent) 14%, var(--chat-bg)); }
.order-chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.order-chat-message time { display: block; text-align: right; font-size: .7rem; color: var(--muted, #627067); margin-top: .3rem; }
.order-chat-compose { display: flex; align-items: flex-end; gap: .65rem; border-top: 1px solid var(--chat-line); padding: .85rem .85rem max(1rem, env(safe-area-inset-bottom)); }
.order-chat-compose textarea { flex: 1; min-width: 0; width: 100%; min-height: 3rem; max-height: 8rem; resize: none; border: 1px solid var(--chat-line); border-radius: 1.5rem; background: var(--chat-surface); color: inherit; padding: .8rem 1rem; font: inherit; }
.order-chat-compose button { width: 3rem; height: 3rem; flex-shrink: 0; border: 0; border-radius: 50%; background: var(--chat-accent); color: #fff; font-size: 1.25rem; }
.order-chat-compose button:disabled { opacity: .45; }
.order-chat-notice, .order-chat-closed { padding: .7rem 1rem; margin: 0; background: var(--chat-surface); color: var(--muted, #627067); font-size: .85rem; }
.order-chat-dialog [hidden] { display: none !important; }