@property --home-fade{syntax:'<length>';inherits:false;initial-value:0px}
/* новый чат в браузере и Telegram (new-home.js). всё под .home-on: в Докки App этого класса нет, телефон и узкое окно - .home-compact */
.ui-home-file{--icon:var(--ic-file, url('icons/file.svg'))}
.ui-home-search{--icon:var(--ic-search, url('icons/search.svg'))}
.home-tab-icon{display:none}
.home-task{display:none}

.home-stage{position:absolute;z-index:2;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;padding:64px 16px 7vh;pointer-events:none}
.main-panel.home-on .home-stage,.home-stage.leaving{display:flex}
.home-stage.leaving{z-index:2}
.home-brand{display:flex;align-items:center;justify-content:center;gap:2px;height:68px;margin-bottom:22px}
/* в приватном чате у маскота стоит hidden, а экран в этот момент ещё растворяется: он должен уйти вместе с логотипом и держать место */
.home-brand .welcome-mascot[hidden]{display:grid!important}
/* в рамке маскота место под реквизит сверху и снизу, сам он прижат к верху: опускаем к линии логотипа */
.home-brand .welcome-mascot{transform:none;translate:0 9px}
.home-word{font-family:'Unbounded',-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;font-size:32px;font-weight:600;letter-spacing:-.01em;line-height:1;margin-left:-4px}
.home-tabs-slot{flex:none;height:44px;margin-bottom:14px}
/* чат облака и компьютера: вместо режимов его плашки, подборка ему не нужна */
.home-tabs-slot .welcome-badges{height:100%;align-items:center;margin:0;flex-wrap:nowrap}
.home-tabs-slot .welcome-badge{flex:none}
html.cloud-chat-open .main-panel.home-on .home-hints{display:none}
.home-field-slot{flex:none;width:100%}
.home-hints{flex:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;width:min(760px,100%);margin-top:22px;pointer-events:auto;transition:opacity .2s ease,translate .2s ease}
/* панель подсказок поиска полупрозрачная: списки под ней не должны просвечивать */
.main-panel.home-on:has(.ai-search-form.suggestions-open) .home-hints{opacity:0;translate:0 6px;pointer-events:none}

/* поле: чат и поиск стоят в одном и том же месте, при смене режима меняется только содержимое */
.main-panel.home-on .composer-wrap{z-index:9}
.main-panel.home-on:not(.home-compact) .composer-wrap{top:var(--home-field-y,40%);bottom:auto;padding-bottom:0}
.main-panel.home-on>:is(.chat-edge-fade,.scroll-to-bottom){visibility:hidden}
.main-panel.home-on .conversation{overflow:hidden}
/* приветствия нет совсем, даже на время переходов: блок остался для приватного чата и ошибки входа */
@media (max-width:899px),(min-width:900px) and (pointer:fine){.main-panel.home-screen:not(.private-chat-active) .welcome:not(.welcome-notice){visibility:hidden}}
html.app-home .main-panel.home-screen:not(.private-chat-active) .welcome:not(.welcome-notice){visibility:hidden}
.main-panel.home-on .ai-search-surface:not(.has-query){background:transparent;pointer-events:none;overflow:visible;padding:0}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-start{position:absolute;top:var(--home-field-y,40%);left:max(16px,calc((100% - 760px)/2));right:max(16px,calc((100% - 760px)/2));width:auto;transform:none;pointer-events:auto}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-intro{display:none}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-form{min-height:56px;margin:0;padding:7px 8px;z-index:1}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-line{gap:5px}
.main-panel.home-on .ai-search-form .ai-suggestions{max-height:var(--ai-suggestion-space,320px)}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-line::before{content:'';flex:none;width:40px;height:40px;background:var(--muted);-webkit-mask:var(--ic-search, url('icons/search.svg')) center/20px no-repeat;mask:var(--ic-search, url('icons/search.svg')) center/20px no-repeat}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-form textarea{padding:8px 0;font-size:16px;line-height:24px}
.main-panel.home-on .ai-search-surface:not(.has-query) .ai-search-submit-label{display:none}
.main-panel.home-on .ai-search-surface:not(.has-query) .send-button{width:40px;min-width:40px;padding:0;gap:0;border-radius:50%}

