/* Kira v0.7: голос, действия под ответом, поиск, сценарии, задачи, студия, правка слайдов, первый запуск. */

/* ---------- Производительность ---------- */
/* Сообщения вне экрана не считаются браузером: длинные беседы прокручиваются плавно. */
.messages > .msg--static { content-visibility: auto; contain-intrinsic-size: auto 140px; }
/* content-visibility обрезает строку по её рамке, а аватар Киры выступает вверх и влево — даём ему место внутри строки, раскладка не меняется. */
.messages > .msg--ai { padding: 10px 0 0 10px; margin: -10px 0 0 -10px; }
.md-tail { display: contents; }

/* ---------- Голосовой ввод ---------- */
.voice-status { display: flex; align-items: center; gap: 10px; margin: -2px 0 8px; padding: 9px 12px; border-radius: 14px; background: #fff; color: #000; font: 600 13px var(--font); box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.14); animation: file-in 0.3s ease both; }
.voice-status.is-leaving { animation: vs-out 0.22s ease forwards; }
@keyframes vs-out { to { opacity: 0; transform: translateY(6px); } }
.voice-status small { margin-left: auto; font: 500 11px var(--mono); opacity: 0.6; }
.voice-status__bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.voice-status__bars i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: vs-bar 0.9s ease-in-out infinite; animation-delay: calc(var(--n, 0) * -0.15s); transform-origin: center; }
.voice-status__bars i:nth-child(2) { --n: 1; } .voice-status__bars i:nth-child(3) { --n: 2; } .voice-status__bars i:nth-child(4) { --n: 3; } .voice-status__bars i:nth-child(5) { --n: 4; }
@keyframes vs-bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.composer.is-transcribing textarea { opacity: 0.4; }
.composer.is-voice-done textarea { animation: voice-fill 0.8s ease; }
@keyframes voice-fill { 0% { background: rgba(255, 255, 255, 0.16); } 100% { background: transparent; } }

