/* ===========================================================
   Builder-Shell — the new central editing surface (Phase 2 prototype).
   Lives alongside the existing sidebar-form builder (js/site-builder.js,
   css/builder.css) without replacing it yet — reachable via
   sites.html?shell=1&template=local-service, one Design Starting Point,
   to prove the interaction model before it takes over everywhere else.
   Operates on the exact same siteState/site_projects row as the old
   builder — same save, same resume, same publish, same data. Only the
   editing surface is new.
   =========================================================== */

.bshell { display: none; }
/* Full-viewport takeover, independent of the surrounding page's own
   layout — confirmed live that just being a flex box in normal flow
   left the site's own header nav, cookie notice, and the my-panel
   "my content" rail (a real, fixed-position, layout-affecting sidebar,
   not just a floating badge — see body.has-sites-rail in style.css)
   all visible and overlapping the Shell instead of actually hidden
   behind it. position:fixed + a z-index above everything else on the
   page is simpler and more robust than hunting down and individually
   hiding each of those elements (and whatever else gets added to the
   page later). */
.bshell.active { display: flex; flex-direction: column; position: fixed; inset: 0; height: 100vh; background: var(--bg); z-index: 5000; }

/* ---------- Top bar (~64px) ----------
   Soft shadow instead of a flat border line, and fully rounded
   controls (device switcher as a pill, primary action as a pill) —
   the "floating toolbar" language the reference mockup's own editor
   chrome uses, instead of the previous flat/square toolbar. */
