.oc-wrap { width: min(720px, calc(100% - 36px)); margin: 0 auto; padding: 40px 0 70px; }
.oc-hero { text-align: center; padding: 10px 0 30px; }
.oc-hero h1 { color: #f2b544; font-size: clamp(1.6rem, 5vw, 2.2rem); margin: 0 0 8px; }
.oc-hero p { color: #b7c2d0; margin: 0 auto; max-width: 520px; }
.oc-card { background: rgba(255,255,255,.04); border: 1px solid #344155; border-radius: 18px; padding: 18px; }
.oc-thread { max-height: 460px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding-right: 4px; }
.oc-bubble { max-width: 80%; padding: 10px 14px; border-radius: 14px; font-size: .95rem; line-height: 1.4; word-wrap: break-word; }
.oc-bubble.agent { align-self: flex-start; background: rgba(255,255,255,.06); border: 1px solid #344155; }
.oc-bubble.user { align-self: flex-end; background: rgba(242,181,68,.15); border: 1px solid #f2b544; }
.oc-form { display: flex; gap: 10px; }
.oc-form input { flex: 1; border: 1px solid #344155; border-radius: 10px; background: #0f1620; color: #f5f7fa; padding: 10px 14px; font-size: .95rem; }
.oc-status { color: #8b98ab; font-size: .85rem; min-height: 1.2em; margin: 8px 0 0; }
.oc-status.error { color: #ff9b9b; }