/* Shared geometry for avatars, bubbles and the reply area. */
.conversation { --avatar-size: 36px; --avatar-gap: 12px; --gutter: calc(var(--avatar-size) + var(--avatar-gap)); }
.topbar { max-width: 760px; gap: 12px; align-items: center; }
.topbar .header-avatar { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: #242627; }
.topbar .header-avatar img { width: 29px; height: 20px; object-fit: contain; display: block; }
.chat-identity { padding: 0; border: 0; min-width: 0; gap: 4px; line-height: 1.35; }
.chat-identity span { max-width: none; }
.topbar .preview, #progress-label { line-height: 1.4; flex-shrink: 0; }
.message.bot { margin-left: var(--gutter); max-width: calc(100% - var(--gutter)); padding: 14px 18px; min-height: 48px; }
.bot-avatar { left: calc(-1 * var(--gutter)); width: var(--avatar-size); height: var(--avatar-size); bottom: 0; padding: 7px; letter-spacing: normal; line-height: 1; }
.bot-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.message.user { max-width: calc(100% - var(--gutter)); }
.message p { line-height: 1.65; }
.typing-message { display: flex; align-items: center; }
.loading { margin: 0; justify-content: center; }
#composer, .profile, #error, .privacy, .result-note { margin-left: var(--gutter); }
.profile { max-width: calc(100% - var(--gutter)); align-items: center; gap: 12px; }
.profile > div { min-width: 0; }
.profile strong { display: block; line-height: 1.4; }
.profile small { line-height: 1.5; margin-top: 4px; }
.profile .avatar { line-height: 1; padding: 0; }
.input-row { min-height: 58px; gap: 10px; padding: 6px 6px 6px 18px; }
.input-row input, .input-row select { height: 44px; padding: 0; line-height: normal; margin: 0; border-radius: 0; }
.send { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; line-height: 1; margin: 0; padding: 0; }
.send svg { display: block; width: 22px; height: 22px; }
.send:hover { transform: none; background: #dedede; }
.chips, .actions { align-items: stretch; }
.chip, .secondary, .primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; line-height: 1.4; }
.posts { align-items: stretch; }
.post { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
.poster { flex-shrink: 0; width: 100%; }
.poster strong { display: block; line-height: 1; }
.poster small { line-height: 1.4; }
.post-title { flex: 1; display: flex; align-items: center; min-height: 60px; padding: 12px; line-height: 1.5; }
.consent { align-items: flex-start; margin-left: 0; margin-right: 0; gap: 8px; }
.consent input { width: 14px; height: 14px; margin: 1px 0 0; padding: 0; }
.privacy { margin-right: 0; }
@media(max-width:600px) {
  .conversation { --avatar-size: 30px; --avatar-gap: 10px; }
  .topbar { padding: 14px; gap: 10px; }
  .topbar .header-avatar { width: 38px; height: 38px; flex-basis: 38px; }
  .topbar .header-avatar img { width: 25px; height: 18px; }
  .message.bot { padding: 12px 15px; }
  .bot-avatar { padding: 5px; }
}

.profile .avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.poster { position:relative; overflow:hidden; }
.poster .post-image { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.posts { max-height:48vh; overflow-y:auto; }

.contact-card { display:block; width:100%; max-width:360px; margin:0 0 14px; overflow:hidden; border:1px solid #f3f3f32b; border-radius:16px; background:#292c2d; color:#f3f3f3; text-decoration:none; transition:border-color .2s,background .2s; }
.contact-card-info { display:flex; align-items:center; gap:14px; padding:20px; }
.contact-card-avatar { display:grid; place-items:center; flex:0 0 52px; width:52px; height:52px; border-radius:50%; background:#f3f3f3; color:#1c1e1f; font-size:23px; font-weight:600; line-height:1; }
.contact-card-name { display:flex; flex-direction:column; gap:5px; min-width:0; }
.contact-card-name strong { font-size:15px; font-weight:600; line-height:1.4; overflow-wrap:anywhere; }
.contact-card-name span { color:var(--muted); font-size:12px; line-height:1.4; }
.contact-card-action { display:block; padding:14px 18px; border-top:1px solid #f3f3f31c; font-size:14px; font-weight:500; line-height:1.4; text-align:center; }
.contact-card:hover { background:#303435; border-color:#f3f3f370; }
.contact-card:focus-visible { outline:2px solid #f3f3f3; outline-offset:4px; }