/* ==========================================================================
   Vesopa Studio — build a website by talking.

   A dark, quiet workspace so the customer's own site is the brightest thing
   on the screen: a top bar, a canvas with the site inside a browser frame,
   and the conversation rail. On a phone the preview takes the screen and the
   conversation is a sheet that rises from the bottom.
   ========================================================================== */

.studio-body { margin: 0; background: #0b0c09; color: #eceee6; overflow: hidden; height: 100dvh; }
.studio-body .skip-link { position: absolute; left: -9999px; }
.st {
  --st-bg: #0b0c09; --st-panel: #131510; --st-panel-2: #1a1d16; --st-rule: rgba(255,255,255,.08); --st-rule-2: rgba(255,255,255,.14);
  --st-ink: #eceee6; --st-muted: #9b9e92; --st-lime: #a5c715; --st-lime-ink: #10130a; --st-glow: 0 0 0 1px rgba(165,199,21,.35), 0 0 34px -6px rgba(165,199,21,.45);
  --st-rail: 400px; --st-top: 60px;
  display: grid; grid-template-rows: var(--st-top) 1fr; height: 100dvh;
  font-family: var(--font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.st[lang="bn"], .st [lang="bn"] { font-family: var(--font, "Inter", system-ui, sans-serif), "Hind Siliguri", "Nirmala UI", "Noto Sans Bengali", sans-serif; }
.st button { font: inherit; color: inherit; }
.st svg { width: 18px; height: 18px; flex: none; }
.st [hidden] { display: none !important; }

/* ---- Top bar ---------------------------------------------------------------- */
.st-top { display: flex; align-items: center; gap: 14px; padding: 0 14px 0 16px; border-bottom: 1px solid var(--st-rule); background: rgba(11,12,9,.92); position: relative; z-index: 20; }
.st-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--st-ink); flex: none; }
.st-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: radial-gradient(circle at 35% 30%, #d6ef5a 0, #a5c715 48%, #6e8a0e 100%); color: var(--st-lime-ink); box-shadow: 0 0 22px -6px rgba(165,199,21,.7); }
.st-logo-text { font-size: 15px; letter-spacing: -.01em; }
.st-logo-text b { color: var(--st-lime); font-weight: 800; }
.st-site { display: flex; flex-direction: column; min-width: 0; padding-left: 14px; margin-left: 2px; border-left: 1px solid var(--st-rule); }
.st-site-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.st-saved { font-size: 11.5px; color: var(--st-muted); white-space: nowrap; }
.st-devices { display: flex; gap: 2px; padding: 3px; margin: 0 auto; border-radius: 12px; background: var(--st-panel); border: 1px solid var(--st-rule); }
.st-devices button { display: grid; place-items: center; width: 38px; height: 32px; border: 0; border-radius: 9px; background: transparent; color: var(--st-muted); cursor: pointer; transition: background .15s, color .15s; }
.st-devices button:hover { color: var(--st-ink); }
.st-devices button[aria-pressed="true"] { background: var(--st-panel-2); color: var(--st-lime); box-shadow: inset 0 0 0 1px var(--st-rule-2); }
.st-top-actions { display: flex; align-items: center; gap: 6px; }
.st-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--st-muted); cursor: pointer; }
.st-icon:hover:not(:disabled) { background: var(--st-panel-2); color: var(--st-ink); }
.st-icon:disabled { opacity: .35; cursor: default; }
.st-publish { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; margin-left: 6px; border: 0; border-radius: 11px; background: var(--st-lime); color: var(--st-lime-ink) !important; font-weight: 800 !important; font-size: 14px; cursor: pointer; box-shadow: 0 8px 24px -10px rgba(165,199,21,.8); transition: transform .15s, filter .15s; }
.st-publish:hover { transform: translateY(-1px); filter: brightness(1.05); }
.st-menu-wrap { position: relative; }
.st-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 230px; padding: 6px; border-radius: 14px; background: var(--st-panel-2); border: 1px solid var(--st-rule-2); box-shadow: 0 24px 60px -20px rgba(0,0,0,.7); z-index: 30; }
.st-menu button { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; font-size: 14px; }
.st-menu button:hover { background: rgba(255,255,255,.06); }

