/* CRUSTA — тёмный минимализм презентации: чёрно-зелёный, много воздуха, лайм-акцент */
:root {
  --bg: #0b0d09;
  --panel: #12150e;
  --panel2: #171b11;
  --line: #23281b;
  --fg: #ecefe6;
  --dim: #8c937d;
  --acc: #b6f24a;
  --red: #e5484d;
}
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 800px at 80% -10%, #17200e 0%, var(--bg) 55%);
  color: var(--fg);
  font: 15px/1.5 -apple-system, "SF Pro Text", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
.dim { color: var(--dim); }
.tiny { font-size: 11px; text-transform: none; letter-spacing: 0; }
button {
  font: inherit; border: 0; border-radius: 10px; cursor: pointer;
  background: var(--acc); color: #0e1403; padding: 10px 18px; font-weight: 650;
  transition: transform .06s ease, filter .15s ease;
}
button:hover { filter: brightness(1.06); }
button:active { transform: translateY(1px); }
button.ghost { background: transparent; color: var(--dim); border: 1px solid var(--line); font-weight: 500; }
input, textarea {
  font: inherit; color: var(--fg); background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; outline: none;
  transition: border-color .15s ease;
}
input:focus, textarea:focus { border-color: #3c4629; }
textarea { resize: none; }

/* ── логин ── */
.view.center { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px; }
.brand h1 { font-size: clamp(56px, 12vw, 120px); font-weight: 800; letter-spacing: -0.03em; line-height: .95; }
.brand .dot { color: var(--acc); }
.brand .sub { margin-top: 14px; color: var(--dim); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; text-align: center; }
.loginrow { display: flex; gap: 10px; width: min(420px, 90vw); }
.loginrow input { flex: 1; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 10px 4px; font-size: 18px; }
.loginrow input:focus { border-bottom-color: var(--acc); }

/* ── каркас ── */
#v-app { height: 100vh; display: flex; flex-direction: column; max-width: 860px; margin: 0 auto; padding: 0 18px; }
header { display: flex; align-items: center; gap: 26px; padding: 18px 2px 14px; border-bottom: 1px solid var(--line); }
.wordmark { font-weight: 800; letter-spacing: .02em; }
.wordmark .dot { color: var(--acc); }
nav { display: flex; gap: 18px; flex: 1; }
.tab { position: relative; background: none; color: var(--dim); padding: 4px 2px; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; border-radius: 0; }
.tab.active { color: var(--fg); box-shadow: inset 0 -2px 0 var(--acc); }
.badge { position: absolute; top: -2px; right: -10px; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); }

.pane { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 16px 0; position: relative; }
.pane > *:not(.themelayer) { position: relative; z-index: 1; }

/* тематический фон: контурные значки, салатовые, под размытием */
.themelayer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.themelayer svg { position: absolute; color: var(--acc); opacity: .09; filter: blur(1.4px); }

/* ── сообщения ── */
.msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 6px 2px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.m { max-width: 72%; padding: 10px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); white-space: pre-wrap; word-break: break-word; animation: rise .18s ease; }
.m.me { align-self: flex-end; background: #1a2410; border-color: #33421c; }
.m.ai { border-color: #2c3520; }
.m .who { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; display: flex; align-items: center; }
.m.ai .who { color: var(--acc); }
.m .who svg { display: block; }
.m.sys { align-self: center; background: none; border: 0; color: var(--dim); font-size: 12.5px; padding: 2px; }
.m.flash { border-color: var(--acc); }
.hid { display: none !important; }
.caret { display: inline-block; width: 8px; background: var(--acc); animation: blink .8s steps(1) infinite; margin-left: 2px; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } }

/* цитата reply внутри пузыря */
.rq {
  font-size: 12px; color: var(--dim); border-left: 2px solid var(--acc);
  padding: 2px 8px; margin: 2px 0 6px; background: rgba(182, 242, 74, .05);
  border-radius: 0 6px 6px 0; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
}
.rq svg { flex: none; }

/* мьют */
.mutebtn { background: none; color: var(--dim); padding: 0 2px; margin-left: 8px; font-weight: 400; font-size: 12px; opacity: 0; transition: opacity .12s; }
.m:hover .mutebtn { opacity: .9; }
@media (hover: none) { .mutebtn { opacity: .6; } }
.mutedrow { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 8px 2px 0; flex-wrap: wrap; }
.mchip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--panel); color: var(--dim); }
.mchip b { color: var(--red); cursor: pointer; font-weight: 700; margin-left: 4px; }

