/* Integrated story workflow: compact overview, visual timeline and in-panel page editor. */

.cx-admin-story-all-series{
  min-height:66px;
  border-color:rgba(85,222,248,.48)!important;
  background:
    linear-gradient(90deg,rgba(8,75,96,.88),rgba(3,29,42,.94)),
    repeating-linear-gradient(135deg,transparent 0 16px,rgba(101,226,248,.04) 16px 17px)!important;
}
.cx-admin-story-all-series strong{font-size:11px!important;letter-spacing:.16em!important}
.cx-admin-story-all-series.active{border-color:#67e6ff!important;box-shadow:inset 3px 0 #67e6ff,0 0 18px rgba(85,222,248,.14)}

.cx-admin-story-back{
  position:absolute;
  left:0;
  top:50%;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(85,222,248,.38);
  color:#68e4fa;
  background:#06202c;
  font:1000 17px/1 Inter,sans-serif;
  cursor:pointer;
  transform:translateY(-50%);
}
.cx-admin-story-back[hidden]{display:none!important}
.cx-admin-story-back:hover,.cx-admin-story-back:focus-visible{outline:0;border-color:#71ebff;background:#0a3546}
.cx-admin-chapter-form .cx-admin-editor-heading>div:first-child{position:relative}
.cx-admin-chapter-form.is-story-detail .cx-admin-editor-heading>div:first-child{padding-left:48px}

/* The catalogue is a real overview; the editor replaces it after opening a story. */
.cx-admin-chapter-form:not(.is-story-detail) .cx-admin-editor-content{display:block!important}
.cx-admin-chapter-form:not(.is-story-detail) .cx-admin-chapter-library{width:100%}
.cx-admin-chapter-form:not(.is-story-detail) .cx-admin-chapter-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,280px));
  align-items:stretch;
  gap:10px;
}
.cx-admin-chapter-form:not(.is-story-detail) .cx-admin-chapter-tab{width:100%;min-width:0;max-width:280px}
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-library{display:none!important}
.cx-admin-chapter-form.is-story-detail #cxAdminStoryWorkOpen,
.cx-admin-chapter-form.is-story-detail #cxAdminStoryAiOpen{display:none!important}
.cx-admin-chapter-form.is-story-detail .cx-admin-editor-content{
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-areas:
    "metadata"
    "notice"
    "timeline"
    "dropzone"
    "pages"
    "dialogue"
    "status"!important;
  gap:10px!important;
}

/* Only the editable title and mode remain in the story header. */
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata{
  grid-area:metadata;
  justify-self:start;
  width:max-content!important;
  max-width:100%;
  display:grid!important;
  grid-template-columns:minmax(260px,420px) 120px!important;
  grid-template-areas:"name mode"!important;
  gap:8px!important;
  padding:7px!important;
  border:1px solid rgba(85,222,248,.2);
  background:rgba(3,20,29,.72);
}
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata>label:first-child{width:min(420px,50vw)}
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata>.cx-admin-chapter-visible,
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata>#cxAdminChapterDelete,
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-toolbar-actions,
.cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata>#cxAdminChapterAccess{display:none!important}
.cx-admin-chapter-page-heading{display:none!important}
.cx-admin-chapter-dropzone[hidden]{display:none!important}

