/* Keep one compact rounded rectangle through idle, focus and
   multi-line states so the composer never jumps shape while typing. */
#chatView .chat-main-area .chat-input-area {
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    corner-shape: round !important;
    box-shadow: none !important;
    transform: none !important;
    transition:
        border-color 160ms ease,
        background-color 160ms ease !important;
}

#chatView .chat-main-area .chat-input-area:focus-within {
    border-color: transparent !important;
    border-radius: 20px !important;
    corner-shape: round !important;
    background: var(--logicum-composer-surface, var(--input-bg)) !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Keep the main chat dock visually light: only a short fade above the input
   softens the final message lines. No backdrop blur or full-height scrim. */
body #chatView .chat-main-area > .input-container {
    position: sticky !important;
    bottom: 0 !important;
    isolation: isolate !important;
    overflow: visible !important;
    padding: 10px 20px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body #chatView .chat-main-area > .input-container::before {
    content: none !important;
    display: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body #chatView .chat-main-area > .input-container::after {
    content: "" !important;
    position: absolute !important;
    z-index: -1 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 100% !important;
    height: 54px !important;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-dark, #292824) 100%) !important;
    pointer-events: none !important;
}

body #chatView .chat-main-area > .input-container > .input-wrapper {
    position: relative !important;
    z-index: 1 !important;
    gap: 0 !important;
}

body #chatView .input-wrapper > .disclaimer {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

body #chatView .chat-main-area .chat-input-area {
    position: relative !important;
    z-index: 2 !important;
    min-height: 56px !important;
    padding: 7px 12px !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 28px !important;
    background: var(--logicum-composer-surface, var(--input-bg)) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

body #chatView .chat-main-area .chat-input-area:focus-within {
    border-color: color-mix(in srgb, var(--border-color) 70%, var(--text-secondary)) !important;
}

body #chatView .chat-main-area .chat-input-area.is-expanded,
body #chatView .chat-main-area .chat-input-area.is-expanded:focus-within {
    border-radius: 12px !important;
}

body #chatView .chat-main-area .chat-input-area #chatInput {
    min-height: 38px !important;
    max-height: 220px !important;
    padding: 8px 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body #chatView .chat-messages {
    scroll-padding-bottom: 104px !important;
}

/* The live answer stays mounted at completion; suppress entrance effects
   through the handoff so already visible words never fade out or reappear. */
#chatView .message-wrapper:is(.chat-streaming-draft, .chat-response-ready) {
    animation: none !important;
}

#chatView .message-wrapper:is(.chat-streaming-draft, .chat-response-ready) .message-content {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
}

#chatView .message-wrapper.chat-streaming-draft .message-text {
    min-height: 1.4em;
}

@media (prefers-reduced-motion: reduce) {
    #chatView .chat-main-area .chat-input-area {
        transition: none !important;
    }
}

@media (max-width: 768px) {
    body #chatView .chat-main-area > .input-container {
        position: fixed !important;
        bottom: calc(var(--keyboard-offset, 0px) + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
        padding: 0 14px var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px)) !important;
        background: var(--bg-dark, #292824) !important;
    }

    body #chatView .chat-main-area > .input-container::after {
        height: 46px !important;
    }

    body #chatView .chat-main-area .chat-input-area {
        min-height: 52px !important;
        padding: 5px 8px !important;
    }

    body #chatView .chat-messages {
        scroll-padding-bottom: calc(116px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    }
}

/* The clarification sidebar is styled by older global composer rules loaded
   earlier in the page. Reassert its compact rectangular shape in this final
   layer so the universal capsule rule cannot turn it back into a pill. */
body #sideChatPanel .side-chat-input-area,
body #sideChatPanel .side-chat-input-area:hover,
body #sideChatPanel .side-chat-input-area:focus-within,
body #sideChatPanel .side-chat-input-area.is-listening {
    border-radius: 12px !important;
    corner-shape: round !important;
}

/* Welcome and active chats share the same rectangular composer.
   Their surrounding layouts keep their existing placement. */
body #chatView .chat-main-area .chat-input-area,
body #chatView .chat-main-area .chat-input-area:hover,
body #chatView .chat-main-area .chat-input-area:focus-within,
body #chatView .chat-main-area .chat-input-area.is-expanded,
body #chatView .chat-main-area .chat-input-area.is-expanded:focus-within,
body #chatView .chat-main-area .chat-input-area.is-listening,
body #chatView .chat-main-area .chat-input-area.is-transcribing {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto 38px 40px !important;
    grid-template-rows: auto 40px !important;
    align-items: stretch !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    max-height: none !important;
    padding: 10px 12px 8px !important;
    border: 1px solid transparent !important;
    border-radius: 20px !important;
    corner-shape: round !important;
    background: var(--logicum-composer-surface, var(--input-bg)) !important;
    box-shadow: none !important;
    transform: none !important;
    transition: border-color 160ms ease, background-color 160ms ease !important;
    outline: none !important;
}