/* композер: кнопка ВНУТРИ поля ввода, справа */
.composer { position: relative; padding-top: 12px; }
.sendbtn { width: 38px; height: 38px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.composer > .sendbtn { position: absolute; right: 9px; bottom: 9px; }
.arr { display: inline-block; transition: transform .12s ease; }
.typing { min-height: 18px; font-size: 12.5px; color: var(--dim); padding: 2px 4px; }

/* панель ответа над композером */
.replybar {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--dim);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
}
.replybar .xbtn { background: none; color: var(--dim); padding: 0 4px; font-weight: 700; margin-left: auto; }
.replybar svg { flex: none; }

/* ── волны ── */
.waves-top { padding: 4px 2px 14px; }
.label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 13px;
  color: var(--fg); background: var(--panel);
  user-select: none; -webkit-user-select: none; touch-action: none;
  transition: transform .08s linear, border-color .12s ease, opacity .2s ease;
}
.chip b { color: var(--acc); font-weight: 650; }
.chip.armed { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; transform: scale(1.04); }
.chip.gone { opacity: 0; }
/* под-темы: свежее/светлее, та же стилистика */
.chip.sub { background: #1d2a12; border-color: #3f5522; color: #d7f7a4; cursor: pointer; animation: rise .15s ease; }
.chip.sub b { color: var(--red); font-weight: 700; }

/* приглашения от матчера */
.invites { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 12px; }
.invite {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel2); border: 1px solid #33421c; border-radius: 12px;
  padding: 10px 14px; animation: rise .18s ease;
}
.invite .itxt b { color: var(--acc); }
.invite button { padding: 7px 14px; font-size: 13px; }

.waves { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-content: start; padding: 2px; }
.wave {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 10px; cursor: pointer;
  transition: transform .12s ease, border-color .12s ease;
}
.wave:hover { transform: translateY(-2px); border-color: #3a4525; }
.wave .t { font-weight: 650; user-select: none; -webkit-user-select: none; touch-action: none; }
.wave .meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--dim); }
.meta .ppl { display: flex; align-items: center; gap: 5px; }
.meta .ppl svg { opacity: .85; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3a4525; display: inline-block; margin-left: 6px; }
.dot.on { background: var(--acc); }
.rninput {
  font: inherit; font-weight: 650; width: 100%;
  background: var(--panel2); border: 1px solid var(--acc); border-radius: 8px;
  padding: 3px 8px; color: var(--fg); outline: none;
}
.simbar { height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.simbar i { display: block; height: 100%; background: var(--acc); }
.empty { grid-column: 1/-1; color: var(--dim); text-align: center; padding: 40px 0; }

/* ── комната ── */
.roomhdr { display: flex; align-items: center; gap: 14px; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); }
#room-title { font-weight: 700; }
.alias { margin-left: auto; font-size: 12.5px; color: var(--acc); border: 1px solid #33421c; border-radius: 999px; padding: 4px 10px; }

/* ── тост ── */
#toast {
  position: fixed; right: 18px; bottom: 18px; max-width: 320px;
  background: var(--panel2); border: 1px solid #3a4525; border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; cursor: pointer; animation: rise .2s ease; z-index: 9;
}
#toast b { color: var(--acc); }

/* ── v2: приглашения, reply, жест ИИ, мьют, под-темы ── */
.tiny { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--dim); font-weight: 400; }
.waves-top { display: block; }

