/* Shared chat composer — the pill-style input used on /chat (the reference).
   Extracted from tools/chat.html's inline <style> so EVERY surface with a
   `#chat-form` composer (/chat, /models/<chat-model>/, and future ones) gets
   the identical look without copy-pasting CSS. Scoped to #chat-form so it only
   affects real chat composers. Loaded site-wide from base.html. */

#chat-form .border-top, .border-top:has(#chat-form) { border-top: none !important; }
#chat-form > .d-flex {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 8px 10px 6px 10px;
    align-items: stretch !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: border-color .15s, box-shadow .15s;
}
#chat-form > .d-flex:focus-within {
    border-color: #16A34A;
    box-shadow: 0 0 0 3px rgba(22,163,74,.08);
}
#chat-form #chat-input {
    order: 1;
    flex: 1 1 100% !important;
    width: 100%;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    font-size: 16px;
    line-height: 1.5;
    min-height: 84px;
    max-height: 260px;
}
#chat-form #chat-input:focus { outline: none; box-shadow: none !important; }
/* Paperclip wrapper sits left side of the bottom row. */
#chat-form > .d-flex > div.align-self-end:has(#btn-file-upload) {
    order: 2; align-self: center !important; margin-left: 4px;
}
/* Mic snaps to the right via margin-left:auto. */
#chat-form #btn-voice-input { order: 3; align-self: center !important; margin-left: auto; }
#chat-form #voice-level-bar { order: 4; align-self: center !important; margin: 0 4px; }
/* Floating context indicator + below-form meta clutter — hidden. */
#chat-form #context-indicator { display: none !important; }
#chat-form > div.justify-content-between { display: none !important; }
/* Round green send button at the right edge. */
#chat-form #chat-submit {
    order: 5;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    padding: 0 !important;
    align-self: center !important;
    margin: 0 4px 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
#chat-form #chat-submit i { font-size: 1.05rem; }
#chat-form #btn-file-upload,
#chat-form #btn-voice-input {
    border: none !important;
    background: transparent !important;
    color: #6b7280 !important;
    padding: 8px 10px !important;
    font-size: 1.1rem;
    border-radius: 50% !important;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
#chat-form #btn-file-upload:hover,
#chat-form #btn-voice-input:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
}
#chat-form #btn-file-upload i,
#chat-form #btn-voice-input i { font-size: 1.05rem; }

@media (max-width: 576px) {
    #chat-form > .d-flex { padding: 6px 6px 4px 6px; border-radius: 22px; }
    #chat-form #chat-input { padding: 8px 12px !important; min-height: 72px; max-height: 220px; line-height: 1.45; }
    #chat-form #chat-submit { width: 38px; height: 38px; }
    #chat-form > div.justify-content-between { display: none !important; }
}