/* 1.0.337 — shared Styles, AI correction and manual adjustment hardening. */

@media (min-width: 769px) {
  /* Styles and filters use the same native preset page. */
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .left-panel-body:has(> .ai-hair-page) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-hair-page {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-hair-top {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 14px !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-styles-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-styles-tab {
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 0 10px !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-radius: 9px !important;
    background: #10151b !important;
    color: rgba(190,200,213,.78) !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-styles-tab.active {
    border-color: rgba(76,151,247,.68) !important;
    background: #17365f !important;
    color: #f5f9ff !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-hair-scroll {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 12px 14px 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.16) transparent !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-hair-scroll::-webkit-scrollbar,
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .ai-correction-scroll::-webkit-scrollbar,
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .ai-adjust-list::-webkit-scrollbar {
    width: 6px !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-hair-scroll::-webkit-scrollbar-thumb,
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .ai-correction-scroll::-webkit-scrollbar-thumb,
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .ai-adjust-list::-webkit-scrollbar-thumb {
    border-radius: 999px !important;
    background: rgba(255,255,255,.16) !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-refs {
    margin: 10px 0 0 !important;
    padding: 10px 0 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style :is(.ai-hair-grid, .ai-hair-tile, .ai-hair-thumb, .ai-hair-title) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-style .ai-hair-footer {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* AI correction: one real scroll area and a footer that does not cover cards. */
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .left-panel-body:has(> .ai-correction-page) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .ai-correction-page {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .ai-correction-intro {
    flex: 0 0 auto !important;
    margin: 0 14px !important;
    padding: 13px 0 !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .ai-correction-scroll {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 6px 14px 18px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.16) transparent !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction :is(.ai-correction-grid, .ai-correction-card, .ai-correction-card__content) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-ai-correction .ai-correction-footer {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Manual adjustment: toolbar and action stay fixed, only settings scroll. */
  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .left-panel-body:has(> .ai-adjust-page) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .ai-adjust-page {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .ai-adjust-toolbar {
    position: relative !important;
    top: auto !important;
    flex: 0 0 auto !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .ai-adjust-list {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding-right: 3px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255,255,255,.16) transparent !important;
  }

  #fotor-root .editor-shell:not(.is-mobile)
  .left-panel--tool-adjust .ai-adjust-page > .ai-hair-footer {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 768px) {
  /* Styles / filters receive the same bounded horizontal strip as Appearance. */
  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-style :is(.left-panel-body, .mobile-tool-page, .mobile-tool-content) {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-style .mobile-preset-strip,
  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .mobile-preset-strip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 2px 14px 3px 6px !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    scroll-padding-inline: 6px !important;
    scrollbar-width: none !important;
    touch-action: pan-x !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-style .mobile-preset-strip::-webkit-scrollbar,
  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .mobile-preset-strip::-webkit-scrollbar,
  #fotor-root .editor-shell.is-mobile
  .ai-correction-mobile-strip::-webkit-scrollbar {
    display: none !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust :is(.adjust-mobile-page, .adjust-mobile-body, .adjust-mobile-gridline, .adjust-mobile-slider-card) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .adjust-mobile-slider-head {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 7px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .adjust-mobile-slider-title {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .adjust-mobile-slider-right {
    min-width: 0 !important;
    margin-left: 0 !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .adjust-mobile-number {
    width: 56px !important;
    min-width: 56px !important;
    padding-inline: 7px !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .adjust-mobile-range {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* AI-correction cards keep their captions and never widen the phone. */
  #fotor-root .editor-shell.is-mobile .ai-correction-mobile-panel,
  #fotor-root .editor-shell.is-mobile .ai-correction-mobile-strip {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell.is-mobile .ai-correction-mobile-strip {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }

  #fotor-root .editor-shell.is-mobile .ai-correction-mobile-tile {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  #fotor-root .editor-shell.is-mobile .ai-correction-mobile-tile > span {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }
}

@media (max-width: 370px) {
  #fotor-root .editor-shell.is-mobile
  .left-panel--tool-adjust .adjust-mobile-number {
    width: 50px !important;
    min-width: 50px !important;
  }
}