/*
  TCW Studio usable layout
  Desktop: controls + persistent preview + optional Brain drawer
  Mobile: preview-first with Design / Create / Brain navigation
*/

:root{
  --tcw-appbar-height:60px;
  --tcw-mobile-nav-height:66px;
  --tcw-control-width:370px;
  --tcw-preview-bg:#080a14;
}

html{
  min-height:100%;
  background:#090b16;
}

body{
  min-height:100vh;
  overflow:hidden;
}

.app{
  min-height:100vh;
  height:100vh;
  grid-template-columns:
    minmax(320px,var(--tcw-control-width))
    minmax(0,1fr);
  overflow:hidden;
}

/* ---------- DESKTOP CONTROL COLUMN ---------- */

aside{
  width:auto;
  min-width:0;
  height:100vh;
  padding:18px 18px 90px;
  overscroll-behavior:contain;
}

aside > h1{
  font-size:23px;
  line-height:1.1;
  margin-right:88px;
}

aside > .sub{
  max-width:310px;
  margin-top:6px;
  margin-bottom:10px;
}

aside > .section{
  margin-top:10px;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.065);
  background:rgba(7,10,22,.24);
  overflow:hidden;
}

aside > .section + .section{
  border-top:1px solid rgba(255,255,255,.065);
}

aside > .section .section-toggle{
  min-height:50px;
  padding:12px 13px;
}

aside > .section .section-body{
  padding:0 13px 14px;
}

aside label{
  margin-top:10px;
}

aside input[type=text],
aside textarea,
aside select,
aside input[type=color]{
  min-height:42px;
  border-radius:9px;
}

aside textarea{
  min-height:72px;
}

aside button{
  min-height:42px;
  margin-top:9px;
}

aside .row,
aside .row3,
aside .toolbar{
  gap:8px;
}

aside .mini{
  font-size:11px;
}

/* Endpoint is a technical setting, not a primary workflow control. */
#aiEndpoint{
  opacity:.58;
  font-size:11px;
}

label:has(+ #aiEndpoint){
  opacity:.6;
  font-size:10px;
}

.ai-actions{
  grid-template-columns:1fr 1fr;
}

/* ---------- PREVIEW WORKSPACE ---------- */

main{
  position:relative;
  height:100vh;
  min-width:0;
  padding:20px;
  overflow:auto;
  justify-content:center;
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(37,48,93,.19),
      transparent 48%
    ),
    var(--tcw-preview-bg);
}

main::before{
  content:"PREVIEW";
  position:absolute;
  top:16px;
  left:20px;
  z-index:1;
  color:rgba(218,224,246,.42);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
}

main .status{
  width:min(100%,1100px);
  flex:0 0 auto;
  margin-top:24px;
}

main canvas{
  width:min(
    calc(100vw - var(--tcw-control-width) - 64px),
    980px
  );
  max-height:calc(100vh - 105px);
  object-fit:contain;
  flex:0 0 auto;
}

/* Keep cloud status useful without covering controls. */
#tcwCloudWorkspaceStatus{
  right:16px !important;
  bottom:16px !important;
  max-width:230px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------- RESULTS ---------- */

.ai-result,
.campaign-card{
  border-radius:11px;
}

.ai-result-text{
  font-size:13px;
}

.ai-result-buttons{
  gap:5px;
}

.memory-feedback-controls{
  gap:5px !important;
}

/* ---------- MOBILE WORKSPACE NAV ---------- */

.tcw-mobile-workspace-nav{
  display:none;
}

.tcw-mobile-preview-heading{
  display:none;
}

/* Broad support for the existing Creative Brain drawer naming. */
.tcw-creative-brain-drawer,
.creative-brain-drawer,
#tcwCreativeBrainDrawer{
  max-width:min(460px,94vw);
}

/* ---------- TABLET ---------- */

@media (max-width:1180px) and (min-width:761px){
  :root{
    --tcw-control-width:340px;
  }

  aside{
    padding-left:14px;
    padding-right:14px;
  }

  main{
    padding:16px;
  }

  main canvas{
    width:min(
      calc(100vw - var(--tcw-control-width) - 42px),
      880px
    );
  }
}

/* ---------- MOBILE ---------- */

