style/app_style.css

div[data-testid="stMainBlockContainer"] {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

div[data-testid="stMainBlockContainer"]:has( div[height="480"][data-testid="stVerticalBlockBorderWrapper"]) {
    height: calc(100% - 90px);
}

div[data-testid="stMainBlockContainer"]>div[data-testid="stVerticalBlockBorderWrapper"] {
    height: 100%;
}

div[data-testid="stMainBlockContainer"]>div[data-testid="stVerticalBlockBorderWrapper"]>div {
    height: 100%;
}

div[data-testid="stMainBlockContainer"]>div[data-testid="stVerticalBlockBorderWrapper"]>div>div {
    height: 100%;
}

div[data-testid="stMainBlockContainer"] div[data-testid="stAudioInput"]>div {
    max-height: 3rem;
}

div[data-testid="stMainBlockContainer"] h1 {
    padding-top: 0.25rem;
}

div[class="sidebar-intro"] p {
    margin-bottom: 0.75rem;
}

[class='stAudio'] {
    max-width: 500px !important;
    margin: auto !important;
}

div[data-testid="stChatMessage"]:has(> div[data-testid="stChatMessageAvatarUser"]) {
    flex-direction: row-reverse;
    text-align: right;
}

div[height="480"][data-testid="stVerticalBlockBorderWrapper"] {
    height: 100%;
    min-height: 20px;
}

/* audio quick actions */

div[data-testid="stChatMessage"] div[data-testid="stVerticalBlock"]:has( audio[data-testid="stAudio"]) {
    gap: 2px;
}

div[data-testid="stChatMessage"] div[data-testid="stHorizontalBlock"]:has(> div[data-testid="stColumn"]) {
    flex-direction: row-reverse;
    gap: 4px;
}

div[data-testid="stChatMessage"] div[data-testid="stHorizontalBlock"]>div[data-testid="stColumn"]:has( div[data-testid="stButton"]) {
    width: 6rem;
    min-width: 6rem;
    flex: 0 0 6rem;
}

/* File uploader */

section[data-testid='stFileUploaderDropzone'] {
    padding:6px 2rem;
}

section[data-testid='stFileUploaderDropzone']>button {
    display:none;
}

div[data-testid="stFileUploaderDropzoneInstructions"]>div>span {
    display:none;
}

div[data-testid="stBottomBlockContainer"] {
    padding-bottom: 2rem;
}

/* Chat input component at the bottom */

div[data-testid="stBottomBlockContainer"] div[data-testid="stHorizontalBlock"]:has(> div[data-testid="stColumn"]) {
    gap: 4px;
}

div[data-testid="stBottomBlockContainer"] div[data-testid="stColumn"]:has( div[data-testid="stButton"]):first-of-type {
    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;
}

div[data-testid="stBottomBlockContainer"] div[data-testid="stColumn"]:has( div[data-testid="stButton"]):nth-of-type(2) {
    width: 42px;
    min-width: 42px;
    flex: 0 0 42px;
}

div[data-testid="stBottomBlockContainer"] div[data-testid="stColumn"]:has( div[data-testid="stChatInput"]) {
    width: 10rem;
    min-width: 10rem;
    flex: 1 1 10rem;
}

div[data-testid="stBottomBlockContainer"] div[data-testid="stColumn"]:has( div[data-testid="stAudioInput"]) {
    width: 10rem;
    min-width: 10rem;
    flex: 1 1 10rem;
}

div[data-testid="stBottomBlockContainer"] div[data-testid="stAudioInput"]>div {
    max-height: 40px;
}

/* Mic Button */

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stAudioInput"]>div {
    display: block;
    padding: 0;
    margin: auto;
}

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stAudioInput"]>div>div:last-of-type {
    display:none;
}

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stAudioInput"]>div>div:nth-of-type(2) {
    margin:auto;
}

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stAudioInput"]>div>div:nth-of-type(2)>span:last-of-type {
    display:none;
}

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stAudioInput"]>div>div:nth-of-type(2)>span:only-of-type {
    display:block;
}

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stAudioInput"]>div>span {
    display:none;
}

div[data-testid="stBottomBlockContainer"]:has( div[data-testid="stChatInput"]) div[data-testid="stColumn"]:has( div[data-testid="stAudioInput"]) {
    width: 24px;
    min-width: 24px;
    flex: 0 0 24px;
}