/* ---------- Действия под ответом ---------- */
.msg__tools { flex-wrap: wrap; align-items: center; row-gap: 4px; }
.qa-btn { height: 32px; min-width: 32px; padding: 0 7px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; color: var(--muted); transition: color 0.15s, background 0.15s, transform 0.12s; }
.qa-btn svg { width: 17px; height: 17px; }
.qa-btn:active { transform: scale(0.9); background: rgba(255, 255, 255, 0.08); }
.qa-btn.is-on { color: #fff; background: rgba(255, 255, 255, 0.12); }
.qa-btn[data-qa="down"].is-on { color: #ff8a8a; background: rgba(255, 92, 92, 0.12); }
.qa-btn[data-qa="speak"].is-on svg { animation: speak-pulse 1s ease-in-out infinite; }
.qa-btn[data-qa="speak"].is-loading svg { animation: none; opacity: .45; }
.qa-btn[data-qa="speak"].is-loading { background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.16), rgba(255,255,255,.06)) 0 0 / 200% 100%; animation: tts-load 1.1s linear infinite; }
@keyframes tts-load { to { background-position: -200% 0; } }
@keyframes speak-pulse { 50% { transform: scale(1.15); } }
.qa-btn--text { padding: 0 10px 0 8px; border: 1px solid var(--line-strong); font: 500 12.5px var(--font); color: #ddd; }
.qa-btn--text svg { width: 15px; height: 15px; }
.qa-sep { flex-basis: 100%; height: 0; }
.msg__tools .qa-btn { width: auto; display: inline-flex; }
.msg__tools .qa-btn--text { margin-right: 6px; }
.qa-models { margin-top: 8px; padding: 8px; border-radius: 18px; border: 1px solid var(--line-strong); background: #070707; box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.08); display: grid; gap: 4px; animation: menu-in 0.24s cubic-bezier(0.2, 1.3, 0.4, 1) both; transform-origin: top left; }
.qa-models p { margin: 2px 6px 6px; font: 700 10.5px var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.qa-models button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px; border-radius: 12px; text-align: left; }
.qa-models button:active { background: #161616; }
.qa-models b { font: 500 14px var(--font); }
.qa-models small { font: 400 11px var(--mono); color: var(--muted); }
.qa-models .is-locked { opacity: 0.55; }
.deck-edit-btn { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; padding: 11px 12px; border-radius: 16px; border: 1px dashed rgba(255, 255, 255, 0.35); font: 600 14px var(--font); animation: file-in 0.4s ease both 0.2s; }
.deck-edit-btn span { flex: 1; text-align: left; }
.deck-edit-btn .kemoji { width: 20px; height: 20px; }
.deck-edit-btn svg { width: 16px; height: 16px; color: var(--muted); }
.msg.is-found .msg__bubble, .msg.is-found .msg__body { animation: found 2s ease; border-radius: 14px; }
@keyframes found { 0%, 30% { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ---------- Поиск по беседам ---------- */
.search-hits { margin: 6px 0 10px; }
.search-hits__title { margin: 12px 4px 8px; font: 700 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.search-hits__empty { padding: 8px 6px; font: 13px var(--mono); color: var(--dim); }
.search-hits__loading { display: flex; gap: 5px; padding: 10px 6px; }
.search-hits__loading i { width: 6px; height: 6px; border-radius: 50%; background: #888; animation: vs-bar 0.9s ease-in-out infinite; }
.search-hits__loading i:nth-child(2) { animation-delay: 0.15s; } .search-hits__loading i:nth-child(3) { animation-delay: 0.3s; }
.search-hit { display: grid; gap: 3px; width: 100%; margin-bottom: 6px; padding: 10px 12px; border-radius: 14px; text-align: left; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); animation: file-in 0.3s ease both; animation-delay: calc(var(--i, 0) * 30ms); }
.search-hit b { font: 600 13.5px var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-hit span { font-size: 13px; line-height: 1.45; color: #bdbdbd; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-hit mark { background: #fff; color: #000; border-radius: 3px; padding: 0 2px; }
.search-hit small { font: 400 10.5px var(--mono); color: var(--dim); }

/* ---------- Общая панель ---------- */
.km-inner { padding-top: 66px; gap: 16px; }
.km-head { display: flex; align-items: center; gap: 12px; }
.km-head__icon { width: 40px; height: 40px; flex: none; }
.km-head h1 { margin: 0; font: 700 24px var(--mono); letter-spacing: -0.03em; line-height: 1.15; }
.km-head p { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.45; }

/* ---------- Плитки меню ---------- */
.drawer-tools button[data-km-tasks] > span:last-child::before { content: "03 / ЗАДАЧИ"; }
.drawer-tools button[data-km-scenarios] > span:last-child::before { content: "04 / ИДЕИ"; }

/* ---------- Сценарии ---------- */
.sc-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 4px; }
.sc-tabs::-webkit-scrollbar { display: none; }
.sc-tabs button { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px 9px 10px; border-radius: 999px; border: 1px solid var(--line-strong); font: 600 13px var(--font); transition: background 0.2s, color 0.2s; }
.sc-tabs button .kemoji { width: 18px; height: 18px; }
.sc-tabs button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.14); }
.sc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-card { display: grid; align-content: start; gap: 6px; min-height: 138px; padding: 14px; text-align: left; border-radius: 20px; border: 1px solid var(--line-strong); background-color: #070707; background-image: var(--dots); background-size: 7px 7px;
  box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.08); animation: tile-in 0.42s cubic-bezier(0.2, 1.2, 0.35, 1) both; animation-delay: calc(var(--i, 0) * 50ms); transition: transform 0.15s, box-shadow 0.15s; }
.sc-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.08); }
.sc-card__icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #151515; border: 1px solid var(--line-strong); margin-bottom: 4px; }
.sc-card__icon .kemoji { width: 24px; height: 24px; }
.sc-card b { font: 700 14.5px var(--font); line-height: 1.25; }
.sc-card small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* ---------- Задачи и напоминания ---------- */
.tk-tabs { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 16px; border: 1px solid var(--line-strong); background: #050505; }
.tk-tabs button { position: relative; z-index: 1; padding: 10px; border-radius: 12px; font: 600 14px var(--font); color: var(--muted); transition: color 0.25s; }
.tk-tabs button[aria-selected="true"] { color: #000; }
.tk-tabs__ink { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 12px; background: #fff; transition: transform 0.35s cubic-bezier(0.2, 1.1, 0.35, 1); }
.tk-tabs[data-at="reminders"] .tk-tabs__ink { transform: translateX(100%); }
.tk-pane { display: grid; gap: 12px; animation: file-in 0.3s ease both; }
.tk-add { display: flex; gap: 8px; }
.tk-add input, .tk-remind__text { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: #000; color: #fff; font: 15px var(--font); }
.tk-add input:focus, .tk-remind__text:focus { outline: none; border-color: #fff; }
.tk-add button { width: 48px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #fff; color: #000; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.14); }
.tk-add svg { width: 22px; height: 22px; }
.tk-list { display: grid; gap: 6px; }
.tk-sub { margin: 8px 4px 0; font: 700 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tk-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: #070707; animation: file-in 0.3s ease both; transition: opacity 0.3s, transform 0.3s; }
.tk-item b { flex: 1; min-width: 0; font: 500 15px var(--font); overflow-wrap: anywhere; transition: color 0.3s; }
.tk-item.is-leaving { opacity: 0; transform: translateX(-30px); }
.tk-check { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1.5px solid var(--line-strong); color: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.tk-check svg { width: 16px; height: 16px; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset 0.3s ease 0.05s; }
.tk-item.is-done .tk-check, .tk-item.is-checking .tk-check { background: #fff; border-color: #fff; color: #000; }
.tk-item.is-done .tk-check svg, .tk-item.is-checking .tk-check svg { stroke-dashoffset: 0; }
.tk-item.is-done b, .tk-item.is-checking:not(.is-done) b { color: var(--dim); text-decoration: line-through; }
.tk-item.is-done.is-checking .tk-check { background: transparent; color: transparent; }
.tk-del { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--dim); }
.tk-del svg { width: 16px; height: 16px; }
.tk-del:active { background: #1a1a1a; color: #fff; }
.tk-empty { padding: 18px 6px; font: 13px/1.6 var(--mono); color: var(--dim); text-align: center; }
.tk-remind { display: grid; gap: 10px; padding: 12px; border-radius: 20px; border: 1px solid var(--line-strong); background-color: #070707; background-image: var(--dots); background-size: 7px 7px; box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.08); }
.tk-when { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-when button { padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-strong); font: 600 13px var(--font); }
.tk-when button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; }
.tk-when__custom { flex: 1 1 170px; min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line-strong); background: #000; color: #fff; font: 13px var(--mono); color-scheme: dark; }
.tk-rem__icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: #151515; border: 1px solid var(--line-strong); }
.tk-rem__icon .kemoji { width: 20px; height: 20px; }
.tk-rem div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tk-rem small { font: 500 11.5px var(--mono); color: var(--muted); }

/* ---------- Студия изображений ---------- */
.st-tabs[data-at="reminders"] .tk-tabs__ink { transform: translateX(100%); }
.st-pane { display: grid; gap: 12px; animation: file-in 0.3s ease both; }
.st-label { display: flex; align-items: center; gap: 7px; margin-top: 4px; font: 700 10.5px var(--mono); letter-spacing: 0.12em; color: var(--muted); }
.st-label .kemoji { width: 16px; height: 16px; }
.st-prompt, .st-edit textarea, .de-global { width: 100%; padding: 13px 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: #000; color: #fff; font: 15px/1.5 var(--font); resize: none; }
.st-prompt:focus, .st-edit textarea:focus, .de-global:focus { outline: none; border-color: #fff; }
.st-styles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px 6px; }
.st-styles::-webkit-scrollbar { display: none; }
.st-styles button { flex: none; display: grid; justify-items: center; gap: 6px; width: 74px; font: 500 11.5px var(--font); color: #ccc; }
.st-styles i { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, var(--a), var(--b)); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), border-color 0.2s; position: relative; overflow: hidden; }
.st-styles i::after { content: ""; position: absolute; inset: 0; background-image: var(--dots); background-size: 6px 6px; opacity: 0.6; }
.st-styles [aria-checked="true"] i { border-color: #fff; transform: scale(1.06); box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.18); }
.st-styles [aria-checked="true"] { color: #fff; font-weight: 700; }
.st-cost { display: flex; align-items: center; gap: 8px; font: 12px/1.45 var(--mono); color: var(--muted); }
.st-cost .kemoji { width: 18px; height: 18px; flex: none; }
.st-count { margin: 0 4px; font: 700 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.st-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.st-grid.is-loading i { aspect-ratio: 1; border-radius: 14px; background: #111; animation: sk 1.2s ease-in-out infinite; }
@keyframes sk { 50% { opacity: 0.4; } }
.st-tile { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: #111; animation: tile-in 0.4s cubic-bezier(0.2, 1.2, 0.35, 1) both; animation-delay: calc(var(--i, 0) * 35ms); }
.st-tile img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity 0.4s, transform 0.6s cubic-bezier(0.2, 0.9, 0.25, 1); }
.st-tile.is-loaded img { opacity: 1; transform: none; }
.st-tile:active { transform: scale(0.96); }
.st-empty, .st-locked { display: grid; justify-items: center; gap: 8px; padding: 30px 10px; text-align: center; }
.st-empty .kemoji, .st-locked .kemoji { width: 54px; height: 54px; }
.st-empty h3, .st-locked h3 { margin: 6px 0 0; font: 700 18px var(--mono); }
.st-empty p, .st-locked p { margin: 0 0 8px; color: var(--muted); line-height: 1.5; font-size: 14px; }
.st-view { position: fixed; inset: 0; z-index: 140; overflow-y: auto; background: #000; padding: calc(var(--safe-top) + 56px) 16px calc(var(--safe-bottom) + 24px); animation: cam-in 0.25s ease both; }
.st-view.is-leaving { animation: cam-out 0.2s ease forwards; }
.st-view__img { max-width: 520px; margin: 0 auto; border-radius: 22px; overflow: hidden; background: #111; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.st-view__img img { display: block; width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.st-view__card { max-width: 520px; margin: 16px auto 0; display: grid; gap: 10px; animation: file-in 0.4s ease both 0.12s; }
.st-view__prompt { margin: 0; font-size: 14px; line-height: 1.55; color: #ddd; }
.st-view__card > small { font: 11px var(--mono); color: var(--dim); }
.st-view__acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.st-view__acts .workspace-action svg { width: 18px; height: 18px; }
.st-edit { display: grid; gap: 10px; animation: file-in 0.3s ease both; }
.st-view__close { position: fixed; top: calc(var(--safe-top) + 12px); right: 14px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: rgba(20, 20, 20, 0.9); border: 1px solid var(--line-strong); }
.st-view__close svg { width: 18px; height: 18px; }

/* ---------- Первый запуск ---------- */
.ob { position: fixed; inset: 0; z-index: 150; display: grid; grid-template-rows: auto 1fr auto; background: #000; padding: calc(var(--safe-top) + 18px) 20px calc(var(--safe-bottom) + 18px); animation: ob-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1) both; overflow: hidden; }
.ob.is-leaving { animation: ob-out 0.5s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
@keyframes ob-in { from { opacity: 0; } }
@keyframes ob-out { to { opacity: 0; transform: scale(1.04); } }
.ob-bg { position: absolute; inset: 0; background-image: var(--dots); background-size: 9px 9px; -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 30%, #000 10%, transparent 70%); pointer-events: none; }
.ob-dots { position: relative; display: flex; justify-content: center; gap: 6px; }
.ob-dots i { width: 22px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); transition: background 0.4s, width 0.4s cubic-bezier(0.2, 1.2, 0.35, 1); }
.ob-dots i.is-on { background: #fff; width: 34px; }
.ob-stage { position: relative; overflow-y: auto; overflow-x: hidden; }
.ob-page { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 10px 2px; }
.ob-page.is-in-right { animation: ob-from-right 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.ob-page.is-in-left { animation: ob-from-left 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.ob-page.is-out-left { animation: ob-to-left 0.36s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
.ob-page.is-out-right { animation: ob-to-right 0.36s cubic-bezier(0.5, 0, 0.75, 0) forwards; }
@keyframes ob-from-right { from { opacity: 0; transform: translateX(40px); } }
@keyframes ob-from-left { from { opacity: 0; transform: translateX(-40px); } }
@keyframes ob-to-left { to { opacity: 0; transform: translateX(-40px); } }
@keyframes ob-to-right { to { opacity: 0; transform: translateX(40px); } }
.ob-eyebrow { font: 700 11px var(--mono); letter-spacing: 0.18em; color: var(--muted); }
.ob h1 { margin: 0; font: 800 30px/1.1 var(--mono); letter-spacing: -0.04em; }
.ob h2 { margin: 0; font: 800 26px/1.15 var(--mono); letter-spacing: -0.03em; }
.ob-sub, .ob-hero p { margin: 0 0 8px; font-size: 15px; line-height: 1.55; color: #bdbdbd; }
.ob-hero { display: grid; justify-items: center; gap: 12px; text-align: center; }
.ob-kira { position: relative; width: 150px; height: 150px; display: grid; place-items: center; margin-bottom: 6px; }
.ob-kira img { width: 104px; position: relative; z-index: 1; animation: boot-breathe 3.2s ease-in-out infinite; }
.ob-kira i { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.3); animation: gate-spin 16s linear infinite; }
.ob-kira i:last-child { inset: 16px; border: 1.5px solid transparent; border-top-color: #fff; animation-duration: 2.4s; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chips button { padding: 10px 14px; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 14px var(--font); animation: tile-in 0.4s cubic-bezier(0.2, 1.2, 0.35, 1) both; animation-delay: calc(var(--i, 0) * 25ms); transition: background 0.2s, color 0.2s, transform 0.15s; }
.ob-chips button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.16); }
.ob-chips button:active { transform: scale(0.94); }
.ob-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ob-styles button { display: flex; align-items: center; gap: 10px; padding: 14px 12px; border-radius: 18px; border: 1px solid var(--line-strong); background: #070707; text-align: left; animation: tile-in 0.4s cubic-bezier(0.2, 1.2, 0.35, 1) both; animation-delay: calc(var(--i, 0) * 50ms); transition: background 0.2s, color 0.2s; }
.ob-styles button .kemoji { width: 26px; height: 26px; flex: none; }
.ob-styles b { font: 600 14px var(--font); }
.ob-styles button[aria-pressed="true"] { background: #fff; color: #000; border-color: #fff; box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.16); }
.ob-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font: 600 13px var(--mono); color: var(--muted); }
.ob-seg { display: flex; padding: 3px; border-radius: 14px; border: 1px solid var(--line-strong); }
.ob-seg button { padding: 8px 11px; border-radius: 11px; font: 600 13px var(--font); color: #aaa; transition: background 0.2s, color 0.2s; }
.ob-seg button[aria-pressed="true"] { background: #fff; color: #000; }
.ob-field { display: grid; gap: 6px; position: relative; }
.ob-field span { font: 700 10.5px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ob-field input, .ob-field textarea { width: 100%; padding: 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: #050505; color: #fff; font: 16px/1.5 var(--font); resize: none; }
.ob-field input:focus, .ob-field textarea:focus { outline: none; border-color: #fff; }
.ob-field small { position: absolute; right: 12px; bottom: 10px; font: 11px var(--mono); color: var(--dim); }
.ob-done__emoji { width: 84px; height: 84px; }
.ob-burst { position: absolute; left: 50%; top: 36%; width: 0; height: 0; }
.ob-burst i { position: absolute; font: 700 18px var(--mono); color: #fff; opacity: 0; animation: burst 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) 0.15s both; --a: calc(var(--k) * 25.7deg); }
@keyframes burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(0.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-120px) scale(1); } }
.ob-bar { position: relative; display: flex; gap: 10px; }
.ob-back { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 18px; border: 1px solid var(--line-strong); }
.ob-back[hidden] { display: none; }
.ob-back svg, .ob-next svg { width: 20px; height: 20px; }
.ob-next { flex: 1; height: 54px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 18px; background: #fff; color: #000; font: 700 16px var(--font); box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.16); transition: transform 0.12s; }
.ob-next:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(255, 255, 255, 0.16); }

/* ---------- Секретарь: вопрос и «уже ответил» ---------- */
.sec-ask__box { display: flex; gap: 8px; align-items: flex-end; }
.sec-ask__box textarea { flex: 1; min-width: 0; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--line-strong); background: #000; color: #fff; font: 14.5px/1.45 var(--font); resize: none; }
.sec-ask__box textarea:focus { outline: none; border-color: #fff; }
.sec-ask__go { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: #fff; color: #000; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.14); }
.sec-ask__go svg { width: 20px; height: 20px; }
.sec-ask__go.is-busy { opacity: 0.5; }
.sec-ask__hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sec-ask__hints button { padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line-strong); font: 500 12.5px var(--font); color: #ccc; }
.sec-item__acts { display: flex; gap: 6px; flex: none; }
.sec-item__done { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); color: #ccc; }
.sec-item__done svg { width: 18px; height: 18px; }
.sec-item.is-late .sec-item__body small { color: #ff9f6b; }
.sec-item.is-late .sec-item__body small::before { content: "● "; }
.sec-item.is-done { animation: sec-done 0.42s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes sec-done { 40% { background: rgba(255, 255, 255, 0.08); } 100% { opacity: 0; transform: translateX(40px); } }

@media (prefers-reduced-motion: reduce) {
  .ob, .ob-page, .ob-chips button, .ob-styles button, .sc-card, .st-tile, .tk-item, .de-slide, .search-hit, .qa-models, .voice-status { animation: none !important; }
}

/* Иконки в кнопках панелей */
.km-panel .workspace-action svg, .st-view .workspace-action svg { width: 18px; height: 18px; flex: none; }

/* Кнопки справа в поле ввода — лимиты, микрофон и отправка — одного размера и формы. */
.composer__row :is(.limit-ring, [data-voice], .send) { width: 38px; height: 38px; flex: none; border-radius: 50%; }
.composer__row [data-voice] { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-strong); box-sizing: border-box; }
.composer__row .limit-ring:active { background: none; }
.composer__row [data-voice] svg { width: 20px; height: 20px; }
.composer__row .limit-ring svg { width: 26px; height: 26px; }


/* Лимиты: только transform и opacity. clip-path и пружина по scale перерисовывали меню с точечным фоном и большой тенью в каждом кадре. */
.limits__menu { animation: limits-pop 0.3s cubic-bezier(0.2, 1, 0.35, 1) both; will-change: transform, opacity; }
.limits.is-closing .limits__menu { animation: limits-pop-out 0.2s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes limits-pop { from { opacity: 0; transform: translateY(12px) scale(0.94); } }
@keyframes limits-pop-out { to { opacity: 0; transform: translateY(10px) scale(0.96); } }
.limits__backdrop { animation-duration: 0.15s; }
.meter { contain: layout paint; }
.limits__item { animation: none; }

/* ---------- Kira Секретарь: общий ч/б стиль приложения, акцент — розовый ---------- */
body[data-side="secretary"] .mode-sky__glow { opacity: 0.3; }
body[data-side="secretary"] .side-head { background: linear-gradient(180deg, #000 50%, rgba(0, 0, 0, 0)); }
body[data-side="secretary"] :is(.side-back, .side-gear) { border-color: rgba(255, 122, 184, 0.35); }
body[data-side="secretary"] .side-screen .workspace-section-label span,
body[data-side="secretary"] .side-screen .brief-eyebrow { color: var(--side-accent2); }
body[data-side="secretary"] .side-screen .workspace-action-primary,
body[data-side="secretary"] .side-screen .choice-row button[aria-checked="true"] { background: var(--side-accent); border-color: var(--side-accent); color: #000; box-shadow: 4px 4px 0 rgba(255, 122, 184, 0.28); }
body[data-side="secretary"] .side-screen .workspace-action:not(.workspace-action-primary) { border-color: rgba(255, 122, 184, 0.3); }
body[data-side="secretary"] .sec-card { border-color: rgba(255, 122, 184, 0.16); }
body[data-side="secretary"] .sec-setup { background-image: radial-gradient(circle, rgba(255, 140, 200, 0.2) 1px, transparent 1.6px); border-color: rgba(255, 122, 184, 0.45); box-shadow: 5px 5px 0 rgba(255, 122, 184, 0.22); }
body[data-side="secretary"] .sec-hero__emoji { filter: drop-shadow(0 0 26px rgba(255, 56, 150, 0.55)); }
body[data-side="secretary"] .sec-steps li::before { background: var(--side-accent); box-shadow: 0 0 14px rgba(255, 56, 150, 0.45); }
body[data-side="secretary"] .sec-stats b { color: var(--side-accent2); text-shadow: 0 0 18px rgba(255, 56, 150, 0.45); }
body[data-side="secretary"] .sec-item { border-color: rgba(255, 122, 184, 0.14); }
body[data-side="secretary"] .sec-item__draft { box-shadow: 3px 3px 0 rgba(255, 122, 184, 0.25); }
body[data-side="secretary"] .sec-quick__grid button { border-color: rgba(255, 122, 184, 0.2); }
body[data-side="secretary"] :is(.workspace-action.is-busy, .sec-quick__grid button.is-busy, .sec-item__draft.is-busy)::after { background: var(--side-accent); }
body[data-side="secretary"] .swipe-hint { border-color: rgba(255, 122, 184, 0.4); box-shadow: -4px 0 18px rgba(255, 56, 150, 0.25); }

/* ---------- Настройки Brief / Секретаря ---------- */
[data-overlay="assistant"] { --sa-accent: #4d8dff; --sa-accent2: #b9d0ff; --sa-glow: rgba(46, 108, 255, 0.45); --sa-dot: rgba(120, 170, 255, 0.2);
  background: radial-gradient(120% 55% at 85% -12%, var(--sa-glow), transparent 65%), #000; }
[data-overlay="assistant"]:has(.sa[data-kind="secretary"]) { --sa-accent: #ff7ab8; --sa-accent2: #ffc0de; --sa-glow: rgba(255, 56, 150, 0.38); --sa-dot: rgba(255, 140, 200, 0.2); }
.sa { --side-accent: var(--sa-accent); --side-accent2: var(--sa-accent2); --side-glow: var(--sa-glow); padding-top: calc(64px + var(--safe-top)); gap: 14px; }
.sa-hero { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 6px 8px 8px; }
.sa-orbit { width: 128px; height: 128px; margin-bottom: 10px; }
.sa-orbit > .kemoji { width: 78px; height: 78px; filter: drop-shadow(0 0 24px var(--sa-glow)); }
.sa-orbit > i::before { background: var(--sa-accent); box-shadow: 0 0 10px var(--sa-accent); }
.sa-orbit > i:nth-child(2)::before { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.6); }
.sa-eyebrow { font: 700 10.5px var(--mono); letter-spacing: 0.22em; color: var(--sa-accent2); }
.sa-eyebrow::before { content: "▚ "; color: var(--sa-accent); }
.sa-hero h1 { font: 700 30px/1.1 var(--mono); letter-spacing: -0.05em; }
.sa-hero p { max-width: 330px; font: 14px/1.55 var(--font); color: rgba(255, 255, 255, 0.7); }
.sa-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: #0a0a0a; font: 600 11px var(--mono); color: var(--muted); }
.sa-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #666; }
.sa-status.is-on { color: #fff; border-color: var(--sa-accent); }
.sa-status.is-on::before { background: var(--sa-accent); box-shadow: 0 0 10px var(--sa-accent); }
.sa-card { padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: rgba(10, 10, 10, 0.94); animation: tile-in 0.45s cubic-bezier(0.2, 1, 0.35, 1) both; }
.sa-card + .sa-card { animation-delay: 0.06s; }
.sa-label { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.sa-label::before { content: "//"; color: var(--sa-accent); }
.sa-label b { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--sa-accent); color: #000; font: 700 11px var(--mono); letter-spacing: 0.04em; }
.sa-features { list-style: none; display: grid; }
.sa-features li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 11px 2px; }
.sa-features li + li { border-top: 1px dashed rgba(255, 255, 255, 0.09); }
.sa-features__emoji { width: 34px; height: 34px; }
.sa-features b { display: block; font: 700 13.5px/1.3 var(--mono); letter-spacing: -0.02em; }
.sa-features small { display: block; margin-top: 3px; font: 12.5px/1.5 var(--font); color: var(--muted); }
.sa-connect { background-color: #070707; background-image: radial-gradient(circle, var(--sa-dot) 1px, transparent 1.6px); background-size: 7px 7px; border-color: var(--sa-accent); box-shadow: 5px 5px 0 var(--sa-glow); }
.sa-steps { list-style: none; counter-reset: s; display: grid; margin-bottom: 16px; }
.sa-steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding-bottom: 14px; }
.sa-steps li::before { content: counter(s); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--mono); color: #000; background: var(--sa-accent); box-shadow: 0 0 14px var(--sa-glow); }
.sa-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14.5px; top: 34px; bottom: 2px; width: 1px; background: linear-gradient(var(--sa-accent), transparent); opacity: 0.5; }
.sa-steps b { font: 700 13px/1.35 var(--mono); padding-top: 5px; }
.sa-steps span { font: 12px/1.5 var(--font); color: var(--muted); margin-top: 2px; }
.sa .btn { position: relative; }
.sa .btn--primary.sa-cta { flex-direction: row; gap: 8px; background: var(--sa-accent); color: #000; box-shadow: 4px 4px 0 var(--sa-glow); }
.sa-cta .kemoji { width: 26px; height: 26px; filter: invert(1); }
.sa-ghost { flex-direction: row; gap: 8px; height: 50px; margin-top: 12px; border: 1px solid var(--line-strong); font-size: 12.5px; }
.sa-ghost .kemoji { width: 24px; height: 24px; }
.sa-privacy { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; border-style: dashed; border-color: var(--line-strong); }
.sa-privacy__emoji { width: 34px; height: 34px; }
.sa-privacy b { display: block; font: 700 13px var(--mono); }
.sa-privacy small { display: block; margin-top: 3px; font: 12px/1.5 var(--font); color: var(--muted); }
.sa-error { padding: 10px 12px; margin-bottom: 14px; border-radius: 12px; border: 1px solid rgba(255, 90, 90, 0.4); background: rgba(255, 60, 60, 0.08); font: 12px/1.5 var(--font); color: #ffb4b4; }
.sa-note { display: block; font: 11px/1.55 var(--mono); color: var(--muted); }
.sa-switch { display: flex; align-items: center; gap: 14px; }
.sa-switch b { display: block; font: 700 13.5px var(--mono); }
.sa-switch small { display: block; margin-top: 3px; font: 12px/1.5 var(--font); color: var(--muted); }
.sa-toggle { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: #222; border: 1px solid var(--line-strong); transition: background 0.2s; }
.sa-toggle i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #888; transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), background 0.2s; }
.sa-toggle.is-on { background: var(--sa-accent); border-color: var(--sa-accent); }
.sa-toggle.is-on i { transform: translateX(22px); background: #000; }
.sa .assistant-fields { padding: 16px; gap: 14px; }
.sa .assistant-fields label { font: 600 10.5px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sa .assistant-fields :is(select, input:not([type=checkbox]), textarea) { background: #000; border-color: var(--line-strong); font: 14px var(--font); text-transform: none; letter-spacing: 0; color: #fff; }
.sa .assistant-fields :is(select, input, textarea):focus { outline: none; border-color: var(--sa-accent); }
.sa form { display: grid; gap: 12px; }
.sa > .card { border-radius: 20px; }
.sa-chats { display: grid; gap: 8px; }
.sa-chat { display: grid; grid-template-columns: 38px 1fr 22px; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); }
.sa-chat__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 15px var(--mono); color: #000; background: #555; }
.sa-chat.is-on .sa-chat__avatar { background: linear-gradient(135deg, var(--sa-accent2), var(--sa-accent)); }
.sa-chat__text { min-width: 0; }
.sa-chat__text b { display: block; font: 600 13px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-chat__text small { font: 10.5px var(--mono); color: var(--muted); }
.sa-chat__mark { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.sa-chat.is-on .sa-chat__mark { border-color: var(--sa-accent); background: var(--sa-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.perf-low .sa-card { animation: none; }
.composer__row .send:disabled { background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line-strong); }


/* ---------- Запуск без экрана загрузки ----------
   До первых данных приложение скрыто (виден только точечный фон), затем элементы появляются по очереди.
   Экран #app-gate остаётся только для ошибки входа. */
#app-gate:not(.is-error) { display: none; }
body:not(.app-ready) .app { opacity: 0; }
body.app-entering .app { animation: none; }
body.app-entering .frame-field { animation: enter-fade 1.4s ease both; }
body.app-entering .chat > .bar { animation: enter-down 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) 0.05s both; }
body.app-entering .chat__mascot { animation: enter-pop 1s cubic-bezier(0.2, 1, 0.3, 1) 0.15s both; }
body.app-entering .chat__hello { animation: enter-up 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) 0.32s both; }
body.app-entering .messages > .msg { animation: enter-up 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) 0.15s both; }
body.app-entering .messages > .msg:nth-last-child(2) { animation-delay: 0.25s; }
body.app-entering .messages > .msg:last-child { animation-delay: 0.35s; }
body.app-entering .chips > * { animation: enter-up 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) 0.45s both; }
body.app-entering .chips > :nth-child(2) { animation-delay: 0.52s; }
body.app-entering .chips > :nth-child(3) { animation-delay: 0.59s; }
body.app-entering .chips > :nth-child(n+4) { animation-delay: 0.66s; }
body.app-entering .composer { animation: enter-up 0.85s cubic-bezier(0.2, 0.9, 0.25, 1) 0.38s both; }
body.app-entering .swipe-hint { animation: enter-right 0.8s cubic-bezier(0.2, 0.9, 0.25, 1) 0.7s both; }
@keyframes enter-fade { from { opacity: 0; } }
@keyframes enter-down { from { opacity: 0; transform: translateY(-16px); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(20px); } }
@keyframes enter-pop { from { opacity: 0; transform: scale(0.8); filter: blur(10px); } }
@keyframes enter-right { from { opacity: 0; transform: translateX(100%); } }

/* ---------- Клавиатура: всё сдвигается плавно ----------
   --app-h, --app-max и --kb ставит app.js. Фон не сжимается, а уезжает вверх на высоту клавиатуры. */
.app, .tg .app { height: var(--app-h, 100%); }
.frame-field { height: var(--app-max, 100dvh); transform: translate3d(-50%, calc(var(--kb, 0px) * -1), 0); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s; }

/* ---------- Вместо жидкого стекла — сплошной серый: текст на нём читается всегда ---------- */
:root { --surface: #1c1c1f; --surface-line: rgba(255, 255, 255, 0.12); }
* { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.bar .icon-btn, .bar__pill, .swipe-hint, .side-back, .side-gear, .composer, .lockbar, .kselect-list, .attach-menu {
  background: var(--surface); border-color: var(--surface-line); }
.composer:focus-within { border-color: rgba(255, 255, 255, 0.5); }
.drawer__backdrop, .download-sheet { background: rgba(0, 0, 0, 0.66); }


/* ---------- Действия с беседой: три круглые кнопки на месте строки ---------- */
.drawer__row { overflow: visible; }
.drawer__row .drawer__chat { animation-fill-mode: backwards; transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.25, 1), filter 0.22s; }
.drawer__row.is-acting .drawer__chat { opacity: 0; transform: scale(0.92); filter: blur(4px); pointer-events: none; }
.drawer__acts { position: absolute; inset: 0 40px 0 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 16px; pointer-events: none; }
.drawer__row.is-acting .drawer__acts { pointer-events: auto; }
.drawer__acts > button { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 0; color: #000; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: scale(0.3) translateY(6px); transition: opacity 0.2s ease, transform 0.42s cubic-bezier(0.2, 1.5, 0.4, 1); }
.drawer__acts > button:nth-child(2) { transition-delay: 0.05s; }
.drawer__acts > button:nth-child(3) { transition-delay: 0.1s; }
.drawer__row.is-acting .drawer__acts > button { opacity: 1; transform: none; }
.drawer__row.is-unacting .drawer__acts > button { transition: opacity 0.16s ease, transform 0.2s ease-in; transition-delay: 0s; }
.drawer__acts > button:active { transform: scale(0.9); }
.drawer__acts svg { width: 20px; height: 20px; }
.drawer__acts > .is-danger { background: #ff4d4f; color: #fff; }
.drawer__acts > .drawer__confirm { width: auto; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border-radius: 21px; background: #ff4d4f; color: #fff; font: 700 14px var(--font); opacity: 1; transform: none; animation: acts-in 0.3s cubic-bezier(0.2, 1, 0.3, 1) both; }
@keyframes acts-in { from { opacity: 0; transform: scale(0.9); } }
/* Три точки ↔ крестик */
.drawer__more { position: relative; }
.drawer__more i { transition: transform 0.25s ease, opacity 0.2s ease; }
.drawer__more::before, .drawer__more::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; margin: -1px 0 0 -8px; border-radius: 2px; background: #fff;
  opacity: 0; transform: rotate(0) scaleX(0.2); transition: transform 0.3s cubic-bezier(0.2, 1.3, 0.4, 1), opacity 0.2s ease; }
.drawer__row.is-acting .drawer__more i { opacity: 0; transform: scale(0); }
.drawer__row.is-acting .drawer__more::before { opacity: 1; transform: rotate(45deg); }
.drawer__row.is-acting .drawer__more::after { opacity: 1; transform: rotate(-45deg); }

/* Переименование: карточка поверх затемнения */
.rename-layer { position: fixed; inset: 0; z-index: 130; background: rgba(0, 0, 0, 0.72); animation: fade 0.25s ease both; }
.rename-layer.is-leaving { animation: fade-out 0.3s ease 0.08s both; pointer-events: none; }
.rename-card { position: absolute; left: 16px; right: 16px; top: calc(var(--safe-top) + 96px); max-width: 448px; margin: 0 auto; padding: 14px; border-radius: 22px;
  background: var(--surface, #1c1c1f); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7); transform-origin: 0 0; }
.rename-card small { display: block; margin: 0 4px 10px; font: 700 10.5px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.rename-card__row { display: flex; align-items: center; gap: 8px; }
.rename-card input { flex: 1; min-width: 0; height: 46px; padding: 0 16px; border-radius: 23px; border: 1px solid rgba(255, 255, 255, 0.5); background: #000; color: #fff; font: 16px var(--font); }
.rename-card input:focus { outline: none; border-color: #fff; }
.rename-card button { flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; }
.rename-card button svg { width: 20px; height: 20px; }
.rename-card .is-cancel { background: #2c2c30; color: #fff; }
.rename-card .is-save { background: #fff; color: #000; }
.rename-card button:active { transform: scale(0.92); }

/* ---------- Меню без точечного фона: спокойный сплошной тёмно-серый ---------- */
:root { --dots: none; --panel: #09090a; --panel-item: #151517; }
.drawer__panel, .limits__menu, .add-sheet, .plus-status, .tk-remind, .project-card, .image-editor, .sec-setup, .sa-connect {
  background-color: var(--panel); background-image: none; }
.drawer__panel { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.1); }
.limits__menu, .add-sheet { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.12); }
.limits__item, .add-tile { background: var(--panel-item); border-color: transparent; box-shadow: none; }
.drawer__chat { background: none; border-color: transparent; }
.drawer__chat:active { background: var(--panel-item); }
.drawer__chat.is-active { background: var(--panel-item); color: #fff; }
.drawer .search, .drawer__me { background: var(--panel-item); border-color: transparent; }

/* Разделы в меню чатов: компактный список с линейными иконками, как у Gemini */
.drawer-tools { display: grid; grid-template-columns: 1fr; gap: 0; margin: 8px 0 2px; }
.drawer-tools button { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px; padding: 11px 12px; border: 0; border-radius: 14px;
  background: none; box-shadow: none; color: #fff; font: 500 16px var(--font); text-align: left; transform: none; }
.drawer-tools button:active { background: var(--panel-item); transform: none; box-shadow: none; }
.drawer-tools button::after, .drawer-tools button > span::before { content: none !important; display: none !important; }
.drawer-tools svg { width: 22px; height: 22px; flex: none; color: #e6e6e6; }

/* ---------- Свайпа больше нет: разделы выбираются в окне модели ---------- */
.swipe-hint, .swipe-edge { display: none !important; }

/* Открытие раздела: 12 полос цвета раздела переворачиваются сверху вниз, затем раскрываются уже над разделом */
.side-blinds { position: absolute; inset: 0; z-index: 14; display: flex; flex-direction: column; perspective: 900px; pointer-events: none; }
.side-blinds i { flex: 1; margin-bottom: -1px; background: linear-gradient(90deg, var(--side-bg), #000 70%); border-bottom: 1px solid color-mix(in srgb, var(--side-accent) 30%, transparent);
  transform-origin: 50% 0; backface-visibility: hidden; will-change: transform, opacity;
  animation: blind-in 0.45s cubic-bezier(0.2, 0.85, 0.25, 1) both; animation-delay: calc(var(--i) * 0.03s); }
.side-blinds.is-out i { animation: side-blind-out 0.4s cubic-bezier(0.5, 0, 0.75, 0) both; animation-delay: calc((11 - var(--i)) * 0.025s); transform-origin: 50% 100%; }
@keyframes side-blind-out { to { transform: rotateX(90deg); opacity: 0; } }
.side-screen.is-blind-in > * { animation: section-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) 0.7s both; }
@keyframes section-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Меню: чёрный фон и редкие ASCII-вспышки ----------
   Только opacity/transform псевдоэлементов — без JS и перерисовки; в покое и на слабых устройствах замирают. */
.drawer__panel, .limits__menu, .add-sheet { isolation: isolate; }
.drawer__panel::before, .limits__menu::before, .add-sheet::before {
  content: ". · : + · .\A  · + * + : ·\A. : * # * + .\A  · + * + : ·\A. · : + · ."; white-space: pre; position: absolute; top: 14px; right: 18px; z-index: -1; pointer-events: none;
  font: 11px/1.35 var(--mono); letter-spacing: 0.25em; color: #fff; opacity: 0.08; animation: ascii-breathe 9s ease-in-out infinite; }
.drawer__panel::after, .limits__menu::after, .add-sheet::after {
  content: "#\A*\A+\A:\A·\A."; white-space: pre; position: absolute; top: -90px; right: 34%; z-index: -1; pointer-events: none;
  font: 11px/1.15 var(--mono); color: #fff; opacity: 0; text-align: center; animation: ascii-drop 11s linear 2s infinite; }
.limits__menu::after { right: 22%; animation-duration: 13s; }
.add-sheet::after { right: 62%; animation-duration: 15s; animation-delay: 5s; }
@keyframes ascii-breathe { 0%, 100% { opacity: 0.08; } 48% { opacity: 0.08; } 52% { opacity: 0.22; } 58% { opacity: 0.1; } }
@keyframes ascii-drop { 0% { transform: translateY(0); opacity: 0; } 3% { opacity: 0.22; } 22% { transform: translateY(560px); opacity: 0.18; } 24%, 100% { transform: translateY(600px); opacity: 0; } }
html.is-idle :is(.drawer__panel, .limits__menu, .add-sheet)::before, html.is-idle :is(.drawer__panel, .limits__menu, .add-sheet)::after { animation-play-state: paused; }
.perf-low :is(.drawer__panel, .limits__menu, .add-sheet)::after { display: none; }
@media (prefers-reduced-motion: reduce) { :is(.drawer__panel, .limits__menu, .add-sheet)::before, :is(.drawer__panel, .limits__menu, .add-sheet)::after { animation: none; } }

/* ---------- Режим Киры в окне выбора модели ---------- */
.mode-picker { max-width: 448px; margin: 0 auto 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode-picker button { --c: #fff; position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 38px 1fr; column-gap: 10px; align-items: center;
  min-height: 62px; padding: 10px 12px 10px 10px; border-radius: 16px; background: #050505; border: 1px solid #242427; text-align: left;
  animation: item-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: 0.32s; transition: border-color 0.2s, transform 0.12s; }
.mode-picker button:nth-child(2) { animation-delay: 0.36s; } .mode-picker button:nth-child(3) { animation-delay: 0.4s; } .mode-picker button:nth-child(4) { animation-delay: 0.44s; }
/* Точки бегут только по краям кнопки — центр с текстом чистый */
.mode-picker__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.75; }
.mode-picker img { grid-row: span 2; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)); }
.mode-picker .is-agent img { filter: none; }
.mode-picker b { font: 700 13.5px var(--mono); letter-spacing: -0.02em; }
.mode-picker small { font: 10.5px var(--mono); color: var(--muted); }
.mode-picker .is-brief { --c: #4d8dff; } .mode-picker .is-secretary { --c: #ff7ab8; } .mode-picker .is-girl { --c: #b48cff; }
.mode-picker .is-girl > :not(canvas) { opacity: 0.7; }
.mode-picker button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 65%, transparent); }
.mode-picker button:active { transform: scale(0.97); }

/* ---------- Уведомления не выходят за край экрана ---------- */
.toast { white-space: normal; width: max-content; max-width: calc(100vw - 32px); text-align: center; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- Разделы Brief и Секретарь: лицо раздела ---------- */
.side-hero { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 8px 20px 18px; }
.side-hero__art { position: relative; width: 184px; height: 184px; margin-bottom: 4px; display: grid; place-items: center; }
.side-hero__kira { position: relative; height: 170px; width: auto; max-width: none; z-index: 1;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.15));
  animation: hero-float 5s ease-in-out infinite; }
@keyframes hero-float { 50% { transform: translateY(-6px); } }
html.is-idle .side-hero__kira { animation-play-state: paused; }
.side-hero__eyebrow, .side-screen .brief-eyebrow { font: 700 10.5px var(--mono); letter-spacing: 0.22em; color: var(--side-accent2); }
.side-hero__eyebrow::before, .side-screen .brief-eyebrow::before { content: "▚ "; color: var(--side-accent); }
.side-hero__title { font: 700 30px/1.1 var(--mono); letter-spacing: -0.05em; color: #fff; }
.side-hero__text { max-width: 320px; font: 14px/1.55 var(--font); color: rgba(255, 255, 255, 0.66); }
.brief-intro .side-hero__art { width: 210px; height: 210px; margin-bottom: 18px; }
.brief-intro .side-hero__kira { height: 196px; }
.brief-edition .side-hero { padding-top: 0; }

/* Карточки разделов: чёрные, тонкая цветная линия сверху, без точечного фона */
.side-screen .sec-card, .side-screen .brief-card, .side-screen .brief-section { background: #050505; border: 1px solid #1c1c1f; border-radius: 20px; position: relative; overflow: hidden; }
.side-screen .sec-card::before { content: ""; position: absolute; left: 18px; right: 18px; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--side-accent), transparent); opacity: 0.55; }
.side-screen .sec-setup, body[data-side="secretary"] .sec-setup { background: #050505; border-color: color-mix(in srgb, var(--side-accent) 40%, #1c1c1f); box-shadow: 0 0 40px color-mix(in srgb, var(--side-accent) 10%, transparent); }
.side-screen .sec-hero__emoji { display: none; }
.side-screen .sec-hero { padding-top: 12px; }
.side-head { background: linear-gradient(180deg, #000 55%, transparent); }

/* ---------- Фон разделов: точечное ASCII-поле как в чате, белые и цветные точки ---------- */
.mode-sky__grid { display: none; }
.mode-sky__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.mode-sky__glow { opacity: 0.25; }

/* ---------- Экран «подпишитесь на канал» ---------- */
#app-gate.is-subscribe { gap: 0; padding: 24px 28px; }
#app-gate.is-subscribe::after { content: none; }
.gate-kira { position: relative; z-index: 1; width: 176px; height: 176px; }
#app-gate .gate-name { margin: 6px 0 0; font: 700 34px var(--mono); letter-spacing: 0.3em; padding-left: 0.3em; text-transform: uppercase; }
#app-gate .gate-lead { max-width: 320px; margin: 22px auto 0; font: 600 20px/1.35 var(--font); color: #fff; }
#app-gate .gate-lead b { white-space: nowrap; }
#app-gate .gate-sub { max-width: 310px; margin: 10px auto 0; font: 15px/1.5 var(--font); color: #9a9a9a; }
.gate-btn, .gate-check { display: block; width: min(300px, 100%); margin: 0 auto; border-radius: 16px; font: 700 15px var(--mono); text-align: center; }
.gate-btn { height: 56px; margin-top: 28px; background: #fff; color: #000; box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.18); }
.gate-check { height: 50px; margin-top: 10px; border: 1px solid #3a3a3a; color: #fff; text-align: center; }
.gate-btn:active, .gate-check:active { transform: scale(0.97); }
.gate-check:disabled { opacity: 0.6; }
#app-gate .gate-note { min-height: 1.5em; margin: 14px auto 0; max-width: 300px; font: 13px/1.5 var(--font); color: #ff9b9b; }
.gate-note.is-shake { animation: shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }

/* Слова заголовка Brief — отдельные блоки, пробел между ними задаём явно */
.brief-words span { margin-right: 0.3em; }
.brief-words span:last-child { margin-right: 0; }

/* ---------- Шапка раздела — как в чате ---------- */
.side-screen .side-bar { position: sticky; top: 0; z-index: 3; background: linear-gradient(180deg, #000 55%, transparent); pointer-events: auto; }
.side-bar .side-gear svg { width: 20px; height: 20px; }

/* ---------- Кнопки разделов: обычные скруглённые, цвет — только акцентом ---------- */
.side-screen .workspace-action, body[data-side] .side-screen .workspace-action:not(.workspace-action-primary) { background: #0b0b0d; border: 1px solid #26262a; color: #fff; box-shadow: none; border-radius: 14px; }
.side-screen .workspace-action-primary, body[data-side] .side-screen .workspace-action-primary {
  background: color-mix(in srgb, var(--side-accent) 14%, #0b0b0d); border: 1px solid color-mix(in srgb, var(--side-accent) 55%, transparent); color: #fff; box-shadow: none; border-radius: 14px; }
.side-screen .workspace-action-primary .kemoji { filter: none; }
.side-screen .choice-row button, body[data-side] .side-screen .choice-row button { border-radius: 12px; border: 1px solid #26262a; background: #0b0b0d; color: rgba(255, 255, 255, 0.85); box-shadow: none; }
.side-screen .choice-row button[aria-checked="true"], body[data-side] .side-screen .choice-row button[aria-checked="true"] {
  background: color-mix(in srgb, var(--side-accent) 16%, #0b0b0d); border-color: color-mix(in srgb, var(--side-accent) 60%, transparent); color: #fff; box-shadow: none; }
.side-screen .choice-row button[aria-checked="true"] .kemoji { filter: none; }
.side-screen .sec-steps li::before, body[data-side] .sec-steps li::before { background: transparent; color: var(--side-accent2); border: 1px solid color-mix(in srgb, var(--side-accent) 60%, transparent); box-shadow: none; }
.side-screen .sec-item__draft, body[data-side] .sec-item__draft { background: color-mix(in srgb, var(--side-accent) 14%, #0b0b0d); border: 1px solid color-mix(in srgb, var(--side-accent) 55%, transparent); color: #fff; box-shadow: none; border-radius: 12px; }
.side-screen .sec-item__draft .kemoji { filter: none; }
.side-screen .sec-quick__grid button { border-radius: 14px; background: #0b0b0d; border-color: #26262a; }
.side-screen .text-field { border-radius: 12px; border-color: #26262a; background: #0b0b0d; }
.side-screen .text-field:focus { border-color: color-mix(in srgb, var(--side-accent) 60%, transparent); box-shadow: none; }
.side-screen .toggle-row input { accent-color: var(--side-accent); }
.side-screen .sec-card, .side-screen .sec-setup, body[data-side] .sec-setup { box-shadow: none; }

/* ================= 01.11 — разделы проще и чище ================= */
/* Brief: синий ярче */
body[data-side="brief"], body:not([data-side]) { --side-accent2: #9cc4ff; }
.side-hero__eyebrow, .side-screen .brief-eyebrow, .brief-edition-date { display: none; }

/* Белые кнопки действий с линейной иконкой */
.side-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 0 20px; border-radius: 14px;
  background: #fff; color: #000; font: 600 15px var(--font); letter-spacing: -0.01em; transition: transform 0.12s, opacity 0.2s; }
.side-btn svg { width: 19px; height: 19px; flex: none; }
.side-btn:active { transform: scale(0.98); }
.side-btn:disabled { opacity: 0.6; }
.side-btn.is-busy svg { animation: spin 1s linear infinite; }
.side-screen .side-btn { margin-top: 14px; }

/* Варианты в Секретаре: продолговатые скруглённые, как в iOS; у выбранного по краям бегут точки цвета раздела */
.side-screen .choice-row { gap: 8px; }
.side-screen .choice-row button, body[data-side] .side-screen .choice-row button { position: relative; isolation: isolate; overflow: hidden; min-height: 40px; padding: 0 16px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.85); font: 500 14px var(--font); box-shadow: none; }
.side-screen .choice-row button[aria-checked="true"], body[data-side] .side-screen .choice-row button[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.1); border-color: color-mix(in srgb, var(--side-accent) 70%, transparent); color: #fff; box-shadow: none; }
.choice-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: none; }
.choice-row button[aria-checked="true"] .choice-field { display: block; }

/* Карточки разделов полупрозрачные — поле из точек просвечивает */
.side-screen .sec-card, .side-screen .sec-setup, body[data-side] .sec-setup, .side-screen .brief-card, .side-screen .brief-section {
  background: rgba(6, 6, 8, 0.55); border-color: rgba(255, 255, 255, 0.1); box-shadow: none; }
.side-screen .text-field { background: rgba(0, 0, 0, 0.45); border-radius: 12px; }
.side-screen .field-label { font: 600 12px var(--font); letter-spacing: 0.02em; text-transform: none; color: rgba(255, 255, 255, 0.6); }
.side-screen .workspace-section-label span { font: 700 15px var(--font); letter-spacing: -0.01em; text-transform: none; color: #fff; }

/* Brief: заголовок сводки и загрузка */
.brief-headline { display: grid; gap: 2px; margin: 4px 0 6px; }
.brief-headline h2 { font: 700 26px/1.15 var(--font); letter-spacing: -0.03em; color: #fff; }
.brief-headline span { font: 500 15px var(--font); color: var(--side-accent2); }
.brief-words { animation: section-in 0.6s cubic-bezier(0.2, 0.9, 0.25, 1) 0.1s both; }
.brief-loader { display: grid; justify-items: center; gap: 12px; margin-top: 22px; }
.brief-loader__bar { position: relative; width: 160px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.brief-loader__bar i { position: absolute; inset: 0 auto 0 0; width: 45%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--side-accent), #fff); animation: gate-load 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.brief-loader__text { font: 500 14px var(--font); color: rgba(255, 255, 255, 0.7); }
.brief-edition-actions .side-btn { margin-top: 0; }

/* Онбординг: номер шага крупно, «Готово» — рисующаяся галочка */
.ob-step { font: 600 18px var(--font); color: rgba(255, 255, 255, 0.45); letter-spacing: 0.02em; }
.ob-step b { font: 700 34px/1 var(--font); color: #fff; letter-spacing: -0.02em; }
.ob-done__icon { width: 92px; height: 92px; fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 18px rgba(255, 255, 255, 0.25)); }
.ob-done__ring { stroke-width: 3; stroke-dasharray: 252; stroke-dashoffset: 252; animation: ob-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s forwards, ob-glow 2.6s ease-in-out 1.2s infinite; }
.ob-done__tick { stroke-width: 6; stroke-dasharray: 60; stroke-dashoffset: 60; animation: ob-draw 0.45s cubic-bezier(0.65, 0, 0.35, 1) 0.75s forwards; }
@keyframes ob-draw { to { stroke-dashoffset: 0; } }
@keyframes ob-glow { 50% { opacity: 0.55; } }
.side-screen .brief-goodbye p, .side-screen .brief-edition-actions small, .side-screen .sec-note, .side-screen .sec-empty { font: 14px/1.5 var(--font); color: rgba(255, 255, 255, 0.62); }
.side-screen .brief-goodbye .kemoji { display: none; }
body[data-side] .side-screen .workspace-section-label span { color: #fff; }
.side-screen .toggle-row { font: 500 14px var(--font); }

/* ================= 01.11 (2) ================= */
/* Тариф: продолговатая скруглённая плашка, без «ХИТ» */
.plans { display: grid; grid-template-columns: 1fr; overflow: visible; margin: 0; padding: 0; }
.plan { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 14px 18px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: none; text-align: left; }
.plan.is-selected { background: rgba(255, 255, 255, 0.08); background-image: none; border-color: #fff; box-shadow: none; }
.plan__tick { position: static; order: -1; display: grid; width: 22px; height: 22px; background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.35); color: transparent; }
.plan.is-selected .plan__tick { background: #fff; border-color: #fff; color: #000; }
.plan__period { flex: 1; font: 600 16px var(--font); }
.plan__price { margin: 0; font: 700 20px var(--font); }
.plan__hit { display: none; }

/* Меню «+»: компактное */
.add-sheet { width: min(286px, calc(100vw - 20px)); padding: 8px; border-radius: 22px; }
.add-sheet::before, .add-sheet::after { content: none; }
.add-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 6px; }
.add-quick button { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px; border-radius: 16px; background: var(--panel-item, #151517); font: 500 12.5px var(--font); color: #fff; }
.add-quick svg { width: 22px; height: 22px; }
.add-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 10px; border-radius: 14px; text-align: left; }
.add-row:active, .add-quick button:active { background: #202024; }
.add-row > svg { width: 22px; height: 22px; flex: none; color: #e6e6e6; }
.add-row span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.add-row b { font: 600 14.5px var(--font); }
.add-row small { font: 12px var(--font); color: var(--muted); }
.add-switch { position: relative; width: 38px; height: 22px; flex: none; border-radius: 999px; background: #2a2a2e; transition: background 0.2s; }
.add-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #8a8a8e; transition: transform 0.25s cubic-bezier(0.2, 1.3, 0.4, 1), background 0.2s; }
.add-row.is-on .add-switch { background: #fff; }
.add-row.is-on .add-switch::after { transform: translateX(16px); background: #000; }

/* Уровень мышления: ползунок по центру, PLUS у правого края */
.effort__slider { margin-inline: auto; }
.effort__info { align-items: center; }
.effort__info .effort__body { flex: 1; min-width: 0; }
.effort__info > .badge { margin-left: auto; flex: none; }

/* Задачи и напоминания: воздух между блоками и мечущиеся ASCII-группы на фоне */
.km-body { display: grid; gap: 14px; }
.km-panel .tk-pane { gap: 14px; }
.tk-tabs { border-radius: 14px; background: #111113; border-color: #222226; }
.tk-tabs button { border-radius: 10px; }
.tk-tabs__ink { border-radius: 10px; }
.tk-add input { border-radius: 14px; background: #0b0b0d; border-color: #26262a; }
.tk-add button { border-radius: 14px; box-shadow: none; }
.tk-item { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }
.km-panel { isolation: isolate; }
.km-glyphs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.km-glyphs span { position: absolute; left: 0; top: 0; font: 600 13px/1.25 var(--mono); letter-spacing: 0.3em; color: #fff; text-align: center; opacity: 0.12;
  animation: glyph-roam 22s ease-in-out infinite, glyph-pulse 3s ease-in-out infinite; animation-delay: calc(var(--g) * -5.5s), calc(var(--g) * -0.8s); }
.km-glyphs span:nth-child(2) { animation-duration: 27s, 3.6s; }
.km-glyphs span:nth-child(3) { animation-duration: 31s, 2.6s; }
.km-glyphs span:nth-child(4) { animation-duration: 25s, 4s; }
@keyframes glyph-roam {
  0% { transform: translate(8vw, 70vh); } 20% { transform: translate(64vw, 52vh); } 40% { transform: translate(40vw, 82vh); }
  60% { transform: translate(78vw, 30vh); } 80% { transform: translate(14vw, 40vh); } 100% { transform: translate(8vw, 70vh); } }
@keyframes glyph-pulse { 50% { opacity: 0.32; } }
html.is-idle .km-glyphs span { animation-play-state: paused; }
.perf-low .km-glyphs { display: none; }
@media (prefers-reduced-motion: reduce) { .km-glyphs { display: none; } }

/* Настройки Brief/Секретаря: Кира раздела вместо календаря, источники — карточки как в списке чатов */
.sa-kira { width: 120px; height: 120px; display: grid; place-items: center; margin-bottom: 6px; }
.sa-kira img { height: 116px; width: auto; max-width: none; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.9)); animation: hero-float 5s ease-in-out infinite; }
.sa-eyebrow { display: none; }
.sa .source-picks { display: grid; gap: 6px; }
.sa .source-picks > * { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: var(--panel-item, #151517); border: 1px solid transparent; }
.sa .source-picks > *:has(input:checked) { border-color: color-mix(in srgb, var(--sa-accent) 60%, transparent); background: color-mix(in srgb, var(--sa-accent) 10%, #151517); }

/* Варианты Секретаря — форма как у плашки в шапке (пилюля), выбранный — с бегущими точками по краям, как у режимов */
.side-screen .choice-row button, body[data-side] .side-screen .choice-row button { min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: var(--surface, #1c1c1f); border: 1px solid rgba(255, 255, 255, 0.12); font: 600 13px var(--mono); color: rgba(255, 255, 255, 0.78); }
.side-screen .choice-row button[aria-checked="true"], body[data-side] .side-screen .choice-row button[aria-checked="true"] {
  background: #050505; border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.choice-field { opacity: 1; border-radius: inherit; }

/* ================= 01.11 (3): страница чатов, поле ввода, островки ================= */
:root { --ui: "Onest", var(--font); --island: #141417; --island-line: rgba(255, 255, 255, 0.07); }

/* Список чатов — отдельная страница на весь экран */
.drawer__backdrop { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
.drawer__panel { left: 0; top: 0; bottom: 0; width: 100%; max-width: none; border-radius: 0; border: 0; box-shadow: none; padding: 0;
  background: radial-gradient(120% 60% at 50% -10%, #17171c 0%, #070708 55%, #040405 100%);
  animation: chats-in 0.46s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
.drawer.is-closing .drawer__panel { animation: chats-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes chats-in { from { transform: translateX(-28%); opacity: 0; } }
@keyframes chats-out { to { transform: translateX(-22%); opacity: 0; } }
.drawer__panel::before { top: calc(70px + var(--safe-top)); }
.drawer__top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 16px 10px; }
.drawer__top .icon-btn { width: 44px; height: 44px; border-radius: 50%; background: #1c1c1f; border: 0; }
.drawer__title { margin: 0; text-align: center; font: 600 19px var(--ui); letter-spacing: -0.01em; }
.drawer__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px calc(110px + var(--safe-bottom)); scrollbar-width: none; display: flex; flex-direction: column; gap: 10px; }
.drawer__scroll::-webkit-scrollbar { display: none; }
.drawer__scroll > * { flex: none; animation: chats-item 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both; animation-delay: 0.06s; }
.drawer__scroll > :nth-child(2) { animation-delay: 0.1s; } .drawer__scroll > :nth-child(3) { animation-delay: 0.14s; }
.drawer__scroll > :nth-child(4) { animation-delay: 0.18s; } .drawer__scroll > :nth-child(n+5) { animation-delay: 0.22s; }
@keyframes chats-item { from { opacity: 0; transform: translateX(-18px); } }
.drawer__list { flex: none; overflow: visible; margin: 0; padding: 0; }

/* Аккаунт — плашка-пилюля, как навбар */
.drawer__me { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 8px; border-radius: 999px; border: 1px solid var(--island-line);
  background: linear-gradient(180deg, #202024, #18181b); text-align: left; }
.drawer__me .drawer__avatar { width: 50px; height: 50px; flex: none; border-radius: 50%; overflow: hidden; }
.drawer__me-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; row-gap: 2px; }
.drawer__me-text b { flex-basis: 100%; font: 700 18px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drawer__me-text small { font: 500 14px var(--ui); color: var(--muted); }
.drawer__credits { display: inline-flex; align-items: center; gap: 5px; font: 600 14px var(--ui); font-style: normal; color: #fff; }
.drawer__credits svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: #2f6cf6; color: #fff; }
.drawer__gear { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000; }
.drawer__gear svg { width: 22px; height: 22px; }
.drawer__me > svg { display: none; }

.drawer .search { min-height: 46px; margin: 0; padding: 0 16px; border-radius: 999px; background: var(--island); border: 1px solid var(--island-line); }
.drawer .search input { font: 400 15px var(--ui); }

/* Четыре режима — отдельные островки */
.drawer-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.drawer-modes button { --c: #8f8fa0; display: flex; align-items: center; gap: 10px; min-height: 68px; padding: 10px 12px; border-radius: 24px; text-align: left; color: #fff;
  border: 1px solid var(--island-line); background: radial-gradient(130% 120% at 0% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 62%), var(--island);
  transition: transform 0.15s, border-color 0.2s; }
.drawer-modes .is-brief { --c: #4d8dff; } .drawer-modes .is-secretary { --c: #ff7ab8; } .drawer-modes .is-girl { --c: #b48cff; }
.drawer-modes button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--c) 70%, #fff 10%); }
.drawer-modes button:active { transform: scale(0.97); }
.drawer-modes img { width: 40px; height: 40px; flex: none; object-fit: contain; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)); }
.drawer-modes .is-agent img { filter: none; }
.drawer-modes span { display: grid; gap: 1px; min-width: 0; }
.drawer-modes b { font: 600 14.5px var(--ui); white-space: nowrap; }
.drawer-modes small { font: 400 12px var(--ui); color: var(--muted); }
.drawer-modes .is-girl span { opacity: 0.65; }

/* Разделы — одна группа со строками, как в настройках iOS */
.drawer-tools { margin: 0; padding: 4px 0; border-radius: 24px; background: var(--island); border: 1px solid var(--island-line); }
.drawer-tools button { position: relative; padding: 13px 18px; border-radius: 0; font: 500 16px var(--ui); }
.drawer-tools button + button::before { content: "" !important; display: block !important; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--island-line); }
.drawer-tools button:active { background: rgba(255, 255, 255, 0.05); }

/* Беседы — островки со своим слабым оттенком */
.drawer__group { display: block; margin: 12px 4px 8px; padding: 0; font: 600 15px var(--ui); letter-spacing: 0; text-transform: none; color: #6f6f78; }
.drawer__group::before, .drawer__group::after { content: none; }
.drawer__row { position: relative; margin-bottom: 8px; }
.drawer__row .drawer__chat { min-height: 56px; padding: 14px 52px 14px 18px; border-radius: 22px; border: 1px solid var(--island-line); color: #fff; font: 500 15.5px var(--ui);
  background: radial-gradient(120% 160% at 0% 0%, hsl(var(--h, 230) 70% 60% / 0.13), transparent 58%), linear-gradient(180deg, #18181c, #121215); }
.drawer__row .drawer__chat.is-active { border-color: rgba(255, 255, 255, 0.3); background: radial-gradient(120% 160% at 0% 0%, hsl(var(--h, 230) 70% 60% / 0.22), transparent 60%), #1d1d22; color: #fff; }
.drawer__row .drawer__chat:active { transform: scale(0.98); }
.drawer__row .drawer__more { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.drawer__acts { inset: 0 52px 0 0; }
.drawer__empty { font: 400 15px var(--ui); text-align: center; color: var(--muted); padding: 24px 0; }

.drawer__pro { margin: 6px 0 0; padding: 16px 18px; border-radius: 24px; border: 1px solid var(--island-line);
  background: radial-gradient(140% 140% at 100% 0%, rgba(122, 92, 255, 0.35), transparent 60%), radial-gradient(120% 120% at 0% 100%, rgba(77, 141, 255, 0.18), transparent 60%), #121216; }
.drawer__pro b { font: 700 16px var(--ui); } .drawer__pro small { font: 400 13px var(--ui); }

.drawer__fab { position: absolute; right: 18px; bottom: calc(20px + var(--safe-bottom)); z-index: 3; width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  background: #f2f2f2; color: #000; border: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); animation: fab-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1) 0.2s both; }
.drawer__fab svg { width: 26px; height: 26px; }
.drawer__fab:active { transform: scale(0.92); }
@keyframes fab-in { from { opacity: 0; transform: scale(0.4); } }
.drawer.is-closing .drawer__fab { animation: fade-out 0.15s ease both; }

/* Поле ввода — слегка цветное, как у больших ИИ-приложений */
.composer { --tint: #7c7cff; border-radius: 28px; padding: 14px 10px 10px 18px; border: 1px solid color-mix(in srgb, var(--tint) 18%, rgba(255, 255, 255, 0.08));
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tint) 14%, transparent), transparent 60%), linear-gradient(180deg, #202027, #18181d);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
body[data-app-mode="brief"] .composer { --tint: #4d8dff; }
body[data-app-mode="secretary"] .composer { --tint: #ff7ab8; }
.composer textarea { font: 400 16.5px/1.4 var(--ui); }
.composer textarea::placeholder { color: rgba(255, 255, 255, 0.42); }
.effort-chip { font: 500 13px var(--ui); border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.06); }

/* Подсказки над полем — мягкие пилюли с нормальным шрифтом */
.chips button, .chips > * { height: 42px; padding: 0 18px; border-radius: 999px; font: 500 14.5px var(--ui); letter-spacing: 0; color: #ececf0;
  background: linear-gradient(180deg, #1f1f24, #18181c); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); }
.chips button:active { transform: scale(0.96); background: #26262c; }

/* Ответ Киры на всю ширину: аватар над текстом, без большого отступа слева */
.msg--ai { flex-direction: column; gap: 4px; }
.msg--ai > .msg__avatar { width: 34px; height: 34px; margin-left: 0; }
.msg--ai > .msg__body { width: 100%; max-width: 100%; }

/* Выбор модели и режима — островки с большим скруглением */
.mode-picker button { border-radius: 22px; background: var(--island); border-color: var(--island-line); }
.mode-picker b { font: 600 14px var(--ui); letter-spacing: 0; } .mode-picker small { font: 400 11.5px var(--ui); }
.popover__list { padding: 6px; border-radius: 26px; background: var(--island); border: 1px solid var(--island-line); gap: 2px; }
.popover__list .model { border-radius: 20px; border: 0; background: transparent; }
.popover__list .model[aria-selected="true"] { background: #fff; }
.model__name { font-family: var(--ui); }

/* Большие кнопки — полностью скруглённые */
:is(.btn, .side-btn, .limits__cta, .limit-card__cta, .paywall__cta, .lockbar__btn, .sa-cta, .usage-cta, .gate-btn, .workspace-action-primary, .tk-add button) { border-radius: 999px; }

/* Поля в настройках Brief/Секретаря и в разделах — островки */
:is(.sa, .side-screen) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { border-radius: 20px; background: var(--island); border: 1px solid var(--island-line); }
.sa-card { border-radius: 26px; }

/* Изображения: скруглённые вкладки, поля и плитки */
.st-tabs, .st-tabs button, .st-tabs .tk-tabs__ink { border-radius: 999px; }
.km-panel :is(textarea, input:not([type="checkbox"]):not([type="radio"])) { border-radius: 22px; }
.st-grid > *, .st-grid i { border-radius: 20px; }
.drawer__me-text { justify-content: flex-start; text-align: left; }
.drawer__me-text > * { text-align: left; }
.drawer__me-text > b { flex: 0 0 100%; width: 100%; margin: 0; }
.drawer__me-text > small, .drawer__me-text > em { margin: 0; }
.popover__title { font: 700 22px var(--ui); letter-spacing: -0.01em; }
.popover__hint { font: 400 13px var(--ui); letter-spacing: 0; text-transform: none; }
.cmp__title { font: 600 15px var(--ui); letter-spacing: 0; text-transform: none; color: #8a8a94; }
.cmp__wrap { border-radius: 22px; background: var(--island); border: 1px solid var(--island-line); }
.cmp__note { font: 400 12px var(--ui); }
.st-label { font: 600 14px var(--ui); letter-spacing: 0; text-transform: none; color: #8a8a94; }
.st-prompt { border-radius: 24px; background: var(--island); border: 1px solid var(--island-line); padding: 16px 18px; font: 400 16px/1.45 var(--ui); }
.st-cost { font: 400 12.5px var(--ui); }
.st-tabs button { font-family: var(--ui); }
.st-tile, .st-tile img, .st-tile > :first-child { border-radius: 20px; }

/* ================= 01.11 (4): стекло, серый оттенок, фон чата ================= */
/* Поле ввода и шапка: полупрозрачные, серый оттенок, лента видна сквозь них */
.composer { --tint: #a0a0b4; border-color: rgba(255, 255, 255, 0.1);
  background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.12), transparent 60%), linear-gradient(180deg, rgba(38, 38, 44, 0.72), rgba(24, 24, 28, 0.78));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
body[data-app-mode="brief"] .composer, body[data-app-mode="secretary"] .composer { --tint: #a0a0b4; }
.bar__pill, .bar .icon-btn, .side-bar .icon-btn { border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.12), transparent 60%), linear-gradient(180deg, rgba(38, 38, 44, 0.66), rgba(24, 24, 28, 0.74));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); }
.chips button, .chips > * { background: linear-gradient(180deg, rgba(38, 38, 44, 0.7), rgba(24, 24, 28, 0.76)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Лента заходит под поле ввода, без чёрной полосы над ним */
.chat.has-messages .chat__scroll { margin-bottom: calc(var(--cw-h, 0px) * -1); padding-bottom: var(--cw-h, 0px);
  -webkit-mask-image: none; mask-image: none; }
.chat.has-messages .composer-wrap { pointer-events: none; }
.chat.has-messages .composer-wrap > * { pointer-events: auto; }

/* Фон: живое поле только в пустом чате; в беседе — тёмный мягкий градиент */
body.chat-has-messages:not(.screen-settings):not([data-app-mode="brief"]):not([data-app-mode="secretary"]) .frame-field {
  opacity: 0; display: none; transition: opacity 0.5s, display 0.5s allow-discrete; }
body { background-color: #000; transition: background-color 0.4s; }
body.chat-has-messages:not(.screen-settings):not([data-app-mode="brief"]):not([data-app-mode="secretary"]) {
  background: radial-gradient(90% 55% at 50% -5%, rgba(120, 122, 150, 0.16), transparent 70%),
    radial-gradient(70% 45% at 105% 60%, rgba(110, 100, 150, 0.09), transparent 70%),
    radial-gradient(70% 45% at -5% 100%, rgba(90, 110, 140, 0.1), transparent 70%), #060608; background-attachment: fixed; }

/* Окно моделей: группа появляется вместе со строками, а не пустой плашкой раньше них */
.popover__list { animation: item-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) 0.32s both; }

/* Страница чатов: шапка — полупрозрачная плашка поверх списка */
.drawer__panel { position: absolute; }
.drawer__top { position: absolute; top: 0; left: 0; right: 0; z-index: 4; grid-template-columns: 44px 1fr 44px;
  padding: calc(8px + var(--safe-top)) 12px 8px; background: linear-gradient(180deg, rgba(6, 6, 8, 0.82), rgba(6, 6, 8, 0.55) 70%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); mask-image: linear-gradient(180deg, #000 75%, transparent); -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); }
.drawer__top .icon-btn { background: rgba(38, 38, 44, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); }
.drawer__title { font-size: 17px; }
.drawer__scroll { padding-top: calc(72px + var(--safe-top)); }
.drawer__me-text { display: grid; gap: 2px; }
.drawer__me-text > b { font-size: 17px; }

/* Настройки — скруглённые островки, как остальной интерфейс */
.settings__body .card { border-radius: 26px; border: 1px solid var(--island-line); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), rgba(20, 20, 23, 0.9); }
.settings__body .row { font-family: var(--ui); }
.settings__body .group-title { font: 600 14px var(--ui); letter-spacing: 0; text-transform: none; color: #8a8a94; }
.settings__body .group-title::before { content: none; }
.settings__body .group-title { margin-left: 6px; }
.settings__body .row :is(small, em, .row__value, .row__hint) { font-family: var(--ui); letter-spacing: 0; }

/* ================= 01.11 (5): мастер личности, сценарии, меню ================= */
/* Шапка и поле ввода — плотнее */
.composer { background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.1), transparent 60%), linear-gradient(180deg, rgba(34, 34, 40, 0.9), rgba(22, 22, 26, 0.94)); }
.bar__pill, .bar .icon-btn, .side-bar .icon-btn { background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.1), transparent 60%), linear-gradient(180deg, rgba(34, 34, 40, 0.88), rgba(22, 22, 26, 0.92)); }

/* Список чатов: без мигающей точки у закреплённых, три точки — нормальная кнопка */
.drawer__pin { display: none; }
.drawer__row .drawer__more { z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border-radius: 50%; }
.drawer__row .drawer__chat { position: relative; isolation: isolate; overflow: hidden; }
.chat-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0.9; }
.drawer__row .drawer__chat.is-active { background: linear-gradient(180deg, #16161a, #0f0f12); border-color: rgba(255, 255, 255, 0.22); }

/* Общие подписи/заголовки страниц — обычный шрифт, без «//» и капса */
.km-head h1, .auto-hero h1, .sa-hero h1 { font: 700 26px/1.15 var(--ui); letter-spacing: -0.02em; }
.km-head p, .auto-hero p, .sa-hero p { font: 400 14.5px/1.5 var(--ui); color: rgba(255, 255, 255, 0.62); }
.brief-eyebrow { display: none; }

/* «Что умеет Кира»: темы — строки-пилюли, сценарии раскрываются под строкой */
.scl { display: grid; gap: 10px; }
.scl__group { border-radius: 26px; border: 1px solid var(--island-line); background: radial-gradient(120% 160% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), var(--island);
  overflow: hidden; animation: chats-item 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both; animation-delay: calc(var(--i) * 0.05s); }
.scl__head { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 16px 12px 12px; text-align: left; color: #fff; }
.scl__icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.scl__icon svg { width: 22px; height: 22px; }
.scl__title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.scl__title b { font: 600 16px var(--ui); }
.scl__title small { font: 400 12.5px var(--ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scl__chev { width: 20px; height: 20px; flex: none; color: var(--muted); transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1); }
.scl__head[aria-expanded="true"] .scl__chev { transform: rotate(180deg); color: #fff; }
.scl__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s cubic-bezier(0.2, 0.9, 0.25, 1); }
.scl__head[aria-expanded="true"] + .scl__body { grid-template-rows: 1fr; }
.scl__inner { min-height: 0; overflow: hidden; display: grid; gap: 6px; padding: 0 10px; }
.scl__head[aria-expanded="true"] + .scl__body .scl__inner { padding-bottom: 10px; }
.scl__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px 12px 16px; border-radius: 20px; text-align: left; color: #fff;
  background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.05); opacity: 0; transform: translateY(-6px);
  transition: opacity 0.25s, transform 0.3s cubic-bezier(0.2, 0.9, 0.25, 1), background 0.15s; transition-delay: calc(var(--j) * 0.04s); }
.scl__head[aria-expanded="true"] + .scl__body .scl__item { opacity: 1; transform: none; }
.scl__item:active { background: rgba(255, 255, 255, 0.1); }
.scl__item span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.scl__item b { font: 600 14.5px var(--ui); }
.scl__item small { font: 400 12.5px/1.35 var(--ui); color: var(--muted); }
.scl__item svg { width: 18px; height: 18px; flex: none; color: var(--muted); }

/* «Личность Киры»: по шагу на страницу */
.pz { display: flex; flex-direction: column; gap: 14px; padding-top: calc(64px + var(--safe-top)); }
.pz-top { display: flex; align-items: center; gap: 12px; }
.pz-top .ob-step { font: 500 13px var(--ui); color: var(--muted); white-space: nowrap; }
.pz-top .ob-step b { color: #fff; font-weight: 700; }
.pz-bar { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pz-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: 0 50%; transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.25, 1); }
.pz-stage { display: grid; gap: 14px; }
.pz-stage.is-fwd > * { animation: pz-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.pz-stage.is-back > * { animation: pz-back 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.pz-stage > :nth-child(2) { animation-delay: 0.04s; } .pz-stage > :nth-child(n+3) { animation-delay: 0.08s; }
@keyframes pz-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes pz-back { from { opacity: 0; transform: translateX(-28px); } }
.pz-head h1 { font: 700 28px/1.15 var(--ui); letter-spacing: -0.02em; }
.pz-head p { margin-top: 6px; font: 400 14.5px/1.5 var(--ui); color: rgba(255, 255, 255, 0.6); }
.pz .persona-preview { border-radius: 24px; background: var(--island); border: 1px solid var(--island-line); }
.pz .persona-preview p { font-family: var(--ui); }
.pz-opts { display: grid; gap: 8px; }
.pz-opts.is-wrap { display: flex; flex-wrap: wrap; }
.pz-opt { position: relative; isolation: isolate; overflow: hidden; min-height: 52px; padding: 0 20px; border-radius: 999px; text-align: left; color: rgba(255, 255, 255, 0.82);
  font: 500 15.5px var(--ui); background: var(--island); border: 1px solid var(--island-line); transition: border-color 0.2s, color 0.2s, transform 0.12s; }
.pz-opts.is-wrap .pz-opt { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.pz-opt[aria-checked="true"] { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: #070708; }
.pz-opt:active { transform: scale(0.97); }
.pz-opt .choice-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: none; border-radius: inherit; }
.pz-opt[aria-checked="true"] .choice-field { display: block; }
.pz .text-field { width: 100%; padding: 14px 18px; border-radius: 22px; background: var(--island); border: 1px solid var(--island-line); font: 400 15.5px var(--ui); color: #fff; }
.pz .field-label { font: 500 13.5px var(--ui); color: var(--muted); letter-spacing: 0; text-transform: none; margin-bottom: -6px; }
.pz .emoji-pick { border-radius: 24px; background: var(--island); border: 1px solid var(--island-line); padding: 10px; }
.pz .persona-pack { font: 500 13.5px var(--ui); color: var(--muted); }
.pz-sum { display: grid; gap: 8px; }
.pz-sum__row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 18px 10px 20px; border-radius: 999px; text-align: left; color: #fff;
  background: var(--island); border: 1px solid var(--island-line); animation: chats-item 0.4s cubic-bezier(0.2, 0.9, 0.25, 1) both; animation-delay: calc(var(--j) * 0.04s); }
.pz-sum__row span { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pz-sum__row small { font: 400 12.5px var(--ui); color: var(--muted); }
.pz-sum__row b { font: 600 15px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-sum__row svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pz-sum__row:active { transform: scale(0.98); }
.pz-cta { display: flex; gap: 8px; }
.pz-cta .btn { flex: 1; height: 54px; border-radius: 999px; font: 600 16px var(--ui); }
.pz-cta .btn--primary { background: #fff; color: #000; box-shadow: none; }
.pz-prev { flex: 0 0 34% !important; background: var(--island); border: 1px solid var(--island-line); color: #fff; }

/* Секретарь: тот же минимализм — островки, обычный шрифт, без «//» и пиксельных теней */
.sa-card { border-radius: 26px; border-color: var(--island-line); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--sa-accent, #fff) 7%, transparent), transparent 60%), rgba(20, 20, 23, 0.92); }
.sa-label { font: 600 14px var(--ui); letter-spacing: 0; text-transform: none; color: #8a8a94; }
.sa-label::before { content: none; }
.sa-label b { font: 600 12px var(--ui); border-radius: 999px; }
.sa-features li + li { border-top: 1px solid var(--island-line); }
.sa-features b, .sa-steps b, .sa-switch b, .sa-privacy b { font: 600 15px/1.3 var(--ui); letter-spacing: 0; }
.sa-features small, .sa-steps span, .sa-switch small, .sa-privacy small { font: 400 13px/1.5 var(--ui); }
.sa-status { font: 500 13px var(--ui); letter-spacing: 0; padding: 8px 16px; background: var(--island); border-color: var(--island-line); }
.sa-connect { box-shadow: none; background-image: none; border-color: color-mix(in srgb, var(--sa-accent) 45%, transparent); }
.sa .btn--primary.sa-cta { box-shadow: none; border-radius: 999px; font-family: var(--ui); }
.sa-ghost { border-radius: 999px; font: 500 14px var(--ui); border-color: var(--island-line); background: var(--island); }
.sa-steps li::before { font-family: var(--ui); box-shadow: none; }
.sa-note { font: 400 12.5px/1.5 var(--ui); }
.sa-privacy { border-style: solid; border-color: var(--island-line); }

/* Мои лимиты */
.usage-card { border-radius: 26px; border-color: var(--island-line); background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), rgba(20, 20, 23, 0.92); }
.usage-card__top { font: 400 13px var(--ui); }
.usage-card__top b { font: 600 14.5px var(--ui); text-transform: none; letter-spacing: 0; }
.usage-card__num strong { font: 700 32px var(--ui); letter-spacing: -0.02em; }
.usage-card__num small, .usage-note, .usage-plan { font-family: var(--ui); letter-spacing: 0; }
.usage-plan__badge { border-radius: 999px; font: 700 12px var(--ui); letter-spacing: 0.02em; padding: 5px 12px; }
.meter { height: 8px; border-radius: 8px; }
.meter i { border-radius: inherit; }

/* Меню лимитов, «+», уровня мышления — круглее и спокойнее */
.limits__menu, .add-sheet { border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 10px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(160, 160, 180, 0.1), transparent 60%), rgba(20, 20, 24, 0.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.limits__head { padding: 6px 8px 10px; font: 600 15px var(--ui); letter-spacing: 0; text-transform: none; color: #fff; }
.limits__plan { font: 600 12px var(--ui); padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.limits__item { border-radius: 22px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.05); padding: 12px 14px; font-family: var(--ui); }
.limits__item * { font-family: var(--ui); letter-spacing: 0; }
.limits__note { font: 400 12.5px/1.45 var(--ui); padding: 4px 8px; }
.limits__cta { height: 48px; font: 600 15px var(--ui); background: #fff; color: #000; box-shadow: none; }
.add-quick button { border-radius: 22px; background: rgba(255, 255, 255, 0.05); font-family: var(--ui); }
.add-row { border-radius: 20px; }
.add-row b { font-family: var(--ui); } .add-row small { font-family: var(--ui); }
.effort__info { border-radius: 22px; background: rgba(255, 255, 255, 0.045); padding: 12px 14px; }
.effort__info * { font-family: var(--ui); letter-spacing: 0; }
.effort .limits__plan { font-family: var(--ui); }
.paywall__inner.pz { padding-top: calc(18px + var(--safe-top)); }
.pz-top .ob-step, .pz-top .ob-step b { font-size: 14px; line-height: 1; }
.persona .paywall__back { z-index: 5; }
.drawer__row .drawer__more { display: flex; align-items: center; justify-content: center; gap: 3px; }
.drawer__row .drawer__more i { width: 4px; height: 4px; border-radius: 50%; background: #9a9aa4; flex: none; }
.sa .assistant-fields label { font: 500 13.5px var(--ui); text-transform: none; letter-spacing: 0; color: var(--muted); }
.sa :is(select, input:not([type="checkbox"]):not([type="radio"]), textarea) { font: 400 15px var(--ui); letter-spacing: 0; color: #fff; padding: 12px 16px; min-height: 48px; }
.paywall__cta .btn { font-family: var(--ui); letter-spacing: 0; border-radius: 999px; }
.toast { font-family: var(--ui); letter-spacing: 0; }

/* ================= 01.11 (6): логотипы моделей, плотнее стекло, мастер плавнее ================= */
/* Шапка, поле ввода и их меню — почти непрозрачные: текст ленты под ними не мешает */
.composer { background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), linear-gradient(180deg, #212127f5, #17171bf8); }
.bar__pill, .bar .icon-btn, .side-bar .icon-btn { background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), linear-gradient(180deg, #212127f2, #17171bf5); }
.chips button, .chips > * { background: linear-gradient(180deg, #212127f2, #17171bf5); }
.limits__menu, .add-sheet { background: radial-gradient(120% 120% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), #141418fa; }

/* Уровень мышления: ровные отступы, ползунок по центру между заголовком и описанием */
.limits__menu.effort { display: grid; gap: 16px; padding: 18px; }
.effort .limits__head { padding: 0 2px; }
.effort__slider { margin: 0; padding: 0; display: flex; justify-content: center; }
.effort__info { margin: 0; }

/* Логотипы моделей */
.model-logo { width: 26px; height: 26px; flex: none; object-fit: contain; }
.model-logo--auto { display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; }
.model-logo--auto svg { width: 16px; height: 16px; }
.popover__list .model { display: flex; align-items: center; gap: 14px; }
.popover__list .model[aria-selected="true"] .model-logo--auto { background: #000; }
.popover__list .model[aria-selected="true"] img.model-logo[src*="openai"] { filter: invert(1); }

/* Сравнение моделей — без «таблицы»: строки-островки */
.cmp__wrap { padding: 6px; border-radius: 26px; overflow-x: auto; }
.cmp__table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-family: var(--ui); }
.cmp__table thead th { padding: 4px 8px 6px; font: 500 12px var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); border: 0; background: none; }
.cmp__table tbody :is(th, td) { padding: 10px 8px; border: 0; background: rgba(255, 255, 255, 0.04); }
.cmp__table tbody th { border-radius: 18px 0 0 18px; }
.cmp__table tbody td:last-child { border-radius: 0 18px 18px 0; }
.cmp__table tbody th { display: flex; align-items: center; gap: 8px; font: 600 13.5px var(--ui); white-space: nowrap; }
.cmp__table tbody th .model-logo { width: 20px; height: 20px; }
.cmp__table tr.is-current :is(th, td) { background: rgba(255, 255, 255, 0.11); }
.cmp__mult { font: 600 13px var(--ui); }

/* «Переписать ответ моделью» */
.qa-models { padding: 8px; border-radius: 26px; border: 1px solid var(--island-line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  background: radial-gradient(120% 120% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), #141418; }
.qa-models p { margin: 4px 10px 8px; font: 600 14px var(--ui); letter-spacing: 0; text-transform: none; color: #8a8a94; }
.qa-models button { justify-content: flex-start; gap: 12px; padding: 11px 14px; border-radius: 20px; }
.qa-models button b { flex: 1; font: 500 15px var(--ui); }
.qa-models button small { font: 400 12.5px var(--ui); letter-spacing: 0; color: var(--muted); }
.qa-models button .model-logo { width: 22px; height: 22px; }
.qa-models button:active { background: rgba(255, 255, 255, 0.07); }

/* Личность Киры: неоднотонный фон, шаги пунктиром, крупный счётчик, маленькая живая Кира */
[data-overlay="persona"] { background: radial-gradient(90% 45% at 100% 0%, rgba(150, 140, 200, 0.16), transparent 70%), radial-gradient(80% 40% at 0% 100%, rgba(120, 140, 190, 0.12), transparent 70%), #050507; }
.pz-top { gap: 16px; }
.pz-count { display: inline-flex; align-items: baseline; font: 800 30px/1 var(--ui); letter-spacing: -0.03em; color: #fff; min-width: 64px; }
.pz-count span { font: 700 18px/1 var(--ui); color: rgba(255, 255, 255, 0.4); margin-left: 2px; }
.pz-bar { display: flex; gap: 5px; height: 6px; background: none; overflow: visible; }
.pz-bar i { flex: 1; height: 100%; border-radius: 6px; background: rgba(255, 255, 255, 0.12); transform: none; transition: background 0.4s ease; }
.pz-bar i.is-on { background: #fff; }
.pz-preview { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.pz-kira { width: 44px; height: 44px; flex: none; }
.pz-preview p { margin: 0; font: 400 14.5px/1.45 var(--ui); }
.pz-stage { transition: opacity 0.14s ease; }
.pz-stage.is-leaving { opacity: 0; }
.pz-stage.is-fwd > *, .pz-stage.is-back > * { animation-duration: 0.36s; animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes pz-in { from { opacity: 0; transform: translateX(16px); } }
@keyframes pz-back { from { opacity: 0; transform: translateX(-16px); } }
.pz-opt { transition: border-color 0.25s, color 0.25s, background 0.25s, transform 0.15s; }
.pz-opt .choice-field { display: block; animation: fade 0.3s ease both; }

/* Секретарь и Brief: живая Кира из точек цвета раздела, мягкие оттенки по всему фону */
[data-overlay="assistant"] { background: radial-gradient(120% 50% at 85% -10%, var(--sa-glow), transparent 65%), radial-gradient(90% 45% at -10% 45%, color-mix(in srgb, var(--sa-accent) 12%, transparent), transparent 70%),
  radial-gradient(100% 50% at 110% 100%, color-mix(in srgb, var(--sa-accent) 10%, transparent), transparent 70%), #050506; }
.sa-kira { width: 132px; height: 132px; }
.sa-kira canvas { width: 132px; height: 132px; animation: hero-float 5s ease-in-out infinite; }
.cmp__table tr.is-current { background: none; color: #fff; }
.cmp__table tr.is-current .cmp__dots i { background: rgba(255, 255, 255, calc(0.16 + var(--on) * 0.84)); }
.cmp__table tbody :is(th, td), .cmp__table thead th { padding-left: 5px; padding-right: 5px; }
.cmp__table tbody th { font-size: 12.5px; }

/* ================= 01.11 (7): без резины, ровная таблица, страницы в одном стиле ================= */
/* Без «резинового» оттягивания там, где листать нечего */
html, body, .paywall, .paywall__inner, .drawer__scroll, .popover__menu, .settings, .side-screen, .km-body, .chat__scroll { overscroll-behavior: none; }

/* Сравнение моделей помещается целиком — без прокрутки вбок */
.cmp__wrap { overflow: hidden; padding: 6px 4px; }
.cmp__table { table-layout: fixed; width: 100%; }
.cmp__table th:nth-child(1) { width: 34%; } .cmp__table th:nth-child(2) { width: 22%; } .cmp__table th:nth-child(3) { width: 18%; }
.cmp__table th:nth-child(4) { width: 14%; } .cmp__table th:nth-child(5) { width: 12%; }
.cmp__table :is(th, td) { padding-left: 4px !important; padding-right: 4px !important; overflow: hidden; text-overflow: ellipsis; }
.cmp__table tbody th { gap: 6px; font-size: 12px; }
.cmp__table tbody th span { overflow: hidden; text-overflow: ellipsis; }
.cmp__table tbody th .model-logo { width: 16px; height: 16px; }
.cmp__table thead th { font-size: 11px; text-align: left; }
.cmp__table td { text-align: left; }
.cmp__dots { gap: 2px; } .cmp__dots i { width: 4px; height: 4px; }

/* Кира не летает */
.side-hero__kira, .sa-kira img, .sa-kira canvas { animation: none; }

/* Меню без ASCII-узоров на фоне — спокойный мягкий градиент */
:is(.drawer__panel, .limits__menu, .add-sheet)::before, :is(.drawer__panel, .limits__menu, .add-sheet)::after { content: none; }

/* Быстрые действия под ответом — пилюли */
.qa-btn--text { border-radius: 999px; font-family: var(--ui); }

/* Страницы-разделы: неоднотонный фон */
:is([data-overlay="kmore"], [data-overlay="auto"], [data-overlay="usage"]) {
  background: radial-gradient(90% 45% at 100% 0%, rgba(150, 140, 200, 0.15), transparent 70%), radial-gradient(80% 45% at 0% 100%, rgba(120, 140, 190, 0.12), transparent 70%),
    radial-gradient(60% 30% at 0% 35%, rgba(160, 160, 190, 0.06), transparent 70%), #050507; }

/* Автоном */
.auto-hero h1 { font: 700 26px/1.15 var(--ui); letter-spacing: -0.02em; }
.auto-steps { padding: 16px; border-radius: 26px; border-color: var(--island-line); background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.08), transparent 60%), rgba(20, 20, 23, 0.92); }
.auto-steps li::before { font-family: var(--ui); }
.auto-steps b { font: 600 15px var(--ui); } .auto-steps span { font: 400 13px/1.45 var(--ui); }
.auto-example { padding: 14px 16px; border-radius: 24px; background-image: none; background-color: var(--island); border-color: var(--island-line); box-shadow: none; }
.auto-example:active { transform: scale(0.98); }
.auto-example b { font: 600 15px var(--ui); } .auto-example small { font: 400 13px/1.45 var(--ui); color: var(--muted); }
.auto-note { font: 400 12.5px/1.55 var(--ui); }
.auto-badge { border-radius: 999px; }
.auto-badge span, .auto-badge small { font-family: var(--ui); }

/* Задачи */
.tk-tabs { border-radius: 999px; padding: 4px; background: var(--island); border-color: var(--island-line); }
.tk-tabs button, .tk-tabs__ink { border-radius: 999px; font-family: var(--ui); }
.tk-add input { border-radius: 999px; padding: 0 18px; background: var(--island); border-color: var(--island-line); font-family: var(--ui); }
.tk-add button { border-radius: 50%; }
.tk-item, .tk-rem, .tk-remind { border-radius: 22px; background: var(--island); border-color: var(--island-line); font-family: var(--ui); }
.tk-item *, .tk-rem *, .tk-when, .tk-when *, .tk-empty, .tk-sub { font-family: var(--ui); letter-spacing: 0; }
.tk-when button, .tk-when__custom { border-radius: 999px; }
.km-glyphs { display: none; }

/* Секретарь (раздел): обычный шрифт, островки, без летающей Киры */
.side-screen :is(.side-hero__title, h1, h2, h3, b, strong, button, small, label, .field-label, .sec-note, .workspace-section-label, .workspace-section-label span) { font-family: var(--ui); letter-spacing: 0; text-transform: none; }
.side-hero__title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.side-screen .card, .side-screen [class*="sec-"]:is(section, .card) { border-radius: 26px; }
.side-screen .choice-row button, body[data-side] .side-screen .choice-row button { font: 500 14.5px var(--ui); letter-spacing: 0; }
.side-screen .sec-steps li::before, body[data-side] .sec-steps li::before { font-family: var(--ui); }
.cmp__table tbody th { display: table-cell; white-space: nowrap; }
.cmp__table tbody th .model-logo { display: inline-block; vertical-align: -3px; margin-right: 6px; }
.cmp__table tbody th span { display: inline; }

/* ================= 01.11 (8): реклама, симметрия, плотные карточки ================= */
/* Страница чатов: симметричная шапка (новый чат слева, закрыть справа), больше воздуха */
.drawer__fab { display: none; }
.drawer__top { grid-template-columns: 46px 1fr 46px; padding-left: 16px; padding-right: 16px; }
.drawer__top .icon-btn { width: 46px; height: 46px; }
.drawer__scroll { gap: 14px; padding-top: calc(78px + var(--safe-top)); }
.drawer__me { padding: 10px; gap: 14px; }
.drawer-tools { padding: 6px 0; }
.drawer-tools button { padding: 14px 18px; }
.drawer .search { margin-bottom: -4px; }
.drawer__list .drawer__group:first-child { margin-top: 2px; }
.drawer__group { margin: 14px 6px 8px; }

/* Реклама: карточка после ответа и баннер в списке чатов */
.ad-slot { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 8px; }
.ad-card { display: grid; overflow: hidden; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #17171b, #111114); animation: chats-item 0.45s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.ad-card.is-leaving { animation: fade-out 0.25s ease both; }
.ad-card__media { display: block; width: 100%; aspect-ratio: 2.4 / 1; background: #0c0c0f; overflow: hidden; padding: 0; border: 0; }
.ad-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.ad-card__media.is-ready img { opacity: 1; }
.ad-card__body { display: grid; gap: 6px; padding: 14px 16px 16px; }
.ad-card__top { display: flex; align-items: center; gap: 8px; }
.ad-card__top b { flex: 1; min-width: 0; font: 600 15.5px var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ad-card__tag { flex: none; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font: 500 11.5px var(--ui); color: rgba(255, 255, 255, 0.6); }
.ad-card__x { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.6); }
.ad-card__x svg { width: 13px; height: 13px; }
.ad-card p { margin: 0; font: 400 13.5px/1.45 var(--ui); color: rgba(255, 255, 255, 0.62); }
.ad-card__go { justify-self: start; display: inline-flex; align-items: center; gap: 6px; height: 38px; margin-top: 4px; padding: 0 16px; border-radius: 999px;
  background: #fff; color: #000; font: 600 13.5px var(--ui); }
.ad-card__go svg { width: 15px; height: 15px; }
.ad-card__go:active, .ad-card__media:active { transform: scale(0.97); }
.ad-note { margin: 0 4px; font: 400 12px/1.45 var(--ui); color: rgba(255, 255, 255, 0.4); }
.ad-note button { color: rgba(255, 255, 255, 0.7); font: inherit; text-decoration: underline; text-underline-offset: 2px; }
.drawer-ad[hidden] { display: none; }
.ad-card.is-list .ad-card__body { padding: 12px 14px 14px; }

/* Поле ввода: длинное название уровня не выталкивает кнопки */
.composer__row { min-width: 0; }
.effort-chip { min-width: 0; max-width: 46%; flex: 0 1 auto; }
.effort-chip [data-effort-name] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer__row > :not(.effort-chip):not(.composer__spacer) { flex: none; }

/* Задачи: ровное поле и круглая кнопка */
.tk-add { display: flex; align-items: center; gap: 10px; }
.tk-add input { flex: 1; min-width: 0; height: 52px; font-size: 15.5px; }
.tk-add button { flex: none; width: 52px; height: 52px; padding: 0; display: grid; place-items: center; }

/* Карточки разделов: плотные, без «стекла» поверх точек */
.side-screen .sec-card, .side-screen .sec-setup, body[data-side] .sec-setup, .side-screen .brief-card, .side-screen .brief-section, .sa-card {
  background: linear-gradient(180deg, #16161a, #0f0f12); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 26px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.side-screen .sec-card::before { opacity: 0.3; }
.side-screen .text-field { background: #0b0b0e; border-radius: 18px; }

/* Автоном: иконки примеров */
.auto-example__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.07); }
.auto-example__icon svg { width: 20px; height: 20px; }
.auto-badge__icon { width: 22px; height: 22px; flex: none; }

/* Настройки Brief */
.sa-kira img { height: 128px; animation: none; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)); }
.sa > p, .sa-card > p { font: 400 14px/1.5 var(--ui); color: rgba(255, 255, 255, 0.62); }

/* Проекты: без «WORKSPACE» и псевдографики, островки */
.workspace-eyebrow, .workspace-rule, .workspace-signature { display: none; }
.workspace-heading h1 { font: 700 26px/1.15 var(--ui); letter-spacing: -0.02em; }
.workspace-hero p, .workspace-summary, .workspace-path, .workspace-breadcrumb { font-family: var(--ui); letter-spacing: 0; text-transform: none; }
.workspace-section-label, .workspace-section-label span { font: 600 14px var(--ui); letter-spacing: 0; text-transform: none; color: #8a8a94; }
.project-card { border-radius: 24px; background: linear-gradient(180deg, #17171b, #111114); background-image: none; border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: none; }
.project-card:before { content: none; }
.project-card :is(b, strong, .project-name, small, span) { font-family: var(--ui); letter-spacing: 0; }
.project-file-list > * { border-radius: 18px; }
.workspace-return { border-radius: 999px; font-family: var(--ui); }
[data-overlay="workspace"] { background: radial-gradient(90% 45% at 100% 0%, rgba(150, 140, 200, 0.15), transparent 70%), radial-gradient(80% 45% at 0% 100%, rgba(120, 140, 190, 0.12), transparent 70%), #050507; }
/* Реклама — последней, после кнопок ответа */
.msg__body:has(> .ad-slot) { display: flex; flex-direction: column; }
.msg__body > .ad-slot { order: 10; }

/* ================= 01.11 (9): выход из чатов, белые плашки, пилюли, круглые галочки ================= */
/* Выход из списка чатов: страница уезжает влево, островки гаснут по очереди */
.drawer.is-closing .drawer__panel { animation: chats-out 0.34s cubic-bezier(0.4, 0, 0.2, 1) both; }
.drawer.is-closing .drawer__backdrop { animation: fade-out 0.34s ease both; }
.drawer.is-closing .drawer__scroll > * { animation: chats-item-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; }
.drawer.is-closing .drawer__scroll > :nth-child(n+3) { animation-delay: 0.04s; }
@keyframes chats-out { to { transform: translateX(-36%); opacity: 0; } }
@keyframes chats-item-out { to { transform: translateX(-24px); opacity: 0; } }

/* Плашки «Изображение» и «Автоном» в поле ввода: белые, скруглённые, уходят плавно */
.chat-image-mode, .auto-badge { display: flex; align-items: center; gap: 12px; margin: -4px -2px 10px; padding: 10px 10px 10px 14px; border-radius: 22px; background: #fff; color: #000; border: 0; box-shadow: none;
  animation: badge-in 0.34s cubic-bezier(0.2, 1.1, 0.35, 1) both; overflow: hidden; }
.chat-image-mode__icon, .auto-badge__icon { width: 24px; height: 24px; flex: none; color: #000; filter: none; }
.chat-image-mode > span, .auto-badge > span { flex: 1; min-width: 0; font: 600 15px var(--ui); color: #000; }
.chat-image-mode small, .auto-badge small { display: block; margin-top: 1px; font: 400 12.5px var(--ui); color: #6b6b72; }
.chat-image-mode > button, .auto-badge > button { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #ececef; border: 0; color: #000; }
.chat-image-mode > button svg, .auto-badge > button svg { width: 14px; height: 14px; }
.chat-image-mode .kemoji, .auto-badge .kemoji { display: none; }
.chat-image-mode.is-leaving, .auto-badge.is-leaving { animation: badge-out 0.26s cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
@keyframes badge-in { from { opacity: 0; transform: translateY(10px) scale(0.94); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } to { max-height: 80px; } }
@keyframes badge-out { from { max-height: 80px; } to { opacity: 0; transform: translateY(8px) scale(0.92); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; } }

/* Разделы: без кнопки меню, плашка шире и левее */
.side-bar { display: flex; align-items: center; gap: 10px; }
.side-bar .side-pill { flex: 1; min-width: 0; max-width: none; justify-content: space-between; padding-left: 18px; margin: 0; }
.side-bar .side-pill .bar__pill-text { align-items: flex-start; text-align: left; }

/* Free: закрытые модели приглушены */
.popover__list .model.is-locked { opacity: 0.4; }
.popover__list .model.is-locked .model-logo { filter: grayscale(1); }

/* Без Plus: белая кнопка покупки */
.plus-buy, .side-screen .plus-buy { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-top: 8px; border-radius: 999px; background: #fff; color: #000; border: 0; font: 600 16px var(--ui); box-shadow: none; }
.side-screen .sec-hero h2, .brief-intro-locked h2 { font: 700 24px/1.2 var(--ui); letter-spacing: -0.01em; }

/* Круглые аккуратные галочки везде */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 24px; height: 24px; flex: none; margin: 0; border-radius: 50%; border: 1.6px solid rgba(255, 255, 255, 0.32);
  background: transparent; display: inline-grid; place-content: center; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.15s; }
input[type="checkbox"]:checked { background: #fff center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-color: #fff; }
input[type="checkbox"]:active { transform: scale(0.9); }
.toggle-row { display: flex; align-items: center; gap: 12px; font: 500 15px var(--ui); }

/* Настройки Brief/Секретаря: варианты — пилюли с точками у выбранной */
.sa-field { display: grid; gap: 10px; }
.sa-field__label { font: 500 13.5px var(--ui); color: var(--muted); }
.sa-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sa-pill { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; min-height: 42px; padding: 0 18px; border-radius: 999px;
  background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.78); font: 500 14.5px var(--ui); cursor: pointer; transition: border-color 0.2s, color 0.2s; }
.sa-pill input { position: absolute; opacity: 0; pointer-events: none; }
.sa-pill .choice-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: none; border-radius: inherit; }
.sa-pill:has(input:checked) { color: #fff; border-color: rgba(255, 255, 255, 0.4); background: #060608; }
.sa-pill:has(input:checked) .choice-field { display: block; }
.sa-pill:active { transform: scale(0.96); }
.sa .source-search { width: 100%; height: 48px; padding: 0 18px; border-radius: 999px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.1); font: 400 15px var(--ui); color: #fff; }
.sa .source-heading { font: 500 13.5px var(--ui); color: var(--muted); letter-spacing: 0; text-transform: none; }

/* Секретарь: «Как Kira пишет за вас» по шагам */
.sw-top { margin: 4px 0 6px; }
.sw-step[hidden] { display: none; }
.sw-step { display: grid; gap: 12px; }
.sw-step.is-fwd > * { animation: pz-in 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sw-step.is-back > * { animation: pz-back 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
.sw-title { margin: 0; font: 700 21px var(--ui); letter-spacing: -0.01em; color: #fff; }
.sw-nav { display: flex; gap: 8px; margin-top: 14px; }
.sw-nav > * { flex: 1; justify-content: center; }
.sw-nav .sw-prev { flex: 0 0 34%; background: #0d0d10; color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); }
.sw-nav [hidden] { display: none; }

/* Уровень мышления: компактнее и симметрично */
.limits__menu.effort { width: min(292px, calc(100vw - 24px)); gap: 12px; padding: 14px; }
.effort .limits__head { justify-content: space-between; padding: 0 4px; font-size: 14.5px; }
.effort__slider { padding: 0 4px; }
.effort__slider .es { width: 100%; max-width: 100%; margin: 0; }
.effort__info { justify-content: center; text-align: left; padding: 10px 14px; gap: 12px; }

/* Текст рекламы — с переносами строк */
.ad-card p { white-space: pre-line; }
.effort__slider { justify-self: center; margin: 0 auto !important; padding: 0; }
.effort .limits__head, .effort__info { width: 100%; box-sizing: border-box; }

/* ================= 01.11 (10): первый запуск, настройки Brief, закрытые разделы ================= */
/* Первый запуск: неоднотонный фон, обычная Кира, пилюли с точками у выбранных */
.ob { background: radial-gradient(90% 45% at 100% 0%, rgba(150, 140, 200, 0.16), transparent 70%), radial-gradient(80% 45% at 0% 100%, rgba(120, 140, 190, 0.13), transparent 70%), #050507; }
.ob-bg { display: none; }
.ob-dots { gap: 5px; }
.ob-dots i { flex: 0 0 34px; width: 34px; height: 5px; border-radius: 5px; }
.ob-dots i.is-on { width: 34px; }
.ob-kira-img { width: 132px; height: auto; margin-bottom: 6px; filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.85)); }
.ob h1 { font: 800 32px/1.12 var(--ui); letter-spacing: -0.02em; }
.ob h2 { font: 800 28px/1.15 var(--ui); letter-spacing: -0.02em; }
.ob-sub, .ob-hero p { font: 400 15.5px/1.5 var(--ui); color: rgba(255, 255, 255, 0.62); }
.ob-step { display: inline-flex; align-items: baseline; font: 700 18px/1 var(--ui); color: rgba(255, 255, 255, 0.4); }
.ob-step b { font: 800 34px/1 var(--ui); color: #fff; }
.ob-chips button, .ob-styles button, .ob-seg button { position: relative; isolation: isolate; overflow: hidden; }
.ob-chips button { min-height: 44px; padding: 0 18px; border-radius: 999px; background: #121215; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); font: 500 15px var(--ui); box-shadow: none; }
.ob-chips button[aria-pressed="true"], .ob-styles button[aria-pressed="true"] { background: #060608; color: #fff; border-color: rgba(255, 255, 255, 0.42); box-shadow: none; }
.ob .choice-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; border-radius: inherit; pointer-events: none; animation: fade 0.3s ease both; }
.ob-styles { grid-template-columns: 1fr; gap: 8px; }
.ob-styles button { min-height: 52px; padding: 0 20px; border-radius: 999px; background: #121215; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.82); box-shadow: none; }
.ob-styles button .kemoji { display: none; }
.ob-styles b { font: 500 15.5px var(--ui); }
.ob-row { padding: 6px 6px 6px 16px; border-radius: 999px; background: #121215; border: 1px solid rgba(255, 255, 255, 0.08); }
.ob-row > span { font: 500 14.5px var(--ui); color: rgba(255, 255, 255, 0.75); }
.ob-seg { padding: 0; border: 0; gap: 4px; border-radius: 999px; }
.ob-seg button { min-height: 38px; padding: 0 14px; border-radius: 999px; font: 500 13.5px var(--ui); color: rgba(255, 255, 255, 0.6); background: transparent; border: 1px solid transparent; }
.ob-seg button[aria-pressed="true"] { background: #060608; color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.ob-field span { font: 500 13.5px var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); }
.ob-field input, .ob-field textarea { padding: 14px 18px; border-radius: 22px; background: #121215; border-color: rgba(255, 255, 255, 0.1); font: 400 15.5px var(--ui); }
.ob-field input { border-radius: 999px; }
.ob-field small { font: 400 12px var(--ui); right: 16px; }
.ob-back { width: 56px; height: 56px; border-radius: 50%; background: #121215; border: 1px solid rgba(255, 255, 255, 0.12); }
.ob-next { height: 56px; border-radius: 999px; font: 600 16.5px var(--ui); box-shadow: none; }
.ob-next:active { transform: scale(0.97); box-shadow: none; }

/* Закрытые разделы (без Plus): текст и кнопка — на карточке */
.side-screen .sec-hero:has(.plus-buy), .side-screen .brief-intro-locked { margin: 4px 16px 0; padding: 22px 20px 20px; border-radius: 26px; text-align: center;
  background: linear-gradient(180deg, #16161a, #0f0f12); border: 1px solid rgba(255, 255, 255, 0.07); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.side-screen .sec-hero:has(.plus-buy) p, .side-screen .brief-intro-locked p { font: 400 14.5px/1.5 var(--ui); color: rgba(255, 255, 255, 0.62); }

/* Настройки Brief: как у Секретаря */
.sa .assistant-fields { display: grid; gap: 16px; }
.sa .source-picks { max-height: none; overflow: visible; gap: 8px; }
.sa .source-picks > label { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.08); font: 500 14.5px var(--ui); color: rgba(255, 255, 255, 0.82); cursor: pointer; }
.sa .source-picks > label:has(input:checked) { color: #fff; border-color: rgba(255, 255, 255, 0.36); background: #070709; }
.sa .source-picks > label[hidden] { display: none; }
.sa textarea { width: 100%; min-height: 96px; padding: 14px 18px; border-radius: 22px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.1); font: 400 15.5px/1.45 var(--ui); color: #fff; resize: none; }
.sa-toggle-row { gap: 14px; padding: 14px 16px; border-radius: 22px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.08); }
.sa-toggle-row b { display: block; font: 600 15px var(--ui); } .sa-toggle-row small { display: block; margin-top: 2px; font: 400 12.5px var(--ui); color: var(--muted); }
.sa .btn--primary.sa-cta, .sa form .sa-cta { width: 100%; height: 54px; margin-top: 4px; border-radius: 999px; background: #fff; color: #000; font: 600 16px var(--ui); }
.sa .sa-ghost { width: 100%; height: 52px; }

/* Реклама: «нельзя скрыть» — лёгкое покачивание */
.ad-card.is-shake { animation: ad-shake 0.4s ease both; }
@keyframes ad-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.sa .source-picks > * { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px 0 14px; border-radius: 999px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.08); font: 500 14.5px var(--ui); }
.sa .source-picks > *:has(input:checked) { color: #fff; border-color: rgba(255, 255, 255, 0.36); background: #070709; }
.sa .source-picks > *[hidden] { display: none; }
.sa-toggle-row > span { display: grid; gap: 2px; }
.sa .assistant-fields .sa-toggle-row { display: flex; align-items: center; background: #0d0d10; }
.sa .source-search, .sa .source-search::placeholder, .sa input::placeholder, .sa textarea::placeholder { font-family: var(--ui); letter-spacing: 0; }
.ob-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; border-radius: 24px; }
.ob-row > span { padding-left: 6px; }
.ob-seg { width: 100%; }
.ob-seg button { flex: 1; }

/* ================= 01.11 (11): онбординг — точки, прокрутка; без «желе» ================= */
.ob .choice-field { display: block; }
.ob-dots { margin-bottom: 6px; }
.ob-stage { overflow: hidden; }
/* Страница сама прокручивается; центрируем через auto-отступы, чтобы высокий контент не уезжал вверх за край */
.ob-page { justify-content: flex-start; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; padding: 14px 2px 18px;
  -webkit-mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(transparent, #000 14px, #000 calc(100% - 18px), transparent); }
.ob-page::-webkit-scrollbar { display: none; }
.ob-page > :first-child { margin-top: auto; }
.ob-page > :last-child { margin-bottom: auto; }
.ob-page.is-out-left, .ob-page.is-out-right { pointer-events: none; animation-duration: 0.24s; }
.ob-chips button, .ob-styles button { animation-duration: 0.3s; }

/* Настройки Brief: несколько небольших карточек, источники — плиткой в две колонки */
.brief-form { display: grid; gap: 12px; }
.bf-card { display: grid; gap: 12px; }
.bf-card > .sa-label { margin: 0; }
.bf-card > p { margin: -6px 0 0; font: 400 13.5px/1.45 var(--ui); color: rgba(255, 255, 255, 0.55); }
.bf-card textarea { min-height: 84px; }
.sa .bf-toggle { padding: 0 0 12px; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 0; }
.bf-sub { margin: 0; }
.sa .bf-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sa .bf-sources > label.bf-src { display: flex; align-items: flex-start; gap: 10px; min-height: 0; padding: 12px; border-radius: 20px; background: #0d0d10; border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.sa .bf-sources > label.bf-src:has(input:checked) { border-color: rgba(255, 255, 255, 0.34); background: #070709; }
.sa .bf-sources > label.bf-src[hidden] { display: none; }
.bf-src input[type="checkbox"] { width: 20px; height: 20px; background-size: 12px; }
.bf-src span { display: grid; gap: 2px; min-width: 0; }
.bf-src b { font: 600 14px/1.25 var(--ui); color: #fff; overflow-wrap: anywhere; }
.bf-src small { font: 400 12px/1.3 var(--ui); color: rgba(255, 255, 255, 0.5); }
.bf-more { height: 44px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: #fff; font: 500 14px var(--ui); }
.bf-more:active { transform: scale(0.98); }
.bf-card .sa-pills { display: grid; grid-template-columns: repeat(4, 1fr); }
.bf-card .sa-pill { justify-content: center; padding: 0; }

/* Нижний запас 130px нужен только под закреплённую кнопку оплаты — иначе страница листается в пустоту */
.paywall__inner { padding-bottom: calc(32px + var(--safe-bottom)); }
.paywall:has(.paywall__cta) .paywall__inner { padding-bottom: 130px; }

/* Студия: подписи вкладок по центру; стили — круглые, «рулетка» с привязкой к центру */
.tk-tabs button { display: flex; align-items: center; justify-content: center; text-align: center; }
.st-styles { position: relative; gap: 4px; padding: 8px calc(50% - 39px) 10px; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.st-styles button { width: 78px; scroll-snap-align: center; transform-origin: 50% 40%; will-change: transform; font: 500 12px var(--ui); color: rgba(255, 255, 255, 0.6); }
.st-styles i { width: 62px; height: 62px; border-radius: 50%; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.st-styles [aria-checked="true"] i { border-color: #fff; transform: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.st-styles [aria-checked="true"] { color: #fff; font-weight: 600; }
.st-go { gap: 10px; font: 600 16px var(--ui); letter-spacing: 0; text-transform: none; }
.st-go svg { width: 20px; height: 20px; flex: none; }
.st-go .kemoji { display: none; }
.st-go { box-shadow: none; }

/* ================= 01.11 (12): источники, таблицы, скачивание, задачи ================= */
/* Источники веб-поиска — свёрнутым блоком под ответом */
.msrc { margin: 14px 0 4px; }
.msrc__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px 0 18px; border-radius: 18px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.09); color: #fff; font: 500 14.5px var(--ui); text-align: left; transition: background 0.2s, transform 0.12s; }
.msrc__btn:active { transform: scale(0.985); }
.msrc__btn span { flex: 1; }
.msrc__btn em { font: 600 12px var(--ui); font-style: normal; min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); }
.msrc__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1); }
.msrc.is-open .msrc__btn svg { transform: rotate(180deg); }
.msrc__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.35s cubic-bezier(0.2, 0.9, 0.3, 1); }
.msrc.is-open .msrc__wrap { grid-template-rows: 1fr; }
.md .msrc__list { min-height: 0; overflow: hidden; margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.msrc.is-open .msrc__list { padding-top: 8px; }
.md .msrc__list li { margin: 0; padding: 0; }
.md .msrc__list li::before { content: none; }
.md .msrc__list a { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.06); text-decoration: none; color: #fff; }
.msrc__list i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #2a2a33, #18181d); border: 1px solid rgba(255, 255, 255, 0.1); font: 700 13px var(--ui); font-style: normal; color: rgba(255, 255, 255, 0.85); }
.msrc__list span { display: grid; gap: 1px; min-width: 0; }
.msrc__list b { font: 500 14px/1.3 var(--ui); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.msrc__list small { font: 400 12px var(--ui); color: rgba(255, 255, 255, 0.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msrc-note { font: 400 13px/1.45 var(--ui); color: rgba(255, 255, 255, 0.5); }

/* Таблицы в ответах: Onest, островок с мягким градиентом */
.md-table { margin: 4px 0 1em; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.09); background: radial-gradient(120% 90% at 0% 0%, rgba(140, 140, 200, 0.09), transparent 60%), radial-gradient(90% 80% at 100% 100%, rgba(120, 150, 190, 0.07), transparent 60%), #111114; scrollbar-width: none; }
.md-table::-webkit-scrollbar { display: none; }
.md-table table { font: 400 14px/1.45 var(--ui); }
.md-table th, .md-table td { padding: 12px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.md-table th { font: 600 13px var(--ui); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.03); }
.md-table td:first-child { font-weight: 600; color: #fff; }
.md-table tbody tr:nth-child(even) td { background: transparent; }
.md-table td + td, .md-table th + th { border-left: 1px solid rgba(255, 255, 255, 0.05); }

/* Выход из списка чатов — обратная входу: элементы уезжают влево снизу вверх, затем страница */
.drawer.is-closing .drawer__panel { animation: chats-out2 0.36s cubic-bezier(0.4, 0, 0.6, 1) both; }
.drawer.is-closing .drawer__top { animation: chats-item-out 0.24s cubic-bezier(0.4, 0, 1, 1) 0.1s both; }
.drawer.is-closing .drawer__scroll > * { animation: chats-item-out 0.24s cubic-bezier(0.4, 0, 1, 1) both; }
.drawer.is-closing .drawer__scroll > :nth-child(n+5) { animation-delay: 0s; }
.drawer.is-closing .drawer__scroll > :nth-child(4) { animation-delay: 0.025s; }
.drawer.is-closing .drawer__scroll > :nth-child(3) { animation-delay: 0.05s; }
.drawer.is-closing .drawer__scroll > :nth-child(2) { animation-delay: 0.075s; }
.drawer.is-closing .drawer__scroll > :nth-child(1) { animation-delay: 0.1s; }
.drawer.is-closing .drawer__list > * { animation: chats-item-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes chats-out2 { 0%, 35% { opacity: 1; transform: none; } to { transform: translateX(-28%); opacity: 0; } }

/* Долгое нажатие не показывает адрес картинки/ссылки и не выделяет интерфейс; текст ответов и поля — выделяются */
body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
img, svg, canvas, a { -webkit-user-drag: none; -webkit-touch-callout: none; }
input, textarea, [contenteditable], .md, .msg__body { -webkit-user-select: text; user-select: text; }

/* Меню скачивания файла: шторка, Onest, линейные иконки */
.download-sheet { padding: 0 10px calc(10px + var(--safe-bottom)); backdrop-filter: blur(6px); }
.dl-card { position: relative; padding: 10px 18px 18px; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  background: radial-gradient(110% 80% at 0% 0%, rgba(150, 140, 200, 0.12), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(120, 150, 190, 0.08), transparent 60%), #141417; animation: dl-up 0.38s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes dl-up { from { transform: translateY(40px); opacity: 0; } }
.dl-grab { display: block; width: 38px; height: 4px; margin: 0 auto 14px; border-radius: 4px; background: rgba(255, 255, 255, 0.18); }
.dl-card svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dl-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.dl-file { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; }
.dl-file svg { width: 24px; height: 24px; margin-top: -8px; }
.dl-file em { position: absolute; bottom: 7px; font: 700 9px var(--ui); font-style: normal; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); }
.dl-title { flex: 1; min-width: 0; }
.download-sheet-card.dl-card h3 { margin: 0; font: 600 16px/1.3 var(--ui); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.download-sheet-card.dl-card p { margin: 3px 0 0; font: 400 13px var(--ui); color: rgba(255, 255, 255, 0.55); }
.dl-x { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.8); }
.dl-x svg { width: 16px; height: 16px; }
.dl-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 54px; margin-top: 8px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #fff; font: 600 15.5px var(--ui); transition: transform 0.12s; }
.dl-btn--primary { background: #fff; color: #000; border-color: #fff; }
.dl-btn:active { transform: scale(0.97); }
.dl-btn:disabled { opacity: 0.6; }
.download-sheet-card.dl-card small { margin-top: 14px; text-align: center; font: 400 12px var(--ui); color: rgba(255, 255, 255, 0.45); }
.sa .bf-more { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0 18px; text-align: center; }

/* Шапка страниц (Задачи, Студия, Что умеет Кира): плитка с линейной иконкой над заголовком */
.km-head { display: grid; justify-items: start; gap: 14px; padding: 4px 2px 2px; }
.km-head__tile { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 18px; color: #fff;
  background: radial-gradient(100% 100% at 0% 0%, rgba(160, 150, 220, 0.28), transparent 70%), #1a1a1f; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4); }
.km-head__tile svg { width: 24px; height: 24px; }
.km-head h1 { font: 700 28px/1.12 var(--ui); letter-spacing: -0.02em; }
.km-head p { margin-top: 6px; }
.km-head .kemoji { display: none; }

/* Напоминание: поля с подписями, «Когда» — ровные пилюли, кнопка отдельно */
.tk-remind { gap: 18px; padding: 18px 16px; border-radius: 26px; background: radial-gradient(120% 90% at 0% 0%, rgba(150, 140, 200, 0.1), transparent 60%), #141417; background-image: radial-gradient(120% 90% at 0% 0%, rgba(150, 140, 200, 0.1), transparent 60%); box-shadow: none; }
.tk-f { display: grid; gap: 10px; }
.tk-f > span { font: 500 13.5px var(--ui); color: rgba(255, 255, 255, 0.55); }
.tk-remind__text { height: 52px; padding: 0 18px; border-radius: 999px; background: #0c0c0f; border: 1px solid rgba(255, 255, 255, 0.1); font: 400 15.5px var(--ui); }
.tk-when { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tk-when button { position: relative; isolation: isolate; overflow: hidden; min-height: 44px; padding: 0 6px; border-radius: 999px; background: #0c0c0f; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); font: 500 13.5px var(--ui); }
.tk-when button[aria-pressed="true"] { background: #060608; color: #fff; border-color: rgba(255, 255, 255, 0.42); }
.tk-when .choice-field { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; border-radius: inherit; pointer-events: none; animation: fade 0.3s ease both; }
.tk-custom { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 8px 0 16px; border-radius: 999px; background: #0c0c0f; border: 1px solid rgba(255, 255, 255, 0.1); }
.tk-custom svg { width: 18px; height: 18px; flex: none; color: rgba(255, 255, 255, 0.6); }
.tk-custom > span { flex: none; font: 500 14px var(--ui); color: rgba(255, 255, 255, 0.75); }
.tk-custom .tk-when__custom { flex: 1; min-width: 0; padding: 8px 6px; border: 0; background: none; text-align: right; font: 500 14px var(--ui); color: #fff; }
.tk-remind__go { width: 100%; height: 54px; margin-top: 12px; gap: 10px; font: 600 16px var(--ui); letter-spacing: 0; box-shadow: none; }
.tk-remind__go svg { width: 20px; height: 20px; }
.tk-when button { display: flex; align-items: center; justify-content: center; text-align: center; }

/* Free: Brief и Секретарь в выборе режима приглушены, нажатие — подсказка про Kira Plus */
/* Недоступные режимы мутные: глушим содержимое, а не саму кнопку — у кнопки своя анимация появления */
body.is-free .mode-picker :is([data-section="brief"], [data-section="secretary"]) > *, .mode-picker [data-section="girl"] > * { opacity: 0.32; filter: saturate(0.2) blur(0.4px); }
.mode-picker .is-girl > :not(canvas) { opacity: 0.32; }
.mode-picker [data-section].is-denied { animation: ad-shake 0.4s ease both; }
.md-table td:first-child { white-space: nowrap; }

/* ================= 01.11 (13): просмотр работы, студия с орбами ================= */
.st-view { padding-top: calc(var(--safe-top) + 52px); }
.st-view.is-leaving { animation: st-bg-out 0.38s ease forwards; }
.st-view.is-leaving .st-view__card, .st-view.is-leaving .st-view__close { animation: fade-out 0.2s ease forwards; }
@keyframes st-bg-out { to { background-color: transparent; } }
.st-view__close { top: calc(var(--safe-top) + 4px); right: 12px; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.st-view__img { border-radius: 26px; }
.st-view__prompt { font: 400 15px/1.5 var(--ui); color: rgba(255, 255, 255, 0.85); }
.st-view__card > small { font: 400 12.5px var(--ui); color: rgba(255, 255, 255, 0.45); }
.st-view__acts { gap: 10px; margin-top: 4px; }
.st-view__acts .workspace-action, .st-edit__go { height: 52px; gap: 10px; border-radius: 999px; font: 600 15.5px var(--ui); letter-spacing: 0; text-transform: none; box-shadow: none; }
.st-view__acts .workspace-action:not(.workspace-action-primary) { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; }
.st-view__acts .workspace-action svg, .st-edit__go svg { width: 19px; height: 19px; }
.st-edit .st-label { font: 500 13.5px var(--ui); color: rgba(255, 255, 255, 0.55); }
.st-edit textarea { border-radius: 22px; font: 400 15px var(--ui); }

/* Студия: заголовок по центру, витрина-рулетка из орбов, поле ввода как в чате, навбар снизу */
.km-panel.is-studio .km-head { display: none; }
.km-panel.is-studio .km-inner { padding-top: calc(var(--safe-top) + 6px); padding-bottom: calc(110px + var(--safe-bottom)); gap: 0; }
.st-top { position: sticky; top: 0; z-index: 3; margin: 0 -12px 6px; padding: 10px 56px 14px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  background: linear-gradient(180deg, #000 70%, rgba(0, 0, 0, 0.85)); backdrop-filter: blur(12px); }
.st-top h1 { margin: 0; font: 600 18px/1.3 var(--ui); letter-spacing: -0.01em; }
.st-pane.is-in { animation: st-pane-in 0.36s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes st-pane-in { from { opacity: 0; transform: translateY(10px); } }

.st-show { margin: 8px -12px 0; }
.st-show .st-styles { gap: 0; margin: 0; padding: 18px calc(50% - 70px) 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.st-styles button { display: grid; justify-items: center; gap: 10px; }
.st-show .st-styles button { width: 140px; }
.st-orb { position: relative; display: block; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--a), var(--b)); transition: box-shadow 0.4s ease; }
.st-styles.has-orbs .st-orb { background: none; }
.st-show .st-orb { width: 118px; height: 118px; }
.st-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }
.st-orb::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 22px rgba(255, 255, 255, 0.22), inset 0 0 14px rgba(255, 255, 255, 0.12);
  opacity: 0; transform: scale(0.9); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.2, 1.2, 0.4, 1); pointer-events: none; }
.st-styles [aria-checked="true"] .st-orb::after { opacity: 1; transform: none; }
.st-styles [aria-checked="true"] .st-orb { box-shadow: none; }
.st-name { font: 500 13px var(--ui); color: rgba(255, 255, 255, 0.55); transition: color 0.3s; }
.st-show .st-name { font-size: 15px; }
.st-styles [aria-checked="true"] .st-name { color: #fff; font-weight: 600; }
.st-pager { display: flex; justify-content: center; gap: 6px; margin: 10px 0 2px; }
.st-pager i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: background 0.3s, transform 0.3s; }
.st-pager i.is-on { background: #fff; transform: scale(1.25); }

.st-h { margin: 22px 2px 12px; font: 600 21px/1.25 var(--ui); letter-spacing: -0.01em; }
.st-compose { display: grid; gap: 6px; padding: 14px 10px 10px 18px; border-radius: 28px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: radial-gradient(120% 120% at 0% 0%, rgba(150, 140, 200, 0.1), transparent 60%), #151518; transition: border-color 0.25s; }
.st-compose:focus-within { border-color: rgba(255, 255, 255, 0.22); }
.st-compose .st-prompt { width: 100%; min-height: 48px; max-height: 180px; padding: 0 8px 0 0; border: 0; background: none; resize: none; color: #fff; font: 400 16px/1.45 var(--ui); outline: none; box-shadow: none; }
.st-compose__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-compose__row > span { font: 400 12px var(--ui); color: rgba(255, 255, 255, 0.4); }
.st-compose .st-go { flex: none; width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.6); transition: background 0.25s, color 0.25s, transform 0.12s; }
.st-compose .st-go:active { transform: scale(0.92); }
.st-compose .st-go svg { width: 20px; height: 20px; }
.st-compose .st-go:disabled { opacity: 0.5; }

.st-nav { position: fixed; z-index: 4; left: 50%; bottom: calc(14px + var(--safe-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; width: min(calc(100% - 48px), 340px); padding: 5px; border-radius: 999px;
  background: rgba(28, 28, 32, 0.86); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.5); }
.st-nav button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; color: rgba(255, 255, 255, 0.6); font: 600 14.5px var(--ui); transition: color 0.3s; }
.st-nav button[aria-selected="true"] { color: #000; }
.st-nav svg { width: 19px; height: 19px; }
.st-nav__ink { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: #fff; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1); }
.st-nav[data-at="gallery"] .st-nav__ink { transform: translateX(100%); }
.st-edit .st-styles { padding-inline: calc(50% - 46px); }
.st-edit .st-styles button { width: 92px; }
.km-panel.is-studio .km-body, .st-pane { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.st-compose .st-prompt { margin: 0; padding: 0 6px 0 2px; text-indent: 0; border-radius: 0; min-height: 48px; }
.st-show .st-styles { padding-inline: calc(50% - 62px); }
.st-show .st-styles button { width: 124px; }
.st-show .st-orb::after { inset: -6px; }
.st-count { font: 500 13.5px var(--ui); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.5); }

/* ================= 01.11 (14): шапка-навбар студии, свечение кнопки, карточка «Проверьте идею» ================= */
.st-top { margin: 0 -12px 4px; padding: 6px 16px 10px; border: 0; background: none; backdrop-filter: none; display: flex; justify-content: center; pointer-events: none; }
.st-top__pill { pointer-events: auto; display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border-radius: 999px;
  background: rgba(28, 28, 32, 0.86); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); }
.st-top__pill h1 { margin: 0; font: 600 16px var(--ui); letter-spacing: -0.01em; }

/* Кнопка отправки: радужная кайма цветами орба (стиль) или белый луч по краю (без стиля) */
@property --st-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes st-spin { to { --st-ang: 360deg; } }
.st-compose .st-go { position: relative; isolation: isolate; border: 2px solid transparent; color: #fff; background: linear-gradient(#0c0d0e, #0c0d0e) padding-box, rgba(255, 255, 255, 0.12) border-box; }
.st-compose .st-go::before { content: ""; position: absolute; inset: -3px; z-index: -1; border-radius: 50%; opacity: 0.55; filter: blur(9px); transition: opacity 0.3s; pointer-events: none; }
.st-compose.has-text .st-go { color: #fff; }
.st-compose.has-text .st-go::before { opacity: 1; }
[data-glow="rainbow"] .st-go { background: linear-gradient(#0c0d0e, #0c0d0e) padding-box, conic-gradient(from var(--st-ang), var(--g1), var(--g2), color-mix(in oklab, var(--g1) 50%, #fff), var(--g2), var(--g1)) border-box; animation: st-spin 3s linear infinite; }
[data-glow="rainbow"] .st-go::before { background: conic-gradient(from var(--st-ang), var(--g1), var(--g2), var(--g1)); animation: st-spin 3s linear infinite; }
[data-glow="neon"] .st-go { background: linear-gradient(#050505, #050505) padding-box, conic-gradient(from var(--st-ang), rgba(255, 255, 255, 0.1) 0deg, rgba(255, 255, 255, 0.1) 280deg, rgba(255, 255, 255, 0.95) 340deg, rgba(255, 255, 255, 0.1) 360deg) border-box; animation: st-spin 3s linear infinite; box-shadow: 0 0 22px -8px rgba(255, 255, 255, 0.45); }
[data-glow="neon"] .st-go::before { inset: 0; background: rgba(255, 255, 255, 0.25); filter: blur(12px); opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .st-compose .st-go, .st-compose .st-go::before { animation: none; } }

/* Карточка «Проверьте идею» и кнопки результата — Onest, пилюли, линейные иконки */
.line-ic { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.image-offer { padding: 18px; border-radius: 26px; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  background: radial-gradient(120% 90% at 0% 0%, rgba(150, 140, 200, 0.12), transparent 60%), #141417; animation: io-in 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
@keyframes io-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.io-head { display: flex; align-items: center; gap: 8px; font: 500 13.5px var(--ui); color: rgba(255, 255, 255, 0.55); }
.io-head .line-ic { width: 17px; height: 17px; }
.image-offer h3 { margin: 12px 0 6px; font: 700 19px/1.25 var(--ui); letter-spacing: -0.01em; }
.image-offer > p { margin: 0; font: 400 15px/1.5 var(--ui); color: rgba(255, 255, 255, 0.82); }
.image-offer .image-cost { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.07); font: 400 13px var(--ui); color: rgba(255, 255, 255, 0.5); }
.image-offer .image-cost .line-ic { width: 17px; height: 17px; }
.image-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.image-confirm-actions .workspace-action, .grid-reveal-host ~ .workspace-action, .chat-image-result + .workspace-action { display: flex; align-items: center; justify-content: center; gap: 9px; height: 50px; border-radius: 999px; font: 600 15px var(--ui); letter-spacing: 0; text-transform: none; box-shadow: none; }
.image-confirm-actions .workspace-action:not(.workspace-action-primary) { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #fff; }
.grid-reveal-host ~ .workspace-action, .chat-image-result + .workspace-action { width: 100%; margin-top: 10px; }
.grid-reveal-host { animation: io-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.st-compose .st-prompt { scrollbar-width: none; overflow-wrap: anywhere; } .st-compose .st-prompt::-webkit-scrollbar { display: none; }

/* ================= 01.11 (15): плавное свечение, лимиты, статус генерации ================= */
/* Цвета свечения — зарегистрированные свойства, поэтому смена стиля перетекает плавно */
@property --g1 { syntax: "<color>"; initial-value: #ffffff; inherits: true; }
@property --g2 { syntax: "<color>"; initial-value: #ffffff; inherits: true; }
.st-pane[data-glow] { transition: --g1 0.7s ease, --g2 0.7s ease; }
/* «Создать» в карточке подтверждения — та же бегущая кайма и свечение */
[data-glow] [data-image-yes] { position: relative; isolation: isolate; border: 2px solid transparent; animation: st-spin 3s linear infinite; }
[data-glow="rainbow"] [data-image-yes] { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--st-ang), var(--g1), var(--g2), color-mix(in oklab, var(--g1) 50%, #fff), var(--g2), var(--g1)) border-box; }
[data-glow="neon"] [data-image-yes] { background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--st-ang), rgba(255, 255, 255, 0.2) 0deg, rgba(255, 255, 255, 0.2) 280deg, #fff 340deg, rgba(255, 255, 255, 0.2) 360deg) border-box; box-shadow: 0 0 26px -8px rgba(255, 255, 255, 0.55); }
[data-glow] [data-image-yes]::before { content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: inherit; filter: blur(12px); opacity: 0.75; pointer-events: none; animation: st-spin 3s linear infinite; }
[data-glow="rainbow"] [data-image-yes]::before { background: conic-gradient(from var(--st-ang), var(--g1), var(--g2), var(--g1)); }
[data-glow="neon"] [data-image-yes]::before { background: rgba(255, 255, 255, 0.3); opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { [data-glow] [data-image-yes], [data-glow] [data-image-yes]::before { animation: none; } }

/* Статус во время генерации — тихая стеклянная пилюля с пульсирующей точкой */
.kira-grid-caption { min-height: 0 !important; padding: 7px 14px 7px 12px !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(20, 20, 24, 0.72) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: none !important; display: inline-flex !important; align-items: center; gap: 8px; }
.kira-grid-caption::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: cap-dot 1.4s ease-in-out infinite; }
@keyframes cap-dot { 50% { opacity: 0.25; transform: scale(0.7); } }
.kira-grid-caption-text { font: 500 13px var(--ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: rgba(255, 255, 255, 0.85) !important; }

/* «Мои лимиты»: шапка по центру, свой оттенок фона, плитки статистики, без лишних анимаций */
[data-overlay="usage"] { background: radial-gradient(90% 45% at 100% 0%, rgba(110, 165, 200, 0.15), transparent 70%), radial-gradient(80% 45% at 0% 100%, rgba(120, 120, 200, 0.12), transparent 70%), #050507; }
.usage-hero { display: grid; justify-items: center; gap: 14px; text-align: center; padding-top: 8px; }
.usage-hero__tile { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 22px; color: #fff;
  background: radial-gradient(100% 100% at 0% 0%, rgba(120, 175, 210, 0.3), transparent 70%), #1a1a1f; border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.usage-hero__tile .line-ic { width: 30px; height: 30px; }
.usage-hero h1 { font: 700 32px/1.1 var(--ui); letter-spacing: -0.02em; }
.usage-plan { justify-content: center; }
.usage-card__top b { display: inline-flex; align-items: center; gap: 8px; }
.usage-card__top b .line-ic { width: 17px; height: 17px; color: rgba(255, 255, 255, 0.7); }
.usage-features { gap: 8px; }
.usage-features span { display: grid; gap: 2px; padding: 14px 6px 12px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); font: 400 12px/1.3 var(--ui); color: rgba(255, 255, 255, 0.55); }
.usage-features b { margin: 0; font: 700 22px var(--ui); letter-spacing: -0.01em; color: #fff; }
.usage-card { animation: none; contain: layout paint; }
.usage-screen .meter--full i { animation: meter-fill 0.8s cubic-bezier(0.2, 0.9, 0.3, 1) 0.1s both; }
/* Первая буква не обрезается: запас слева внутри поля, без горизонтальной прокрутки */
.st-compose { padding-left: 12px; }
.st-compose .st-prompt { padding: 0 6px 0 6px; overflow-x: hidden; }
.st-compose__row { padding-left: 6px; }

/* ================= 01.11 (16): цитаты, «Думаю», задачи ================= */
/* Цитаты в тексте: маленький номерок-ссылка, подсказка с названием источника */
.cite { position: relative; display: inline; }
.md .cite__mark, .cite__mark { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 3px; margin: 0 2px; border-radius: 5px; background: #3a3a3f; color: #b5b5b8; font: 600 10px/1 var(--ui); vertical-align: 4px; text-decoration: none; transition: background 0.15s, color 0.15s; }
a.cite__mark:active, a.cite__mark:hover { background: #55555c; color: #fff; }
.cite__tip { position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 30; max-width: 220px; padding: 5px 7px; border-radius: 7px; font: 500 11px/1.25 var(--ui); color: rgba(255, 255, 255, 0.92); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; opacity: 0; filter: blur(2px); transform: translateX(-50%) translateY(1px); transition: opacity 0.15s ease, transform 0.15s ease, filter 0.15s ease; }
.cite:hover .cite__tip, .cite:focus-within .cite__tip { opacity: 1; filter: blur(0); transform: translateX(-50%); }
/* Список источников под ответом — строки «номер · название · сайт ↗» */
.md .msrc__list { display: grid; gap: 4px; min-height: 0; overflow: hidden; }
.msrc.is-open .msrc__list { padding: 10px 4px 2px; }
.md .cite-ref { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 2px; font: 400 13px/18px var(--ui); color: #8e8e93; text-decoration: none; }
.cite-ref .cite__mark { margin: 0; vertical-align: 0; }
.cite-ref__label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f5f5f5; font-weight: 450; }
.cite-ref__sep { flex: none; color: #737373; }
.cite-ref__host { flex: none; white-space: nowrap; transition: color 0.16s; }
.cite-ref__arrow { display: inline-flex; flex: none; color: #737373; opacity: 0.6; transform: rotate(45deg); }
.cite-ref__arrow svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cite-ref:active .cite-ref__host { color: #f5f5f5; }

/* «Думаю»: орб + переливающаяся подпись (вместо сетки точек) */
.think { gap: 8px; padding: 6px 0; }
.think__label { font: 500 14px/18px var(--ui) !important; letter-spacing: 0 !important; text-transform: none !important; color: transparent !important; -webkit-text-fill-color: transparent;
  background: linear-gradient(90deg, #a1a1a1 0%, #a1a1a1 30%, rgba(161, 161, 161, 0.4) 45%, rgba(161, 161, 161, 0.4) 55%, #a1a1a1 70%, #a1a1a1 100%); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; animation: label-shine 2.25s cubic-bezier(0.25, 0.1, 0.25, 1) infinite; }
@keyframes label-shine { 0%, 18% { background-position: 100% 0; } 82%, 100% { background-position: 0% 0; } }
.think__effort { display: none; }
.korb { position: relative; display: block; flex: none; width: 20px; height: 20px; overflow: hidden; contain: strict; color: #f5f5f5; }
.korb--s2 i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.2; translate: 6.5px 6.5px; animation: orb-wave 1.7s cubic-bezier(0.66, 0, 0.34, 1) infinite both; }
.korb--s2 { zoom: 0.714; width: 28px; height: 28px; }
@keyframes orb-wave { 0% { opacity: 0.2; transform: scale(1); } 28% { opacity: 1; transform: scale(1.18); } 56%, 100% { opacity: 0.2; transform: scale(1); } }
.korb--b2 i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: currentColor; animation: orb-revolve 3.3s linear infinite both; }
.korb--b2 i:nth-child(2) { animation-delay: -1.1s; } .korb--b2 i:nth-child(3) { animation-delay: -2.2s; }
@keyframes orb-revolve { 0% { opacity: 1; filter: blur(0); transform: rotate(0deg) translateY(4.6px) scale(1); } 100% { opacity: 1; filter: blur(0); transform: rotate(360deg) translateY(4.6px) scale(1); } 25% { opacity: 0.55; filter: blur(1px); transform: rotate(90deg) translateY(4.6px) scale(0.82); }
  50% { opacity: 0.28; filter: blur(1.7px); transform: rotate(180deg) translateY(4.6px) scale(0.66); } 75% { opacity: 0.55; filter: blur(1px); transform: rotate(270deg) translateY(4.6px) scale(0.82); } }
@media (prefers-reduced-motion: reduce) { .korb i, .think__label { animation: none !important; } .korb--s2 i { opacity: 0.6; } }
/* Задачи: тот же каркас, что у студии */
.st-nav[data-at="reminders"] .st-nav__ink { transform: translateX(100%); }
.tk-pane { display: grid; gap: 12px; min-width: 0; }
.tk-pane.is-in { animation: st-pane-in 0.36s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.km-panel.is-studio .km-glyphs { display: none; }
.st-nav button span { white-space: nowrap; }
/* Студия без Plus — карточка в новом стиле */
.st-locked--card { display: grid; justify-items: center; gap: 12px; margin-top: 18vh; padding: 26px 20px 20px; border-radius: 28px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(120% 90% at 0% 0%, rgba(150, 140, 200, 0.12), transparent 60%), #141417; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45); }
.st-locked--card .km-head__tile { width: 58px; height: 58px; }
.st-locked--card .km-head__tile svg { width: 26px; height: 26px; }
.st-locked--card h3 { margin: 4px 0 0; font: 700 22px/1.2 var(--ui); letter-spacing: -0.01em; }
.st-locked--card p { margin: 0; font: 400 14.5px/1.5 var(--ui); color: rgba(255, 255, 255, 0.6); }
.st-locked--card .workspace-action { width: 100%; height: 54px; margin-top: 6px; border-radius: 999px; font: 600 16px var(--ui); letter-spacing: 0; text-transform: none; box-shadow: none; }
.md .msrc__list a.cite-ref { padding: 6px 2px; border: 0; border-radius: 0; background: none; gap: 7px; }
.brief-paragraph .cite__mark { vertical-align: 3px; }

/* ================= 01.11 (17): номерки, файлы, кнопки под ответом, ПК ================= */
.cite__mark { white-space: nowrap; flex: none; }
/* Файл в ответе Киры: островок с градиентом, плитка-иконка в цвет типа, белая круглая кнопка */
.file-card { gap: 14px; padding: 10px 12px 10px 10px; border-radius: 22px; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: none;
  background: radial-gradient(120% 140% at 0% 0%, rgba(150, 140, 200, 0.1), transparent 60%), #151518; transition: transform 0.12s, border-color 0.2s; }
.file-card:active { transform: scale(0.98); box-shadow: none; }
.file-card__icon { --t: #8fa8ff; width: 48px; height: 52px; gap: 0; border-radius: 15px; color: var(--t); background: color-mix(in srgb, var(--t) 16%, #1b1b20); border: 1px solid color-mix(in srgb, var(--t) 28%, transparent); }
.file-card__icon::before { content: none; }
.file-card__icon svg { width: 21px; height: 21px; margin-top: -9px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.file-card__icon i { bottom: 6px; font: 700 9px var(--ui); letter-spacing: 0.04em; color: color-mix(in srgb, var(--t) 85%, #fff); }
.file-card[data-ext="pptx"] .file-card__icon, .file-card[data-ext="ppt"] .file-card__icon { --t: #ff9f6e; background: color-mix(in srgb, #ff9f6e 16%, #1b1b20); }
.file-card[data-ext="pdf"] .file-card__icon { --t: #ff7a7a; background: color-mix(in srgb, #ff7a7a 16%, #1b1b20); }
.file-card[data-ext="docx"] .file-card__icon, .file-card[data-ext="doc"] .file-card__icon { --t: #8fa8ff; background: color-mix(in srgb, #8fa8ff 16%, #1b1b20); }
.file-card[data-ext="xlsx"] .file-card__icon, .file-card[data-ext="csv"] .file-card__icon { --t: #6fd99a; background: color-mix(in srgb, #6fd99a 16%, #1b1b20); }
.file-card__info b { font: 600 15px/1.3 var(--ui); letter-spacing: -0.01em; }
.file-card__info small { font: 400 12.5px var(--ui); letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.5); }
.file-card__dl { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #000; box-shadow: none; }
.file-card__dl svg { width: 19px; height: 19px; }

/* Кнопки «Короче / Подробнее / Модель» — пилюли с мягким неоднотонным фоном */
.msg__tools .qa-btn--text { height: 34px; width: auto; padding: 0 14px 0 11px; gap: 7px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); font: 500 13px var(--ui);
  background: radial-gradient(120% 160% at 0% 0%, rgba(150, 140, 200, 0.16), transparent 60%), radial-gradient(100% 140% at 100% 100%, rgba(120, 150, 190, 0.1), transparent 60%), #17171b; }
.qa-btn--text:active { transform: scale(0.95); background: radial-gradient(120% 160% at 0% 0%, rgba(150, 140, 200, 0.24), transparent 60%), #1d1d22; }
.qa-btn--text svg { width: 15px; height: 15px; opacity: 0.8; }
.msg__tools .qa-btn--text { margin-right: 4px; }
.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* ================= Kira Girl — переписка в стиле iMessage ================= */
body.girl-on .mode-picker [data-section="girl"] > *, body.girl-on .mode-picker .is-girl > :not(canvas) { opacity: 1; filter: none; }
.ig { --ig-blue: #0a84ff; --ig-gray: #26262a; --ig-font: -apple-system, "SF Pro Text", BlinkMacSystemFont, var(--ui), system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 160; display: flex; flex-direction: column; background: #000; color: #fff; font: 400 17px/1.3 var(--ig-font); letter-spacing: -0.01em; }
.ig[hidden] { display: none; }
.ig.is-in { animation: ig-push 0.42s cubic-bezier(0.2, 0.9, 0.25, 1) both; }
.ig.is-out { animation: ig-pop 0.36s cubic-bezier(0.4, 0, 0.6, 1) both; }
@keyframes ig-push { from { transform: translateX(100%); } }
@keyframes ig-pop { to { transform: translateX(100%); } }
body.girl-open { overflow: hidden; }

/* Шапка: аватар по центру, имя, статус — полупрозрачное стекло */
.ig-head { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 56px 1fr 56px; align-items: start; padding: calc(var(--safe-top) + 6px) 4px 8px;
  background: rgba(22, 22, 24, 0.78); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border-bottom: 0.5px solid rgba(255, 255, 255, 0.12); }
.ig-back { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ig-blue); margin-top: 8px; }
.ig-back svg { width: 12px; height: 21px; }
.ig-who { display: grid; justify-items: center; gap: 2px; text-align: center; }
.ig-ava { position: relative; width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(180deg, #a5a5ad, #6e6e76); }
.ig-ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 18%; background: #1c1c1f; }
.ig-dot { position: absolute; right: 1px; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: #32d74b; border: 2.5px solid #161618; transform: scale(0); transition: transform 0.3s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ig.is-online .ig-dot { transform: scale(1); }
.ig-who b { margin-top: 3px; font: 500 12px var(--ig-font); color: #fff; }
.ig-status { font: 400 11px var(--ig-font); color: rgba(235, 235, 245, 0.6); }

/* Лента */
.ig-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--safe-top) + 112px) 12px 10px; scrollbar-width: none; }
.ig-list::-webkit-scrollbar { display: none; }
.ig-items { display: flex; flex-direction: column; }
.ig-time { align-self: center; margin: 14px 0 8px; font: 500 11px var(--ig-font); color: rgba(235, 235, 245, 0.55); }
.ig-time:first-child { margin-top: 4px; }
.ig-row { display: flex; flex-direction: column; max-width: 78%; margin-top: 2px; }
.ig-row.is-tail { margin-bottom: 8px; }
.ig-row.is-me { align-self: flex-end; align-items: flex-end; }
.ig-row.is-her { align-self: flex-start; align-items: flex-start; }
.ig-bubble { position: relative; padding: 7px 12px 8px; border-radius: 18px; background: var(--ig-gray); white-space: pre-wrap; overflow-wrap: anywhere; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: transform 0.18s ease, filter 0.18s; }
.is-me .ig-bubble { background: var(--ig-blue); }
.ig-bubble.is-pressing { transform: scale(0.96); filter: brightness(1.15); }
/* Хвостики пузыря — как в iMessage */
.is-tail .ig-bubble::before, .is-tail .ig-bubble::after { content: ""; position: absolute; bottom: 0; height: 20px; }
.is-me.is-tail .ig-bubble::before { right: -7px; width: 20px; background: var(--ig-blue); border-bottom-left-radius: 16px 14px; }
.is-me.is-tail .ig-bubble::after { right: -26px; width: 26px; background: #000; border-bottom-left-radius: 10px; }
.is-her.is-tail .ig-bubble::before { left: -7px; width: 20px; background: var(--ig-gray); border-bottom-right-radius: 16px 14px; }
.is-her.is-tail .ig-bubble::after { left: -26px; width: 26px; background: #000; border-bottom-right-radius: 10px; }
.ig-bubble.has-photo { width: min(320px, 72vw); max-width: 100%; padding: 0; overflow: hidden; background: transparent; }
.ig-bubble.has-photo span { display: block; padding: 7px 12px 8px; background: var(--ig-gray); }
.is-me .ig-bubble.has-photo span { background: var(--ig-blue); }
.ig-bubble.has-photo::before, .ig-bubble.has-photo::after { content: none !important; }
.ig-photo { display: block; width: 100%; min-height: 120px; max-height: 320px; object-fit: cover; border-radius: 18px; background: #1c1c1f; cursor: zoom-in; }
.ig-bubble.has-photo:not(.is-photo-only) .ig-photo { border-radius: 18px 18px 4px 4px; }
.ig-replied { max-width: 100%; margin: 4px 6px 2px; padding: 5px 10px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 13px; color: rgba(235, 235, 245, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Тапбэк в углу пузыря */
.ig-tap { position: absolute; top: -14px; display: grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px; border-radius: 14px; font-style: normal; font-size: 14px; line-height: 1; border: 2px solid #000; animation: ig-tap 0.42s cubic-bezier(0.2, 1.5, 0.4, 1) both; }
.is-her .ig-tap { right: -12px; } .is-me .ig-tap { left: -12px; }
.ig-tap.is-mine { background: var(--ig-blue); } .ig-tap.is-hers { background: #3a3a3e; }
@keyframes ig-tap { from { transform: scale(0.2); opacity: 0; } }
.ig-row .ig-bubble:has(.ig-tap) { margin-top: 12px; }
.ig-receipt { align-self: flex-end; margin: -4px 4px 8px; font: 500 11px var(--ig-font); color: rgba(235, 235, 245, 0.55); }
.ig-row.is-pop.is-her .ig-bubble { transform-origin: 0 100%; animation: ig-in 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
@keyframes ig-in { from { transform: scale(0.6); opacity: 0; } }
/* «печатает…» — серый пузырь с тремя точками */
.ig-typing { display: inline-flex; gap: 4px; width: fit-content; margin: 2px 0 8px; padding: 12px 14px; border-radius: 18px; background: var(--ig-gray); transform-origin: 0 100%; }
.ig-typing.is-pop { animation: ig-in 0.4s cubic-bezier(0.2, 1.3, 0.4, 1) both; }
.ig-typing[hidden] { display: none; }
.ig-typing i { width: 8px; height: 8px; border-radius: 50%; background: rgba(235, 235, 245, 0.55); animation: ig-dots 1.3s ease-in-out infinite; }
.ig-typing i:nth-child(2) { animation-delay: 0.16s; } .ig-typing i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ig-dots { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* Поле ввода */
.ig-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px calc(8px + var(--safe-bottom)); background: rgba(22, 22, 24, 0.82); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.ig-plus { flex: none; width: 34px; height: 34px; margin-bottom: 1px; display: grid; place-items: center; border-radius: 50%; background: #2c2c30; color: rgba(235, 235, 245, 0.7); }
.ig-plus svg { width: 18px; height: 18px; }
.ig-field { flex: 1; min-width: 0; border: 1px solid #3a3a3e; border-radius: 19px; overflow: hidden; background: #000; }
.ig-quote { display: flex; align-items: center; gap: 6px; padding: 7px 8px 0 14px; font-size: 13px; color: rgba(235, 235, 245, 0.6); }
.ig-quote[hidden] { display: none; }
.ig-quote span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 2px solid var(--ig-blue); padding-left: 8px; }
.ig-quote button { width: 22px; height: 22px; display: grid; place-items: center; color: rgba(235, 235, 245, 0.6); }
.ig-quote svg { width: 14px; height: 14px; }
.ig-input { display: flex; align-items: flex-end; }
.ig-input textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 140px; padding: 8px 6px 8px 14px; border: 0; outline: 0; resize: none; background: none; color: #fff; font: 400 17px/20px var(--ig-font); scrollbar-width: none; }
.ig-input textarea::placeholder { color: rgba(235, 235, 245, 0.35); }
.ig-send { flex: none; width: 28px; height: 28px; margin: 4px; display: grid; place-items: center; border-radius: 50%; background: var(--ig-blue); color: #fff; transform: scale(0); transition: transform 0.24s cubic-bezier(0.2, 1.4, 0.4, 1); }
.ig.has-text .ig-send { transform: scale(1); }
.ig-send svg { width: 16px; height: 16px; }

/* Долгое нажатие: размытый фон, поднятое сообщение, тапбэки и действия */
.ig-menu { position: fixed; inset: 0; z-index: 5; background: rgba(0, 0, 0, 0); transition: background 0.28s ease, backdrop-filter 0.28s ease, -webkit-backdrop-filter 0.28s ease; }
.ig-menu.is-open { background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); }
.ig-menu.is-closing { background: rgba(0, 0, 0, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
.ig-lifted { position: fixed; margin: 0; max-width: none; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.ig-lifted::before, .ig-lifted::after { content: none !important; }
.ig-tapbar { position: fixed; display: flex; gap: 2px; padding: 6px; border-radius: 26px; background: rgba(44, 44, 48, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  opacity: 0; transform: scale(0.6) translateY(14px); transform-origin: 20% 100%; transition: opacity 0.22s ease, transform 0.36s cubic-bezier(0.2, 1.3, 0.4, 1); }
.ig-tapbar[hidden] { display: none; }
.ig-tapbar.is-me { transform-origin: 80% 100%; }
.ig-menu.is-open .ig-tapbar { opacity: 1; transform: none; }
.ig-tapbar button { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1), background 0.2s; }
.ig-menu.is-open .ig-tapbar button { animation: ig-tapin 0.38s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(var(--i) * 28ms + 60ms); }
@keyframes ig-tapin { from { transform: scale(0.3); opacity: 0; } }
.ig-tapbar button.is-on { background: var(--ig-blue); }
.ig-tapbar button:active, .ig-tapbar button.is-picked { transform: scale(1.35); }
.ig-acts { position: fixed; width: 230px; border-radius: 14px; overflow: hidden; background: rgba(44, 44, 48, 0.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: scale(0.8); transform-origin: 0 0; transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ig-acts.is-me { transform-origin: 100% 0; }
.ig-menu.is-open .ig-acts { opacity: 1; transform: none; }
.ig-acts button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 16px; color: #fff; font: 400 17px var(--ig-font); text-align: left; }
.ig-acts button + button { border-top: 0.5px solid rgba(255, 255, 255, 0.12); }
.ig-acts button:active { background: rgba(255, 255, 255, 0.08); }
.ig-acts svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .ig, .ig-row, .ig-bubble, .ig-tap, .ig-typing, .ig-typing i, .ig-tapbar, .ig-acts { animation: none !important; transition: none !important; } }

/* Kira Girl: пузырь без лишних строк, поднятая копия того же размера и цвета, фото-превью, лист действий */
.ig-bubble { box-sizing: border-box; white-space: normal; }
.ig-text { white-space: pre-wrap; }
.ig-lifted { box-sizing: border-box; max-width: none; }
.ig-lifted.is-mine-bubble { background: var(--ig-blue); }
.ig-lifted.is-mine-bubble.has-photo { background: transparent; }
.ig-lifted.is-mine-bubble.has-photo .ig-text { background: var(--ig-blue); }
.ig-more { width: 44px; height: 44px; margin-top: 8px; justify-self: end; display: grid; place-items: center; color: var(--ig-blue); }
.ig-more svg { width: 22px; height: 22px; fill: currentColor; }
.ig-attach { position: relative; width: fit-content; margin: 8px 8px 0 10px; }
.ig-attach[hidden] { display: none; }
.ig-attach img { display: block; max-width: 140px; max-height: 140px; border-radius: 14px; animation: ig-in 0.35s cubic-bezier(0.2, 1.2, 0.4, 1) both; transform-origin: 0 100%; }
.ig-attach button { position: absolute; top: 5px; right: 5px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.65); color: #fff; }
.ig-attach button svg { width: 12px; height: 12px; }
.ig-sheet { position: fixed; inset: 0; z-index: 6; display: flex; align-items: flex-end; padding: 0 8px calc(8px + var(--safe-bottom)); background: rgba(0, 0, 0, 0); transition: background 0.26s ease; }
.ig-sheet.is-open { background: rgba(0, 0, 0, 0.45); }
.ig-sheet__box { width: 100%; display: grid; gap: 8px; transform: translateY(110%); transition: transform 0.34s cubic-bezier(0.2, 0.9, 0.25, 1); }
.ig-sheet.is-open .ig-sheet__box { transform: none; }
.ig-sheet__group { border-radius: 14px; overflow: hidden; background: rgba(44, 44, 48, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); text-align: center; }
.ig-sheet__group p { margin: 0; padding: 14px 18px; font: 400 13px/1.35 var(--ig-font); color: rgba(235, 235, 245, 0.6); border-bottom: 0.5px solid rgba(255, 255, 255, 0.12); }
.ig-sheet button { width: 100%; height: 56px; font: 400 20px var(--ig-font); color: var(--ig-blue); }
.ig-sheet button.is-danger { color: #ff453a; }
.ig-sheet__cancel { border-radius: 14px; background: rgba(44, 44, 48, 0.96); font-weight: 600 !important; }
.ig-sheet button:active { background: rgba(255, 255, 255, 0.08); }

/* Kira Girl: лист действий — кнопки по центру, размер iOS; Free — режим мутный; голосовые */
body.is-free .mode-picker [data-section="girl"] > *, body.is-free .mode-picker .is-girl > :not(canvas) { opacity: 0.32; filter: saturate(0.2) blur(0.4px); }
.ig-sheet button { display: flex; align-items: center; justify-content: center; text-align: center; height: 54px; padding: 0 16px; font: 400 17px var(--ig-font); letter-spacing: -0.01em; }
.ig-sheet__group p { font-size: 12.5px; }
.ig-sheet__cancel { font-weight: 600 !important; }
/* Микрофон справа в поле, пока нет текста; при тексте — кнопка отправки */
.ig-mic { flex: none; width: 30px; height: 30px; margin: 3px 4px; display: grid; place-items: center; color: rgba(235, 235, 245, 0.55); }
.ig-mic svg { width: 20px; height: 20px; }
.ig.has-text .ig-mic { display: none; }
.ig:not(.has-text) .ig-send { display: none; }
.ig.is-recording .ig-input, .ig.is-recording .ig-attach, .ig.is-recording .ig-quote { display: none; }
.ig-rec { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 3px 4px 3px 6px; }
.ig-rec[hidden] { display: none; }
.ig-rec__x { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: rgba(235, 235, 245, 0.7); background: #2c2c30; }
.ig-rec__x svg { width: 14px; height: 14px; }
.ig-rec__dot { width: 9px; height: 9px; border-radius: 50%; background: #ff453a; animation: ig-blink 1s ease-in-out infinite; }
@keyframes ig-blink { 50% { opacity: 0.25; } }
.ig-rec__t { font: 500 15px var(--ig-font); font-variant-numeric: tabular-nums; color: #fff; }
.ig-rec__wave { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; height: 22px; overflow: hidden; }
.ig-rec__wave b { flex: none; width: 3px; height: 6px; border-radius: 2px; background: var(--ig-blue); animation: ig-wave 0.9s ease-in-out infinite; }
.ig-rec__wave b:nth-child(3n) { animation-delay: 0.15s; } .ig-rec__wave b:nth-child(3n+1) { animation-delay: 0.3s; } .ig-rec__wave b:nth-child(4n) { animation-duration: 0.7s; }
@keyframes ig-wave { 50% { height: 20px; } }
.ig-rec__send { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--ig-blue); color: #fff; }
.ig-rec__send svg { width: 16px; height: 16px; }
/* Пузырь голосового */
.ig-voice { --p: 0; display: flex; align-items: center; gap: 8px; min-width: 170px; }
.ig-play { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: var(--ig-gray); }
.is-me .ig-play { color: var(--ig-blue); }
.ig-play svg { width: 15px; height: 15px; }
.ig-wave { flex: 1; display: flex; align-items: center; gap: 2px; height: 22px; }
.ig-wave b { flex: none; width: 2.5px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
.ig-voice.is-playing .ig-wave b { background: rgba(255, 255, 255, 0.9); }
.ig-dur { flex: none; font: 500 12px var(--ig-font); font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.8); }
.ig-transcript { display: block; margin-top: 6px; padding-top: 6px; border-top: 0.5px solid rgba(255, 255, 255, 0.25); font-size: 14px; line-height: 1.3; color: rgba(255, 255, 255, 0.85); white-space: pre-wrap; }

/* Kira Girl: окно «⋯» — карточка по центру, красная «Удалить чат» и синяя «Подробнее» */
.ig-pop { position: fixed; inset: 0; z-index: 6; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0); transition: background 0.28s ease, backdrop-filter 0.28s ease; }
.ig-pop.is-open { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.ig-pop__card { width: min(300px, 100%); display: grid; justify-items: center; gap: 4px; padding: 22px 16px 10px; border-radius: 22px; background: rgba(36, 36, 40, 0.94); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: scale(1.12); transition: opacity 0.22s ease, transform 0.36s cubic-bezier(0.2, 1.2, 0.4, 1); }
.ig-pop.is-open .ig-pop__card { opacity: 1; transform: none; }
.ig-pop__ava { width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; overflow: hidden; background: #1c1c1f; }
.ig-pop__ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.ig-pop__card > b { font: 600 17px var(--ig-font); }
.ig-pop__card > small { margin-bottom: 14px; font: 400 13px var(--ig-font); color: rgba(235, 235, 245, 0.55); }
.ig-pop__btn { width: 100%; height: 50px; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 14px; font: 600 16px var(--ig-font); color: #fff; transition: transform 0.12s, background 0.25s; }
.ig-pop__btn svg { width: 20px; height: 20px; }
.ig-pop__btn.is-red { background: rgba(255, 69, 58, 0.16); color: #ff453a; }
.ig-pop__btn.is-red.is-armed { background: #ff453a; color: #fff; animation: ad-shake 0.35s ease both; }
.ig-pop__btn.is-blue { background: var(--ig-blue); }
.ig-pop__btn:active { transform: scale(0.97); }
.ig-pop__close { width: 100%; height: 44px; margin-top: 4px; font: 400 16px var(--ig-font); color: rgba(235, 235, 245, 0.6); }

/* «Подробнее» — лист iOS снизу: аватар, заголовок, пункты с цветными плитками */
.ig-about { position: fixed; inset: 0; z-index: 7; display: flex; align-items: flex-end; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; }
.ig-about.is-open { background: rgba(0, 0, 0, 0.5); }
.ig-about__sheet { position: relative; width: 100%; max-height: 92%; overflow-y: auto; padding: 10px 20px calc(24px + var(--safe-bottom)); border-radius: 14px 14px 0 0; background: #1c1c1e; text-align: center;
  transform: translateY(100%); transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.25, 1); scrollbar-width: none; }
.ig-about.is-open .ig-about__sheet { transform: none; }
.ig-about__grab { display: block; width: 36px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: rgba(235, 235, 245, 0.3); }
.ig-about__done { position: absolute; top: 14px; right: 16px; font: 600 17px var(--ig-font); color: var(--ig-blue); }
.ig-about__ava { display: block; width: 84px; height: 84px; margin: 22px auto 12px; border-radius: 50%; overflow: hidden; background: #2c2c2e; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); }
.ig-about__ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.ig-about h2 { margin: 0; font: 700 28px/1.15 var(--ig-font); letter-spacing: -0.02em; }
.ig-about__lead { margin: 8px auto 22px; max-width: 320px; font: 400 15px/1.4 var(--ig-font); color: rgba(235, 235, 245, 0.65); }
.ig-about__list { display: grid; gap: 0; border-radius: 12px; overflow: hidden; background: #2c2c2e; text-align: left; }
.ig-about__row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.2, 0.9, 0.25, 1); transition-delay: calc(0.12s + var(--i) * 0.05s); }
.ig-about.is-open .ig-about__row { opacity: 1; transform: none; }
.ig-about__row + .ig-about__row { border-top: 0.5px solid rgba(84, 84, 88, 0.6); }
.ig-about__ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: #fff; }
.ig-about__ic svg { width: 18px; height: 18px; }
.ig-about__row b { display: block; font: 600 15px/1.3 var(--ig-font); }
.ig-about__row small { display: block; margin-top: 2px; font: 400 13.5px/1.35 var(--ig-font); color: rgba(235, 235, 245, 0.6); }
.ig-about__foot { margin: 14px 4px 0; font: 400 12.5px/1.4 var(--ig-font); color: rgba(235, 235, 245, 0.45); }

/* Запись голоса: удерживайте микрофон; влево — отмена, вверх — закрепить */
.ig-mic { touch-action: none; }
.ig-rec__hint { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13px var(--ig-font); color: rgba(235, 235, 245, 0.5); transform: translateX(var(--slide, 0px)); transition: transform 0.1s; }
.ig.is-holding .ig-rec__wave, .ig.is-holding .ig-rec__send, .ig.is-holding .ig-rec__x { display: none; }
.ig:not(.is-holding) .ig-rec__hint { display: none; }
.ig.is-holding .ig-mic { display: grid !important; position: fixed; right: 14px; bottom: calc(14px + var(--safe-bottom)); z-index: 4; width: 64px; height: 64px; margin: 0; border-radius: 50%; background: var(--ig-blue); color: #fff; box-shadow: 0 0 0 10px rgba(10, 132, 255, 0.2); animation: ig-mic-pulse 1.2s ease-in-out infinite; }
.ig.is-holding .ig-mic svg { width: 26px; height: 26px; }
@keyframes ig-mic-pulse { 50% { box-shadow: 0 0 0 18px rgba(10, 132, 255, 0.1); } }
/* Во время записи поле ввода остаётся в DOM (кнопка микрофона держит касание), прячем только текст и отправку */
.ig.is-recording .ig-input { display: flex; }
.ig.is-recording .ig-input textarea, .ig.is-recording .ig-input .ig-send { display: none; }
.ig.is-recording:not(.is-holding) .ig-input { display: none; }
.ig-pop__close { display: flex; align-items: center; justify-content: center; text-align: center; }

/* «⋯» — выпадающее меню iOS: стекло, из правого верхнего угла, красный пункт удаления */
.ig-menu2 { position: fixed; inset: 0; z-index: 6; }
.ig-menu2__list { position: absolute; top: calc(var(--safe-top) + 58px); right: 12px; width: 250px; border-radius: 14px; overflow: hidden;
  background: rgba(37, 37, 41, 0.82); backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  transform-origin: 100% 0; opacity: 0; transform: scale(0.35); transition: opacity 0.18s ease, transform 0.34s cubic-bezier(0.2, 1.15, 0.4, 1); }
.ig-menu2.is-open .ig-menu2__list { opacity: 1; transform: none; }
.ig-menu2__list button { width: 100%; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; color: #fff; font: 400 17px var(--ig-font); letter-spacing: -0.02em; text-align: left; }
.ig-menu2__list button + button { border-top: 0.5px solid rgba(255, 255, 255, 0.14); }
.ig-menu2__list button:active { background: rgba(255, 255, 255, 0.1); }
.ig-menu2__list button.is-red { color: #ff453a; }
.ig-menu2__list svg { width: 21px; height: 21px; flex: none; }
.ig-sheet button.is-danger.is-armed { background: rgba(255, 69, 58, 0.16); font-weight: 600; animation: ad-shake 0.35s ease both; }
.ig-menu2__list { background: #2c2c2e; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* Презентация в чате: островки и кнопки в стиле Киры. */
.deck-form { display: grid; min-width: 0; gap: 12px; margin: 16px 0 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--ui, var(--font)); }
.deck-form__head { justify-self: center; display: flex; align-items: center; justify-content: center; min-height: 44px; margin-bottom: 8px; padding: 10px 26px; border-radius: 999px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(180deg,#202023,#18181b); color: #f4f4f5; font: 600 15px/1.4 var(--ui,var(--font)); text-align: center; }
.deck-form__field, .deck-form__group { display: grid; min-width: 0; gap: 12px; margin: 0; padding: 16px; border-radius: 26px; border: 1px solid rgba(255,255,255,.08); background: linear-gradient(155deg,#17171a,#101012); }
/* Legend inside the fieldset keeps the label within the island, rather than across its border. */
.deck-form__group { display: block; }
.deck-form__group legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; }
.deck-form__group > div { clear: both; }
.deck-form__field > span, .deck-form__group legend { color: #a0a0a9; font: 500 13px/1.4 var(--ui,var(--font)); letter-spacing: 0; text-transform: none; }
.deck-form__field > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.deck-form__field small, .deck-form__group legend small { float: right; margin-left: auto; color: #85858f; font: 400 11px/1.6 var(--ui,var(--font)); }
.deck-form input, .deck-form textarea { display: block; min-width: 0; width: 100%; padding: 0; border: 0; border-radius: 0; outline: none; background: transparent; box-shadow: none; color: #f4f4f5; font: 400 16px/1.5 var(--ui,var(--font)); resize: vertical; }
.deck-form input { min-height: 28px; }
.deck-form textarea { min-height: 72px; max-height: 240px; }
.deck-form input::placeholder, .deck-form textarea::placeholder { color: #7f7f89; opacity: 1; }
.deck-form input:focus, .deck-form textarea:focus { border: 0; outline: none; background: transparent; }
.deck-form__field:focus-within { border-color: rgba(255,255,255,.3); }
.deck-form .deck-chips { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 4px; padding: 0; background: none; }
.deck-form .deck-chips button { display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%; min-height: 44px; margin: 0; padding: 0; border: 1px solid transparent; border-radius: 999px; background: transparent; box-shadow: none; color: #92929c; font: 500 14px/1 var(--ui,var(--font)); text-align: center; }
.deck-form .deck-chips button[aria-pressed="true"] { background: #f5f5f7; border-color: #f5f5f7; color: #111113; box-shadow: none; }
.deck-form .deck-themes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.deck-form .deck-themes button { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 7px; min-width: 0; min-height: 44px; margin: 0; padding: 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.09); background: transparent; box-shadow: none; color: #b0b0b9; font: 500 12px/1.25 var(--ui,var(--font)); text-align: left; transition: background .18s,color .18s,border-color .18s; }
.deck-form .deck-themes button > i { display: block; flex: none; width: 7px; height: 7px; border: 0; border-radius: 50%; background: var(--ac,#aaaab3); }
.deck-form .deck-themes button > i::before, .deck-form .deck-themes button > i::after { content: none; }
.deck-form .deck-themes button > span { min-width: 0; overflow-wrap: anywhere; }
.deck-form .deck-themes button[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); box-shadow: none; }
.deck-form .deck-theme-check { display: none; flex: none; width: 17px; height: 17px; margin-left: auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deck-form .deck-themes button[data-theme="auto"] { grid-column: 1/-1; gap: 10px; min-height: 54px; margin-bottom: 3px; padding: 10px 14px; border-radius: 18px; }
.deck-form .deck-themes button[data-theme="auto"] > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 0; background: none; }
.deck-form .deck-themes button[data-theme="auto"] > i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.deck-form .deck-themes button[data-theme="auto"] small { display: block; margin-top: 3px; color: #888892; font: 400 11px/1.4 var(--ui,var(--font)); }
.deck-form .deck-themes button[data-theme="auto"][aria-pressed="true"] .deck-theme-check { display: block; }
.deck-form__submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 18px; border: 0; border-radius: 999px; background: #f5f5f7; box-shadow: none; color: #111113; font: 600 14px/1.4 var(--ui,var(--font)); text-align: center; }
.deck-form__submit svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.deck-form button:active { transform: scale(.97); }
.deck-form button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.deck-form.is-sent { opacity: .5; }
@media (max-width:360px) { .deck-form__field,.deck-form__group { padding: 14px; } .deck-form .deck-themes button { padding: 10px 8px; gap: 6px; font-size: 11px; } }
@media (prefers-reduced-motion:reduce) { .deck-form * { transition: none !important; } }

/* Презентации: оттенки меню и поля ввода, единые поверхности редактора. */
:is(.deck-form,.deck-form__field,.deck-form__group,.deck-edit-btn,.is-deck-editor,.de-slide) { --deck-tint: 160,160,180; --deck-surface: radial-gradient(120% 140% at 0% 0%,rgba(var(--deck-tint),.13),transparent 62%),linear-gradient(180deg,#202025,#141417); --deck-line: rgba(255,255,255,.09); }
.deck-form__field, .deck-form__group { background: var(--deck-surface); border-color: var(--deck-line); }
.deck-form > :nth-child(3) { --deck-tint: 151,164,143; }
.deck-form > :nth-child(4) { --deck-tint: 151,151,185; }
.deck-form > :nth-child(5) { --deck-tint: 160,153,173; }
.deck-form textarea { resize: none; }
.deck-edit-btn { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 68px; width: 100%; padding: 12px 16px; margin-top: 10px; border-radius: 24px; border: 1px solid var(--deck-line); background: var(--deck-surface); box-shadow: none; color: #f4f4f6; font-family: var(--ui,var(--font)); text-align: left; transition: border-color .2s,transform .15s; }
.deck-edit-btn > .deck-edit-btn__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.06); }
.deck-edit-btn .deck-edit-btn__icon svg { width: 19px; height: 19px; color: #e1e1e7; }
.deck-edit-btn > .deck-edit-btn__text { flex: 1; display: grid; gap: 3px; min-width: 0; text-align: left; }
.deck-edit-btn__text b { font: 600 14px/1.35 var(--ui,var(--font)); }
.deck-edit-btn__text small { color: #92929d; font: 400 12px/1.35 var(--ui,var(--font)); }
.deck-edit-btn > svg { flex: none; width: 16px; height: 16px; color: #92929d; }
.deck-edit-btn:active { transform: scale(.98); }
.deck-edit-btn:focus-visible { outline: 2px solid #e5e5ea; outline-offset: 3px; }

.km-panel.is-deck-editor { background: radial-gradient(100% 55% at 0% 0%,rgba(160,160,180,.09),transparent 70%),radial-gradient(90% 45% at 100% 90%,rgba(139,149,136,.05),transparent 70%),#08080a; font-family: var(--ui,var(--font)); }
.is-deck-editor .km-inner { min-width: 0; padding: calc(var(--safe-top) + 18px) 16px calc(142px + var(--safe-bottom)); gap: 24px; }
.is-deck-editor .km-head { display: flex; justify-content: center; padding: 0 44px; }
.is-deck-editor .km-head h1 { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--deck-line); background: var(--deck-surface); font: 600 14px/1.4 var(--ui,var(--font)); letter-spacing: 0; text-align: center; }
.is-deck-editor .paywall__back { top: calc(var(--safe-top) + 18px); width: 44px; height: 44px; border-radius: 50%; background: var(--deck-surface); border: 1px solid var(--deck-line); }
.is-deck-editor .km-body { min-width: 0; grid-template-columns: minmax(0,1fr); gap: 18px; }
.de-summary { padding: 0 4px 4px; min-width: 0; }
.de-summary__meta { display: inline-block; margin-bottom: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.05); color: #a0a0ac; font: 500 11px/1.4 var(--ui,var(--font)); }
.de-summary h2 { margin: 0; color: #f4f4f6; font: 600 23px/1.25 var(--ui,var(--font)); letter-spacing: -.025em; overflow-wrap: anywhere; }
.de-summary p { max-width: 380px; margin: 10px 0 0; color: #92929e; font: 400 13px/1.6 var(--ui,var(--font)); }
.de-list { display: grid; min-width: 0; gap: 10px; }
.is-deck-editor .de-slide { min-width: 0; border-radius: 26px; border: 1px solid var(--deck-line); background: var(--deck-surface); overflow: hidden; }
.is-deck-editor .de-slide:nth-child(3n+2) { --deck-tint: 151,164,143; }
.is-deck-editor .de-slide:nth-child(3n) { --deck-tint: 160,151,173; }
.de-slide__head { display: flex; align-items: center; gap: 12px; min-height: 78px; padding: 16px; cursor: pointer; list-style: none; }
.de-slide__head::-webkit-details-marker { display: none; }
.de-slide__head::marker { content: ''; }
.de-slide__head:focus-visible { outline: 2px solid #d6d6e0; outline-offset: -4px; border-radius: 24px; }
.de-slide__num { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.065); color: #d7d7df; font: 500 12px var(--ui,var(--font)); }
.de-slide__heading { display: grid; gap: 4px; flex: 1; min-width: 0; }
.de-slide__heading small { color: #92929e; font: 400 11px/1.4 var(--ui,var(--font)); }
.de-slide__heading b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: #ededf1; font: 500 14px/1.45 var(--ui,var(--font)); }
.de-slide__head > svg { flex: none; width: 16px; height: 16px; color: #94949f; transition: transform .2s; }
.de-slide[open] > .de-slide__head > svg { transform: rotate(90deg); }
.de-slide__content { display: grid; min-width: 0; gap: 18px; margin: 0 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.07); }
.de-field, .de-items { display: grid; min-width: 0; gap: 9px; }
.de-field > span, .de-field__label { color: #9b9ba7; font: 500 12px/1.5 var(--ui,var(--font)); }
.is-deck-editor :is(.de-field,.de-item-row,.de-ask,.de-global-card) textarea { display: block; width: 100%; min-width: 0; min-height: 68px; margin: 0; padding: 12px 13px; border: 1px solid rgba(255,255,255,.055); border-radius: 18px; background: rgba(0,0,0,.18); box-shadow: none; color: #e4e4ea; font: 400 16px/1.5 var(--ui,var(--font)); resize: none; scroll-margin-block: 100px 150px; }
.is-deck-editor .de-field .de-title { font-weight: 500; }
.is-deck-editor textarea::placeholder { color: #777783; opacity: 1; }
.is-deck-editor textarea:focus { outline: none; border-color: rgba(255,255,255,.3); }
.de-item-row { display: flex; align-items: flex-start; gap: 9px; min-width: 0; }
.de-item-row > span { display: grid; place-items: center; flex: none; width: 22px; min-height: 44px; padding-top: 10px; color: #858591; font: 500 11px/1.5 var(--ui,var(--font)); }
.de-ask { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--deck-line); border-radius: 22px; background: radial-gradient(120% 140% at 0% 0%,rgba(160,160,180,.1),transparent 60%),linear-gradient(180deg,#242429,#1a1a1f); }
.de-ask > span, .de-global-card > span { display: flex; align-items: center; gap: 7px; color: #bbbcc6; font: 500 12px/1.5 var(--ui,var(--font)); }
:is(.de-ask,.de-global-card) > span svg { flex: none; width: 17px; height: 17px; color: #a2a2af; }
.is-deck-editor .de-ask .de-ask__in { min-height: 60px; padding: 0; border: 0; border-radius: 0; background: transparent; resize: none; font-size: 15px; }
.de-ask:focus-within { border-color: rgba(255,255,255,.3); }
.de-global-card { display: grid; min-width: 0; gap: 12px; padding: 18px; border: 1px solid var(--deck-line); border-radius: 26px; background: var(--deck-surface); }
.is-deck-editor .de-global-card .de-global { padding: 0; border: 0; border-radius: 0; background: none; min-height: 92px; resize: none; }
.de-global-card:focus-within { border-color: rgba(255,255,255,.3); }
.de-global-card > small { color: #858590; font: 400 11px/1.5 var(--ui,var(--font)); }
.de-footer { position: fixed; z-index: 3; bottom: 0; left: 0; right: 0; display: grid; justify-items: center; gap: 8px; padding: 18px 16px calc(16px + var(--safe-bottom)); background: linear-gradient(180deg,rgba(8,8,10,0),rgba(8,8,10,.97) 25%); }
.de-save-state { max-width: 448px; color: #8e8e9b; font: 400 11px/1.5 var(--ui,var(--font)); text-align: center; }
.de-go { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(100%,448px); min-height: 50px; margin: 0; padding: 12px 18px; border-radius: 999px; border: 1px solid transparent; background: #f4f4f6; box-shadow: none; color: #141416; font: 600 14px/1.4 var(--ui,var(--font)); text-align: center; transition: background .2s,color .2s,transform .15s; }
.de-go svg { flex: none; width: 18px; height: 18px; }
.de-go:disabled { opacity: 1; cursor: default; background: #222227; border-color: rgba(255,255,255,.08); color: #797985; }
.de-go:not(:disabled):active { transform: scale(.98); }
.de-go:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (max-width:360px) { .is-deck-editor .km-inner { padding-left: 12px; padding-right: 12px; } .is-deck-editor .km-head { padding: 0 38px; } .is-deck-editor .km-head h1 { font-size: 12px; padding-inline: 12px; } .de-slide__head { gap: 9px; padding: 14px; } .de-slide__content { margin-inline: 14px; } .de-summary h2 { font-size: 21px; } }
@media (max-height:500px) { .de-footer { padding-top: 10px; } .de-save-state { display: none; } }
@media (prefers-reduced-motion:reduce) { .deck-edit-btn,.de-slide__head > svg,.de-go { transition: none; } }
/* Переключатель iOS в меню «⋯» */
.ig-switch { position: relative; flex: none; width: 46px; height: 28px; border-radius: 14px; background: #39393d; transition: background 0.25s ease; }
.ig-switch b { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); transition: transform 0.28s cubic-bezier(0.2, 1, 0.3, 1); }
.ig-switch.is-on { background: #30d158; }
.ig-switch.is-on b { transform: translateX(18px); }
.ig-menu2__list { width: 270px; }

/* Окно-предупреждение iOS: по центру, текст, синяя «ОК» снизу через линию */
.ig-alert { position: fixed; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; background: rgba(0, 0, 0, 0); transition: background 0.22s ease; }
.ig-alert.is-open { background: rgba(0, 0, 0, 0.45); }
.ig-alert__box { width: 280px; border-radius: 14px; overflow: hidden; background: #2c2c2e; text-align: center; opacity: 0; transform: scale(1.15); transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.2, 1.1, 0.4, 1); }
.ig-alert.is-open .ig-alert__box { opacity: 1; transform: none; }
.ig-alert__body { padding: 20px 16px 16px; }
.ig-alert__ava { display: block; width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden; background: #1c1c1e; }
.ig-alert__ava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.ig-alert__body b { display: block; font: 600 17px/1.3 var(--ig-font); letter-spacing: -0.02em; }
.ig-alert__body p { margin: 6px 0 0; font: 400 13px/1.38 var(--ig-font); color: rgba(235, 235, 245, 0.75); }
.ig-alert__ok { display: flex; align-items: center; justify-content: center; width: 100%; height: 44px; border-top: 0.5px solid rgba(84, 84, 88, 0.65); font: 600 17px var(--ig-font); color: var(--ig-blue); }
.ig-alert__ok:active { background: rgba(255, 255, 255, 0.08); }

/* Профиль Киры — лист iOS: аватар с точкой, неброский статус, сгруппированные списки */
.ig-who { cursor: pointer; }
.ig-who:active { opacity: 0.6; }
.ig-prof__ava { position: relative; overflow: visible; }
.ig-prof__ava img { border-radius: 50%; }
.ig-prof__ava i { position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 50%; background: #8e8e93; border: 3px solid #1c1c1e; }
.ig-prof__ava i.is-on { background: #30d158; }
.ig-prof__ava i.is-sleep { background: #5e5ce6; }
.ig-prof__presence { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 0; }
.ig-prof__chip { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 13px; background: #2c2c2e; font: 500 13px var(--ig-font); color: rgba(235, 235, 245, 0.8); }
.ig-prof__chip.is-on { background: rgba(48, 209, 88, 0.16); color: #30d158; }
.ig-prof__chip.is-sleep { background: rgba(94, 92, 230, 0.18); color: #a5a3ff; }
.ig-prof__presence small { font: 400 13px var(--ig-font); color: rgba(235, 235, 245, 0.5); }
.ig-prof__meta { margin: 8px 0 18px; font: 400 13px var(--ig-font); color: rgba(235, 235, 245, 0.5); }
.ig-prof__h { margin: 18px 16px 7px; text-align: left; font: 400 13px var(--ig-font); letter-spacing: -0.01em; text-transform: uppercase; color: rgba(235, 235, 245, 0.5); }
.ig-prof__group { margin-top: 18px; }
.ig-prof__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 10px 12px 10px 16px; text-align: left; color: #fff;
  max-height: 120px; transition: max-height 0.26s ease, opacity 0.2s ease, padding 0.26s ease; }
.ig-prof__row + .ig-prof__row { border-top: 0.5px solid rgba(84, 84, 88, 0.6); }
.ig-prof__row span { min-width: 0; }
.ig-prof__row b { display: block; font: 400 16px/1.3 var(--ig-font); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ig-prof__row small { display: block; margin-top: 2px; font: 400 13px var(--ig-font); color: rgba(235, 235, 245, 0.5); }
.ig-prof__row.is-empty b { color: rgba(235, 235, 245, 0.6); }
.ig-prof__row.is-red b { color: #ff453a; }
.ig-prof__row.is-leaving { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
.ig-prof__x { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: #ff453a; color: #fff; }
.ig-prof__x svg { width: 14px; height: 14px; }
.ig-prof__x:active { transform: scale(0.9); }

/* Камера: Onest и круглые стеклянные кнопки обновлённой навигации. */
.camera-sheet { font-family: var(--ui); animation: none; }
.camera-sheet__top { display: grid; grid-template-columns: 48px 1fr 48px; gap: 12px; padding: calc(var(--safe-top) + 16px) 20px 24px; letter-spacing: 0; }
.camera-sheet__top h1 { margin: 0; text-align: center; font: 600 19px/1.3 var(--ui); letter-spacing: -0.02em; }
.camera-sheet__top button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(120% 140% at 0% 0%, rgba(160, 160, 180, 0.18), transparent 60%), linear-gradient(180deg, rgba(38, 38, 44, 0.78), rgba(22, 22, 26, 0.9));
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); transition: transform 0.15s, opacity 0.15s; }
.camera-sheet__top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.camera-sheet__top button:active:not(:disabled) { transform: scale(0.94); }
.camera-sheet__top button:disabled { opacity: 0.4; cursor: default; }
.camera-sheet__loading { position: absolute; inset: 0; display: grid; place-items: center; padding: 100px 24px; color: #aaa; font: 400 14px/1.5 var(--ui); }
.camera-sheet__bar { gap: 12px; padding-bottom: calc(var(--safe-bottom) + 28px); }
.camera-sheet__bar > span { font: 500 13px/1.3 var(--ui); color: rgba(255, 255, 255, 0.7); }
.camera-shutter { width: 80px; height: 80px; border: 1px solid rgba(255, 255, 255, 0.65); background: #1c1c1f; transition: transform 0.15s, opacity 0.15s; }
.camera-shutter i { width: 62px; height: 62px; }
.camera-shutter:active:not(:disabled) { transform: scale(0.96); }
.camera-shutter:disabled { opacity: 0.35; cursor: default; }
.camera-sheet button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .camera-sheet, .camera-sheet.is-leaving, .camera-sheet button, .camera-shutter i { animation: none; transition: none; } }

/* Chat update: quiet status and the same UI typography as the rest of Kira. */
.bar__pill-text b { font: 600 15px/1.2 var(--ui); letter-spacing: -0.02em; }
.bar__pill-text small { font: 400 11px/1.3 var(--ui); letter-spacing: 0; }
.stream-note { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font: 400 12px/1.5 var(--ui); }
.stream-note svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }

/* Media viewer: one fade for the whole overlay keeps its controls in sync. */
.viewer__backdrop { background: #08080a; animation: none; }
.viewer__stage { animation: none; }
.viewer.is-closing .viewer__stage, .viewer.is-closing .viewer__backdrop { animation: none; }
.viewer__bar { align-items: flex-start; }
.viewer__meta { padding-top: 8px; font-family: var(--ui); }
.viewer__meta small { font-family: var(--ui); }
.viewer__close, .att__rm {
  display: grid; place-items: center; flex: none; box-sizing: border-box; border-radius: 50%;
  color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.12);
  background: radial-gradient(120% 140% at 0 0,rgba(160,160,180,.08),transparent 60%),linear-gradient(180deg,#28282df2,#1b1b1ff5);
  box-shadow: inset 0 1px rgba(255,255,255,.04); -webkit-tap-highlight-color: transparent;
  transition: transform 140ms cubic-bezier(.23,1,.32,1),background-color 140ms,color 140ms;
}
.viewer__close { width: 44px; height: 44px; }
.viewer__close svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.att__rm, .att--image .att__rm { width: 28px; height: 28px; margin: 0; }
.att--image .att__rm { top: 4px; right: 4px; background: rgba(24,24,28,.94); border-color: rgba(255,255,255,.16); }
.att__rm svg { width: 14px; height: 14px; }
.viewer__close:active, .att__rm:active { color: #fff; background-color: #34343a; transform: scale(.95); }
@media (prefers-reduced-motion: reduce) { .viewer__close, .att__rm { transition: none; } }
/* WebView follows Android's IME geometry without a second background transition. */
html.native-app .frame-field { transition: opacity .2s; }