@media (max-width:760px){
  body{
    overflow:auto;
    padding-bottom:var(--tcw-mobile-nav-height);
  }

  .app{
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:100vh;
    overflow:visible;
  }

  main{
    order:1;
    width:100%;
    height:auto;
    min-height:0;
    padding:38px 10px 12px;
    overflow:visible;
    justify-content:flex-start;
    gap:8px;
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  main::before{
    top:12px;
    left:14px;
  }

  main canvas{
    width:100%;
    max-width:100%;
    max-height:44vh;
    min-height:230px;
    object-fit:contain;
    border-radius:12px;
    box-shadow:0 14px 40px rgba(0,0,0,.38);
  }

  main .status{
    width:100%;
    margin:0;
    padding:0 3px;
    font-size:10px;
    gap:8px;
  }

  main .status span:first-child{
    max-width:68%;
  }

  aside{
    order:2;
    display:block;
    width:100%;
    height:auto !important;
    max-height:none !important;
    min-height:0;
    padding:14px 12px 90px;
    overflow:visible !important;
    border:0;
  }

  aside > h1{
    margin:0 88px 4px 2px;
    font-size:21px;
  }

  aside > .sub{
    margin-left:2px;
    margin-bottom:12px;
    font-size:11px;
  }

  aside > .section{
    display:none;
    margin:9px 0;
  }

  body[data-tcw-mobile-view="design"]
    aside > .section:not([data-tcw-workspace-group="create"]){
    display:block;
  }

  body[data-tcw-mobile-view="create"]
    aside > .section[data-tcw-workspace-group="create"]{
    display:block;
  }

  body[data-tcw-mobile-view="preview"] aside{
    display:none;
  }

  aside > .section .section-toggle{
    min-height:52px;
    padding:13px 12px;
    font-size:14px;
  }

  aside > .section .section-body{
    padding:0 12px 14px;
  }

  aside .row,
  aside .row3,
  aside .toolbar,
  aside .ai-actions{
    grid-template-columns:1fr;
  }

  aside input[type=text],
  aside textarea,
  aside select{
    min-height:46px;
    font-size:16px;
  }

  aside textarea{
    min-height:86px;
  }

  aside button{
    min-height:48px;
    font-size:14px;
  }

  .checks{
    grid-template-columns:1fr 1fr;
  }

  .ai-result-buttons,
  .memory-feedback-controls{
    grid-template-columns:1fr !important;
  }

  .tcw-mobile-workspace-nav{
    position:fixed;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    left:0;
    right:0;
    bottom:0;
    z-index:100000;
    height:var(--tcw-mobile-nav-height);
    padding:
      7px
      max(7px,env(safe-area-inset-right))
      calc(7px + env(safe-area-inset-bottom))
      max(7px,env(safe-area-inset-left));
    gap:6px;
    background:rgba(8,10,22,.96);
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 -12px 35px rgba(0,0,0,.32);
    backdrop-filter:blur(16px);
  }

  .tcw-mobile-workspace-nav button{
    min-width:0;
    min-height:48px;
    width:100%;
    margin:0;
    padding:6px 4px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    color:#bfc7df;
    background:#171b32;
    font-size:10px;
    line-height:1.15;
  }

  .tcw-mobile-workspace-nav button span{
    display:block;
    margin-bottom:3px;
    font-size:17px;
    line-height:1;
  }

  .tcw-mobile-workspace-nav button.is-active{
    color:#07101a;
    border-color:transparent;
    background:linear-gradient(135deg,#14d9ff,#d622ff);
  }

  #tcwCloudWorkspaceStatus{
    position:fixed !important;
    right:8px !important;
    bottom:calc(
      var(--tcw-mobile-nav-height) + 8px
    ) !important;
    max-width:190px !important;
    padding:7px 10px !important;
    font-size:10px !important;
  }

  .tcw-creative-brain-drawer,
  .creative-brain-drawer,
  #tcwCreativeBrainDrawer{
    position:fixed !important;
    inset:0 !important;
    z-index:99999 !important;
    width:100vw !important;
    max-width:none !important;
    height:calc(
      100dvh - var(--tcw-mobile-nav-height)
    ) !important;
    border-radius:0 !important;
  }

  body:not([data-tcw-mobile-view="brain"])
    .tcw-creative-brain-drawer,
  body:not([data-tcw-mobile-view="brain"])
    .creative-brain-drawer,
  body:not([data-tcw-mobile-view="brain"])
    #tcwCreativeBrainDrawer{
    pointer-events:none;
  }
}

/* Very small phones */
@media (max-width:390px){
  main canvas{
    min-height:210px;
    max-height:39vh;
  }

  .checks{
    grid-template-columns:1fr;
  }

  .tcw-mobile-workspace-nav button{
    font-size:9px;
  }
}
/* ==========================================================
   TCW Studio usability refinement
   ========================================================== */

/* ---------- DESKTOP ---------- */

