.view[name='ai'] {
    position: absolute;
    bottom: 0;
    backdrop-filter: blur(16px);
}
.view[name='ai'] > .header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 12px 16px;
}
.view[name='ai'] > .header > .side:first-child > div {
    text-transform: uppercase;
    font-weight: 500;
}
.view[name='ai'] > .header > .side:last-child > .button {
    border-radius: 50%;
    padding: 4px;
}
.view[name='ai'] > .header > .side:last-child > .button > img {
    width: 12px;
    display: block;
}
.view[name='ai'] > .content {
    position: absolute;
    top: 45px;
    right: 0;
    bottom: 0;
    left: 0;
    padding-right: 8px;
    padding-left: 8px;
    overflow-y: auto;
}

@media (max-width: 799px) {
    .view[name='ai'] {
        top: 0;
    }
}
@media (min-width: 800px) {
    .view[name='ai'] {
        top: 16px;
        width: 360px;
        border-radius: 16px;
        margin: 30px 10px 10px;
    }
}