/* Create workspace: reference-matched Apple glass layout.
   Loaded after theme.css so this page can keep the shared shell while giving
   the AI studio its own full-height canvas. */

body[data-page="create"] .workspace{
  display:flex;
  flex-direction:column;
  height:100dvh;
  min-height:0;
  overflow:hidden;
}

body[data-page="create"] .topbar{
  flex:0 0 var(--topbar-h);
}

body[data-page="create"] .workspace > .create-main{
  flex:1 1 auto;
  width:auto;
  height:auto!important;
  min-height:0!important;
  margin:22px 18px 0 16px;
  overflow:hidden!important;
  isolation:isolate;
  border:1px solid rgba(255,255,255,.92);
  border-bottom:0;
  border-radius:28px 28px 0 0;
  background:rgba(255,255,255,.84)!important;
  box-shadow:0 22px 64px -38px rgba(28,53,96,.30),inset 0 1px 0 rgba(255,255,255,.96);
  --gbg:rgba(255,255,255,.88);
  --gsurf:#f5f7fb;
  --gsurf2:#e9edf5;
  --gink:#11182a;
  --gmut:#54627a;
  --gdim:#96a3b7;
  --gline:rgba(17,24,42,.09);
  --gblue:#1768f2;
  --gblueh:#0759df;
  --gsoft:#edf3ff;
}

html[data-theme="dark"] body[data-page="create"] .workspace > .create-main{
  border-color:rgba(255,255,255,.10);
  background:rgba(15,18,24,.82)!important;
  box-shadow:0 28px 72px -38px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.06);
  --gbg:rgba(24,28,36,.90);
  --gsurf:#20242e;
  --gsurf2:#2a303c;
  --gink:#f5f7fb;
  --gmut:#b0b9c8;
  --gdim:#7e899b;
  --gline:rgba(255,255,255,.10);
  --gblue:#6fa2ff;
  --gblueh:#8cb5ff;
  --gsoft:rgba(90,149,255,.15);
}

body[data-page="create"] .create-main::before{
  top:72px;
  width:min(900px,78%);
  height:560px;
  opacity:.72;
  background:radial-gradient(ellipse at center,rgba(69,127,241,.09) 0%,rgba(69,127,241,.035) 42%,transparent 72%);
  filter:blur(8px);
}

body[data-page="create"] .create-main::after{
  content:"";
  position:absolute;
  z-index:0;
  top:88px;
  left:50%;
  width:min(670px,54vw);
  aspect-ratio:1;
  border:1px solid rgba(62,112,214,.055);
  border-radius:50%;
  outline:1px solid rgba(62,112,214,.035);
  outline-offset:110px;
  transform:translateX(-50%);
  opacity:.45;
  pointer-events:none;
}

body[data-page="create"] .cc-top{
  height:64px;
  padding:0 22px;
  border-bottom-color:var(--gline);
}

body[data-page="create"] .cc-logo{
  width:30px;
  height:30px;
}

body[data-page="create"] .cc-logo svg{
  width:30px;
  height:30px;
}

body[data-page="create"] .cc-recentbtn{
  height:40px;
  padding:0 12px;
  font-size:14px;
}

body[data-page="create"] .cc-new{
  height:40px;
  padding:0 16px;
  border-color:var(--gline);
  background:rgba(255,255,255,.58);
  font-size:13.5px;
  box-shadow:0 9px 24px -20px rgba(30,53,92,.34),inset 0 1px 0 rgba(255,255,255,.88);
}

html[data-theme="dark"] body[data-page="create"] .cc-new{
  background:rgba(255,255,255,.045);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}

body[data-page="create"] .cc-scroll.empty{
  justify-content:flex-start;
  padding:0;
  color:inherit;
  text-align:inherit;
}

body[data-page="create"] .cc-hero{
  max-width:900px;
  padding:50px 24px 14px;
}

body[data-page="create"] .cc-hero-mark{
  position:relative;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 27px;
  border:1px solid rgba(47,107,238,.08);
  border-radius:50%;
  background:rgba(255,255,255,.38);
  box-shadow:0 18px 34px -24px rgba(47,107,238,.46),inset 0 1px 0 rgba(255,255,255,.92);
}

body[data-page="create"] .cc-hero-mark::before{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(47,107,238,.09);
  border-radius:50%;
}

