.com-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;

    height: 40px;
    padding: 0 30px;
    width: var(--body-width);

    background-color: var(--violet-900);
    color: white;
}

/* override for login screen */
body.sign-in .com-bar {
    padding: 0 20px;
    width: auto;
}

.com-bar .message {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.com-bar .message .icon {
    display: flex;
    vertical-align: middle;
    flex-direction: column;
    order: 0;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 35px;
    height: 24px;

    color: var(--violet-200);
    background: var(--violet-700);

    border-radius: 100px;
    vertical-align: middle;
    text-align: center;
}

.com-bar .message .icon span, .com-bar-drawer .message .icon span {
    line-height: unset;
}

.com-bar .message .peptasia .font-interactive {
    font-size: 20px;
    line-height: 20px;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 10px;

    width: 35px;
    height: 24px;

    background: var(--violet-700);
    border-radius: 100px;
}

.com-bar .message .text {
    flex: column;
    flex-direction: row;
    order: 1;
    flex-grow: 0;
    order: 0;
    flex-grow: 0;

    font-family: 'AvenirHeavy';
    font-style: normal;
    font-weight: 900;
    font-size: var(--font-size-14);
    line-height: 24px; /* docs say 21, but this aligns with icon */
    text-align: left;
    vertical-align: middle;
    padding-left: 8px;
}

.com-bar .message a {
    color: white !important;
    text-decoration: underline !important;
    display: inline;
}

.com-bar-drawer {
    display: flex;
    flex-flow: row wrap;
    align-items: center;

    padding: 0 30px;
    width: 100%;

    background-color: var(--violet-000);
    color: var(--slate-900);
}

/* override for login screen */
body.sign-in .com-bar-drawer {
    padding: 0 20px;
    width: auto;
}

.com-bar-drawer .message-container {
    display: flex;
    flex: 0 0 100%; /* Let it fill the entire space horizontally */
}

.com-bar-drawer .message {
    display: grid;
    grid-template-columns: 35px auto;
    padding: 16px 0;
}

.com-bar-drawer .message:not(:first-child) {
    border-top: 1px solid var(--violet-200);
    padding-top: 16px;
}
.com-bar-drawer .message .icon {
    display: flex;
    flex-direction: column;
    order: 0;
    flex-grow: 0;
    justify-content: center;
    align-items: center;
    gap: 10px;

    width: 35px;
    height: 24px;

    color: var(--violet-900);
    background: var(--violet-200);

    border-radius: 100px;
    vertical-align: middle;
    text-align: center;
}

.com-bar-drawer .message .peptasia .font-interactive {
    font-size: 20px;
    line-height: 20px;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 10px;
    width: 35px;
    height: 24px;
}

.com-bar-drawer .message .row1 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 1;
}

.com-bar-drawer .message .row2 {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 2;
}

.com-bar-drawer .message .title {
    font-family: 'AvenirHeavy';
    font-style: normal;
    font-weight: 900;
    font-size: var(--font-size-14);
    line-height: 24px; /* docs say 21, but this aligns with icon */
    text-align: left;
    vertical-align: middle;
    padding-left: 8px;
    color: var(--slate-900);
}

.com-bar-drawer .message .text {
    font-family: 'AvenirRoman';
    font-style: normal;
    font-weight: 900;
    font-size: var(--font-size-14);
    line-height: 21px;
    text-align: left;
    vertical-align: middle;
    padding-left: 8px;
    color: var(--slate-900);
}

.com-bar-drawer .message a,
.com-bar-drawer .message a:hover,
.com-bar-drawer .message a:visited,
.com-bar-drawer .message a:active {
    color: var(--blue-700) !important;
    text-decoration: none !important;
}