/* General Form Container Styling */
.form-container {
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    align-items: stretch; /* Full-width rows */
    gap: 5px; /* Space between rows */
    width: 100%; /* Full width of parent */
    padding: 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Input and Submit Button Row */
.send-container {
    display: flex;
    align-items: stretch; /* Ensure button matches input height */
    width: 100%;
    margin-bottom: 5px; /* Space below this row */
    position: relative; /* Allow absolute positioning for dropdown */
    border-radius: 20px; /* Match rounded corners */
    overflow: hidden; /* Ensure elements visually align with rounded corners */
}

/* Input Field Styling */
.rounded-input {
    flex-grow: 1; /* Take available space */
    /* padding: 10px 15px; */
    border: none; /* Remove internal border */
    border-radius: 0; /* Reset radius to align with container */
    outline: none;
    box-sizing: border-box;
    font-size: 18px;
    margin: 0;
    width: 100%;
    color: var(--text-primary); /* Match app theme */
    background-color: var(--bg-secondary); /* Match app theme */
}

/* Submit Button Styling */
.half-cut-button {
    padding: 0 20px;
    background-color: #707070;
    color: white;
    border: none;
    border-radius: 0; /* Reset radius */
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
    transition: background-color 0.3s ease;
    margin: 0;
}

/* Adjusted Rounded Corners */
.send-container .rounded-input {
    border-radius: 20px 0 0 20px; /* Rounded corners only on the left */
}

.send-container .half-cut-button {
    border-radius: 0 20px 20px 0; /* Rounded corners only on the right */
}

.half-cut-button:hover {
    background-color: #505050;
}

/* Dropdown and Buttons Group */
.dropdown-buttons-container {
    display: flex;
    align-items: stretch; /* Ensure items are vertically aligned */
    gap: 10px; /* Space between dropdown and buttons */
    border: 2px solid var(--border-color);
    border-radius: 20px; /* Rounded corners for entire group */
    padding: 5px; /* Internal spacing */
    box-sizing: border-box;
    width: 99%;
    margin-left: 10px; /* Adjust value to control the shift */
}

/* Dropdown Styling */
.blueprint-dropdown {
    flex-grow: 1; /* Take available space */
    border: none; /* Remove internal border */
    background-color: var(--border-color);
    border-radius: 20px; /* Match group corners */
    outline: none;
    padding: 10px;
    font-size: 14px;
    color: var(--text-primary);
    background-color: transparent; /* Match container background */
    appearance: none; /* Remove default dropdown arrow styling */
}

/* Buttons in Dropdown Group */
.input-button {
    background-color: var(--button-primary);
    border: none;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    margin-top: 2px;
    margin-right: 6px;
}

.button-row {
    display: flex; /* Use flexbox layout */
    gap: 3px; /* Add space between buttons */
    border-radius: 2;
    align-items: center; /* Center vertically */
    justify-content: start; /* Align buttons to the left (or use center/end as needed) */
    flex-wrap: wrap; /* Allow buttons to wrap if the container width is too small */
}

.input-button-subtle {
    padding: 8px 12px; /* Add padding */
    font-size: 1rem; /* Ensure consistent size */
    cursor: pointer; /* Pointer on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
    background-color: #6c757d; /* Grey background */
    border: none;
    /* border-radius: 4px; */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    /* margin-top: 2px; */
    /* margin-right: 6px; */
}

.input-button-subtle:hover {
    background-color: #007bff; /* Blue on hover */
}

.input-button-subtle img {
    width: 1.3em;
    height: 1.3em;
}

.input-button img {
    width: 1.5em;
    height: 1.5em;
}

.input-button:hover {
    background-color: var(--button-hover-bg);
}

/* Hover Effects */
.half-cut-button:hover,
.input-button:hover {
    background-color: #505050;
    color: #fff;
}

/* Quick Prompts Styling */
.quick-prompts-container {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: 10px; /* Space between quick prompts */
    margin: 10px 0; /* Vertical spacing */
    justify-content: start; /* Align prompts to the left */
}

.quick-prompt-button {
    background-color: var(--button-primary);
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.quick-prompt-button:hover {
    background-color: var(--button-hover-bg);
}

.message {
    position: relative;
    padding: 10px;
    margin: 5px 0;
    background-color: #f9f9f9;
    border-radius: 5px;
    transition: background-color 0.2s, height 0.3s ease;
    overflow: hidden; /* Ensure toolbar doesn’t overflow the container */
}

.message-toolbar {
    position: relative; /* Allow the toolbar to expand the container */
    height: 0; /* Hidden initially */
    overflow: hidden; /* Hide contents when collapsed */
    display: flex;
    gap: 5px;
    opacity: 0;
    transition: height 0.3s ease, opacity 0.3s ease;
}

.message:hover .message-toolbar {
    height: 50px; /* Adjust to the desired toolbar height */
    opacity: 1;
}

.message-toolbar .toolbar-btn {
    flex: 1;
    opacity: 0.3; /* Slightly visible by default */
    visibility: visible; /* Ensure buttons remain interactable */
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.toggle-chat-button {
    background-color: #6c757d; /* Grey */
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    margin-top: 2px;
    margin-right: 6px;
}

.toggle-chat-button:hover {
    background-color: #007bff; /* Blue on hover */
}

.message-toolbar .toolbar-btn:hover {
    opacity: 1; /* Fully visible on hover */
    transform: scale(1.1); /* Slight zoom-in effect */
}

.message-toolbar .toolbar-gap {
    width: 14px; /* Gap size between button groups */
}