body[data-page="create"] .cc-hero-mark svg{
  position:relative;
  width:48px;
  height:48px;
  filter:drop-shadow(0 9px 18px rgba(47,107,255,.17));
}

html[data-theme="dark"] body[data-page="create"] .cc-hero-mark{
  border-color:rgba(112,162,255,.14);
  background:rgba(255,255,255,.035);
  box-shadow:0 24px 55px -32px rgba(68,124,235,.54),inset 0 1px 0 rgba(255,255,255,.07);
}

body[data-page="create"] .cc-hero-title{
  font-size:clamp(40px,3.15vw,50px);
  font-weight:700;
  line-height:1.06;
  letter-spacing:0;
}

body[data-page="create"] .cc-hero-sub{
  max-width:650px;
  margin-top:16px;
  font-size:16px;
  line-height:1.55;
  text-wrap:balance;
}

body[data-page="create"] .cc-starters{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:40px;
}

body[data-page="create"] .cc-starter{
  min-height:156px;
  padding:32px 28px 22px;
  text-align:left;
  border-color:rgba(17,24,42,.075);
  border-radius:17px;
  background:rgba(255,255,255,.54);
  box-shadow:0 18px 45px -36px rgba(29,54,98,.34),inset 0 1px 0 rgba(255,255,255,.86);
}

body[data-page="create"] .cc-starter:hover{
  border-color:rgba(47,107,238,.20);
  background:rgba(255,255,255,.80);
  box-shadow:0 24px 50px -34px rgba(29,54,98,.38),inset 0 1px 0 rgba(255,255,255,.92);
}

html[data-theme="dark"] body[data-page="create"] .cc-starter{
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.035);
  box-shadow:0 18px 45px -34px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.05);
}

body[data-page="create"] .cc-starter b{
  font-size:14px;
  font-weight:650;
  line-height:1.35;
}

body[data-page="create"] .cc-starter small{
  max-width:215px;
  margin-top:8px;
  font-size:13px;
  line-height:1.5;
}

body[data-page="create"] .cc-starter svg{
  align-self:flex-end;
  width:20px;
  height:20px;
  margin-top:auto;
  color:var(--gblue);
}

body[data-page="create"] .cc-roller{
  gap:9px;
  margin-top:44px;
}

body[data-page="create"] .cc-roll-text{
  font-size:16px;
}

body[data-page="create"] .cc-dock{
  padding:14px 24px 75px;
}

body[data-page="create"] .cc-composer{
  max-width:870px;
  min-height:80px;
  gap:8px;
  padding:9px 11px;
  border:1px solid rgba(17,24,42,.08);
  border-radius:999px;
  background:rgba(255,255,255,.69);
  box-shadow:0 22px 54px -34px rgba(26,48,88,.40),inset 0 1px 0 rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(150%) blur(24px);
  backdrop-filter:saturate(150%) blur(24px);
}

body[data-page="create"] .cc-composer:focus-within{
  border-color:rgba(47,107,238,.18);
  box-shadow:0 24px 56px -34px rgba(36,83,178,.42),inset 0 1px 0 rgba(255,255,255,.96);
}

html[data-theme="dark"] body[data-page="create"] .cc-composer{
  border-color:rgba(255,255,255,.10);
  background:rgba(28,32,40,.74);
  box-shadow:0 24px 56px -34px rgba(0,0,0,.86),inset 0 1px 0 rgba(255,255,255,.07);
}

body[data-page="create"] .cc-plus{
  width:52px;
  height:52px;
  color:var(--gink);
}

body[data-page="create"] .cc-plus svg{
  width:23px;
  height:23px;
}

body[data-page="create"] .cc-ctx,
body[data-page="create"] .cc-mic,
body[data-page="create"] .cc-chips{
  display:none;
}

body[data-page="create"] .cc-input{
  min-height:52px;
  padding:13px 9px;
  font-size:15px;
  line-height:1.45;
}

body[data-page="create"] .cc-input:focus{
  outline:0!important;
  translate:0!important;
  transform:none!important;
  box-shadow:none!important;
}

