/* A native modal inspector with the same form controls on narrow screens. */
.kconv-admin .kconv-properties-dialog:not([open]) {
  display: none
}

.kconv-admin .kconv-properties-dialog {
  position: fixed;
  inset: auto 0 0;
  width: 100%;
  max-width: 620px;
  height: auto;
  max-height: 90dvh;
  margin: 0 auto;
  padding: 0;
  border: 1px solid #cbd5c5;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -18px 70px #14271c26;
  background: #fff;
  color: #263f31;
  overflow: hidden;
  font-family: inherit
}

.kconv-admin .kconv-properties-dialog[open] {
  display: flex;
  flex-direction: column
}

.kconv-properties-dialog::backdrop {
  background: #152a23a8;
  backdrop-filter: blur(2px)
}

.kconv-admin .kconv-properties-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-shrink: 0;
  padding: 20px 22px 17px;
  border-bottom: 1px solid #dfe6da;
  background: #f6f8f1
}

.kconv-properties-dialog-head>div {
  min-width: 0
}

.kconv-admin .kconv-properties-dialog-head h2 {
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -.025em;
  margin: 0;
  color: #1b3027
}

.kconv-admin .kconv-properties-dialog-head p {
  font-size: 12px;
  line-height: 1.5;
  color: #52634f;
  margin: 6px 0 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden
}

.kconv-admin .kconv-properties-dialog-head .button {
  min-width: 64px;
  min-height: 42px;
  font-size: 13px
}

.kconv-admin .kconv-properties-dialog-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  scrollbar-gutter: stable
}

.kconv-admin .kconv-properties-dialog .kconv-properties-rail {
  display: block !important;
  border: 0;
  padding: 4px 22px 24px;
  overflow: visible
}

.kconv-properties-dialog .kconv-property-heading,
.kconv-properties-dialog .kconv-property-footer {
  display: none
}

.kconv-admin .kconv-properties-dialog #kconv-field-inspector h3 {
  font-size: 13px;
  color: #52634f;
  margin: 19px 0 22px;
  letter-spacing: 0
}

.kconv-admin .kconv-properties-dialog .kconv-builder-control {
  font-size: 13px;
  color: #344d3e;
  margin: 19px 0
}

.kconv-admin .kconv-properties-dialog .kconv-builder-control input:not([type=checkbox]),
.kconv-admin .kconv-properties-dialog .kconv-builder-control textarea,
.kconv-admin .kconv-properties-dialog .kconv-builder-control select {
  font-size: 16px;
  min-height: 44px;
  line-height: 1.5;
  background: #fff;
  border-color: #bfcbbc;
  padding: 9px 11px
}

.kconv-admin .kconv-properties-dialog .kconv-builder-control input[type=checkbox] {
  width: 22px;
  height: 22px
}

.kconv-admin .kconv-properties-dialog .kconv-inspector-actions {
  gap: 10px;
  flex-wrap: wrap
}

.kconv-admin .kconv-properties-dialog .kconv-inspector-actions .button {
  min-height: 40px;
  font-size: 12px
}

.kconv-admin .kconv-properties-dialog #kconv-field-inspector summary,
.kconv-admin .kconv-properties-dialog #kconv-field-inspector .description {
  font-size: 12px;
  line-height: 1.6;
  color: #52634f
}

.kconv-admin .kconv-properties-dialog #kconv-field-inspector summary {
  min-height: 36px
}

.kconv-admin .kconv-properties-dialog-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 22px max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid #dfe6da;
  background: #fff
}

.kconv-admin .kconv-properties-dialog-foot p {
  margin: 0;
  max-width: 230px;
  font-size: 11px;
  line-height: 1.5;
  color: #52634f
}

.kconv-admin .kconv-properties-dialog-foot .button {
  min-height: 44px;
  font-size: 13px;
  flex-shrink: 0
}

html.kconv-properties-open {
  overflow: hidden;
  scroll-behavior: auto
}

