/*
 * KRKR «Glass Skin» — тема LibreChat без изменения его кода (внедряется прокси ui-edge).
 * Интерфейс — влажное стекло над живой «эссенцией» (essence.js).
 * День — «Порцеляна»: перламутровый фарфор. Ночь — «Нічна сироватка»: чернильная слива и биолюминесценция.
 */
@import url("/krkr-ui/fonts/fonts.css");

@property --k-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --k-rim { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- палитры ---------- */
html {
  --k-bg: #F5F3FA;
  --k-ink: #1C1830;
  --k-ink-2: #4A4363;
  --k-muted: #6E6787;
  --k-line: rgba(28, 24, 48, .09);
  --k-glass: rgba(255, 255, 255, .56);
  --k-glass-strong: rgba(255, 255, 255, .78);
  --k-glass-edge: rgba(255, 255, 255, .9);
  --k-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 18px 50px -24px rgba(58, 40, 120, .28);
  --k-lilac: #8F7BFF;
  --k-peony: #FF8FB0;
  --k-mint: #5FD9BF;
  --k-butter: #FFD98A;
  --k-pearl: linear-gradient(115deg, #8F7BFF 0%, #C08CFF 28%, #FF8FB0 52%, #FFD98A 74%, #5FD9BF 100%);
  /* глубокий перламутр — для текста и кнопок на светлом (контраст ≥ 4.5:1 с белым текстом) */
  --k-pearl-deep: linear-gradient(115deg, #5B43E8 0%, #8A3FD9 35%, #C93A78 70%, #5B43E8 100%);
  --k-focus: #7A63FF;

  /* токены LibreChat (тройки RGB) */
  --presentation: 245 243 250;
  --surface-primary: 250 249 253;
  --surface-primary-alt: 245 243 250;
  --surface-primary-contrast: 239 236 247;
  --surface-secondary: 241 238 249;
  --surface-secondary-alt: 232 228 244;
  --surface-tertiary: 233 229 245;
  --surface-tertiary-alt: 250 249 253;
  --surface-hover: 232 227 247;
  --surface-hover-alt: 222 216 243;
  --surface-active: 226 220 246;
  --surface-active-alt: 216 209 242;
  --surface-composer-hover: 236 232 248;
  --surface-dialog: 252 251 255;
  --surface-chat: 255 255 255;
  --surface-submit: 122 99 255;
  --surface-submit-hover: 104 82 240;
  --header-primary: 250 249 253;
  --header-hover: 241 238 249;
  --header-button-hover: 241 238 249;
  --text-primary: 28 24 48;
  --text-secondary: 74 67 99;
  --text-secondary-alt: 96 89 122;
  --text-tertiary: 110 103 135;
  --border-light: 229 225 240;
  --border-medium: 214 208 232;
  --border-medium-alt: 214 208 232;
  --border-heavy: 186 178 214;
  --border-xheavy: 150 141 186;
  --accent-primary: 122 99 255;
  --accent-primary-hover: 104 82 240;
  --ring-primary: 122 99 255;
  --link: 104 82 240;
  --link-hover: 82 60 220;
  color-scheme: light;
}
html.dark {
  --k-bg: #0D0A19;
  --k-ink: #ECE7FA;
  --k-ink-2: #C4BCDE;
  --k-muted: #9C94B8;
  --k-line: rgba(236, 231, 250, .09);
  --k-glass: rgba(24, 19, 44, .52);
  --k-glass-strong: rgba(28, 22, 52, .78);
  --k-glass-edge: rgba(190, 170, 255, .16);
  --k-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 60px -28px rgba(0, 0, 0, .7);
  --k-lilac: #9B88FF;
  --k-peony: #FF6F9F;
  --k-mint: #43E5C2;
  --k-butter: #FFD27A;
  --k-pearl: linear-gradient(115deg, #9B88FF 0%, #C77DFF 28%, #FF6F9F 52%, #FFD27A 74%, #43E5C2 100%);
  --k-pearl-deep: linear-gradient(115deg, #7B67FF 0%, #A24BE8 35%, #E2558A 70%, #7B67FF 100%);
  --k-focus: #A897FF;

  --presentation: 13 10 25;
  --surface-primary: 18 14 33;
  --surface-primary-alt: 15 12 28;
  --surface-primary-contrast: 24 19 42;
  --surface-secondary: 26 21 46;
  --surface-secondary-alt: 30 24 52;
  --surface-tertiary: 36 30 62;
  --surface-tertiary-alt: 36 30 62;
  --surface-hover: 44 37 74;
  --surface-hover-alt: 52 44 88;
  --surface-active: 52 44 88;
  --surface-active-alt: 44 37 74;
  --surface-composer-hover: 34 28 60;
  --surface-dialog: 22 18 40;
  --surface-chat: 30 24 52;
  --surface-submit: 143 123 255;
  --surface-submit-hover: 160 143 255;
  --header-primary: 18 14 33;
  --header-hover: 36 30 62;
  --header-button-hover: 36 30 62;
  --text-primary: 236 231 250;
  --text-secondary: 196 188 222;
  --text-secondary-alt: 172 164 202;
  --text-tertiary: 156 148 184;
  --border-light: 44 37 74;
  --border-medium: 58 50 94;
  --border-medium-alt: 58 50 94;
  --border-heavy: 86 76 130;
  --border-xheavy: 120 108 170;
  --accent-primary: 155 136 255;
  --accent-primary-hover: 175 160 255;
  --ring-primary: 155 136 255;
  --link: 175 160 255;
  --link-hover: 200 190 255;
  color-scheme: dark;
}

/* ---------- основа: стекло над эссенцией ---------- */
html, body { background: var(--k-bg) !important; }
body {
  font-family: "Onest", ui-sans-serif, system-ui, sans-serif !important;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  color: var(--k-ink);
}
#krkr-essence {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0;
  pointer-events: none; display: block;
  transition: opacity 1.2s cubic-bezier(.2,.8,.2,1);
}
#krkr-essence.krkr-essence--fallback { background: radial-gradient(120% 90% at 20% 10%, rgba(143,123,255,.18), transparent 60%), radial-gradient(90% 80% at 90% 90%, rgba(95,217,191,.14), transparent 60%), var(--k-bg); }
#root { position: relative; z-index: 1; background: transparent !important; }

/* прозрачные слои приложения, чтобы эссенция просвечивала */
#root .bg-presentation, #root main, #root main > div,
#root [data-testid="messages-view"], #root .bg-surface-primary:not([role="dialog"]):not([role="menu"]):not([role="listbox"]) {
  background-color: transparent !important;
}
#root .from-presentation { --tw-gradient-from: transparent var(--tw-gradient-from-position) !important; }
#root .via-presentation { --tw-gradient-via: transparent !important; }

h1, h2, h3, [class*="text-2xl"], [class*="text-3xl"] {
  font-family: "Unbounded", "Onest", sans-serif;
  letter-spacing: -.01em;
}

/* боковая панель — матовое стекло с перламутровой кромкой */
#root nav {
  background: var(--k-glass) !important;
  border-right: 1px solid var(--k-line);
  box-shadow: inset -1px 0 0 var(--k-glass-edge);
}
/* размытие — только пока в панели нет fixed-слоёв (диалоги и меню, открытые из неё; см. выше) */
#root nav:not(:has(.fixed, [style*="position: fixed"], [style*="position:fixed"])) {
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}
#root nav + div, #root div:has(> nav) { background: transparent !important; }
#root [class*="bg-surface-primary-alt"]:has(> [data-testid="nav-panel-conversations"]),
#root div:has(> [data-testid="nav-panel-conversations"]) {
  background: var(--k-glass) !important;
  border-right: 1px solid var(--k-line);
}
:is(#root [class*="bg-surface-primary-alt"]:has(> [data-testid="nav-panel-conversations"]),
    #root div:has(> [data-testid="nav-panel-conversations"])):not(:has(.fixed, [style*="position: fixed"], [style*="position:fixed"])) {
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}

