/**
 * Canonical HUMAN composer presentation — Pardna slim bar is the visual source of truth.
 *
 * Layout contract:
 *   [ attach ] [ voice ]   [ Message… input pill ]   [ send ]
 *
 * Applies to surfaces that opt in via:
 *   .mg-human-composer.mg-cc-composer.pardna-chat-composer-pill  (ONE pill shell everywhere)
 *
 * Does NOT own send engines, IDs, or attach/voice wiring.
 */
:root {
  --mg-human-composer-gap: 6px;
  --mg-human-composer-ctrl: 34px;
  --mg-human-composer-icon: 16px;
  --mg-human-composer-radius: 18px;
  --mg-human-composer-border: 1px solid rgba(60, 60, 67, 0.29);
  --mg-human-composer-field-bg: #ffffff;
  --mg-human-composer-ctrl-bg: #ffffff;
  --mg-human-composer-field-color: #111827;
  --mg-human-composer-placeholder: #9ca3af;
  --mg-human-composer-icon-color: #6b7280;
  --mg-human-composer-send-bg: #00a854;
  --mg-human-composer-send-fg: #ffffff;
  --mg-human-composer-font-size: 15px;
  --mg-human-composer-line: 1.35;
  --mg-human-composer-pad-y: 6px;
  --mg-human-composer-pad-x: 12px;
  --mg-human-composer-field-min: 22px;
  --mg-human-composer-row-min: 34px;
  --mg-human-composer-field-max: 110px;
}

body.app-theme-dark {
  --mg-human-composer-border: 1px solid rgba(255, 255, 255, 0.18);
  --mg-human-composer-field-bg: #374151;
  --mg-human-composer-ctrl-bg: #374151;
  --mg-human-composer-field-color: #f3f4f6;
  --mg-human-composer-placeholder: #9ca3af;
  --mg-human-composer-icon-color: #d1d5db;
}