@media(max-width:782px) {
  .kconv-mobile-properties-ready .kconv-workspace-grid {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0
  }

  .kconv-mobile-properties-ready .kconv-fields-rail {
    padding: 0 16px 14px;
    border-inline-end: 0;
    border-bottom: 1px solid #dce4d6;
    overflow: visible
  }

  .kconv-mobile-properties-ready .kconv-rail-tabs {
    justify-content: flex-start;
    padding: 12px 0;
    gap: 5px
  }

  .kconv-mobile-properties-ready .kconv-rail-tabs button {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 9px 14px;
    min-height: 38px
  }

  .kconv-mobile-properties-ready #kconv-field-list {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    max-height: none;
    padding: 3px 2px 9px;
    scrollbar-width: thin
  }

  .kconv-mobile-properties-ready .kconv-field-item {
    min-width: 156px;
    max-width: 205px;
    flex-shrink: 0;
    margin: 0;
    border-color: #dce4d6
  }

  .kconv-mobile-properties-ready .kconv-field-select {
    padding: 10px 5px;
    min-height: 51px
  }

  .kconv-mobile-properties-ready .kconv-field-actions {
    opacity: 1;
    gap: 4px
  }

  .kconv-mobile-properties-ready .kconv-field-actions .button {
    min-height: 23px;
    min-width: 24px;
    font-size: 12px
  }

  .kconv-mobile-properties-ready .kconv-field-grip {
    min-width: 22px
  }

  .kconv-mobile-properties-ready .kconv-field-palette {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px
  }

  .kconv-mobile-properties-ready .kconv-palette-item {
    min-height: 76px;
    padding: 10px
  }

  .kconv-mobile-properties-ready .kconv-palette-item>strong {
    font-size: 11px
  }

  .kconv-mobile-properties-ready .kconv-rail-tip,
  .kconv-mobile-properties-ready .kconv-rail-footer {
    display: none
  }

  .kconv-mobile-properties-ready .kconv-add-outline {
    width: auto;
    margin: 5px 0 0;
    padding: 9px 12px;
    min-height: 38px;
    font-size: 12px
  }

  .kconv-mobile-properties-ready .kconv-canvas-stage {
    padding: 18px 16px 24px
  }

  .kconv-mobile-properties-ready .kconv-canvas-caption {
    font-size: 11px
  }

  .kconv-mobile-properties-ready .kconv-canvas-toolbar {
    height: 60px;
    padding: 11px 16px
  }

  .kconv-mobile-properties-ready .kconv-mode-switch button,
  .kconv-mobile-properties-ready .kconv-preview-switch button {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px
  }

  .kconv-mobile-properties-ready .kconv-history-buttons {
    display: flex;
    padding-right: 0
  }

  .kconv-mobile-properties-ready .kconv-history-buttons .button {
    min-height: 32px;
    padding: 6px;
    font-size: 11px
  }

  .kconv-editor-app .kconv-savebar {
    gap: 12px;
    padding: 14px 16px;
    flex-wrap: wrap
  }

  .kconv-editor-identity {
    flex-basis: 100%
  }

  .kconv-editor-app .kconv-title-label input {
    max-width: none
  }

  .kconv-editor-app .kconv-save-actions {
    width: 100%;
    justify-content: flex-end;
    gap: 9px
  }

  .kconv-editor-app .kconv-save-actions .kconv-history-buttons {
    margin-inline-end: auto
  }

  .kconv-editor-app .kconv-save-actions>select {
    min-height: 38px;
    font-size: 12px
  }

  .kconv-editor-app .kconv-save-actions>.button-primary {
    min-height: 40px;
    font-size: 12px
  }

  .kconv-editor-app .kconv-workspace-bar {
    padding: 0 16px;
    gap: 12px
  }

  .kconv-editor-app .kconv-workspace-tabs {
    gap: 17px;
    min-height: 48px;
    overflow-x: auto;
    scrollbar-width: thin
  }

  .kconv-editor-app .kconv-workspace-tabs>button {
    font-size: 12px;
    flex-shrink: 0
  }

  .kconv-editor-app .kconv-workspace-tabs small {
    display: none
  }

  .kconv-editor-app .kconv-command-trigger {
    display: none
  }

  .kconv-editor-app .kconv-workspace-tools .button {
    font-size: 11px;
    padding: 7px 10px;
    min-height: 34px
  }

  .kconv-editor-app .kconv-workspace-tools {
    flex-shrink: 0;
    gap: 8px
  }

  .kconv-editor-app .kconv-config-panel {
    padding: 24px 16px;
    min-height: 0
  }

  .kconv-editor-app .kconv-config-heading {
    margin-bottom: 22px
  }

  .kconv-editor-app .kconv-config-heading h2 {
    font-size: 25px
  }
}

