/* ==========================================================================
   Build screen — four agent chats + new project form. Loaded after factory.css.
   ========================================================================== */
.sf-chats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 1199.98px) { .sf-chats { grid-template-columns: 1fr; } }

.sf-chat { background: #fff; border: 1px solid var(--sf-border); border-radius: 20px; box-shadow: var(--sf-shadow); display: flex; flex-direction: column; height: 620px; overflow: hidden; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.sf-chat.is-active { border-color: #b8a2f7; box-shadow: 0 18px 40px rgba(109, 40, 217, .14); }
.sf-chat[data-state="sleeping"] { opacity: .78; }
.sf-chat-head { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sf-border); }
.sf-chat-num { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; background: var(--sf-grad); color: #fff; display: grid; place-items: center; font-weight: 800; }
.sf-chat-head h2 { font-size: 1.1rem; font-weight: 800; margin: 0; }
.sf-chat-head p { font-size: .8rem; color: var(--sf-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-chat-provider { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .85rem; color: var(--sf-ink); white-space: nowrap; }
.sf-chat-avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--sf-soft); color: var(--sf-violet); font-size: .95rem; }
.sf-provider-gemini .sf-chat-avatar { background: #e8f0ff; color: #2563eb; }
.sf-provider-openai .sf-chat-avatar { background: #111; color: #fff; }
.sf-provider-anthropic .sf-chat-avatar { background: #fff1e6; color: #ea580c; }
.sf-provider-factory .sf-chat-avatar { background: var(--sf-grad); color: #fff; }
.sf-chat-ext { color: var(--sf-muted); font-size: 1.05rem; }

.sf-chat-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem; background: linear-gradient(180deg, #fbfaff, #fff 120px); scroll-behavior: smooth; }
.sf-chat-messages { display: flex; flex-direction: column; gap: .8rem; }
.sf-msg { display: flex; gap: .55rem; align-items: flex-end; max-width: 94%; animation: sf-pop .25s ease-out; }
.sf-msg.is-user { align-self: flex-end; flex-direction: row-reverse; }
.sf-msg-avatar { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: var(--sf-soft); color: var(--sf-violet); font-size: .8rem; }
.sf-provider-gemini ~ * .sf-msg-avatar, [data-panel="strategy"] .sf-msg-avatar { background: #e8f0ff; color: #2563eb; }
[data-panel="design"] .sf-msg-avatar { background: #111; color: #fff; }
[data-panel="code"] .sf-msg-avatar { background: #fff1e6; color: #ea580c; }
.sf-msg-bubble { background: #f3f1fa; border-radius: 16px 16px 16px 4px; padding: .6rem .85rem .7rem; min-width: 0; }
.sf-msg.is-user .sf-msg-bubble { background: var(--sf-grad); color: #fff; border-radius: 16px 16px 4px 16px; }
.sf-msg-meta { font-size: .7rem; font-weight: 700; color: var(--sf-muted); margin-bottom: .2rem; }
.sf-msg.is-user .sf-msg-meta { color: rgba(255, 255, 255, .8); }
.sf-msg-text { font-size: .9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; color: var(--sf-ink); }
.sf-msg.is-user .sf-msg-text { color: #fff; }
.sf-msg-text.is-typing::after { content: "▍"; color: var(--sf-violet); animation: sf-caret .8s steps(1) infinite; margin-left: 1px; }
.sf-msg-image { display: block; margin-top: .6rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--sf-border); background: #fff; }
.sf-msg-image img { display: block; width: 100%; height: auto; transition: transform .3s; }
.sf-msg-image:hover img { transform: scale(1.015); }
.sf-msg-system { align-self: center; font-size: .75rem; color: var(--sf-muted); background: #f5f3fb; border-radius: 99px; padding: .25rem .8rem; text-align: center; }
@keyframes sf-caret { 50% { opacity: 0; } }
@keyframes sf-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Status line: sleeping (zZz), typing (dots), your turn */
.sf-chat-status { display: flex; align-items: center; gap: .55rem; font-size: .82rem; color: var(--sf-muted); padding: .8rem .2rem .2rem; min-height: 2.2rem; }
.sf-chat-status.is-done { display: none; }
.sf-chat-status.is-error { color: #dc2626; }
.sf-chat-status.is-failed { color: #dc2626; }
/* Agent status animations (always on: they carry meaning, and the user asked for motion) */
.sf-typing { display: inline-flex; align-items: flex-end; gap: 5px; background: #efe9ff; border-radius: 99px; padding: .55rem .8rem; height: 32px; }
.sf-typing i { width: 8px; height: 8px; border-radius: 50%; background: var(--sf-violet); display: block; animation: sf-wave 1s infinite ease-in-out; }
.sf-typing i:nth-child(2) { animation-delay: .15s; background: #8b5cf6; }
.sf-typing i:nth-child(3) { animation-delay: .3s; background: #a78bfa; }
@keyframes sf-wave { 0%, 100% { transform: translateY(0) scale(.85); opacity: .55; } 40% { transform: translateY(-9px) scale(1.15); opacity: 1; } }
.sf-zzz { position: relative; display: inline-block; width: 38px; height: 34px; color: #8b5cf6; font-weight: 900; }
.sf-zzz i { position: absolute; left: 4px; bottom: 0; font-style: normal; opacity: 0; animation: sf-zfloat 2.4s infinite ease-out; }
.sf-zzz i:nth-child(1) { font-size: .75rem; }
.sf-zzz i:nth-child(2) { font-size: .95rem; animation-delay: .8s; }
.sf-zzz i:nth-child(3) { font-size: 1.2rem; animation-delay: 1.6s; }
@keyframes sf-zfloat {
  0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; }
  15% { opacity: 1; }
  50% { transform: translate(12px, -14px) rotate(8deg); }
  100% { transform: translate(24px, -30px) rotate(-6deg); opacity: 0; }
}
.sf-chat[data-state="sleeping"] .sf-chat-avatar { animation: sf-sleep 3.2s ease-in-out infinite; position: relative; }
.sf-chat[data-state="sleeping"] .sf-chat-avatar::after { content: "\1F319"; position: absolute; right: -6px; top: -8px; font-size: .7rem; animation: sf-sleep 3.2s ease-in-out infinite reverse; }
@keyframes sf-sleep { 0%, 100% { transform: rotate(-6deg) scale(.95); opacity: .7; } 50% { transform: rotate(6deg) scale(1); opacity: 1; } }
.sf-chat[data-state="typing"] .sf-chat-avatar { animation: sf-pulse-ring 1.4s ease-out infinite; }
@keyframes sf-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .45); } 100% { box-shadow: 0 0 0 12px rgba(124, 58, 237, 0); } }
.sf-your-turn { color: var(--sf-primary); font-weight: 700; }
.sf-your-turn::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: .45rem; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }

/* Progress card (code/preview) */
.sf-progress-card { background: #fff; border: 1px solid var(--sf-border); border-radius: 14px; padding: .75rem .9rem; font-size: .8rem; }
.sf-progress-title { font-weight: 800; color: var(--sf-ink); margin-bottom: .4rem; }
.sf-pstep { display: grid; grid-template-columns: 18px 1fr auto; gap: .5rem; align-items: start; padding: .2rem 0; }
.sf-pstep.is-file { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .74rem; padding: .05rem 0; }
.sf-pstep-icon { width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; border: 2px solid #d6d2e2; }
.sf-pstep.is-done .sf-pstep-icon { border-color: #22c55e; background: #22c55e; box-shadow: inset 0 0 0 2px #fff; }
.sf-pstep.is-running .sf-pstep-icon { border-color: var(--sf-violet); border-top-color: transparent; animation: sf-spin .8s linear infinite; }
.sf-pstep.is-error .sf-pstep-icon { border-color: #ef4444; background: #ef4444; }
.sf-pstep-text { display: flex; flex-direction: column; min-width: 0; }
.sf-pstep-label { color: var(--sf-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-pstep-text small { color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-pstep-status { color: var(--sf-muted); white-space: nowrap; }
.sf-pstep.is-done .sf-pstep-status { color: #16a34a; }
@keyframes sf-spin { to { transform: rotate(360deg); } }

.sf-chat-approve { padding: .75rem 1.1rem 0; }
.sf-chat-input { display: flex; gap: .5rem; align-items: flex-end; padding: .75rem 1.1rem 1rem; border-top: 1px solid var(--sf-border); margin-top: .75rem; }
.sf-chat-approve + .sf-chat-input { border-top: 0; margin-top: 0; }
.sf-chat-input textarea { flex: 1; resize: none; border: 1px solid var(--sf-border); border-radius: 14px; padding: .65rem .9rem; font-size: .9rem; max-height: 140px; outline: none; background: #fff; }
.sf-chat-input textarea:focus { border-color: #a78bfa; box-shadow: 0 0 0 .2rem rgba(124, 58, 237, .12); }
.sf-chat-input textarea:disabled { background: #f7f6fb; cursor: not-allowed; }
.sf-chat-send { width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 12px; background: var(--sf-grad); color: #fff; display: grid; place-items: center; }
.sf-chat-send:disabled { background: #e7e4f0; color: #a3a0b8; }

.sf-browser-light { border: 1px solid var(--sf-border); background: #fff; margin-bottom: .9rem; }
.sf-browser-light .sf-browser-bar { background: #f3f1fa; }
.sf-browser-light .sf-browser-url { background: #fff; color: var(--sf-muted); text-decoration: none; }
.sf-browser-light .sf-live { color: #16a34a; border-color: #bbf7d0; }
.sf-live.is-off { color: #dc2626; border-color: #fecaca; }
.sf-browser-light .sf-browser-viewport { height: 300px; }
.sf-browser-light iframe { height: 600px; }

.sf-brief dt { font-size: .8rem; color: var(--sf-muted); font-weight: 700; margin-top: .75rem; }
.sf-brief dd { margin: .15rem 0 0; color: var(--sf-ink); }

/* New project form */
.sf-field { padding: 1.1rem 0; border-bottom: 1px dashed var(--sf-border); }
.sf-field:first-of-type { padding-top: 0; }
.sf-field-label { display: flex; align-items: center; gap: .6rem; font-size: 1.1rem; font-weight: 800; color: var(--sf-ink); margin-bottom: .4rem; }
.sf-field-num { width: 26px; height: 26px; border-radius: 8px; background: var(--sf-soft); color: var(--sf-primary); display: grid; place-items: center; font-size: .85rem; }
.sf-field-help { font-size: .86rem; color: var(--sf-muted); margin: -.1rem 0 .6rem; }
.sf-drop { display: flex; align-items: center; gap: .9rem; border: 2px dashed #d9d0f0; border-radius: 16px; padding: 1rem 1.2rem; cursor: pointer; background: #fbfaff; transition: border-color .2s, background .2s; }
.sf-drop:hover, .sf-drop:focus-within { border-color: #a78bfa; background: var(--sf-soft); }
.sf-drop.is-invalid { border-color: #dc2626; }
.sf-drop > .bi { font-size: 1.6rem; color: var(--sf-violet); }
.sf-drop b { display: block; color: var(--sf-ink); }
.sf-drop small { color: var(--sf-muted); }
.sf-thumbs { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .6rem; }
.sf-thumbs figure { width: 110px; margin: 0; }
.sf-thumbs img { width: 110px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid var(--sf-border); display: block; }
.sf-thumbs figcaption { font-size: .7rem; color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .2rem; }

@media (prefers-reduced-motion: reduce) {
    .sf-msg { animation: none !important; }
}