/* Composer details from the public web guide, with a separate mobile editor. */
.composer { overflow: visible; }
.composer-author { display: flex; align-items: center; gap: 10px; padding-bottom: 15px; }
.composer .attachment img { max-height: 200px; }
.inline-family { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.composer-toolbar { gap: 8px; }
.photo-picker { position: relative; flex-shrink: 0; }
.photo-menu { position: absolute; top: 36px; left: 0; min-width: 190px; z-index: 10; background: white; border: 1px solid #d9cec0; border-radius: 4px; box-shadow: 0 4px 14px #0002; padding: 5px; }
.photo-menu button { display: block; width: 100%; border: 0; background: white; color: #34594f; text-align: left; padding: 10px; white-space: nowrap; }
.photo-menu button:hover, .photo-menu button:focus-visible { background: #f3eee3; }
.crop-steps { display: flex; gap: 12px; }
.crop-tools .crop-steps button { width: 32px; height: 32px; border: 1px solid #34594f; border-radius: 50%; background: white; color: #34594f; }
.crop-tools .crop-full { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.crop-tools .crop-full input { width: 18px; }
@media (max-width: 960px) {
  .composer.mobile-open { padding-bottom: 100px; }
  .composer.mobile-open .composer-author { display: none; }
  .composer.mobile-open textarea { order: 1; }
  .composer.mobile-open .compose-count { order: 2; }
  .composer.mobile-open .attachment { order: 3; }
  .composer.mobile-open .composer-toolbar { position: static; margin: 0; }
  .composer.mobile-open .inline-family { display: none; }
  .composer.mobile-open .visibility { position: fixed; left: 18px; bottom: 28px; height: 44px; min-width: 72px; }
  .composer.mobile-open .photo-picker { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); }
  .composer.mobile-open .round-camera { width: 44px; height: 44px; }
  .composer.mobile-open .compose-top { position: fixed; right: 18px; bottom: 28px; height: 44px; align-items: center; margin: 0; }
  .composer.mobile-open .photo-menu { top: auto; bottom: 54px; left: 50%; transform: translateX(-50%); }
  .composer.mobile-open .attachment img { max-height: 260px; }
}