@media(max-width:420px) {
  .kconv-admin .kconv-properties-dialog-head {
    padding: 17px 18px 14px
  }

  .kconv-admin .kconv-properties-dialog .kconv-properties-rail {
    padding: 3px 18px 22px
  }

  .kconv-admin .kconv-properties-dialog-foot {
    padding-left: 18px;
    padding-right: 18px;
    gap: 12px
  }

  .kconv-properties-dialog-foot p {
    max-width: 170px
  }

  .kconv-mobile-properties-ready .kconv-field-palette {
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }
}

@media(prefers-reduced-motion:reduce) {

  .kconv-properties-dialog,
  .kconv-properties-dialog * {
    scroll-behavior: auto !important;
    transition: none !important
  }
}

/* At phone widths the form stays in view; extra tools open only when requested. */
.kconv-admin .kconv-mobile-field-tools[hidden],
.kconv-admin .kconv-mobile-secondary[hidden],
.kconv-admin .kconv-mobile-secondary [hidden] {
  display: none !important
}

@media(max-width:782px) {
  .kconv-editor-app .kconv-mobile-tools-ready .kconv-savebar {
    padding: 10px 16px 12px;
    gap: 8px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-title-label input {
    min-height: 36px;
    margin: 0;
    padding: 3px 6px;
    font-size: 16px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-editor-identity {
    gap: 10px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-editor-meta {
    margin-top: 1px;
    font-size: 10px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-save-actions {
    position: relative;
    gap: 7px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-save-actions>.button {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 12px;
    white-space: normal;
    text-align: center
  }

  .kconv-editor-app .kconv-mobile-secondary {
    margin-inline-end: auto;
    flex-shrink: 0
  }

  .kconv-admin .kconv-mobile-secondary>summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid #cbd7c5;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
    font-weight: 650;
    list-style: none;
    cursor: pointer;
    color: #304a39
  }

  .kconv-admin .kconv-mobile-secondary>summary::-webkit-details-marker {
    display: none
  }

  .kconv-admin .kconv-mobile-secondary>summary::after {
    content: '⌄';
    font-size: 15px;
    line-height: 1
  }

  .kconv-admin .kconv-mobile-secondary[open]>summary {
    background: #eff5e8;
    border-color: #94ad83
  }

  .kconv-admin .kconv-mobile-secondary-body {
    position: absolute;
    top: calc(100% + 7px);
    inset-inline-start: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: min(300px, 100%);
    max-height: 65dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
    border: 1px solid #becfb3;
    border-radius: 10px;
    box-shadow: 0 12px 35px #193c2726;
    background: #fff
  }

  .kconv-admin .kconv-mobile-secondary-body .kconv-history-buttons {
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0
  }

  .kconv-admin .kconv-mobile-secondary-body .kconv-history-buttons .button {
    flex: 1;
    border: 1px solid #d9e0d5;
    min-height: 42px;
    font-size: 13px
  }

  .kconv-admin .kconv-mobile-secondary-body>.button,
  .kconv-admin .kconv-mobile-secondary-body .kconv-template-trigger,
  .kconv-admin .kconv-mobile-secondary-body .kconv-command-trigger {
    display: flex;
    width: 100%;
    margin: 0;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid #d9e0d5;
    border-radius: 7px;
    font-size: 13px;
    background: #fff
  }

  .kconv-admin .kconv-mobile-width-label {
    margin-top: 5px;
    font-size: 12px;
    font-weight: 650;
    color: #4e6348
  }

  .kconv-admin .kconv-mobile-secondary .kconv-preview-switch {
    align-self: stretch
  }

  .kconv-admin .kconv-mobile-secondary .kconv-preview-switch button {
    flex: 1;
    min-height: 40px;
    font-size: 13px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-authoring-state {
    padding: 9px 16px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-authoring-state p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-authoring-state .button {
    margin-top: 5px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-workspace-bar {
    min-height: 46px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-workspace-tabs {
    min-height: 46px
  }

  .kconv-admin .kconv-mobile-field-tools {
    background: #fff;
    border-bottom: 1px solid #dce4d6
  }

  .kconv-admin .kconv-mobile-field-tools>summary {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 650;
    color: #304a39;
    cursor: pointer;
    list-style: none
  }

  .kconv-admin .kconv-mobile-field-tools>summary::-webkit-details-marker {
    display: none
  }

  .kconv-admin .kconv-mobile-field-tools>summary::before {
    content: '+';
    font-size: 20px;
    line-height: 1;
    font-weight: 500
  }

  .kconv-admin .kconv-mobile-field-tools[open]>summary::before {
    content: '−'
  }

  .kconv-admin .kconv-mobile-field-count {
    margin-inline-start: auto;
    padding: 0 7px;
    border-radius: 4px;
    background: #eff4e8;
    font-size: 12px;
    color: #526947
  }

  .kconv-admin .kconv-mobile-field-tools[open]>summary {
    background: #f6f8f1;
    border-bottom: 1px solid #e3e9dd
  }

  .kconv-mobile-tools-ready .kconv-fields-rail {
    border-bottom: 0
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-field-item {
    min-width: 190px;
    max-width: 235px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-field-grip {
    min-width: 30px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-field-actions .button {
    min-width: 32px;
    min-height: 32px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-fields-rail #kconv-field-search {
    min-height: 44px;
    font-size: 16px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-canvas-toolbar {
    height: 50px;
    min-height: 50px;
    padding: 6px 16px;
    justify-content: flex-start
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-mode-switch button {
    min-height: 36px;
    padding: 6px 16px;
    font-size: 13px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-canvas-stage {
    padding: 12px 16px 24px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-canvas-caption {
    margin-bottom: 10px;
    font-size: 12px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-canvas-intro {
    padding: 20px 20px 12px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-canvas-intro h2 {
    font-size: 22px;
    margin-bottom: 6px
  }

  .kconv-mobile-tools-ready[data-kconv-mode=test] .kconv-mobile-field-tools {
    display: none
  }
}

@media(max-width:360px) {
  .kconv-editor-app .kconv-mobile-tools-ready .kconv-savebar {
    padding-left: 12px;
    padding-right: 12px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-save-actions {
    gap: 5px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-save-actions>.button,
  .kconv-admin .kconv-mobile-secondary>summary {
    padding-left: 7px;
    padding-right: 7px
  }

  .kconv-editor-app .kconv-mobile-tools-ready .kconv-workspace-tabs {
    gap: 16px;
    justify-content: flex-start
  }
}

@media(max-width:782px) {
  .kconv-admin .kconv-mobile-secondary-body .kconv-guided-start {
    display: block;
    padding: 10px 0 0;
    margin: 0;
    border: 0;
    border-top: 1px solid #dce4d6;
    background: #fff
  }

  .kconv-admin .kconv-mobile-secondary-body .kconv-guided-start>span {
    font-size: 13px
  }

  .kconv-admin .kconv-mobile-secondary-body .kconv-guided-start>div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 5px
  }

  .kconv-admin .kconv-mobile-secondary-body .kconv-guided-start button {
    min-height: 42px;
    padding: 8px;
    font-size: 13px
  }

  .kconv-admin .kconv-mobile-tools-ready .kconv-workspace-tools {
    display: none !important
  }
}

/* Keep every property reachable when a short viewport and long field name meet. */
@media(max-width:782px) and (max-height:400px) {
  .kconv-admin .kconv-properties-dialog[open] {
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain
  }

  .kconv-admin .kconv-properties-dialog-body {
    overflow: visible
  }
}