/* ---- Canvas and the browser frame -------------------------------------------- */
.st-main { display: grid; grid-template-columns: 1fr var(--st-rail); min-height: 0; }
.st-canvas {
  position: relative; min-width: 0; min-height: 0; padding: 22px; display: flex; justify-content: center;
  background: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.2px) 0 0 / 22px 22px, radial-gradient(ellipse at 50% 0%, rgba(165,199,21,.08), transparent 60%), var(--st-bg);
}
.st-browser {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; border-radius: 16px; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 40px 90px -30px rgba(0,0,0,.8); transition: width .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s;
}
.st-browser[data-device="tablet"] { width: min(820px, 100%); }
.st-browser[data-device="phone"] { width: min(400px, 100%); border-radius: 30px; }
.st-browser.is-building { box-shadow: 0 0 0 1px rgba(165,199,21,.55), 0 0 60px -14px rgba(165,199,21,.5), 0 40px 90px -30px rgba(0,0,0,.8); }
.st-chrome { display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 14px; background: #1b1d18; border-bottom: 1px solid rgba(255,255,255,.06); flex: none; }
.st-dots { display: flex; gap: 6px; }
.st-dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a3d34; }
.st-dots i:nth-child(1) { background: #e8615a; } .st-dots i:nth-child(2) { background: #e3b341; } .st-dots i:nth-child(3) { background: #62c454; }
.st-browser[data-device="phone"] .st-dots { display: none; }
.st-url { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 8px; background: rgba(255,255,255,.06); color: #b9bcb0; font-size: 12.5px; white-space: nowrap; overflow: hidden; }
.st-url svg { width: 12px; height: 12px; color: #62c454; }
.st-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--st-lime); white-space: nowrap; }
.st-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--st-lime); animation: st-pulse 1.1s ease-in-out infinite; }
@keyframes st-pulse { 50% { transform: scale(.55); opacity: .5; } }
.st-viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.st-viewport iframe { position: absolute; top: 0; left: 0; border: 0; background: #fff; transform-origin: 0 0; }

/* The empty canvas: a prompt to talk. */
.st-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px; overflow: auto; background: radial-gradient(ellipse at 50% 30%, rgba(165,199,21,.12), transparent 55%), #0f110c; color: var(--st-ink); text-align: center; }
.st-empty-inner { max-width: 620px; }
.st-empty h1 { margin: 26px 0 12px; font-size: clamp(30px, 4.2vw, 50px); line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
.st-empty h1 em { font-style: normal; background: linear-gradient(90deg, #d6ef5a, #a5c715); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-empty p { margin: 0 auto; max-width: 480px; color: var(--st-muted); font-size: 16px; line-height: 1.6; }
.st-bigmic { position: relative; display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto; border: 0; border-radius: 50%; cursor: pointer; color: var(--st-lime-ink);
  background: radial-gradient(circle at 35% 30%, #e0f56f 0, #a5c715 48%, #6e8a0e 100%); box-shadow: 0 20px 50px -14px rgba(165,199,21,.7); transition: transform .2s; }
.st-bigmic:hover { transform: scale(1.04); }
.st-bigmic svg { width: 36px; height: 36px; position: relative; z-index: 1; }
.st-bigmic-rings, .st-bigmic-rings::before { position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(165,199,21,.35); animation: st-ring 2.6s ease-out infinite; }
.st-bigmic-rings::before { content: ""; inset: -2px; animation-delay: 1.3s; }
@keyframes st-ring { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.45); opacity: 0; } }
.st-bigmic.is-live { background: radial-gradient(circle at 35% 30%, #fff 0, #e3f58a 50%, #a5c715 100%); }
.st-ideas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.st-ideas button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--st-rule-2); border-radius: 999px; background: rgba(255,255,255,.04); cursor: pointer; font-size: 14px; transition: background .15s, border-color .15s; }
.st-ideas button:hover { background: rgba(165,199,21,.1); border-color: rgba(165,199,21,.5); }

/* ---- Conversation rail ------------------------------------------------------------ */
.st-rail { position: relative; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--st-rule); background: var(--st-panel); }
.st-grab { display: none; }
.st-rail-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--st-rule); }
.st-ai-mark { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--st-lime-ink); background: radial-gradient(circle at 35% 30%, #d6ef5a 0, #a5c715 48%, #6e8a0e 100%); flex: none; }
.st-ai-mark::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; }
.st-ai-mark[data-state="listening"]::after { border-color: rgba(165,199,21,.7); animation: st-ring 1.4s ease-out infinite; }
.st-ai-mark[data-state="thinking"]::after, .st-ai-mark[data-state="building"]::after { border-color: transparent; border-top-color: var(--st-lime); border-right-color: var(--st-lime); animation: st-spin .9s linear infinite; }
.st-ai-mark[data-state="speaking"] { animation: st-talk .45s ease-in-out infinite alternate; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-talk { to { transform: scale(1.07); } }
.st-rail-title { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.st-rail-title b { font-size: 14.5px; }
.st-rail-title span { font-size: 12px; color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-lang { height: 30px; padding: 0 11px; border: 1px solid var(--st-rule-2); border-radius: 999px; background: transparent; cursor: pointer; font-size: 12.5px; font-weight: 700; }
.st-lang:hover { border-color: rgba(165,199,21,.6); color: var(--st-lime); }

.st-log { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.st-msg { max-width: 92%; padding: 10px 13px; border-radius: 15px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; animation: st-in .25s ease both; }
.st-msg.user { align-self: flex-end; background: var(--st-lime); color: var(--st-lime-ink); border-bottom-right-radius: 5px; font-weight: 500; }
.st-msg.ai { align-self: flex-start; background: var(--st-panel-2); border: 1px solid var(--st-rule); border-bottom-left-radius: 5px; }
.st-msg.err { align-self: stretch; background: rgba(232,97,90,.12); border: 1px solid rgba(232,97,90,.35); color: #ffb3ae; }
.st-msg.hint { align-self: stretch; background: transparent; border: 1px dashed var(--st-rule-2); color: var(--st-muted); font-size: 13.5px; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.st-steps { align-self: stretch; display: flex; flex-direction: column; gap: 5px; padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.025); border: 1px solid var(--st-rule); font-size: 13px; color: var(--st-muted); }
.st-step { display: flex; align-items: center; gap: 8px; }
.st-step i { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 2px solid rgba(165,199,21,.35); border-top-color: var(--st-lime); animation: st-spin .8s linear infinite; }
.st-step.is-done { color: var(--st-ink); }
.st-step.is-done i { border: 0; animation: none; background: var(--st-lime); }
.st-step.is-done i::after { content: ""; width: 7px; height: 4px; border-left: 2px solid var(--st-lime-ink); border-bottom: 2px solid var(--st-lime-ink); transform: rotate(-45deg) translate(1px, -1px); }
.st-step.is-gone { color: var(--st-muted); text-decoration: line-through; }
.st-step.is-gone i { animation: none; border-color: var(--st-rule-2); }
.st-swatches { display: inline-flex; gap: 3px; margin-left: 4px; }
.st-swatches b { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }

.st-compose { padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--st-rule); background: var(--st-panel); }
.st-selected { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; padding: 7px 8px 7px 12px; border-radius: 10px; background: rgba(165,199,21,.1); border: 1px solid rgba(165,199,21,.35); font-size: 13px; color: #d9e89a; }
.st-selected button { width: 24px; height: 24px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; font-size: 17px; line-height: 1; }
.st-suggest { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; }
.st-suggest::-webkit-scrollbar { display: none; }
.st-suggest button { flex: none; padding: 6px 11px; border: 1px solid var(--st-rule-2); border-radius: 999px; background: transparent; cursor: pointer; font-size: 12.5px; color: #cfd2c6; white-space: nowrap; }
.st-suggest button:hover { border-color: rgba(165,199,21,.6); color: var(--st-ink); }
.st-inputrow { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border-radius: 16px; background: var(--st-panel-2); border: 1px solid var(--st-rule-2); transition: border-color .15s, box-shadow .15s; }
.st-inputrow:focus-within { border-color: rgba(165,199,21,.6); box-shadow: 0 0 0 3px rgba(165,199,21,.15); }
/*
 * min-height fits TWO lines, not one.
 *
 * Measured 2026-09-17: the box was 40px tall and its placeholder needed 62,
 * so the last words of it were cut off at every screen size, desktop included
 * -- "say what to change" showed as "say what to". The placeholder is shorter
 * now as well, but a translation is free to be longer than the English and
 * must not reintroduce the same clipping, so the box has room for a second
 * line before the textarea starts growing on its own.
 */
.st-inputrow textarea { flex: 1; min-width: 0; min-height: 62px; max-height: 140px; padding: 9px 8px; border: 0; outline: 0; resize: none; background: transparent; color: var(--st-ink); font: inherit; font-size: 15px; line-height: 1.45; }
.st-inputrow textarea::placeholder { color: #7d8074; }
.st-mic, .st-send { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 12px; cursor: pointer; flex: none; }
.st-mic { background: rgba(255,255,255,.07); color: var(--st-ink); }
.st-mic[aria-pressed="true"] { background: var(--st-lime); color: var(--st-lime-ink); }
.st-level { position: absolute; inset: -4px; border-radius: 15px; border: 2px solid rgba(165,199,21,.65); opacity: 0; transform: scale(calc(1 + var(--st-level, 0) * .35)); transition: transform .08s linear; pointer-events: none; }
.st-mic[aria-pressed="true"] .st-level { opacity: 1; }
.st-send { background: var(--st-lime); color: var(--st-lime-ink); }
.st-send:disabled { opacity: .4; cursor: default; }

/* ---- Publish dialog ---------------------------------------------------------------- */
.st-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: st-in .2s ease both; }
.st-modal-card { position: relative; width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 26px; border-radius: 22px; background: var(--st-panel-2); border: 1px solid var(--st-rule-2); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); }
.st-modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 22px; color: var(--st-muted); }
.st-modal-x:hover { background: rgba(255,255,255,.06); color: var(--st-ink); }
.st-modal h2 { margin: 0 0 6px; font-size: 22px; letter-spacing: -.02em; }
.st-modal p { margin: 0 0 14px; color: var(--st-muted); font-size: 14.5px; line-height: 1.55; }
.st-domains { display: grid; gap: 8px; margin: 16px 0; }
.st-domain { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--st-rule-2); cursor: pointer; transition: border-color .15s, background .15s; }
.st-domain:hover { border-color: rgba(165,199,21,.45); }
.st-domain input { accent-color: var(--st-lime); width: 18px; height: 18px; }
.st-domain:has(input:checked) { border-color: var(--st-lime); background: rgba(165,199,21,.08); }
.st-domain b { font-size: 15px; }
.st-domain small { display: block; color: var(--st-muted); font-size: 12px; }
.st-check { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 18px; font-size: 14px; color: #cfd2c6; line-height: 1.5; cursor: pointer; }
.st-check input { accent-color: var(--st-lime); width: 18px; height: 18px; margin-top: 2px; flex: none; }
.st-row { display: flex; flex-wrap: wrap; gap: 10px; }
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border: 1px solid var(--st-rule-2); border-radius: 12px; background: transparent; color: var(--st-ink); text-decoration: none; font-weight: 700; font-size: 14.5px; cursor: pointer; }
.st-btn:hover { background: rgba(255,255,255,.05); }
.st-btn.lime { background: var(--st-lime); color: var(--st-lime-ink); border-color: var(--st-lime); }
.st-btn.lime:hover { filter: brightness(1.06); }
.st-btn:disabled { opacity: .45; cursor: default; }
.st-done { text-align: center; }
.st-done .st-big { display: grid; place-items: center; width: 72px; height: 72px; margin: 4px auto 16px; border-radius: 50%; background: var(--st-lime); color: var(--st-lime-ink); box-shadow: var(--st-glow); }
.st-done .st-big svg { width: 34px; height: 34px; }
.st-done a.st-liveurl { display: inline-block; margin: 4px 0 18px; color: var(--st-lime); font-weight: 800; font-size: 18px; text-decoration: none; word-break: break-all; }

/* ---- Tablets: a narrower rail ------------------------------------------------------ */
/*
 * The website's NAME STAYS. It used to be hidden here, which on every iPad --
 * 1080 and 810 wide, landscape and portrait -- left the header showing no name
 * at all; the owner read that as "no website selected", and they were right to,
 * because it is the only thing on the screen that says which site you are
 * editing. It is narrowed and truncated instead, which costs nothing and still
 * answers the question.
 */
@media (max-width: 1100px) {
  .st { --st-rail: 340px; }
  .st-site { max-width: 26vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---- Phones: preview full screen, conversation as a sheet ---------------------------- */
@media (max-width: 760px) {
  .st { --st-top: 54px; }
  .st-top { gap: 8px; padding: 0 8px 0 12px; }
  .st-logo-text, .st-devices, .st-site, [data-undo], [data-redo] { display: none; }
  .st-top-actions { margin-left: auto; }
  .st-main { grid-template-columns: 1fr; position: relative; }
  .st-canvas { padding: 0; }
  .st-browser, .st-browser[data-device] { width: 100%; border-radius: 0; box-shadow: none; }
  .st-chrome { height: 36px; }
  .st-dots { display: none; }
  .st-empty { align-items: start; padding: 32px 20px 220px; }
  .st-bigmic { width: 84px; height: 84px; }
  .st-rail {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; max-height: 76%; border-left: 0; border-radius: 22px 22px 0 0;
    box-shadow: 0 -20px 50px -10px rgba(0,0,0,.6); transition: transform .35s cubic-bezier(.2,.8,.2,1);
    transform: translateY(calc(100% - var(--st-peek, 150px)));
  }
  .st-rail.is-open { transform: none; }
  .st-grab { display: grid; place-items: center; width: 100%; height: 22px; border: 0; background: transparent; cursor: pointer; flex: none; }
  .st-grab i { width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); }
  .st-rail-head { padding: 4px 14px 10px; }
  .st-rail:not(.is-open) .st-log, .st-rail:not(.is-open) .st-suggest { display: none; }
  .st-rail:not(.is-open) .st-rail-head { border-bottom: 0; }
  .st-log { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) { .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; } }