#app{height:100%}

.page{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:28px;
}

.shell{
    width:min(1120px, 100%);
    height:min(760px, 100%);
    background:rgba(255,255,255,.65);
    border:1px solid var(--border);
    border-radius:var(--radius2);
    box-shadow:var(--shadow2);
    backdrop-filter: blur(10px);
    overflow:hidden;
    display:flex;
}

.shell-full{
    width:100%;
    height:100%;
    border-radius:0;
    border:none;
    box-shadow:none;
    background:transparent;
}

.app-page{
    width:100%;
    height:100%;
    display:block;
    padding:0;
}

.app-shell{
    width:100%;
    height:100%;
    background:transparent;
    border:none;
    border-radius:0;
    box-shadow:none;
    backdrop-filter:none;
    overflow:hidden;
    display:flex;
}

.app-layout{
    width:100%;
    height:100%;
    display:flex;
    gap:0;
}

.sidebar{
    width:300px;
    min-width:300px;
    height:100%;
    background:rgba(255,255,255,.70);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.main{
    flex:1;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.topbar{
    height:62px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 18px;
    border-bottom:1px solid var(--border);
    background:rgba(255,255,255,.75);
}

.chat-body{
    flex:1;
    overflow:auto;
    padding:18px 18px 0 18px;
}


.composer-wrap{
    padding:12px 0;
    border-top:none;
    background:transparent;

    max-width:720px;
    margin:0 auto;
}