.join-dialog { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 40px; overflow: auto; border: 1px solid var(--lines); border-radius: 24px; background: var(--mainbg); color: var(--fonts-100); box-shadow: 0 24px 90px #0003; font-family: var(--_font-family---font-family); }
.join-dialog::backdrop { background: #0005; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.join-dialog__close { position: absolute; top: 12px; right: 12px; }
.join-dialog__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; }
.join-dialog__title:focus { outline: none; }
.join-dialog__icon { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.join-dialog__icon:focus:not(:focus-visible) { outline: none; }
.join-dialog__icon:hover { background: var(--fonts-20); }
.join-dialog__icon:focus-visible, .join-dialog__prompt:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.join-dialog__icon svg { width: 22px; height: 22px; }
.join-dialog__title { margin: 24px 0 12px; font-size: clamp(28px, 6vw, 38px); font-weight: 400; line-height: 1.1; letter-spacing: -.04em; }
.join-dialog__intro { margin: 0 0 28px; font-size: 16px; line-height: 1.5; color: var(--fonts-64); }
.join-dialog__copy { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--lines); border-radius: 16px; background: var(--secondbg); }
.join-dialog__prompt { flex: 1; min-width: 0; margin: 0; padding: 8px 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.join-dialog__status { min-height: 21px; margin: 12px 0 16px; font-size: 14px; line-height: 1.5; color: var(--fonts-64); }
button[data-join-network] { cursor: pointer; font-family: inherit; }
@media (max-width: 480px) { .join-dialog { padding: 28px 20px 20px; border-radius: 20px; } .join-dialog__copy { gap: 8px; padding: 12px; } }

.join-dialog__people { display:flex; align-items:center; width:max-content; padding-top:8px; }
.join-dialog__portrait { display:block; width:58px; height:58px; flex:none; border-radius:50%; overflow:hidden; background:var(--secondbg); box-shadow:0 0 0 1px var(--lines); }
.join-dialog__portrait img { width:100%; height:100%; object-fit:cover; transform:translateY(var(--shift,0%)) rotate(var(--angle,0deg)) scale(var(--scale,1)); }
.join-dialog__connection { display:flex; gap:5px; align-items:center; padding:0 11px; }
.join-dialog__connection i { width:3px; height:3px; border-radius:50%; background:#8ba593; opacity:.65; }
.join-dialog__connection i:nth-child(2) { opacity:1; }
.join-dialog__agent { display:flex; align-items:center; justify-content:space-between; min-height:44px; padding-top:16px; border-top:1px solid var(--lines); color:var(--fonts-64); font-size:14px; text-decoration:none; transition:color 180ms ease; }
.join-dialog__agent:hover { color:var(--fonts-100); }
.join-dialog__agent:focus-visible { outline:2px solid var(--fonts-100); outline-offset:4px; border-radius:2px; }
@media(max-width:480px) { .join-dialog__portrait { width:48px; height:48px; } .join-dialog__connection { padding:0 9px; } }

/* Shared agent marquee: compact in the dialog, full width on the landing. */
.agent-banner { overflow:hidden; min-width:0; mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); }
.agent-banner__track { display:flex; width:max-content; animation:agent-banner-scroll 18s linear infinite; }
.agent-banner__group { display:flex; flex-shrink:0; align-items:center; gap:24px; padding-right:24px; box-sizing:border-box; }
.agent-banner__group span { white-space:nowrap; font-size:16px; font-weight:500; color:inherit; }
.available-platforms .agent-banner:hover .agent-banner__track,.agent-banner:focus-visible .agent-banner__track { animation-play-state:paused; }
.agent-banner:focus-visible { outline:2px solid currentColor; outline-offset:3px; }
.join-dialog .agent-banner { margin:0 0 20px; padding:12px 0; color:var(--fonts-64); }
.join-dialog .agent-banner__group { gap:24px; padding-right:24px; }
.join-dialog .agent-banner__group span { font-size:14px; }
.join-dialog:not([open]) .agent-banner__track { animation-play-state:paused; }
.join-dialog__prompt-area { flex:1; min-width:0; }
@keyframes agent-banner-scroll { to { transform:translateX(-50%); } }
@media(prefers-reduced-motion:reduce) {
 .agent-banner { mask-image:none; }
 .agent-banner__track { animation:none; width:auto; }
 .agent-banner__group { flex-wrap:wrap; justify-content:center; gap:12px 20px; padding:0; }
 .agent-banner__group + .agent-banner__group { display:none; }
}

/* Opening and closing keep the dialog anchored while fading gently. */
.join-dialog { opacity:0; transform:translateY(6px); transition:opacity 180ms ease,transform 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
.join-dialog[open] { opacity:1; transform:translateY(0); }
.join-dialog::backdrop { opacity:0; transition:opacity 180ms ease,display 180ms allow-discrete,overlay 180ms allow-discrete; }
.join-dialog[open]::backdrop { opacity:1; }
@starting-style { .join-dialog[open] { opacity:0; transform:translateY(6px); } .join-dialog[open]::backdrop { opacity:0; } }
@media(prefers-reduced-motion:reduce) { .join-dialog,.join-dialog::backdrop { transition:none; transform:none; } }
.available-platforms .agent-banner { width:100%; color:var(--fonts-100); padding:20px 0; }
@media(prefers-reduced-motion:reduce) { .join-dialog .agent-banner__group { padding:0; gap:12px 20px; } }

.agent-banner__item { position:relative; isolation:isolate; display:flex; justify-content:center; align-items:center; flex:1 0 140px; height:90px; }
.agent-banner__item img { position:absolute; z-index:-1; width:88px; height:88px; object-fit:contain; opacity:.16; filter:grayscale(1); pointer-events:none; }
.agent-banner__item > span { position:relative; }
.join-dialog .agent-banner__item { flex-basis:120px; height:58px; }
.join-dialog .agent-banner__item img { width:60px; height:60px; }
.join-dialog .agent-banner { padding:0; color:var(--fonts-100); }
@media(prefers-reduced-motion:reduce) { .agent-banner__group { min-width:0; width:100%; } }