/* Kira v0.5 — Brief и Секретарь в общем ч/б стиле приложения. Цвет раздела остаётся
   только в фоне, ASCII-частицах у края, маркерах и рукописных пометках. */
.mode-sky { background: #000; }
.mode-sky__glow { opacity: 0.4; }
.mode-sky__grid { background-image: radial-gradient(circle, var(--side-dot) 1px, transparent 1.6px); background-size: 7px 7px; }
.side-screen.brief-mode { color: #fff; }
.side-head { background: linear-gradient(180deg, #000 55%, transparent); }
.side-title small { color: var(--muted); }
.side-title small::before { content: "● "; color: var(--side-accent); font-size: 8px; vertical-align: 1px; }
.side-screen .brief-eyebrow, .side-screen .workspace-section-label span { color: var(--muted); }
.side-screen .brief-eyebrow::before { content: "▚ "; color: var(--side-accent); }
.side-screen .workspace-action { border-color: rgba(255, 255, 255, 0.22); background: #0a0a0a; color: #fff; box-shadow: none; }
.side-screen .workspace-action-primary { background: #fff; border-color: #fff; color: #000; box-shadow: 4px 4px 0 rgba(255, 255, 255, 0.2); }
.side-screen .workspace-action-primary .kemoji { filter: invert(1); }
.side-screen .choice-row button[aria-checked="true"] { background: #fff; border-color: #fff; color: #000; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.18); }
.side-screen .brief-edition-head h1 { background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
.side-screen .brief-edition-date { color: var(--muted); border-color: var(--line-strong); }
.side-screen .brief-paragraph strong { background-image: none; color: #fff; }
.side-screen .brief-rule i { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); }
.side-screen .brief-source { color: #fff; text-decoration: underline dotted; text-underline-offset: 3px; }
.brief-orbit > i::before { background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, 0.55); }
.brief-orbit > i:nth-child(2)::before { background: var(--side-accent); box-shadow: 0 0 8px var(--side-accent); }
.brief-orbit > .kemoji, .sec-hero__emoji { filter: none; }
.workspace-action.is-busy::after, .sec-quick__grid button.is-busy::after, .sec-item__draft.is-busy::after { background: #fff; }
.sec-card { background: rgba(13, 13, 13, 0.92); border: 1px solid var(--line); border-radius: 18px; }
.sec-setup { background-color: #070707; background-image: var(--dots); background-size: 7px 7px; border-color: rgba(255, 255, 255, 0.24); box-shadow: 5px 5px 0 rgba(255, 255, 255, 0.08); }
.sec-hero p { color: var(--muted); }
.sec-steps li::before { background: #fff; color: #000; }
.sec-steps span, .sec-note, .sec-empty, .sec-item__body small, .sec-stats span { color: var(--muted); }
.sec-stats b { color: #fff; }
.sec-quick__grid button { background: #000; border-color: var(--line-strong); transition: transform 0.15s, box-shadow 0.15s; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.08); }
.sec-quick__grid button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.08); background: #0d0d0d; }
.sec-item { background: #000; border-color: var(--line); }
.sec-item__avatar { background: #fff; color: #000; }
.sec-item__draft { background: #fff; color: #000; box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.18); }
.sec-report__text strong, .sec-copy { color: #fff; }

/* Край экрана: вместо свечения — ASCII-символы цвета раздела */
.swipe-edge::before { box-shadow: 0 0 6px var(--side-glow); }
.swipe-edge::after { display: none; }
body[data-app-mode="agent"] .chat:not(.is-dragging):not(.is-settling) .swipe-edge { opacity: 0; }
.edge-ascii { position: absolute; right: 0; top: 0; bottom: 0; width: 64px; height: 100%; z-index: 3; pointer-events: none; transition: opacity 0.2s; }
.chat.is-dragging .edge-ascii, .chat.is-settling .edge-ascii { opacity: 0; }
.swipe-hint { background: rgba(10, 10, 10, 0.86); }
.swipe-hint__label { color: #fff; }

/* ---------- Рукописные пометки (annotate.js) ---------- */
.an { position: relative; display: inline-block; white-space: nowrap; }
.an-mark { position: absolute; pointer-events: none; overflow: visible; color: var(--side-accent, #fff); }
.an-under .an-mark { left: -1%; width: 102%; bottom: -0.32em; height: 0.5em; }
.an-wavy .an-mark { left: -2%; width: 104%; bottom: -0.4em; height: 0.7em; }
.an-double .an-mark { bottom: -0.5em; height: 0.7em; }
.an-arrow .an-mark { width: 106%; bottom: -0.45em; height: 0.8em; }
.an-highlight .an-mark { left: -4%; width: 108%; bottom: -0.08em; height: 1.15em; z-index: 0; opacity: 0.34; }
.an-ink { position: relative; z-index: 1; }
.an-circle { padding: 0 0.25em; }
.an-circle .an-mark { left: -0.55em; top: -0.6em; width: calc(100% + 1.1em); height: calc(100% + 1.2em); }
.an-box { padding: 0 0.4em; }
.an-box .an-mark { left: -0.4em; top: -0.4em; width: calc(100% + 0.8em); height: calc(100% + 0.8em); }
.an-bracket { padding: 0 0.35em; }
.an-bracket .an-mark { left: -0.15em; top: -0.25em; width: calc(100% + 0.3em); height: calc(100% + 0.5em); }
.an-strike .an-mark { left: -1%; top: 50%; width: 102%; height: 0.5em; transform: translateY(-50%); }
.an-cross .an-mark { left: -2%; top: 50%; width: 104%; height: 1.4em; transform: translateY(-50%); }
.an-dotted { padding-bottom: 3px; background-image: radial-gradient(circle, var(--side-accent, #fff) 1.1px, transparent 1.5px); background-size: 0.5em 4px; background-repeat: repeat-x; background-position: 0 100%; }
del.an { text-decoration: none; }

/* ---------- Меню «+» ---------- */
.add-sheet { position: fixed; z-index: 65; width: min(340px, calc(100vw - 20px)); padding: 12px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.22);
  background-color: #070707; background-image: var(--dots); background-size: 7px 7px; box-shadow: 6px 6px 0 rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.7);
  animation: add-in 0.34s cubic-bezier(0.2, 1.2, 0.35, 1) both; }
.add-sheet.is-leaving { animation: add-out 0.2s cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes add-in { from { opacity: 0; transform: translateY(14px) scale(0.92); } }
@keyframes add-out { to { opacity: 0; transform: translateY(10px) scale(0.95); } }
.add-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 10px; font: 700 11px var(--mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); }
.add-sheet__head button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); }
.add-sheet__head svg { width: 14px; height: 14px; }
.add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.add-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 104px; padding: 12px; border-radius: 18px; background: #000; border: 1px solid var(--line-strong);
  box-shadow: 3px 3px 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(0.04s + var(--i, 0) * 45ms); transition: transform 0.15s, box-shadow 0.15s, background 0.2s; }
@keyframes tile-in { from { opacity: 0; transform: translateY(10px) scale(0.94); } }
.add-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.08); }
.add-tile .kemoji { width: 34px; height: 34px; margin-bottom: auto; }
.add-tile b { font: 700 13px var(--mono); }
.add-tile small { font: 10.5px/1.3 var(--mono); color: var(--muted); }
.add-tile__state { position: absolute; right: 12px; top: 12px; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--muted); }
.add-tile--auto.is-on { background: #fff; color: #000; border-color: #fff; }
.add-tile--auto.is-on small { color: #444; }
.add-tile--auto.is-on .kemoji { filter: invert(1); }
.add-tile--auto.is-on .add-tile__state { background: #000; border-color: #000; animation: auto-pulse 1.4s ease-in-out infinite; }

/* ---------- Режим «Сам» ---------- */
.auto-badge { display: flex; align-items: center; gap: 8px; margin: -4px -2px 8px; padding: 6px 6px 6px 8px; border-radius: 14px; background: #fff; color: #000; animation: add-in 0.36s cubic-bezier(0.2, 1.2, 0.35, 1) both; }
.auto-badge.is-leaving { animation: add-out 0.18s ease both; }
.auto-badge .kemoji { width: 26px; height: 26px; filter: invert(1); }
.auto-badge span { flex: 1; font: 700 12px var(--mono); }
.auto-badge small { display: block; font: 400 10px var(--mono); color: #555; margin-top: 1px; }
.auto-badge button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }
.auto-badge svg { width: 13px; height: 13px; }
.autonomy-chip { display: none !important; }
.auto-explain__inner, .usage__inner { padding-top: calc(60px + var(--safe-top)); gap: 14px; }
.auto-hero { display: grid; justify-items: start; gap: 8px; }
.auto-hero__emoji { width: 72px; height: 72px; }
.auto-hero h1 { font: 700 25px/1.18 var(--mono); letter-spacing: -0.05em; }
.auto-hero p { font: 14px/1.6 var(--font); color: var(--muted); }
.auto-steps { list-style: none; counter-reset: s; display: grid; gap: 10px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: rgba(13, 13, 13, 0.92); }
.auto-steps li { counter-increment: s; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; align-items: center; }
.auto-steps li::before { content: counter(s); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--mono); background: #fff; color: #000; }
.auto-steps b { font: 600 13px var(--mono); }
.auto-steps span { font: 11.5px var(--font); color: var(--muted); }
.auto-examples { display: grid; gap: 8px; }
.auto-example { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 16px; background-color: #070707; background-image: var(--dots); background-size: 7px 7px; border: 1px solid var(--line-strong);
  box-shadow: 3px 3px 0 rgba(255, 255, 255, 0.07); animation: tile-in 0.45s cubic-bezier(0.2, 1.1, 0.35, 1) both; animation-delay: calc(0.1s + var(--i, 0) * 60ms); }
.auto-example:active { transform: translate(2px, 2px); }
.auto-example .kemoji { width: 30px; height: 30px; }
.auto-example b { display: block; font: 700 12.5px var(--mono); }
.auto-example small { display: block; margin-top: 4px; font: 12.5px/1.45 var(--font); color: #bbb; }
.auto-note { font: 11px/1.6 var(--mono); color: var(--muted); }

/* ---------- Мои лимиты ---------- */
.usage-plan { display: flex; align-items: center; gap: 10px; font: 12px var(--mono); color: var(--muted); }
.usage-plan__badge { padding: 4px 9px; border-radius: 6px; background: #fff; color: #000; font: 700 11px var(--mono); letter-spacing: 0.08em; }
.usage-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: rgba(13, 13, 13, 0.92); animation: tile-in 0.45s cubic-bezier(0.2, 1, 0.35, 1) both; }
.usage-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 11.5px var(--mono); color: var(--muted); }
.usage-card__top b { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--mono); color: #fff; text-transform: uppercase; letter-spacing: 0.08em; }
.usage-card__top .kemoji { width: 22px; height: 22px; }
.usage-card__num { display: flex; align-items: baseline; gap: 8px; margin: 10px 0 2px; }
.usage-card__num strong { font: 700 30px var(--mono); letter-spacing: -0.04em; }
.usage-card__num small { font: 12px var(--mono); color: var(--muted); }
.usage-note { display: block; margin-top: 10px; font: 11px/1.55 var(--mono); color: var(--muted); }
.usage-bars { display: grid; gap: 12px; margin-top: 14px; }
.usage-bar__row { display: flex; justify-content: space-between; gap: 8px; font: 11.5px var(--mono); color: var(--muted); }
.usage-bar__row b { color: #fff; font-weight: 600; }
.usage-bar__track { height: 8px; margin-top: 6px; border-radius: 4px; background: #161616; overflow: hidden; }
.usage-bar__track i { display: block; height: 100%; width: var(--p); border-radius: 4px; background: #fff; transform-origin: left; animation: bar-grow 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(0.15s + var(--i, 0) * 70ms); }
@keyframes bar-grow { from { transform: scaleX(0); } }
.usage-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.usage-features span { padding: 10px 6px; border-radius: 12px; background: #000; border: 1px dashed var(--line-strong); text-align: center; font: 10px/1.3 var(--mono); color: var(--muted); }
.usage-features b { display: block; font: 700 18px var(--mono); color: #fff; margin-bottom: 3px; }
.usage-cta { margin-top: 6px; }

/* ---------- Поиск в интернете (адаптация WebSearch) ---------- */
.ws { margin-bottom: 10px; max-width: 100%; }
.ws__trigger { display: flex; align-items: center; gap: 9px; height: 40px; max-width: 100%; padding: 0 12px 0 6px; border-radius: 999px; background: #111; border: 1px solid var(--line-strong); color: #fff; transition: background 0.2s; }
.ws__trigger:active { background: #1a1a1a; }
.ws__globe { position: relative; width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #222; color: #aaa; }
.ws__globe > svg:first-child { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ws__ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; transition: opacity 0.3s 0.45s; }
.ws__ring-bg { opacity: 0.12; }
.ws__ring-fg { stroke-dasharray: 100; stroke-dashoffset: 92; transition: stroke-dashoffset 1.2s cubic-bezier(0.2, 0.9, 0.3, 1); }
.ws[data-status="done"] .ws__ring { opacity: 0; }
.ws__label { min-width: 0; overflow: hidden; }
.ws__text { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 600 12.5px var(--mono); }
.ws__text.is-swap { animation: ws-swap 0.45s cubic-bezier(0.2, 0.9, 0.3, 1); }
@keyframes ws-swap { from { opacity: 0; transform: translateY(6px); } }
.ws__text.is-shimmer { color: transparent; background: linear-gradient(90deg, #777 40%, #fff 50%, #777 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; animation: ws-shine 1.6s linear infinite; }
@keyframes ws-shine { from { background-position: 100% 0; } to { background-position: 0 0; } }
.ws__stack { display: flex; align-items: center; flex: none; }
.ws__stack-item { margin-left: -8px; padding: 2px; border-radius: 50%; background: #111; animation: fav-pop 0.5s cubic-bezier(0.2, 1.6, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.ws__stack-item:first-child { margin-left: 0; }
@keyframes fav-pop { from { transform: scale(0); opacity: 0; } }
.ws-fav { display: flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; color: #fff; font-weight: 700; text-transform: uppercase; line-height: 1; font-family: var(--mono); }
.ws__chev { width: 14px; height: 14px; flex: none; fill: none; stroke: #888; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1); transform: rotate(180deg); }
.ws.is-closed .ws__chev { transform: none; }
.ws__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.45s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.3s; }
.ws.is-closed .ws__panel { grid-template-rows: 0fr; opacity: 0; }
.ws__grid { min-height: 0; overflow: hidden; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 2px 2px; }
.ws__cell { animation: ws-card 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes ws-card { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
.ws__card { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 84px; padding: 10px; border-radius: 14px; background: #111; border: 1px solid var(--line); color: #fff; text-decoration: none; transition: transform 0.2s, background 0.2s; }
.ws__card:active { transform: translateY(-2px); background: #181818; }
.ws__title { font: 600 12px/1.35 var(--font); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws__meta { display: flex; align-items: center; gap: 6px; font: 10.5px var(--mono); color: var(--muted); min-width: 0; }
.ws__meta > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws__meta em { font-style: normal; opacity: 0.6; }
.ws__skeleton { position: relative; overflow: hidden; justify-content: flex-start; gap: 7px; }
.ws__skeleton i { display: block; height: 9px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); }
.ws__skeleton i:nth-child(1) { width: 88%; } .ws__skeleton i:nth-child(2) { width: 60%; } .ws__skeleton i:nth-child(3) { width: 40%; margin-top: auto; }
.ws__skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: ws-sweep 1.3s ease-in-out infinite; }
@keyframes ws-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.ws__more { align-items: flex-start; font: 600 12px var(--mono); }
.ws__less { align-items: center; justify-content: center; flex-direction: row; background: transparent; color: var(--muted); }
.perf-low .ws__text.is-shimmer { animation: none; color: #aaa; background: none; }

/* ---------- Изображение: без толстых рамок, открывается целиком ---------- */
.image-offer.is-generating { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
.grid-reveal-host { border-radius: 22px; min-height: 0; }
.grid-reveal-host [data-slot="grid-reveal"] { border-radius: 22px; }
.grid-reveal-host.is-ready, .chat-image-result { cursor: zoom-in; }
.viewer.is-protected img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; pointer-events: none; }

/* ---------- Плавность ---------- */
.composer textarea { transition: height 0.18s cubic-bezier(0.2, 0.9, 0.3, 1); }
.messages > .msg--static { animation: msg-fade 0.32s ease both; }
@keyframes msg-fade { from { opacity: 0; transform: translateY(6px); } }
.msg__stream { white-space: pre-wrap; }
.toast:not([hidden]) { animation: toast-in 0.38s cubic-bezier(0.2, 1.3, 0.35, 1) both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px) scale(0.92); } }
.drawer__chat { animation: msg-fade 0.3s ease both; }
.att { animation: tile-in 0.32s cubic-bezier(0.2, 1.2, 0.35, 1) both; }
.chat-image-mode { animation: add-in 0.34s cubic-bezier(0.2, 1.2, 0.35, 1) both; }
.swipe-option.is-girl { opacity: 0.55; cursor: not-allowed; filter: grayscale(1); }
.swipe-option .soon { font-style: normal; margin-left: 6px; vertical-align: 1px; }
.perf-low .messages > .msg--static, .perf-low .drawer__chat { animation: none; }

/* ---------- Уровень мышления: одна canvas вместо сотни анимированных точек ---------- */
.es__signal, .es__signal[data-mode="wave"] { display: block !important; }
.es__canvas { display: block; width: 243px; height: 23px; }
.es[data-effort="max"] { filter: none !important; }

@media (prefers-reduced-motion: reduce) {
  .add-sheet, .add-tile, .auto-example, .usage-card, .usage-bar__track i, .ws__cell, .ws__stack-item, .msg--static, .drawer__chat, .att, .toast { animation: none !important; }
}