@media (min-width:1181px){

  :root{
    --tcw-control-width:320px;
  }

  .app{
    grid-template-columns:
      var(--tcw-control-width)
      minmax(0,1fr);
  }

  aside{
    padding-left:14px;
    padding-right:14px;
  }

  aside > h1{
    font-size:21px;
  }

  aside > .sub{
    font-size:11px;
    line-height:1.35;
  }

  aside > .section{
    margin-top:8px;
  }

  aside > .section .section-toggle{
    min-height:46px;
    padding:10px 11px;
  }

  main{
    padding:18px 24px;
  }

  main canvas{
    width:min(
      calc(100vw - var(--tcw-control-width) - 390px),
      900px
    );
    max-width:100%;
  }

  .tcw-creative-brain-drawer,
  .creative-brain-drawer,
  #tcwCreativeBrainDrawer{
    width:330px !important;
    max-width:330px !important;
  }
}

/* ---------- TABLET ---------- */

@media (max-width:1180px) and (min-width:761px){

  :root{
    --tcw-control-width:310px;
  }

  main canvas{
    width:min(
      calc(100vw - var(--tcw-control-width) - 36px),
      820px
    );
  }

  .tcw-creative-brain-drawer,
  .creative-brain-drawer,
  #tcwCreativeBrainDrawer{
    width:min(390px,92vw) !important;
  }
}

/* ---------- MOBILE PREVIEW WORKSPACE ---------- */

@media (max-width:760px){

  body[data-tcw-mobile-view="preview"]{
    overflow:hidden;
  }

  body[data-tcw-mobile-view="preview"] .app{
    height:calc(
      100dvh - var(--tcw-mobile-nav-height)
    );
    min-height:0;
    overflow:hidden;
  }

  body[data-tcw-mobile-view="preview"] main{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    width:100%;
    height:calc(
      100dvh - var(--tcw-mobile-nav-height)
    );
    min-height:0;

    padding:
      48px
      10px
      18px;

    overflow:hidden;
  }

  body[data-tcw-mobile-view="preview"] main::before{
    top:14px;
    left:14px;
  }

  body[data-tcw-mobile-view="preview"] main canvas{
    display:block;

    width:min(
      calc(100vw - 20px),
      calc(100dvh - var(--tcw-mobile-nav-height) - 105px)
    );

    height:auto;
    min-height:0;
    max-height:none;

    margin:auto;
    object-fit:contain;

    border-radius:12px;
    box-shadow:
      0 18px 48px rgba(0,0,0,.44);
  }

  body[data-tcw-mobile-view="preview"] main .status{
    position:absolute;
    top:13px;
    right:12px;
    left:86px;

    display:flex;
    justify-content:flex-end;

    width:auto;
    margin:0;
    padding:0;

    font-size:9px;
  }

  body[data-tcw-mobile-view="preview"]
    main .status span:first-child{
    display:none;
  }

  body[data-tcw-mobile-view="preview"]
    main .status span:last-child{
    max-width:100%;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  /* Design and Create should behave like real working screens. */

  body[data-tcw-mobile-view="design"],
  body[data-tcw-mobile-view="create"]{
    overflow:auto;
  }

  body[data-tcw-mobile-view="design"] .app,
  body[data-tcw-mobile-view="create"] .app{
    display:block;
    height:auto;
    min-height:100vh;
  }

  body[data-tcw-mobile-view="design"] main,
  body[data-tcw-mobile-view="create"] main{
    display:none;
  }

  body[data-tcw-mobile-view="design"] aside,
  body[data-tcw-mobile-view="create"] aside{
    display:block;
    min-height:calc(
      100dvh - var(--tcw-mobile-nav-height)
    );
    padding-top:16px;
  }

  body[data-tcw-mobile-view="design"] aside > h1,
  body[data-tcw-mobile-view="create"] aside > h1{
    margin-right:60px;
  }

  body[data-tcw-mobile-view="design"] aside > .sub,
  body[data-tcw-mobile-view="create"] aside > .sub{
    max-width:310px;
  }

  /* Keep cloud status visible but secondary. */

  #tcwCloudWorkspaceStatus{
    opacity:.88;
    max-width:166px !important;
  }
}

/* ---------- SMALL PHONE ---------- */

@media (max-width:390px){

  body[data-tcw-mobile-view="preview"] main{
    padding-left:8px;
    padding-right:8px;
  }

  body[data-tcw-mobile-view="preview"] main canvas{
    width:min(
      calc(100vw - 16px),
      calc(100dvh - var(--tcw-mobile-nav-height) - 96px)
    );
  }
}