/* Workspace redesign (2026-10-15): dark sidebar menu, light work area, preview on the right.
   Only the workspace shell (.ws2) is restyled; the pop-up windows keep their own look. */
.ws2 {
  --s2-bg: #f3f6fb; --s2-card: #ffffff; --s2-line: #e3e8f2; --s2-ink: #0f172a; --s2-muted: #64748b; --s2-blue: #2563eb; --s2-blue2: #1d4ed8; --s2-green: #10b981;
  --s2-side: #0b1530; --s2-side2: #13214a; --s2-sidetxt: #c8d3ee;
  --text-main: var(--s2-ink); --text-muted: var(--s2-muted); --border-color: var(--s2-line); --bg-card: var(--s2-card);
  position: fixed; inset: 0; display: grid; grid-template-columns: 252px 1fr; background: var(--s2-bg); color: var(--s2-ink);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}
body { padding: 0 !important; background: #f3f6fb !important; }

/* ---------- sidebar ---------- */
.s2-side { background: linear-gradient(180deg, var(--s2-side) 0%, #0a1129 100%); color: var(--s2-sidetxt); display: flex; flex-direction: column; min-height: 0; padding: 18px 14px 14px; gap: 10px; overflow: hidden; }
.s2-logo { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; font-size: 17px; padding: 2px 6px 10px; letter-spacing: -.01em; }
.s2-logo img { border-radius: 9px; } .s2-logo b { color: #5b9dff; font-weight: 800; }
.s2-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; min-height: 0; flex: 0 1 auto; padding-right: 2px; }
.s2-nav::-webkit-scrollbar, .s2-chats .chat-list::-webkit-scrollbar { width: 6px; } .s2-nav::-webkit-scrollbar-thumb, .s2-chats .chat-list::-webkit-scrollbar-thumb { background: #263763; border-radius: 6px; }
.s2-item { display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 10px; color: var(--s2-sidetxt); text-decoration: none; font-size: 14px; font-weight: 600; transition: background .15s, color .15s; }
.s2-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.s2-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.s2-item.on { background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff; box-shadow: 0 6px 18px rgba(37,99,235,.35); }
.s2-item.locked::after { content: none; margin-left: auto; font-size: 9px; font-weight: 800; letter-spacing: .06em; color: #fbbf24; border: 1px solid rgba(251,191,36,.5); border-radius: 6px; padding: 1px 5px; }
.s2-group { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6f80aa; padding: 12px 10px 4px; }
.s2-chats { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; display: flex; flex-direction: column; min-height: 90px; flex: 1 1 0; }
.s2-chats-h { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #6f80aa; padding: 0 6px 6px; }
.s2-chats-h button { display: inline-flex; align-items: center; gap: 4px; background: rgba(91,157,255,.14); color: #9cc3ff; border: 1px solid rgba(91,157,255,.35); border-radius: 8px; padding: 3px 8px; font-size: 11px; font-weight: 700; cursor: pointer; letter-spacing: 0; text-transform: none; }
.s2-chats-h svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.ws2 .s2-chats .chat-list { flex: 1; min-height: 0; overflow-y: auto; }
.ws2 .s2-chats .chat-item { color: #aab8da; padding: 6px 8px; } .ws2 .s2-chats .chat-item:hover, .ws2 .s2-chats .chat-item.active { background: rgba(255,255,255,.08); color: #fff; }
.ws2 .s2-chats .chat-note { color: #6f80aa; padding: 0 6px; }
.s2-plan { background: linear-gradient(160deg, #15275a, #0f1c42); border: 1px solid rgba(91,157,255,.25); border-radius: 14px; padding: 12px 12px 12px; font-size: 12.5px; color: #c8d3ee; }
.s2-plan:empty { display: none; }
.s2-plan b { display: block; color: #fff; font-size: 14px; margin-bottom: 2px; } .s2-plan .bar { height: 6px; background: rgba(255,255,255,.12); border-radius: 6px; margin: 8px 0 10px; overflow: hidden; } .s2-plan .bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #3b82f6); border-radius: 6px; }
.s2-plan button { width: 100%; background: #2563eb; color: #fff; border: 0; border-radius: 9px; padding: 8px; font-weight: 800; font-size: 12.5px; cursor: pointer; } .s2-plan button.ghost { background: transparent; border: 1px solid rgba(255,255,255,.22); color: #dbe5ff; }
.s2-help { display: flex; align-items: center; gap: 10px; color: #c8d3ee; text-decoration: none; padding: 8px 8px 2px; font-size: 12px; }
.s2-help svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #2563eb; fill: none; stroke: #fff; stroke-width: 2; flex: none; } .s2-help b { display: block; color: #fff; font-size: 13px; }

/* ---------- main column ---------- */
.s2-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 14px 16px 16px; gap: 12px; }
.s2-top { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; background: var(--s2-card); border: 1px solid var(--s2-line); border-radius: 16px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.s2-burger { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--s2-ink); }
.s2-hello { display: flex; flex-direction: column; margin-right: auto; min-width: 0; } .s2-hello b { font-size: 19px; letter-spacing: -.01em; } .s2-hello span { color: var(--s2-muted); font-size: 13px; }
.ws2 .usage-pills { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ws2 .usage-pills > button:not([onclick*="showTrialLockModal"]) { display: none !important; }   /* the tools now live in the sidebar */
.ws2 .usage-pills .pill-box { background: #f5f8ff; border: 1px solid var(--s2-line); color: var(--s2-muted); border-radius: 10px; padding: 7px 12px; }
.ws2 .usage-pills .pill-val { color: var(--s2-ink) !important; }
.ws2 .usage-pills button[onclick*="showTrialLockModal"] { background: var(--s2-blue) !important; border-radius: 10px !important; padding: 9px 16px !important; box-shadow: 0 6px 16px rgba(37,99,235,.3); }
.ws2 .usage-pills a { color: var(--s2-muted) !important; }

.s2-work { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(340px, 1fr) minmax(420px, 1.35fr); gap: 14px; }
.ws2 .agent-stream, .ws2 .editor-panel { background: var(--s2-card); border: 1px solid var(--s2-line); border-radius: 18px; box-shadow: 0 1px 3px rgba(15,23,42,.05); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* chat */
.s2-start { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; padding: 16px 16px 4px; }
.s2-start button { text-align: left; background: #fff; border: 1px solid var(--s2-line); border-radius: 14px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font: inherit; color: var(--s2-ink); transition: border-color .15s, box-shadow .15s, transform .15s; }
.s2-start button:hover { border-color: #93b4ff; box-shadow: 0 8px 22px rgba(37,99,235,.12); transform: translateY(-1px); }
.s2-start svg { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: #eef4ff; fill: none; stroke: var(--s2-blue); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 4px; }
.s2-start button:nth-child(2) svg { background: #ecfdf5; stroke: #059669; } .s2-start button:nth-child(3) svg { background: #f5f3ff; stroke: #7c3aed; } .s2-start button:nth-child(4) svg { background: #fdf2f8; stroke: #db2777; } .s2-start button:nth-child(5) svg { background: #fff7ed; stroke: #ea580c; }
.s2-start b { font-size: 14px; } .s2-start span { font-size: 11.5px; color: var(--s2-muted); line-height: 1.35; }
.ws2.s2-busy .s2-start { display: none; }
.ws2 .stream-messages { background: transparent; padding: 16px; }
.ws2 .msg-agent { background: #f6f8fc; border: 1px solid var(--s2-line); color: var(--s2-ink); }
.ws2 .msg-agent strong { color: var(--s2-ink); }
.ws2 .msg-user { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.ws2 .msg-agent a { color: var(--s2-blue); }
.ws2 .chat-input-row { background: #fff; border-top: 1px solid var(--s2-line); padding: 12px; }
.ws2 .chat-input { background: #f6f8fc; border: 1px solid var(--s2-line); color: var(--s2-ink); border-radius: 12px; }
.ws2 .chat-input:focus { border-color: #93b4ff; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ws2 .btn-exec { background: var(--s2-blue) !important; border-radius: 12px; }
.ws2 .btn-attach { background: #f6f8fc; border: 1px solid var(--s2-line); color: var(--s2-muted); border-radius: 12px; }
.ws2 .attach-chips { background: #fff; }
.ws2 .keep-bar { color: #065f46; background: #ecfdf5; border-color: #a7f3d0; }
.ws2 .example-chips { display: none !important; }

/* preview */
.s2-pbar { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-bottom: 1px solid var(--s2-line); flex-wrap: wrap; }
.s2-tabs { display: flex; gap: 4px; background: #f3f6fb; border-radius: 11px; padding: 3px; }
.ws2 .tab-btn { background: transparent; border: 0; color: var(--s2-muted); border-radius: 8px; padding: 7px 11px; font-size: 13px; font-weight: 700; cursor: pointer; }
.ws2 .tab-btn:hover { color: var(--s2-ink); }
.ws2 .s2-tabs .tab-btn.active { background: #fff; color: var(--s2-blue); box-shadow: 0 1px 3px rgba(15,23,42,.12); }
.s2-devices { display: flex; gap: 4px; margin-right: auto; }
.s2-devices button span { display: none; }
.s2-devices button { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid transparent; color: var(--s2-muted); border-radius: 9px; padding: 6px 9px; font: 600 12.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
.s2-devices button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.s2-devices button.on { border-color: #c7d7fe; background: #eef4ff; color: var(--s2-blue); }
.s2-actions { position: relative; display: flex; gap: 6px; align-items: center; }
.ws2 .s2-more-btn { font-size: 18px; padding: 4px 10px; border: 1px solid var(--s2-line) !important; }
.s2-more { display: none; position: absolute; right: 86px; top: 38px; z-index: 30; background: #fff; border: 1px solid var(--s2-line); border-radius: 12px; box-shadow: 0 14px 34px rgba(15,23,42,.16); padding: 6px; flex-direction: column; min-width: 190px; }
.s2-actions.open .s2-more { display: flex; } .s2-more .tab-btn { text-align: left; }
.ws2 .s2-publish { background: var(--s2-blue) !important; color: #fff !important; padding: 8px 16px !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(37,99,235,.3); }
.s2-files { border-bottom: 1px solid var(--s2-line); padding: 8px 12px; background: #fafbfe; }
.s2-files-h { font-size: 11px; font-weight: 800; color: var(--s2-muted); letter-spacing: .06em; text-transform: uppercase; padding: 2px 4px 6px; }
.ws2 .file-tree { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.ws2 .file-item { color: var(--s2-muted); border: 1px solid var(--s2-line); background: #fff; padding: 6px 10px; }
.ws2 .file-item:hover, .ws2 .file-item.active { background: #eef4ff; color: var(--s2-blue); border-color: #c7d7fe; }
.s2-stage { flex: 1; min-height: 0; display: flex; justify-content: center; background: #eef2f8; overflow: auto; }
.s2-stage #preview-frame { flex: 1 1 auto; width: 100%; max-width: var(--s2-dev, 100%); height: 100%; border: 0; background: #fff; transition: max-width .25s; }
.s2-stage.dev #preview-frame { margin: 14px auto; height: calc(100% - 28px); border-radius: 14px; box-shadow: 0 10px 34px rgba(15,23,42,.18); }
.s2-stage .code-area { width: 100%; }
.ws2 .terminal-log { height: 64px; font-size: 11px; background: #0b1020; color: #34d399; }

/* ---------- smaller screens ---------- */
@media (max-width: 1180px) { .ws2 { grid-template-columns: 220px 1fr; } .s2-work { grid-template-columns: 1fr 1.1fr; } .s2-devices span { display: none; } }
@media (max-width: 900px) {
  .ws2 { position: static; display: block; min-height: 100vh; } body { overflow: auto !important; height: auto !important; }
  .s2-side { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 270px; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  body.s2-open .s2-side { transform: none; }
  .s2-burger { display: block; }
  .s2-main { padding: 10px; } .s2-work { display: flex; flex-direction: column; }
  .ws2 .agent-stream { height: 70vh; min-height: 460px; } .ws2 .editor-panel { height: 78vh; min-height: 480px; }
  .s2-hello span { display: none; }
}

/* ---------- light / dark switch (theme2.js) ---------- */
.ws2 .mode-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--s2-line); color: var(--s2-ink); border-radius: 10px; padding: 7px 12px; font: 700 13px 'Plus Jakarta Sans', sans-serif; cursor: pointer; }
html[data-mode="dark"] .ws2 { --s2-bg: #0a1124; --s2-card: #111a36; --s2-line: #243052; --s2-ink: #e6ecfb; --s2-muted: #9aaacb; }
html[data-mode="dark"] body { background: #0a1124 !important; }
html[data-mode="dark"] .ws2 .s2-start button { background: #111a36; color: var(--s2-ink); }
html[data-mode="dark"] .ws2 .s2-start svg { background: #1a2650 !important; }
html[data-mode="dark"] .ws2 .msg-agent { background: #17213f; border-color: #243052; color: var(--s2-ink); } html[data-mode="dark"] .ws2 .msg-agent strong { color: #fff; }
html[data-mode="dark"] .ws2 .chat-input-row, html[data-mode="dark"] .ws2 .attach-chips { background: #111a36; }
html[data-mode="dark"] .ws2 .chat-input, html[data-mode="dark"] .ws2 .btn-attach { background: #0c1430; border-color: #243052; color: var(--s2-ink); }
html[data-mode="dark"] .ws2 .usage-pills .pill-box { background: #0c1430; }
html[data-mode="dark"] .s2-tabs { background: #0c1430; } html[data-mode="dark"] .ws2 .s2-tabs .tab-btn.active { background: #1a2650; color: #93c5fd; box-shadow: none; }
html[data-mode="dark"] .s2-devices button.on { background: #1a2650; border-color: #34477e; color: #93c5fd; }
html[data-mode="dark"] .s2-more { background: #111a36; border-color: #243052; }
html[data-mode="dark"] .s2-files { background: #0e1631; } html[data-mode="dark"] .ws2 .file-item { background: #111a36; } html[data-mode="dark"] .ws2 .file-item.active, html[data-mode="dark"] .ws2 .file-item:hover { background: #1a2650; color: #93c5fd; border-color: #34477e; }
html[data-mode="dark"] .s2-stage { background: #0c1430; }
html[data-mode="dark"] .ws2 .keep-bar { background: rgba(16,185,129,.12); border-color: rgba(52,211,153,.4); color: #a7f3d0; }

.s2-top .usage-pills { flex-wrap: nowrap; } .s2-top .mode-slot { flex: none; }
@media (max-width: 1280px) { .ws2 .mode-btn span { display: none; } .s2-hello span { display: none; } }
@media (max-width: 900px) { .s2-top { flex-wrap: wrap; } .s2-top .usage-pills { flex-wrap: wrap; } }

/* ---------- workspace menu in the home page style (2026-10-15) ---------- */
.s2-side { background: #fff !important; color: #1e293b; border-right: 1px solid var(--s2-line); padding: 16px 12px 12px !important; gap: 8px !important; }
.s2-logo { color: #0f172a !important; gap: 11px !important; padding: 2px 6px 12px !important; border-bottom: 1px solid var(--s2-line); }
.s2-logo span { display: flex; flex-direction: column; line-height: 1.15; } .s2-logo b { color: #0f172a !important; font-size: 15.5px; } .s2-logo small { color: #64748b; font-size: 12px; font-weight: 600; margin-top: 2px; }
.s2-scroll { overflow-y: auto; min-height: 0; flex: 1 1 auto; padding-right: 2px; } .s2-scroll::-webkit-scrollbar { width: 6px; } .s2-scroll::-webkit-scrollbar-thumb { background: #d6deea; border-radius: 6px; }
.s2-side .m-nav, .s2-side .m-quick { display: flex; flex-direction: column; gap: 2px; }
.s2-side .m-row, .s2-side .m-quick a { display: flex; align-items: center; gap: 13px; padding: 9px 11px; border-radius: 11px; color: #1e293b; font-size: 14.5px; font-weight: 600; text-decoration: none; cursor: pointer; list-style: none; }
.s2-side .m-row:hover, .s2-side .m-quick a:hover { background: #f3f6fb; }
.s2-side .m-row[aria-current] { background: #eef4ff; color: #2563eb; } .s2-side .m-row[aria-current] .mi { color: #2563eb; }
.s2-side .mi { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: #475569; }
.s2-side .mc { width: 15px; height: 15px; margin-left: auto; fill: none; stroke: #94a3b8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.s2-side .m-grp summary::-webkit-details-marker { display: none; } .s2-side .m-grp[open] .mc { transform: rotate(90deg); }
.s2-side .m-sub { display: flex; flex-direction: column; padding: 1px 0 6px 44px; }
.s2-side .m-sub a { display: flex; justify-content: space-between; gap: 8px; padding: 6px 9px; color: #475569; font-size: 13.5px; font-weight: 600; border-radius: 8px; text-decoration: none; }
.s2-side .m-sub a:hover { background: #f3f6fb; color: #0f172a; } .s2-side .m-sub a i { font-style: normal; color: #2563eb; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.s2-side .m-sub a.locked::after { content: none; margin-left: auto; font-size: 9px; font-weight: 800; color: #b45309; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 6px; padding: 1px 5px; }
.s2-side .m-qh { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #334155; padding: 14px 11px 6px; margin-top: 8px; border-top: 1px solid var(--s2-line); }
.s2-side .m-quick a .mi { color: #2563eb; }
.s2-side .s2-chats { border-top: 1px solid var(--s2-line) !important; flex: 0 0 auto !important; max-height: 150px; min-height: 0 !important; }
.s2-side .s2-chats-h { color: #64748b !important; } .s2-side .s2-chats-h button { background: #eef4ff !important; color: #2563eb !important; border-color: #c7d7fe !important; }
.ws2 .s2-side .chat-item { color: #334155 !important; } .ws2 .s2-side .chat-item:hover, .ws2 .s2-side .chat-item.active { background: #f3f6fb !important; color: #0f172a !important; } .ws2 .s2-side .chat-note { color: #94a3b8 !important; }
.s2-side .s2-plan { background: linear-gradient(160deg, #eef4ff, #f8faff) !important; border: 1px solid #c7d7fe !important; color: #334155 !important; } .s2-side .s2-plan b { color: #0f172a !important; } .s2-side .s2-plan .bar { background: #dbe5ff !important; }
.s2-side .s2-plan button.ghost { color: #2563eb !important; border-color: #c7d7fe !important; background: #fff !important; }
.s2-side .s2-help { color: #475569 !important; } .s2-side .s2-help b { color: #0f172a !important; }
html[data-mode="dark"] .s2-side { background: #0b1226 !important; border-right-color: #1c2747; }
html[data-mode="dark"] .s2-logo b { color: #fff !important; } html[data-mode="dark"] .s2-side .m-row, html[data-mode="dark"] .s2-side .m-quick a { color: #dbe4f7; } html[data-mode="dark"] .s2-side .mi { color: #9fb0d6; }
html[data-mode="dark"] .s2-side .m-row:hover, html[data-mode="dark"] .s2-side .m-quick a:hover, html[data-mode="dark"] .s2-side .m-sub a:hover { background: #141e3c; }
html[data-mode="dark"] .s2-side .m-row[aria-current] { background: #17265a; color: #93c5fd; } html[data-mode="dark"] .s2-side .m-sub a { color: #b3c1de; }
html[data-mode="dark"] .s2-side .s2-plan { background: #111a36 !important; border-color: #243052 !important; color: #c3cde6 !important; } html[data-mode="dark"] .s2-side .s2-plan b, html[data-mode="dark"] .s2-side .s2-help b { color: #fff !important; }
html[data-mode="dark"] .ws2 .s2-side .chat-item { color: #c3cde6 !important; } html[data-mode="dark"] .s2-side .m-qh { color: #9fb0d6; }
/* ---------- layout samples (owner picks one): body.lay-rail = icon rail, body.lay-top = top menu, body.lay-dark = navy menu ---------- */
body.lay-rail .ws2 { grid-template-columns: 76px 1fr; }
body.lay-rail .s2-side .m-row span, body.lay-rail .s2-side .mc, body.lay-rail .s2-side .m-qh, body.lay-rail .s2-side .m-quick, body.lay-rail .s2-side .s2-chats, body.lay-rail .s2-side .s2-plan, body.lay-rail .s2-logo span, body.lay-rail .s2-side .s2-help span, body.lay-rail .s2-side .m-sub { display: none !important; }
body.lay-rail .s2-side .m-row { justify-content: center; padding: 12px 0; } body.lay-rail .s2-logo { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
body.lay-top .ws2 { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body.lay-top .s2-side { flex-direction: row !important; align-items: center; padding: 8px 16px !important; border-right: 0; border-bottom: 1px solid var(--s2-line); overflow: visible; }
body.lay-top .s2-logo { border-bottom: 0 !important; padding: 0 12px 0 0 !important; } body.lay-top .s2-scroll { overflow: visible; display: flex; align-items: center; }
body.lay-top .s2-side .m-nav { flex-direction: row; gap: 2px; } body.lay-top .s2-side .m-row { padding: 8px 10px; font-size: 13.5px; gap: 7px; } body.lay-top .s2-side .mi { width: 17px; height: 17px; }
body.lay-top .s2-side .m-qh, body.lay-top .s2-side .m-quick, body.lay-top .s2-side .s2-chats, body.lay-top .s2-side .s2-plan, body.lay-top .s2-side .s2-help { display: none !important; }
body.lay-top .s2-side .m-row[title="Home"], body.lay-top .s2-side .m-row[title="Plans & Billing"] { display: none; }
body.lay-top .s2-side .m-grp { position: relative; } body.lay-top .s2-side .m-sub { position: absolute; top: 42px; left: 0; z-index: 30; background: #fff; border: 1px solid var(--s2-line); border-radius: 12px; box-shadow: 0 14px 30px rgba(15,23,42,.14); padding: 6px; min-width: 220px; }
body.lay-dark .s2-side { background: linear-gradient(180deg, #0b1530, #0a1129) !important; border-right-color: #16224a; }
body.lay-dark .s2-logo { border-bottom-color: #1c2747 !important; } body.lay-dark .s2-logo b { color: #fff !important; } body.lay-dark .s2-logo small { color: #8ea0c8; }
body.lay-dark .s2-side .m-row, body.lay-dark .s2-side .m-quick a { color: #dbe4f7; } body.lay-dark .s2-side .mi { color: #9fb0d6; } body.lay-dark .s2-side .m-sub a { color: #b3c1de; }
body.lay-dark .s2-side .m-row:hover, body.lay-dark .s2-side .m-quick a:hover, body.lay-dark .s2-side .m-sub a:hover { background: rgba(255,255,255,.07); }
body.lay-dark .s2-side .m-row[aria-current] { background: linear-gradient(90deg, #2563eb, #3b82f6); color: #fff; } body.lay-dark .s2-side .m-row[aria-current] .mi { color: #fff; }
body.lay-dark .s2-side .m-qh, body.lay-dark .s2-side .s2-chats-h { color: #6f80aa !important; border-color: #1c2747 !important; } body.lay-dark .s2-side .s2-chats { border-color: #1c2747 !important; }
body.lay-dark .ws2 .s2-side .chat-item { color: #c3cde6 !important; } body.lay-dark .ws2 .s2-side .chat-item.active { background: rgba(255,255,255,.08) !important; color: #fff !important; }
body.lay-dark .s2-side .s2-plan { background: linear-gradient(160deg, #15275a, #0f1c42) !important; border-color: rgba(91,157,255,.25) !important; color: #c8d3ee !important; } body.lay-dark .s2-side .s2-plan b, body.lay-dark .s2-side .s2-help b { color: #fff !important; }
body.lay-dark .s2-side .s2-help { color: #c8d3ee !important; }

/* ---------- chosen layout (owner 2026-10-15): menu across the top (#4) + a left panel with New chat and recent chats (#1 style); no quick-start cards ---------- */
body.lay-top .ws2 { grid-template-columns: 260px 1fr; grid-template-rows: auto 1fr; }
body.lay-top .s2-side { grid-column: 1 / -1; grid-row: 1; }
body.lay-top .s2-chatside { grid-column: 1; grid-row: 2; }
body.lay-top .s2-main { grid-column: 2; grid-row: 2; }
.s2-chatside { background: #fff; border-right: 1px solid var(--s2-line); display: flex; flex-direction: column; gap: 10px; padding: 14px 12px 12px; min-height: 0; }
.s2-newchat { width: 100%; background: #2563eb; color: #fff; border: 0; border-radius: 12px; padding: 12px; font: 800 14.5px 'Plus Jakarta Sans', sans-serif; cursor: pointer; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.s2-newchat:hover { background: #1d4ed8; }
.s2-chatside .s2-chats { border-top: 0 !important; padding-top: 4px; flex: 1 1 auto !important; max-height: none !important; min-height: 0 !important; display: flex; flex-direction: column; }
.s2-chatside .s2-chats-h { color: #64748b !important; } .s2-chatside .s2-chats-h button { display: none !important; }
.ws2 .s2-chatside .chat-list { flex: 1; overflow-y: auto; min-height: 0; } .ws2 .s2-chatside .chat-item { color: #334155 !important; padding: 8px 10px; border-radius: 10px; }
.ws2 .s2-chatside .chat-item:hover, .ws2 .s2-chatside .chat-item.active { background: #eef4ff !important; color: #0f172a !important; }
.ws2 .s2-chatside .chat-note { color: #94a3b8 !important; }
.s2-chatside .s2-plan { background: linear-gradient(160deg, #eef4ff, #f8faff) !important; border: 1px solid #c7d7fe !important; color: #334155 !important; } .s2-chatside .s2-plan b { color: #0f172a !important; } .s2-chatside .s2-plan .bar { background: #dbe5ff !important; }
.s2-chatside .s2-plan button.ghost { color: #2563eb !important; border-color: #c7d7fe !important; background: #fff !important; }
.s2-chatside .s2-help { color: #475569 !important; } .s2-chatside .s2-help b { color: #0f172a !important; }
.ws2 .s2-start { display: none !important; }
body.lay-top .s2-side .s2-scroll { flex: 1; } body.lay-top .s2-side .m-nav { flex-wrap: nowrap; }
html[data-mode="dark"] .s2-chatside { background: #0b1226; border-right-color: #1c2747; }
html[data-mode="dark"] .ws2 .s2-chatside .chat-item { color: #c3cde6 !important; } html[data-mode="dark"] .ws2 .s2-chatside .chat-item.active, html[data-mode="dark"] .ws2 .s2-chatside .chat-item:hover { background: #17265a !important; color: #fff !important; }
html[data-mode="dark"] .s2-chatside .s2-plan { background: #111a36 !important; border-color: #243052 !important; color: #c3cde6 !important; } html[data-mode="dark"] .s2-chatside .s2-plan b, html[data-mode="dark"] .s2-chatside .s2-help b { color: #fff !important; }
html[data-mode="dark"] body.lay-top .s2-side .m-sub { background: #111a36; border-color: #243052; }
@media (max-width: 1280px) { body.lay-top .s2-side .m-row span { font-size: 12.5px; } body.lay-top .s2-side .m-row { padding: 8px 7px; gap: 5px; } body.lay-top .s2-logo small { display: none; } }
@media (max-width: 1100px) { body.lay-top .s2-side .m-row span { display: none; } body.lay-top .s2-side .m-row[aria-current] span { display: inline; } }
@media (max-width: 900px) {
  body.lay-top .ws2 { display: block; }
  body.lay-top .s2-side { position: static; transform: none; width: auto; box-shadow: none; overflow-x: auto; }
  body.lay-top .s2-chatside { position: fixed; z-index: 50; inset: 0 auto 0 0; width: 280px; transform: translateX(-100%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.35); }
  body.lay-top.s2-open .s2-chatside { transform: none; }
}
/* top menu labels stay on one line; tighter on laptops */
body.lay-top .s2-side .m-row span { white-space: nowrap; }
@media (max-width: 1400px) { body.lay-top .s2-side .mc { display: none; } body.lay-top .s2-side .m-row { padding: 8px 7px; gap: 6px; font-size: 13px; } body.lay-top .s2-logo small { display: none; } }
/* (owner 2026-10-15) free-demo visitors see which tools need an upgrade */
.s2-side .m-sub a.locked::after { content: "Upgrade" !important; margin-left: auto; font-size: 10px; font-weight: 800; color: #fff; background: #2563eb; border: 0; border-radius: 999px; padding: 2px 8px; letter-spacing: .02em; }
@media (max-width: 900px) { body.lay-top .s2-logo span { display: none; } body.lay-top .s2-side { flex-wrap: nowrap; } }
/* (owner 2026-10-16) the "⋯" menu (download, copy...) must be visible on phones: open it as a sheet from the bottom */
@media (max-width: 900px) {
  .s2-actions.open .s2-more { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; z-index: 9990; min-width: 0; padding: 10px; border-radius: 18px; box-shadow: 0 -10px 40px rgba(15,23,42,.35); }
  .s2-actions.open .s2-more .tab-btn { padding: 14px 12px; font-size: 15px; }
  .s2-actions.open::before { content: ""; position: fixed; inset: 0; background: rgba(8,14,32,.4); z-index: 9989; }
}
/* (owner 2026-10-16) top menu on phones: the scrolling bar clipped the drop-downs, so open them as a sheet from the bottom */
@media (max-width: 900px) {
  body.lay-top .s2-side .m-grp[open] .m-sub { position: fixed; left: 10px; right: 10px; bottom: 10px; top: auto; z-index: 9990; min-width: 0; padding: 10px; border-radius: 18px; background: #fff; box-shadow: 0 -10px 40px rgba(15,23,42,.35); max-height: 70vh; overflow-y: auto; }
  body.lay-top .s2-side .m-grp[open] .m-sub a { padding: 14px 12px; font-size: 15px; }
  body.lay-top .s2-side .m-grp[open] > summary::after { content: ""; position: fixed; inset: 0; background: rgba(8,14,32,.4); z-index: 9989; }
  body.lay-top .s2-side .m-row span { display: inline !important; font-size: 13px; }
  html[data-mode="dark"] body.lay-top .s2-side .m-grp[open] .m-sub { background: #111a36; }
}

/* ---------- centred agent layout (owner 2026-10-20): a title, a big request box with tools, quick starts and real sites;
   once a conversation starts the box slims down and the built website shows full width below it ---------- */
.ws2 .s2-work { display: flex; flex-direction: column; gap: 18px; overflow-y: auto; padding: 0 4px 28px; }
.ws2 .s2-work > .agent-stream { flex: none; width: min(1000px, 100%); margin: 0 auto; background: transparent; border: 0; box-shadow: none; overflow: visible; height: auto; min-height: 0; }
.s2-hero { text-align: center; padding: 30px 0 18px; }
.s2-hero h1 { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 8px; font: 800 34px/1.12 'Plus Jakarta Sans', sans-serif; letter-spacing: -.02em; color: var(--s2-ink); }
.s2-hero h1 i { font-style: normal; flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 21px; background: linear-gradient(135deg, #2563eb, #60a5fa); box-shadow: 0 8px 20px rgba(37,99,235,.3); }
.s2-hero p { margin: 0; color: var(--s2-blue); font-weight: 700; font-size: 15.5px; } .s2-hero p b { color: #16a34a; }
.ws2:not(.s2-busy) .stream-messages { display: none; }   /* the title replaces the welcome line until the first request */
.ws2.s2-busy .s2-hero, .ws2.s2-busy .s2-ideas, .ws2.s2-busy .s2-built { display: none; }
.ws2.s2-busy .s2-work > .agent-stream .stream-messages { max-height: 36vh; overflow-y: auto; padding: 10px 2px 12px; }
.ws2 .s2-work .chat-input-row { flex-wrap: wrap; align-items: center; gap: 10px; background: var(--s2-card); border: 1px solid var(--s2-line); border-radius: 22px; padding: 14px 16px 12px; box-shadow: 0 18px 50px rgba(15,23,42,.08); }
.ws2 .s2-work .chat-input { order: -1; flex: 1 1 100%; width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; font-size: 17px; padding: 12px 4px 46px; border-radius: 0; }
.ws2.s2-busy .s2-work .chat-input { padding-bottom: 14px; }
.ws2 .s2-work .btn-attach { flex: none; width: 42px; height: 42px; border-radius: 12px; }
.s2-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex: 1; min-width: 0; }
.s2-tools button { background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; font: 700 14.5px 'Plus Jakarta Sans', sans-serif; color: var(--s2-ink); cursor: pointer; white-space: nowrap; }
.s2-tools button:hover { background: #eef4ff; color: var(--s2-blue); }
.ws2.s2-busy .s2-tools { display: none; }
.ws2 .s2-work .btn-exec { margin-left: auto; border-radius: 999px !important; padding: 11px 20px; box-shadow: 0 8px 20px rgba(37,99,235,.3); }
.s2-ideas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.s2-ideas button { background: var(--s2-card); border: 1px solid var(--s2-line); border-radius: 12px; padding: 10px 12px; font: 700 14px 'Plus Jakarta Sans', sans-serif; color: var(--s2-ink); text-align: left; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: border-color .15s, box-shadow .15s, transform .15s; }
.s2-ideas button:hover { border-color: #93b4ff; box-shadow: 0 8px 22px rgba(37,99,235,.12); transform: translateY(-1px); }
.s2-built { width: min(1500px, calc(100vw - 340px)); position: relative; left: 50%; transform: translateX(-50%); margin-top: 40px; }
.s2-built h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; font: 800 18px 'Plus Jakarta Sans', sans-serif; color: var(--s2-ink); }
.s2-built h3 small { font-size: 13.5px; font-weight: 600; color: var(--s2-muted); }
.s2-built-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.s2-built-row button { padding: 0; border: 1px solid var(--s2-line); border-radius: 16px; overflow: hidden; background: var(--s2-card); cursor: pointer; text-align: left; box-shadow: 0 10px 30px rgba(15,23,42,.06); transition: transform .15s, box-shadow .15s; }
.s2-built-row button:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(15,23,42,.12); }
.s2-built-row img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.s2-built-row span { display: block; padding: 9px 12px; font: 700 13.5px 'Plus Jakarta Sans', sans-serif; color: var(--s2-ink); }
.ws2 .s2-work > .editor-panel { display: none; flex: none; width: min(1500px, 100%); margin: 0 auto; height: 78vh; min-height: 520px; }
.ws2.s2-busy .s2-work > .editor-panel { display: flex; }
html[data-mode="dark"] .s2-tools button:hover { background: #1a2650; color: #93c5fd; }
html[data-mode="dark"] .ws2 .s2-work .chat-input-row { box-shadow: 0 18px 50px rgba(0,0,0,.35); }
@media (max-width: 1180px) { .s2-ideas { grid-template-columns: repeat(3, 1fr); } .s2-built { width: 100%; left: 0; transform: none; } .s2-built-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  .ws2 .s2-work { overflow: visible; padding: 0 0 20px; } .ws2 .s2-work > .agent-stream { height: auto !important; min-height: 0 !important; }
  .s2-hero { padding: 14px 0 12px; } .s2-hero h1 { font-size: 24px; } .s2-hero h1 i { width: 34px; height: 34px; font-size: 17px; } .s2-hero p { font-size: 14px; }
  .ws2 .s2-work .chat-input { font-size: 16px; padding-bottom: 26px; }
  .s2-tools { order: 0; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .s2-tools::-webkit-scrollbar { display: none; }
  .ws2 .s2-work .btn-attach, .ws2 .s2-work .btn-exec { order: 1; }
  .s2-ideas { grid-template-columns: repeat(2, 1fr); }
  .s2-built-row { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .s2-built-row button { flex: 0 0 70%; scroll-snap-align: start; }
  .s2-built h3 small { display: none; }
  .ws2 .s2-work > .editor-panel { height: 78vh; min-height: 460px; }
}

/* (owner 2026-10-20) open/close the left side panel on computers */
.s2-chatside { position: relative; }
.s2-side-x { position: absolute; top: 18px; right: -13px; z-index: 5; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--s2-line); background: var(--s2-card); color: var(--s2-muted); font-size: 12px; cursor: pointer; box-shadow: 0 2px 8px rgba(15,23,42,.12); display: grid; place-items: center; }
.s2-side-x:hover, .s2-side-open:hover { color: var(--s2-blue); border-color: #93b4ff; }
.s2-side-open { display: none; flex: none; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--s2-line); background: var(--s2-card); color: var(--s2-ink); font-size: 18px; cursor: pointer; }
body.lay-top.s2-side-closed .ws2 { grid-template-columns: 0 1fr; }
body.s2-side-closed .s2-chatside { display: none; }
body.s2-side-closed .s2-side-open { display: grid; place-items: center; }
body.s2-side-closed .s2-built { width: min(1500px, calc(100vw - 80px)); }
@media (max-width: 900px) { .s2-side-x, .s2-side-open { display: none !important; } }

/* (owner 2026-10-20) start-screen look until a real build exists; the preview then shows well below the conversation */
.ws2.s2-busy:not(.s2-has-build) .s2-ideas, .ws2.s2-busy:not(.s2-has-build) .s2-built { display: grid; }
.ws2.s2-busy:not(.s2-has-build) .s2-built { display: block; }
.ws2.s2-busy:not(.s2-has-build) .s2-tools { display: flex; }
.ws2.s2-busy:not(.s2-has-build) .s2-work .chat-input { padding-bottom: 46px; }
.ws2.s2-busy .s2-work > .editor-panel { display: none; }
.ws2.s2-busy.s2-has-build .s2-work > .editor-panel { display: flex; margin-top: 56px; }
.ws2.s2-busy:not(.s2-has-build) .s2-work > .agent-stream { padding-top: 24px; }