body[data-page="create"] .cc-send{
  width:54px;
  height:54px;
  background:linear-gradient(145deg,#2778ff,#0758df);
  box-shadow:0 14px 30px -16px rgba(22,91,230,.78),inset 0 1px 0 rgba(255,255,255,.30);
}

body[data-page="create"] .cc-send:disabled{
  background:#e8edf5;
  color:#aeb8c7;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

html[data-theme="dark"] body[data-page="create"] .cc-send:disabled{
  background:#2a303b;
  color:#697487;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}

body[data-page="create"] .cc-send svg{
  width:22px;
  height:22px;
}

body[data-page="create"] .cc-attached{
  width:calc(100% - 48px);
  max-width:870px;
}

body[data-page="create"] .cc-thread{
  max-width:920px;
  padding-top:28px;
}

@media (max-width:1280px){
  body[data-page="create"] .cc-starters{gap:14px}
  body[data-page="create"] .cc-starter{padding-left:24px;padding-right:24px}
}

@media (max-width:960px){
  body[data-page="create"] .workspace{
    padding-bottom:calc(var(--tabbar-h) + 20px + var(--safe-b));
  }
  body[data-page="create"] .workspace > .create-main{
    margin:10px 10px 0;
    border-radius:25px 25px 0 0;
  }
  body[data-page="create"] .cc-top{height:66px;padding:0 18px}
  body[data-page="create"] .cc-hero{padding-top:16px}
  body[data-page="create"] .cc-hero-mark{width:60px;height:60px;margin-bottom:22px}
  body[data-page="create"] .cc-hero-mark svg{width:44px;height:44px}
  body[data-page="create"] .cc-hero-title{font-size:clamp(36px,5.4vw,46px)}
  body[data-page="create"] .cc-starters{gap:14px}
  body[data-page="create"] .cc-starter{min-height:132px;padding:23px 22px 19px}
  body[data-page="create"] .cc-dock{padding:12px 18px 28px}
  body[data-page="create"] .cc-composer{min-height:74px}
  body[data-page="create"] .cc-plus{width:50px;height:50px}
  body[data-page="create"] .cc-input{min-height:50px;font-size:16px}
  body[data-page="create"] .cc-send{width:52px;height:52px}
}

@media (max-width:680px){
  body[data-page="create"] .workspace > .create-main{
    margin:8px 8px 0;
    border-radius:22px 22px 0 0;
  }
  body[data-page="create"] .cc-top{height:60px;padding:0 12px}
  body[data-page="create"] .cc-logo{width:28px;height:28px}
  body[data-page="create"] .cc-logo svg{width:28px;height:28px}
  body[data-page="create"] .cc-recentbtn{height:38px;padding:0 8px;font-size:13.5px}
  body[data-page="create"] .cc-new{height:40px;padding:0 13px;font-size:13px}
  body[data-page="create"] .cc-hero{padding:14px 14px 18px}
  body[data-page="create"] .cc-hero-mark{width:84px;height:84px;margin-bottom:14px}
  body[data-page="create"] .cc-hero-mark::before{inset:10px}
  body[data-page="create"] .cc-hero-mark svg{width:60px;height:60px}
  body[data-page="create"] .cc-hero-title{font-size:36px;line-height:1.08}
  body[data-page="create"] .cc-hero-sub{margin-top:13px;font-size:14px;line-height:1.55}
  body[data-page="create"] .cc-starters{grid-template-columns:1fr;gap:10px;margin-top:20px}
  body[data-page="create"] .cc-starter{min-height:104px;padding:18px 20px 15px}
  body[data-page="create"] .cc-starter small{margin-top:5px;font-size:12.5px}
  body[data-page="create"] .cc-starter svg{width:20px;height:20px}
  body[data-page="create"] .cc-roller{display:flex;margin-top:14px}
  body[data-page="create"] .cc-roll-text{font-size:14px}
  body[data-page="create"] .cc-dock{padding:10px 10px 14px}
  body[data-page="create"] .cc-composer{min-height:66px;padding:7px 8px;gap:4px}
  body[data-page="create"] .cc-plus{width:44px;height:44px}
  body[data-page="create"] .cc-plus svg{width:22px;height:22px}
  body[data-page="create"] .cc-input{min-height:44px;padding:10px 4px;font-size:14px}
  body[data-page="create"] .cc-send{width:46px;height:46px}
  body[data-page="create"] .cc-send svg{width:21px;height:21px}
}

@media (prefers-reduced-motion:reduce){
  body[data-page="create"] .cc-roll-line{
    transition:none!important;
  }
}