/* меню, диалоги, всплывающие окна — плотное стекло. Только видимые панели: у LibreChat [role=dialog] бывает
   невидимой обёрткой нулевой высоты, внутри которой лежат fixed-слои (затемнение и само окно). */
:is([role="dialog"]:not(:has(> .fixed)), [role="dialog"] > .fixed > div, [role="menu"], [role="listbox"],
    [data-radix-popper-content-wrapper] > div, [data-dialog], .popover-ui) {
  background: var(--k-glass-strong) !important;
  border: 1px solid var(--k-line) !important;
  box-shadow: var(--k-shadow) !important;
  border-radius: 18px !important;
}
/* Размытие (как и transform/filter) делает элемент «рамкой» для position: fixed внутри: окно или
   выпадающий список внутри него встали бы не по экрану, а по этому элементу. Поэтому размываем только
   панели, внутри которых сейчас нет fixed-слоёв. */
:is([role="dialog"]:not(:has(> .fixed)), [role="dialog"] > .fixed > div, [role="menu"], [role="listbox"],
    [data-radix-popper-content-wrapper] > div, [data-dialog], .popover-ui):not(:has(.fixed, [style*="position: fixed"], [style*="position:fixed"])) {
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}
[role="menu"], [role="listbox"], [data-radix-popper-content-wrapper] > div {
  animation: krkr-pop .42s cubic-bezier(.16, 1, .3, 1) both;
  transform-origin: var(--radix-popper-transform-origin, top center);
}
@keyframes krkr-pop {
  0% { opacity: 0; transform: translateY(-6px) scale(.96); filter: blur(6px); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- поле ввода: стеклянная капсула с перламутровой кромкой ---------- */
/* Размытие стекла — у родителя, отдельным слоем без детей и с жёсткой скруглённой обрезкой.
   Если backdrop-filter стоит на самом поле, Safari при фокусе (когда включается светящийся ореол
   с filter: blur внутри) рисует размытие прямоугольником, без скругления углов. */
#root div:has(> [data-testid="composer-surface"]) {
  position: relative; top: 0;
  transition: top .5s cubic-bezier(.16, 1, .3, 1);
}
#root div:has(> [data-testid="composer-surface"])::before {
  content: ""; position: absolute; inset: 0; border-radius: 28px; pointer-events: none;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  clip-path: inset(0 round 28px);
}
#root div:has(> [data-testid="composer-surface"]):focus-within { top: -2px; }
#root [data-testid="composer-surface"] {
  position: relative; isolation: isolate;
  background: var(--k-glass-strong) !important;
  border: 1px solid var(--k-line) !important;
  border-radius: 28px !important;
  box-shadow: var(--k-shadow);
  transition: box-shadow .5s;
}
#root [data-testid="composer-surface"]::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: 29.5px; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--k-angle), var(--k-lilac), var(--k-peony), var(--k-butter), var(--k-mint), var(--k-lilac));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: calc(.15 + var(--k-rim) * .85);
  animation: krkr-spin 9s linear infinite;
  transition: opacity .6s;
}
/* Ореол обрезается по скруглённому контуру поля явно (clip-path). Поле в LibreChat — overflow: hidden:
   Chrome обрезает размытый слой по скруглению, а Safari — прямоугольником, и ореол вылезал в углы. */
