static/css/_input.css

/* ── input row ── */
.msg-row {
    padding: 8px 0 !important;
    gap: 8px !important;
    border-top: none !important;
    background: #fff !important;
    align-items: center !important;
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
    flex-shrink: 0 !important;
}
.dark .msg-row {
    background: #171717 !important;
}
.dark .msg-row *:not(textarea):not(button):not(button *) {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.msg-input textarea {
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    overflow-y: auto !important;
    resize: none !important;
    border-radius: 20px !important;
    border: 1px solid #e0e0e0 !important;
    padding: 18px 22px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    background: #fff !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
    color: #000 !important;
}
.dark .msg-input textarea {
    background: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #e8e8e8 !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.msg-input textarea:focus {
    border-color: #c0c0c0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    outline: none !important;
}
.dark .msg-input textarea:focus {
    border-color: rgba(107, 159, 255, 0.4) !important;
    box-shadow: 0 0 0 2px rgba(107, 159, 255, 0.1), 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* ── new chat (+) button ── */
.new-chat-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 50% !important;
    border: 1px solid #e5e7eb !important;
    background: #fff !important;
    color: #666 !important;
    font-size: 22px !important;
    font-weight: 300 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}
.new-chat-btn:hover {
    background: #f5f5f5 !important;
    color: #333 !important;
    border-color: #d0d0d0 !important;
}
.dark .new-chat-btn {
    border-color: #3a3a3a !important;
    background: #2a2a2a !important;
    color: #999 !important;
}
.dark .new-chat-btn:hover {
    background: #333 !important;
    color: #e8e8e8 !important;
    border-color: #505050 !important;
}

/* ── buttons ── */
button.primary { border-radius: 20px !important; font-weight: 500 !important; font-size: 14px !important; padding: 8px 20px !important; }
button.secondary { border: 1px solid #e5e5ea !important; border-radius: 20px !important; font-size: 14px !important; color: #444 !important; padding: 8px 16px !important; }
.dark button.secondary { border-color: #3a3a3a !important; color: #c0c0c0 !important; }

/* ── send button ── */
.send-btn, #send-btn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}
#send-btn button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 18px !important;
}