/* Mobile and small-screen polish for LOVABLE DE POBRE. */

/* Connections: keep the brand centered and the back button anchored left. */
.ldp-dark-shell:has(> header + section) > header{
  position:relative;
  min-height:64px!important;
}
.ldp-dark-shell:has(> header + section) > header > button:first-child{
  position:relative;
  z-index:2;
}
.ldp-dark-shell:has(> header + section) > header > div:last-child{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:1;
}

/* Integration brand icons injected by brand-system.js. */
.ldp-provider-logo{
  display:block;
  width:25px;
  height:25px;
  object-fit:contain;
}
.ldp-provider-icon-tile{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden;
}
.ldp-provider-icon-tile img{
  width:25px!important;
  height:25px!important;
  object-fit:contain!important;
}
.ldp-provider-card[data-provider="github"] .ldp-provider-icon-tile{background:#171B22!important}
.ldp-provider-card[data-provider="github"] .ldp-provider-icon-tile img{filter:brightness(0) invert(1)}
.ldp-provider-card[data-provider="supabase"] .ldp-provider-icon-tile{background:#E8FFF4!important}
.ldp-provider-card[data-provider="openai"] .ldp-provider-icon-tile{background:#ECFBF7!important}
.ldp-provider-card[data-provider="anthropic"] .ldp-provider-icon-tile{background:#FFF1EA!important}
.ldp-provider-card[data-provider="gemini"] .ldp-provider-icon-tile{background:#F1F4FF!important}

/* Dashboard mobile: two clean header rows instead of crushing logo + controls together. */
@media (max-width: 768px){
  .ldp-dashboard-topbar{
    height:auto!important;
    min-height:108px!important;
    flex-wrap:wrap!important;
    align-content:center!important;
    gap:7px!important;
    padding:8px 12px!important;
  }
  .ldp-dashboard-topbar > div:first-child{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    align-items:center!important;
    justify-content:center!important;
  }
  .ldp-dashboard-topbar > div:first-child > div{
    gap:8px!important;
  }
  .ldp-dashboard-topbar > div:first-child .ldp-workspace-name{
    font-size:12px!important;
  }
  .ldp-dashboard-topbar > div:first-child .ldp-tagline{
    font-size:8px!important;
  }
  .ldp-dashboard-topbar > div:last-child{
    width:100%!important;
    justify-content:center!important;
    gap:6px!important;
  }
  .ldp-dashboard-topbar > div:last-child button{
    min-height:36px!important;
  }
  .ldp-dashboard-topbar > div:last-child button:first-child{
    flex:1 1 auto!important;
    max-width:150px;
    justify-content:center!important;
  }

  .ldp-dashboard-surface{
    min-height:calc(100vh - 108px)!important;
    padding:12px!important;
  }
  .ldp-dashboard-panel{
    min-height:calc(100vh - 132px)!important;
    padding:16px!important;
    border-radius:20px!important;
  }
  .ldp-dashboard-panel > div:first-child{
    gap:12px!important;
  }
  .ldp-dashboard-panel > div:first-child > div:last-child{
    width:100%!important;
    justify-content:flex-start!important;
  }
  .ldp-dashboard-panel > div:first-child > div:last-child button{
    width:100%!important;
    justify-content:center!important;
  }
  .ldp-dashboard-panel .mt-6.flex{
    margin-top:18px!important;
  }
  .ldp-dashboard-panel .mt-6.flex > div:first-child{
    max-width:none!important;
  }
  .ldp-dashboard-panel .mt-6.flex > div:last-child{
    width:100%!important;
    justify-content:stretch!important;
  }
  .ldp-dashboard-panel .mt-6.flex > div:last-child button{
    flex:1 1 auto!important;
    text-align:center!important;
  }

  /* Connections compact but comfortable. */
  .ldp-dark-shell:has(> header + section) > header{
    min-height:68px!important;
    padding:8px 12px!important;
  }
  .ldp-dark-shell:has(> header + section) > header > div:last-child{
    width:176px;
    justify-content:center!important;
  }
  .ldp-dark-shell:has(> header + section) > header .ldp-brand-icon{
    width:32px!important;
    height:32px!important;
  }
  .ldp-dark-shell:has(> header + section) > header .ldp-workspace-name{
    font-size:11px!important;
  }
  .ldp-dark-shell:has(> header + section) > header .ldp-tagline{
    font-size:7px!important;
  }
  .ldp-dark-shell:has(> header + section) > section{
    width:100%!important;
    max-width:none!important;
    padding:22px 12px 26px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > div:first-child{
    padding:0 2px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > div:first-child h1{
    font-size:26px!important;
    line-height:1.1!important;
  }
  .ldp-dark-shell:has(> header + section) > section > div:first-child p{
    font-size:12px!important;
    line-height:1.65!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3{
    margin-top:18px!important;
    padding:8px!important;
    border-radius:22px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div{
    border-radius:16px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div{
    gap:10px!important;
    padding:14px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child{
    min-width:0!important;
    gap:10px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div button{
    min-width:94px!important;
    min-height:38px!important;
    padding:0 12px!important;
    font-size:10px!important;
  }

  /* Workspace/editor: prevent controls from overflowing and reduce sidebar footprint. */
  .ldp-dark-shell:has(> header + div) > header{
    min-height:58px!important;
    height:auto!important;
    padding:8px 10px!important;
    gap:8px!important;
  }
  .ldp-dark-shell:has(> header + div) > header > div:first-child{
    min-width:0!important;
    flex:1 1 auto!important;
  }
  .ldp-dark-shell:has(> header + div) > header > div:last-child{
    gap:5px!important;
  }
  .ldp-dark-shell:has(> header + div) > header > div:last-child button{
    padding-left:9px!important;
    padding-right:9px!important;
    font-size:10px!important;
  }
  .ldp-dark-shell:has(> header + div) > div > aside{
    min-height:auto!important;
    max-height:62vh!important;
  }
  .ldp-dark-shell:has(> header + div) > div > section{
    min-height:58vh!important;
  }
}

@media (max-width: 430px){
  .ldp-dashboard-topbar{
    min-height:112px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .ldp-dashboard-topbar > div:last-child{
    gap:5px!important;
  }
  .ldp-dashboard-topbar > div:last-child button:nth-child(2){
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .ldp-dashboard-topbar > div:last-child button:nth-child(3),
  .ldp-dashboard-topbar > div:last-child button:nth-child(4){
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
  .ldp-dashboard-panel{
    padding:14px!important;
  }
  .ldp-dashboard-panel h1{
    font-size:20px!important;
  }

  .ldp-dark-shell:has(> header + section) > header > button:first-child{
    font-size:0!important;
    gap:0!important;
    width:36px!important;
    height:36px!important;
    justify-content:center!important;
  }
  .ldp-dark-shell:has(> header + section) > header > div:last-child{
    width:165px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > div:first-child h1{
    font-size:23px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div{
    align-items:center!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child > div:nth-child(2) > div:first-child{
    font-size:12px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div > div > div:first-child > div:nth-child(2) > div:nth-child(2){
    font-size:9px!important;
  }
  .ldp-provider-icon-tile{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
  }
  .ldp-provider-icon-tile img{
    width:22px!important;
    height:22px!important;
  }
  .ldp-dark-shell:has(> header + section) > section > .mt-7.space-y-3 > div button{
    min-width:82px!important;
    padding:0 9px!important;
    font-size:9px!important;
  }
}