.inline-reply-composer {
  padding: 0;
}
.inline-reply-details {
  display: block;
}
.inline-reply-summary {
  padding: 0.8rem 0.9rem;
  cursor: pointer;
}
.inline-reply-summary::marker {
  content: "";
}
.inline-reply-summary::-webkit-details-marker {
  display: none;
}
.inline-reply-prompt {
  min-height: 4.75rem;
  margin: 0;
  resize: none;
  cursor: text;
}
.inline-reply-summary[hidden],
.inline-reply-details[open] .inline-reply-summary {
  display: none;
}
/* Top padding matches the collapsed prompt so expanding never moves the editor. */
.inline-reply-expanded {
  padding: 0.8rem 0.9rem 1rem;
}
.inline-reply-expanded [data-compose-form] > :first-child {
  margin-top: 0;
}
.inline-reply-expanded [data-compose-form] textarea {
  display: block;
}
.inline-reply-expanded h2 {
  margin-top: 0;
}
.inline-reply-identity-status {
  display: none;
}
.inline-reply-identity-status[data-kind]:not([data-kind=""]):not([hidden]) {
  display: block;
  margin-bottom: 1rem;
}

.compose-normalization-inline {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: -0.1rem 0 0;
}
.compose-normalization-inline[hidden] {
  display: none;
}
.compose-normalization-inline-action {
  width: auto;
  margin-top: 0;
  padding: 0.35rem 0.55rem;
  white-space: nowrap;
}
.compose-form-actions {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
}
.compose-form-actions > button {
  margin-top: 0;
}
.compose-form-actions > button[type="submit"] {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.compose-clear-button {
  flex: 0 0 auto;
  width: auto;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  white-space: nowrap;
}
/* Reply page: the parent as a light quote above the composer. */
.compose-page-title {
  margin: 0 0 0.5rem;
}
.reply-context {
  margin: 0;
  padding-left: 0.85rem;
  border-left: 3px solid var(--line);
}
.reply-context > .meta {
  margin: 0 0 0.25rem;
}
.reply-context-body--clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.compact-thread-compose {
  padding: 0;
}
.compact-thread-compose label {
  font-size: 0.92rem;
}
.compact-thread-compose input,
.compact-thread-compose textarea {
  margin-top: 0.25rem;
}
.compact-thread-compose textarea {
  min-height: 5.5rem;
  resize: vertical;
}
.compact-thread-compose-prompt {
  min-height: 4.75rem;
}
.compact-thread-compose-form {
  gap: 0.65rem;
}
.compact-thread-compose-actions {
  display: grid;
  /* Post, then the ··· menu beside it, on phones too. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: center;
}
.compact-thread-compose-actions > button {
  margin-top: 0;
}
@media (min-width: 640px) {
  .compact-thread-compose-actions {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
}

.image-compose-fields { min-width: 0; border: 0; padding: 0; margin: .5rem 0; }
.image-compose-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.image-compose-fields[hidden], .image-upload-recovery[hidden], .image-compose-fields [hidden] { display: none !important; }
.image-upload-dropzone { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 0; border: 0; }
.image-upload-dropzone.is-dragging { outline: 3px dashed var(--accent-color, #356bd8); outline-offset: 4px; }
.image-compose-fields button, .image-upload-recovery button { min-width: 44px; min-height: 44px; width: auto; margin: 0; padding: .6rem .9rem; touch-action: manipulation; }
.image-compose-fields button:focus-visible, .image-compose-fields input:focus-visible, .image-upload-recovery button:focus-visible { outline: 3px solid var(--accent-color, #356bd8); outline-offset: 3px; }
.image-upload-input { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; opacity: 0; pointer-events: none; }
.image-upload-preview { position: relative; width: fit-content; max-width: 100%; min-width: 44px; min-height: 44px; margin-top: .5rem; }
.image-compose-fields .image-upload-remove { position: absolute; top: 0; right: 0; width: 44px; height: 44px; padding: 0; font-size: 1.5rem; line-height: 1; }
.image-upload-preview img { display: block; max-width: 100%; max-height: 120px; width: auto; height: auto; border-radius: .35rem; }
.image-upload-status { margin: .5rem 0; overflow-wrap: anywhere; }
.image-upload-status[data-error="true"] { color: var(--danger-color, #a52323); }
@media (max-width: 480px) {
  .compose-form-actions { flex-wrap: wrap; }
  .compose-form-actions > button { flex: 1 1 44%; min-height: 44px; overflow-wrap: normal; }
}

/* The composer: an optional Title line above the body, and a row of tools below it. */
.compose-title {
  font-weight: 600;
}
.compose-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}
/* An open tool (tags, event) takes the row's full width so its fields have room. */
.compose-tools > details.compose-tool[open] {
  flex: 1 1 100%;
}
.compose-disclosure { border: 1px solid var(--line); border-radius: .5rem; padding: 0 .75rem; }
.compose-disclosure[open] { padding-bottom: .75rem; }
.compose-disclosure > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.compose-disclosure > summary:focus-visible { outline: 3px solid var(--accent-color, #356bd8); outline-offset: 2px; }
.compose-disclosure > label { display: block; margin-top: .5rem; }

.compose-form-actions:has(> .compose-action-menu) > button[type="submit"] {
  flex: 1 1 0;
  width: auto;
  min-height: 44px;
  margin-top: 0;
}
.compose-action-menu { position: relative; display: flex; flex: 0 0 auto; order: 99; margin-left: auto; }
.compose-action-menu-toggle { flex: 1 1 auto; list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; box-sizing: border-box; border: 1px solid var(--line); border-radius: .5rem; font-weight: 700; user-select: none; }
.compose-action-menu-toggle::-webkit-details-marker { display: none; }
.compose-action-menu-toggle:focus-visible { outline: 3px solid var(--accent-color, #356bd8); outline-offset: 2px; }
.compose-action-menu-list { position: absolute; right: 0; bottom: calc(100% + .25rem); z-index: 5; display: flex; flex-direction: column; gap: .25rem; min-width: 12rem; padding: .35rem; border: 1px solid var(--line); border-radius: .5rem; background: linear-gradient(var(--panel), var(--panel)), var(--page-bg, Canvas); color: inherit; box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .2); }
.compose-action-menu-list > button { width: 100%; min-height: 44px; margin: 0; text-align: left; white-space: nowrap; }
.compose-action-menu-list > button { padding: .6rem .9rem; font-size: inherit; }

/* Eligibility is asynchronous. Keep the initial picker footprint on dedicated
   compose pages so enabling uploads does not move the submit actions. */
.compose-page .image-compose-fields[hidden] {
  display: block !important;
  visibility: hidden;
}

/* Phones: the full composer (New post page, paned New Thread dialog) starts at the
   compact form's body height and reserves nothing between the body and Post, so
   both fit above the on-screen keyboard. Wider screens keep the taller body and
   the reserved picker footprint above. */
@media (max-width: 639px) {
  .compose-page [data-compose-kind="thread"] textarea[name="body"],
  .paned-compose-form textarea[name="body"] {
    height: 5.5rem;
    min-height: 5.5rem;
    resize: vertical;
  }
  .compose-page .image-compose-fields[hidden] {
    display: none !important;
  }
}

/* A phone reply is one bounded panel: editor, feedback and actions participate
   in the same layout. No independent submit overlay can cover the textarea.
   The repeated attribute keeps theme card padding/stack margins from overriding
   the composing panel geometry. */
:root [data-reply-panel][data-reply-panel].reply-panel-active {
  position: fixed;
  z-index: 100;
  top: var(--reply-panel-top);
  left: var(--reply-panel-left);
  width: var(--reply-panel-width);
  height: var(--reply-panel-height);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--line);
  background: linear-gradient(var(--panel), var(--panel)), var(--page-bg, Canvas);
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}
:root [data-reply-panel][data-reply-panel].reply-panel-active > * {
  flex: 0 0 auto;
  margin: 0;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active > form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active form > * {
  flex: 0 0 auto;
  margin: 0;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active form > :is(textarea[name="body"], label:has(textarea[name="body"])) {
  flex: 1 1 0;
  min-height: 80px;
  min-width: 0;
  height: auto;
  max-height: none;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active form > label:has(textarea[name="body"]) {
  display: flex;
  flex-direction: column;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active textarea[name="body"] {
  min-height: 80px;
  flex: 1 1 0;
  resize: none;
  overscroll-behavior: contain;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active .image-compose-fields[hidden] {
  display: none !important;
}
:root [data-reply-panel][data-reply-panel].reply-panel-active .compose-form-actions {
  margin-top: var(--reply-panel-menu-space, 0px);
}
.reply-panel-active .compose-action-menu-list {
  max-height: var(--reply-panel-menu-height);
  max-width: calc(var(--reply-panel-width) - 20px);
  width: max-content;
  min-width: min(12rem, calc(var(--reply-panel-width) - 20px));
  overflow: auto;
}
.reply-panel-active .compose-action-menu-list > button {
  white-space: normal;
}

/* Collapse before first paint, with native focus expanding the same editor even
   before deferred scripts run. No-script forms retain their complete layout. */
@media (scripting: enabled) {
  :is([data-inline-thread-compose][data-inline-thread-expanded="0"], [data-inline-reply-compose][data-inline-reply-expanded="0"]):not(:focus-within) {
    padding: 0.8rem 0.9rem;
  }
  :is([data-inline-thread-compose][data-inline-thread-expanded="0"], [data-inline-reply-compose][data-inline-reply-expanded="0"]):not(:focus-within) > .inline-reply-identity-status,
  :is([data-inline-thread-compose][data-inline-thread-expanded="0"], [data-inline-reply-compose][data-inline-reply-expanded="0"]):not(:focus-within) form > :not(textarea) {
    display: none;
  }
  :is([data-inline-thread-compose][data-inline-thread-expanded="0"], [data-inline-reply-compose][data-inline-reply-expanded="0"]):not(:focus-within) textarea[name="body"] {
    height: 4.75rem;
    min-height: 4.75rem;
    margin: 0;
    resize: none;
  }
}

.reply-operation-image {
  display: block;
  max-width: 100%;
  max-height: 24rem;
  height: auto;
  object-fit: contain;
}

.reply-operation-placeholder .body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}

@media (max-width: 1024px) and (pointer: coarse) {
  :root [data-reply-panel][data-reply-panel].reply-panel-reading {
    position: fixed;
    left: var(--reply-panel-left);
    width: var(--reply-panel-width);
    bottom: max(var(--reply-panel-bottom, 8px), env(safe-area-inset-bottom));
    z-index: 20;
    box-sizing: border-box;
    background: linear-gradient(var(--panel), var(--panel)), var(--page-bg, Canvas);
    padding: 8px;
    border: 1px solid currentColor;
    margin: 0;
  }
  :root [data-reply-panel][data-reply-reading="1"] form > :not(textarea) {
    display: none;
  }
  :root [data-reply-panel][data-reply-reading="1"] textarea[name="body"] {
    height: 4.75rem;
    min-height: 4.75rem;
    max-height: 4.75rem;
    margin: 0;
    resize: none;
  }
}

@media (max-width: 1024px) and (pointer: coarse) {
  :root [data-reply-panel][data-reply-reading="1"] > *,
  :root [data-reply-panel][data-reply-reading="1"] form > textarea {
    margin: 0;
  }
}

.reply-continuation-root {
  overflow-anchor: none;
}