.invites { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 14px; }
.invite {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel2); border: 1px solid #33421c; border-radius: 12px;
  padding: 10px 14px; animation: rise .18s ease;
}
.invite .itxt b { color: var(--acc); }
.invite button { padding: 7px 14px; font-size: 13px; white-space: nowrap; }

.rq {
  font-size: 12px; color: var(--dim); border-left: 2px solid var(--acc);
  padding: 2px 8px; margin: 2px 0 6px; background: rgba(182, 242, 74, .06);
  border-radius: 0 6px 6px 0; cursor: pointer; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.replybar {
  display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--dim);
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel); margin-top: 8px;
}
.replybar .xbtn { background: none; color: var(--dim); padding: 0 4px; font-weight: 700; }
.m.flash { border-color: var(--acc); }
.hid { display: none !important; }

.mutebtn {
  background: none; color: var(--dim); padding: 0 2px; margin-left: 8px;
  font-weight: 400; font-size: 12px; opacity: 0; transition: opacity .12s; border-radius: 4px;
}
.m:hover .mutebtn { opacity: .9; }
@media (hover: none) { .mutebtn { opacity: .6; } }
.mutedrow { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 8px 2px 0; flex-wrap: wrap; }
.mchip { border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; background: var(--panel); color: var(--dim); }
.mchip b { color: var(--red); cursor: pointer; font-weight: 700; margin-left: 4px; }

.chip { user-select: none; -webkit-user-select: none; touch-action: none;
  transition: transform .08s linear, border-color .12s, opacity .2s, box-shadow .12s; }
.chip.armed { border-color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; transform: scale(1.04); }
.chip.gone { opacity: 0; }
.chip.sub { background: #1d2a12; border-color: #3f5522; color: #d7f7a4; animation: rise .15s ease; cursor: pointer; }
.chip.sub b { color: var(--red); font-weight: 700; margin-left: 4px; }

/* ── v3: кнопка внутри поля, тематический фон, статы, робот ── */
.composer { position: relative; display: block; padding-top: 12px; }

/* тематический фон: контурные значки салатового цвета под размытием */
.pane { position: relative; }
.pane > :not(.themebg) { position: relative; z-index: 1; }
.themebg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.themebg span {
  position: absolute;
  filter: brightness(0) invert(84%) sepia(38%) saturate(640%) hue-rotate(34deg) blur(1.3px);
  opacity: .13;
  /* дрейф (длительность/задержка задаёт JS) + независимый пульс: поворот туда-сюда,
     масштаб, дыхание прозрачности — символы то проявляются, то тают */
  animation:
    drift ease-in-out infinite alternate,
    themepulse 17s ease-in-out infinite alternate;
  animation-delay: inherit;
}
@keyframes drift {
  from { translate: 0 0; }
  to   { translate: 0 -14px; }
}
@keyframes themepulse {
  0%   { transform: rotate(calc(var(--r, 0deg) - 10deg)) scale(.85); opacity: .05; }
  35%  { opacity: .15; }
  60%  { transform: rotate(calc(var(--r, 0deg) + 8deg))  scale(1.1); }
  100% { transform: rotate(calc(var(--r, 0deg) - 4deg))  scale(.95); opacity: .08; }
}

/* статы волны: контурный человек + онлайн-точка, «—» если пусто */
.wave .meta { align-items: center; }
.stat { display: inline-flex; align-items: center; gap: 5px; margin-right: 12px; }
.stat svg { stroke: var(--dim); }
.stat .odot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); display: inline-block; }
.stat .odot.off { background: var(--line); }

/* робот вместо никнейма «ии» */
.boticon { display: inline-flex; vertical-align: -3px; color: var(--acc); }
.m.ai .who .boticon svg { stroke: var(--acc); width: 21px; height: 21px; } /* +50% над ответами AI */
.m.ai .who .boticon { vertical-align: -5px; }
.rq .boticon, .replybar .boticon { vertical-align: -3px; margin-right: 2px; }

