/* ═══════════════════════════════════════════════════ */
/*  Share-link modal (ShareModal.tsx)                   */
/*  Shared by index.html (canvas editor) and home.html  */
/*  (canvas gallery). Fallback values in var(--x, ...)  */
/*  keep this file looking correct on home.html, which  */
/*  doesn't load canvas.css's full theme variable set.  */
/* ═══════════════════════════════════════════════════ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes welcomePop{from{opacity:0;transform:scale(0.96) translateY(12px)}to{opacity:1;transform:none}}
.share-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:940;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.share-overlay.open{display:flex;animation:fadeIn .2s var(--ease)}
.share-body{width:min(460px,100%);background:var(--mat-thick,rgba(18,18,18,0.88));backdrop-filter:blur(40px) saturate(180%);-webkit-backdrop-filter:blur(40px) saturate(180%);border:0.5px solid var(--bd2);border-radius:var(--r-lg,20px);box-shadow:0 10px 40px rgba(0,0,0,0.6),inset 0 1px 0 rgba(255,255,255,0.08);padding:32px 28px 22px;display:flex;flex-direction:column;gap:14px;position:relative;align-items:center;text-align:center;animation:welcomePop .25s var(--ease-bounce,cubic-bezier(.34,1.56,.64,1))}
.share-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--t3);cursor:pointer;font-size:20px;padding:4px 8px;border-radius:8px;transition:color .12s var(--ease),background .12s var(--ease);line-height:1}
.share-close:hover{color:var(--t1);background:rgba(255,255,255,0.05)}
.share-hero{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:50%;background:var(--ac-soft);border:0.5px solid var(--bd2);color:var(--t1);margin-bottom:2px}
.share-title{font:600 17px var(--f);color:var(--t1);letter-spacing:-0.015em}
.share-desc{font:var(--fs-sm,13px)/1.5 var(--f);color:var(--t3);letter-spacing:-0.005em;max-width:380px}
.share-desc b{color:var(--t2);font-weight:600}
.share-url-row{display:flex;gap:8px;width:100%;align-items:stretch}
.share-url{flex:1;background:rgba(255,255,255,0.035);border:1px solid var(--bd);border-radius:var(--r-sm,10px);padding:9px 12px;color:var(--t1);font:var(--fs-xs,12px) var(--m,'SF Mono','JetBrains Mono',ui-monospace,Menlo,monospace);outline:none;letter-spacing:0;overflow-x:auto;text-overflow:ellipsis}
.share-url:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.share-copy-btn{background:var(--ac);border:none;color:#0a0a14;border-radius:var(--r-sm,10px);padding:0 16px;cursor:pointer;font:600 var(--fs-sm,13px) var(--f);letter-spacing:-0.005em;transition:all .12s var(--ease);white-space:nowrap}
.share-copy-btn:hover{background:var(--ac2);transform:translateY(-1px)}
.share-copy-btn:active{transform:scale(0.97)}
.share-copy-btn.copied{background:var(--green);pointer-events:none}
.share-copy-btn:disabled{opacity:0.4;cursor:not-allowed}
.share-actions{display:flex;gap:10px;width:100%;justify-content:space-between;margin-top:4px}
.share-btn-ghost{background:transparent;border:1px solid var(--bd);color:var(--t3);border-radius:var(--r-sm,10px);padding:8px 14px;cursor:pointer;font:500 var(--fs-sm,13px) var(--f);transition:all .12s var(--ease)}
.share-btn-ghost:hover{background:rgba(255,69,58,0.08);color:var(--rose,#ff6078);border-color:var(--rose,#ff6078)}
.share-btn-primary{background:var(--ac-soft);border:none;color:var(--ac);border-radius:var(--r-sm,10px);padding:8px 18px;cursor:pointer;font:600 var(--fs-sm,13px) var(--f);transition:all .12s var(--ease)}
.share-btn-primary:hover{background:var(--ac-fill,rgba(255,255,255,0.18))}
/* Collaborators + invite-link block (canvas co-editing) */
.share-collab{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:8px;padding-top:16px;border-top:1px solid var(--bd);text-align:left}
.share-collab-title{font:600 12px var(--f);color:var(--t3);letter-spacing:0.02em;text-transform:uppercase;margin-top:10px}
.share-collab-title:first-child{margin-top:0}
.share-collab-add{display:flex;gap:8px;width:100%;align-items:stretch}
.share-role{appearance:none;-webkit-appearance:none;background:rgba(255,255,255,0.035) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2392929a' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid var(--bd);border-radius:var(--r-sm,10px);color:var(--t1);font:500 var(--fs-sm,13px) var(--f);padding:0 26px 0 10px;cursor:pointer}
.share-role:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft);outline:none}
.share-collab-invite{background:var(--ac-soft);color:var(--ac);font-weight:600}
.share-collab-invite:hover{background:var(--ac-fill,rgba(255,255,255,0.18))}
.share-collab-invite:disabled{background:rgba(255,255,255,0.035);color:var(--t4)}
.share-collab-create{width:100%;padding:10px 16px;background:var(--acbg,rgba(255,255,255,0.055));border:1px solid var(--ac-soft);color:var(--ac);font-weight:600}
.share-collab-create:hover{background:var(--ac-soft)}
.share-collab-row,.share-invite-row{display:flex;gap:8px;width:100%;align-items:center;background:rgba(255,255,255,0.03);border:1px solid var(--bd);border-radius:var(--r-sm,10px);padding:7px 10px}
.share-invite-row{padding:6px 6px 6px 10px}
.share-invite-row .share-url{background:transparent;border:none;padding:0}
.share-collab-who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 var(--fs-sm,13px) var(--f);color:var(--t1)}
.share-collab-role{color:var(--t3);font:500 var(--fs-xs,12px) var(--f)}
.share-collab-err{color:var(--rose,#ff6078);font:500 var(--fs-sm,13px) var(--f)}
/* Team modal (#team-modal, TeamBuilder.tsx) at narrow viewports (defects
   78-79). The member-row inputs (canvas-ui.ts _teamMemberRow, out of this
   batch's file scope) are inline-styled `flex:0 0 130px` name + `flex:1`
   persona + a delete button in one non-wrapping row — at 390px that adds up
   to more than the available width and the persona field clips mid-word.
   !important is required to win over those inline styles without touching
   the file that emits them. */
@media(max-width:480px){
  #team-modal .share-body{padding:24px 16px 16px}
  #team-modal .team-member-row{flex-wrap:wrap!important}
  #team-modal .team-member-row .tm-name,
  #team-modal .team-member-row .tm-persona{flex:1 1 100%!important}
  #team-modal .team-member-row .tm-del{align-self:flex-end}
  /* Action row (79): keep it reachable instead of requiring a scroll past
     every field — pin it to the bottom of the scrollable .share-body. */
  #team-modal .share-actions{position:sticky;bottom:0;margin-top:0;padding:10px 0 2px;background:var(--mat-thick,rgba(18,18,18,0.94))}
}