/* ── Pardna: .mg-human-composer.mg-cc-composer ── */
.mg-human-composer.mg-cc-composer.pardna-chat-composer-pill,
.mg-human-composer.mg-cc-composer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__input-shell {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: var(--mg-human-composer-gap);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__toolbar {
  display: contents !important;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__toolbar-left {
  order: 1 !important;
  display: flex;
  align-items: center;
  gap: var(--mg-human-composer-gap);
  flex: 0 0 auto;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__input-row {
  order: 2 !important;
  flex: 1 1 0% !important;
  min-width: 0;
  background: var(--mg-human-composer-field-bg);
  border: var(--mg-human-composer-border);
  border-radius: var(--mg-human-composer-radius);
  padding: var(--mg-human-composer-pad-y) var(--mg-human-composer-pad-x);
  box-shadow: none;
  min-height: var(--mg-human-composer-row-min);
  align-self: flex-end;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__toolbar-right {
  order: 3 !important;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__icon-btn,
.mg-human-composer.mg-cc-composer .mg-cc-composer__send {
  width: var(--mg-human-composer-ctrl) !important;
  height: var(--mg-human-composer-ctrl) !important;
  min-width: 0 !important;
  padding: 0 !important;
  flex: 0 0 var(--mg-human-composer-ctrl) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__icon-btn {
  border: var(--mg-human-composer-border) !important;
  background: var(--mg-human-composer-ctrl-bg) !important;
  color: var(--mg-human-composer-icon-color);
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__send {
  background: var(--mg-human-composer-send-bg) !important;
  border: 1px solid var(--mg-human-composer-send-bg) !important;
  color: var(--mg-human-composer-send-fg) !important;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__icon-btn svg,
.mg-human-composer.mg-cc-composer .mg-cc-composer__send svg {
  width: var(--mg-human-composer-icon) !important;
  height: var(--mg-human-composer-icon) !important;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__field,
.mg-human-composer.mg-cc-composer #chatInput {
  width: 100%;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  color: var(--mg-human-composer-field-color) !important;
  font-size: var(--mg-human-composer-font-size) !important;
  line-height: var(--mg-human-composer-line) !important;
  min-height: var(--mg-human-composer-field-min) !important;
  max-height: var(--mg-human-composer-field-max) !important;
  padding: 0 !important;
  resize: none;
  font-family: inherit;
}

.mg-human-composer.mg-cc-composer .mg-cc-composer__field::placeholder,
.mg-human-composer.mg-cc-composer #chatInput::placeholder {
  color: var(--mg-human-composer-placeholder) !important;
}

/* ── Command Clients / Staff / Groups: .cc-chat-composer-bubble ── */
.cc-chat-composer-bubble.mg-human-composer,
.mg-human-composer.cc-chat-composer-bubble,
.cc-human-chat .cc-chat-composer-bubble,
#groupChatArea.cc-human-chat .cc-chat-composer-bubble,
#groupChatInputWrap .cc-chat-composer-bubble {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: var(--mg-human-composer-gap) !important;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cc-human-chat .cc-chat-icon-btn,
.cc-human-chat .cc-chat-send-btn,
#groupChatArea.cc-human-chat .cc-chat-icon-btn,
#groupChatArea.cc-human-chat .cc-chat-send-btn,
#groupChatInputWrap .cc-chat-icon-btn,
#groupChatInputWrap .cc-chat-send-btn,
#groupChatInputWrap #groupChatAttach.cc-chat-icon-btn,
#groupChatInputWrap #groupVoiceBtn.cc-chat-icon-btn,
#groupChatInputWrap #groupChatSend.cc-chat-send-btn,
#panel-chat .cc-chat-icon-btn,
#panel-chat .cc-chat-send-btn,
#panel-chat #chatAttach.cc-chat-icon-btn,
#panel-chat #chatVoiceBtn.cc-chat-icon-btn,
#panel-chat #chatSend.cc-chat-send-btn,
#panel-staff-dm .cc-chat-icon-btn,
#panel-staff-dm .cc-chat-send-btn,
#panel-staff-dm #staffDmAttach.cc-chat-icon-btn,
#panel-staff-dm #staffDmVoiceBtn.cc-chat-icon-btn,
#panel-staff-dm #staffDmSend.cc-chat-send-btn {
  width: var(--mg-human-composer-ctrl) !important;
  height: var(--mg-human-composer-ctrl) !important;
  min-width: 0 !important;
  padding: 0 !important;
  flex: 0 0 var(--mg-human-composer-ctrl) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.cc-human-chat .cc-chat-icon-btn,
#groupChatInputWrap .cc-chat-icon-btn,
#groupChatInputWrap #groupChatAttach.cc-chat-icon-btn,
#groupChatInputWrap #groupVoiceBtn.cc-chat-icon-btn,
#panel-chat .cc-chat-icon-btn,
#panel-chat #chatAttach.cc-chat-icon-btn,
#panel-chat #chatVoiceBtn.cc-chat-icon-btn,
#panel-staff-dm .cc-chat-icon-btn,
#panel-staff-dm #staffDmAttach.cc-chat-icon-btn,
#panel-staff-dm #staffDmVoiceBtn.cc-chat-icon-btn {
  border: var(--mg-human-composer-border) !important;
  background: var(--mg-human-composer-ctrl-bg) !important;
  color: var(--mg-human-composer-icon-color) !important;
}

.cc-human-chat .cc-chat-send-btn,
#groupChatInputWrap .cc-chat-send-btn,
#groupChatInputWrap #groupChatSend.cc-chat-send-btn,
#panel-chat .cc-chat-send-btn,
#panel-chat #chatSend.cc-chat-send-btn,
#panel-staff-dm .cc-chat-send-btn,
#panel-staff-dm #staffDmSend.cc-chat-send-btn {
  border: 1px solid var(--mg-human-composer-send-bg) !important;
  background: var(--mg-human-composer-send-bg) !important;
  color: var(--mg-human-composer-send-fg) !important;
}

.cc-human-chat .cc-chat-icon-btn svg,
.cc-human-chat .cc-chat-send-btn svg,
#groupChatInputWrap .cc-chat-icon-btn svg,
#groupChatInputWrap .cc-chat-send-btn svg,
#groupChatInputWrap #groupChatSend.cc-chat-send-btn svg,
#panel-chat .cc-chat-send-btn svg,
#panel-chat #chatSend.cc-chat-send-btn svg,
#panel-staff-dm .cc-chat-send-btn svg,
#panel-staff-dm #staffDmSend.cc-chat-send-btn svg {
  width: var(--mg-human-composer-icon) !important;
  height: var(--mg-human-composer-icon) !important;
}

/* Field sits as the middle flex grower — visual input pill */
.cc-human-chat .cc-chat-field,
#groupChatInputWrap .cc-chat-field,
#groupChatInputWrap #groupChatInput.cc-chat-field,
#panel-chat .cc-chat-field,
#panel-chat #chatInput.cc-chat-field,
#panel-staff-dm .cc-chat-field,
#panel-staff-dm #staffDmInput.cc-chat-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: var(--mg-human-composer-row-min) !important;
  border: var(--mg-human-composer-border) !important;
  border-radius: var(--mg-human-composer-radius) !important;
  background: var(--mg-human-composer-field-bg) !important;
  color: var(--mg-human-composer-field-color) !important;
  padding: var(--mg-human-composer-pad-y) var(--mg-human-composer-pad-x) !important;
  font-size: var(--mg-human-composer-font-size) !important;
  line-height: var(--mg-human-composer-line) !important;
  box-shadow: none !important;
}

.cc-human-chat .cc-chat-field::placeholder,
#groupChatInputWrap .cc-chat-field::placeholder,
#groupChatInputWrap #groupChatInput.cc-chat-field::placeholder,
#panel-chat .cc-chat-field::placeholder,
#panel-chat #chatInput.cc-chat-field::placeholder,
#panel-staff-dm .cc-chat-field::placeholder,
#panel-staff-dm #staffDmInput.cc-chat-field::placeholder {
  color: var(--mg-human-composer-placeholder) !important;
}

/* Textareas may grow; Groups uses textarea for STRICT composer parity */
/* PRDNA Business / Staff / Groups: Message… is ONE pill (input-row). Nested field must not paint a second canvas. */
#panel-chat .mg-human-composer .mg-cc-composer__input-row #chatInput,
#panel-staff-dm .mg-human-composer .mg-cc-composer__input-row #staffDmInput,
#groupChatInputWrap .mg-human-composer .mg-cc-composer__input-row #groupChatInput,
#panel-admin-ai .mg-human-composer .mg-cc-composer__input-row #aaiQueryDesktop,
#panel-admin-ai .mg-human-composer .mg-cc-composer__input-row #aaiQueryMobile,
#panel-chat .mg-human-composer .mg-cc-composer__input-row .cc-chat-field,
#panel-staff-dm .mg-human-composer .mg-cc-composer__input-row .cc-chat-field,
#groupChatInputWrap .mg-human-composer .mg-cc-composer__input-row .cc-chat-field,
#panel-admin-ai .mg-human-composer .mg-cc-composer__input-row .cc-chat-field {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-height: var(--mg-human-composer-field-min) !important;
}

.cc-human-chat textarea.cc-chat-field,
#panel-chat textarea.cc-chat-field,
#panel-chat #chatInput.cc-chat-field,
#panel-staff-dm textarea.cc-chat-field,
#panel-staff-dm #staffDmInput.cc-chat-field {
  max-height: var(--mg-human-composer-field-max) !important;
  resize: none;
  overflow-y: auto;
}