/* инлайн-ренейм названия волны (персональный) */
.wave .t input.tedit {
  width: 100%; background: var(--panel2); border: 1px solid #3a4525;
  border-radius: 8px; padding: 6px 9px; font: inherit; font-weight: 650; color: var(--fg);
}
.wave { user-select: none; -webkit-user-select: none; }
.wave .t { touch-action: none; }

/* ── КОМПОЗЕР v4 (единый): кнопка отправки стоит НА месте каретки и едет с набором ── */
.composer { position: relative; display: block; padding-top: 12px; }
.composer textarea {
  width: 100%; max-height: 140px; padding-right: 44px;
  caret-color: transparent;                 /* родную каретку прячем — её роль играет кнопка */
}
/* зеркало для замера позиции каретки (вне экрана) */
.caret-mirror {
  position: absolute; top: -9999px; left: -9999px; visibility: hidden;
  box-sizing: border-box;   /* white-space/wrap/padding копируются из textarea в JS для точных переносов */
}
/* сама кнопка-курсор */
.caretbtn {
  width: 36px; height: 31px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 1;
  background: var(--acc); color: #05210a; font-weight: 700;
  transition: transform .05s linear, background .12s, left .7s cubic-bezier(.22,.61,.36,1), top .7s cubic-bezier(.22,.61,.36,1);
}
#dm-send { position: absolute; z-index: 3; }
.sendwrap.caretwrap {              /* обёртка кнопки волны: тоже позиционируется как курсор */
  position: absolute; z-index: 3; width: 36px; height: 31px;
}
/* единый плавный подъезд к каретке для обоих чатов (одна нода в личном, обёртка в комнате) */
#dm-send, .sendwrap.caretwrap {
  transition: left .7s cubic-bezier(.22,.61,.36,1), top .7s cubic-bezier(.22,.61,.36,1);
}
/* пока идёт жест — мгновенно, без плавного перехода */
#dm-send.dragging, .sendwrap.caretwrap.dragging { transition: none; }
#room-send { position: relative; width: 100%; height: 100%; touch-action: none; }
/* робот проступает под кнопкой при жесте вызова ИИ */
.botpad {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--acc); opacity: 0; pointer-events: none; transition: opacity .08s linear;
}
.sendwrap.caretwrap.armed #room-send { background: transparent; color: var(--acc); box-shadow: 0 0 0 1px var(--acc) inset; }
#cutpad { color: #f2c14a; }   /* ножницы «отрезания» — тёплый акцент */
/* короткая вспышка-подтверждение отсечения */
@keyframes cut-flash { 0% { box-shadow: 0 0 0 0 rgba(242,193,74,.6); } 100% { box-shadow: 0 0 0 14px rgba(242,193,74,0); } }
.cut-flash { animation: cut-flash .5s ease-out; }

/* ── v5: эквалайзер выбора модели + мета-строка ответа ── */
/* всплывающая лесенка моделей над кнопкой отправки (жест вверх) */
.mpick {
  position: absolute; z-index: 20; display: none;
  flex-direction: column-reverse;           /* низ = слабая, верх = сильная */
  gap: 5px; padding: 8px 9px;
  background: rgba(10,15,10,.92); border: 1px solid #2f3d1c; border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5); backdrop-filter: blur(6px);
  transform: translate(-50%, 0);
}
.mpick.on { display: flex; }
.mrow { display: flex; align-items: center; gap: 9px; opacity: .5; transition: opacity .1s, transform .1s; }
.mrow.sel { opacity: 1; transform: scale(1.04); }
.mbars { display: flex; align-items: flex-end; gap: 2px; height: 22px; width: 26px; }
.mbars i {
  flex: 1; background: var(--line); border-radius: 1.5px; transition: background .1s;
}
.mrow.sel .mbars i { background: var(--acc); }
.mrow.lit .mbars i { background: var(--acc); }        /* заполнение до выбранной ступени */
.mname { font-size: 12.5px; color: var(--fg); white-space: nowrap; letter-spacing: .02em; }
.mname .r { color: var(--acc); font-weight: 700; }
.mhint { font-size: 10.5px; color: var(--dim); text-align: center; margin-top: 2px; letter-spacing: .08em; text-transform: uppercase; }

