.composer { margin:0 auto; display:flex; }
.composer textarea { flex:1; border:0; background:transparent; resize:none; min-height:44px; max-height:140px; outline:none; }
.composer textarea::placeholder { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--muted); opacity:1; }
/* composer: wide pill, attach at left, mic and a round send at right */
/* [composer concêntrico] the round send/stop button sits concentric with the pill: the same 6px gap on top, right and
   bottom (the 2px focus ring is drawn inset, inside that gap); with several lines it stays in the bottom-right corner */
.pa .composer {
  max-width:var(--chat-w); transition:max-width .28s ease; -webkit-backdrop-filter:none; backdrop-filter:none;
  gap:4px; background:var(--surface); box-shadow:var(--shadow-sm); padding:6px; align-items:flex-end;
  border-radius:28px;
}
.composer .icon-btn { flex-shrink:0; }
/* [sugestões na caixa] the box wrapper takes the textarea's flex slot; the ghost sits on the textarea's own padding box */
.composer .box-wrap { position:relative; flex:1; min-width:0; display:flex; align-self:stretch; align-items:center; }
.composer textarea:focus-visible { outline:none; }
.pa .composer textarea { padding:11px 8px; font-size:14px; }
.composer .box-wrap textarea { width:100%; }
.pa .composer:focus-within { box-shadow:inset 0 0 0 2px var(--focus); }
.pa .composer.dragover { box-shadow:inset 0 0 0 2px var(--focus); }
.pa .composer .icon-btn { border-radius:50%; }
.composer .icon-btn.send { width:44px; height:44px; background:var(--btn-bg); color:var(--btn-fg); }
.composer .icon-btn:not(.send):hover { background:var(--hover); }
.pa.dark .composer .icon-btn:not(.send):hover { background:#2D2E31; }
.composer #btn-attach { order:-1; margin-bottom:0; align-self:flex-end; height:44px; }
.composer #btn-mic { margin-bottom:0; align-self:flex-end; height:44px; }
/* bottom: no fade; the floating pill composer and the chips stand on their own surface and shadow */
.composer-wrap {
  left:0; right:0; bottom:0; z-index:3; position:static; flex:none; pointer-events:none; box-shadow:none;
  padding:12px var(--page-gutter) 18px; background:none;
}
.composer-wrap > * { pointer-events:auto; }
.pa:not(.show-panel) .composer-wrap { padding-left:16px; padding-right:16px; }
.composer-wrap.uso-locked > .composer { display:none; }
.composer-wrap.uso-locked > .suggest { display:none; }
.composer-wrap.uso-locked > .chips-more { display:none; }
.composer-wrap.uso-locked > .pending { display:none; }
.composer-wrap.uso-locked > .voice { display:none; }
/* suggestions above the composer: the design's .eqd-sug row of chips */
.suggest { max-width:var(--chat-w); margin:0 auto; display:flex; gap:8px; flex-wrap:wrap; padding-bottom:10px; }
.pending { max-width:var(--chat-w); margin:0 auto 8px; display:flex; gap:8px; flex-wrap:wrap; }
.pending figure {
  position:relative; margin:0; display:flex; flex-direction:column; gap:2px; padding:4px; border-radius:12px;
  background:var(--surface); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--border);
}
.pending img { width:88px; height:66px; object-fit:cover; border-radius:8px; background:var(--surface-2); }
.pending figcaption { font-size:11px; color:var(--text-2); max-width:88px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.suggest .chip { align-self:auto; }
.pending .uploading { opacity:.55; }
.pending .rm {
  position:absolute; top:-8px; right:-8px; width:28px; height:28px; border-radius:50%; border:0;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm), inset 0 0 0 1px var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center;
}
.suggest .chip:disabled { opacity:.5; }
.chips-more { display:none; margin:0 0 8px max(0px, calc((100% - var(--chat-w)) / 2)); }
.chips-more[aria-expanded="true"] { background:var(--nav-active-bg); color:var(--nav-active-fg); }
.pa .uso-blocked {
  width:100%; max-width:var(--chat-w); margin:0 auto; padding:14px 16px; border-radius:14px;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border); font-size:13px; color:var(--text-2);
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
}
.uso-blocked-t { flex:1 1 240px; display:flex; flex-direction:column; }
.uso-blocked-t strong { color:var(--text); }
.conv > .composer-wrap { position:relative; z-index:3; align-self:end; }
.box-wrap .ghost {
  display:none; position:absolute; inset:0; align-items:center; gap:10px; pointer-events:none; font-size:14px;
  white-space:nowrap; overflow:hidden;
}
.box-wrap.ghosting textarea::placeholder { color:transparent; }
.box-wrap.ghosting .ghost { display:flex; }
.pa .box-wrap .ghost { padding:0 8px; }
.box-wrap.ghosting textarea:focus ~ .ghost .ghost-key { opacity:1; }
.ghost-line { display:flex; align-items:baseline; gap:8px; min-width:0; flex:1 1 auto; overflow:hidden; }
.ghost-txt { color:var(--muted); overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:0; }
.ghost-sub { color:var(--muted); opacity:.72; font-size:13px; flex:none; }
.ghost-sub[hidden] { display:none; }
.ghost-key {
  flex:none; font-family:inherit; font-size:11px; font-weight:600; line-height:1; color:var(--text-2);
  padding:4px 7px; border-radius:6px; box-shadow:inset 0 0 0 1px var(--border); opacity:0;
  transition:opacity .2s ease;
}
@container (min-width: 1500px) {
  .pa:not(.show-panel) .composer { max-width:1180px; }
  .pa:not(.show-panel) .suggest { max-width:1180px; }
  .pa:not(.show-panel) .pending { max-width:1180px; }
}
@container (max-width: 719px) {
  .composer-wrap { padding:8px 10px 12px; }
  .suggest { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scrollbar-width:none; padding:2px; }
  .suggest::-webkit-scrollbar { display:none; }
  .suggest .chip { flex:none; }
}
@container (max-width: 559px) {
  .ghost-sub { display:none; }
}
@media (max-width: 559px) {
  .ghost-sub { display:none; }
}
@media (max-height: 600px) {
  .suggest:not(.open) { display:none; }
  .chips-more { display:inline-flex; min-height:44px; }
}
@media (hover: none), (pointer: coarse) {
  .ghost-key { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .pa .composer { transition:none; }
  .ghost-key { transition:none; }
}