/* KageMux compact composer, October 16 2026.
   Mirrors the spacing rhythm of modern chat interfaces without copying a brand.
   Reuses real existing controls; no pretend microphone, file picker or paid feature. */

/* A centered writing column aligned with the conversation; not a full-width control panel. */
body.kc-chat-page .kc-compose-area,
body.winner-home.kc-home #chat .kc-compose-area {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:
    "disclaimer disclaimer"
    "limit limit"
    "form form"
    "status status"
    "note foot";
  gap:0 12px;
  align-items:center;
  box-sizing:border-box;
  flex:0 0 auto;
  width:100%;
  max-width:990px;
  margin:0 auto;
  padding:0 17px 20px;
}
body.kc-chat-page .kc-messages,
body.winner-home.kc-home #chat .kc-messages {
  max-width:940px;
}
body.kc-chat-page #kc-limit,
body.winner-home.kc-home #chat #kc-limit {
  grid-area:limit;
}
/* ChatGPT-style one-line, rounded bar with the same real ghost/new-chat action. */
body.kc-chat-page #kc-composer.kc-composer,
body.winner-home.kc-home #chat #kc-composer.kc-composer {
  grid-area:form;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:stretch;
  gap:10px;
  width:100%;
  max-width:none;
  min-height:68px;
  height:auto;
  margin:0;
  padding:8px 10px;
  border:1px solid rgba(245,250,244,.105);
  border-radius:36px;
  background:rgba(255,255,255,.062);
  box-shadow:none;
  transition:border-color .14s ease,background-color .14s ease;
}
body.kc-chat-page #kc-composer.kc-composer:focus-within,
body.winner-home.kc-home #chat #kc-composer.kc-composer:focus-within {
  background:rgba(255,255,255,.072);
  border-color:rgba(210,237,204,.20);
  box-shadow:none;
}
/* Single focused text line, growing naturally when Shift+Enter adds lines. */
body.kc-chat-page #kc-composer #kc-prompt,
body.winner-home.kc-home #chat #kc-composer #kc-prompt {
  display:block;
  flex:1 1 0;
  order:1;
  box-sizing:border-box;
  align-self:center;
  width:100%;
  min-width:0;
  min-height:42px !important;
  max-height:145px;
  padding:7px 2px !important;
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  outline:none !important;
  color:#f1f5ef;
  font-size:17px !important;
  font-weight:400;
  line-height:1.58 !important;
  letter-spacing:0;
  resize:none;
}
body.kc-chat-page #kc-composer #kc-prompt::placeholder,
body.winner-home.kc-home #chat #kc-composer #kc-prompt::placeholder {
  color:#bdc5bd;
  opacity:1;
}
/* Existing ghost button still creates a new chat. It does NOT pretend to attach files. */
body.kc-chat-page #kc-composer .kc-composer-ghost,
body.winner-home.kc-home #chat #kc-composer .kc-composer-ghost {
  order:0;
  flex:0 0 40px;
  display:grid;
  place-items:center;
  align-self:center;
  width:40px;
  height:40px;
  margin:0;
  padding:0;
  color:#baf550;
  background:transparent;
  border:0;
  border-radius:50%;
}
body.kc-chat-page #kc-composer .kc-composer-ghost:hover,
body.winner-home.kc-home #chat #kc-composer .kc-composer-ghost:hover {
  background:rgba(255,255,255,.065);
}
body.kc-chat-page #kc-composer .kc-composer-ghost .kc-ghost,
body.winner-home.kc-home #chat #kc-composer .kc-composer-ghost .kc-ghost {
  width:19px;
  height:23px;
}
/* Actual send button, KageMux lime instead of copying ChatGPT's white. */
body.kc-chat-page #kc-composer .kc-send,
body.winner-home.kc-home #chat #kc-composer .kc-send {
  order:2;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  align-self:center;
  width:42px;
  height:42px;
  margin:0;
  padding:0;
  background:#c5ff35;
  color:#142308;
  border:0;
  border-radius:50%;
  box-shadow:none;
}
body.kc-chat-page #kc-composer .kc-send:not(:disabled):hover,
body.winner-home.kc-home #chat #kc-composer .kc-send:not(:disabled):hover {
  background:#d9ff8a;
}

/* The disclaimer sits quietly above, just like the reference.
   Keep truthful AI/paid-limit disclosures and actual error messages readable. */
body.kc-chat-page .kc-compose-area .kc-disclaimer,
body.winner-home.kc-home #chat .kc-compose-area .kc-disclaimer {
  grid-area:disclaimer;
  width:100%;
  margin:0 0 10px;
  padding:0;
  text-align:center;
  color:#9da99e;
  font-size:12px;
  line-height:1.45;
}
body.kc-chat-page .kc-compose-area #kc-form-status,
body.winner-home.kc-home #chat .kc-compose-area #kc-form-status {
  grid-area:status;
  align-self:start;
  margin:4px 10px 0;
  padding:0;
  min-height:0;
  color:#d7dfd0;
  text-align:center;
  font-size:12px;
  line-height:1.45;
}
body.kc-chat-page .kc-compose-area #kc-form-status:empty,
body.winner-home.kc-home #chat .kc-compose-area #kc-form-status:empty {
  display:none !important;
}

