.sentence-split-editor {
  /* Ctyri svetle barvy, ktere se u vet cykluji: prouzek u kazde vety,
     plocha jen u aktivni (kurzor vlevo). */
  --sse-c0: #bae6fd; --sse-c0-fill: #e0f2fe;
  --sse-c1: #bbf7d0; --sse-c1-fill: #dcfce7;
  --sse-c2: #fde68a; --sse-c2-fill: #fef3c7;
  --sse-c3: #fed7aa; --sse-c3-fill: #ffedd5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
}

.sentence-split-editor__input,
.sentence-split-editor__preview-column {
  min-width: 0;
  padding: 1.5rem;
}

.sentence-split-editor__input {
  border-right: 1px solid var(--line, #e2e8f0);
}

.sentence-split-editor .form-control:focus,
.sentence-split-editor .form-select:focus {
  border-color: var(--accent, #f97316);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .15);
  outline: none;
}

.sentence-split-editor__textarea {
  position: relative;
  z-index: 1;
  min-height: 19rem;
  resize: vertical;
  padding: .75rem 1rem;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
  background-color: transparent;
  font-size: .9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.sentence-split-editor .sentence-split-editor__textarea,
.sentence-split-editor .sentence-split-editor__textarea:focus {
  background-color: transparent;
}

/* Vrstva pod textareou: rozmer, pismo a odsazeni ji nastavuje JS podle
   textarey, tady jsou jen veci, ktere se nemeni. */
.sentence-split-editor__field {
  position: relative;
}

.sentence-split-editor__backdrop {
  position: absolute;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  border-style: solid;
  border-color: transparent;
  background: var(--bs-body-bg, #fff);
  color: transparent;
  pointer-events: none;
}

.sentence-split-editor__layer {
  position: relative;
}

/* pre-wrap jen na zrcadleny text: na obalu by se vykreslily i mezery
   a odradkovani ze sablony mezi elementy. */
.sentence-split-editor__mirror {
  position: relative;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.sentence-split-editor__bands {
  position: absolute;
  inset: 0;
}

.sentence-split-editor__band {
  position: absolute;
  left: -10px;
  right: -10px;
  border-radius: 6px;
  box-shadow: inset 5px 0 0 var(--sse-stripe);
  transition: background-color .15s, box-shadow .15s;
}

.sentence-split-editor__band--inline {
  right: auto;
  border-radius: 3px;
  background: var(--sse-fill);
  box-shadow: none;
}

.sentence-split-editor .is-c0 { --sse-stripe: var(--sse-c0); --sse-fill: var(--sse-c0-fill); }
.sentence-split-editor .is-c1 { --sse-stripe: var(--sse-c1); --sse-fill: var(--sse-c1-fill); }
.sentence-split-editor .is-c2 { --sse-stripe: var(--sse-c2); --sse-fill: var(--sse-c2-fill); }
.sentence-split-editor .is-c3 { --sse-stripe: var(--sse-c3); --sse-fill: var(--sse-c3-fill); }

.sentence-split-editor__band.is-active,
.sentence-split-editor__part.is-active {
  background: var(--sse-fill);
  box-shadow: inset 4px 0 0 var(--accent, #f97316);
}

.sentence-split-editor__band--inline.is-active {
  background: var(--sse-stripe);
  box-shadow: none;
}

.sentence-split-editor__band.is-hover {
  box-shadow: inset 0 0 0 1.5px rgba(15, 23, 42, .28);
}

.sentence-split-editor__separator-row {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.sentence-split-editor__separator {
  max-width: 14rem;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
}

.sentence-split-editor__custom {
  max-width: 12rem;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
}

.sentence-split-editor__preview {
  position: relative;
  min-height: 19rem;
  max-height: 26rem;
  border: 1.5px solid var(--line, #e2e8f0);
  border-radius: var(--radius-sm, 8px);
}

.sentence-split-editor__empty {
  padding: 2rem;
  color: var(--muted, #64748b);
  font-size: .875rem;
  text-align: center;
}

.sentence-split-editor__part {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem .85rem .85rem 1.1rem;
  border-bottom: 1px solid var(--line, #e2e8f0);
  box-shadow: inset 5px 0 0 var(--sse-stripe, transparent);
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s;
}

.sentence-split-editor__part:hover:not(.is-active) {
  background: rgba(15, 23, 42, .03);
}

.sentence-split-editor__part:last-child {
  border-bottom: 0;
}

.sentence-split-editor__part-number {
  flex: 0 0 auto;
  min-width: 1.6rem;
  padding: .15rem .35rem;
  background: var(--ink, #0f172a);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-align: center;
}

.sentence-split-editor__part-text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .84rem;
  line-height: 1.5;
}

.sentence-split-editor--fill,
.sentence-split-editor--fill .sentence-split-editor__input,
.sentence-split-editor--fill .sentence-split-editor__preview-column {
  min-height: 0;
}

.sentence-split-editor--fill {
  height: 100%;
}

.sentence-split-editor--fill .sentence-split-editor__input,
.sentence-split-editor--fill .sentence-split-editor__preview-column {
  display: flex;
  flex-direction: column;
}

.sentence-split-editor--fill .sentence-split-editor__field {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.sentence-split-editor--fill .sentence-split-editor__textarea {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  resize: none;
}

.sentence-split-editor--fill .sentence-split-editor__preview {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

@media (max-width: 767.98px) {
  .sentence-split-editor {
    grid-template-columns: 1fr;
  }

  .sentence-split-editor__input {
    border-right: 0;
    border-bottom: 1px solid var(--line, #e2e8f0);
  }

  .sentence-split-editor__separator-row {
    align-items: stretch;
    flex-direction: column;
    gap: .5rem;
  }

  .sentence-split-editor__separator,
  .sentence-split-editor__custom {
    max-width: none;
  }

  .sentence-split-editor--fill {
    height: auto;
  }

  .sentence-split-editor--fill .sentence-split-editor__field {
    flex: none;
  }

  .sentence-split-editor--fill .sentence-split-editor__textarea,
  .sentence-split-editor--fill .sentence-split-editor__preview {
    flex: none;
    height: 20rem;
    min-height: 20rem;
  }
}