.bshell-top {
  height: 64px; flex: none; display: flex; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--bg-card, var(--surface)); box-shadow: var(--shadow-sm);
  border-bottom: 1px solid var(--border-color, var(--border));
  position: relative; z-index: 20;
}
.bshell-top-name { font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.bshell-top-status { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.bshell-top-status.saving { color: var(--warning); }
.bshell-top-status.saved { color: var(--success); }
.bshell-top-status.failed { color: var(--error); font-weight: 700; }
.bshell-top-spacer { flex: 1; }
.bshell-device-row { display: flex; gap: 2px; background: var(--bg-main, var(--bg)); border: 1px solid var(--border-color, var(--border)); border-radius: 999px; padding: 3px; }
.bshell-device-btn {
  border: none; background: transparent; width: 34px; height: 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary);
}
.bshell-device-btn.active { background: var(--bg-card, var(--surface)); color: var(--primary-dark); box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.bshell-device-btn svg { width: 17px; height: 17px; }
.bshell-top-btn {
  height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  border: 1px solid var(--border-color, var(--border)); background: var(--bg-card, var(--surface)); color: var(--text); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.bshell-top-btn:hover { border-color: var(--brand-color, var(--primary)); color: var(--primary-dark); }
.bshell-top-btn-primary { background: var(--brand-color, var(--primary)); border-color: var(--brand-color, var(--primary)); color: #fff; font-weight: 700; }
.bshell-top-btn-primary:hover { background: var(--brand-dark, var(--primary-dark)); border-color: var(--brand-dark, var(--primary-dark)); color: #fff; }
.bshell-top-btn:disabled { opacity: .5; cursor: default; }
.bshell-exit-link { color: var(--text-secondary); font-size: 13px; text-decoration: none; white-space: nowrap; }
.bshell-exit-link:hover { color: var(--text); }

/* ---------- AI help popover ---------- */
.bshell-ai-wrap { position: relative; }
.bshell-ai-panel {
  position: absolute; top: 100%; inset-inline-start: 0; margin-top: 8px; width: 280px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px;
  box-shadow: 0 12px 32px rgba(16,24,40,.16); z-index: 40;
}
.bshell-ai-panel[hidden] { display: none; }
.bshell-ai-panel input[type="text"] {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border);
  font-family: inherit; font-size: 13.5px; margin-bottom: 8px;
}
.bshell-ai-hint { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 8px 0; }
.bshell-ai-examples { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.bshell-ai-examples button {
  text-align: start; background: var(--bg); border: 1px solid var(--border); border-radius: 7px;
  padding: 6px 9px; font-size: 12px; color: var(--text-secondary); cursor: pointer; font-family: inherit;
}
.bshell-ai-examples button:hover { border-color: var(--primary); color: var(--primary-dark); }
.bshell-ai-note { font-size: 12.5px; color: var(--text-secondary); margin-top: 10px; line-height: 1.6; }
.bshell-ai-note .bshell-ai-confirm-row { display: flex; gap: 6px; margin-top: 8px; }
.bshell-ai-note .bshell-ai-confirm-row button {
  flex: 1; padding: 7px 0; border-radius: 7px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.bshell-ai-note .bshell-ai-confirm-row .bshell-ai-confirm-yes { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Body: sidebar / canvas / properties ---------- */
.bshell-body { flex: 1; display: flex; min-height: 0; }

/* ---------- Left: Hierarchy sidebar (~280px) ----------
   Rounded "card row" language instead of flat transparent-until-hover
   text rows — each item reads as a light, pill-cornered tile with its
   own soft background by default, the way the reference mockup's own
   block-list panel reads, not just a bare text list. */
.bshell-hier { width: 280px; flex: none; background: var(--bg-card, var(--surface)); border-inline-end: 1px solid var(--border-color, var(--border)); overflow-y: auto; padding: 18px 14px; }
.bshell-hier-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 14px; padding: 0 6px; }
.bshell-settings-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; box-sizing: border-box;
  background: var(--bg-main, var(--bg)); border: 1px solid transparent; cursor: pointer; padding: 11px 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--text-secondary); font-family: inherit;
  margin-bottom: 14px; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bshell-settings-btn:hover { border-color: var(--brand-color, var(--primary)); color: var(--text); }
.bshell-settings-btn.is-selected { background: var(--primary-light); color: var(--primary-dark); }
.bshell-settings-icon { font-size: 15px; }

.bshell-sec { border: none; margin-bottom: 8px; }
.bshell-sec-head {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box; text-align: start;
  background: var(--bg-main, var(--bg)); border: 1px solid transparent; cursor: pointer; padding: 10px 12px; border-radius: 12px;
  font-size: 15px; font-weight: 600; color: var(--text); list-style: none; transition: border-color .15s ease, background .15s ease;
}
.bshell-sec-head::-webkit-details-marker { display: none; }
.bshell-sec-head:hover { border-color: var(--brand-color, var(--primary)); }
.bshell-sec-head.is-selected { background: var(--primary-light); color: var(--primary-dark); }
.bshell-sec-head.is-hidden { opacity: .55; }
.bshell-sec-chevron { width: 9px; height: 9px; flex: none; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; opacity: .55; }
.bshell-sec[open] > .bshell-sec-head .bshell-sec-chevron { transform: rotate(-135deg); }
.bshell-sec-hidden-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; margin-inline-start: auto; }
.bshell-sec-body { padding: 6px 0 2px 14px; display: grid; gap: 4px; }
.bshell-item {
  display: block; width: 100%; box-sizing: border-box; text-align: start; background: var(--bg-main, var(--bg)); border: 1px solid transparent; cursor: pointer;
  padding: 8px 10px; border-radius: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-secondary);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.bshell-item:hover { border-color: var(--brand-color, var(--primary)); color: var(--text); }
.bshell-item.is-selected { background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.bshell-add-item {
  display: block; width: 100%; box-sizing: border-box; text-align: start; background: transparent; border: 1.5px dashed var(--border-color, var(--border));
  cursor: pointer; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; color: var(--primary-dark); margin-top: 4px;
  transition: border-color .15s ease, background .15s ease;
}
.bshell-add-item:hover { border-color: var(--brand-color, var(--primary)); background: var(--primary-light); }

/* ---------- Center: Canvas ---------- */
.bshell-canvas-wrap { flex: 1; min-width: 0; background: var(--bg-main, var(--bg)); overflow: auto; display: flex; justify-content: center; padding: 28px; }
.bshell-canvas-frame-holder { width: 100%; max-width: 1440px; transition: max-width .2s ease; }
.bshell-canvas-frame-holder.device-tablet { max-width: 768px; }
.bshell-canvas-frame-holder.device-mobile { max-width: 390px; }
.bshell-canvas-shadow { background: var(--bg-card, var(--surface)); border-radius: var(--radius-md, 16px); box-shadow: var(--shadow-card, var(--shadow-md, 0 24px 60px rgba(16,24,40,.14))); overflow: hidden; }
.bshell-canvas-iframe { width: 100%; height: calc(100vh - 64px - 56px); border: none; display: block; background: #fff; }

/* ---------- Right: contextual Properties panel (~300px) ---------- */
.bshell-props { width: 300px; flex: none; background: var(--surface); border-inline-start: 1px solid var(--border); overflow-y: auto; padding: 18px 16px; }
.bshell-props-empty { color: var(--text-muted); font-size: 13.5px; text-align: center; padding: 40px 12px; line-height: 1.6; }
.bshell-props-kind { font-size: 11.5px; font-weight: 700; color: var(--primary-dark); background: var(--primary-light); display: inline-block; border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; }
.bshell-props-field { margin-bottom: 16px; }
.bshell-props-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.bshell-props-field input[type="text"], .bshell-props-field textarea, .bshell-props-field select {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border);
  font-family: inherit; font-size: 13.5px; color: var(--text); background: var(--surface);
}
/* 60px (~rows=4's natural height) read as genuinely cramped for actual
   paragraph-length content (a CV summary, an about section) — confirmed
   live: the panel itself has plenty of room below a single field, so
   there's no reason the text box forcing its own internal scrollbar
   should be the thing using that space instead. Still freely resizable
   beyond this for anyone who wants more. */
.bshell-props-field textarea { resize: vertical; min-height: 150px; }
.bshell-props-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bshell-props-field input[type="number"] { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 13.5px; }
.bshell-props-field input[type="color"] { width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; cursor: pointer; background: var(--surface); }
.bshell-settings-group { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.bshell-settings-group:last-child { border-bottom: none; padding-bottom: 0; }
.bshell-settings-group-title { font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.bshell-settings-field-hint { font-size: 11.5px; color: var(--text-muted); margin: -6px 0 10px; line-height: 1.5; }
.bshell-ai-draft-textarea { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--border); font-size: 13px; font-family: inherit; resize: vertical; margin-bottom: 10px; }
/* margin-bottom here (not on .bshell-settings-field-hint's own -6px,
   which was tuned against a form field with its own baked-in bottom
   space, not a zero-margin button row) — without it, the style-picker
   hint directly below this row (builder.html's #cvbshell-style-row)
   sat flush against the buttons' own bottom edge, confirmed live. */
.bshell-align-row { display: flex; gap: 4px; margin-bottom: 8px; }
.bshell-align-btn { flex: 1; padding: 7px 0; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); font-size: 12px; cursor: pointer; }
.bshell-align-btn.active { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
.bshell-props-toolbar { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; }
.bshell-tool-btn {
  flex: 1; min-width: 60px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 4px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text-secondary); font-size: 11px; cursor: pointer;
}
.bshell-tool-btn:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-dark); }
.bshell-tool-btn:disabled { opacity: .35; cursor: default; }
.bshell-tool-btn svg { width: 17px; height: 17px; }
.bshell-props-reset { background: none; border: none; color: var(--error); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.bshell-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bshell-switch { position: relative; width: 38px; height: 22px; flex: none; }
.bshell-switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; }
.bshell-switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background .15s ease; pointer-events: none; }
.bshell-switch input:checked + .bshell-switch-track { background: var(--primary); }
.bshell-switch-thumb { position: absolute; top: 2px; inset-inline-start: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: inset-inline-start .15s ease; box-shadow: 0 1px 3px rgba(0,0,0,.2); pointer-events: none; }
.bshell-switch input:checked ~ .bshell-switch-thumb { inset-inline-start: 18px; }

/* ---------- Mobile: bottom drawer instead of fixed 280px sidebar ----------
   Base rule MUST come before the media query: equal specificity means
   the later rule in source order wins regardless of whether a media
   query matched, so a base .bshell-mobile-tabs{display:none} written
   AFTER this block would permanently beat the media query's
   display:flex, exactly the mistake already found and fixed once this
   session in .ts-row/[hidden] — same cascade trap, not repeating it. */
.bshell-mobile-tabs { display: none; }
@media (max-width: 860px) {
  .bshell-body { position: relative; }
  .bshell-hier, .bshell-props { position: fixed; inset-inline: 0; bottom: 0; top: auto; width: auto; max-height: 60vh;
    border-radius: 16px 16px 0 0; border: 1px solid var(--border); box-shadow: 0 -8px 30px rgba(16,24,40,.15);
    transform: translateY(100%); transition: transform .2s ease; z-index: 30; }
  .bshell-hier.bshell-drawer-open, .bshell-props.bshell-drawer-open { transform: translateY(0); }
  .bshell-canvas-wrap { padding: 14px; }
  .bshell-mobile-tabs { display: flex; gap: 8px; }
  /* Confirmed-live bug this fixes: .bshell-top never wrapped (single
     flex row, fixed 64px height), so on a real phone its action
     buttons — Save, Download PDF, ATS, and (in Invoice) the actual
     "הפקה סופית"/"זיכוי" buttons that issue or correct a real
     document — rendered past the edge of the screen entirely.
     overflow-x:clip on html/body (deskkit-ui.css) means there was no
     scrollbar to reach them with either; they were simply unreachable.
     flex-wrap alone isn't enough on its own — wrapped items fill
     whatever room is left on the CURRENT row first, so name/status/
     spacer/first-button-or-two would share one row and the rest
     spill onto a second — giving an inconsistent split per product
     depending on how many buttons it has. Forcing a break exactly at
     the spacer (flex-basis:100%) instead puts name+status on their
     own first row and every actual action button on its own full-
     width row below, the same way for CV/Quote/Invoice alike. */
  .bshell-top { height: auto; min-height: 64px; flex-wrap: wrap; row-gap: 8px; padding-block: 10px; }
  .bshell-top-spacer { flex: 1 0 100%; height: 0; }
  .bshell-top-name { max-width: none; }
}