/* Full-screen flashcard creation flow. Loaded after the existing flashcard styles. */
html.fc-create-flow-locked,
body.fc-create-flow-locked{
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

.fc-modal-backdrop.fc-create-fullscreen{
  position:fixed!important;
  inset:0!important;
  z-index:2147482500!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:stretch!important;
  width:100%!important;
  height:100dvh!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  background:#050b16!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overscroll-behavior:none!important;
  touch-action:none!important;
}

.fc-modal-backdrop.fc-create-fullscreen > .fc-modal.fc-create-screen{
  position:relative!important;
  inset:auto!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:none!important;
  margin:0!important;
  padding:14px clamp(14px,3.2vw,28px) calc(14px + env(safe-area-inset-bottom))!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior-x:none!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch;
  border:0!important;
  border-radius:0!important;
  background:
    radial-gradient(circle at 18% 4%,rgba(46,123,255,.12),transparent 28%),
    radial-gradient(circle at 84% 12%,rgba(34,211,110,.055),transparent 24%),
    #050b16!important;
  box-shadow:none!important;
}

.fc-create-screen *,
.fc-create-screen *::before,
.fc-create-screen *::after{box-sizing:border-box;min-width:0}

.fc-create-screen .fc-modal-head{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  margin:0 0 14px!important;
  padding:10px 0 11px!important;
  background:linear-gradient(180deg,rgba(5,11,22,.99) 0%,rgba(5,11,22,.96) 76%,rgba(5,11,22,0) 100%)!important;
}

.fc-create-screen .fc-modal-head h2{
  margin:0!important;
  color:#f5f7fb!important;
  font-size:clamp(22px,4.8vw,30px)!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
}

.fc-create-screen .fc-modal-subtitle{max-width:680px!important;font-size:12px!important}
.fc-create-screen .fc-icon-btn[data-close]{position:relative!important;top:auto!important;right:auto!important;flex:0 0 38px!important}

.fc-create-screen .fc-form-grid,
.fc-create-screen .fc-editor-list,
.fc-create-screen .fc-editor-card,
.fc-create-screen .fc-card-fields,
.fc-create-screen .fc-field,
.fc-create-screen .fc-cover-picker,
.fc-create-screen .fc-img-line,
.fc-create-screen .fc-ai-create,
.fc-create-screen .fc-create-choice{
  width:100%!important;
  max-width:100%!important;
}

.fc-create-screen input,
.fc-create-screen textarea,
.fc-create-screen select{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

.fc-create-screen textarea{
  resize:vertical!important;
  word-break:break-word!important;
}

.fc-create-screen .fc-editor-card{
  overflow:hidden!important;
}

.fc-create-screen .fc-editor-list{
  overflow:visible!important;
}

/* Keep the editor actions attached to the viewport without becoming a giant tile. */
.fc-create-screen.fc-editor-modal > .fc-actions{
  position:sticky!important;
  left:auto!important;
  right:auto!important;
  bottom:0!important;
  z-index:28!important;
  display:grid!important;
  grid-template-columns:auto minmax(140px,1fr)!important;
  gap:8px!important;
  width:100%!important;
  margin:16px 0 0!important;
  padding:10px 0 calc(10px + env(safe-area-inset-bottom))!important;
  border-top:1px solid rgba(80,140,255,.16)!important;
  background:linear-gradient(180deg,rgba(5,11,22,.72),rgba(5,11,22,.98) 28%)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

.fc-create-screen.fc-editor-modal > .fc-actions [data-add-card],
.fc-create-screen.fc-editor-modal > .fc-actions [data-save]{
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
}

/* Choice and AI setup remain focused even though the whole flow owns the screen. */
.fc-create-screen.fc-create-choice-screen .fc-create-choice,
.fc-create-screen.fc-create-ai-screen .fc-ai-create{
  width:min(680px,100%)!important;
  margin:clamp(18px,7dvh,72px) auto 0!important;
}

/* AI generation uses the exact same loading-card classes/JSON renderer as chat file creation. */
.file-creation-json-loading.fc-flashcards-ai-loading{
  z-index:2147483600!important;
  background:rgba(2,8,19,.86)!important;
}

.file-creation-json-loading.fc-flashcards-ai-loading .file-creation-loading-card{
  width:min(320px,88vw)!important;
}

@media(max-width:760px){
  .fc-modal-backdrop.fc-create-fullscreen > .fc-modal.fc-create-screen{
    padding:10px 14px calc(10px + env(safe-area-inset-bottom))!important;
  }
  .fc-create-screen .fc-modal-head{padding-top:8px!important;margin-bottom:10px!important}
  .fc-create-screen.fc-editor-modal .fc-form-grid{grid-template-columns:1fr!important}
  .fc-create-screen.fc-editor-modal .fc-card-fields{grid-template-columns:1fr!important}
  .fc-create-screen.fc-editor-modal > .fc-actions{grid-template-columns:auto 1fr!important}
  .fc-create-screen.fc-create-choice-screen .fc-create-choice,
  .fc-create-screen.fc-create-ai-screen .fc-ai-create{margin-top:18px!important}
}

@media(max-width:430px){
  .fc-modal-backdrop.fc-create-fullscreen > .fc-modal.fc-create-screen{padding-left:12px!important;padding-right:12px!important}
  .fc-create-screen .fc-modal-head h2{font-size:23px!important}
  .fc-create-screen.fc-editor-modal > .fc-actions{gap:7px!important}
}