/* ---------- top bar ---------- */
header.top{position:fixed;top:0;left:0;right:0;z-index:800;display:flex;
  align-items:center;justify-content:space-between;
  padding:6px 12px;background:transparent;pointer-events:none}
header.top .top-actions,header.top .corner-brand{pointer-events:auto}
.top-actions{display:flex;gap:6px}
.top-actions .btn{padding:5px 10px;font-size:12px}
.corner-brand{font-family:var(--display);font-size:11px;font-weight:600;
  color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.corner-brand b{color:var(--accent)}

/* Autosave status (src/services/cloud-project.js) — empty/invisible until
   a cloud project is open and something has actually changed. */
.save-status{font-size:11.5px;font-weight:600;color:var(--t-muted,var(--muted));white-space:nowrap;min-height:1em}
.save-status-pending{color:var(--t-muted,var(--muted))}
.save-status-saving{color:var(--t-accent,var(--accent))}
.save-status-ok{color:var(--t-accent-d,var(--accent))}
.save-status-error{color:var(--t-danger,#e0364f)}

/* ---------- layout ---------- */
main{flex:1;display:grid;grid-template-columns:320px 1fr 360px;min-height:0;min-width:0}
.col{overflow-y:auto;padding:16px}
.col.left{border-left:1px solid var(--t-line,var(--border));background:var(--t-bg,var(--bg))}
.col.right{border-right:1px solid var(--t-line,var(--border));background:var(--t-bg,var(--bg))}
.stage{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;
  background-image:linear-gradient(#eef0f4 1px,transparent 1px),linear-gradient(90deg,#eef0f4 1px,transparent 1px);
  background-size:38px 38px;position:relative;min-height:0;min-width:0;overflow:auto;padding:24px}

.island{background:var(--t-card,var(--card));border:1px solid var(--t-line,var(--border));
  border-radius:var(--t-radius-lg,16px);box-shadow:var(--t-shadow-sm);padding:14px;margin-bottom:16px}
.island h3{font-family:var(--t-font-display,var(--display));font-size:13px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;display:flex;align-items:center;gap:9px;margin-bottom:13px}
.island h3 .ic{width:28px;height:28px;border-radius:var(--t-radius-sm,8px);display:grid;place-items:center;color:#fff}
.lab{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--t-muted,var(--muted));margin-bottom:6px}
.field{margin-bottom:14px}.field:last-child{margin-bottom:0}
.ctl{width:100%;border:1.5px solid var(--t-line,var(--soft));background:var(--t-card,#fff);border-radius:var(--t-radius-md,10px);padding:10px 11px;
  font-size:14px;color:var(--t-ink,var(--ink));transition:border-color .1s,box-shadow .1s;font-family:inherit}
.ctl:focus{outline:none;border-color:var(--t-accent,var(--accent));box-shadow:var(--t-shadow-focus)}
select.ctl{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8fa0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:left 11px center;padding-left:30px;cursor:pointer}
textarea.ctl{resize:vertical;min-height:46px;line-height:1.4}
.seg{display:flex;gap:6px}
.seg button{flex:1;border:1.5px solid var(--t-line,var(--soft));background:var(--t-card,#fff);border-radius:var(--t-radius-md,10px);padding:10px;
  font-size:13px;font-weight:600;color:var(--t-sub,var(--muted));display:flex;align-items:center;justify-content:center;gap:6px;
  cursor:pointer;transition:all .1s}
.seg button.on{border-color:var(--t-accent,var(--accent));background:var(--t-accent-soft,rgba(31,122,77,.08));color:var(--t-accent-d,var(--accent))}
.seg button svg{width:15px;height:15px}
.row2{display:flex;gap:8px}.row2>*{flex:1}
.toggle-row{display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--t-line,var(--soft));
  border-radius:var(--t-radius-md,10px);padding:10px 11px;font-size:13px;font-weight:600;margin-bottom:10px}
.sw{position:relative;width:42px;height:24px;border-radius:var(--t-radius-pill,99px);background:#d7dae0;border:none;flex:none;cursor:pointer;transition:background .15s}
.sw.on{background:var(--t-gradient,var(--accent))}
.sw i{position:absolute;top:2px;right:2px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.sw.on i{transform:translateX(-18px)}
.sw:focus-visible{outline:none;box-shadow:var(--t-shadow-focus)}
.avatar-pick{display:flex;align-items:center;gap:12px}
.av{width:58px;height:58px;border-radius:50%;border:2px solid var(--t-line,var(--soft));overflow:hidden;flex:none;
  background:#d7dde2 center/cover no-repeat;display:grid;place-items:center;cursor:pointer;position:relative}
.av svg{width:34px;height:34px;fill:#8a96a0}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-top:8px}
.swatches button{aspect-ratio:1;border-radius:var(--t-radius-sm,8px);border:2px solid var(--t-line,var(--soft));cursor:pointer}
.gallery-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.gslot{aspect-ratio:1;border:2px dashed var(--t-line,var(--soft));border-radius:var(--t-radius-md,10px);display:grid;place-items:center;
  font-size:24px;font-weight:300;color:var(--t-muted,var(--muted));cursor:pointer;position:relative;overflow:hidden;
  background:#fff center/cover no-repeat;transition:border-color .1s}
.gslot:hover{border-color:var(--t-accent)}
.gslot.filled{border-style:solid;border-color:var(--t-accent,var(--accent));font-size:0}
.gslot-x{position:absolute;top:3px;right:3px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1;display:grid;place-items:center;cursor:pointer}
.hint{font-size:11px;color:var(--t-muted,var(--muted));line-height:1.5;margin-top:8px;
  border:1.5px dashed var(--t-line,var(--soft));border-radius:var(--t-radius-md,9px);padding:8px 10px}

/* ---------- mobile step tabs (שיחה / תצוגה / וידאו) ---------- */
#mobileTabs{display:none}
#mobileStickyBar{display:none}

/* All mobile-breakpoint rules are scoped with body:not(.vrecording):not(.admin-record-mode):
   the headless capture tab (render/video.js) sets its CDP viewport to
   the EXPORT resolution, which for a portrait export (e.g. 480x1008) is
   narrower than this 1080px breakpoint — without this guard, the mobile
   single-tab layout would activate mid-capture and push #device off its
   expected (0,0) position (measured: geometry check failure, device at
   y=3179 instead of 0). CAPTURE_CSS's own !important rules in
   render/video.js are the primary guard; this is what makes the mobile
   rules never fire in the first place, which is more robust than trying
   to out-specificity them after the fact.

   :not(.admin-record-mode) added for the identical reason, found the
   same way: an admin recording in a narrow/portrait browser window (very
   much the normal case — that's the shape of the video being recorded)
   is well under 1080px, and without this exclusion
   [data-mobile-tab="chat"] .stage{display:none!important} below made the
   ENTIRE phone (and the Recording Mode transport bar, both living inside
   .stage) vanish completely. Recording Mode (src/services/order-
   snapshot-boot.js) has its own deliberately non-responsive, non-tabbed
   fixed layout (see video.css) that this mobile system should never
   touch, same as vrecording. */
@media (max-width:1080px){
  /* On desktop header.top is fixed so it can float over .stage without
     taking grid space; on mobile there's a single column and nothing for
     it to float over, so let it flow normally — otherwise it sits at
     y:0 and visually covers the (also top-of-page) tab bar underneath it. */
  body:not(.vrecording):not(.admin-record-mode) header.top{position:static;background:var(--t-bg,var(--bg));flex-wrap:wrap;padding:8px 10px;row-gap:6px}
  body:not(.vrecording):not(.admin-record-mode) header.top .top-actions{flex-wrap:wrap;row-gap:6px}
  body:not(.vrecording):not(.admin-record-mode) header.top .btn{padding:6px 8px;font-size:11px}
  body:not(.vrecording):not(.admin-record-mode) header.top .btn svg{width:14px;height:14px}

  body:not(.vrecording):not(.admin-record-mode) main{grid-template-columns:1fr;overflow-y:auto;padding-bottom:72px}
  body:not(.vrecording):not(.admin-record-mode) .col{overflow:visible}
  body:not(.vrecording):not(.admin-record-mode) .stage{order:0;min-height:calc(100dvh - 128px);padding:18px}
  body:not(.vrecording):not(.admin-record-mode) .col.left,body:not(.vrecording):not(.admin-record-mode) .col.right{border:none;order:0}
  body:not(.vrecording):not(.admin-record-mode) .col.left{order:-1}

  #mobileTabs,#mobileStickyBar{display:none}
  body:not(.vrecording):not(.admin-record-mode) #mobileTabs{display:flex;position:sticky;top:0;z-index:50;background:var(--t-card,#fff);
    border-bottom:1px solid var(--t-line);padding:6px 10px;gap:6px}
  #mobileTabs button{flex:1;border:none;background:transparent;padding:9px 4px;border-radius:var(--t-radius-md);
    font-size:13px;font-weight:700;color:var(--t-muted);cursor:pointer;transition:all .15s}
  #mobileTabs button.on{background:var(--t-accent-soft);color:var(--t-accent-d)}

  body:not(.vrecording):not(.admin-record-mode) #mobileStickyBar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:900;
    padding:10px 14px;background:var(--t-card,#fff);border-top:1px solid var(--t-line);
    box-shadow:0 -4px 16px rgba(16,24,40,.08);padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  #mobileStickyBar button{width:100%}

  /* Show only the section matching the active tab */
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="chat"] .stage,
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="chat"] #vpanel.col.right{display:none!important}
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="preview"] .col.left,
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="preview"] #vpanel.col.right{display:none!important}
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="video"] .col.left,
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="video"] .stage{display:none!important}

  /* The video tab already ends in its own generate button (#vGenBtn) —
     a second, identical sticky CTA below it would be redundant clutter
     rather than a "next step" prompt, so skip it only on this tab. */
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="video"] #mobileStickyBar{display:none!important}
  body:not(.vrecording):not(.admin-record-mode)[data-mobile-tab="video"] main{padding-bottom:16px}
}

/* Legacy-aspect migration prompt (shown when an old 393×856 project is opened) */
.aspect-migrate{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:9500;
  display:flex;align-items:center;gap:10px;background:var(--t-card,var(--card));border:1px solid var(--t-line,var(--border));
  border-radius:var(--t-radius-lg,14px);padding:11px 14px;font-size:13px;font-weight:600;
  box-shadow:var(--t-shadow-lg);max-width:min(680px,92vw);flex-wrap:wrap}
.aspect-migrate .btn{padding:6px 11px;font-size:12px}