/* Timeline: thumbnails are nodes; narration dots sit strictly between them. */
.cx-admin-story-timeline{
  grid-area:timeline;
  min-height:78px!important;
  align-items:center!important;
  gap:0!important;
  padding:8px 10px!important;
}
.cx-admin-story-timeline .cx-admin-story-timeline-ai{
  flex:0 0 152px;
  width:152px;
  height:48px;
  margin-right:8px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid rgba(130,113,255,.45);
  color:#d8d0ff;
  background:linear-gradient(135deg,rgba(68,47,139,.74),rgba(17,26,54,.9));
  cursor:pointer;
}
.cx-admin-story-timeline-ai span{display:grid;place-items:center;width:24px;height:24px;border:1px solid #9d8aff;border-radius:50%;font:1000 8px/1 Inter,sans-serif}
.cx-admin-story-timeline-ai strong{font:1000 7px/1.25 Inter,sans-serif;letter-spacing:.08em}
.cx-admin-story-timeline .cx-admin-story-timeline-navigation{
  flex:0 0 96px;
  width:96px;
  height:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-right:16px;
  border:1px solid rgba(85,222,248,.2);
  background:rgba(3,20,29,.9);
}
.cx-admin-story-timeline .cx-admin-story-timeline-navigation>button{
  width:auto!important;
  min-width:0!important;
  height:46px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  place-content:center!important;
  gap:3px!important;
  padding:0!important;
  border:0!important;
  color:#73d8eb!important;
  background:transparent!important;
  text-align:center!important;
  cursor:pointer;
}
.cx-admin-story-timeline .cx-admin-story-timeline-navigation>button+button{border-left:1px solid rgba(85,222,248,.18)!important}
.cx-admin-story-timeline .cx-admin-story-timeline-navigation span{font:1000 15px/1 Inter,sans-serif}
.cx-admin-story-timeline .cx-admin-story-timeline-navigation small{font:1000 5px/1 Inter,sans-serif;letter-spacing:.08em}
.cx-admin-story-timeline .cx-admin-story-timeline-navigation>button:disabled{opacity:.2;cursor:default}
.cx-admin-story-timeline .cx-admin-story-timeline-page{
  flex:0 0 88px!important;
  width:88px!important;
  height:56px!important;
  padding:0!important;
  display:block!important;
  border:1px solid rgba(85,222,248,.2)!important;
  background:#020a0f!important;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page::before,
.cx-admin-story-timeline .cx-admin-story-timeline-page::after,
.cx-admin-story-timeline .cx-admin-story-timeline-page>i{display:none!important}
.cx-admin-story-timeline .cx-admin-story-timeline-page img{
  width:100%!important;
  height:100%!important;
  border:0!important;
  object-fit:cover;
}
.cx-admin-story-timeline .cx-admin-story-timeline-page.active{z-index:4;border-color:#dffbff!important;transform:scale(1.1);box-shadow:0 0 0 3px rgba(103,230,255,.25),0 0 24px rgba(85,222,248,.48)!important}
.cx-admin-story-timeline .cx-admin-story-timeline-narration{
  flex:0 0 38px!important;
  width:38px!important;
  height:56px!important;
  margin:0!important;
  display:block!important;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration::before,
.cx-admin-story-timeline .cx-admin-story-timeline-narration::after{
  z-index:0!important;
  top:50%!important;
  bottom:auto!important;
  height:1px!important;
  background:rgba(85,222,248,.28)!important;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration::before{left:0!important;right:50%!important}
.cx-admin-story-timeline .cx-admin-story-timeline-narration::after{left:50%!important;right:0!important}
.cx-admin-story-timeline .cx-admin-story-timeline-narration>i{
  z-index:2!important;
  top:50%!important;
  bottom:auto!important;
  width:12px!important;
  height:12px!important;
  transform:translate(-50%,-50%)!important;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.is-terminal{
  flex-basis:54px!important;
  width:54px!important;
}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.is-terminal>i{width:23px!important;height:23px!important;border-width:3px!important}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.active>i{width:18px!important;height:18px!important;border-color:#f2fdff!important;outline:3px solid rgba(103,230,255,.48);outline-offset:4px;box-shadow:0 0 22px #67e6ff!important}
.cx-admin-story-timeline .cx-admin-story-timeline-narration.is-terminal.active>i{width:29px!important;height:29px!important}
.cx-admin-story-timeline .cx-admin-story-timeline-add{
  flex:0 0 46px;
  width:46px;
  height:46px;
  margin-left:12px;
  border:1px dashed rgba(85,222,248,.62);
  color:#64e6fd;
  background:rgba(4,30,42,.7);
  font:400 28px/1 Inter,sans-serif;
  cursor:pointer;
}
.cx-admin-story-timeline .cx-admin-story-timeline-add:hover{border-style:solid;background:#0a3546}

/* Narration view between two illustrated pages. */
.cx-admin-story-narration-editor{
  width:100%;
  min-height:410px;
  display:grid;
  grid-template-columns:minmax(250px,380px) minmax(360px,650px) minmax(250px,380px);
  justify-content:center;
  align-items:center;
  gap:20px;
  padding:22px;
  box-sizing:border-box;
  border:1px solid rgba(255,178,91,.26);
  background:radial-gradient(circle at 50% 50%,rgba(83,53,20,.18),transparent 58%),rgba(2,12,19,.86);
}
.cx-admin-story-narration-editor figure{
  width:100%;
  margin:0;
  aspect-ratio:16/9;
  overflow:hidden;
  border:1px solid rgba(85,222,248,.25);
  background:#01070b;
}
.cx-admin-story-narration-editor figure.empty{visibility:hidden}
.cx-admin-story-narration-editor figure img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.82) brightness(.82)}
.cx-admin-story-narration-copy{display:grid;gap:10px}
.cx-admin-story-narration-copy header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cx-admin-story-narration-copy header>strong{color:#ffd69a;font:1000 11px/1 Inter,sans-serif;letter-spacing:.14em}
.cx-admin-story-narration-copy textarea{
  width:100%;
  min-height:210px;
  box-sizing:border-box;
  padding:16px;
  resize:vertical;
  border:1px solid rgba(255,183,92,.3);
  outline:0;
  color:#f7fbfd;
  background:rgba(5,18,25,.92);
  font:750 11px/1.55 Inter,sans-serif;
}
.cx-admin-story-narration-copy textarea:focus{border-color:#ffc26d;box-shadow:0 0 0 2px rgba(255,186,98,.08)}
.cx-admin-story-inline-ai,.cx-admin-story-page-file-actions .ai{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(145,126,255,.42);
  color:#dcd5ff;
  background:rgba(43,34,91,.74);
  font:1000 7px/1 Inter,sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
}

/* The former fullscreen page modal is now a normal editor panel under the timeline. */
.cx-admin-story-dialogue-modal.is-integrated{
  grid-area:dialogue;
  position:static!important;
  z-index:auto!important;
  inset:auto!important;
  width:100%!important;
  min-width:0;
  display:block!important;
  padding:0!important;
}
.cx-admin-story-dialogue-modal.is-integrated>.cx-admin-story-dialogue-backdrop{display:none!important}
.cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-dialog{
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto auto minmax(620px,78vh) auto!important;
  overflow:visible!important;
  border-color:rgba(85,222,248,.3)!important;
  box-shadow:none!important;
  contain:inline-size;
}
.cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-tools [data-story-dialogue-close]{display:none!important}
.cx-admin-story-page-editor-copy{
  display:grid;
  grid-template-columns:minmax(220px,320px) minmax(360px,1fr) max-content;
  align-items:end;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid rgba(85,222,248,.18);
  background:rgba(3,21,30,.94);
}
.cx-admin-story-page-editor-copy label{display:grid;gap:5px;color:#79a7b6;font:1000 7px/1 Inter,sans-serif;letter-spacing:.12em}
.cx-admin-story-page-editor-copy input,.cx-admin-story-page-editor-copy textarea{
  box-sizing:border-box;
  width:100%;
  border:1px solid rgba(85,222,248,.24);
  outline:0;
  color:#effcff;
  background:#03121b;
  font:800 9px/1.4 Inter,sans-serif;
}
.cx-admin-story-page-editor-copy input{height:38px;padding:0 11px}
.cx-admin-story-page-editor-copy textarea{height:76px;min-height:76px;padding:10px;resize:vertical}
.cx-admin-story-page-editor-copy input:focus,.cx-admin-story-page-editor-copy textarea:focus{border-color:#67e6ff}
.cx-admin-story-page-file-actions{display:flex;align-items:center;gap:6px;padding-bottom:1px}
.cx-admin-story-page-file-actions>button{
  min-height:38px;
  padding:0 11px;
  border:1px solid rgba(85,222,248,.28);
  color:#b8d7e1;
  background:#06202c;
  font:1000 7px/1 Inter,sans-serif;
  letter-spacing:.07em;
  white-space:nowrap;
  cursor:pointer;
}
.cx-admin-story-page-file-actions>button.danger{border-color:rgba(255,88,130,.34);color:#ff9ab6;background:rgba(58,8,25,.72)}
.cx-admin-chapter-workspace.is-noninteractive .cx-admin-story-page-dialogue-field,
.cx-admin-chapter-workspace.is-noninteractive .cx-admin-story-page-file-actions .ai,
.cx-admin-chapter-workspace.is-noninteractive .cx-admin-story-dialogue-config,
.cx-admin-chapter-workspace.is-noninteractive .cx-admin-story-dialogue-dialog>footer{display:none!important}
.cx-admin-chapter-workspace.is-noninteractive .cx-admin-story-dialogue-dialog{grid-template-rows:auto auto!important}
.cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-config{
  width:100%;
  max-width:100%;
  height:min(78vh,900px);
  min-height:620px;
  grid-template-columns:clamp(190px,17vw,260px) minmax(0,1fr) clamp(210px,19vw,290px);
}
.cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-canvas{width:min(100%,calc((78vh - 70px)*var(--story-page-ratio)))}
.cx-admin-story-ai-modal[data-target-kind] .cx-admin-story-ai-global-actions{display:none!important}
.cx-admin-story-ai-modal[data-target-kind] .cx-admin-story-ai-steps{visibility:hidden}

@media(max-width:1280px){
  .cx-admin-story-page-editor-copy{grid-template-columns:240px minmax(300px,1fr)}
  .cx-admin-story-page-file-actions{grid-column:1/-1}
  .cx-admin-story-narration-editor{grid-template-columns:minmax(210px,320px) minmax(300px,1fr) minmax(210px,320px)}
  .cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-dialog{grid-template-rows:auto auto auto auto!important}
  .cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-config{
    height:auto;
    grid-template-columns:190px minmax(0,1fr)!important;
    grid-template-rows:minmax(620px,76vh) auto;
  }
  .cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-stage{grid-template-columns:38px minmax(0,1fr) 38px}
  .cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-bubble-inspector{grid-column:1/-1;max-height:340px;border-top:1px solid rgba(255,125,184,.2);border-left:0}
}
@media(max-width:900px){
  .cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata{width:100%!important;grid-template-columns:1fr 120px!important}
  .cx-admin-chapter-form.is-story-detail .cx-admin-chapter-metadata>label:first-child{width:auto}
  .cx-admin-story-narration-editor{grid-template-columns:1fr;gap:12px}
  .cx-admin-story-narration-editor figure{max-width:420px;justify-self:center}
  .cx-admin-story-narration-editor figure.empty{display:none}
  .cx-admin-story-page-editor-copy{grid-template-columns:1fr}
  .cx-admin-story-page-file-actions{grid-column:auto;flex-wrap:wrap}
  .cx-admin-story-dialogue-modal.is-integrated .cx-admin-story-dialogue-config{grid-template-columns:190px minmax(0,1fr) 220px}
}