/* chat/07_reply_banner_and_composer.css
 * ------------------------------------------------------------
 * Split 7 of 10 from web/account/css/chat.css (CLAUDE.md §8.16 — see
 * 01_tokens_reset.css's header for the split's background; loaded
 * seventh in chat.html, right after the message-media file).
 *
 * Covers: the reply banner shown above the composer while replying to a
 * message (reply_banner.js), and the composer itself (composer.js,
 * composer_input.js, composer_progress.js) — the attach and emoji
 * buttons, the emoji picker panel, the growing text field, the send
 * button, and the upload-in-progress row shown while an attachment is
 * being sent.
 * ------------------------------------------------------------ */

/* ===== Reply banner (reply_banner.js) ===== */

.chat-reply-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--chat-composer-field);
  border-left: 3px solid var(--chat-read-tick);
}
/* Nothing to announce or focus while there is no active reply — this is
   the one place `display:none` is correct rather than a rule to work
   around, since the alternative (an empty, still-focusable cancel button)
   would be worse for a screen-reader user, not better. */
.chat-reply-banner.is-hidden { display: none; }

.chat-reply-banner__body { flex: 1 1 auto; min-width: 0; }
.chat-reply-banner__name {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--chat-read-tick);
}
.chat-reply-banner__text {
  display: block;
  font-size: 13px;
  color: var(--chat-bubble-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-reply-banner__cancel {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  color: var(--chat-bubble-muted);
}
.chat-reply-banner__cancel:hover { background: var(--chat-wash-soft); }

/* ===== Composer (composer.js, composer_input.js, composer_progress.js) ===== */

.chat-composer {
  background: var(--chat-composer-bg);
  padding: 8px 10px;
  /* env(safe-area-inset-bottom): the fixed footer must clear the home
     indicator on an iPhone with no browser chrome of its own once this
     page is installed as a PWA (kravspec §3.2) — the whole reason the
     manifest referenced in chat.html exists. */
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.chat-composer__row { display: flex; align-items: flex-end; gap: 8px; }

.chat-composer__attach {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  color: var(--chat-bubble-muted);
}
.chat-composer__attach:hover { background: var(--chat-wash-soft); }

/* The emoji button and its panel (ui/emoji_picker.js).

   The WRAPPER is the positioning anchor, not the button. The panel used to be
   a child of the button, which nested 120 <button> elements inside another
   <button> — invalid markup with no defined behaviour for clicks or focus. It
   is now a sibling, so the anchor moved up one level with it. */
.chat-composer__emoji-wrap {
  position: relative;
  flex: 0 0 auto;
  display: flex;
}

/* Sized to match .chat-composer__attach beside it so the two controls read as
   a pair rather than as one button and one lump of text. */
.chat-composer__emoji {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
}
.chat-composer__emoji:hover { background: var(--chat-wash-soft); }

/* Positioned ABOVE the button, not below: the composer already sits at the
   bottom of the viewport, so a panel opening downwards would be off-screen.
   `bottom: 100%` places it directly on top of its anchor regardless of how
   tall the composer has grown with a multi-line draft. */
.chat-emoji__panel {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 8px;
  z-index: 20;
  width: 288px;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  background: var(--chat-composer-bg);
  box-shadow: 0 6px 24px rgb(0 0 0 / .45);
  /* Left-aligned to the button, but never past the viewport edge on a narrow
     screen — the panel is wider than the button it hangs from. */
  max-width: calc(100vw - 24px);
}
.chat-emoji__panel.is-hidden { display: none; }

.chat-emoji__group-label {
  font-size: 12px;
  opacity: .55;
  padding: 6px 4px 2px;
}
.chat-emoji__row { display: flex; flex-wrap: wrap; }

.chat-emoji__item {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 21px;
  line-height: 1;
  /* The emoji is the button's whole content, so it is centred rather than
     baseline-aligned — otherwise the glyphs sit slightly low in their cells
     and the grid looks misaligned even though the boxes are not. */
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-emoji__item:hover { background: var(--chat-wash-soft); }

.chat-composer__input {
  flex: 1 1 auto;
  resize: none;
  border-radius: 20px;
  background: var(--chat-composer-field);
  padding: 9px 14px;
  font-size: 14.5px;
  /* A NORMAL numeric line-height, deliberately: composer_input.js's own
     grow() reads getComputedStyle(...).lineHeight as a pixel figure to
     size the field, and a unitless value resolves correctly there —
     changing this to a keyword like "normal" would make that measurement
     browser-dependent. */
  line-height: 1.35;
  overflow-y: auto; /* only reached once MAX_TEXTAREA_LINES caps the JS-driven height */
  /* The text wraps, so sideways scrolling is never wanted. Saying so matters:
     setting overflow-y alone makes the OTHER axis compute to `auto` rather than
     staying `visible`, which lets a horizontal scrollbar appear — a dark bar
     across the bottom of the field with nothing to scroll. */
  overflow-x: hidden;
  /* Keep the vertical scrollbar from painting its own track over the field.
     `appearance: none` (see the reset) strips a textarea's native chrome on
     WebKit, and what it leaves behind is a bare, differently-coloured track
     rather than nothing at all. The thumb is kept — it is the only indication
     that a long draft continues above — but drawn ON the field's own colour
     instead of on a slab of its own. */
  scrollbar-width: thin;
  scrollbar-color: var(--chat-bubble-muted) transparent;
}
.chat-composer__input::-webkit-scrollbar { width: 6px; }
.chat-composer__input::-webkit-scrollbar-track { background: transparent; }
.chat-composer__input::-webkit-scrollbar-thumb {
  background: var(--chat-bubble-muted);
  border-radius: 3px;
}
.chat-composer__input::placeholder { color: var(--chat-bubble-muted); }
.chat-composer__input:disabled { opacity: .6; }

.chat-composer__send {
  flex-shrink: 0;
  padding: 0 16px;
  height: 38px;
  border-radius: 19px;
  background: var(--chat-outgoing-bubble);
  color: var(--chat-bubble-text);
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}
.chat-composer__send:hover:not(:disabled) { filter: brightness(1.1); }
.chat-composer__send:disabled { opacity: .5; cursor: not-allowed; }

.chat-composer__upload-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 2px;
}
/* Nothing is uploading — the row and its cancel button have nothing to do,
   so removing them from the tree (rather than just visually hiding them)
   is correct, the same reasoning as the reply banner above. */
.chat-composer__upload-row.is-hidden { display: none; }
.chat-composer__upload-label { flex-shrink: 0; font-size: 12px; color: var(--chat-bubble-muted); }
.chat-composer__progress {
  flex: 1 1 auto;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--chat-wash-medium);
}
.chat-composer__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--chat-read-tick);
  transition: width .2s ease;
}
.chat-composer__cancel-upload {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--error);
}