.chat__wrapper{.side__nav{display:grid;grid-template-rows:max-content max-content 1fr max-content;gap:var(--space-2);overflow-x:clip;margin:var(--space);content-visibility:auto;@media(width<992px){position:fixed;inset:0 auto 0 0;width:min(80%,var(--sidebar-width));padding:var(--space);margin:0;background-color:var(--bg-color);z-index:3;transition:.6s;translate:-100% 0;.sidebar-open &{translate:0 0}}*{flex-shrink:0;white-space:nowrap}.header__wrapper{display:flex;flex-wrap:wrap;gap:var(--space);padding-left:env(titlebar-area-x,0);app-region:drag;-webkit-app-region:drag;>*{app-region:no-drag;-webkit-app-region:no-drag}:last-child{margin-left:auto}}.top__wrapper{#new-chat-button{--padding-x: 1.15em;--padding-y: 1em;--radius: 50px;display:flex;align-items:center;gap:var(--space);margin-bottom:var(--space-2);transition:opacity .3s;.icon{height:1lh}.offline &{opacity:.6;pointer-events:none}}.history__text{font-size:1.1rem;padding-left:.65rem;margin-bottom:-1rem}}.history__wrapper{position:relative;.scroll__container{overflow-x:clip;.items__wrapper{display:flex;flex-direction:column;gap:.15rem;.item{position:relative;color:inherit;opacity:.8;padding:.65rem .75rem;text-align:left;border-radius:50px;overflow:hidden;text-overflow:ellipsis;background-color:transparent;cursor:pointer;&.active{background-color:var(--surface-color)}&:hover,&:focus-within{background-color:rgb(from var(--surface-color) r g b / 75%)}&:focus{outline-color:var(--accent-color)}.title,.menu{.renaming &{display:none}}.title{pointer-events:none}.menu{position:absolute;inset:0 0 0 auto;display:flex;gap:var(--space);padding-inline:.75rem 1rem;background:linear-gradient(to right,transparent,var(--surface-color) 15% 100%);opacity:0;pointer-events:none;@media(hover:hover){.item:hover &,.item:focus-within &{opacity:1;pointer-events:auto}}@media(hover:none){.item.active &{opacity:1;pointer-events:auto}}.menu__item{padding:0;background:none;&.delete .icon{fill:red}}}.rename-input{padding:.1rem;margin:0;border-radius:0;&:focus{outline-color:var(--accent-color)}}}}.sidebar-partial-close &{@media(width>=992px){opacity:0;transition:.3s;.sidebar-open &,.sidebar-hover-open:has(.side__nav:hover) &{opacity:1}}}}}.footer__wrapper{display:flex;flex-direction:column;gap:var(--space);.block{display:flex;align-items:center;gap:var(--space);padding:var(--space-2);border-radius:var(--radius);color:inherit;background-color:var(--surface-color);cursor:pointer;>*{flex-shrink:0}.title__text{opacity:.8}.icon{height:1lh}&.user{.avatar__img{height:2.5rem;width:2.58rem;border-radius:50%}.user__info{span{display:block;white-space:nowrap;&.subscription{font-size:.8rem;opacity:.8}}}}&.theme{background-color:unset;padding:0;.wrapper{display:flex;padding:var(--space);gap:var(--space);background-color:var(--surface-color);border-radius:5rem;button{padding:var(--space);border-radius:50%;background-size:80%;opacity:.8;&.active{background-color:var(--accent-color)}}}}}}}}.chat__wrapper{.main{.window__wrapper{position:relative;overflow:hidden;border-radius:0 0 var(--radius-3) var(--radius-3);background-color:var(--bg-color);.header__wrapper{position:absolute;inset:0 0 auto;display:flex;flex-wrap:wrap;gap:var(--space);justify-content:space-between;padding:var(--space);z-index:1;app-region:drag;-webkit-app-region:drag;.overlay-visible &{padding-right:calc(100vw - var(--title-bar-width, 0) + var(--space));:not(.sidebar-open) &{padding-left:max(var(--space),var(--title-bar-x))}}.start__wrapper,.end__wrapper{display:flex;gap:var(--space);app-region:no-drag;-webkit-app-region:no-drag;.sidebar-toggler{@media(width>=992px){overflow-x:clip;transition:.6s;.sidebar-open &{width:0;padding-inline:0}}}.model__selector{display:flex;align-items:center;gap:var(--space);position:relative;span{font-weight:500;opacity:.8}.icon{height:1em}.model__menu{display:flex;flex-direction:column;gap:var(--space);padding:var(--space);position:absolute;top:calc(100% + var(--space));left:0;min-width:250px;max-height:20rem;overflow:auto;border-radius:var(--radius);background-color:var(--surface-3-color);opacity:0;visibility:hidden;transition:.3s;.model__selector:is(:hover,:focus,:focus-within) &,&.open{opacity:1;visibility:visible}&:empty:before{content:"No model Available!";padding-block:1rem;font-size:1.1rem}.model{display:flex;flex-direction:column;gap:var(--space);text-align:left;background-color:transparent;&:hover,&:focus-within{background-color:rgb(from var(--bg-color) r g b / 50%)}&.active{background-color:var(--bg-color)}span{display:block;pointer-events:none;&.info{font-size:.9rem}}}}}.quota__info__wrapper{display:flex;position:relative;height:fit-content;.quota__info__main{position:absolute;top:calc(100% + var(--space));right:0;display:flex;flex-wrap:wrap;gap:var(--space);padding:var(--space);min-width:200px;max-height:20rem;overflow:auto;border-radius:var(--radius);background-color:var(--surface-3-color);opacity:0;visibility:hidden;transition:.3s;.quota__info__wrapper:is(:hover,:focus,:focus-within) &{opacity:1;visibility:visible}.info__block{display:flex;flex-direction:column;flex-grow:1;background-color:var(--bg-color);padding:var(--space);span{line-height:1}.title{font-size:.75rem;opacity:.5}.number{font-size:1.25rem;opacity:.75;&:after{counter-reset:available var(--available, 0) used var(--used, 0) left var(--left, 0)}.available &:after{content:counter(available)}.used &:after{content:counter(used)}.left &:after{content:counter(left)}}}}}}}.scroll__container{padding-block:4rem;transition:opacity .3s;content-visibility:auto;scrollbar-gutter:stable both-edges;.initial &{opacity:0}.chat__block__wrapper{max-width:45rem;margin-inline:auto;padding-inline:var(--space-2);line-height:1.5;>:not(:last-child){&.user{padding-bottom:var(--space-3)}&.assistant{padding-bottom:var(--space-6)}}&,p{font-size:min(calc(.9rem + .3vw),1.05rem);color:var(--paragraph-color)}.chat__block{display:flex;gap:var(--space);&.user{flex-direction:column;.preview__wrapper{display:flex;gap:var(--space);flex-wrap:wrap;justify-content:end;.preview__item{&.image{max-width:80%;border-radius:var(--radius);max-height:60vh;object-fit:cover}&.file{display:inline-block;padding:.5rem 1rem;background-color:var(--surface-2-color);border-radius:var(--radius);font-size:.875rem;border:1px solid var(--border-color);word-break:break-word;&:before{content:"Added: "}}}&:empty{display:none}}.message__wrapper{display:flex;&:not(.editing){justify-content:end;@media(width>=992px){padding-left:15%}}}.message{padding:.75rem 1.25rem;border-radius:1lh 0 1lh 1lh;background-color:var(--surface-3-color);white-space:pre-wrap;overflow-wrap:break-word;max-width:100%}&.editing{.actions__wrapper,.message{display:none}}.edit__wrapper{display:flex;flex-direction:column;gap:var(--space);width:100%;.edit-textarea{field-sizing:content;resize:none;font:inherit;max-width:100%;max-block-size:calc(6lh + var(--space-2) * 2);padding:var(--space-2);border:0;border-radius:var(--radius-2);background-color:var(--surface-color);&:focus{outline-color:var(--accent-color)}}.edit__actions{display:flex;gap:var(--space);justify-content:end}}}&.assistant{flex-direction:column;&.new{transition:opacity .3s;opacity:1;@starting-style{opacity:0}}.assistant__logo{height:2.5rem;width:2.5rem;padding:.65rem;border-radius:50%;flex-shrink:0;fill:#60b2ff;background-color:var(--surface-color)}.response_wrapper{display:flex;flex-direction:column;gap:var(--space);max-width:100%;.response{max-width:100%;[data-code-lang]{position:relative;font-family:Fira Code,monospace;font-size:1.05rem}}}.actions__wrapper{.action__button{padding:.5rem;height:2.25rem;width:2.25rem;.icon{opacity:.8}}}}&.system{justify-content:center;padding-inline:5%}.actions__wrapper{display:flex;flex-wrap:wrap;opacity:0;transition:opacity .3s;.chat__block:hover &{opacity:1}.action__button{height:2.5rem;width:2.5rem;padding:.75rem;border-radius:50%;background-color:transparent;&:hover{background-color:var(--surface-2-color)}}}}}}.scroll-to-bottom{--bg: var(--surface-2-color);position:absolute;inset:auto 0 var(--space-2);width:fit-content;margin-inline:auto;padding:.5rem;border-radius:50%;z-index:2;opacity:0;pointer-events:none;.scrolled:not(.bottom) &{opacity:1;pointer-events:auto}.icon{rotate:180deg;height:1.25rem}}.initial__content_wrapper,.offline__content_wrapper{position:absolute;inset:0;max-width:100%;visibility:hidden;opacity:0;transition:.3s;content-visibility:auto;&.initial__content_wrapper{.initial:not(.offline) &{visibility:visible;opacity:1}.content__wrapper{height:100%;display:grid;place-content:center;padding-inline:var(--space-2);.new__chat_text{opacity:.6;text-align:center}}}&.offline__content_wrapper{.offline.initial &{visibility:visible;opacity:1}.content__wrapper{height:100%;display:grid;place-content:center;padding-inline:var(--space-2);.offline__chat_text{opacity:.6;text-align:center}}}}:not(.initial) &{&:before,&:after{content:"";position:absolute;height:var(--space-6);z-index:1;pointer-events:none}&:before{inset:0 0 auto;background:linear-gradient(var(--bg-color),transparent)}&:after{inset:auto 0 0;background:linear-gradient(transparent,var(--bg-color))}}}}}.chat__wrapper{.main{.action__wrapper{--padding-x: 1rem;--padding-y: 1rem;position:relative;background:unset;padding:0;display:flex;justify-content:center;.chat__action{display:flex;flex-direction:column;gap:var(--space-2);flex-grow:1;max-width:44rem;padding:var(--padding-y) var(--padding-x);border-radius:var(--radius-3) var(--radius-3) 0 0;background-color:var(--bg-color);transition:.6s;.initial &{border-radius:var(--radius-3);@media(width<992px){margin-inline:var(--space)}}.attachment__wrapper{&:empty{display:none}}.attachment__wrapper{display:flex;gap:var(--space);flex-wrap:wrap;max-height:90px;overflow-y:auto;border-radius:var(--radius);&:empty{display:none}.file-preview{display:flex;flex-direction:column;gap:var(--space);background-color:var(--surface-2-color);border-radius:var(--radius);padding:var(--space);position:relative;max-width:150px;.file-preview__image{width:100%;height:75px;object-fit:cover;border-radius:calc(var(--radius) - 2px)}&:has(.file-preview__image){padding:0;.file-info{display:none}}.file-info{display:flex;flex-direction:column;gap:var(--space);font-size:.85rem;min-width:0;padding-right:2rem;.file-name{word-break:break-word;font-weight:500;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.file-size{opacity:.7;font-size:.8rem}}.file-remove-btn{position:absolute;top:var(--space);right:var(--space);width:24px;height:24px;padding:0;border:none;border-radius:50%;background-color:rgba(var(--color-rgb),.8);color:var(--bg-color);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;transition:background-color .2s;&:hover{background-color:rgba(var(--color-rgb),1)}}}}.chat__textarea{--min-line: 1;--max-line: 8;padding:0;margin:0;border:none;border-radius:0;font:inherit;line-height:1.5;background-color:unset;resize:none;outline:none;field-sizing:content;min-block-size:calc(1lh * var(--min-line));max-block-size:calc(1lh * var(--max-line));white-space:pre-wrap;overflow-wrap:anywhere;&::placeholder{color:inherit;opacity:.6}&:focus{outline:none}}.bottom__wrapper{display:flex;align-items:end;gap:var(--space);.chat__button{--padding-x: .5rem;--padding-y: .5rem;&:not(.send){--bg: var(--surface-3-color)}.icon{fill:currentColor;height:1.15rem;aspect-ratio:1;vertical-align:middle}&.send{margin-left:auto;position:relative;.icon{scale:1.5}.generating &{&:before{content:"";position:absolute;inset:.6rem;border-radius:.2rem;background-color:currentColor}}}}}.offline &,&.disabled,&[disabled]{opacity:.6;pointer-events:none}}.note{display:block;font-size:.8rem;text-align:center;opacity:.6;margin-top:var(--space);position:absolute;inset:100% 0 0}}}}.chat__wrapper{.setting_wrapper{position:fixed;inset:0;z-index:5;display:flex;justify-content:center;pointer-events:none;content-visibility:auto;.wrapper{display:flex;flex-direction:column;gap:.5rem;flex-grow:1;max-width:min(48rem,100%);margin-top:10vh;padding:1.25rem;border-radius:1.5rem 1.5rem 0 0;background-color:var(--surface-3-color);pointer-events:auto;translate:0 100%;transition:.6s;@media(width>=992px){padding:2.5rem;border-radius:.5rem .5rem 0 0}.open &{translate:0 0}.head,.link_wrapper,.window__wrapper{display:flex}.head{justify-content:space-between;.heading{text-box:trim-both cap alphabetic;margin-bottom:1rem}}.link_wrapper{flex-wrap:wrap;gap:.5rem;.link{--padding-x: 1.25rem;--padding-y: .9rem;--bg: transparent;flex-grow:1;&:hover{--bg: var(--surface-color)}&.active{--bg: var(--bg-color)}}}.window__wrapper{flex-grow:1;overflow-x:hidden;scrollbar-width:none;margin-top:.5rem;scroll-snap-type:x mandatory;.window{width:100%;max-height:100%;overflow-y:auto;flex-shrink:0;scroll-snap-align:center;form{display:flex;flex-direction:column;padding:0 2px;background:unset}}button{--padding-y: 1rem;line-height:normal}@media(width>=992px){button,input,select,textarea{--padding-y: 1.25rem}}.other{display:flex;flex-direction:column;gap:.5rem}}}}}.chat__wrapper{.search__wrapper{position:fixed;inset:0;z-index:5;display:flex;justify-content:center;pointer-events:none;content-visibility:auto;.wrapper{display:flex;flex-direction:column;gap:.5rem;flex-grow:1;max-width:min(48rem,100%);margin-top:10vh;padding:1.25rem;border-radius:1.5rem 1.5rem 0 0;background-color:var(--surface-3-color);pointer-events:auto;translate:0 100%;transition:.6s;@media(width>=992px){padding:2.5rem;border-radius:.5rem .5rem 0 0}.open &{translate:0 0}.head{display:flex;justify-content:space-between;.heading{text-box:trim-both cap alphabetic;margin-bottom:1rem}}.result-wrapper{display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;max-height:100%;.item{display:flex;align-items:center;gap:.5rem;padding:.75rem;background-color:var(--bg-color);cursor:pointer;border-radius:.25rem}}}}}.chat__wrapper{--sidebar-width: clamp(17rem,22.5vw, 20rem);height:100dvh;display:grid;background-color:var(--surface-3-color);transition:grid-template-columns .6s;will-change:grid-template-columns;@media(width>=992px){--sidebar-width: 0px;grid-template-columns:var(--sidebar-width) 1fr;&.sidebar-partial-close{--sidebar-width: 4rem}&.sidebar-hover-open:not(.sidebar-partial-close){--sidebar-width: 1px}&.sidebar-open,&.sidebar-hover-open:has(.side__nav:hover){--sidebar-width: clamp(17rem,22.5vw, 20rem) !important}}.main{display:grid;grid-template-rows:var(--main-height, 1fr) max-content;gap:var(--space);background-color:var(--surface-3-color);overflow:clip;transition:grid-template-rows .6s;.initial &{--main-height: .7fr}}.icon__btn{--padding-x: .6em;--padding-y: .6em;background-color:transparent;transition:background-color .3s;&:hover{background-color:var(--surface-color)}.icon{height:1.15em}}.icon{opacity:.8}.scroll__container{scrollbar-color:rgba(var(--color-rgb),.15) transparent;position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain}.chat-backdrop{--backdrop-bg: rgba(var(--bg-color-rgb), .3);z-index:1;@media(width>=992px){display:none!important}}.ui-backdrop{--backdrop-bg: rgba(var(--bg-color-rgb), .6);z-index:3}@media(aspect-ratio>=21/9)and (width>=2000px){padding-inline:15%}@media(aspect-ratio>=32/9)and (width>=3000px){padding-inline:25%}}