/* Вариант A «Живая форма» — главная «Работы» из утверждённых элементов (spec §1а). Чёрная земля; свет — только от формы
   и живых элементов; Geologica (выбор Александра 30.09). Сами элементы — el/elements.css, здесь — экран вокруг них. */

@import url('../../vendor/fonts/fonts.css');
@import url('./el/elements.css');
@import url('./el/talk.css');
@import url('./el/task.css');
@import url('./el/drawer.css');
@import url('./el/memory.css');
@import url('./el/conversations.css');

html[data-variant="a"], html[data-variant="a"] body { background: #03040b; }
.a-app { --f-text: 'Geologica', system-ui, sans-serif; --line: rgba(255,255,255,.07); --run: 80,200,255;
         min-height: 100vh; font-family: var(--f-text); }
.a-app .num { font-variant-numeric: tabular-nums; }
/* элементы рассчитаны на кнопку браузера (текст по центру); base.css наследует выравнивание — возвращаем для A */
:where(.a-app) button { text-align: center; }

/* верх: меню · капсула «Работа | Жизнь» · точка здоровья системы (дышит) */
.a-top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; justify-items: center;
         padding: calc(var(--safe-top) + 8px) 12px 18px; background: linear-gradient(180deg, #03040b 72%, rgba(3,4,11,0)); }
.a-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; color: var(--ink); }
.a-ic .ph { width: 22px; height: 22px; }
.a-health { --c: 123,235,196; }
.a-health[data-tone="wait"] { --c: 255,195,122; } .a-health[data-tone="quota"] { --c: 150,130,240; }
.a-health[data-tone="bad"] { --c: 255,130,120; } .a-health[data-tone="off"] { --c: 140,150,172; }
.a-health i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--c)); box-shadow: 0 0 12px rgb(var(--c));
              animation: a-breathe 4.2s ease-in-out infinite; }
@keyframes a-breathe { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }

.a-main { padding: 0 20px calc(var(--safe-bottom) + 132px); }

