/* 입력창 접기: 쓰지 않을 때는 한 줄 입력 칸만, 누르거나 쓰기 시작하면 위로 부드럽게 펼친다(composer-fold.js) */
.composer {
  --fold-ease:cubic-bezier(.2,.8,.2,1);
  transition:padding .32s var(--fold-ease), row-gap .32s var(--fold-ease), width .32s var(--fold-ease), box-shadow .32s ease, border-color .32s ease;
}
.composer > :is(.project-bar, .shortcut-bar, .picker) {
  max-height:180px; opacity:1; transform:none;
  transition:max-height .32s var(--fold-ease), opacity .24s ease .06s, transform .32s var(--fold-ease), margin .32s var(--fold-ease), padding .32s var(--fold-ease);
}
.composer textarea { transition:min-height .32s var(--fold-ease), padding .32s var(--fold-ease), border-color .18s, background .18s, box-shadow .18s; }
.composer-actions > button { transition:opacity .22s ease, transform .28s var(--fold-ease), background .18s, border-color .18s; }

/* 펼친 상태: 여러 줄을 편하게 쓰도록 입력 칸을 키우고, 넓은 화면에서는 폭도 조금 넓힌다 */
.composer:not(.is-folded) textarea { min-height:76px; }
.composer:not(.is-folded) { box-shadow:0 -10px 34px #12091a66; border-color:#e3c6ee88; }
@media (min-width:1101px) {
  .main > .composer:not(.is-folded) { width:62%; }
}

/* 접힌 상태 */
.composer.is-folded { row-gap:0; padding-top:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); align-items:center; }
.composer.is-folded > :is(.project-bar, .shortcut-bar, .picker) {
  max-height:0; opacity:0; transform:translateY(8px); margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0;
  border-top-width:0; border-bottom-width:0; overflow:hidden; pointer-events:none;
  transition:max-height .28s var(--fold-ease), opacity .14s ease, transform .28s var(--fold-ease), margin .28s var(--fold-ease), padding .28s var(--fold-ease);
}
.composer.is-folded textarea {
  height:42px !important; min-height:42px; padding-top:11px; padding-bottom:11px;
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:text;
}
.composer.is-folded .composer-actions { align-self:center; }
.composer.is-folded .composer-actions > :is(#send, #send-now) { display:none; }
.composer.is-folded .composer-actions:not(:has(> :not([hidden]):not(#send):not(#send-now))) { display:none; }

/* 펼칠 때 보내기 버튼이 아래에서 살짝 떠오르게 */
.composer:not(.is-folded) .composer-actions > :is(#send, #send-now) { animation:composer-pop .3s var(--fold-ease) both; }
.composer:not(.is-folded) .composer-actions > #send-now { animation-delay:.04s; }
@keyframes composer-pop { from { opacity:0; transform:translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .composer, .composer > *, .composer textarea, .composer-actions > button { transition:none !important; animation:none !important; }
}