/* мета под ответом ИИ: 🤖 | модель | $ | токены */
.aimeta {
  display: flex; align-items: center; gap: 8px; margin-top: 5px;
  font-size: 11px; color: var(--dim); font-variant-numeric: tabular-nums;
}
.aimeta .seg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.aimeta .sep { opacity: .35; }
.aimeta .boticon { color: var(--acc); }
.aimeta .mdl { color: #b6f24a; }
.aimeta .mdl .r { font-weight: 700; }
.aimeta .cost { color: var(--fg); opacity: .8; }


/* ── v6: правки по фидбеку ── */
/* робот-подкладка личного чата — того же цвета, «вопрос к ИИ» */
#dm-botpad, #dm-cutpad {
  position: absolute; z-index: 2; width: 36px; height: 31px;
  display: flex; align-items: center; justify-content: center;
  color: var(--acc); opacity: 0; pointer-events: none;
  transition: opacity .08s linear, left .7s cubic-bezier(.22,.61,.36,1), top .7s cubic-bezier(.22,.61,.36,1);
}
#dm-cutpad { color: #f2c14a; }   /* «отрезание» — тёплый акцент, отличать от робота */

/* пикер моделей — выше над кнопкой, не липнет */
.mpick { gap: 6px; padding: 9px 10px; }

/* СТАТИЧНЫЙ эквалайзер: у каждой строки свой фиксированный столбик-паттерн;
   курсор двигает выделение, полоски не «доливаются» */
