/* ==========================================================================
   SPO chat composer — owner stylesheet
   [emoji] [country — multi-country mode only] [message] [send]
   Every control shares one height (--composer-h) and sits on the same baseline;
   the message field grows upwards as the text gets longer.
   ========================================================================== */
.spoComposer{
  --composer-h:46px;
  display:flex; flex-direction:column; gap:10px;
  padding:12px 14px 14px;
  border-top:1px solid rgba(62,61,86,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,240,250,.96));
}
.spoInputWrap{
  display:grid;
  grid-template-columns:var(--composer-h) minmax(0,1fr) auto;
  align-items:end;
  gap:8px;
}
html.bmMultiCountry .spoInputWrap{ grid-template-columns:var(--composer-h) auto minmax(0,1fr) auto; }

.spoEmojiWrap{ position:relative; height:var(--composer-h); }
.spoEmojiBtn{
  width:var(--composer-h); height:var(--composer-h); padding:0;
  display:grid; place-items:center;
  border:1px solid rgba(62,61,86,.12); border-radius:14px;
  background:var(--surface); font-size:19px; line-height:1; cursor:pointer;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.spoEmojiBtn:hover{ background:var(--surface-soft); }
.spoEmojiBtn:active{ transform:scale(.95); }

.spoCountrySelect{
  height:var(--composer-h); max-width:160px;
  padding:0 34px 0 12px;
  border:1px solid rgba(62,61,86,.12); border-radius:14px;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7888' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
  appearance:none; -webkit-appearance:none;
  color:var(--ink); font:700 13px/1 var(--font); cursor:pointer;
}
.spoCountrySelect:focus-visible{ outline:0; box-shadow:var(--focus-ring); }

.spoTextarea{
  display:block; width:100%; min-width:0;
  min-height:var(--composer-h); height:var(--composer-h); max-height:140px;
  padding:12px 15px;
  border:1px solid rgba(62,61,86,.12); border-radius:16px;
  background:var(--surface); color:var(--text);
  font:500 14px/1.45 var(--font);
  resize:none;
  transition:border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.spoTextarea:focus{ outline:none; border-color:var(--violet); box-shadow:var(--focus-ring); }

.spoSendBtn{
  height:var(--composer-h); min-width:88px; padding:0 18px;
  border:0; border-radius:14px;
  background:var(--violet); color:#fff;
  font:800 13px/1 var(--font); cursor:pointer;
  box-shadow:0 8px 18px rgba(93,83,180,.24);
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.spoSendBtn:hover:not([disabled]){ background:var(--violet-ink); }
.spoSendBtn:active:not([disabled]){ transform:scale(.97); }
.spoSendBtn[disabled]{ opacity:.55; box-shadow:none; cursor:default; }

@media (max-width:820px), (hover:none) and (pointer:coarse){
  .spoComposer{ --composer-h:44px; padding:8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap:8px; }
  .spoInputWrap{ gap:6px; }
  /* phones: the country picker takes its own short row above the message */
  html.bmMultiCountry .spoInputWrap{ grid-template-columns:var(--composer-h) minmax(0,1fr) auto; }
  html.bmMultiCountry .spoInputWrap .spoCountrySelect{ order:-1; grid-column:1 / -1; justify-self:start; height:34px; border-radius:999px; }
  .spoTextarea{ font-size:16px; padding:11px 13px; }
  .spoSendBtn{ min-width:64px; padding:0 12px; }
}