#btn-send { display: grid; }
#btn-send > span { grid-area: 1 / 1; display: grid; place-items: center; }
/* ---------- Composer (I4, G1, G6) ---------- */
.composer-wrap {
  /* Keep the composer flush with the viewport; only reserve the device's
     actual home-indicator area rather than adding a visible bottom gap. */
  padding: 0 calc(16px + var(--safe-right)) max(0px, var(--safe-bottom)) calc(16px + var(--safe-left));
  background: var(--bg);
  position: relative;
}
.composer-wrap::before {
  content: none;
}
.composer {
  max-width: var(--content-w);
  margin: 0 auto;
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: none;
  padding: 8px 10px 8px;
  transition: border-color .15s, box-shadow .15s;
}
[data-theme="dark"] .composer { background: var(--bg-soft); border-color: transparent; }
.composer:focus-within { border-color: var(--border-strong); }
.composer textarea {
  display: block; width: 100%;
  border: 0; outline: none; resize: none; background: none;
  padding: 6px 8px 4px;
  font-size: 16px; /* ≥16px stops iOS zoom-on-focus (I6) */
  line-height: 1.5;
  max-height: 40vh; min-height: 32px;
  overflow-y: auto;
}
.composer textarea::placeholder { color: var(--text-3); }
.composer-row { display: flex; align-items: center; gap: 6px; padding-top: 2px; }
.composer-hint { flex: 1; font-size: 12px; color: var(--text-3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.send-btn {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  transition: opacity .15s, transform .1s, background .15s;
}
.send-btn:disabled { opacity: .25; }
.send-btn:not(:disabled):active { transform: scale(.92); }
.send-btn.stop { opacity: 1; }
.disclaimer { margin: 6px 0 0; text-align: center; font-size: 12px; color: var(--text-3); }
@media (max-width: 560px) { .disclaimer { display: none; } }

@media (max-width: 560px) {
  .composer-wrap { padding-left: calc(18px + var(--safe-left)); padding-right: calc(18px + var(--safe-right)); }
  .composer { border: 1px solid var(--border); border-radius: 22px; padding: 10px 10px 9px; }
  .composer textarea { padding: 7px 9px 10px; min-height: 38px; }
  .composer-row { padding-top: 0; }
  .send-btn { width: 38px; height: 38px; }
}

/* Attachment tray / chips */
.attach-tray { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 8px; }
.attach-tray:empty { display: none; }
.msg-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 12px 0 8px; max-width: 240px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg);
  text-align: left;
}
button.chip:hover { background: var(--bg-hover); }
.chip-icon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 9px;
  display: grid; place-items: center; color: #fff;
  background: #5b8def;
}
.chip-icon.pdf { background: #e5534b; }
.chip-icon.docx { background: #2f6fde; }
.chip-icon.paste { background: #8a63d2; }
.chip-text { min-width: 0; line-height: 1.3; }
.chip-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-meta.warn { color: var(--danger); }
.chip.image { width: 72px; height: 72px; padding: 0; overflow: hidden; }
.chip.image img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.msg-attachments .chip.image { width: auto; height: auto; max-width: 240px; border-radius: 14px; }
.msg-attachments .chip.image img { max-height: 240px; width: auto; max-width: 100%; display: block; }
.chip.loading .chip-icon { background: var(--bg-soft); color: var(--text-2); }
.chip-remove {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-text);
  box-shadow: var(--shadow);
}
.keyboard-open .composer-wrap { padding-bottom: 0; }

/* Preserve the rounded input in installed apps too. Safe-area space belongs
   to the page, not a tall square extension of the input surface. */
@media (display-mode: standalone) and (max-width: 820px) {
  .disclaimer { display: none; }
}

/* Scroll-to-bottom (I5) */
.scroll-bottom {
  position: absolute; left: 50%; bottom: calc(120px + var(--safe-bottom));
  transform: translate(-50%, 10px);
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--bg-elev); border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text-2);
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s var(--ease);
  z-index: 6;
}
.scroll-bottom.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }