/* Borangly UX Phase 3 — smart, calm, collision-free */
:root{
  --b3-ink:#171717;--b3-muted:#6f6f67;--b3-line:#e5e5df;--b3-soft:#f6f6f2;--b3-card:#fff;
  --b3-ai:#5b4ff7;--b3-ai-soft:#f1efff;--b3-good:#23855a;--b3-radius:14px;
}

/* Prevent action collisions globally */
.page-head,.builder-head,.builder-actions,.card-head,.integration-head{min-width:0}
.page-head>*,.builder-head>*,.builder-actions>*{min-width:0}
button{max-width:100%}
.builder-head{display:grid!important;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:12px}
.builder-title{min-width:0!important;justify-content:center!important;overflow:hidden}
.builder-title input{min-width:0!important;width:min(100%,420px)!important;text-overflow:ellipsis}
.builder-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;flex-wrap:nowrap!important;white-space:nowrap}
.builder-actions button{flex:0 0 auto}
.tabs{overflow-x:auto!important;overflow-y:hidden;scrollbar-width:none;white-space:nowrap;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto}
.modal{max-height:min(88vh,820px)!important;overflow:auto!important;overscroll-behavior:contain}

/* Smart primary create action */
.b3-ai-launch{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid #dcd8ff;background:var(--b3-ai-soft);color:#4036d8;border-radius:10px;padding:10px 14px;font-weight:780;line-height:1;white-space:nowrap}
.b3-ai-launch:hover{background:#e9e6ff;border-color:#cbc5ff}
.b3-ai-launch svg{width:16px;height:16px;flex:0 0 16px}
.b3-page-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Create hub replaces duplicate creation surfaces */
.b3-create-hub{display:grid;gap:16px;margin-top:10px}
.b3-create-hero{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(180px,.55fr);gap:12px}
.b3-create-card{appearance:none;width:100%;min-height:116px;text-align:left;border:1px solid var(--b3-line);border-radius:16px;background:var(--b3-card);padding:17px;display:flex;gap:13px;align-items:flex-start;color:var(--b3-ink);transition:border-color .16s,box-shadow .16s,transform .16s}
.b3-create-card:hover{border-color:#cccac2;box-shadow:0 8px 28px rgba(0,0,0,.055);transform:translateY(-1px)}
.b3-create-card.ai{border-color:#d8d4ff;background:linear-gradient(145deg,#fbfaff,#f4f2ff)}
.b3-create-card.ai:hover{border-color:#bab3ff;box-shadow:0 9px 30px rgba(91,79,247,.10)}
.b3-create-icon{width:36px;height:36px;border-radius:10px;background:#f0f0eb;display:grid;place-items:center;flex:0 0 36px}
.b3-create-card.ai .b3-create-icon{background:#e9e6ff;color:#4a3ee5}
.b3-create-icon svg{width:18px;height:18px}
.b3-create-copy{display:grid;gap:5px;min-width:0}
.b3-create-copy strong{font-size:15px;letter-spacing:-.015em}
.b3-create-copy span{font-size:12px;color:var(--b3-muted);line-height:1.45}
.b3-create-copy em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#5145e5;margin-top:3px}

.b3-template-strip{border-top:1px solid var(--b3-line);padding-top:14px}
.b3-template-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.b3-template-head strong{font-size:12px}.b3-template-head span{font-size:11px;color:var(--b3-muted)}
.b3-template-chips{display:flex;gap:7px;flex-wrap:wrap}
.b3-template-chip{border:1px solid var(--b3-line);background:#fafaf8;border-radius:999px;padding:8px 11px;font-size:11px;font-weight:700;color:#55554f;display:inline-flex;align-items:center;gap:6px}
.b3-template-chip:hover{background:#f0f0eb;color:var(--b3-ink)}

/* AI Compose */
.b3-compose{display:grid;gap:14px;margin-top:14px;border-top:1px solid var(--b3-line);padding-top:16px}
.b3-compose-head{display:flex;align-items:center;gap:10px}
.b3-ai-mark{width:34px;height:34px;border-radius:10px;background:var(--b3-ai-soft);color:#4a3ee5;display:grid;place-items:center;flex:0 0 34px}
.b3-ai-mark svg{width:17px;height:17px}
.b3-compose-head div{min-width:0}.b3-compose-head strong{display:block;font-size:14px}.b3-compose-head span{display:block;color:var(--b3-muted);font-size:11px;margin-top:2px}
.b3-compose label{display:grid;gap:7px;font-size:11px;font-weight:800;color:#55554f}
.b3-compose textarea{width:100%;min-height:118px;resize:vertical;border:1px solid #d9d9d2;border-radius:12px;padding:13px 14px;outline:none;background:#fff;line-height:1.5}
.b3-compose textarea:focus{border-color:#958cf8;box-shadow:0 0 0 3px rgba(91,79,247,.10)}
.b3-compose-examples{display:flex;gap:6px;flex-wrap:wrap}
.b3-example{border:0;background:#f1f1ed;color:#65655f;border-radius:999px;padding:7px 9px;font-size:10px}
.b3-example:hover{background:#e8e8e2;color:#222}
.b3-ai-plan{border:1px solid #e4e2fb;background:#faf9ff;border-radius:12px;padding:12px;display:grid;gap:10px}
.b3-ai-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.b3-ai-plan-top strong{font-size:11px}.b3-ai-plan-top span{font-size:10px;color:#736be2}
.b3-plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.b3-plan-item{background:#fff;border:1px solid #eceaf9;border-radius:9px;padding:9px;min-width:0}
.b3-plan-item small{display:block;color:#858078;font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-bottom:4px}
.b3-plan-item b{display:block;font-size:11px;line-height:1.35;overflow-wrap:anywhere}
.b3-compose-actions{display:flex;justify-content:flex-end;gap:8px;align-items:center}
.b3-compose-note{margin-right:auto;color:#88837d;font-size:10px;line-height:1.4;max-width:250px}
.b3-compose-submit{display:inline-flex;align-items:center;gap:8px;background:var(--b3-ink);color:#fff;border:1px solid var(--b3-ink);border-radius:10px;padding:10px 14px;font-weight:800}
.b3-compose-submit svg{width:15px;height:15px}.b3-compose-submit:disabled{opacity:.55;cursor:wait}

/* AI setup summary in builder */
.b3-setup-summary{border:1px solid #e4e2fb;background:#fbfaff;border-radius:12px;padding:12px;margin-top:2px}
.b3-setup-title{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:850;margin-bottom:8px;color:#4b43c8}
.b3-setup-title svg{width:14px;height:14px}
.b3-setup-list{display:grid;gap:6px}
.b3-setup-row{display:flex;align-items:flex-start;gap:7px;font-size:10px;color:#66615d;line-height:1.35}
.b3-setup-check{width:15px;height:15px;border-radius:50%;background:#e5f5ec;color:var(--b3-good);display:grid;place-items:center;flex:0 0 15px;font-size:9px;font-weight:900}

/* Remove duplicate legacy create UIs when Phase 3 is active */
.modal.b3-upgraded>.create-options,.modal.b3-upgraded>.b-templates,.modal.b3-upgraded>#createBody{display:none!important}

/* Compact buttons on narrow layouts, never overlap */
@media(max-width:1050px){
  .builder-head{grid-template-columns:auto minmax(120px,1fr);grid-template-areas:"back title" "actions actions"}
  .builder-head>#back{grid-area:back}.builder-title{grid-area:title!important;justify-content:flex-end!important}.builder-actions{grid-area:actions;justify-content:flex-end!important;border-top:1px solid var(--b3-line);padding-top:9px}
}
@media(max-width:760px){
  .page-head{display:grid!important;grid-template-columns:1fr;align-items:start!important}.b3-page-actions{justify-content:stretch}.b3-page-actions>*{flex:1 1 auto}
  .b3-create-hero{grid-template-columns:1fr}.b3-create-card{min-height:94px}
  .b3-plan-grid{grid-template-columns:1fr}.b3-compose-actions{display:grid;grid-template-columns:1fr}.b3-compose-note{max-width:none;margin:0}.b3-compose-submit{width:100%;justify-content:center}
  .builder-actions{width:100%;overflow-x:auto;justify-content:flex-start!important;padding-bottom:2px;scrollbar-width:none}.builder-actions::-webkit-scrollbar{display:none}.builder-actions>*{flex:0 0 auto!important}
  .b-save-status{padding-inline:8px!important}.b-save-label{display:none}
}
@media(max-width:480px){
  .modal{padding:20px!important;border-radius:16px!important}.b3-create-card{padding:14px}.b3-template-chips{display:grid;grid-template-columns:1fr 1fr}.b3-template-chip{justify-content:center;border-radius:10px}
  .builder-actions button{padding:9px 11px!important;font-size:12px}.b3-ai-launch{padding:9px 11px}
}