/* свет поля рассчитан на нижний край экрана: здесь он выключен, вместо него .home-glow по центру страницы */
body .main-panel.home-on.home-on.home-on .composer-wrap::before,body .main-panel.home-on.home-on.home-on .composer-wrap::after{display:none}
.home-glow{--home-glow-paint:linear-gradient(110deg,#4bcaff66,#60da9855,#ffe18155,#ff945c55,#cc7aff70,#529cfe66);position:absolute;z-index:-1;left:50%;top:50%;width:min(1180px,96%);height:min(760px,92%);translate:-50% -50%;pointer-events:none}
.home-glow::before,.home-glow::after{content:'';position:absolute;inset:0;pointer-events:none}
.home-glow::before{background:var(--home-glow-paint);filter:blur(36px);-webkit-mask-image:radial-gradient(closest-side,#000,#000000e0 18%,#000000a8 36%,#00000070 52%,#0000003d 68%,#00000018 84%,transparent);mask-image:radial-gradient(closest-side,#000,#000000e0 18%,#000000a8 36%,#00000070 52%,#0000003d 68%,#00000018 84%,transparent)}
/* 8 бит на канал не хватает на такой длинный слабый переход: на обычном мониторе видны ступеньки. Зерно в пару уровней их разбивает, поэтому оно поверх размытия и без его маски */
.home-glow::after{background:url(dither.png) 0 0/128px 128px;image-rendering:pixelated;-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent);mask-image:radial-gradient(closest-side,#000 80%,transparent)}
.home-glow[hidden]{display:none}
html[data-theme=light] .home-glow{--home-glow-paint:linear-gradient(110deg,#4bcaff66,#60da9855,#ffe18166,#ff945c55,#cc7aff66,#529cfe66)}

/* режимы: те же вкладки чата и поиска, съезжают из шапки к полю и обрастают режимами */
.main-panel.home-ready .ai-product-indicator{transition:transform .36s cubic-bezier(.22,1,.36,1),width .36s cubic-bezier(.22,1,.36,1)}
.main-panel.home-on .ai-product-switch{top:var(--home-tabs-y,30%);width:var(--home-tabs-w,auto);height:44px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:max-content;overflow:hidden}
.main-panel.home-on .ai-product-switch button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 14px;border:0;border-radius:18px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-weight:550;white-space:nowrap;cursor:pointer;transition:color .24s ease}
.main-panel.home-on .ai-product-switch button[aria-selected=true]{color:var(--text)}
.main-panel.home-on .ai-product-switch button:focus-visible{outline-offset:-2px}
.main-panel.home-on .home-tab-icon{display:block;flex:none;width:16px;height:16px}
.main-panel.home-on .home-more{width:34px;padding:0}
.main-panel.home-on .home-more .ui-icon{width:17px;height:17px}
.main-panel.home-on .ai-product-indicator{width:var(--home-ind-w,60px);transform:translateX(var(--home-ind-x,0))!important}
:root[data-telegram-miniapp=true] .main-panel.home-on .ai-product-switch .ai-product-indicator{left:4px;width:var(--home-ind-w,60px)}
/* в шапке Telegram индикатор ездит через left, переход нового экрана его не должен отнимать */
@media(prefers-reduced-motion:no-preference){:root[data-telegram-miniapp=true] .main-panel.home-ready .ai-product-indicator{transition:left .32s cubic-bezier(.22,1,.36,1),transform .36s cubic-bezier(.22,1,.36,1),width .36s cubic-bezier(.22,1,.36,1)}}
@media (hover:hover) and (pointer:fine){.main-panel.home-on .ai-product-switch button:hover{color:var(--text)}}

/* приветствие чата не должно мелькать, пока поле уезжает в старую выдачу */
/* фон поиска не закрывает экран нового чата, пока тот растворяется или проявляется */
.main-panel:is(.home-morph,.home-fading) .ai-search-surface{background:transparent}
/* открытый из подборки чат появляется, когда список уже ушёл */
.main-panel:is(.home-morph,.home-fading) .conversation.chat-entering .message-list{animation-delay:.2s}
/* морф вкладок: на время перехода раскладка простая, ширины и позиции ведёт new-home.js */
.main-panel.home-morph .ai-product-switch{display:flex;align-items:center;overflow:hidden}
.main-panel.home-morph .ai-product-switch button{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;overflow:hidden;padding:0;white-space:nowrap}
.main-panel.home-morph .ai-product-switch .home-task{display:inline-flex}
.main-panel.home-morph .ai-product-switch .home-tab-icon{display:block;flex:none;width:16px;height:16px}
.main-panel.home-morph .ai-product-switch .ai-product-indicator{transform:none!important;transition:none}

.home-more-menu{position:absolute;z-index:11;min-width:190px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 18px 44px #0005}
.home-more-menu[hidden]{display:none}
.home-more-item{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:11px;background:none;color:var(--text);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.home-more-item .ui-icon{width:18px;height:18px;color:var(--muted)}
.home-more-item:active{background:var(--hover)}

/* под полем: продолжить задачу и начать новую, простые строки без плашек */
.home-column[hidden]{display:none}
.home-column{min-width:0}
.home-label{margin:0 0 6px;padding:0 12px;font-size:13px;font-weight:600;line-height:18px;color:var(--muted)}
.home-list{display:grid;gap:0}
.home-list:empty{display:none}
.home-hints.only-start .home-column{grid-column:1/-1}
.home-hints.only-start .home-sections{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
.home-row{display:flex;align-items:center;gap:12px;width:100%;min-width:0;min-height:58px;padding:8px 12px;border:0;border-radius:13px;background:transparent;color:var(--text);font:inherit;cursor:pointer;transition:background .18s ease}
.home-row>.ui-icon{flex:none;width:19px;height:19px;color:var(--muted)}
.home-copy{flex:1;min-width:0;display:block;text-align:left}
.home-copy b{display:block;overflow:hidden;font-size:15px;font-weight:450;line-height:20px;color:var(--text);text-overflow:ellipsis;white-space:nowrap}
.home-copy small{display:block;overflow:hidden;margin-top:2px;font-size:13px;line-height:18px;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.home-row.is-working small::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:#3fae7c;vertical-align:1px;animation:homeWorking 1.8s ease-in-out infinite}
@keyframes homeWorking{50%{opacity:.4}}
.home-row:active{background:var(--hover)}
.home-row:focus-visible,.home-more-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){
  .home-row:hover,.home-more-item:hover{background:var(--hover)}
}
@media (max-height:640px){
  .home-stage{padding-bottom:16px}
  .home-brand{margin-bottom:10px}
  .home-hints{margin-top:14px}
  .home-row{min-height:50px;padding-block:5px}
}
/* телефон и узкое окно: поле внизу, над ним режимы. список лежит за ними и выезжает обычным скроллом без полосы */
.main-panel.home-compact .home-stage{--kb:max(0px,calc(var(--chat-rest-height,var(--visible-height,100dvh)) - var(--chat-active-height,var(--visible-height,100dvh))));padding:0}
:root.chat-keyboard-overlay .main-panel.home-compact .home-stage{bottom:var(--kb)}
.main-panel.home-compact .home-brand{position:absolute;left:0;right:0;top:25%;z-index:0;height:56px;margin:0;transition:top .34s cubic-bezier(.22,1,.36,1)}
.main-panel.home-compact .home-word{font-size:26px}
.main-panel.home-compact .home-brand .welcome-mascot{scale:.82;translate:0 7.5px;margin-right:-6px}
.main-panel.home-compact .home-field-slot{display:none}
.main-panel.home-compact .home-tabs-slot{position:absolute;left:0;right:0;bottom:var(--home-tabs-bottom,84px);display:flex;justify-content:center;margin:0}
.main-panel.home-compact .home-tabs-slot:not(:has(.welcome-badges:not([hidden]))){display:none}
.main-panel.home-compact .home-hints{--rest:calc(var(--home-tabs-bottom,84px) + 52px);position:absolute;z-index:1;inset:var(--home-top,64px) 0 0;display:block;width:auto;margin:0;padding:var(--home-list-top,38%) 12px calc(var(--rest) + 8px);overflow:hidden auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - var(--rest) - var(--home-fade)),#0009 calc(100% - var(--rest) - var(--home-fade)*.35),#0003 calc(100% - var(--rest) + var(--home-fade)*.08),transparent calc(100% - var(--rest) + var(--home-fade)*.42));mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - var(--rest) - var(--home-fade)),#0009 calc(100% - var(--rest) - var(--home-fade)*.35),#0003 calc(100% - var(--rest) + var(--home-fade)*.08),transparent calc(100% - var(--rest) + var(--home-fade)*.42));transition:opacity .28s ease,translate .28s cubic-bezier(.22,1,.36,1),visibility 0s}
.main-panel.home-compact .home-hints::-webkit-scrollbar,.main-panel.home-compact .ai-product-switch::-webkit-scrollbar{display:none}
.main-panel.home-compact .home-column+.home-column{margin-top:10px}
.main-panel.home-compact .home-hints.only-start .home-sections{grid-template-columns:none}
.main-panel.home-compact .home-label{margin:0 0 2px;padding:0 10px}
.main-panel.home-compact .home-row{min-height:54px;padding:6px 10px}
.main-panel.home-compact.home-on .ai-product-switch{top:var(--home-tabs-y,70%);max-width:calc(100% - 24px);overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;transition:top .34s cubic-bezier(.22,1,.36,1),opacity .28s ease,translate .28s cubic-bezier(.22,1,.36,1)}
:root.chat-keyboard-overlay .main-panel.home-compact.home-on:not(.ai-search-active) .ai-product-switch{top:calc(var(--home-tabs-y,70%) - max(0px,calc(var(--chat-rest-height,var(--visible-height,100dvh)) - var(--chat-active-height,var(--visible-height,100dvh)))))}
.main-panel.home-compact.home-on .ai-product-switch button{flex:none}
html:not(.cloud-chat-open) .main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch{display:flex;align-items:center}
/* края режимов и низ списка гаснут только стилями: их ведёт положение скролла. полоса в цвет пилюли, потому что маска срезала бы и её рамку */
.main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch::before,.main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch::after{content:'';position:sticky;z-index:2;flex:none;align-self:stretch;width:34px;margin-block:-4px;opacity:0;pointer-events:none}
.main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch::before{left:-4px;margin-left:-4px;margin-right:-30px;background:linear-gradient(90deg,var(--panel) 12%,transparent)}
.main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch::after{right:-4px;margin-right:-4px;margin-left:-30px;background:linear-gradient(270deg,var(--panel) 12%,transparent)}
@keyframes homeEdgeIn{to{opacity:1}}
@keyframes homeEdgeOut{from{opacity:1}to{opacity:0}}
@keyframes homeListFade{from{--home-fade:110px}to{--home-fade:0px}}
@supports (animation-timeline:scroll()){
  .main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch::before{animation:homeEdgeIn linear both;animation-timeline:scroll(nearest inline);animation-range:0 26px}
  .main-panel.home-compact.home-on:not(.home-morph) .ai-product-switch::after{animation:homeEdgeOut linear both;animation-timeline:scroll(nearest inline);animation-range:calc(100% - 26px) 100%}
  .main-panel.home-compact .home-hints{animation:homeListFade linear both;animation-timeline:scroll(self block);animation-range:calc(100% - 90px) 100%}
}
@supports not (animation-timeline:scroll()){.main-panel.home-compact .home-hints{--home-fade:110px}}
/* клавиатура: остаются логотип и поле. выбранный режим виден по подсказке в поле */
.main-panel.home-typing.home-on .ai-product-switch{opacity:0;translate:-50% 8px;pointer-events:none;transition:top .34s cubic-bezier(.22,1,.36,1),opacity .16s ease,translate .16s ease}
.main-panel.home-compact:is(.home-typing,.ai-search-active) .home-hints{opacity:0;translate:0 8px;pointer-events:none;visibility:hidden;transition:opacity .16s ease,translate .16s ease,visibility 0s .16s}
/* режим поиска: строка посередине экрана, подсказки раскрываются вниз */
.main-panel.home-on.home-compact .ai-search-surface:not(.has-query) .ai-search-start{top:46%;bottom:auto;left:var(--chat-composer-left,16px);right:var(--chat-composer-right,16px)}
.main-panel.home-on.home-compact .ai-search-form .ai-suggestions{max-height:none}
/* подсветка на телефоне: мягкое пятно за центром экрана, как на макете */
.main-panel.home-compact .home-glow{--home-glow-paint:radial-gradient(closest-side at 50% 52%,#c98a5c47,#8a5cc92e 55%,transparent);top:0;left:-90px;right:-90px;width:auto;height:100%;translate:none}
.main-panel.home-compact .home-glow::before{filter:none;-webkit-mask-image:none;mask-image:none}
html[data-theme=light] .main-panel.home-compact .home-glow{--home-glow-paint:radial-gradient(closest-side at 50% 52%,#f0a56a40,#a678e62e 55%,transparent)}
@media (prefers-reduced-motion:reduce){
  .main-panel.home-ready .ai-product-indicator{transition:none}
  .home-row.is-working small::before{animation:none}
}