/* ===========================================================================
   MESSAGE COMPOSER
   One rounded pill that holds everything, in three states:

     empty      [ smiley ]  Message…            [ mic ] [ photo ] [ sticker ]
     typing     [ smiley ]  text…                        [ ↵ ] [ send ]
     recording  [ ✕ ]  [ ■ ══════ 0:10 ]                       [ send ]

   Loaded last on purpose. The composer accumulated a long tail of !important
   rules in styles.css and app-themes.css over time; overriding them inside
   this one scope is cleaner than unpicking each of them.
   =========================================================================== */

.message-composer{
  --composer-accent:#4b57d6;
  --composer-accent-hover:#5964e3;
  --composer-accent-light:#6f79e8;
  --composer-ink:#ffffff;
  --composer-pill-bg:transparent;
  --composer-pill-line:var(--theme-line-soft,#2b2b2b);
  --composer-icon:var(--theme-muted,#9a9a9a);
  --composer-icon-hover:var(--theme-text,#ededed);

  display:block!important;
  grid-template-columns:none!important;
  padding:10px 14px max(10px,env(safe-area-inset-bottom))!important;
  gap:0!important;
}
/* Once a button colour has actually been chosen, the send button follows it
   instead of the default indigo. "Match theme" keeps the indigo. */
html[data-app-accent]:not([data-app-accent="auto"]) .message-composer{
  --composer-accent:var(--theme-accent,#4b57d6);
  --composer-accent-hover:var(--theme-accent-dark,#3f49b8);
  --composer-accent-light:var(--theme-accent,#6f79e8);
  --composer-ink:var(--theme-accent-ink,#ffffff);
}

html .message-composer .composer-pill{
  position:relative;
  display:flex;align-items:center;gap:6px;
  min-height:52px;padding:5px 6px 5px 8px;
  border:1px solid var(--composer-pill-line);
  border-radius:999px;
  background:var(--composer-pill-bg);
}

/* ---------- the text field ---------- */
.message-composer .message-input-wrap{
  position:static!important;flex:1 1 auto;min-width:0;display:flex;align-items:center;
}
html .message-composer .composer-pill textarea{
  width:100%;margin:0;border:0!important;outline:none!important;
  background:transparent!important;box-shadow:none!important;
  padding:9px 4px!important;
  min-height:36px!important;max-height:132px;
  resize:none;font-size:16px;line-height:1.35;
  color:var(--theme-text,#ededed)!important;
  caret-color:var(--composer-accent)!important;
}
html .message-composer .composer-pill textarea::placeholder{color:var(--composer-icon)!important;opacity:1}
/* The pill is the only frame. styles.css and app-themes.css both add a focus
   ring and border colour to composer textareas, which drew a rounded rectangle
   inside the oval as soon as the field was focused. Both are cancelled here
   (:focus needs the extra weight to out-rank them). */
html .message-composer .composer-pill textarea,
html .message-composer .composer-pill textarea:focus,
html .message-composer .composer-pill textarea:focus-visible,
html .message-composer .composer-pill textarea:hover{
  border:0!important;border-radius:0!important;
  outline:none!important;box-shadow:none!important;
  background:transparent!important;background-image:none!important;
}

/* ---------- the round icon buttons ---------- */
html .message-composer .composer-pill .composer-icon-btn{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:38px;height:38px;min-width:38px!important;min-height:38px!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:50%!important;
  background:transparent!important;box-shadow:none!important;
  color:var(--composer-icon)!important;
  cursor:pointer;font-size:0;
  transition:color .15s ease,background .15s ease;
}
html .message-composer .composer-pill .composer-icon-btn svg{width:23px;height:23px;display:block}
html .message-composer .composer-pill .composer-icon-btn:hover:not(:disabled),
html .message-composer .composer-pill .composer-icon-btn:focus-visible{
  color:var(--composer-icon-hover)!important;
  background:rgba(127,127,127,.14)!important;
}
html .message-composer .composer-pill .composer-icon-btn:disabled{opacity:.4;cursor:not-allowed}
html .message-composer .composer-pill .emoji-btn-inline{position:static!important;color:var(--composer-icon-hover)!important}
/* The trailing controls are right-aligned, so closing the gap moves the new
   line key rightwards, closer to send, instead of moving send. */
html .message-composer .composer-pill .newline-btn-inline{
  position:static!important;margin-right:-7px!important;
}
html .message-composer .composer-pill .newline-btn-inline svg{width:21px;height:21px}
html .message-composer .composer-pill .emoji-btn-inline svg{width:26px;height:26px}

/* ---------- send ---------- */
html .message-composer .composer-pill .composer-send{
  flex:0 0 auto;
  display:grid;place-items:center;
  width:40px;height:40px;min-width:40px!important;min-height:40px!important;
  padding:0!important;margin:0!important;
  border:0!important;border-radius:50%!important;
  background:var(--composer-accent)!important;
  color:var(--composer-ink)!important;
  box-shadow:none!important;font-size:0;cursor:pointer;
  transition:background .15s ease,transform .12s ease;
}
html .message-composer .composer-pill .composer-send svg{width:21px;height:21px;display:block;transform:translateX(-1px)}
html .message-composer .composer-pill .composer-send:hover:not(:disabled){background:var(--composer-accent-hover)!important}
html .message-composer .composer-pill .composer-send:active:not(:disabled){transform:scale(.94)}
html .message-composer .composer-pill .composer-send:disabled{opacity:.45;cursor:not-allowed}

/* ---------- which controls are on show ---------- */
/* Nothing to send yet: offer the three ways to add something. */
.message-composer:not(.has-text) #sendBtn,
.message-composer:not(.has-text) #newlineBtn{display:none!important}
/* Something to send: the three become one. */
.message-composer.has-text #recordBtn,
.message-composer.has-text #attachBtn,
.message-composer.has-text #stickerBtn{display:none!important}
/* Recording takes over the whole pill. */
.message-composer.is-recording .composer-pill>*:not(.recording-bar){display:none!important}

/* ---------- recording ---------- */
html .message-composer .composer-pill .recording-bar{
  flex:1 1 auto;display:flex;align-items:center;gap:9px;
  margin:0!important;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;
}
html .message-composer .composer-pill .recording-bar.hidden{display:none!important}
html .message-composer .composer-pill .recording-cancel{
  flex:0 0 auto;display:grid;place-items:center;
  width:30px;height:30px;padding:0;margin:0;
  border:0;border-radius:50%;cursor:pointer;
  background:var(--composer-accent-light);color:var(--composer-ink);
  transition:filter .15s ease;
}
html .message-composer .composer-pill .recording-cancel:hover{filter:brightness(1.12)}
html .message-composer .composer-pill .recording-cancel svg{width:15px;height:15px;display:block}

html .message-composer .composer-pill .recording-track{
  position:relative;flex:1 1 auto;min-width:0;
  display:flex;align-items:center;
  height:42px;padding:0 8px 0 4px;
  border-radius:999px;
  background:var(--composer-accent);
  overflow:hidden;
}
/* Live level meter drawn from the microphone itself, so the bar visibly reacts
   to the voice and it is obvious that something is being captured. It is the
   only thing moving in the bar now — the elapsed-time sweep that used to run
   underneath it was competing with the trace rather than adding to it. */
html .message-composer .composer-pill .recording-wave{
  position:absolute;left:46px;top:0;bottom:0;
  width:calc(100% - 124px);height:100%;display:block;pointer-events:none;
}
html .message-composer .composer-pill .recording-stop{
  position:relative;z-index:1;
  flex:0 0 auto;display:grid;place-items:center;
  width:34px;height:34px;padding:0;margin:0;
  border:0;border-radius:50%;background:#ffffff;cursor:pointer;
}
html .message-composer .composer-pill .recording-stop-square{
  width:13px;height:13px;border-radius:3px;background:var(--composer-accent);display:block;
}
html .message-composer .composer-pill .recording-time{
  position:relative;z-index:1;margin-left:auto;
  padding:5px 12px;border-radius:999px;
  background:#ffffff;color:var(--composer-accent);
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}

@media(max-width:520px){
  .message-composer{padding:8px 10px max(8px,env(safe-area-inset-bottom))!important}
  .composer-pill{min-height:48px;gap:2px;padding-left:6px}
  html .message-composer .composer-pill .composer-icon-btn{width:36px;height:36px;min-width:36px!important;min-height:36px!important}
  html .message-composer .composer-pill .composer-icon-btn svg{width:22px;height:22px}
  html .message-composer .composer-pill .composer-send{width:38px;height:38px;min-width:38px!important;min-height:38px!important}
  html .message-composer .composer-pill .recording-track{height:38px}
  html .message-composer .composer-pill .recording-stop{width:30px;height:30px}
  html .message-composer .composer-pill .recording-time{padding:4px 10px;font-size:13px}
  html .message-composer .composer-pill .recording-wave{left:40px;width:calc(100% - 110px)}
}

/* The light palette needs a visible pill edge and darker icons. */
html[data-app-theme="parchment"] .message-composer,
html:not([data-theme="dark"]) .message-composer{
  --composer-pill-line:var(--theme-line-soft,#cbd5e1);
  --composer-icon:var(--theme-muted,#6d7c91);
  --composer-icon-hover:var(--theme-text,#11233f);
}

/* ===========================================================================
   EMOJI / STICKER PICKER
   Pinned to the top of the composer and grown upwards by
   positionComposerPicker(). Its height is set inline, so the panel has to be a
   column that lets the grid take the leftover space and scroll inside it —
   otherwise a tall list would just overflow the card.
   =========================================================================== */
html .emoji-picker{
  display:flex;flex-direction:column;overflow:hidden;
}
html .emoji-picker>.emoji-picker-head,
html .emoji-picker>.composer-picker-modes{flex:0 0 auto}
html .emoji-picker #emojiPane{
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
}
html .emoji-picker #emojiPane>.emoji-search-wrap,
html .emoji-picker #emojiPane>.emoji-tabs{flex:0 0 auto}
html .emoji-picker .emoji-grid{
  flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;
}
html .emoji-picker .sticker-picker{
  display:flex;flex-direction:column;min-height:0;flex:1 1 auto;
}
html .emoji-picker .sticker-picker.hidden{display:none!important}
html .emoji-picker .sticker-picker-tabs{flex:0 0 auto}
html .emoji-picker .sticker-grid{
  flex:1 1 auto;min-height:0;max-height:none!important;overflow-y:auto;
}