#root [data-testid="composer-surface"]::after {
  content: ""; position: absolute; inset: -18px; border-radius: 44px; z-index: -2; pointer-events: none;
  clip-path: inset(18px round 27px);
  background: conic-gradient(from var(--k-angle), var(--k-lilac), var(--k-peony), var(--k-butter), var(--k-mint), var(--k-lilac));
  filter: blur(26px); opacity: calc(var(--k-rim) * .32);
  animation: krkr-spin 9s linear infinite;
  transition: opacity .8s;
}
#root [data-testid="composer-surface"]:focus-within { --k-rim: .55; }
html.krkr-generating #root [data-testid="composer-surface"] { --k-rim: 1; }
html.krkr-generating #root [data-testid="composer-surface"]::before,
html.krkr-generating #root [data-testid="composer-surface"]::after { animation-duration: 2.4s; }
@keyframes krkr-spin { to { --k-angle: 360deg; } }
#root #prompt-textarea { font-size: 15.5px; line-height: 1.55; }
#root #prompt-textarea::placeholder { color: var(--k-muted); }

/* кнопка отправки — перламутровая жемчужина с «магнитом» (krkr.js) */
#root [data-testid="send-button"]:not(:disabled) {
  background: var(--k-pearl-deep) !important; background-size: 220% 100% !important;
  color: #fff !important; border: 0 !important;
  box-shadow: 0 8px 22px -8px rgba(143, 123, 255, .75), inset 0 1px 0 rgba(255,255,255,.55);
  animation: krkr-sheen 6s ease-in-out infinite;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s;
  translate: var(--k-mx, 0) var(--k-my, 0);
}
#root [data-testid="send-button"]:not(:disabled):hover { transform: scale(1.08); }
#root [data-testid="send-button"]:not(:disabled):active { transform: scale(.92); }
@keyframes krkr-sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- сообщения: «конденсация» на стекле ---------- */
.krkr-condense { animation: krkr-condense .9s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes krkr-condense {
  0% { opacity: 0; filter: blur(14px) saturate(1.6); transform: translateY(18px) scale(.985); clip-path: inset(0 0 100% 0 round 22px); }
  55% { opacity: 1; clip-path: inset(0 0 0% 0 round 22px); }
  100% { opacity: 1; filter: blur(0) saturate(1); transform: none; clip-path: inset(0 0 0 0 round 0); }
}
/* старые сообщения проявляются при прокрутке (scroll-driven) */
@supports (animation-timeline: view()) {
  #root [data-testid="messages-view"] .message-render {
    animation: krkr-surface linear both; animation-timeline: view(); animation-range: entry 0% entry 35%;
  }
  @keyframes krkr-surface { from { opacity: .15; filter: blur(5px); transform: translateY(14px); } to { opacity: 1; filter: none; transform: none; } }
}
/* курсор потока — светящаяся капля сыворотки вместо мигающей полосы */
.result-streaming > :not(ol):not(ul):not(pre):last-child::after,
.result-streaming > ol:last-child > li:last-child::after,
.result-streaming > ul:last-child > li:last-child::after {
  content: "" !important; display: inline-block; width: .62em; height: .62em; margin-left: .25em; vertical-align: -.02em;
  border-radius: 50% 50% 50% 8% ; transform: rotate(-45deg);
  background: var(--k-pearl); background-size: 300% 300%;
  box-shadow: 0 0 14px 2px rgba(155, 136, 255, .55);
  animation: krkr-drop-pulse 1.1s ease-in-out infinite, krkr-sheen 2.4s linear infinite !important;
}
@keyframes krkr-drop-pulse { 0%, 100% { scale: .82; opacity: .75; } 50% { scale: 1.08; opacity: 1; } }

