/* CSAUTOMIX: chat composer look from archive 14.10, scoped to the home chat only. */
/* Based on chat-specific rules from review-fixes-131026.css and
   approved-package-131026.css. No other website or chat functions are changed. */

html body #chat .am-chat-compose > .smile_input {
    background: transparent !important;
}

html body #chat .am-chat-compose #message_input {
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #dbe3e9 !important;
    -webkit-text-fill-color: #dbe3e9 !important;
    background: #171d23 !important;
    border: 1px solid #515b63 !important;
    border-radius: 9px !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025) !important;
}
html body #chat .am-chat-compose #message_input::placeholder {
    color: #9daab7 !important;
    -webkit-text-fill-color: #9daab7 !important;
    opacity: 1 !important;
}
html body #chat .am-chat-compose #message_input:focus {
    background: #171d23 !important;
    border-color: #9b8869 !important;
    box-shadow: 0 0 0 2px rgba(185,158,107,.12) !important;
    outline: 0 !important;
}

html body #chat .am-chat-compose #send_button {
    box-sizing: border-box !important;
    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #ead7aa !important;
    border: 1px solid #b59a65 !important;
    border-radius: 9px !important;
    background: linear-gradient(110deg,#304b5d,#203342) !important;
    box-shadow: none !important;
}
html body #chat .am-chat-compose #send_button:hover {
    background: linear-gradient(110deg,#3b596b,#294253) !important;
}

/* The 14.10 desktop layout uses the same height for input and send button. */
@media (min-width: 651px) {
    html body #chat .input-group.am-chat-compose {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) 140px !important;
        align-items: stretch !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
    }
    html body #chat .am-chat-compose > .smile_input {
        min-width: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        position: relative !important;
    }
    html body #chat .am-chat-compose #message_input {
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        resize: none !important;
        padding: 12px 44px 12px 14px !important;
        margin: 0 !important;
    }
    html body #chat .am-chat-compose > .input-group-btn {
        display: block !important;
        width: auto !important;
        margin: 0 !important;
    }
    html body #chat .am-chat-compose #send_button {
        display: block !important;
        width: 100% !important;
        height: 52px !important;
        min-height: 52px !important;
        margin: 0 !important;
        padding: 10px 14px !important;
    }
}

/* On mobile keep the already-working 13.10 one-column compose layout,
   including the smile picker and full-width button. Only the appearance changes. */
@media (max-width: 650px) {
    html.am-mobile-layout body #chat .am-chat-compose #message_input {
        height: 44px !important;
        min-height: 44px !important;
        font-size: 16px !important;
    }
    html.am-mobile-layout body #chat .am-chat-compose #send_button {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 44px !important;
        min-height: 44px !important;
        margin: 0 !important;
        font-size: 16px !important;
        color: #ead7aa !important;
        border: 1px solid #b59a65 !important;
        border-radius: 9px !important;
        background: linear-gradient(110deg,#304b5d,#203342) !important;
        box-shadow: none !important;
    }
}

/* Mobile-only compact composer v2: the message field is changed into a TEXTAREA
   by chat-tournaments.js. Keep it one line tall by default, then let JS expand
   it for multiline drafts. Preserve the successful desktop layout. */
@media (max-width: 650px) {
  html.am-mobile-layout body #chat .input-group.mt-3.am-chat-compose {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(90px, 25%, 112px) !important;
    align-items: start !important;
    gap: 7px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  html.am-mobile-layout body #chat .input-group.mt-3.am-chat-compose > .smile_input {
    position: relative !important;
    grid-column: 1 !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  html.am-mobile-layout body #chat .input-group.mt-3.am-chat-compose #message_input {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 120px !important;
    padding: 10px 35px 10px 10px !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    resize: none !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
  }
  html.am-mobile-layout body #chat .input-group.mt-3.am-chat-compose #smile_btn {
    position: absolute !important;
    top: 11px !important;
    right: 9px !important;
    width: 22px !important;
    height: 22px !important;
  }
  html.am-mobile-layout body #chat .input-group.mt-3.am-chat-compose > .input-group-btn {
    display: block !important;
    grid-column: 2 !important;
    position: static !important;
    transform: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    justify-self: stretch !important;
  }
  html.am-mobile-layout body #chat .input-group.mt-3.am-chat-compose > .input-group-btn > #send_button {
    display: block !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    margin: 0 !important;
    padding: 8px 3px !important;
    font-size: 12px !important;
    line-height: 20px !important;
    white-space: nowrap !important;
  }
}