/* Put optional pinned notes BELOW the bar rather than making a second header above it. */
body.kc-chat-page .kc-compose-area .kc-context,
body.winner-home.kc-home #chat .kc-compose-area .kc-context {
  grid-area:note;
  align-self:start;
  justify-self:start;
  box-sizing:border-box;
  width:auto;
  max-width:100%;
  min-width:0;
  margin:6px 0 0 12px;
  padding:0 0 3px;
  border:0;
}
body.kc-chat-page .kc-compose-area .kc-context summary,
body.winner-home.kc-home #chat .kc-compose-area .kc-context summary {
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-weight:400;
  line-height:1.5;
  color:#a3b19e;
}
body.kc-chat-page .kc-compose-area .kc-context summary::before,
body.winner-home.kc-home #chat .kc-compose-area .kc-context summary::before {
  margin:0 4px 0 0;
}
body.kc-chat-page .kc-compose-area .kc-context summary span,
body.winner-home.kc-home #chat .kc-compose-area .kc-context summary span {
  display:none;
}
body.kc-chat-page .kc-compose-area .kc-context[open],
body.winner-home.kc-home #chat .kc-compose-area .kc-context[open] {
  width:100%;
  max-width:460px;
}
body.kc-chat-page .kc-compose-area #kc-note,
body.winner-home.kc-home #chat .kc-compose-area #kc-note {
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:100%;
  margin-top:8px;
}
/* Keep Delete conversation available, but remove the redundant large help line.
   The textarea retains its keyboard shortcuts and labels. */
body.kc-chat-page .kc-compose-area .kc-composer-foot,
body.winner-home.kc-home #chat .kc-compose-area .kc-composer-foot {
  grid-area:foot;
  align-self:start;
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:nowrap;
  width:auto;
  margin:6px 11px 0 0;
  padding:0;
  gap:0;
  line-height:1.5;
  text-align:right;
}
body.kc-chat-page .kc-compose-area .kc-composer-foot > span:first-child,
body.winner-home.kc-home #chat .kc-compose-area .kc-composer-foot > span:first-child {
  display:none;
}
body.kc-chat-page .kc-compose-area .kc-composer-foot > span:last-child,
body.winner-home.kc-home #chat .kc-compose-area .kc-composer-foot > span:last-child {
  font-size:0;
}
body.kc-chat-page .kc-compose-area .kc-composer-foot button,
body.winner-home.kc-home #chat .kc-compose-area .kc-composer-foot button {
  font-size:11px;
  font-weight:400;
  color:#a3b19e;
  text-decoration:none;
}

/* The marketing preview keeps the big message panel, but gets the same compact input. */
body.winner-home.kc-home #chat .kc-chat-shell {
  min-height:0;
}
body.winner-home.kc-home #chat .kc-compose-area {
  padding-bottom:14px;
}
@media(max-width:760px) {
  body.kc-chat-page .kc-compose-area,
  body.winner-home.kc-home #chat .kc-compose-area {
    max-width:none;
    width:100%;
    padding:0 12px 12px;
    gap:0 8px;
  }
  body.kc-chat-page #kc-composer.kc-composer,
  body.winner-home.kc-home #chat #kc-composer.kc-composer {
    min-height:60px;
    padding:7px 9px;
    gap:7px;
    border-radius:30px;
  }
  body.kc-chat-page #kc-composer #kc-prompt,
  body.winner-home.kc-home #chat #kc-composer #kc-prompt {
    min-height:38px !important;
    padding:6px 0 !important;
    font-size:16px !important;
    line-height:1.55 !important;
  }
  body.kc-chat-page #kc-composer .kc-composer-ghost,
  body.winner-home.kc-home #chat #kc-composer .kc-composer-ghost {
    width:38px;
    height:38px;
    flex-basis:38px;
  }
  body.kc-chat-page #kc-composer .kc-send,
  body.winner-home.kc-home #chat #kc-composer .kc-send {
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  body.kc-chat-page .kc-compose-area .kc-disclaimer,
  body.winner-home.kc-home #chat .kc-compose-area .kc-disclaimer {
    font-size:11px;
    line-height:1.4;
    margin-bottom:7px;
  }
  body.kc-chat-page .kc-compose-area .kc-context,
  body.winner-home.kc-home #chat .kc-compose-area .kc-context {
    margin:5px 0 0 7px;
  }
  body.kc-chat-page .kc-compose-area .kc-composer-foot,
  body.winner-home.kc-home #chat .kc-compose-area .kc-composer-foot {
    margin:5px 7px 0 0;
  }
}
@media(prefers-reduced-motion:reduce){
  body.kc-chat-page #kc-composer.kc-composer,
  body.winner-home.kc-home #chat #kc-composer.kc-composer {
    transition:none;
  }
}


/* Full-screen chat gets a calm, editorial empty state instead of stacked demo cards.
   Keep those demo suggestions on the public landing page, where they belong. */
body.kc-chat-page .kc-welcome {
  max-width:900px;
  padding-top:clamp(48px,17vh,170px);
}
body.kc-chat-page .kc-welcome .kc-welcome-ghost,
body.kc-chat-page .kc-welcome .kc-overline,
body.kc-chat-page .kc-welcome .kc-prompts,
body.kc-chat-page .kc-welcome >p:not(.kc-overline) {
  display:none !important;
}
body.kc-chat-page .kc-welcome h3 {
  margin:0;
  color:#f1f4f1;
  font-size:clamp(29px,3vw,37px);
  font-weight:550;
  line-height:1.24;
  letter-spacing:-.75px;
}
@media (max-width:760px) {
  body.kc-chat-page .kc-welcome {
    padding-top:clamp(42px,15vh,110px);
  }
  body.kc-chat-page .kc-welcome h3 {
    font-size:29px;
  }
}