/* Fixed composer viewport: always 200px, never collapses. */
.composer-editor {
  position: relative;
  min-height: 200px;
  height: 200px;
  max-height: 200px;
  overflow: visible;
  isolation: isolate;
}

.composer-editor textarea {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  resize: none !important;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: #b8ae9b transparent;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: none !important;
  box-sizing: border-box;
}

.composer-markup {
  position: absolute;
  inset: 0;
  min-height: 200px;
  height: 200px;
  max-height: 200px;
  overflow: hidden;
  pointer-events: none;
}

.composer-editor textarea::-webkit-scrollbar { width: 8px; }
.composer-editor textarea::-webkit-scrollbar-track { background: transparent; border-radius: 999px; }
.composer-editor textarea::-webkit-scrollbar-thumb {
  background: #b8ae9b;
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: padding-box;
}
.composer-editor textarea::-webkit-scrollbar-thumb:hover {
  background: #9f947f;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.composer-editor textarea::-webkit-scrollbar-corner { background: transparent; }

/* React state cannot collapse or resize the composer viewport. */
.composer[data-composer-expanded="true"] .composer-editor,
.composer[data-composer-expanded="false"] .composer-editor,
.composer-editor {
  min-height: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
}

.composer[data-composer-expanded="true"] .composer-editor textarea,
.composer[data-composer-expanded="false"] .composer-editor textarea,
.composer-editor textarea {
  min-height: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
}

.composer[data-composer-expanded="true"] .composer-editor > .composer-markup,
.composer[data-composer-expanded="false"] .composer-editor > .composer-markup,
.composer-editor > .composer-markup {
  min-height: 200px !important;
  height: 200px !important;
  max-height: 200px !important;
}

/* Collapse control is removed. Text formatting remains available as ☰. */
.composer-inline-tools .composer-tools-toggle {
  display: none !important;
  pointer-events: none !important;
}

.composer-inline-tools,
.composer-inline-tools-open {
  display: inline-flex !important;
}

.composer-inline-tools .composer-format-button svg {
  display: none !important;
}

.composer-inline-tools .composer-format-button::before {
  content: '☰';
  display: block;
  font-size: 16px;
  line-height: 1;
  font-family: Arial, sans-serif;
}

/* Mobile: keep the composer in normal document flow so the footer cannot
   slide underneath or visually overlap the composer. */
@media (max-width: 680px) {
  .composer {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
    isolation: isolate;
  }

  .composer-body {
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
  }

  .composer-editor {
    flex: 0 0 200px !important;
    width: 100% !important;
  }

  .composer-footer {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    clear: both !important;
    margin-top: 12px !important;
  }

  .site-footer {
    position: relative !important;
    z-index: 1 !important;
    clear: both !important;
    margin-top: 0 !important;
  }

  .composer-editor,
  .composer-editor textarea,
  .composer-editor > .composer-markup {
    min-height: 200px !important;
    height: 200px !important;
    max-height: 200px !important;
  }
}