/* (owner 2026-10-20) "4K polish" for the workspace: richer depth, crisper type, glass request box, icon tiles on the
   quick starts, browser-style cards for the real sites, gentle entrance animation. Pure styling; no behaviour changes. */
.ws2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.ws2 .s2-work { position: relative; }
.ws2:not(.s2-has-build) .s2-work::before { content: ""; position: absolute; inset: -40px 0 auto; height: 560px; pointer-events: none; z-index: 0;
  background: radial-gradient(42% 60% at 50% 18%, rgba(37,99,235,.13), transparent 70%), radial-gradient(30% 40% at 28% 30%, rgba(16,185,129,.09), transparent 70%), radial-gradient(30% 40% at 74% 26%, rgba(139,92,246,.09), transparent 70%); }
.ws2 .s2-work > * { position: relative; z-index: 1; }

/* title */
.s2-hero { padding-top: 38px; animation: s2rise .6s cubic-bezier(.2,.7,.2,1) both; }
.s2-hero h1 { font-size: 40px; letter-spacing: -.035em; background: linear-gradient(180deg, var(--s2-ink) 30%, #334155); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .06em; }
.s2-hero h1 i { width: 48px; height: 48px; border-radius: 14px; font-size: 23px; background: conic-gradient(from 210deg, #2563eb, #60a5fa, #34d399, #2563eb); box-shadow: 0 10px 28px rgba(37,99,235,.35), inset 0 1px 0 rgba(255,255,255,.4); -webkit-text-fill-color: #fff; color: #fff; }
.s2-hero p { font-size: 16px; letter-spacing: -.005em; }

/* request box */
.ws2 .s2-work .chat-input-row { border-radius: 26px; border: 1px solid rgba(148,163,184,.35); background: linear-gradient(#fff, #fff) padding-box, linear-gradient(135deg, rgba(37,99,235,.35), rgba(148,163,184,.25) 40%, rgba(16,185,129,.3)) border-box; border: 1.5px solid transparent;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 6px rgba(15,23,42,.04), 0 24px 60px -12px rgba(30,64,175,.18); transition: box-shadow .25s, transform .25s; animation: s2rise .6s .06s cubic-bezier(.2,.7,.2,1) both; }
.ws2 .s2-work .chat-input-row:focus-within { box-shadow: 0 0 0 5px rgba(37,99,235,.10), 0 28px 70px -12px rgba(30,64,175,.28); }
.ws2 .s2-work .chat-input::placeholder { color: #94a3b8; }
.s2-tools button { border-radius: 999px; padding: 8px 13px; color: #334155; transition: background .15s, color .15s; }
.s2-tools button:hover { background: #eff6ff; color: #1d4ed8; }
.ws2 .s2-work .btn-exec { background: linear-gradient(135deg, #2563eb, #3b82f6) !important; box-shadow: 0 10px 24px -6px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .15s, box-shadow .15s; }
.ws2 .s2-work .btn-exec:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -6px rgba(37,99,235,.6); }
.ws2 .s2-work .btn-attach { background: #f8fafc; border-color: #e2e8f0; }

/* quick starts */
.s2-ideas { gap: 12px; animation: s2rise .6s .12s cubic-bezier(.2,.7,.2,1) both; }
.s2-ideas button { border-radius: 14px; padding: 11px 14px; border-color: #e5eaf3; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.s2-ideas button:hover { border-color: #bfd3ff; background: linear-gradient(180deg, #fff, #f5f8ff); box-shadow: 0 10px 26px -8px rgba(37,99,235,.25); transform: translateY(-2px); }

/* real sites */
.s2-built { animation: s2fade .8s .18s ease both; }   /* fade only: its transform keeps it centred */
.s2-built h3 { font-size: 19px; letter-spacing: -.02em; }
.s2-built-row { gap: 18px; }
.s2-built-row button { border-radius: 18px; border-color: #e5eaf3; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 14px 34px -14px rgba(15,23,42,.18); position: relative; }
.s2-built-row button::before { content: ""; display: block; height: 22px; background: #f1f5f9 radial-gradient(circle at 12px 11px, #f87171 3.5px, transparent 4px) no-repeat, radial-gradient(circle at 24px 11px, #fbbf24 3.5px, transparent 4px) no-repeat, radial-gradient(circle at 36px 11px, #34d399 3.5px, transparent 4px) no-repeat; border-bottom: 1px solid #e2e8f0; }
.s2-built-row img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.s2-built-row button:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -16px rgba(30,64,175,.32); }
.s2-built-row button:hover img { transform: scale(1.04); }
.s2-built-row span { font-size: 14px; padding: 11px 14px; }

/* preview panel */
.ws2.s2-has-build .s2-work > .editor-panel { border-radius: 22px; border-color: #e2e8f0; box-shadow: 0 2px 6px rgba(15,23,42,.04), 0 30px 70px -20px rgba(15,23,42,.25); }
.ws2 .s2-pbar { padding: 11px 14px; background: linear-gradient(180deg, #fff, #fafbfe); }

/* chat bubbles */
.ws2 .msg-user { border-radius: 18px 18px 6px 18px; box-shadow: 0 10px 24px -8px rgba(37,99,235,.45); }
.ws2 .msg-agent { border-radius: 18px 18px 18px 6px; background: #fff; box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 20px -12px rgba(15,23,42,.15); }

@keyframes s2fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes s2rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .s2-hero, .s2-ideas, .s2-built, .ws2 .s2-work .chat-input-row { animation: none; } }

/* dark mode */
html[data-mode="dark"] .s2-hero h1 { background: linear-gradient(180deg, #fff 30%, #cbd5e1); -webkit-background-clip: text; background-clip: text; }
html[data-mode="dark"] .ws2 .s2-work .chat-input-row { background: linear-gradient(#111a36, #111a36) padding-box, linear-gradient(135deg, rgba(96,165,250,.5), rgba(36,48,82,.8) 40%, rgba(52,211,153,.4)) border-box; }
html[data-mode="dark"] .s2-ideas button:hover { background: #16213f; border-color: #34477e; }
html[data-mode="dark"] .s2-built-row button::before { background-color: #0c1430; border-bottom-color: #243052; }
html[data-mode="dark"] .ws2 .msg-agent { background: #17213f; }
html[data-mode="dark"] .ws2 .s2-pbar { background: #111a36; }
html[data-mode="dark"] .ws2 .s2-work .btn-attach { background: #0c1430; border-color: #243052; }
html[data-mode="dark"] .ws2:not(.s2-has-build) .s2-work::before { opacity: .7; }
@media (max-width: 900px) { .s2-hero h1 { font-size: 26px; } .s2-hero h1 i { width: 36px; height: 36px; font-size: 18px; } }

/* (owner 2026-10-20) the title above the box is gone; the one line that stays leads */
.s2-hero { padding-top: 46px; padding-bottom: 22px; }
.s2-hero h1 { display: none; }
.s2-hero p { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 900px) { .s2-hero p { font-size: 18px; } }

/* (owner 2026-10-20) no line above the box at all: the box itself leads, with room above it */
.s2-hero { display: none !important; }
.ws2:not(.s2-busy) .s2-work > .agent-stream { padding-top: 72px; }
@media (max-width: 900px) { .ws2:not(.s2-busy) .s2-work > .agent-stream { padding-top: 18px; } }

/* (owner 2026-10-20) the request box sits low on the first screen; the real sites start below the fold, and after a
   build the preview starts lower too: people scroll down to see their project */
@media (min-width: 901px) {
  .ws2:not(.s2-busy) .s2-work > .agent-stream { padding-top: max(40px, calc(52vh - 170px)); }
  .ws2:not(.s2-has-build) .s2-built { margin-top: 30px; }
  .ws2.s2-busy.s2-has-build .s2-work > .editor-panel { margin-top: 28px; }   /* the website takes the screenshots' spot, right under the box */
}

/* (owner 2026-10-20) the chat box never moves: it keeps its start-screen spot, and everything else (the conversation,
   then the website) comes below it */
.ws2 .s2-work > .agent-stream { display: flex; flex-direction: column; }
.ws2 .s2-work > .agent-stream .chat-input-row { order: 1; }
.ws2 .s2-work > .agent-stream .attach-chips { order: 2; }
.ws2 .s2-work > .agent-stream .stream-messages { order: 3; }
.ws2 .s2-work > .agent-stream .keep-bar { order: 4; }
.ws2 .s2-work > .agent-stream .s2-ideas { order: 5; }
.ws2 .s2-work > .agent-stream .s2-built { order: 6; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages { padding-top: 18px; max-height: none; overflow: visible; }
@media (min-width: 901px) { .ws2 .s2-work > .agent-stream, .ws2:not(.s2-busy) .s2-work > .agent-stream { padding-top: max(40px, calc(52vh - 170px)); } }

/* (owner 2026-10-20) conversation ABOVE the box, finished products BELOW it; the box keeps its start-screen spot:
   the conversation fills the space above the box (scrolling there when long), newest message just above the box */
.ws2 .s2-work > .agent-stream .stream-messages { order: 0; }
.ws2 .s2-work > .agent-stream .keep-bar { order: 0; }
@media (min-width: 901px) {
  .ws2.s2-busy .s2-work > .agent-stream { padding-top: 0; }
  .ws2.s2-busy .s2-work > .agent-stream .stream-messages { flex: 0 0 auto; height: max(120px, calc(52vh - 170px)); max-height: none; overflow-y: auto; padding: 14px 4px 14px; display: flex; flex-direction: column; }
  .ws2.s2-busy .s2-work > .agent-stream .stream-messages > :first-child { margin-top: auto; }
}
@media (max-width: 900px) { .ws2.s2-busy .s2-work > .agent-stream .stream-messages { max-height: 46vh; overflow-y: auto; } }

/* (2026-10-21) the top menu fits on laptop screens with the Packages group */
body.lay-top .s2-logo, body.lay-top .s2-logo * { white-space: nowrap; }
@media (max-width: 1700px) { body.lay-top .s2-side .m-row { padding: 8px 7px; font-size: 13px; gap: 5px; } body.lay-top .s2-side .mi { width: 15px; height: 15px; } }
@media (max-width: 1500px) { body.lay-top .s2-logo span small, body.lay-top .s2-logo em, body.lay-top .s2-logo .tag { display: none; } body.lay-top .s2-side .m-row .mc { display: none; } }

/* (owner 2026-10-21) side menu like the reference: Search, New Chat, Imagine, then Projects and History */
.s2-chatside { gap: 4px !important; padding: 16px 12px 12px !important; }
.s3-menu { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 14px; }
.s3-row { display: flex; align-items: center; gap: 14px; width: 100%; background: none; border: 0; border-radius: 14px; padding: 11px 12px; font: 600 15.5px 'Plus Jakarta Sans', Inter, sans-serif; color: #111827; cursor: pointer; text-align: left; }
.s3-row svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.s3-row span { flex: 1; }
.s3-row:hover, .s3-row.s3-new { background: #f3f4f6; }
.s3-row.s3-new:hover { background: #eceef1; }
.s3-row kbd { font: 600 12.5px Inter, sans-serif; color: #9ca3af; background: none; border: 0; }
.s3-dot { width: 8px; height: 8px; border-radius: 50%; background: #5b7bea; flex: none; }
.s3-find { padding: 2px 4px 6px; }
.s3-find input { width: 100%; border: 1px solid #e5e7eb; border-radius: 12px; padding: 9px 12px; font: 500 14px Inter, sans-serif; outline: none; background: #fff; color: #111827; }
.s3-find input:focus { border-color: #93b4fd; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.s3-grp { margin: 8px 0 4px; }
.s3-grp > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 8px 12px; font: 700 15.5px 'Plus Jakarta Sans', Inter, sans-serif; color: #111827; cursor: pointer; user-select: none; }
.s3-grp > summary::-webkit-details-marker { display: none; }
.s3-chev { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.s3-hist[open] > summary .s3-chev { transform: rotate(90deg); }
.s3-grp:not(.s3-hist):not([open]) > summary .s3-chev { transform: rotate(-90deg); }
.s3-row.s3-add { color: #6b7280; font-weight: 500; }
.s3-row.s3-add:hover { color: #111827; }
.s3-hist[open] { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.s3-hist .s2-chats { border-top: 0 !important; padding: 0 !important; min-height: 0 !important; flex: 1 1 auto !important; }
.s2-chatside .s2-plan[hidden] { display: none !important; }
html[data-mode="dark"] .s3-row, html[data-mode="dark"] .s3-grp > summary { color: #e5e7eb; }
html[data-mode="dark"] .s3-row:hover, html[data-mode="dark"] .s3-row.s3-new { background: #1f2937; }
html[data-mode="dark"] .s3-find input { background: #111827; border-color: #374151; color: #e5e7eb; }

/* (owner 2026-10-22) phones: close the open menu (X or tap outside), plan pills at the top, templates in one sliding line */
.s3-close, .s3-shade { display: none; }
@media (max-width: 900px) {
  .s3-close { display: grid; place-items: center; position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; color: #111827; font-size: 16px; cursor: pointer; }
  .s2-chatside .s3-menu { margin-top: 44px; }
  body.s2-open .s3-shade { display: block; position: fixed; inset: 0; z-index: 49; background: rgba(15,23,42,.35); }
  .s2-top { flex-wrap: wrap !important; align-items: center; row-gap: 8px; }
  .s2-top .s2-burger { order: 0; }
  .s2-top .mode-slot { order: 1; }
  .s2-top .usage-pills { order: 2; flex: 1 1 0 !important; min-width: 0; flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; justify-content: flex-start !important; }
  .s2-top .usage-pills::-webkit-scrollbar { display: none; }
  .s2-top .usage-pills > * { flex: none; }
  .s2-top .s2-hello { order: 3; flex: 1 0 100%; }
  .ws2:not(.s2-busy) .s2-ideas, .ws2.s2-busy:not(.s2-has-build) .s2-ideas { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .s2-ideas::-webkit-scrollbar { display: none; }
  .s2-ideas button { flex: none; scroll-snap-align: start; }
}
html[data-mode="dark"] .s3-close { background: #111827; border-color: #374151; color: #e5e7eb; }

/* (owner 2026-10-22) chat layout once a conversation starts: conversation on top, the finished website inside it,
   the chat box pinned to the bottom of the screen */
.ws2.s2-busy .s2-work > .agent-stream { display: contents; }
.ws2.s2-busy .s2-work { padding-bottom: 0 !important; gap: 14px; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages { order: 1; width: min(880px, 100%); margin: 0 auto; height: auto !important; max-height: none !important; overflow: visible !important; padding: 28px 4px 6px !important; gap: 26px; flex: none !important; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages > :first-child { margin-top: 0 !important; }
.ws2.s2-busy .s2-work > .agent-stream .keep-bar { order: 2; width: min(880px, 100%); margin: 0 auto; }
.ws2.s2-busy.s2-has-build .s2-work > .editor-panel { order: 3; margin-top: 4px !important; }
.ws2.s2-busy .s2-work > .agent-stream .attach-chips { order: 4; width: min(880px, 100%); margin: 0 auto; }
.ws2.s2-busy .s2-work > .agent-stream .chat-input-row { order: 5; position: sticky; bottom: 16px; z-index: 6; width: min(880px, 100%); margin: auto auto 16px; box-shadow: 0 16px 0 0 var(--s2-bg, #f4f6fb), 0 18px 50px rgba(15,23,42,.1) !important; }
@media (max-width: 900px) { .ws2.s2-busy .s2-work > .agent-stream .chat-input-row { bottom: 10px; margin-bottom: 10px; box-shadow: 0 10px 0 0 var(--s2-bg, #f4f6fb), 0 12px 30px rgba(15,23,42,.12) !important; } }

/* messages in the reference style */
.ws2 .stream-messages .msg-bubble { font-size: 17px; line-height: 1.7; }
.ws2 .stream-messages .msg-user { align-self: flex-end; max-width: 78%; background: #eff1f3 !important; color: #0f1419 !important; border: 0 !important; box-shadow: none !important; border-radius: 26px !important; padding: 13px 22px !important; font-weight: 500; }
.ws2 .stream-messages .msg-agent { align-self: stretch; max-width: 100%; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 4px !important; color: #0f1419; }
.ws2 .stream-messages .msg-agent strong { font-weight: 700; }
.s3-acts { display: flex; gap: 6px; margin-top: 14px; }
.s3-acts button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: #536471; cursor: pointer; }
.s3-acts button:hover { background: #eff1f3; color: #0f1419; }
.s3-acts button.on { color: #2563eb; }
.s3-acts svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
html[data-mode="dark"] .ws2 .stream-messages .msg-user { background: #1f2937 !important; color: #e5e7eb !important; }
html[data-mode="dark"] .ws2 .stream-messages .msg-agent { color: #e6ecfb; }
html[data-mode="dark"] .s3-acts button { color: #9aaacb; } html[data-mode="dark"] .s3-acts button:hover { background: #1f2937; color: #fff; }
html[data-mode="dark"] .ws2.s2-busy .s2-work > .agent-stream .chat-input-row { box-shadow: 0 16px 0 0 var(--s2-bg, #0a1124), 0 18px 50px rgba(0,0,0,.35) !important; }

/* (owner 2026-10-22) the chat box as one rounded bar, with action chips under it */
.ws2 .s2-work .chat-input-row.s3-pill { display: flex; flex-wrap: nowrap !important; align-items: center; gap: 6px; background: #e6eaee !important; border: 0 !important; border-radius: 999px !important; padding: 9px 9px 9px 14px !important; box-shadow: none !important; min-height: 66px; }
.ws2 .s2-work .s3-pill .chat-input { order: 1 !important; flex: 1 1 auto !important; width: auto !important; padding: 10px 6px !important; font-size: 19px !important; color: #0f1419; min-width: 0; }
.ws2 .s2-work .s3-pill .chat-input::placeholder { color: #6b7780; }
.ws2 .s2-work .s3-pill .btn-attach { order: 0 !important; width: 44px; height: 44px; border: 0 !important; background: none !important; border-radius: 50%; color: #0f1419; display: grid; place-items: center; padding: 0; box-shadow: none !important; }
.ws2 .s2-work .s3-pill .btn-attach:hover { background: #e0e5e9 !important; }
.ws2 .s2-work .s3-pill .btn-attach svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws2 .s2-work .s3-pill .s2-tools { display: none !important; }
.ws2 .s2-work .s3-pill .btn-exec { order: 2 !important; margin-left: 0 !important; width: 50px; height: 50px; padding: 0 !important; border-radius: 50% !important; background: #0f1419 !important; color: #fff; display: grid; place-items: center; box-shadow: none !important; flex: none; }
.ws2 .s2-work .s3-pill .btn-exec:hover { background: #2a3238 !important; }
.ws2 .s2-work .s3-pill .btn-exec svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ws2.s2-busy .s2-work > .agent-stream .chat-input-row.s3-pill { box-shadow: 0 16px 0 0 var(--s2-bg, #f4f6fb) !important; }
.s3-chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; order: 2; }
.ws2.s2-busy .s3-chips { display: none; }
.s3-chips button { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #cfd9de; border-radius: 999px; padding: 12px 22px; font: 600 16.5px 'Plus Jakarta Sans', Inter, sans-serif; color: #0f1419; cursor: pointer; }
.s3-chips button:hover { background: #f7f9f9; }
.s3-chips svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws2 .s2-work > .agent-stream .s3-chips { order: 2; }
@media (max-width: 900px) {
  .ws2 .s2-work .chat-input-row.s3-pill { min-height: 56px; padding: 6px 6px 6px 8px !important; }
  .ws2 .s2-work .s3-pill .chat-input { font-size: 16px !important; }
  .ws2 .s2-work .s3-pill .btn-exec { width: 44px; height: 44px; }
  .s3-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; gap: 8px; margin-top: 14px; scrollbar-width: none; }
  .s3-chips::-webkit-scrollbar { display: none; }
  .s3-chips button { flex: none; padding: 10px 16px; font-size: 14.5px; }
}
html[data-mode="dark"] .ws2 .s2-work .chat-input-row.s3-pill { background: #1f2937 !important; }
html[data-mode="dark"] .ws2 .s2-work .s3-pill .chat-input { color: #e5e7eb; }
html[data-mode="dark"] .ws2 .s2-work .s3-pill .btn-attach { color: #e5e7eb; }
html[data-mode="dark"] .ws2 .s2-work .s3-pill .btn-exec { background: #f3f4f6 !important; color: #0f1419; }
html[data-mode="dark"] .s3-chips button { background: #111827; border-color: #374151; color: #e5e7eb; }
html[data-mode="dark"] .ws2.s2-busy .s2-work > .agent-stream .chat-input-row.s3-pill { box-shadow: 0 16px 0 0 var(--s2-bg, #0a1124) !important; }

.ws2 .s2-work > .agent-stream .s3-chips + .s2-ideas, .ws2 .s2-work > .agent-stream .s2-ideas { margin-top: 26px; }
@media (max-width: 900px) { .ws2 .s2-work > .agent-stream .s2-ideas { margin-top: 12px; } }

/* (owner 2026-10-22) the website as a card in the conversation, under the reply that built it */
.ws2.s2-busy .s2-work > .agent-stream .stream-messages { display: contents !important; }
.ws2.s2-busy .s2-work { gap: 24px; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages > * { width: min(880px, 100%); box-sizing: border-box; margin-left: auto !important; margin-right: auto !important; flex: none; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages > .msg-user { width: auto; max-width: min(686px, 78%); margin-right: max(0px, calc((100% - 880px) / 2)) !important; margin-left: auto !important; align-self: flex-end; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages > :first-child { margin-top: 28px !important; }
.ws2.s2-busy .s2-work > .agent-stream .keep-bar { order: 9990 !important; }
.ws2.s2-busy .s2-work > .agent-stream .attach-chips { order: 9995 !important; }
.ws2.s2-busy .s2-work > .agent-stream .chat-input-row { order: 9999 !important; }
.ws2.s2-busy.s2-has-build .s2-work > .editor-panel { width: min(1180px, 100%); height: 56vh; min-height: 420px; margin: 0 auto !important; transition: height .25s; }
.ws2.s2-busy.s2-has-build .s2-work > .editor-panel.s3-tall { width: min(1500px, 100%); height: 86vh; }
.s3-full { display: inline-flex; align-items: center; gap: 6px; }
.s3-full svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s3-was { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px dashed #cfd9de; border-radius: 14px; color: #536471; font: 500 14.5px Inter, sans-serif; background: #fff; }
.s3-was svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
html[data-mode="dark"] .s3-was { background: #111827; border-color: #374151; color: #9aaacb; }
/* (owner 2026-10-22) phones: the box sits lower on the first screen */
@media (max-width: 900px) { .ws2:not(.s2-busy) .s2-work > .agent-stream { padding-top: max(18px, calc(52vh - 210px)) !important; } }
@media (max-width: 900px) { .s3-full span { display: none; } .ws2.s2-busy.s2-has-build .s2-work > .editor-panel { height: 62vh; min-height: 380px; } }

/* (owner 2026-10-22) once a chat starts the templates leave (they were showing inside the conversation) */
.ws2.s2-busy .s2-work .s2-ideas, .ws2.s2-busy .s2-work .example-chips { display: none !important; }
/* (owner 2026-10-22) phones: once a chat starts the box is fixed at the bottom of the screen, however short the chat */
@media (max-width: 900px) { .ws2.s2-busy .s2-work > .agent-stream .chat-input-row { position: fixed !important; left: 10px; right: 10px; bottom: 10px; width: auto !important; margin: 0 !important; } .ws2.s2-busy .s2-work { padding-bottom: calc(var(--s2-bar-h, 130px) + 28px) !important; } }   /* (10-29) room for the message box's real height (workspace.html sets --s2-bar-h), so the last message isn't hidden behind it */

/* (owner 2026-10-22) the demo-ended note in the chat */
.ws2 .stream-messages .msg-agent.s3-endnote { background: #fff7ed !important; border: 1px solid #fed7aa !important; border-radius: 18px !important; padding: 16px 20px !important; }
.s3-endnote-row { margin-top: 12px; }
.s3-endnote-row button { background: #0f1419; color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font: 700 15px 'Plus Jakarta Sans', Inter, sans-serif; cursor: pointer; }
.s3-endnote-row button:hover { background: #2a3238; }
html[data-mode="dark"] .ws2 .stream-messages .msg-agent.s3-endnote { background: #2a1d10 !important; border-color: #7c4a1e !important; }
.ws2 .stream-messages .msg-agent.s3-endnote { scroll-margin-bottom: 120px; }

/* (owner 2026-10-22) Plug-ins */
.pl-wrap { position: fixed; inset: 0; z-index: 9000; background: rgba(15,23,42,.45); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px; overflow-y: auto; }
.pl-wrap[hidden] { display: none; }
.pl-box { width: min(1100px, 100%); background: #fff; border-radius: 22px; padding: 26px 30px 30px; box-shadow: 0 30px 80px rgba(15,23,42,.3); font-family: 'Plus Jakarta Sans', Inter, sans-serif; color: #0f1419; }
.pl-head { display: flex; align-items: center; justify-content: space-between; }
.pl-head h2 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.pl-x { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; font-size: 16px; cursor: pointer; color: #0f1419; }
.pl-sub { margin: 6px 0 18px; color: #536471; font-size: 15px; }
.pl-search { display: flex; align-items: center; gap: 10px; background: #eef1f4; border-radius: 999px; padding: 12px 18px; }
.pl-search svg { width: 20px; height: 20px; fill: none; stroke: #536471; stroke-width: 2; stroke-linecap: round; flex: none; }
.pl-search input { flex: 1; border: 0; background: transparent; outline: none; font: 500 17px Inter, sans-serif; color: #0f1419; min-width: 0; }
.pl-body h3 { margin: 28px 0 10px; font-size: 19px; font-weight: 800; }
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 28px; }
.pl-card { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-radius: 14px; }
.pl-card:hover { background: #f7f9f9; }
.pl-card > i { width: 46px; height: 46px; border-radius: 12px; background: #eef4ff; color: #2563eb; display: grid; place-items: center; flex: none; }
.pl-card > i svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pl-card > div { flex: 1; min-width: 0; }
.pl-card b { display: block; font-size: 16.5px; font-weight: 700; }
.pl-card span { display: block; color: #536471; font-size: 14px; margin-top: 2px; }
.pl-add { width: 40px; height: 40px; border-radius: 50%; border: 0; background: none; color: #0f1419; cursor: pointer; display: grid; place-items: center; flex: none; }
.pl-add:hover { background: #e7ebee; }
.pl-add svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pl-none { color: #536471; margin-top: 22px; }
@media (max-width: 900px) { .pl-wrap { padding: 0; } .pl-box { border-radius: 0; min-height: 100%; padding: 18px 16px 24px; } .pl-grid { grid-template-columns: 1fr; } .pl-head h2 { font-size: 24px; } }
html[data-mode="dark"] .pl-box { background: #0f172a; color: #e5e7eb; }
html[data-mode="dark"] .pl-search { background: #1f2937; } html[data-mode="dark"] .pl-search input { color: #e5e7eb; }
html[data-mode="dark"] .pl-card:hover { background: #111c33; } html[data-mode="dark"] .pl-card > i { background: #172554; color: #93b4fd; }
html[data-mode="dark"] .pl-add, html[data-mode="dark"] .pl-x { color: #e5e7eb; background: none; border-color: #374151; } html[data-mode="dark"] .pl-add:hover { background: #1f2937; }

/* (2026-10-22) side-menu Files panel */
.s3-fbtn { background: #0f1419; color: #fff; border: 0; border-radius: 999px; padding: 11px 20px; font: 700 15px 'Plus Jakarta Sans', Inter, sans-serif; cursor: pointer; }
.s3-fbtn.ghost { background: #fff; color: #0f1419; border: 1px solid #cfd9de; }

/* (owner 2026-10-22) no banner: buttons in the top menu row, greeting above the chat box on a new chat */
body.s3-nobanner .s2-top { display: none !important; }
.s3-topright { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; padding-left: 10px; }
.s3-topright .usage-pills { display: flex; flex-wrap: nowrap !important; gap: 8px; align-items: center; }
.s3-topleft { display: flex; align-items: center; gap: 6px; flex: none; }
.s3-topleft:empty { display: none; }
.s3-greet { display: none; text-align: center; font: 800 34px/1.15 'Plus Jakarta Sans', Inter, sans-serif; letter-spacing: -.02em; color: #0f1419; margin: 0 0 22px; }
.ws2:not(.s2-busy) .s2-work > .agent-stream .s3-greet { display: block; order: 0; }
html[data-mode="dark"] .s3-greet { color: #e5e7eb; }
@media (max-width: 1500px) { .s3-topright .usage-pills > *:not(:last-child):not(.pill-upgrade) { font-size: 12px; } }
@media (max-width: 900px) {
  .s3-topleft { display: flex; align-items: center; flex: none; margin-right: 6px; }
  .s3-topleft .s2-burger { display: block !important; }
  .s3-topright { position: static; overflow-x: auto; max-width: 52vw; scrollbar-width: none; } .s3-topright::-webkit-scrollbar { display: none; }
  .s3-greet { font-size: 24px; margin-bottom: 14px; }
}
/* (2026-10-22) the top row holds the menu and the plan buttons: tighter items, no arrows, compact pills */
body.s3-nobanner.lay-top .s2-side .m-row { padding: 8px 9px !important; font-size: 14px; gap: 6px; }
body.s3-nobanner.lay-top .s2-side .m-row .mc { display: none !important; }
body.s3-nobanner .s3-topright .usage-pills > *, body.s3-nobanner .s3-topright .mode-slot > * { font-size: 12.5px !important; padding: 6px 10px !important; white-space: nowrap; }
@media (max-width: 1750px) { body.s3-nobanner.lay-top .s2-side .m-row span { font-size: 13px; } body.s3-nobanner.lay-top .s2-logo span small { display: none; } }
@media (max-width: 1500px) { body.s3-nobanner.lay-top .s2-side .m-row .mi { display: none; } }
/* (owner 2026-10-22) the top row keeps four: Dark, plan, upgrade, Exit Workspace (plus the demo clock) */
body.s3-nobanner .s3-topright .pill-x { display: none !important; }
body.s3-t2.lay-top .s2-side .m-row .mi { display: none !important; }
body.s3-t2 .s3-topright .mode-slot .mode-btn span, body.s3-t2 .s3-topright .mode-slot button span { display: none !important; }
body.s3-t2 .s3-topright a[href*="index"] { font-size: 0 !important; } body.s3-t2 .s3-topright a[href*="index"]::after { content: "Exit"; font-size: 12.5px; }
body.s3-t3 .s2-logo span { display: none !important; } body.s3-t3.lay-top .s2-side .m-row { padding: 8px 7px !important; }
@media (max-width: 900px) { body.s3-nobanner .s2-side .s3-topleft { order: 0; } body.s3-nobanner .s2-side .s2-logo { order: 1; } body.s3-nobanner .s2-side .s3-topright { order: 2; margin-left: 0; max-width: none; overflow: visible; padding-left: 4px; } body.s3-nobanner .s2-side .s2-scroll { order: 3; } }