/* Bliink UI layer for 66biolinks — mobile visual editor.
   Loaded from public_html/bliink-ui/ via Admin → Settings → Custom → App custom JS.
   Everything is scoped to body.bx (set by app.js only on the bio page editor, phone widths). */

:root{
  --bx-ink:#0D0D10; --bx-paper:#F6F4EF; --bx-cream:#F3EEE4; --bx-amber:#E2913A;
  --bx-line:rgba(13,13,16,.10); --bx-mute:#6E6C67;
  --bx-bar:64px; --bx-top:58px;
  --bx-font:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
}

@media (max-width: 991.98px){

  /* ---------- canvas: the live page fills the screen ---------- */
  body.bx{overflow:hidden;background:var(--bx-paper)}
  body.bx .bx-preview-col{
    position:fixed!important;left:0;right:0;top:var(--bx-top);bottom:var(--bx-bar);z-index:1030;
    margin:0!important;padding:0!important;max-width:none!important;flex:none!important;background:var(--bx-paper)
  }
  body.bx .bx-preview-col > *{height:100%}
  /* 71.x wraps the preview in fixed-width boxes: stretch every layer to the full canvas */
  body.bx .bx-preview-col .biolink-preview-container,
  body.bx .bx-preview-col .biolink-preview{
    width:100%!important;max-width:none!important;height:100%!important;position:static!important;top:auto!important;margin:0!important;padding:0!important
  }
  body.bx .biolink-preview-iframe-container{
    width:100%!important;height:100%!important;max-width:none!important;margin:0!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;background:transparent!important
  }
  body.bx .biolink-preview-iframe-container::before,
  body.bx .biolink-preview-iframe-container::after{display:none!important} /* hide the phone frame */
  body.bx #biolink_preview_iframe{width:100%!important;height:100%!important;border:0!important;border-radius:0!important}

  /* top strip: page name + live link + saved state */
  .bx-topbar{
    position:fixed;left:0;right:0;top:0;height:var(--bx-top);z-index:1040;display:flex;align-items:center;gap:10px;
    padding:0 12px;background:rgba(246,244,239,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--bx-line);font-family:var(--bx-font)
  }
  .bx-topbar .bx-back{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--bx-ink);text-decoration:none;font-size:20px}
  .bx-topbar .bx-title{flex:1;min-width:0;line-height:1.15}
  .bx-topbar .bx-title b{display:block;font-size:15px;font-weight:700;color:var(--bx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bx-topbar .bx-title span{display:block;font-size:12px;color:var(--bx-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bx-topbar .bx-state{font-size:12px;color:var(--bx-mute);display:flex;align-items:center;gap:6px}
  .bx-topbar .bx-state i{width:7px;height:7px;border-radius:50%;background:#2BB673}
  .bx-topbar .bx-state.busy i{background:var(--bx-amber);animation:bxPulse 1s infinite}
  @keyframes bxPulse{50%{opacity:.3}}

  /* tap hint shown once */
  .bx-hint{
    position:fixed;left:50%;bottom:calc(var(--bx-bar) + 14px);transform:translateX(-50%);z-index:1045;
    background:var(--bx-ink);color:#fff;font:500 13px var(--bx-font);padding:9px 14px;border-radius:99px;
    box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:opacity .4s;white-space:nowrap
  }
  .bx-hint.gone{opacity:0;pointer-events:none}

  /* ---------- bottom tab bar ---------- */
  .bx-bar{
    position:fixed;left:0;right:0;bottom:0;height:calc(var(--bx-bar) + env(safe-area-inset-bottom,0px));z-index:1050;
    padding-bottom:env(safe-area-inset-bottom,0px);display:grid;grid-template-columns:repeat(4,1fr);
    background:#fff;border-top:1px solid var(--bx-line);font-family:var(--bx-font)
  }
  .bx-bar button{
    border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--bx-mute);font-size:11px;font-weight:600;letter-spacing:.01em;-webkit-tap-highlight-color:transparent
  }
  .bx-bar button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bx-bar button.on{color:var(--bx-ink)}
  .bx-bar .bx-add span.bx-plus{
    width:44px;height:44px;border-radius:14px;background:var(--bx-ink);color:#fff;display:grid;place-items:center;margin-top:-18px;
    box-shadow:0 8px 20px -8px rgba(0,0,0,.5)
  }
  .bx-bar .bx-add span.bx-plus svg{stroke:#fff}

  /* ---------- bottom sheet (wraps the app's own tab panes) ---------- */
  body.bx .bx-sheet-host{
    position:fixed!important;left:0;right:0;bottom:var(--bx-bar);z-index:1060;max-height:78vh;overflow-y:auto;overscroll-behavior:contain;
    background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -20px 50px -20px rgba(0,0,0,.35);
    padding:26px 14px 18px!important;margin:0!important;transform:translateY(calc(100% + var(--bx-bar) + 24px));transition:transform .38s cubic-bezier(.22,1,.36,1);
    -webkit-overflow-scrolling:touch
  }
  body.bx.bx-sheet-open .bx-sheet-host{transform:none}
  body.bx .bx-sheet-host::before{
    content:"";position:sticky;top:-18px;display:block;width:42px;height:5px;border-radius:99px;background:#d8d5cf;margin:-14px auto 12px;z-index:2
  }
  .bx-shade{position:fixed;inset:0;z-index:1055;background:rgba(13,13,16,.18);opacity:0;pointer-events:none;transition:opacity .3s}
  body.bx.bx-sheet-open .bx-shade{opacity:1;pointer-events:auto}
  .bx-sheet-close{
    position:sticky;top:-14px;z-index:5;width:34px;height:34px;margin:-14px -4px -20px auto;border-radius:50%;
    border:0;background:#f1efea;color:var(--bx-ink);font-size:15px;display:grid;place-items:center
  }
  /* editing one block: shorter sheet so the change stays visible above it */
  body.bx.bx-mode-edit .bx-sheet-host{max-height:60vh}
  /* pop-ups (block picker, confirmations) above the editor chrome */
  body.bx .modal{z-index:1080}
  body.bx .modal-backdrop{z-index:1075}

  /* no "subscribe to updates" pop-up while editing (visitors still get it) */
  body.bx .altumcode-66pusher-widget{display:none!important}

  /* the editor's own header/tabs are replaced by the bars above */
  body.bx .bx-hide{display:none!important}

  /* edit mode: only the tapped block, its form already open */
  body.bx.bx-mode-edit .biolink_block{display:none!important}
  body.bx.bx-mode-edit .biolink_block.bx-sel{display:block!important;border:0!important;box-shadow:none!important;margin:0!important}
  body.bx.bx-mode-edit .biolink_block.bx-sel > .card-body{padding:0!important}

  /* list mode: compact rows, big drag handles for thumbs */
  body.bx.bx-mode-list .biolink_block{margin-bottom:8px!important;border-radius:14px!important;border:1px solid var(--bx-line)!important;box-shadow:none!important}
  body.bx.bx-mode-list .biolink_block > .card-body{padding:10px 12px!important}
  body.bx .biolink_block .drag{font-size:18px!important;padding:12px 10px!important;margin:-12px 0 -12px -10px;touch-action:none}

  /* forms inside the sheet: thumb-sized controls */
  body.bx .bx-sheet-host .form-control,
  body.bx .bx-sheet-host .custom-select{min-height:46px;font-size:16px!important;border-radius:12px} /* 16px stops iOS zoom */
  body.bx .bx-sheet-host label{font-weight:600;font-size:13px}
  body.bx .bx-sheet-host .btn{min-height:46px;border-radius:12px}
  body.bx .bx-sheet-host .btn-primary{background:var(--bx-ink);border-color:var(--bx-ink)}
  body.bx .bx-sheet-host [type=submit]{position:sticky;bottom:-18px;z-index:3;box-shadow:0 -10px 20px 6px #fff}

  /* ---------- "Add a block" picker as a full-height sheet with a grid ---------- */
  body.bx .modal.bx-picker .modal-dialog{margin:0;max-width:none;height:100%;display:flex;align-items:flex-end}
  body.bx .modal.bx-picker .modal-content{border:0;border-radius:20px 20px 0 0;max-height:88vh;overflow:hidden;display:flex;flex-direction:column}
  body.bx .modal.bx-picker .modal-body{overflow-y:auto;padding:12px 14px 24px}
  body.bx .modal.bx-picker .modal-body .row{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0!important}
  body.bx .modal.bx-picker .modal-body .row > [class*=col]{max-width:none!important;padding:0!important;flex:none!important;width:auto!important}
  body.bx .modal.bx-picker .modal-body .row button,
  body.bx .modal.bx-picker .modal-body .row a.btn{
    width:100%;min-height:84px;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;
    border-radius:14px;font-size:12px;line-height:1.2;text-align:center;white-space:normal;padding:10px 6px!important
  }
  body.bx .modal.bx-picker .modal-body .row button i,
  body.bx .modal.bx-picker .modal-body .row a.btn i{font-size:20px;margin:0!important}
}

/* ================= desktop editor (≥992px): panel left, big live page right ================= */
@media (min-width: 992px){
  body.bx-d .bx-d-editor{flex:0 0 54%;max-width:54%}
  body.bx-d .bx-d-preview{flex:0 0 46%;max-width:46%;margin-top:0!important}
  body.bx-d .bx-d-preview .biolink-preview,
  body.bx-d .bx-d-preview .biolink-preview.sticky{position:sticky!important;top:18px!important}
  body.bx-d .bx-d-preview .biolink-preview-iframe-container{
    height:calc(100vh - 60px)!important;max-height:860px;margin:0 auto!important
  }
  body.bx-d #biolink_preview_iframe{height:100%!important}

  /* Blocks / Design switch + save chip */
  body.bx-d .bx-d-editor .nav-pills,
  body.bx-d .bx-d-editor ul.nav{background:#efede8;border-radius:12px;padding:4px;display:inline-flex;gap:2px}
  body.bx-d .bx-d-editor .nav-pills .nav-link,
  body.bx-d .bx-d-editor ul.nav .nav-link{border-radius:9px;font-weight:600;padding:.45rem 1rem;color:var(--bx-mute);background:transparent}
  body.bx-d .bx-d-editor .nav-pills .nav-link.active,
  body.bx-d .bx-d-editor ul.nav .nav-link.active{background:#fff;color:var(--bx-ink);box-shadow:0 1px 3px rgba(0,0,0,.08)}
  .bx-d-state{display:inline-flex;align-items:center;gap:6px;margin-left:12px;font-size:12.5px;color:var(--bx-mute);vertical-align:middle}
  .bx-d-state i{width:7px;height:7px;border-radius:50%;background:#2BB673}
  .bx-d-state.busy i{background:var(--bx-amber);animation:bxPulse 1s infinite}

  /* block rows: calmer cards, clear hover + selected states */
  body.bx-d .biolink_block{border:1px solid var(--bx-line)!important;border-radius:14px!important;box-shadow:none!important;margin-bottom:10px!important;transition:border-color .2s,box-shadow .2s}
  body.bx-d .biolink_block:hover{border-color:rgba(13,13,16,.22)!important}
  body.bx-d .biolink_block > .card-body{padding:12px 16px!important}
  body.bx-d .biolink_block.bx-sel{border-color:var(--bx-amber)!important;box-shadow:0 0 0 3px rgba(226,145,58,.15)!important}

  /* one block selected from the preview: show only it, with a way back */
  .bx-d-back{display:none;border:0;background:none;padding:6px 0 12px;font-weight:600;font-size:14px;color:var(--bx-ink);cursor:pointer}
  .bx-d-back:hover{color:var(--bx-amber)}
  body.bx-d.bx-d-edit .bx-d-back{display:inline-flex;gap:6px;align-items:center}
  body.bx-d.bx-d-edit .biolink_block:not(.bx-sel){display:none!important}

  /* roomier, friendlier form controls inside block settings */
  body.bx-d .biolink_block .form-control,
  body.bx-d .biolink_block .custom-select{border-radius:10px;min-height:42px}
  body.bx-d .biolink_block .btn{border-radius:10px}
  body.bx-d .biolink_block [type=submit].btn-primary{background:var(--bx-ink);border-color:var(--bx-ink);min-height:44px}
}

/* ================= whole app on phones (body.bxm: every logged-in page except the editor) ================= */
@media (max-width: 991.98px){
  body.bxm{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  body.bxm .altumcode-66pusher-widget{display:none!important}

  /* bottom app bar */
  .bxm-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:1040;height:calc(64px + env(safe-area-inset-bottom,0px));
    padding-bottom:env(safe-area-inset-bottom,0px);display:grid;grid-template-columns:repeat(5,1fr);
    background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--bx-line);font-family:var(--bx-font)
  }
  .bxm-nav a,.bxm-nav button{
    border:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--bx-mute);font-size:11px;font-weight:600;text-decoration:none;-webkit-tap-highlight-color:transparent
  }
  .bxm-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .bxm-nav .on{color:var(--bx-ink)}
  .bxm-nav .bxm-create span{
    width:44px;height:44px;border-radius:14px;background:var(--bx-ink);display:grid;place-items:center;margin-top:-18px;
    box-shadow:0 8px 20px -8px rgba(0,0,0,.5)
  }
  .bxm-nav .bxm-create svg{stroke:#fff}

  /* tables → cards: name on top, counter left, actions right */
  body.bxm .table-responsive{overflow:visible!important}
  body.bxm .table-custom{min-width:0!important;width:100%!important;border-collapse:separate}
  body.bxm .table-custom thead{display:none}
  body.bxm .table-custom tbody tr{
    display:flex!important;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 14px;border-bottom:1px solid var(--bx-line)
  }
  body.bxm .table-custom tbody td{display:block;border:0!important;padding:0!important;white-space:normal!important;min-width:0}
  body.bxm .table-custom tbody td.d-none{display:none!important}
  body.bxm .table-custom tbody td:nth-child(2){flex:1 1 100%}
  body.bxm .table-custom tbody td:nth-child(2) .text-truncate,
  body.bxm .table-custom tbody td:nth-child(2) a{max-width:calc(100vw - 110px)}
  body.bxm .table-custom tbody td.text-muted:not(:last-child){display:none!important}   /* date icons */
  body.bxm .table-custom tbody td:last-child{margin-left:auto}
  body.bxm .table-custom tbody td:last-child > *{display:inline-flex;align-items:center;gap:6px}
  body.bxm .table-custom .custom-switch,
  body.bxm .table-custom .dropdown-toggle,
  body.bxm .table-custom .btn{min-width:40px;min-height:40px}

  /* dashboard counters: two per row, compact */
  body.bxm .col-12.col-sm-6.col-xl-4.p-2{flex:0 0 50%;max-width:50%;padding:5px!important}
  body.bxm .col-12.col-sm-6.col-xl-4.p-2 .card-body{padding:12px!important}
  body.bxm .col-12.col-sm-6.col-xl-4.p-2 .card-body *{font-size:13px}

  /* statistics tabs: one swipeable row of chips instead of a wall of buttons */
  body.bxm .bxm-chips{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:6px;margin:0 -16px!important;padding:2px 16px 8px!important;scrollbar-width:none}
  body.bxm .bxm-chips::-webkit-scrollbar{display:none}
  body.bxm .bxm-chips > *{flex:0 0 auto!important;max-width:none!important;width:auto!important;padding:0!important;margin:0!important}
  body.bxm .bxm-chips .btn,body.bxm .bxm-chips a{white-space:nowrap;border-radius:99px!important;padding:.45rem .9rem!important;font-size:13px}

  /* thumb-sized controls + no iOS zoom on inputs */
  body.bxm .btn{min-height:42px}
  body.bxm .form-control,body.bxm .custom-select{min-height:44px;font-size:16px!important;border-radius:12px}
  body.bxm img.bxm-broken{display:none!important}
}

/* ================= Bliink blocks: picker section + form dialog (editor) ================= */
.bxe-pick{margin:4px 0 18px;padding:14px;border-radius:16px;background:linear-gradient(135deg,#fff7ec,#f3eefe);border:1px solid rgba(226,145,58,.25)}
.bxe-pick-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.bxe-pick-head b{font-size:15px}
.bxe-pick-head span{font-size:12px;color:var(--bx-mute)}
.bxe-pick-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bxe-pick-grid button{border:1px solid rgba(13,13,16,.08);background:#fff;border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;cursor:pointer;transition:transform .15s,border-color .15s}
.bxe-pick-grid button:hover{transform:translateY(-1px);border-color:var(--bx-amber)}
.bxe-pick-grid i{font-style:normal;font-size:22px;line-height:1}
.bxe-pick-grid b{font-size:12.5px}
.bxe-pick-grid small{font-size:10.5px;color:var(--bx-mute);line-height:1.25}
@media (min-width:768px){.bxe-pick-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}

.bxe{position:fixed;inset:0;z-index:1095;display:flex;align-items:flex-end;justify-content:center}
.bxe-shade{position:absolute;inset:0;background:rgba(13,13,16,.4)}
.bxe-box{position:relative;width:100%;max-width:560px;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -20px 60px -20px rgba(0,0,0,.4);font-family:var(--bx-font)}
@media (min-width:768px){.bxe{align-items:center}.bxe-box{border-radius:20px;max-height:84vh}}
.bxe-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--bx-line)}
.bxe-head b{font-size:16px}
.bxe-x{border:0;background:#f1efea;width:34px;height:34px;border-radius:50%;cursor:pointer}
.bxe-body{overflow-y:auto;padding:14px 18px;display:grid;gap:12px}
.bxe-field{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--bx-ink);margin:0}
.bxe-field input,.bxe-field textarea,.bxe-field select{font:400 16px var(--bx-font);padding:10px 12px;border:1px solid rgba(13,13,16,.15);border-radius:12px;min-height:44px;width:100%;background:#fff}
.bxe-field textarea{min-height:80px;resize:vertical}
.bxe-field input:focus,.bxe-field textarea:focus,.bxe-field select:focus{outline:2px solid var(--bx-amber);outline-offset:0;border-color:transparent}
.bxe-list{border:0;padding:0;margin:0;display:grid;gap:8px}
.bxe-list legend{font-size:13px;font-weight:700;margin-bottom:4px}
.bxe-rows{display:grid;gap:8px}
.bxe-row{border:1px solid var(--bx-line);border-radius:14px;padding:10px;display:grid;gap:8px;background:#fbfaf7}
.bxe-row-tools{display:flex;gap:6px;justify-content:flex-end}
.bxe-row-tools button{border:1px solid var(--bx-line);background:#fff;border-radius:9px;min-width:36px;height:32px;font-size:13px;cursor:pointer}
.bxe-row-tools .bxe-del{color:#b42318}
.bxe-add{border:1px dashed rgba(13,13,16,.25);background:none;border-radius:12px;padding:10px;font-weight:600;cursor:pointer}
.bxe-foot{display:flex;align-items:center;gap:12px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bx-line)}
.bxe-err{flex:1;color:#b42318;font-size:13px}
.bxe-save{border:0;background:var(--bx-ink);color:#fff;font-weight:700;border-radius:12px;padding:0 22px;min-height:46px;cursor:pointer}
.bxe-save:disabled{opacity:.6}