.mrow { opacity: .45; padding: 2px 4px; border-radius: 8px; }
.mrow.sel { opacity: 1; transform: scale(1.05); background: rgba(182,242,74,.08); }
.mbars i { background: #45532b; }                 /* базовый цвет статичных полосок */
.mrow.sel .mbars i { background: var(--acc); }     /* подсвечиваем только выбранную строку */
.mrow.lit { }                                      /* заполнения больше нет — класс не используется */

/* мета ответа ИИ теперь в шапке, рядом с иконкой-роботом */
.m.ai .who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.who .aimeta { margin-top: 0; }
.who .aimeta .boticon { display: none; }          /* робот уже есть в шапке слева */
.who .aimeta .sep:first-of-type { display: none; }/* не начинать с разделителя */

/* поток размышлений thinking-модели (стирается по приходу ответа) */
.m.ai .think {
  font-size: 12px; color: #7d8a6a; font-style: italic; line-height: 1.5;
  border-left: 2px solid #3a4726; padding: 3px 0 3px 9px; margin: 2px 0 4px;
  white-space: pre-wrap; opacity: .85;
  max-height: 140px; overflow: hidden;
}
.m.ai .think::before { content: "размышляет… "; font-style: normal; color: var(--acc); opacity: .7; }
.m.ai .think.fade { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; margin: 0;
  transition: opacity .3s, max-height .3s, padding .3s, margin .3s; }

/* ── v7: анимации чипов + фиксы ── */
/* мерцание контура темы, из которой ИИ рождает под-темы (та ~секунда ожидания) */
@keyframes chip-pulse {
  0%,100% { box-shadow: 0 0 0 1px var(--acc) inset, 0 0 0 0 rgba(182,242,74,0); border-color: var(--acc); }
  50%     { box-shadow: 0 0 0 1px var(--acc) inset, 0 0 10px 2px rgba(182,242,74,.55); border-color: #d7f7a4; }
}
.chip.working { animation: chip-pulse .7s ease-in-out infinite; }

/* плавное затухание темы при свайпе вправо (скрытие) */
.chip.gone {
  opacity: 0; transform: scale(.8) translateX(24px);
  transition: opacity .55s ease, transform .55s ease, margin .35s ease .2s, padding .35s ease .2s, width .35s ease .2s;
  margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
  width: 0; overflow: hidden; white-space: nowrap; pointer-events: none;
}

/* под-темы появляются мягче */
.chip.sub { animation: rise .28s ease; }

/* ── v8: разделитель архива в списке комнат ── */
.arch-sep {
  grid-column: 1 / -1;              /* на всю ширину сетки — карточки уходят ПОД линию */
  display: flex; align-items: center; gap: 10px;
  margin: 14px 2px 8px; color: var(--dim);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
}
.arch-sep::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}
.wave.archived { opacity: .62; }
.wave.archived:hover { opacity: .85; }

/* мгновенная установка позиции (первый показ / жест) — без проезда */
#dm-send.no-anim, .sendwrap.caretwrap.no-anim, #dm-botpad.no-anim, #dm-cutpad.no-anim { transition: none !important; }

/* полный свайп влево -> готов отрезать контекст */
.sendwrap.caretwrap.cut-armed #room-send { background: transparent; color: #f2c14a; box-shadow: 0 0 0 1px #f2c14a inset; }
#dm-send.cut-armed { background: transparent; color: #f2c14a; box-shadow: 0 0 0 1px #f2c14a inset; }

/* маркер «отрезания» контекста в ленте — ассистент выше не смотрит */
.cut-marker {
  display: flex; align-items: center; gap: 10px; margin: 12px 4px;
  color: #f2c14a; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .85;
}
.cut-marker::before, .cut-marker::after {
  content: ""; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, #f2c14a55 0 6px, transparent 6px 12px);
}

/* ── v9: markdown + копирование ── */
.m { position: relative; }
.m .b b { color: #eaffd0; font-weight: 700; }
.m .b i { font-style: italic; opacity: .93; }
.m .b s { opacity: .6; }
.m .b a { color: var(--acc); text-decoration: underline; text-underline-offset: 2px; }
.m .b .li { display: block; padding-left: 2px; }
.m .b code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .89em; background: #10160e; border: 1px solid #2b3720;
  border-radius: 5px; padding: 1px 5px; color: #cdf58f;
}

/* блок кода: моноширинный, со скроллом и кнопкой copy */
.m .b pre.code {
  position: relative; margin: 8px 0; padding: 26px 12px 12px;
  background: #0b100a; border: 1px solid #2b3720; border-radius: 10px;
  overflow-x: auto;
}
.m .b pre.code code {
  display: block; background: none; border: 0; padding: 0;
  color: #d7f7a4; font-size: 12.5px; line-height: 1.55; white-space: pre;
}
.m .b pre.code .lang {
  position: absolute; top: 6px; left: 12px; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
}
.m .b pre.code .copy, .copy-msg {
  position: absolute; top: 5px; right: 6px; z-index: 2;
  background: #1a2413; color: var(--dim); border: 1px solid #33421c;
  border-radius: 6px; padding: 2px 8px; font-size: 10.5px; cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s, border-color .12s;
}
.m .b pre.code:hover .copy, .m:hover .copy-msg { opacity: 1; }
.m .b pre.code .copy:hover, .copy-msg:hover { color: var(--acc); border-color: var(--acc); }
.m .b pre.code .copy.ok, .copy-msg.ok { color: var(--acc); border-color: var(--acc); opacity: 1; }
/* копирование всего сообщения — в правом верхнем углу пузыря */
.copy-msg { top: 4px; right: 4px; font-size: 12px; padding: 1px 6px; line-height: 1.4; }
.m.sys .copy-msg { display: none; }
@media (hover: none) { .m .b pre.code .copy, .copy-msg { opacity: .55; } }



/* ── шестерёнка в шапке ── */
#gear-btn { display: inline-flex; align-items: center; margin-left: 10px;
  background: none; border: none; color: inherit; opacity: .5; cursor: pointer; padding: 2px; }
#gear-btn:hover, #gear-btn.on { opacity: 1; color: var(--acc); }
#gear-btn svg { display: block; }
#gear-btn.on svg { animation: gearspin 6s linear infinite; }
@keyframes gearspin { to { transform: rotate(360deg); } }

