/* ChatGPT-inspired roomy composer, KageMux-branded, October 2026.
   CSS only. No new controls, recording, web calls or AI/billing changes. */

/* Transparent two-row composer. Keeps text, ghost and send controls accessible without a filled speech bubble. */
body.kc-chat-page .kc-composer,
body.winner-home.kc-home #chat .kc-composer {
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 48px;
  grid-template-rows:minmax(62px,auto) 48px;
  align-items:center;
  column-gap:11px;
  row-gap:4px;
  width:100%;
  min-height:142px;
  margin-inline:auto;
  padding:13px 17px 14px;
  background:transparent;
  border:1px solid rgba(240,248,240,.14);
  border-radius:28px;
  box-shadow:none;
  transition:border-color 140ms ease,background-color 140ms ease;
}
body.kc-chat-page .kc-composer:focus-within,
body.winner-home.kc-home #chat .kc-composer:focus-within {
  background:transparent;
  border-color:rgba(205,241,188,.27);
  box-shadow:none;
}

/* The generous text-writing space expands naturally with Shift+Enter. */
body.kc-chat-page #kc-composer #kc-prompt,
body.winner-home.kc-home #chat #kc-composer #kc-prompt {
  grid-column:1 / -1;
  grid-row:1;
  display:block;
  box-sizing:border-box;
  align-self:start;
  width:100%;
  min-width:0;
  min-height:62px !important;
  max-height:145px;
  padding:10px 8px 8px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:0 !important;
  color:#f3f6f1;
  font-size:18px !important;
  line-height:1.6 !important;
  font-weight:400;
  letter-spacing:-.01em;
  resize:none;
}
body.kc-chat-page #kc-prompt::placeholder,
body.winner-home.kc-home #chat #kc-prompt::placeholder {
  color:#adb8ad;
  opacity:1;
}

/* Keep the familiar ghost/new-chat action at lower left, understated like the ChatGPT toolbar. */
body.kc-chat-page .kc-composer-ghost,
body.winner-home.kc-home #chat .kc-composer-ghost {
  grid-column:1;
  grid-row:2;
  place-self:end start;
  display:grid;
  place-items:center;
  height:46px;
  width:46px;
  padding:0;
  border-radius:50%;
  border:0;
  background:transparent;
  color:#bdf84c;
}
body.kc-chat-page .kc-composer-ghost:hover,
body.winner-home.kc-home #chat .kc-composer-ghost:hover {
  background:rgba(213,245,190,.065);
  border-color:transparent;
}
body.kc-chat-page .kc-composer-ghost .kc-ghost,
body.winner-home.kc-home #chat .kc-composer-ghost .kc-ghost {
  width:23px;
  height:27px;
}

/* Send remains an actual button, spacious and easy to reach. */
body.kc-chat-page .kc-send,
body.winner-home.kc-home #chat .kc-send {
  grid-column:3;
  grid-row:2;
  place-self:end end;
  width:46px;
  height:46px;
  border-radius:50%;
  border:0;
  padding:0;
  background:#c4ff35;
  color:#16230c;
}
body.kc-chat-page .kc-send:not(:disabled):hover,
body.winner-home.kc-home #chat .kc-send:not(:disabled):hover {
  background:#d1ff69;
}

/* Bring the input width into proportion with the reading area. */
body.kc-chat-page .kc-compose-area {
  width:100%;
  max-width:1190px;
  padding-left:clamp(15px,4vw,42px);
  padding-right:clamp(15px,4vw,42px);
}
body.winner-home.kc-home #chat .kc-compose-area {
  width:100%;
  max-width:1210px;
}
body.winner-home.kc-home #chat .kc-composer {
  max-width:1100px;
}

/* More usable on narrow phones without clipping, and still a noticeably larger input. */
@media (max-width:760px) {
  body.kc-chat-page .kc-composer,
  body.winner-home.kc-home #chat .kc-composer {
    grid-template-columns:42px minmax(0,1fr) 42px;
    grid-template-rows:minmax(50px,auto) 42px;
    column-gap:8px;
    row-gap:3px;
    min-height:118px;
    padding:10px 12px 11px;
    border-radius:24px;
  }
  body.kc-chat-page #kc-composer #kc-prompt,
  body.winner-home.kc-home #chat #kc-composer #kc-prompt {
    min-height:50px !important;
    padding:7px 4px !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }
  body.kc-chat-page .kc-composer-ghost,
  body.winner-home.kc-home #chat .kc-composer-ghost,
  body.kc-chat-page .kc-send,
  body.winner-home.kc-home #chat .kc-send {
    width:42px;
    height:42px;
  }
  body.kc-chat-page .kc-compose-area {
    padding-inline:12px;
  }
  body.winner-home.kc-home #chat .kc-compose-area {
    padding-inline:12px;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.kc-chat-page .kc-composer,
  body.winner-home.kc-home #chat .kc-composer {
    transition:none;
  }
}