body #chatView .chat-main-area .chat-input-area:focus-within {
    border-color: transparent !important;
}

body #chatView .chat-main-area .chat-input-area #chatInput {
    box-sizing: border-box !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    align-self: stretch !important;
    width: 100% !important;
    height: var(--logicum-chat-input-height, 56px) !important;
    min-width: 0 !important;
    min-height: 56px !important;
    max-height: 180px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    padding: 4px 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

body #chatView .chat-main-area .chat-input-area #chatInput.logicum-input-scrollable {
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
}

body #chatView .chat-main-area .chat-input-area #mainAttachBtn {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    corner-shape: round !important;
    background: transparent !important;
    box-shadow: none !important;
}

body #chatView .chat-main-area .chat-input-area #mainAttachBtn:hover {
    background: rgba(255, 255, 255, .12) !important;
}

body.light-mode #chatView .chat-main-area .chat-input-area #mainAttachBtn {
    background: transparent !important;
}

body.light-mode #chatView .chat-main-area .chat-input-area #mainAttachBtn:hover {
    background: rgba(0, 0, 0, .075) !important;
}

body #chatView .chat-main-area .chat-input-area #mainAttachBtn .attach-plus-icon {
    display: block !important;
    flex: 0 0 auto !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
}

body #chatView .chat-main-area .chat-input-area #responseSpeedControl {
    grid-column: 3 !important;
    grid-row: 2 !important;
    align-self: center !important;
}

body #chatView .chat-main-area .chat-input-area #mainVoiceBtn {
    grid-column: 4 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
}

body #chatView .chat-main-area .chat-input-area #sendBtn,
body #chatView .chat-main-area .chat-input-area #stopBtn {
    grid-column: 5 !important;
    grid-row: 2 !important;
    align-self: center !important;
    justify-self: center !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    corner-shape: round !important;
}

/* The send arrow follows its button's contrast color rather than the muted
   color of generic icons. Hover and press do not tint the entire control. */
body #chatView .chat-main-area .chat-input-area #sendBtn {
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    transition: none !important;
}

body #chatView .chat-main-area .chat-input-area #sendBtn svg,
body #chatView .chat-main-area .chat-input-area #stopBtn svg {
    color: inherit !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    filter: none !important;
}

/* Lift the dock slightly. Its lower area becomes opaque while the chat fades
   smoothly into it above the composer, so messages never show through below. */
body #chatView .chat-main-area:not(.is-empty) > .input-container {
    position: sticky !important;
    bottom: 12px !important;
    z-index: 20 !important;
    isolation: isolate !important;
    overflow: visible !important;
    margin: 0 0 26px !important;
    padding: 10px 20px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body #chatView .chat-main-area:not(.is-empty) > .input-container::before {
    content: none !important;
    display: none !important;
}

body #chatView .chat-main-area:not(.is-empty) > .input-container::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    right: 0 !important;
    bottom: -26px !important;
    left: 0 !important;
    height: 158px !important;
    background: linear-gradient(
        to top,
        var(--bg-dark, #292824) 0%,
        color-mix(in srgb, var(--bg-dark, #292824) 78%, transparent) 42%,
        color-mix(in srgb, var(--bg-dark, #292824) 30%, transparent) 70%,
        transparent 100%
    ) !important;
    pointer-events: none !important;
}

body #chatView .chat-main-area:not(.is-empty) > .input-container > .input-wrapper {
    position: relative !important;
    z-index: 1 !important;
    gap: 0 !important;
}

body #chatView .chat-main-area:not(.is-empty) .chat-messages {
    padding-bottom: 160px !important;
    scroll-padding-bottom: 160px !important;
}

@media (prefers-reduced-motion: reduce) {
    body #chatView .chat-main-area .chat-input-area {
        transition: none !important;
    }
}

@media (max-width: 768px) {
    body #chatView .chat-main-area:not(.is-empty) > .input-container {
        position: fixed !important;
        right: 0 !important;
        bottom: calc(var(--keyboard-offset, 0px) + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px)) + 8px) !important;
        left: 0 !important;
        z-index: 4600 !important;
        width: 100% !important;
        max-width: none !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 14px !important;
    }

    body #chatView .chat-main-area:not(.is-empty) > .input-container::after {
        bottom: calc(-1 * (var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px)) !important;
        height: calc(116px + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px)) + 12px) !important;
    }

    body #chatView .chat-main-area:not(.is-empty) .chat-messages {
        padding-bottom: calc(184px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
        scroll-padding-bottom: calc(184px + var(--keyboard-offset, 0px) + var(--mobile-safe-bottom, env(safe-area-inset-bottom, 0px))) !important;
    }
}