/* Chat composer shell extracted from chat_styles.css */

body.sidebar-open .chat-input-area {
    pointer-events: auto;
}

.chat-input-area {
    padding: 0.5rem;
    background: var(--chat-input-bg);
    border-top: var(--border-width) solid var(--border-color);
    margin: 0;
    margin-right: var(--border-width);
    margin-left: var(--border-width);
    margin-bottom: var(--border-width);
    position: relative;
    min-height: 100px;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.4rem;
    z-index: 1075;
    transition: background 0.3s ease;
}

.chat-input-area {
    --chat-composer-shell-min-height: 60px;
    position: relative;
    min-height: auto;
    padding: 0.38rem 0.38rem calc(0.38rem + var(--chat-composer-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px));
    gap: 0.32rem;
    transition: padding-bottom 0.18s ease;
}

.chat-composer {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    min-height: var(--chat-composer-shell-min-height);
    padding: 0.42rem;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 44%, var(--chat-input-border) 56%);
    background: var(--chat-input-bg);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--primary-color) 22%, transparent);
    overflow: visible;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-composer:focus-within {
    border-color: color-mix(in srgb, var(--primary-color) 70%, var(--chat-input-border));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.chat-composer-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: flex-end;
    gap: 0.35rem;
}

.chat-composer-attach-wrap {
    position: relative;
}

.chat-composer .chat-tool-btn {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--chat-input-border) 85%, var(--primary-color) 15%);
    background: color-mix(in srgb, var(--surface-2) 92%, transparent);
    transition: transform 0.16s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.chat-composer .chat-tool-btn i {
    font-size: 1.2rem;
}

.chat-composer .chat-tool-btn:hover {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--primary-color) 46%, var(--chat-input-border) 54%);
    background: color-mix(in srgb, var(--primary-color) 14%, var(--surface-2) 86%);
}

.chat-composer .chat-tool-btn:active {
    transform: translateY(0);
}

.chat-composer .btn-attach {
    color: color-mix(
        in srgb,
        var(--primary-color, var(--bs-primary, #2EA6FF)) 78%,
        var(--bs-text-secondary, #6c757d) 22%
    );
}

.chat-composer-row :is(#chat-message-input, #messageInput).form-control {
    min-width: 0;
    width: 100%;
    height: 44px;
    min-height: 44px;
    max-height: 400px;
    resize: none;
    overflow-y: hidden;
    padding: 0.68rem 0.92rem;
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--chat-input-border) 88%, var(--primary-color) 12%);
    background: color-mix(in srgb, var(--chat-input-bg) 96%, transparent);
    color: var(--chat-input-text);
    line-height: 1.3125rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.chat-composer-row :is(#chat-message-input, #messageInput).form-control:focus {
    border-color: color-mix(in srgb, var(--primary-color) 72%, var(--chat-input-border) 28%);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 22%, transparent);
}

.chat-composer-row :is(#chat-message-input, #messageInput).form-control::placeholder {
    color: color-mix(in srgb, var(--bs-text-secondary, #6c757d) 88%, transparent);
}

.chat-composer-action-stack {
    position: relative;
    width: 46px;
    height: 46px;
    min-width: 46px;
}

.chat-composer-action-stack .btn-send,
.chat-composer-action-stack .btn-voice {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    margin: 0;
    transition: opacity 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.chat-composer-action-stack[data-has-content="false"] .btn-send {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.82);
}

.chat-composer-action-stack[data-has-content="false"] .btn-voice {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.chat-composer-action-stack[data-has-content="true"] .btn-send {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
}

.chat-composer-action-stack[data-has-content="true"] .btn-voice {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.82);
}

.chat-composer .btn-send {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 999px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-on-primary, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color) 70%, #1f5fa8 30%);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary-color) 86%, #62c7ff 14%) 0%,
        color-mix(in srgb, var(--primary-color) 82%, #1a6fd0 18%) 100%
    );
    box-shadow: 0 5px 14px color-mix(in srgb, var(--primary-color) 35%, transparent);
}

.chat-composer .btn-send i {
    font-size: 1.22rem;
}

.chat-composer .btn-send:hover {
    transform: translateY(-1px);
    color: var(--text-on-primary, #fff);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--primary-color) 42%, transparent);
}

.chat-composer .btn-send:active {
    transform: translateY(0);
}

@media (min-width: 1025px) {
    :is(#chat-message-input, #messageInput).form-control {
        font-size: 17px;
        line-height: 1.45;
    }

    .chat-input-shortcut-hint {
        display: block;
    }
}

@media (max-width: 768px) {
    body.sidebar-open .chat-input-area {
        position: relative;
        z-index: 1115;
    }

    .chat-input-area {
        padding: 0.34rem 0.34rem calc(0.34rem + var(--chat-composer-bottom-offset, 0px) + env(safe-area-inset-bottom, 0px));
        gap: 0.28rem;
    }

    .chat-composer {
        gap: 0.32rem;
        padding: 0.3rem;
        border-radius: 18px;
    }

    .chat-composer-row {
        gap: 0.28rem;
    }

    .chat-composer .chat-tool-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 999px;
    }

    .chat-composer .chat-tool-btn i {
        font-size: 1.18rem;
    }

    .chat-composer-row :is(#chat-message-input, #messageInput).form-control {
        height: 44px;
        min-height: 44px;
        font-size: 16px;
        padding: 0.52rem 0.64rem;
    }

    .chat-composer-action-stack {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .chat-composer .btn-send {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 999px;
    }

    .chat-composer .btn-send i {
        font-size: 1.14rem;
    }
}

@media (max-width: 430px) {
    .chat-composer {
        gap: 0.26rem;
        padding: 0.24rem;
    }

    .chat-composer-row {
        gap: 0.24rem;
    }

    .chat-composer .chat-tool-btn {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 999px;
    }

    .chat-composer-action-stack {
        width: 48px;
        height: 48px;
        min-width: 48px;
    }

    .chat-composer .btn-send {
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 999px;
    }
}