html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.parent {
    height: 100vh;
    display: grid;
    padding: 5px;
    grid-template-columns: minmax(50px, 200px) 1fr;
    grid-template-rows: 100px 1fr;
    gap: 8px;
    overflow: hidden;
    background-color: #fff;

    overflow: hidden;
}
    
header.titlebar {
    grid-column: span 4 / span 4;
    grid-column-start: 2;
    grid-row-start: 1;
    /* background-color: #e4e4e4; */
    height: 100px;
}

.title {
    justify-self: center;
    align-self: center;
}

.sidebar {
    grid-row: span 5 / span 5;
    grid-column-start: 1;
    grid-row-start: 1;
    background-color: #e4e4e4;
    border-radius: 20px;
}

.chat {
    display: flex;
    flex-direction: column;
    padding: 10px;

    position: relative;
    grid-column: span 4 / span 4;
    grid-row: span 4 / span 4;
    grid-column-start: 2;
    grid-row-start: 2;
    background-color: #f2f2f2;
    border-radius: 20px;
}

.msgs {
    flex: 1;
    overflow-y: auto;
}

.query-submission {
    display: flex;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;

    margin-top: auto;
    left: 10px;
    right: 10px;
    /* padding: 5px; */
    /* bottom: 0px;  */
    justify-self: center;
    border-radius: 10px;
}

.query {
    display: box;
    flex: 1;
    height: 38px;
    padding: 8px 10px;

    /* font: inherit;
    font-size: 14px; */
    line-height: 20px;

    box-sizing: border-box;

    resize: none;
    overflow: hidden;
}

.submit {
    flex: 0 0 auto;
    padding: 8px 12px;
}

.usrMsg {
    justify-self: right;
    padding: 5px;
    width: 50%;
    background-color: #96d5ff;
    border-radius: 10px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.compMsg {
    /* background-color: yellow; */
    padding: 5px;
    padding-bottom: 20px;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}