/* беседы в боковой панели — каскад «капель» */
.krkr-convo-in { animation: krkr-convo .7s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(min(var(--ki, 0), 14) * 45ms); }
@keyframes krkr-convo { from { opacity: 0; transform: translateX(-14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
#root nav a[href^="/c/"][aria-current="page"], #root nav a[href^="/c/"].bg-surface-active-alt,
#root nav .group.relative.bg-surface-active-alt {
  background: linear-gradient(90deg, rgba(143, 123, 255, .18), rgba(255, 143, 176, .10)) !important;
}
/* внутренняя кнопка активной беседы залита тем же сплошным цветом поверх градиента строки — прозрачная */
#root nav .group.relative.bg-surface-active-alt .bg-surface-active-alt { background: transparent !important; }
/* метка активной беседы LibreChat (белая полоса на самом краю строки) — перламутровая капля внутри скругления */
#root nav .group.relative.bg-surface-active-alt::before {
  left: 3px !important; top: 30% !important; bottom: 30% !important; width: 3px !important;
  border-radius: 3px !important; background: var(--k-pearl-deep) !important;
}

/* ---------- блики под указателем (как свет на перламутре) ---------- */
.krkr-sheen { position: relative; isolation: isolate; }
.krkr-sheen::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(160px circle at var(--kx, -200px) var(--ky, -200px), rgba(155, 136, 255, .20), rgba(255, 143, 176, .10) 40%, transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.krkr-sheen:hover::before { opacity: 1; }

/* голографическая фольга на карточках стартовых запросов и ассистентов */
.krkr-foil { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; }
.krkr-foil::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light; opacity: 0;
  background: linear-gradient(calc(var(--kr, 0) * 1deg + 115deg), transparent 20%, rgba(155,136,255,.65) 38%, rgba(255,143,176,.6) 50%, rgba(95,217,191,.6) 62%, transparent 80%);
  transition: opacity .4s;
}
.krkr-foil:hover::after { opacity: .9; }

/* ---------- капля при отправке ---------- */
.krkr-drop {
  position: fixed; z-index: 60; width: 14px; height: 14px; pointer-events: none;
  border-radius: 50% 50% 50% 8%; background: var(--k-pearl); background-size: 300% 300%;
  box-shadow: 0 0 20px 4px rgba(155, 136, 255, .5);
}

/* ---------- переключатель темы ---------- */
#krkr-theme {
  position: fixed; top: 10px; right: 14px; z-index: 70;
  width: 40px; height: 40px; border-radius: 14px; border: 1px solid var(--k-line);
  background: transparent; color: var(--k-ink); isolation: isolate;
  box-shadow: var(--k-shadow); cursor: pointer; display: grid; place-items: center;
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s, opacity .25s;
}
/* стекло — отдельным слоем с жёсткой скруглённой обрезкой: кнопка вращается, а в Safari
   backdrop-filter у повёрнутого элемента иначе рисуется прямоугольником */
