/**
* Полноэкранный Assistant (assistant.html без ?embed=1): фон/видео как Nucleus + glass у навигации и чата.
* Embed-iframe скрывает видео-слои; стили чата в iframe — assistant-embed.css.
*/
/* --- Фон: база + видео + scrim (как nucleus-dashboard) --- */
body.assistant-page .assistant-bg-base {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background: #020203;
}
body.assistant-page .assistant-video-bg {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
body.assistant-page .assistant-video-bg-video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
body.assistant-page .assistant-video-bg-scrim {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.24) 46%, rgba(0, 0, 0, 0.42) 100%),
radial-gradient(92% 55% at 50% 12%, rgba(0, 0, 0, 0.22) 0%, transparent 58%);
}
@media (prefers-reduced-motion: reduce) {
body.assistant-page .assistant-video-bg-video {
display: none;
}
body.assistant-page .assistant-video-bg-scrim {
background: linear-gradient(180deg, rgba(2, 2, 3, 0.92) 0%, #020203 100%);
}
}
/* В iframe embed фон даёт родитель — дубли не нужны */
body.assistant-embed .assistant-bg-base,
body.assistant-embed .assistant-video-bg {
display: none !important;
}
body.light-theme.assistant-page .assistant-bg-base,
body.light-theme.assistant-page .assistant-video-bg {
display: none !important;
}
/* Токены glass — как cashflow / landing-glass-chat в Nucleus */
body.assistant-page {
--assistant-page-glass-bg: color-mix(
in srgb,
color-mix(in srgb, #020203 94%, #eeeeee 6%) 88%,
transparent
);
--assistant-page-glass-border: rgba(238, 238, 238, 0.1);
--assistant-page-glass-shadow:
inset 0 1px 0 rgba(238, 238, 238, 0.06),
0 12px 40px rgba(0, 0, 0, 0.32);
--assistant-page-glass-blur: blur(14px) saturate(1);
--assistant-page-glass-border-sm: rgba(238, 238, 238, 0.16);
--assistant-page-glass-shadow-sm:
inset 0 1px 0 rgba(238, 238, 238, 0.08),
inset 0 0 0 1px rgba(238, 238, 238, 0.06),
0 16px 48px rgba(0, 0, 0, 0.45);
--color-bg-chat: var(--assistant-page-glass-bg);
background: transparent !important;
}
body.assistant-page .container {
position: relative;
z-index: 2;
background: transparent !important;
}
/* Полная страница Assistant: без кнопки сворачивания и FAB «мелкий чат» */
body.assistant-page:not(.assistant-embed) #chatToggle.chat-toggle,
body.assistant-page:not(.assistant-embed) #chatMinimized {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Левое меню — тот же glass, что Nucleus (только полная страница; navigation.css даёт градиент по умолчанию) */
body.assistant-page:not(.assistant-embed) .container > nav.left-nav,
body.assistant-page:not(.assistant-embed) .left-nav {
background: var(--assistant-page-glass-bg) !important;
background-image: none !important;
border: 1px solid var(--assistant-page-glass-border) !important;
box-shadow: var(--assistant-page-glass-shadow) !important;
-webkit-backdrop-filter: var(--assistant-page-glass-blur) !important;
backdrop-filter: var(--assistant-page-glass-blur) !important;
}
@media (max-width: 767px) {
body.assistant-page:not(.assistant-embed) .container > nav.left-nav,
body.assistant-page:not(.assistant-embed) .left-nav {
border-color: var(--assistant-page-glass-border-sm) !important;
box-shadow: var(--assistant-page-glass-shadow-sm) !important;
}
}
/* Правая колонка чата: оболочка glass, панель без второй заливки */
body.assistant-page:not(.assistant-embed) #chatWrapper:not(.minimized) {
border-radius: var(--radius-3xl) !important;
overflow: hidden !important;
background: var(--assistant-page-glass-bg) !important;
border: 1px solid var(--assistant-page-glass-border) !important;
box-shadow: var(--assistant-page-glass-shadow) !important;
-webkit-backdrop-filter: var(--assistant-page-glass-blur) !important;
backdrop-filter: var(--assistant-page-glass-blur) !important;
}
body.assistant-page:not(.assistant-embed) #chatWrapper:not(.minimized) .chat-panel {
background: transparent !important;
}
body.assistant-page:not(.assistant-embed) .chat-messages > .topics-container {
background: transparent !important;
background-image: none !important;
border: none !important;
box-shadow: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
}
body.assistant-page:not(.assistant-embed) .chat-input-area {
background: linear-gradient(
to top,
color-mix(in srgb, #020203 48%, transparent) 0%,
transparent 72%
) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer {
background: color-mix(in srgb, var(--assistant-page-glass-bg) 88%, transparent) !important;
border: 1px solid rgba(238, 238, 238, 0.09) !important;
border-radius: 2rem !important;
outline: none !important;
box-shadow:
inset 0 1px 0 rgba(238, 238, 238, 0.05),
0 8px 28px rgba(0, 0, 0, 0.22) !important;
-webkit-backdrop-filter: blur(12px) saturate(1) !important;
backdrop-filter: blur(12px) saturate(1) !important;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer:focus-within {
background: color-mix(in srgb, var(--assistant-page-glass-bg) 94%, transparent) !important;
border-color: rgba(238, 238, 238, 0.14) !important;
box-shadow:
inset 0 1px 0 rgba(238, 238, 238, 0.07),
0 10px 32px rgba(0, 0, 0, 0.26) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer:hover:not(:focus-within) {
background: color-mix(in srgb, var(--assistant-page-glass-bg) 92%, transparent) !important;
border-color: rgba(238, 238, 238, 0.11) !important;
box-shadow:
inset 0 1px 0 rgba(238, 238, 238, 0.055),
0 8px 30px rgba(0, 0, 0, 0.24) !important;
}
/* Кнопки композера — как index.html .landing-glass-tool / .landing-glass-send (тот же блок, что assistant-embed.css) */
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn {
width: 2.375rem !important;
height: 2.375rem !important;
min-width: 2.375rem !important;
min-height: 2.375rem !important;
padding: 0 !important;
border: 0 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch {
width: auto !important;
min-width: 0 !important;
height: 2.375rem !important;
min-height: 2.375rem !important;
max-height: 2.375rem !important;
padding: 0 0.85rem !important;
gap: 0.45rem !important;
border: 0 !important;
border-radius: 9999px !important;
cursor: pointer !important;
flex-shrink: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-wrapper {
width: 2.5rem !important;
height: 2.5rem !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-gradient {
display: none !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn {
width: 2.5rem !important;
height: 2.5rem !important;
min-width: 2.5rem !important;
min-height: 2.5rem !important;
padding: 0 !important;
border: 0 !important;
cursor: pointer !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-icon,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-icon,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn > svg,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn > svg {
width: 18px !important;
height: 18px !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn > svg {
width: 17px !important;
height: 17px !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn {
border-radius: 50% !important;
transform: translate3d(0, 0, 0) !important;
overflow: hidden !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch {
border-radius: 9999px !important;
transform: translate3d(0, 0, 0) !important;
overflow: hidden !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch {
position: relative !important;
isolation: isolate !important;
color: rgba(243, 244, 246, 0.88) !important;
background: radial-gradient(
195% 110% at 50% 18%,
rgba(55, 70, 74, 0.5) 0%,
rgba(116, 128, 150, 0.12) 58%,
rgba(214, 218, 227, 0.05) 100%
)
!important;
-webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
backdrop-filter: blur(6px) saturate(1.05) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
box-shadow:
-2px -2px 12px 0 rgba(149, 159, 165, 0),
0 0.4px 0 0 rgba(238, 238, 238, 0.5) inset,
0 1px 1px 0 rgba(81, 95, 105, 0.26) inset,
0 -0.4px 0 0 rgba(238, 238, 238, 0.36) inset,
0 1px 1.5px 0.5px rgba(238, 238, 238, 0.14) inset,
0 -2px 4px 0 rgba(238, 238, 238, 0.16) inset,
0 2px 6px 0 rgba(34, 45, 52, 0.22),
inset 0 0 0 1px rgba(238, 238, 238, 0.06) !important;
transition:
background 0.15s ease-in-out,
box-shadow 0.15s ease-in-out,
color 0.15s ease-in-out,
opacity 0.15s ease-in-out !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn > svg,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn > svg {
position: relative !important;
z-index: 1 !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch__icon,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch__text {
position: relative !important;
z-index: 1 !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn::before,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn::before,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch::before {
content: none !important;
display: none !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn:hover:not(:disabled),
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn:hover:not(:disabled),
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch:hover:not(:disabled) {
color: rgba(253, 253, 255, 0.95) !important;
background: radial-gradient(
195% 110% at 50% 14%,
rgba(62, 78, 84, 0.62) 0%,
rgba(120, 132, 152, 0.15) 55%,
rgba(224, 228, 236, 0.06) 100%
)
!important;
box-shadow:
-2px -2px 12px 0 rgba(149, 159, 165, 0),
0 0.4px 0 0 rgba(238, 238, 238, 0.55) inset,
0 1px 1px 0 rgba(81, 95, 105, 0.28) inset,
0 -0.4px 0 0 rgba(238, 238, 238, 0.38) inset,
0 1px 1.5px 0.5px rgba(238, 238, 238, 0.16) inset,
0 -2px 4px 0 rgba(238, 238, 238, 0.18) inset,
0 2px 7px 0 rgba(34, 45, 52, 0.26),
inset 0 0 0 1px rgba(238, 238, 238, 0.07) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn:active:not(:disabled),
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn:active:not(:disabled),
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch:active:not(:disabled) {
background-color: rgba(33, 40, 48, 0.75) !important;
background-image: none !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn:disabled,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn:disabled {
opacity: 0.38 !important;
cursor: not-allowed !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn.active {
background: color-mix(in srgb, var(--color-error, #ef4444) 42%, rgba(34, 40, 48, 0.55)) !important;
color: rgba(238, 238, 238, 0.96) !important;
box-shadow:
0 0 0 1px color-mix(in srgb, #eeeeee 18%, transparent) inset,
0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn.active:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-error, #ef4444) 48%, rgba(34, 40, 48, 0.5)) !important;
color: rgba(238, 238, 238, 0.98) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn {
position: relative !important;
isolation: isolate !important;
color: rgba(243, 244, 246, 0.92) !important;
background: radial-gradient(
195% 110% at 50% 18%,
rgba(55, 70, 74, 0.5) 0%,
rgba(116, 128, 150, 0.12) 58%,
rgba(214, 218, 227, 0.05) 100%
)
!important;
-webkit-backdrop-filter: blur(6px) saturate(1.05) !important;
backdrop-filter: blur(6px) saturate(1.05) !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
box-shadow:
-2px -2px 12px 0 rgba(149, 159, 165, 0),
0 0.4px 0 0 rgba(238, 238, 238, 0.5) inset,
0 1px 1px 0 rgba(81, 95, 105, 0.26) inset,
0 -0.4px 0 0 rgba(238, 238, 238, 0.36) inset,
0 1px 1.5px 0.5px rgba(238, 238, 238, 0.14) inset,
0 -2px 4px 0 rgba(238, 238, 238, 0.16) inset,
0 2px 6px 0 rgba(34, 45, 52, 0.22),
inset 0 0 0 1px rgba(238, 238, 238, 0.06) !important;
transition:
background 0.15s ease-in-out,
box-shadow 0.15s ease-in-out,
color 0.15s ease-in-out,
opacity 0.15s ease-in-out !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn > svg {
position: relative !important;
z-index: 1 !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn::before {
content: none !important;
display: none !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn:hover:not(:disabled) {
color: rgba(253, 253, 255, 0.96) !important;
background: radial-gradient(
195% 110% at 50% 14%,
rgba(62, 78, 84, 0.62) 0%,
rgba(120, 132, 152, 0.15) 55%,
rgba(224, 228, 236, 0.06) 100%
)
!important;
box-shadow:
-2px -2px 12px 0 rgba(149, 159, 165, 0),
0 0.4px 0 0 rgba(238, 238, 238, 0.55) inset,
0 1px 1px 0 rgba(81, 95, 105, 0.28) inset,
0 -0.4px 0 0 rgba(238, 238, 238, 0.38) inset,
0 1px 1.5px 0.5px rgba(238, 238, 238, 0.16) inset,
0 -2px 4px 0 rgba(238, 238, 238, 0.18) inset,
0 2px 7px 0 rgba(34, 45, 52, 0.26),
inset 0 0 0 1px rgba(238, 238, 238, 0.07) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn:active:not(:disabled) {
background-color: rgba(33, 40, 48, 0.75) !important;
background-image: none !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn:disabled {
opacity: 0.35 !important;
cursor: not-allowed !important;
}
body.light-theme.assistant-page:not(.assistant-embed) .chat-input-area {
background: linear-gradient(
to top,
color-mix(in srgb, var(--color-bg-primary) 12%, transparent) 0%,
transparent 70%
) !important;
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer,
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer:focus-within {
background: color-mix(in srgb, var(--color-bg-primary) 94%, var(--color-text-primary) 3%) !important;
border: 1px solid color-mix(in srgb, var(--color-text-primary) 10%, transparent) !important;
box-shadow: 0 4px 18px color-mix(in srgb, var(--color-text-primary) 8%, transparent) !important;
-webkit-backdrop-filter: blur(10px) saturate(1) !important;
backdrop-filter: blur(10px) saturate(1) !important;
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn,
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn {
border-radius: 9999px !important;
color: color-mix(in srgb, var(--color-text-primary) 72%, transparent) !important;
background: color-mix(in srgb, var(--color-text-primary) 9%, transparent) !important;
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch {
border-radius: 9999px !important;
width: auto !important;
min-width: 0 !important;
padding: 0 0.85rem !important;
gap: 0.45rem !important;
font-size: 0.8125rem !important;
font-weight: 500 !important;
color: color-mix(in srgb, var(--color-text-primary) 72%, transparent) !important;
background: color-mix(in srgb, var(--color-text-primary) 9%, transparent) !important;
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-add-btn:hover:not(:disabled),
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-micro-btn:hover:not(:disabled),
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .appsuite-cmdk-launch:hover:not(:disabled) {
background: color-mix(in srgb, var(--color-text-primary) 14%, transparent) !important;
color: color-mix(in srgb, var(--color-text-primary) 88%, transparent) !important;
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn {
border-radius: 9999px !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: color-mix(in srgb, var(--color-text-primary) 88%, var(--color-bg-primary) 12%) !important;
color: var(--color-bg-primary) !important;
box-shadow: 0 1px 2px color-mix(in srgb, var(--color-text-primary) 12%, transparent) !important;
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn:hover:not(:disabled) {
filter: brightness(0.96);
}
body.light-theme.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn:disabled {
opacity: 0.35 !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-icon svg path,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-icon-svg path,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer .chat-input-primary-btn > svg path {
fill: none !important;
stroke: currentColor !important;
stroke-width: 2.25 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
@media (max-width: 767px) {
body.assistant-page:not(.assistant-embed) #chatWrapper:not(.minimized) {
border-color: var(--assistant-page-glass-border-sm) !important;
box-shadow: var(--assistant-page-glass-shadow-sm) !important;
}
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer,
body.assistant-page:not(.assistant-embed) #chatInputArea .chat-input-wrapper.chat-input-composer:focus-within {
border-color: rgba(238, 238, 238, 0.12) !important;
box-shadow:
inset 0 1px 0 rgba(238, 238, 238, 0.06),
0 10px 36px rgba(0, 0, 0, 0.32) !important;
}
}
/* --- Split chat: только лента (колонка со сферой архивирована в assistant.html) --- */
body.assistant-page:not(.assistant-embed) .chat-panel-split {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
width: 100%;
align-items: stretch;
}
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column {
flex: 0 0 clamp(200px, 30vh, 360px);
width: 100%;
min-width: 0;
min-height: 0;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-right: none;
border-bottom: none;
/* Квадрат сферы: min(ширина дока, высота дока) без ручного подбора в px */
container-type: size;
container-name: assistant-sphere-dock;
}
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column {
background: color-mix(in srgb, var(--assistant-page-glass-bg) 42%, transparent);
}
body.light-theme.assistant-page:not(.assistant-embed) .chat-panel-sphere-column {
background: color-mix(in srgb, var(--color-bg-secondary) 35%, transparent);
}
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column .assistant-view {
position: relative !important;
width: 100% !important;
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
display: flex !important;
}
/* Текст под сферой на этой странице не показываем */
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column .controls {
display: none !important;
}
/* Строго квадрат: одинаковые width/height (иначе canvas искажается). Fallback без CQ — затем точнее по доку сферы */
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column #particleSphere {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: min(380px, 92%, calc(30vh - 24px)) !important;
height: min(380px, 92%, calc(30vh - 24px)) !important;
max-width: none !important;
max-height: none !important;
min-width: 0 !important;
min-height: 0 !important;
aspect-ratio: 1 !important;
box-sizing: border-box !important;
}
@supports (width: min(1px, 1cqmin)) {
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column #particleSphere {
width: min(380px, 100cqmin) !important;
height: min(380px, 100cqmin) !important;
}
}
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column .sphere-skeleton {
width: min(380px, 92%, calc(30vh - 24px)) !important;
height: min(380px, 92%, calc(30vh - 24px)) !important;
max-width: none !important;
max-height: none !important;
}
@supports (width: min(1px, 1cqmin)) {
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column .sphere-skeleton {
width: min(380px, 100cqmin) !important;
height: min(380px, 100cqmin) !important;
}
}
body.assistant-page:not(.assistant-embed) .chat-panel-chat-column {
flex: 1 1 auto;
min-width: 0;
width: 100%;
display: flex;
flex-direction: column;
position: relative;
min-height: 0;
}
body.assistant-page:not(.assistant-embed) .chat-panel-chat-column .chat-messages {
flex: 1 1 auto;
min-height: 0;
}
@media (min-width: 801px) {
/*
* Центрируем чат горизонтально через margin: auto у flex-элемента.
* Нельзя задавать nav.left-nav width: 0 — у fixed-плашки пропадает коробка отрисовки и фон.
*/
body.assistant-page:not(.assistant-embed) #chatWrapper:not(.minimized) {
width: min(980px, calc(100vw - var(--spacing-lg) * 2)) !important;
max-width: min(980px, calc(100vw - var(--spacing-lg) * 2)) !important;
min-width: min(640px, calc(100vw - var(--spacing-lg) * 2)) !important;
margin-top: var(--spacing-lg) !important;
/* Визуальный зазор карточки от нижней зоны (dock): + margin, т.к. padding .container даёт «пол» под flex, а не отступ от рамки чата. */
margin-bottom: var(--spacing-xl) !important;
margin-left: auto !important;
margin-right: auto !important;
height: auto !important;
max-height: 100% !important;
flex: 1 1 auto !important;
min-height: 0 !important;
align-self: stretch !important;
}
body.assistant-page:not(.assistant-embed) .center-content.assistant-center-sphere-host:not(:has(#assistantView)) {
flex: 0 0 0 !important;
width: 0 !important;
min-width: 0 !important;
max-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
pointer-events: none !important;
}
body.assistant-page:not(.assistant-embed) .center-content.assistant-center-sphere-host:has(#assistantView) {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
max-width: none !important;
margin: var(--spacing-lg) !important;
overflow: visible !important;
pointer-events: auto !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Плотно к плашке: базовый --nav-bottom-dock-pad (navigation) + шаг DS под реальную высоту pill-меню. */
body.assistant-page:not(.assistant-embed) .container {
padding-bottom: calc(var(--nav-bottom-dock-pad) + var(--spacing-2xl)) !important;
}
}
@media (max-width: 800px) {
body.assistant-page:not(.assistant-embed) .chat-panel-sphere-column {
display: none !important;
}
body.assistant-page:not(.assistant-embed) .chat-panel-chat-column {
flex: 1 1 auto;
width: 100%;
}
body.assistant-page:not(.assistant-embed) #chatWrapper:not(.minimized) {
width: min(480px, calc(100vw - var(--spacing-lg) * 2)) !important;
max-width: 100% !important;
min-width: 0 !important;
}
body.assistant-page:not(.assistant-embed) .center-content.assistant-center-sphere-host {
flex: 0 0 0 !important;
width: 0 !important;
max-width: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
}
}