/* Transparent float shells — geometry only; leave Start/template slots alone */
.cc-human-chat .chat-composer-surface,
#groupChatInputWrap.cc-chat-surface-wrap {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* Pardna flat composer (STRICT same structure as Command) */
#chatFooterBar .mg-human-composer.cc-chat-composer-bubble,
#pardnaChatThread .mg-human-composer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--mg-human-composer-gap) !important;
  width: 100%;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#chatFooterBar .mg-human-composer .cc-chat-icon-btn,
#chatFooterBar .mg-human-composer .cc-chat-send-btn {
  width: var(--mg-human-composer-ctrl) !important;
  height: var(--mg-human-composer-ctrl) !important;
  min-width: 0 !important;
  padding: 0 !important;
  flex: 0 0 var(--mg-human-composer-ctrl) !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#chatFooterBar .mg-human-composer .cc-chat-icon-btn {
  border: var(--mg-human-composer-border) !important;
  background: var(--mg-human-composer-ctrl-bg) !important;
  color: var(--mg-human-composer-icon-color) !important;
}
#chatFooterBar .mg-human-composer .cc-chat-send-btn {
  border: 1px solid var(--mg-human-composer-send-bg) !important;
  background: var(--mg-human-composer-send-bg) !important;
  color: var(--mg-human-composer-send-fg) !important;
}
#chatFooterBar .mg-human-composer .cc-chat-field {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: var(--mg-human-composer-row-min) !important;
  border: var(--mg-human-composer-border) !important;
  border-radius: var(--mg-human-composer-radius) !important;
  background: var(--mg-human-composer-field-bg) !important;
  color: var(--mg-human-composer-field-color) !important;
  padding: var(--mg-human-composer-pad-y) var(--mg-human-composer-pad-x) !important;
  font-size: var(--mg-human-composer-font-size) !important;
}
#chatFooterBar .mg-human-composer .cc-chat-icon-btn svg,
#chatFooterBar .mg-human-composer .cc-chat-send-btn svg {
  width: var(--mg-human-composer-icon) !important;
  height: var(--mg-human-composer-icon) !important;
}