#krkr-theme::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: var(--k-glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  clip-path: inset(0 round 14px);
}
/* в ряду кнопок шапки LibreChat (krkr.js): размер и скругление как у соседних кнопок */
#krkr-theme.krkr-theme--docked {
  position: relative; top: auto; right: auto; z-index: auto; flex-shrink: 0;
  width: 36px; height: 36px; border-radius: 12px;
}
#krkr-theme.krkr-theme--docked::before { clip-path: inset(0 round 12px); }
#krkr-theme.krkr-theme--covered { opacity: 0; pointer-events: none; }
#krkr-theme.krkr-theme--docked svg { width: 18px; height: 18px; }
#krkr-theme:hover { transform: rotate(-12deg) scale(1.06); }
#krkr-theme:active { transform: scale(.9); }
#krkr-theme svg { width: 20px; height: 20px; overflow: visible; }
#krkr-theme .k-core { transition: r .7s cubic-bezier(.34, 1.56, .64, 1), fill .7s; }
#krkr-theme .k-bite { transition: cx .7s cubic-bezier(.34, 1.56, .64, 1), cy .7s cubic-bezier(.34, 1.56, .64, 1); }
#krkr-theme .k-rays { transform-origin: 12px 12px; transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .45s; }
html.dark #krkr-theme .k-rays { transform: rotate(-90deg) scale(.4); opacity: 0; }
html:not(.dark) #krkr-theme .k-bite { cx: 30px; cy: -6px; }

/* смена темы: новая тема «наливается» кругом из точки нажатия (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 2; }

/* ---------- заставка при каждом открытии сайта: «цветение» ---------- */
#krkr-bloom {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; pointer-events: none;
  background: var(--k-bg);
  animation: krkr-bloom-out 1.5s cubic-bezier(.7, 0, .2, 1) .55s both;
}
/* тема заставки — по сохранённой теме с первого кадра (LibreChat выставляет класс темы позже, сначала по умолчанию) */
html[data-krkr-boot="light"] #krkr-bloom { --k-bg: #F5F3FA; --k-pearl: linear-gradient(115deg, #8F7BFF 0%, #C08CFF 28%, #FF8FB0 52%, #FFD98A 74%, #5FD9BF 100%); }
html[data-krkr-boot="dark"] #krkr-bloom { --k-bg: #0D0A19; --k-pearl: linear-gradient(115deg, #9B88FF 0%, #C77DFF 28%, #FF6F9F 52%, #FFD27A 74%, #43E5C2 100%); }
#krkr-bloom span {
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: clamp(56px, 11vw, 132px); letter-spacing: -.03em;
  background: var(--k-pearl); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: krkr-bloom-word 1.9s cubic-bezier(.16, 1, .3, 1) both, krkr-sheen 3s linear infinite;
}
@keyframes krkr-bloom-word {
  0% { opacity: 0; filter: blur(22px); letter-spacing: .25em; transform: scale(.92); }
  45% { opacity: 1; filter: blur(0); letter-spacing: -.03em; transform: scale(1); }
  100% { opacity: 0; filter: blur(16px); transform: scale(1.18); }
}
@keyframes krkr-bloom-out {
  0% { clip-path: circle(150% at 50% 50%); }
  100% { clip-path: circle(0% at 50% 50%); }
}

/* ---------- экран входа: карточка из стекла ---------- */
body:has(input[name="password"]) #root > div > div:has(form),
body:has(input[name="password"]) form {
  position: relative;
}
body:has(input[name="password"]) form {
  padding: 28px 26px 22px; border-radius: 28px;
  background: var(--k-glass-strong); border: 1px solid var(--k-line);
  -webkit-backdrop-filter: blur(28px) saturate(160%); backdrop-filter: blur(28px) saturate(160%);
  box-shadow: var(--k-shadow);
  animation: krkr-condense 1.1s cubic-bezier(.16, 1, .3, 1) .9s both;
}
body:has(input[name="password"]) img[alt*="Logo" i], body:has(input[name="password"]) img[src*="logo" i] { opacity: 0; }
body:has(input[name="password"]) input {
  background: var(--k-glass) !important; border-color: var(--k-line) !important; border-radius: 14px !important;
  transition: box-shadow .35s, border-color .35s;
}
body:has(input[name="password"]) input:focus { border-color: var(--k-focus) !important; box-shadow: 0 0 0 4px rgba(143, 123, 255, .18) !important; }

