#aih_lower{
    /* background-color: red; */

    border-top: 2px solid var(--text-colour);

    position:absolute;
    height: 125px;
    bottom:0px;
    left: 25px;
    right: 25px;
}

#aih_upper{
    /* background-color: lime; */

    position: absolute;
    top: 0px;
    left: 25px;
    right: 25px;
    bottom: 148px;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    /* overflow-y: auto; */
    /* i can't get scrolling to work i'll figure this out tmrw */
    
}

#aihl-input{
    position: absolute;
    top: 25px;
    bottom: 25px;
    left: 32px;
    right: 128px;
    
    border: 2px solid var(--text-colour);
    border-radius: 24px;
    background: none;

    font-size: 24px;
    color: var(--text-colour);
    padding-left: 36px;
    padding-right: 36px;

    font-family: var(--standard-font);

}

#aihl-input:focus{
    border: 2px solid var(--some-text-colour);
    outline:none;
}

#aihl-submit{
    /* background-color: lime; */

    text-align: center;
    line-height: 76px;
    font-size: 24px;
    color: var(--text-colour);
    user-select: none;
    
    position: absolute;
    top: 25px;
    bottom: 25px;
    right: 32px;
    width: 64px;

    border: 2px solid var(--text-colour);
    border-radius: 24px;
}

.aihmessage{
    background-color: var(--msg-box-gradient);

    color: white;
    font-family: var(--standard-font);
    display: block;
    /* width: 35vw; */
    max-width: 50vw;
    min-width: none;
    word-break: break-word;
    font-size: 18px;

    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin: 4px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;

    align-self: flex-start;

}

.aihprompt{
    background-color: var(--standard-border-colour);

    color: var(--text-colour);
    font-family: var(--standard-font);
    display: block;
    /* width: 35vw; */
    max-width: 50vw;
    min-width: none;
    word-break: break-word;
    font-size: 18px;

    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin: 4px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-left-radius: 18px;

    align-self: flex-end;
}

.aihsystem{
    width: 70%;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 5%;
    padding-right: 5%;
    margin: 6px;
    /* background-color: red; */
    background: linear-gradient(0.25turn,transparent,var(--standard-border-colour),var(--standard-border-colour),var(--standard-border-colour),transparent);

    color: var(--text-colour);
    font-family: var(--standard-font);

    align-self: center;
    text-align: center;
}

.aihthinking{
    background-color: var(--msg-box-gradient);

    color: white;
    font-family: var(--standard-font);
    display: block;
    /* width: 35vw; */
    max-width: 50vw;
    min-width: none;
    word-break: break-word;
    font-size: 18px;

    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin: 4px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-right-radius: 18px;

    align-self: flex-start;
}

.aihthinkdots{
    height: 12px;
    pointer-events: none;
    user-select: none;
}