/* ── Canonical composer FOOT (one owner for Command / PRDNA / Pardna) ──
   WhatsApp mobile: controls sit just above the home indicator.
   WhatsApp web: ~10px from the pane bottom.
   Foot is canvas-colored so it is not a gray tray; it only pins geometry
   and grows when Start / stage / attach rows appear. Icons are untouched. */
:root {
  --mg-composer-foot-pad-x: 8px;
  --mg-composer-foot-pad-top: 6px;
  --mg-composer-foot-pad-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  --mg-composer-foot-bg: #e5ddd5;
}
@media (min-width: 768px) {
  :root {
    --mg-composer-foot-pad-x: 12px;
    --mg-composer-foot-pad-top: 8px;
    --mg-composer-foot-pad-bottom: 10px;
  }
}
body.app-theme-dark {
  --mg-composer-foot-bg: #111827;
}
body.pardna-thread-open {
  --mg-composer-foot-bg: #f9fafb;
}
body.app-theme-dark.pardna-thread-open {
  --mg-composer-foot-bg: #111827;
}

.mg-composer-foot,
.chat-composer.chat-composer-float,
#chatFooterBar,
#contextPanel #panel-chat .chat-composer.chat-composer-float,
#contextPanel #panel-staff-dm .chat-composer.chat-composer-float,
#contextPanel #panel-groups .chat-composer.chat-composer-float,
body.canonical-ai-thread-open #contextPanel #aaiMobilePanel .aai-m-input-bar,
body.canonical-ai-thread-open #contextPanel #aaiDesktopPanel .aai-float-composer {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 60 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: var(--mg-composer-foot-pad-top) var(--mg-composer-foot-pad-x) var(--mg-composer-foot-pad-bottom) !important;
  background: var(--mg-composer-foot-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  pointer-events: none;
}
.mg-composer-foot > *,
.chat-composer.chat-composer-float > *,
#chatFooterBar > *,
body.canonical-ai-thread-open #contextPanel #aaiMobilePanel .aai-m-input-bar > *,
body.canonical-ai-thread-open #contextPanel #aaiDesktopPanel .aai-float-composer > * {
  pointer-events: auto;
}

/* Start / template chip: take a full row above the composer so the foot grows. */
.mg-composer-foot .cc-chat-bottom-row:has(#chatStartChat:not(.hidden)),
.chat-composer.chat-composer-float .cc-chat-bottom-row:has(#chatStartChat:not(.hidden)),
#panel-chat .cc-chat-bottom-row:has(#chatStartChat:not(.hidden)) {
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  row-gap: 6px !important;
}
.mg-composer-foot .cc-chat-bottom-row:has(#chatStartChat:not(.hidden)) #chatStartChat,
.chat-composer.chat-composer-float .cc-chat-bottom-row:has(#chatStartChat:not(.hidden)) #chatStartChat {
  flex: 1 1 100% !important;
  order: -1;
}

#panel-chat #chatMessageList,
#panel-staff-dm #staffDmMessageList,
#contextPanel #panel-groups #groupChatMessages,
body.canonical-ai-thread-open #aaiMobileMessages,
body.canonical-ai-thread-open #aaiDesktopMessages,
body.pardna-thread-open #chatMessages.pardna-chat-scroll {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Clients + Staff: beat Command mobile-open padding:0 / transparent so the
   foot matches Groups + AI (canvas color + WhatsApp bottom inset). */
aside#contextPanel.mobile-open #panel-chat.chat-panel:not(.hidden) .chat-composer.chat-composer-float.mg-composer-foot,
aside#contextPanel.mobile-open #panel-staff-dm.chat-panel:not(.hidden) .chat-composer.chat-composer-float.mg-composer-foot,
#panel-chat .chat-composer.chat-composer-float.mg-composer-foot,
#panel-staff-dm .chat-composer.chat-composer-float.mg-composer-foot {
  padding: var(--mg-composer-foot-pad-top) var(--mg-composer-foot-pad-x) var(--mg-composer-foot-pad-bottom) !important;
  background: var(--mg-composer-foot-bg) !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Pardna: foot owns the WhatsApp inset. Inner stack must not add a second
   safe-area or the composer sits too high above a black band. */
#chatFooterBar.mg-composer-foot .chat-footer-stack,
body.pardna-thread-open #chatFooterBar.mg-composer-foot .chat-footer-stack,
body.pardna-thread-open.mg-chat-active #chatFooterBar.mg-composer-foot .chat-footer-stack,
body.pardna-keyboard-open #chatFooterBar.mg-composer-foot .chat-footer-stack {
  padding: 0 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}