/* Comment controls are interface chrome, independent of decorative profile fonts. */
.muze-profile .muze-profile__post-actions .muze-profile__comment-composer {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px 44px;
  gap: 6px;
  margin: 10px 0 0;
  min-width: 0;
  padding: 0;
  position: relative;
  font: 400 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-avatar {
  display: none;
  width: 32px; height: 32px; min-width: 0; border-radius: 50%; object-fit: cover;
  border: 1px solid color-mix(in srgb, var(--muze-profile-text, #fff) 12%, transparent);
  box-shadow: none;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-field {
  display: flex; align-items: center; gap: 0; min-width: 0; min-height: 44px;
  border: 1px solid color-mix(in srgb, var(--muze-profile-text, #fff) 16%, transparent);
  border-radius: 14px; background: color-mix(in srgb, var(--muze-profile-text, #fff) 5%, transparent);
  padding: 0; position: static; box-shadow: none; transition: border-color .15s ease;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-field:focus-within {
  border-color: var(--muze-profile-accent, #a78bfa);
  outline: 2px solid color-mix(in srgb, var(--muze-profile-accent, #a78bfa) 65%, var(--muze-profile-text, #fff));
  outline-offset: 1px; box-shadow: none;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-field > label {
  flex: 1 1 0; display: block; min-width: 0; width: auto;
  grid-column: auto; grid-row: auto; margin: 0 !important; padding: 0 !important;
}
.muze-profile .muze-profile__post-actions .muze-profile__comment-field input[name="comment_content"] {
  appearance: none; box-sizing: border-box; display: block; width: 100%; min-width: 0;
  min-height: 42px !important; height: 42px !important; max-height: 42px;
  padding: 9px 4px 9px 12px !important; margin: 0 !important;
  background: transparent !important; border: 0 !important; border-radius: 12px !important;
  color: var(--muze-profile-text, #f4f2f7) !important; font: 400 16px/24px system-ui, -apple-system, "Segoe UI", sans-serif !important;
  box-shadow: none !important; outline: 0 !important; text-shadow: none !important;
}
.muze-profile .muze-profile__comment-field input::placeholder {
  color: color-mix(in srgb, var(--muze-profile-text, #fff) 68%, transparent); opacity: 1;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-emoji {
  display: block; flex: 0 0 42px; min-width: 0; width: 42px; height: 42px;
  padding: 0; margin: 0; position: static;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-emoji > summary {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  min-height: 42px; padding: 0 !important; margin: 0; border: 0; border-radius: 11px;
  background: transparent; color: var(--muze-profile-text, #f4f2f7); list-style: none;
  font: 600 14px/1 system-ui, sans-serif; box-shadow: none; cursor: pointer;
}
.muze-profile .muze-profile__comment-emoji > summary::marker { content: ""; }
.muze-profile .muze-profile__comment-emoji > summary::-webkit-details-marker { display: none; }
.muze-profile .muze-profile__comment-composer .muze-profile__comment-gif-wrap {
  min-width: 0; width: 44px; position: static;
}
.muze-profile .muze-profile__comment-composer :is(.muze-profile__comment-gif-button, .muze-profile__comment-send) {
  appearance: none; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px !important; min-width: 44px !important; max-width: 44px;
  height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--muze-profile-text, #fff) 16%, transparent) !important;
  border-radius: 12px !important; background: color-mix(in srgb, var(--muze-profile-text, #fff) 5%, transparent) !important;
  color: var(--muze-profile-text, #f4f2f7) !important; font: 750 11px/1 system-ui, sans-serif !important;
  letter-spacing: .025em; box-shadow: none !important; text-shadow: none !important; transform: none !important;
  transition: background .15s ease, border-color .15s ease; cursor: pointer;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-gif-button::before,
.muze-profile .muze-profile__comment-composer .muze-profile__comment-gif-button::after,
.muze-profile .muze-profile__comment-composer .muze-gif-control__shine { display: none !important; }
.muze-profile .muze-profile__comment-composer .muze-gif-control__mark {
  font: inherit !important; color: inherit; letter-spacing: inherit; text-shadow: none; transform: none;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-send {
  background: color-mix(in srgb, var(--muze-profile-accent, #8b5cf6) 45%, #19131f) !important;
  border-color: color-mix(in srgb, var(--muze-profile-accent, #8b5cf6) 60%, #fff) !important;
  color: #fff !important;
}
.muze-profile .muze-profile__comment-composer :is(.muze-profile__comment-send, .muze-profile__comment-emoji > summary) svg {
  display: block; width: 20px; height: 20px; flex: 0 0 20px; fill: none;
  stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.muze-profile .muze-profile__comment-composer :is(.muze-profile__comment-gif-button, .muze-profile__comment-send, .muze-profile__comment-emoji > summary):hover {
  filter: brightness(1.12); border-color: var(--muze-profile-accent, #a78bfa) !important;
}
.muze-profile .muze-profile__comment-composer :is(button, summary):focus-visible {
  outline: 2px solid var(--muze-profile-text, #fff) !important; outline-offset: 2px !important;
}
.muze-profile .muze-profile__comment-composer :is(button, input):disabled { opacity: .5; cursor: progress; }
.muze-profile .muze-profile__comment-composer .muze-profile__comment-emoji > div {
  box-sizing: border-box; width: min(280px, 100%); max-width: 100%;
  right: 0; left: auto; bottom: calc(100% + 10px); top: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 4px;
  padding: 8px; border-radius: 14px; z-index: 45;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-emoji:not([open]) > div { display: none; }
.muze-profile .muze-profile__comment-composer .muze-profile__comment-emoji button {
  width: 100% !important; min-width: 0 !important; height: 40px !important; min-height: 40px !important;
  padding: 0 !important; margin: 0 !important; border-radius: 9px !important; transform: none !important;
  font: 400 21px/1 system-ui, sans-serif !important;
}
.muze-profile .muze-profile__comment-composer .muze-profile__comment-gif-preview {
  position: absolute; bottom: calc(100% + 8px); right: 0; max-width: min(220px, 100%);
}
/* Preserve the comment GIF picker's explicit state against host form/grid styles. */
.muze-profile .muze-profile__comment-giphy[hidden],
.muze-profile .muze-profile__comment-giphy > :is(.muze-giphy__search, .muze-giphy__selected)[hidden] {
  display: none !important;
}
/* Fixed GIF coordinates must remain relative to the viewport while the picker is open. */
.muze-profile .muze-profile__post.is-comment-giphy-open {
  content-visibility: visible !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
  transition: none !important;
  z-index: auto !important;
}
/* Let only the open picker rise above the site navigation, out of note anchor stacks. */
.muze-profile:has(.muze-profile__post.is-comment-giphy-open),
.muze-profile .muze-profile__content-grid:has(.muze-profile__post.is-comment-giphy-open),
.muze-profile .muze-profile__stream:has(.muze-profile__post.is-comment-giphy-open) {
  isolation: auto !important;
}
.muze-profile .muze-profile__post.is-comment-giphy-open .muze-profile__comment-giphy {
  z-index: 2147483647 !important;
}
/* Keep video branding clear of the player's controls and their touch targets. */
.muze-profile .muze-profile__post-gallery.is-watermarked:has(> .muze-player)::after {
  top: 10px;
  bottom: auto;
  pointer-events: none;
  font: 750 10px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .08em;
}
@media (prefers-reduced-motion: reduce) {
  .muze-profile .muze-profile__comment-composer * { transition: none !important; animation: none !important; }
}
