/* #region shell_frame: THE KIT'S 412 PX MOCKUP FRAME MADE REAL — full height, scrolling canvas, safe areas [Layout Layer] */
  html, body { height: 100%; }
  body { background: #1b1d21; }
  .vmb-app { width: 100%; max-width: 480px; height: 100vh; height: 100dvh; margin: 0 auto; }
  .vmb-canvas { overflow-y: auto; overscroll-behavior: contain; padding-bottom: 14px; scroll-behavior: smooth; }
  .pa-assist { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  @media (min-width: 900px) {
    .vmb-app { max-width: 760px; box-shadow: 0 0 0 1px #2b2e33; }
    .vmb-canvas { padding: 16px 20px 14px; }
  }
/* #endregion */
/* #region top_bar: BRAND ROW, ROLE CHIP, ROLE MENU [UI Layer] */
  .vmb-brandrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .vmb-role { background: #2b2e33; color: #5bc0de; border: 0; font: inherit; font-size: 10.5px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; }
  .vmb-role::after { content: " ▾"; color: #8a929b; }
  .vmb-rolemenu { position: absolute; top: 50px; left: 12px; z-index: 10; background: #fff; border-radius: 12px; box-shadow: var(--pa-shadow); padding: 6px; min-width: 180px; }
  .vmb-rolemenu button { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 14px; padding: 10px 12px; border-radius: 8px; cursor: pointer; }
  .vmb-rolemenu button.on { background: var(--pa-blue-soft); color: var(--pa-blue); font-weight: 700; }
  .vmb-rolemenu .sep { border-top: 1px solid var(--pa-line); margin: 4px 0; }
/* #endregion */
/* #region assistant_bar: REAL INPUT IN THE KIT'S FIELD SHAPE, MIC TURNS INTO SEND WHEN THERE IS TEXT [UI Layer] */
  .vmb-chips { overflow-x: auto; scrollbar-width: none; }
  .vmb-chips::-webkit-scrollbar { display: none; }
  .pa-chip { cursor: pointer; font: inherit; font-size: 12.5px; }
  .vmb-field { color: var(--pa-ink); font: inherit; font-size: 15px; outline: none; }
  .vmb-field::placeholder { color: var(--pa-muted); }
  .pa-mic { border: 0; cursor: pointer; flex: 0 0 52px; }
  .pa-mic .ic-send { display: none; }
  .vmb-app.has-text .pa-mic .ic-mic { display: none; }
  .vmb-app.has-text .pa-mic .ic-send { display: block; }
  .vmb-app.busy .pa-mic { opacity: .5; }
/* #endregion */
/* #region thread: REPLIES, BUBBLES, COLLAPSED CARDS, TYPING DOTS, ERRORS [Content Layer] */
  .vmb-turn { display: flex; flex-direction: column; gap: 10px; }
  .pa-reply p { margin: 0 0 6px; }
  .pa-reply p:last-child { margin-bottom: 0; }
  .vmb-done { align-self: flex-start; font-size: 12.5px; color: var(--pa-muted); background: #e4e6e9; border-radius: 8px; padding: 6px 10px; }
  .vmb-dots { display: inline-flex; gap: 4px; padding: 6px 2px; }
  .vmb-dots i { width: 6px; height: 6px; border-radius: 50%; background: #9aa1a9; animation: vmb-blink 1.2s infinite; }
  .vmb-dots i:nth-child(2) { animation-delay: .2s; } .vmb-dots i:nth-child(3) { animation-delay: .4s; }
  @keyframes vmb-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
  .vmb-error { font-size: 13px; color: #a33a1c; background: #fde4dc; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
  .pa-reply .vmb-error { margin-top: 6px; }
/* #endregion */
/* #region cards_in_app: BUTTONS, INPUTS AND PRODUCT IMAGES ON TOP OF THE KIT [UI Layer] */
  .vmb-card .pa-btn { cursor: pointer; }
  .vmb-card .pa-btn:disabled { opacity: .55; cursor: default; }
  .vmb-input { width: 100%; font: inherit; font-size: 14px; color: var(--pa-ink); outline: none; }
  .vmb-input:focus { border-color: var(--pa-orange); box-shadow: 0 0 0 3px rgba(91,192,222,.2); }
  .vmb-pick span { cursor: pointer; }
  .vmb-pick span.on { background: var(--pa-blue-soft); border-color: #c7dbee; color: var(--pa-blue); }
  .vmb-products li { cursor: pointer; }
  .vmb-products li:active { background: #f6f7f8; }
  .vmb-thumb { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; background: #f3f4f6; object-fit: contain; }
  .vmb-thumb-none { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #9aa1a9; }
  .vmb-photo { background: #f6f7f8; display: flex; justify-content: center; padding: 10px; margin: 0 14px 10px; border-radius: 10px; }
  .vmb-photo img { max-width: 100%; max-height: 220px; object-fit: contain; }
  .vmb-srcline { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11.5px; color: var(--pa-muted); margin-top: 8px; }
  .vmb-srcline .pa-src { margin-left: 4px; }
/* #endregion */
/* #region photo_cards: STAGE WITH OVERLAYS, REMOVAL BOXES, CORNER DOTS AND HANDLES [UI Layer] */
  .vmb-stage { position: relative; margin: 0 14px 10px; border-radius: 10px; overflow: hidden; background: #f6f7f8; touch-action: none; user-select: none; }
  .vmb-stage img { display: block; width: 100%; height: auto; }
  .vmb-box { position: absolute; border: 2px dashed #9aa1a9; border-radius: 3px; box-sizing: border-box; }
  .vmb-box.on { border: 2px solid var(--pa-danger, #d9534f); background: rgba(217, 83, 79, .18); }
  .vmb-box.brand { border-color: #5cb85c; }
  .vmb-box i { position: absolute; top: -1px; left: -1px; font: 700 9px/1 inherit; font-style: normal; background: #111; color: #fff; padding: 2px 3px; border-radius: 0 0 4px 0; }
  .vmb-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #5bc0de; box-shadow: 0 0 0 2px #fff; }
  .vmb-maskrow .pa-toggle { cursor: pointer; }
  .vmb-quad { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
  .vmb-quad polygon { fill: rgba(91, 192, 222, .15); stroke: #5bc0de; stroke-width: 3; vector-effect: non-scaling-stroke; }
  .vmb-handle { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(17, 17, 17, .78); border: 2px solid #5bc0de; cursor: grab; touch-action: none; display: flex; align-items: center; justify-content: center; }
  .vmb-handle i { font: 700 10px/1 inherit; font-style: normal; color: #fff; }
  .vmb-wh { display: flex; align-items: center; gap: 6px; }
  .vmb-wh input { width: 74px; }
/* #endregion */
/* #region before_after: TWO IMAGES, ONE DIVIDER, A RANGE INPUT OVER THE WHOLE IMAGE [UI Layer] */
  .vmb-ba { position: relative; margin: 0 14px 10px; border-radius: 10px; overflow: hidden; background: #111; }
  .vmb-ba img { display: block; width: 100%; height: auto; }
  .vmb-ba img.b { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
  .vmb-ba .bar { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .5); pointer-events: none; }
  .vmb-ba .lb { position: absolute; top: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .55); padding: 3px 7px; border-radius: 6px; pointer-events: none; }
  .vmb-ba .lb.l { left: 8px; }
  .vmb-ba .lb.r { right: 8px; }
  .vmb-ba input[type=range] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
/* #endregion */
/* #region quote_cards: STATUS, FLAGS, NON-BINDING NOTICE, SMALL REF LINES, PROGRESS [UI Layer] */
  .vmb-ref { display: block; font-size: 11px; color: var(--pa-muted); font-weight: 400; margin-top: 1px; }
  .vmb-sub { margin: 6px 0 2px; }
  .vmb-status { text-transform: capitalize; }
  .vmb-status.s-pending_approval { color: #f0ad4e; }
  .vmb-status.s-approved, .vmb-status.s-sent { color: #5cb85c; }
  .vmb-flag { font-size: 12.5px; color: #8a5a00; background: #fcf3e3; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
  .vmb-nb { font-size: 12.5px; font-weight: 700; color: #31708f; background: #d9edf7; border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
  .vmb-srcline a.pa-btn { text-decoration: none; }
  .vmb-running { height: 6px; border-radius: 3px; background: #e9ecef; overflow: hidden; }
  .vmb-running i { display: block; height: 100%; width: 35%; background: #5bc0de; border-radius: 3px; animation: vmb-run 1.4s ease-in-out infinite; }
  @keyframes vmb-run { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
/* #endregion */