/* lib/start-chat.css — the door chat (see start-chat.js). The same look as
   the Studio's setup conversation: a chat window, the assistant online. */
.rs-lock, .rs-lock body { overflow: hidden; }

.rs-overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.72); backdrop-filter: blur(4px); animation: rs-in .2s ease-out; }
@keyframes rs-in { from { opacity: 0; } }

.rs-box { --rs-green: #4CAF50; width: 100%; max-width: 560px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: 20px; border-radius: 16px; background: #1a1a1a; color: #fff; font: 16px/1.45 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 24px 60px rgba(0,0,0,.5); text-align: left; }
.rs-box.is-overlay { height: min(86vh, 680px); }
.rs-box:not(.is-overlay) { height: min(72vh, 620px); }

.rs-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.rs-avatar { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #262626; border: 1px solid rgba(255,255,255,.08); }
.rs-avatar svg { width: 26px; height: 26px; }
.rs-who { flex: 1; min-width: 0; display: grid; gap: 1px; }
.rs-who b { font-size: 16px; }
.rs-who small { display: inline-flex; align-items: center; gap: 6px; color: #b3b3b3; font-size: 12px; }
.rs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rs-green); box-shadow: 0 0 0 3px rgba(76,175,80,.2); }
.rs-close { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: none; color: #b3b3b3; cursor: pointer; }
.rs-close svg { width: 18px; height: 18px; }
.rs-close:hover { background: #2a2a2a; color: #fff; }

.rs-log { overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; overscroll-behavior: contain; }
.rs-msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; overflow-wrap: anywhere; animation: rs-pop .18s ease-out; }
@keyframes rs-pop { from { opacity: 0; transform: translateY(4px); } }
.rs-msg p { margin: 0; }
.rs-msg.is-bot { align-self: flex-start; background: #2a2a2a; border-bottom-left-radius: 4px; }
.rs-msg.is-me { align-self: flex-end; background: var(--rs-green); color: #0b1a0c; border-bottom-right-radius: 4px; font-weight: 500; }
.rs-msg.is-warn { background: #3a2c12; color: #ffd28a; }
.rs-typing { display: inline-flex; gap: 4px; padding: 14px; }
.rs-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b3b3b3; animation: rs-dot 1.2s infinite ease-in-out; }
.rs-typing i:nth-child(2) { animation-delay: .15s; }
.rs-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes rs-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .rs-typing i, .rs-msg, .rs-overlay { animation: none; } }

.rs-composer { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.rs-composer:empty { display: none; }
.rs-composer.is-busy { opacity: .5; pointer-events: none; }
.rs-row { display: flex; gap: 8px; }
.rs-input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #333; background: #0f0f0f; color: #fff; font: inherit; }
.rs-input:focus { outline: none; border-color: var(--rs-green); }
.rs-code { letter-spacing: .4em; font-variant-numeric: tabular-nums; font-weight: 700; }
.rs-send { flex: none; padding: 0 20px; border: 0; border-radius: 999px; background: var(--rs-green); color: #0b1a0c; font: inherit; font-weight: 700; cursor: pointer; }
.rs-send:hover { filter: brightness(1.08); }
.rs-terms { color: #8a8a8a; font-size: 12px; line-height: 1.45; }
.rs-terms a { color: #cfcfcf; text-decoration: underline; }
.rs-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rs-link { border: 0; background: none; padding: 0; color: #b3b3b3; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.rs-link:disabled { text-decoration: none; opacity: .6; cursor: default; }
.rs-link:hover:not(:disabled) { color: #fff; }

@media (max-width: 480px) {
	.rs-overlay { padding: 0; }
	.rs-box.is-overlay { height: 100%; max-width: none; border-radius: 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
}