/* Поля LibreChat в Safari заливаются изнутри сплошной тенью (#0d0d0d / #fff, класс webkit-dark-styles) —
   в стеклянной теме поле одного вида со всеми, без чёрной «дыры» */
input.webkit-dark-styles, .dark input.webkit-dark-styles { -webkit-box-shadow: none !important; box-shadow: none !important; background-clip: padding-box !important; }
/* автозаполнение браузера не перекрашивает поле в свой цвет */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--k-ink) !important; caret-color: var(--k-ink); transition: background-color 600000s 0s;
}
/* «Плавающая» подпись поля (Пароль, адреса тощо) поднимается внутрь поля, а не на обводку: в стекле её нечем
   подложить, и линия обводки перечёркивала бы текст */
.peer:is(:focus, :not(:placeholder-shown)) ~ label[class*="peer-placeholder-shown"] {
  top: 4px !important; transform: scale(.75) !important; transform-origin: 0 0 !important;
  background: transparent !important; padding: 0 !important; inset-inline-start: 15px !important;
}
input.peer:has(~ label[class*="peer-placeholder-shown"]) { padding-top: 19px !important; padding-bottom: 5px !important; }
/* подпись-подсказка всегда в одну строку внутри поля (длинная — с «…») */
label[class*="peer-placeholder-shown"], label[class*="peer-focus:top-0"] {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 24px);
}
/* второй вариант таких подписей (фильтры в панелях: top-0 + фон страницы) — тоже внутрь поля */
.peer:is(:focus, :not(:placeholder-shown)) ~ label[class*="peer-focus:top-0"] {
  top: 3px !important; transform: none !important; background: transparent !important; padding: 0 !important;
  font-size: 10.5px !important; line-height: 1.1 !important;
}
input.peer:is(:focus, :not(:placeholder-shown)):has(~ label[class*="peer-focus:top-0"]) { padding-top: 14px !important; padding-bottom: 2px !important; }
body:has(input[name="password"]) h1 { font-family: "Unbounded", sans-serif; font-weight: 600; }
body:has(input[name="password"]) button[type="submit"] {
  background: var(--k-pearl-deep) !important; background-size: 220% 100% !important; color: #fff !important;
  border-radius: 16px !important; animation: krkr-sheen 6s ease-in-out infinite;
  box-shadow: 0 10px 26px -10px rgba(143, 123, 255, .8);
}
/* экран входа: надпись KRKR AI по центру сверху, перламутровая утка — в левом верхнем углу */
#krkr-wordmark {
  position: fixed; top: 22px; left: 50%; translate: -50% 0; z-index: 5; pointer-events: none;
}
/* утка — силуэт, вырезанный из того же перламутра, что и надпись (цвета и блик совпадают, тема — сама);
   по нажатию крякает (quack.js) */
#krkr-corner-mark {
  position: fixed; top: 10px; left: 12px; z-index: 6; padding: 6px 8px; border: 0; border-radius: 14px;
  background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
#krkr-corner-mark:focus-visible { outline: 2px solid var(--k-focus); outline-offset: 0; }
#krkr-corner-mark .krkr-duck-shape {
  width: 30px; height: 42px; display: block; transform-origin: 50% 85%;
  background: var(--k-pearl-deep); background-size: 300% 100%; animation: krkr-sheen 6s linear infinite;
  -webkit-mask: url("/krkr-ui/brand/krkr-mark.svg") center / contain no-repeat; mask: url("/krkr-ui/brand/krkr-mark.svg") center / contain no-repeat;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
