.ao8-chat { --chat-line:#dbe3ec; --chat-muted:#516174; --chat-bg:#f5f8fc; color:#172b46; font-size:16px; line-height:1.5; container:ao8chat / inline-size; min-width:0 }
.ao8-chat *, .ao8-chat *::before, .ao8-chat *::after { box-sizing:border-box }
.ao8-chat [hidden] { display:none!important }
.ao8-chat .chat-bar, .ao8-chat .chat-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px }
.ao8-chat .chat-bar { justify-content:space-between; margin-bottom:14px }
.ao8-chat h2, .ao8-chat h3, .ao8-chat p { margin:0 0 8px }
.ao8-chat .chat-muted { color:var(--chat-muted); font-size:14px }
.ao8-chat button, .ao8-chat select, .ao8-chat input { min-height:44px; font:inherit }
.ao8-chat button { cursor:pointer; border-radius:8px; padding:8px 12px; border:1px solid #91a5bd; background:#fff; color:#183856 }
.ao8-chat button.primary { background:#185ba5; border-color:#185ba5; color:#fff }
.ao8-chat button:disabled { cursor:not-allowed; opacity:.55 }
.ao8-chat :focus-visible { outline:3px solid #2373c5; outline-offset:3px }
.ao8-chat .chat-grid { display:grid; grid-template-columns:minmax(190px,26%) minmax(0,1fr); border:1px solid var(--chat-line); border-radius:12px; overflow:hidden }
.ao8-chat .chat-sidebar { background:var(--chat-bg); padding:12px; border-right:1px solid var(--chat-line) }
.ao8-chat .chat-conversations { display:flex; flex-direction:column; gap:8px; max-height:520px; overflow-y:auto }
.ao8-chat .chat-conversations button { text-align:left; overflow-wrap:anywhere }
.ao8-chat .chat-conversations button[aria-current=true] { background:#e0edfc; border-color:#185ba5; color:#14497f }
.ao8-chat .chat-main { min-width:0; padding:16px; background:#fff }
.ao8-chat .chat-messages { min-height:150px; max-height:480px; overflow-y:auto; padding:12px 2px; display:flex; flex-direction:column; gap:12px; overscroll-behavior:contain }
.ao8-chat .chat-message { background:var(--chat-bg); border:1px solid var(--chat-line); border-radius:10px; padding:12px; overflow-wrap:anywhere }
.ao8-chat .chat-message.mine { border-color:#a7c7eb; background:#edf5ff }
.ao8-chat .chat-message .chat-body { white-space:pre-wrap; margin:8px 0 }
.ao8-chat .chat-images { display:flex; flex-wrap:wrap; gap:8px }
.ao8-chat .chat-images img { width:140px; max-width:100%; height:120px; object-fit:contain; background:#e8edf4; border-radius:6px }
.ao8-chat .chat-composer { border-top:1px solid var(--chat-line); padding-top:12px; margin-top:12px }
.ao8-chat textarea, .ao8-chat input, .ao8-chat select { max-width:100%; border:1px solid #a3b2c4; border-radius:8px; padding:8px; background:#fff; color:#172b46 }
.ao8-chat textarea { width:100%; min-height:90px; font:inherit; resize:vertical }
.ao8-chat label { display:block; font-size:14px; color:#304960; margin:8px 0 4px }
.ao8-chat .chat-note { white-space:pre-wrap; padding:10px 12px; border-left:3px solid #3074ba; background:#edf5ff; margin:12px 0; overflow-wrap:anywhere }
.ao8-chat .chat-confirm { padding:16px; border:2px solid #bc7428; background:#fffbf2; border-radius:10px; margin-top:12px }
.ao8-chat .chat-confirm input { width:100% }
@media(max-width:650px) { .ao8-chat .chat-grid { grid-template-columns:1fr } .ao8-chat .chat-sidebar { border-right:0; border-bottom:1px solid var(--chat-line) } .ao8-chat .chat-conversations { flex-direction:row; max-height:180px; flex-wrap:wrap } .ao8-chat .chat-main { padding:12px } .ao8-chat .chat-messages { max-height:420px } }
@container ao8chat (max-width:650px) { .ao8-chat .chat-grid { grid-template-columns:1fr } .ao8-chat .chat-sidebar { border-right:0; border-bottom:1px solid var(--chat-line) } .ao8-chat .chat-conversations { flex-direction:row; max-height:180px; flex-wrap:wrap } .ao8-chat .chat-main { padding:12px } .ao8-chat .chat-messages { max-height:420px } }