/* ── зелёная амбиентная подсветка: весь вьюпорт, без швов ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(48vmax 34vmax at 16% 8%,  rgba(182,242,74,.055), transparent 72%),
    radial-gradient(40vmax 30vmax at 86% 82%, rgba(182,242,74,.04),  transparent 72%);
  animation: ambience 28s ease-in-out infinite alternate;
}
@keyframes ambience { from { transform: scale(1); } to { transform: translate3d(1.5%,-1.5%,0) scale(1.05); } }

/* ── механизм часов: слой ПОД ВСЕМ САЙТОМ, интерфейс поверх ── */
#gears-layer { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#gears-layer[hidden] { display: none; }
#v-app, #v-login { position: relative; z-index: 1; }   /* контент всегда над механизмом */
#gears-layer .gear { position: absolute; }
/* большая: видна частью, ПЕРЕБИРАЕТ ЗУБЬЯМИ — доворот на зуб + пауза (без мигания) */
#gears-layer .g1 { width: 94vmin; right: -36vmin; top: -32vmin; opacity: .26;
  animation: tick 42s linear infinite; }
/* средняя в зацеплении: встречное плавное вращение (у тебя она и выглядела хорошо — не трогаю манеру) */
#gears-layer .g2 { width: 36vmin; left: -11vmin; bottom: 10%; opacity: .22;
  animation: spin-rev 54s linear infinite; }
#gears-layer .g3 { width: 17vmin; left: 31%; top: 7%; opacity: .17;
  animation: spin 78s linear infinite; }
#gears-layer .g4 { width: 11vmin; right: 27%; bottom: 26%; opacity: .15;
  animation: spin-rev 40s linear infinite; }
@keyframes tick {
  0.000% { transform: rotate(0deg); }
  1.667% { transform: rotate(30deg); }
  8.333% { transform: rotate(30deg); }
  10.000% { transform: rotate(60deg); }
  16.667% { transform: rotate(60deg); }
  18.333% { transform: rotate(90deg); }
  25.000% { transform: rotate(90deg); }
  26.667% { transform: rotate(120deg); }
  33.333% { transform: rotate(120deg); }
  35.000% { transform: rotate(150deg); }
  41.667% { transform: rotate(150deg); }
  43.333% { transform: rotate(180deg); }
  50.000% { transform: rotate(180deg); }
  51.667% { transform: rotate(210deg); }
  58.333% { transform: rotate(210deg); }
  60.000% { transform: rotate(240deg); }
  66.667% { transform: rotate(240deg); }
  68.333% { transform: rotate(270deg); }
  75.000% { transform: rotate(270deg); }
  76.667% { transform: rotate(300deg); }
  83.333% { transform: rotate(300deg); }
  85.000% { transform: rotate(330deg); }
  91.667% { transform: rotate(330deg); }
  93.333% { transform: rotate(360deg); }
  100% { transform: rotate(360deg); }
}
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }
/* стекло: тонировка везде + blur там, где поддержан */
#gears-layer .glassveil { position: absolute; inset: 0; background: rgba(11,13,9,.30); }
@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
  #gears-layer .glassveil { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

/* ── композер настроек: кнопка-каретка как в чате ── */
#cg-send { position: absolute; z-index: 3;
  transition: left .7s cubic-bezier(.22,.61,.36,1), top .7s cubic-bezier(.22,.61,.36,1); }
#cg-send.no-anim { transition: none; }

@media (prefers-reduced-motion: reduce) {
  #gears-layer .gear, body::before, #gear-btn.on svg { animation: none; }
}

/* консьерж: пары параметр—значение (страховочный рендер таблиц) */
.cg-kv { display: flex; flex-direction: column; gap: 3px; margin: 6px 0; }
.cg-kv div { display: flex; justify-content: space-between; gap: 14px;
  border-bottom: 1px dashed var(--line); padding: 2px 0; }
.cg-kv span:first-child { color: var(--dim); }
.cg-kv span:last-child { text-align: right; }