/* Final mobile invariants for g3nerator. These intentionally win over legacy studio CSS. */

/* Statuses must remain readable on any poster, including white covers. */
.reel-card .status-chip{
  background:rgba(7,7,10,.92)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.28)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.34)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.reel-card .status-chip.green{border-color:rgba(120,239,179,.72)!important;color:#d9ffeb!important}
.reel-card .status-chip.violet{border-color:rgba(184,154,255,.72)!important;color:#eee7ff!important}
.reel-card .status-chip.amber{border-color:rgba(255,189,90,.78)!important;color:#ffe6bb!important}
.reel-card .status-chip.red{border-color:rgba(255,99,120,.78)!important;color:#ffd1d8!important}

/* A completed idea refill is historical state, not a permanent notification. */
.idea-bank-refill-state.completed{display:none!important}

/* Safari fieldset/legend fallback: visual title is rendered by app-visual-fixes.js. */
#create-reel .idea-start{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-inline-size:0!important;
  margin:0 0 1rem!important;
  padding:1rem!important;
  border:1px solid var(--line)!important;
  border-radius:18px!important;
}
#create-reel .idea-start>legend{display:none!important}
#create-reel .idea-picker{display:grid!important;width:100%!important;min-width:0!important;gap:.65rem!important}
.g3-idea-picker-title{display:block;width:100%;margin:0 0 .8rem;color:#cbbcff;font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;line-height:1.3}

@media(max-width:800px){
  /* 1. Full-screen dialogs: deterministic iPhone header and close button. */
  .form-dialog,#create-brand{
    top:0!important;
    inset:0 0 auto!important;
    width:100%!important;
    max-width:none!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    border-radius:0!important;
  }
  .form-dialog .dialog-toolbar,#create-brand .dialog-toolbar{
    position:sticky!important;
    top:0!important;
    z-index:30!important;
    box-sizing:border-box!important;
    width:100%!important;
    height:calc(56px + var(--safe-top))!important;
    min-height:calc(56px + var(--safe-top))!important;
    padding:var(--safe-top) max(12px,var(--safe-right)) 0 max(12px,var(--safe-left))!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    background:rgba(13,13,18,.96)!important;
    border-bottom:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(18px)!important;
    -webkit-backdrop-filter:blur(18px)!important;
  }
  .form-dialog .dialog-toolbar .dialog-message,#create-brand .dialog-toolbar .dialog-message{min-width:0;flex:1;margin:0 .75rem 0 0!important}
  .form-dialog .dialog-close,#create-brand .dialog-close{
    position:static!important;
    inset:auto!important;
    flex:0 0 44px!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0 0 0 auto!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:14px!important;
    border:1px solid #34313e!important;
    background:#181820!important;
    transform:none!important;
    line-height:1!important;
  }
  .form-dialog .dialog-close .ui-icon,#create-brand .dialog-close .ui-icon{width:20px!important;height:20px!important;margin:0!important}
  .form-dialog .dialog-body,#create-brand .dialog-body{padding-top:1rem!important}

  /* iOS Safari sometimes treats the programmatically focused close button as keyboard focus. */
  @media(hover:none) and (pointer:coarse){
    .form-dialog .dialog-close:focus,.form-dialog .dialog-close:focus-visible,
    #create-brand .dialog-close:focus,#create-brand .dialog-close:focus-visible{outline:none!important;box-shadow:none!important}
  }

  /* 2. Topbar controls: fixed 44x44 geometry, no baseline/line-height drift. */
  .topbar-actions{align-items:center!important}
  .topbar-actions>.icon-button,.topbar-actions>#logout{
    box-sizing:border-box!important;
    align-self:center!important;
    justify-self:stretch!important;
    width:44px!important;
    min-width:44px!important;
    max-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-height:44px!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    transform:none!important;
  }
  .topbar-actions>.icon-button .ui-icon{width:20px!important;height:20px!important;margin:0!important}

  /* 3. Dashboard recent Reels: compact rows with readable hook/topic instead of image-only strips. */
  .g3-dashboard>.reel-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:.72rem!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }
  .g3-dashboard .reel-row>.reel-card{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  .g3-dashboard .reel-row .reel-open{
    display:grid!important;
    grid-template-columns:96px minmax(0,1fr)!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:124px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    text-align:left!important;
  }
  .g3-dashboard .reel-row .reel-media{
    width:96px!important;
    min-width:96px!important;
    max-width:96px!important;
    height:124px!important;
    min-height:124px!important;
    max-height:124px!important;
    aspect-ratio:auto!important;
    border-radius:0!important;
    overflow:hidden!important;
  }
  .g3-dashboard .reel-row .reel-media img,
  .g3-dashboard .reel-row .reel-media video{width:100%!important;height:100%!important;object-fit:cover!important}
  .g3-dashboard .reel-row .reel-media .duration,.g3-dashboard .reel-row .reel-media .play{display:none!important}
  .g3-dashboard .reel-row .reel-copy{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    width:auto!important;
    min-width:0!important;
    height:auto!important;
    min-height:124px!important;
    max-height:none!important;
    padding:.78rem .85rem!important;
    opacity:1!important;
    visibility:visible!important;
    overflow:hidden!important;
  }
  .g3-dashboard .reel-row .reel-copy p{
    display:-webkit-box!important;
    margin:0 0 .3rem!important;
    color:#aaa6b5!important;
    font-size:.69rem!important;
    line-height:1.3!important;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
  }
  .g3-dashboard .reel-row .reel-copy h3{
    display:-webkit-box!important;
    min-height:0!important;
    margin:0!important;
    color:#fff!important;
    font-size:.92rem!important;
    font-weight:800!important;
    line-height:1.3!important;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
  }
  .g3-dashboard .reel-row .reel-copy footer{display:none!important}
  .g3-dashboard .reel-card-actions{display:none!important}
  .g3-dashboard>.reel-row+.simple-start{margin-top:1rem!important}

  /* Library grid also keeps the topic + hook visible. */
  .content-grid .reel-copy{display:block!important;height:auto!important;min-height:0!important;opacity:1!important;visibility:visible!important}
  .content-grid .reel-copy p{
    display:-webkit-box!important;
    min-height:1.2em!important;
    margin:0 0 .3rem!important;
    color:#aaa6b5!important;
    font-size:.64rem!important;
    line-height:1.25!important;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
  }
  .content-grid .reel-copy h3{-webkit-line-clamp:3!important;min-height:3.6em!important;font-size:.78rem!important;line-height:1.2!important}

  /* 4. Idea Bank controls: no phantom empty left column. */
  .page-heading.library-heading .idea-bank-controls,.idea-bank-controls{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:auto!important;
    margin:0!important;
    padding:.7rem!important;
    gap:.65rem!important;
    grid-template-columns:none!important;
  }
  .idea-bank-controls>[data-create-random-idea]{order:0!important;width:100%!important;min-width:0!important;margin:0!important}
  .idea-bank-controls .idea-refill{
    order:1!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(116px,auto)!important;
    align-items:end!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    gap:.55rem!important;
  }
  .idea-bank-controls .idea-refill label{min-width:0!important;margin:0!important}
  .idea-bank-controls .idea-refill select{width:100%!important;min-width:0!important}
  .idea-bank-controls .idea-refill>[data-refill-bank]{min-width:116px!important;margin:0!important}
  .idea-bank-controls .idea-refill p{grid-column:1/-1!important;margin:.1rem 0 0!important}

  /* 5. Profile footer: equal, stable buttons that never wrap into mismatched heights. */
  .g3-profile-form .form-actions.sticky-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:.65rem!important;
  }
  .g3-profile-form .form-actions.sticky-actions .button{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    height:54px!important;
    min-height:54px!important;
    max-height:54px!important;
    margin:0!important;
    padding:.7rem .65rem!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
    line-height:1!important;
    font-size:.9rem!important;
  }
}

@media(max-width:360px){
  .g3-dashboard .reel-row .reel-open{grid-template-columns:84px minmax(0,1fr)!important;min-height:116px!important}
  .g3-dashboard .reel-row .reel-media{width:84px!important;min-width:84px!important;max-width:84px!important;height:116px!important;min-height:116px!important;max-height:116px!important}
  .g3-dashboard .reel-row .reel-copy{min-height:116px!important;padding:.7rem!important}
  .idea-bank-controls .idea-refill{grid-template-columns:minmax(0,1fr) 108px!important}
  .idea-bank-controls .idea-refill>[data-refill-bank]{min-width:108px!important;padding-inline:.55rem!important}
}