#krkr-corner-mark:hover .krkr-duck-shape { transform: rotate(-7deg) scale(1.05); }
#krkr-corner-mark .krkr-duck-shape.is-quacking { animation: krkr-quack .6s cubic-bezier(.34, 1.56, .64, 1), krkr-sheen 6s linear infinite; }
@keyframes krkr-quack {
  0% { transform: none; }
  18% { transform: rotate(-14deg) scale(1.1, .9); }
  40% { transform: rotate(11deg) scale(.94, 1.08); }
  62% { transform: rotate(-5deg) scale(1.03, .98); }
  100% { transform: none; }
}
.krkr-quack-bubble {
  position: fixed; z-index: 7; pointer-events: none;
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: -.01em;
  background: var(--k-pearl-deep); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: krkr-quack-bubble .95s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes krkr-quack-bubble {
  0% { opacity: 0; transform: translate(-4px, 6px) scale(.6) rotate(-8deg); }
  25% { opacity: 1; transform: translate(2px, -4px) scale(1.05) rotate(-4deg); }
  100% { opacity: 0; transform: translate(8px, -22px) scale(.95) rotate(2deg); }
}
#krkr-wordmark .krkr-wordmark-text {
  font-family: "Unbounded", sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -.02em;
  background: var(--k-pearl-deep); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: krkr-sheen 6s linear infinite;
}

/* ---------- мелочи ---------- */
:focus-visible { outline: 2px solid var(--k-focus) !important; outline-offset: 2px; }
::selection { background: rgba(155, 136, 255, .32); }
* { scrollbar-width: thin; scrollbar-color: rgba(155, 136, 255, .45) transparent; }
#root [data-testid="nav-user"] { border-radius: 14px; }
#root button, #root a { transition: background-color .25s, color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }

/* ---------- «Полегшений режим» (настройки → Загальні; авто — на слабых устройствах) ----------
   Те же цвета и раскладка, но без размытия стекла (его пересчёт — главная нагрузка на видеокарту)
   и без постоянных анимаций. Поле эссенции замирает одним кадром (essence.js). */
html[data-krkr-lite] *, html[data-krkr-lite] *::before, html[data-krkr-lite] *::after {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html[data-krkr-lite] { --k-glass: rgba(255, 255, 255, .9); --k-glass-strong: rgba(255, 255, 255, .96); }
html.dark[data-krkr-lite] { --k-glass: rgba(24, 19, 44, .92); --k-glass-strong: rgba(28, 22, 52, .97); }
html[data-krkr-lite] #krkr-bloom { display: none; }
html[data-krkr-lite] #root [data-testid="composer-surface"]::before { animation: none; }
html[data-krkr-lite] #root [data-testid="composer-surface"]::after { display: none; }
html[data-krkr-lite] #root [data-testid="send-button"],
html[data-krkr-lite] body:has(input[name="password"]) button[type="submit"],
html[data-krkr-lite] #krkr-wordmark .krkr-wordmark-text, html[data-krkr-lite] #krkr-corner-mark .krkr-duck-shape,
html[data-krkr-lite] [role="menu"], html[data-krkr-lite] [role="listbox"], html[data-krkr-lite] [data-radix-popper-content-wrapper] > div,
html[data-krkr-lite] body:has(input[name="password"]) form,
html[data-krkr-lite] .krkr-condense, html[data-krkr-lite] .krkr-convo-in,
html[data-krkr-lite] #root [data-testid="messages-view"] .message-render { animation: none !important; }
html[data-krkr-lite] .result-streaming > ul:last-child > li:last-child::after { animation: krkr-drop-pulse 1.1s ease-in-out infinite !important; box-shadow: none; }

/* строка «Полегшений режим» в настройках LibreChat */
#krkr-lite-row label { cursor: pointer; }
#krkr-lite-row .krkr-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding: 8px 32px 8px 12px; border-radius: 12px; font: inherit; font-size: 14px;
  color: rgb(var(--text-primary)); border: 1px solid rgb(var(--border-light));
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%239C94B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4,6 8,10 12,6'/%3E%3C/svg%3E") no-repeat right 10px center / 14px;
  transition: background-color .2s;
}
#krkr-lite-row .krkr-select:hover { background-color: rgb(var(--surface-hover)); }
#krkr-lite-row .krkr-select option { color: initial; }
#krkr-lite-row .krkr-lite-hint { margin: 6px 0 0; font-size: 12.5px; line-height: 1.45; color: rgb(var(--text-secondary)); }
#krkr-lite-row .krkr-lite-auto { display: none; color: var(--k-focus); }
#krkr-lite-row.is-auto-on .krkr-lite-auto { display: inline; }

/* ---------- уважение к настройке «меньше движения» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  #krkr-bloom { display: none; }
  .krkr-condense { animation: none; }
}