/* форма, фраза, цифры */
.a-hero { display: flex; flex-direction: column; align-items: center; text-align: center; }
.a-slot { position: relative; width: calc(100% + 40px); margin: -14px -20px 0; height: 292px; }
.l-form { position: absolute; inset: 0; -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
          mask-image: radial-gradient(closest-side, #000 72%, transparent); }
.l-form canvas { display: block; width: 100%; height: 100%; }
.a-phrase { margin: -10px 0 0; font-size: 33px; font-weight: 300; line-height: 1.12; letter-spacing: -.045em; }
.a-phrase button { font: inherit; letter-spacing: inherit; line-height: inherit; text-align: center; }
.a-phrase button:disabled { opacity: 1; cursor: default; }
/* ключевое слово — плотнее и в цвете формы */
.a-phrase em { --g: #cdbbff, #8fd8ff 60%, #b9a6ff; font-style: normal; font-weight: 500;
               background: linear-gradient(100deg, var(--g)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.a-hero[data-form="think"] em { --g: #9fe6ff, #8f9bff 55%, #d49bff; }
.a-hero[data-form="wait"] em { --g: #ffd2a3, #ff9fc4 70%, #c9a8ff; }
.a-hero[data-form="error"] em { --g: #ffb3a3, #ff7a86 70%; }
.a-hero[data-form="quota"] em { --g: #b6aee6, #7f8fc4 80%; }
.a-hero[data-form="offline"] em { --g: #c3c8d6, #8a92a6 80%; }

.a-figs { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; margin-top: 22px; }
.a-fig { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 0; }
.a-fig + .a-fig { border-left: 1px solid var(--line); }
.a-fig b { font-size: 44px; font-weight: 200; line-height: 1; letter-spacing: -.05em; }
.a-fig span { font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.a-fig[data-tone="waiting"] b { color: var(--warm); text-shadow: 0 0 22px rgba(255,170,90,.45); }
.a-fig[data-tone="idle"] b { color: rgba(243,241,255,.28); }

/* Пока тебя не было — строка под цифрами; раскрыта — стекло: ALEX своими словами и события со временем */
.a-since { width: 100%; margin-top: 20px; }
.a-since__line { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 38px; padding: 0 12px 0 16px; border-radius: 19px;
                 font-size: 14px; color: var(--dim); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.a-since__line .num { color: var(--ink); }
.a-since__line .ph { width: 14px; height: 14px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.a-since[data-open="true"] .a-since__line .ph { transform: rotate(90deg); }
.a-since__panel { margin-top: 12px; padding: 18px 18px 8px; }
.a-since__brief { position: relative; margin: 0 0 10px; font-size: 15px; font-weight: 300; line-height: 1.5; letter-spacing: -.01em; color: rgba(243,241,255,.88); }
.a-since__ev { position: relative; margin: 0; padding: 0; list-style: none; }
.a-since__ev li { display: grid; grid-template-columns: 42px 7px minmax(0, 1fr); gap: 12px; align-items: center; padding: 11px 0;
                  border-top: 1px solid var(--edge); font-size: 14px; }
.a-since__ev .num { font-size: 13px; color: var(--faint); }
.a-since__ev i { width: 7px; height: 7px; border-radius: 50%; background: rgb(150,130,255); box-shadow: 0 0 10px rgb(150,130,255); }
.a-since__ev [data-tone="done"] i { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.a-since__ev [data-tone="failed"] i { background: var(--fail); box-shadow: 0 0 10px var(--fail); }
.a-since__ev [data-tone="waiting"] i { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.a-since__t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.a-since__more { position: relative; margin: 0; padding: 4px 0 8px 54px; font-size: 13px; color: var(--faint); }

/* лента: блоки встают снизу по очереди; касание — сразу на месте */
.a-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 30px; }
.a-blk { scroll-margin-top: calc(var(--safe-top) + 84px); transition: opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
         transition-delay: calc(var(--i) * 80ms + 300ms); }
:not(.is-entered) > .a-app .a-blk { opacity: 0; transform: translateY(24px); }
.a-settle .a-blk { transition: none; }
.a-blk__lbl { display: flex; align-items: center; gap: 8px; margin: 12px 6px 10px; font-size: 11px; font-weight: 500; letter-spacing: .22em;
              text-transform: uppercase; color: rgb(var(--run)); }
.a-blk__lbl .num { margin-left: auto; letter-spacing: 0; font-size: 12px; color: var(--faint); }
/* решение светится в такт дыханию формы «ждёт» (pulse form.js: sin(t·2.6) — период 2,42 с) */
.a-blk .dcf__card .dc1__core { animation: a-glow 2.42s ease-in-out infinite; }
@keyframes a-glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

/* быстрые запросы — над полем ввода, пока формулируешь */
.a-asks { position: fixed; left: 0; right: 0; z-index: 11; bottom: calc(var(--a-dock-h, 76px) + var(--kb-inset)); display: flex; gap: 8px;
          margin: 0; padding: 0 16px 10px; overflow-x: auto; list-style: none; scrollbar-width: none;
          opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .3s, transform .3s; }
.a-asks::-webkit-scrollbar { display: none; }
[data-composing="true"] .a-asks { opacity: 1; transform: none; pointer-events: auto; }
.a-asks button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 19px; white-space: nowrap;
                 font-size: 14px; color: rgba(230,226,255,.9); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
                 -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.a-asks .ph { width: 16px; height: 16px; color: rgba(143,216,255,.85); }

/* разговор (spec §2): шапка-панель, ходы; верх — ‹ · проект · здоровье, без капсулы */
.a-top--talk { display: block; justify-items: stretch; padding-bottom: 22px; background: linear-gradient(180deg, #03040b 80%, rgba(3,4,11,0)); }
.a-talk { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 2px; }
.a-talk .th3__panel { margin-top: 0; }
.a-talk .tr-line .tr-step:last-child[data-state="active"] { animation: a-rise .7s cubic-bezier(.22,1,.36,1) both; }  /* новый шаг встаёт снизу */
@keyframes a-rise { from { opacity: 0; transform: translateY(12px); } }

.a-totask { margin: -4px auto 0; }

/* экран «Задачи» */
.a-h1 { margin: 4px 2px 16px; font-size: 30px; font-weight: 300; letter-spacing: -.04em; }

/* «Система»: форма с орбитами ёмкости */
.a-slot--sys { height: 316px; }
.a-sys .a-phrase { margin-top: 18px; }  /* ниже орбит: фраза не наезжает на нижнюю дугу и свечение (Александр 01.10) */
.a-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; margin: 16px 0 0; font-size: 13px; color: var(--dim); }
.a-legend span { display: inline-flex; align-items: center; gap: 7px; }
.a-legend b { font-weight: 400; color: var(--ink); }
.a-legend i { width: 14px; height: 2px; border-radius: 1px; background: #3fcfff; box-shadow: 0 0 8px #3fcfff; }
.a-legend i[data-c="w"] { background: #a07bff; box-shadow: 0 0 8px #a07bff; }
/* отсчёт до сброса окон Claude — цветом своей орбиты (5 ч — циан, неделя — фиолет); тикает раз в 20 с */
.a-resets { --o: 63,207,255; }
.a-resets i[data-c="5h"], .a-resets [data-c="5h"] { --o: 63,207,255; } .a-resets i[data-c="w"], .a-resets [data-c="w"] { --o: 160,123,255; }
.a-resets i { flex: none; width: 14px; height: 2px; border-radius: 1px; background: rgb(var(--o)); box-shadow: 0 0 8px rgb(var(--o)); }
.a-legend--small { margin-top: 12px; font-size: 12.5px; }
/* 1 строки */
.a-resets--rows { display: grid; gap: 8px; width: 100%; max-width: 330px; margin: 16px auto 0; padding: 0; list-style: none; }
.a-resets--rows li { display: grid; grid-template-columns: 14px auto 1fr auto; align-items: center; gap: 10px; font-size: 14px; color: var(--dim); text-align: left; }
.a-resets--rows .a-resets__in b { font-weight: 400; color: var(--ink); }
.a-resets__at { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
/* 2 цифры */
.a-resets--nums { display: grid; grid-template-columns: 1fr 1fr; width: 100%; margin-top: 18px; }
.a-resets--nums > div { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.a-resets--nums > div + div { border-left: 1px solid var(--edge); }
.a-resets__big { font-size: 34px; font-weight: 200; line-height: 1; letter-spacing: -.045em; color: var(--ink); white-space: nowrap; }
.a-resets--nums .a-resets__big { color: rgb(var(--o)); text-shadow: 0 0 22px rgba(var(--o),.45); }
.a-resets--nums span { font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
/* 3 капсулы */
.a-resets--caps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 18px; }
.a-resets__cap { position: relative; overflow: hidden; display: grid; gap: 8px; justify-items: start; padding: 14px 16px; border-radius: 22px; text-align: left;
                 background: radial-gradient(120% 120% at 0% 0%, rgba(var(--o),.16), transparent 60%), linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02) 60%);
                 box-shadow: inset 0 1px 0 rgba(255,255,255,.09), inset 0 0 0 1px rgba(255,255,255,.05); }
.a-resets__k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--dim); }
.a-resets__k b { font-weight: 400; color: var(--ink); }
.a-resets__cap .a-resets__big { font-size: 28px; }
.a-resets__cap .a-resets__at { white-space: normal; line-height: 1.45; }
.a-resets__cap .a-resets__at b { font-weight: 400; color: var(--dim); }
.a-sysfeed { margin-top: 26px; }
.a-integr, .a-bg { padding: 18px 16px 6px; }  /* панель с заголовком — как «Ждут ответа», «Итоги»: воздух сверху и снизу */
:is(.a-integr, .a-bg) > :not(.sx-core) { position: relative; }
:is(.a-integr, .a-bg) .dc-head { margin-bottom: 4px; }
.a-int { grid-template-columns: 22px minmax(0, 1fr) auto; cursor: default; } button.a-int { cursor: pointer; }
.a-slot--sys .l-form { -webkit-mask-image: radial-gradient(closest-side, #000 90%, transparent); mask-image: radial-gradient(closest-side, #000 90%, transparent); }
.a-int > .ph:first-child { width: 20px; height: 20px; color: rgba(214,208,255,.8); }
.a-int[data-state="off"] { opacity: .6; }
.a-int__until { font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.a-int__until[data-soon="true"] { color: #FFC37A; }

/* «Память» и «Архивариус»: большая форма — в слоте героя; поле ввода — своё («Спросить Архивариуса…») */
/* форма «Памяти» и «Архивариуса» — того же размера, что на главной (Александр 01.10): тот же слот .a-slot, 232 */
.mm-hero .mm-slot { flex: none; }
:is(.a-memory, .a-arch) .mm-phrase { margin-top: -10px; }

/* «Разговоры»: под поиском и фильтром — список с воздухом (подпись дня — отдельным элементом сетки) */
.a-conv__list { margin-top: 14px; }

/* разделы, которые ещё не собраны */
.a-stub { padding-top: 40px; }
.a-stub .a-phrase { text-align: left; }
.a-meta { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--dim); }

/* Чат, поле ввода, меню «+», шторка (общие с v2) — в грамматике A (Александр 01.10: «темнее под фон… чат тоже
   чёрный»): чёрная земля, тёмное стекло без синевы, тонкая светлая кромка; цвет — только у смысла (идёт — циан,
   ждёт — янтарь, готово — бирюза, сбой — коралл). Переменные v2 объявлены только для v2 — здесь свои. */
html[data-variant="a"] {
  --v-bg: #03040b; --v-card: #06070e; --v-fg: #F3F1FF; --v-fg-2: rgba(222,220,255,.64); --v-fg-3: rgba(208,204,255,.46);
  --v-line: rgba(255,255,255,.07); --v-soft: cubic-bezier(.22,1,.36,1); --v-dock-h: 74px;
  --v-blue: #50c8ff; --v-blue-text: #8fd8ff; --v-amber: #ffb26e; --v-amber-text: #FFC37A; --v-green: #3fe8c4; --v-green-text: #7BEBC4;
  --v-red: #ff6e64; --v-red-text: #ff9f95;
  --a-glass: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.018) 55%);
  --a-edge: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.05);
}
html[data-variant="a"] :is(.v-card, .v-task) { background-color: #05060c; background-image: var(--a-glass); border-color: transparent;
  box-shadow: var(--a-edge), 0 40px 70px -40px rgba(0,0,0,.9); }
html[data-variant="a"] .v-msg__text { background-image: linear-gradient(160deg, rgba(120,105,255,.2), rgba(120,105,255,.07));
  border-color: rgba(160,145,255,.16); }
html[data-variant="a"] .v-step[data-state="active"] .v-step__mark { background: rgba(80,200,255,.12); }

/* поле ввода: стекло на чёрном; в фокусе — кромка светлее, без синего кольца */
html[data-variant="a"] .v-composer { background-color: rgba(5,6,12,.72); background-image: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border-color: transparent; box-shadow: var(--a-edge), 0 30px 60px -20px rgba(0,0,0,.7);
  -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%); border-radius: 31px; }
html[data-variant="a"] .v-dock[data-state="focus"] .v-composer { border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -20px rgba(0,0,0,.9); }
html[data-variant="a"] .v-composer__field { font-family: inherit; }
html[data-variant="a"] .v-composer__plus { background: rgba(255,255,255,.06); }
html[data-variant="a"] .v-composer__send:not(:disabled) { background: #F3F1FF; color: #0b0a12; }
html[data-variant="a"] [data-composing="true"] .v-dock { background: linear-gradient(to top, #03040b 70%, rgba(3,4,11,0)); }
html[data-variant="a"] .v-compose-scrim { background: rgba(3,4,11,.84); }
html[data-variant="a"] .v-att { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
html[data-variant="a"] :is(.v-att__kind, .v-att__x) { color: rgba(222,220,255,.7); }

/* меню «+»: то же стекло, плитки и строки — едва светлее земли */
html[data-variant="a"] .v-sheet { background-color: rgba(5,6,12,.94); background-image: var(--a-glass); border-color: transparent;
  box-shadow: var(--a-edge), 0 30px 70px -24px rgba(0,0,0,.95); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); }
html[data-variant="a"] :is(.v-sheet__tile, .v-sheet__row-ic) { background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
html[data-variant="a"] :is(.v-sheet__tile, .v-sheet__row):active { background: rgba(255,255,255,.08); }
html[data-variant="a"] :is(.v-sheet__tile-ic .ph, .v-sheet__row-ic .ph, .v-work__ic .ph) { color: rgba(214,208,255,.82); }
html[data-variant="a"] .v-sheet__field { background: rgba(0,0,0,.4); border-color: rgba(255,255,255,.1); }
html[data-variant="a"] .v-sheet__field:focus { border-color: rgba(255,255,255,.28); }

/* шторка */
.a-drawer .v-drawer__panel { background: rgba(3,4,11,.96); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.06), 30px 0 80px -30px #000; padding: calc(var(--safe-top) + 14px) 14px calc(var(--safe-bottom) + 16px); }
.a-drawer .v-drawer__panel > .dw { flex: 1 0 auto; }
.a-label { margin: 0 0 12px; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.a-nav { margin: 0 0 26px; padding: 0; list-style: none; }
.a-nav button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 46px; font-size: 22px; font-weight: 300; line-height: 1.1;
                letter-spacing: -.02em; text-align: left; }
.a-nav button .num { margin-left: auto; font-size: 14px; color: var(--warm); }
.a-nav--sm button { font-size: 17px; min-height: 40px; }
.a-nav--sm .a-meta { margin: 0 0 0 auto; font-size: 13px; }
.a-pdot { width: 8px; height: 8px; border-radius: 50%; }
.a-new { height: 48px; padding: 0 22px; border-radius: 24px; font-size: 15px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }

/* загрузка */
.a-sk { color: transparent; background: rgba(255,255,255,.05); border-radius: 12px; width: 70%; }
.a-sk-blk { height: 132px; border-radius: 28px; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }

@media (prefers-reduced-motion: reduce) { .a-app *, .a-blk { transition: none !important; animation: none !important; } }