/* Кабинет работ — по утверждённому макету (site_mockup): три колонки, синий акцент,
   фиолетовые шаблоны, голубой Telegram, тонкие рамки и тени только у всплывающего.
   Значки только SVG. Тёмная тема — те же токены. Узкие экраны — в конце файла. */
@import url('/fonts/fonts.css');

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #eceef2;
  --field: #fafbfc;
  --chat-bg: #f7f8fa;
  --text: #1b1f24;
  --text-2: #3d4450;
  --muted: #6b7482;
  --muted-2: #8a93a3;
  --border: #e3e6eb;
  --border-2: #dfe3e8;
  --line: #eceef2;
  --primary: #1f6fff;
  --primary-hover: #1a5fe0;
  --primary-soft: #eaf1ff;
  --primary-ring: #d6e4ff;
  --violet: #7b5cff;
  --violet-text: #6a4fd6;
  --violet-soft: #f6f2ff;
  --violet-line: #e3d9ff;
  --tg: #229ed9;
  --tg-text: #167cb0;
  --tg-soft: #eef8fd;
  --tg-line: #bfe3f5;
  --green: #2fb86a;
  --green-text: #1f8a52;
  --green-soft: #e6f6ee;
  --orange: #f2a516;
  --orange-text: #b86e00;
  --orange-soft: #fff3e0;
  --red: #e5484d;
  --red-text: #d93a3f;
  --red-soft: #fde2e2;
  --yellow-soft: #fff8db;
  --yellow-line: #f3e3a0;
  --yellow-text: #6b5300;
  --gray-dot: #c3c9d2;
  --on-primary: #ffffff;
  --shadow-pop: 0 12px 32px rgba(20, 24, 31, .16);
  --shadow-toast: 0 10px 30px rgba(0, 0, 0, .25);
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --tap: 36px;
  --side-w: 380px;
  --right-w: 400px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0f1115; --surface: #16191f; --surface-2: #1d2128; --surface-3: #252a33; --field: #1a1e25;
  --chat-bg: #121419; --text: #e8eaee; --text-2: #c4c9d2; --muted: #9aa3b2; --muted-2: #7d8696;
  --border: #2a2f39; --border-2: #323845; --line: #252a33;
  --primary: #4b8bff; --primary-hover: #6aa0ff; --primary-soft: #16233d; --primary-ring: #1f3560;
  --violet: #9b84ff; --violet-text: #b3a2ff; --violet-soft: #221d38; --violet-line: #3a3163;
  --tg: #2aa9e6; --tg-text: #6cc6f0; --tg-soft: #11283a; --tg-line: #1e4a66;
  --green: #3dd68c; --green-text: #5fe0a2; --green-soft: #12291f;
  --orange: #f5b13d; --orange-text: #f5b13d; --orange-soft: #2e2311;
  --red: #ff6369; --red-text: #ff7a7f; --red-soft: #33161a;
  --yellow-soft: #2b2611; --yellow-line: #4d4317; --yellow-text: #ead68a; --gray-dot: #4a5260;
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5); --shadow-toast: 0 10px 30px rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115; --surface: #16191f; --surface-2: #1d2128; --surface-3: #252a33; --field: #1a1e25;
    --chat-bg: #121419; --text: #e8eaee; --text-2: #c4c9d2; --muted: #9aa3b2; --muted-2: #7d8696;
    --border: #2a2f39; --border-2: #323845; --line: #252a33;
    --primary: #4b8bff; --primary-hover: #6aa0ff; --primary-soft: #16233d; --primary-ring: #1f3560;
    --violet: #9b84ff; --violet-text: #b3a2ff; --violet-soft: #221d38; --violet-line: #3a3163;
    --tg: #2aa9e6; --tg-text: #6cc6f0; --tg-soft: #11283a; --tg-line: #1e4a66;
    --green: #3dd68c; --green-text: #5fe0a2; --green-soft: #12291f;
    --orange: #f5b13d; --orange-text: #f5b13d; --orange-soft: #2e2311;
    --red: #ff6369; --red-text: #ff7a7f; --red-soft: #33161a;
    --yellow-soft: #2b2611; --yellow-line: #4d4317; --yellow-text: #ead68a; --gray-dot: #4a5260;
    --shadow-pop: 0 12px 32px rgba(0, 0, 0, .5); --shadow-toast: 0 10px 30px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ---------- основа ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.5 Arial, 'Liberation Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
textarea, input, select { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
.muted { color: var(--muted); }
code, pre { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
::selection { background: var(--primary-soft); }
*:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.only-mobile, .only-narrow { display: none !important; }

/* ---------- кнопки ---------- */
.btn, .primary, .ghost, .danger-ghost, .green-btn, .violet-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 15px; border-radius: var(--radius-sm);
  font-size: 14.5px; font-weight: 700; white-space: nowrap; transition: background .14s, border-color .14s, color .14s;
}
.primary { background: var(--primary); color: var(--on-primary); }
.primary:hover { background: var(--primary-hover); }
.primary:disabled, .ghost:disabled, .green-btn:disabled { opacity: .5; cursor: default; }
.ghost { background: var(--surface); border: 1px solid var(--border-2); color: var(--text-2); }
.ghost:hover { background: var(--surface-2); }
.danger-ghost { background: var(--surface); border: 1px solid var(--border-2); color: var(--red-text); }
.danger-ghost:hover { background: var(--red-soft); border-color: transparent; }
.green-btn { background: var(--green); color: #fff; }
.green-btn:hover { filter: brightness(1.05); }
.violet-btn { background: var(--violet-soft); border: 1px solid var(--violet-line); color: var(--violet-text); justify-content: flex-start; white-space: normal; text-align: left; padding-top: 8px; padding-bottom: 8px; }
.violet-btn:hover { border-color: var(--violet); }
.tg-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--radius-sm);
  border: 1px solid var(--tg-line); background: var(--tg-soft); color: var(--tg-text); font-weight: 700; font-size: 14.5px; white-space: nowrap; }
.tg-btn:hover { border-color: var(--tg); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap);
  border-radius: var(--radius-sm); color: var(--muted); transition: background .14s, color .14s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.link { color: var(--primary); font-weight: 600; font-size: 14px; white-space: nowrap; }
.link:hover { text-decoration: underline; }
.link.tgc { color: var(--tg-text); }

/* Круглая кнопка «в Telegram» в строке файла. */
.tg { width: 28px; height: 28px; border-radius: 50%; background: var(--tg); color: #fff; display: inline-flex;
  align-items: center; justify-content: center; flex: none; transition: transform .12s, filter .12s; }
.tg .ic { width: 15px; height: 15px; stroke-width: 1.6; fill: #fff; stroke: #fff; }
.tg:hover { filter: brightness(1.08); transform: scale(1.05); }
.tg.sm { width: 22px; height: 22px; }
.tg.sm .ic { width: 12px; height: 12px; }

/* ---------- каркас ---------- */
.layout { display: flex; height: var(--app-h, 100dvh); overflow: hidden; }
.side {
  width: var(--side-w); min-width: 240px; max-width: 560px; flex: none; position: relative;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding-top: env(safe-area-inset-top);
}
.side-mode { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.resizer { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 5; }
.resizer:hover, .resizer.drag { background: linear-gradient(90deg, transparent 3px, var(--primary) 3px, var(--primary) 5px, transparent 5px); }
.sh { padding: 8px 14px 6px; display: flex; align-items: center; gap: 10px; }
.sh h1 { font-size: 21px; margin: 0; flex: 1; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: none; }
.sh-btns .btn-new { justify-content: center; }
.btn-new {
  display: inline-flex; align-items: center; gap: 4px; background: var(--primary); color: #fff;
  border-radius: 9px; padding: 6px 10px 6px 8px; font-weight: 700; font-size: 15px; white-space: nowrap;
}
.btn-new:hover { background: var(--primary-hover); }
.btn-new .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.btn-new.violet { background: var(--violet); }
.btn-new.violet:hover { filter: brightness(1.06); }
.btn-new.violet.on { box-shadow: 0 0 0 3px var(--violet-line); }
.btn-new i { font-style: normal; font-size: 12px; font-weight: 600; opacity: .85; margin-left: 2px; }
.btn-new i:empty { display: none; }
.back { display: flex; align-items: center; gap: 4px; color: var(--primary); font-weight: 600; font-size: 15px; padding: 16px 16px 0; align-self: flex-start; }
.back .ic { width: 16px; height: 16px; stroke-width: 2.2; }

.search {
  margin: 0 14px; height: 34px; border: 1px solid var(--border-2); border-radius: 8px; display: flex;
  align-items: center; padding: 0 10px 0 12px; gap: 9px; color: var(--muted-2); background: var(--field); flex: none;
  transition: border-color .14s, box-shadow .14s;
}
.search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.search input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-size: 15px; color: var(--text); }
.search input::placeholder { color: var(--muted-2); }
.search input::-webkit-search-cancel-button { display: none; }
.search .clear { display: inline-flex; color: var(--muted-2); padding: 4px; border-radius: 6px; }
.search .clear:hover { color: var(--text); }
.search-wrap { position: relative; flex: none; }
/* Ярлык режима поиска внутри строки: «Название» или «Переписка». */
.smode {
  display: flex; align-items: center; gap: 4px; flex: none; height: 20px; padding: 0 7px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
}
.smode:hover { border-color: var(--border-2); color: var(--text); }
.smode .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.smode.by-chat { color: var(--violet-text); background: var(--violet-soft); border-color: var(--violet-line); }
.mode-pop { right: 14px; top: calc(100% + 6px); width: 262px; }
.mode-pop button { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.mode-pop button:hover, .mode-pop button:focus-visible { background: var(--surface-2); }
.mode-pop button.on { background: var(--primary-soft); }
.mode-pop button .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--muted); }
.mode-pop b { display: block; font-size: 13.5px; font-weight: 600; }
.mode-pop small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; margin-top: 1px; }

.chips { display: flex; gap: 6px; padding: 6px 14px 2px; flex: none; }
.chip { font-size: 14.5px; padding: 4px 9px; border-radius: 8px; color: var(--text-2); background: var(--surface-2); white-space: nowrap; }
.chip i { font-style: normal; color: var(--muted-2); margin-left: 5px; }
.chip.on { background: var(--text); color: var(--surface); }
.chip.on i { color: var(--muted-2); }
/* Фильтр работ - переключатель: общая серая подложка, активная половина белая. */
#filters { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin: 6px 12px 2px; padding: 3px; border-radius: 9px; background: var(--surface-2); }
#filters .chip { background: none; border-radius: 7px; text-align: center; }
#filters .chip.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#filters .chip.on i { color: var(--muted-2); }

.list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 6px; }
.list::-webkit-scrollbar, .chat::-webkit-scrollbar, .scroll::-webkit-scrollbar { width: 8px; }
.list::-webkit-scrollbar-thumb, .chat::-webkit-scrollbar-thumb, .scroll::-webkit-scrollbar-thumb {
  background: var(--border-2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
.grp { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); padding: 7px 8px 2px;
  display: flex; justify-content: space-between; font-weight: 700; }
.list-note { padding: 14px 10px; color: var(--muted); font-size: 14px; }
.list-back { display: flex; align-items: center; gap: 6px; color: var(--primary); font-weight: 600; padding: 8px 10px 4px; font-size: 14.5px; }
.list-back .ic { width: 16px; height: 16px; }

.it {
  display: flex; gap: 9px; padding: 7px 8px; border-radius: 8px; align-items: flex-start; position: relative;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.it:hover { background: var(--surface-2); }
.it.on { background: var(--primary-soft); box-shadow: inset 4px 0 0 var(--primary); }
.st { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: none; background: var(--gray-dot); }
.st.busy { background: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); animation: breathe 1.6s ease-in-out infinite; }
.st.work { background: var(--primary); }
.st.review { background: var(--orange); }
.st.done { background: var(--green); }
.st.broken { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
@keyframes breathe { 50% { box-shadow: 0 0 0 5px var(--primary-ring); } }
.it .tg.sm { margin-top: 1px; }
.tx { flex: 1; min-width: 0; }
.t { font-size: 15.5px; line-height: 21px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t mark { background: color-mix(in srgb, var(--primary) 22%, transparent); color: inherit; border-radius: 3px; }
.m { font-size: 13px; color: var(--muted); margin-top: 2px; display: flex; gap: 7px; align-items: center; white-space: nowrap; overflow: hidden; }
.m .red { color: var(--red-text); }
.m .pin { width: 13px; height: 13px; color: var(--muted-2); }
.snip { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.snip .who { color: var(--muted-2); }
.snip mark { background: var(--yellow-soft); color: inherit; box-shadow: inset 0 -1px 0 var(--yellow-line); border-radius: 2px; }
.tag { font-size: 12px; padding: 0 6px; border-radius: 5px; background: var(--surface-3); color: var(--text-2); line-height: 18px; flex: none; }
.tag.v { background: var(--violet-soft); color: var(--violet-text); }
.tag.k { background: var(--green-soft); color: var(--green-text); }
.tag.r { background: var(--orange-soft); color: var(--orange-text); }
.tag.t { background: var(--tg-soft); color: var(--tg-text); }
.dots {
  width: 30px; height: 30px; border-radius: 7px; display: none; align-items: center; justify-content: center;
  color: var(--muted); background: var(--surface); border: 1px solid var(--border-2); flex: none; align-self: center;
}
.dots .ic { width: 16px; height: 16px; fill: currentColor; }
.it:hover .dots, .it.menu-open .dots { display: inline-flex; }
.it.menu-open { background: var(--surface-2); }
.go { align-self: center; background: var(--primary); color: #fff; border-radius: 8px; padding: 5px 10px; font-size: 13px; font-weight: 700; flex: none; }
.go:hover { background: var(--primary-hover); }
.it input.rename { width: 100%; font-weight: 600; font-size: 15px; padding: 3px 6px; border: 1px solid var(--primary);
  border-radius: 6px; background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--primary-ring); }
.arch {
  margin: 8px 0 0; padding: 11px 12px; border: 1px dashed var(--border-2); border-radius: 10px; font-size: 14px;
  color: var(--text-2); display: flex; align-items: center; gap: 9px; width: 100%;
}
.arch:hover { border-color: var(--muted-2); background: var(--surface-2); }
.arch b { margin-left: auto; color: var(--muted-2); font-weight: 400; }

/* Всплывающие меню: «Новая» и меню работы. */
.pop {
  position: absolute; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: var(--shadow-pop); padding: 6px; z-index: 50; animation: pop-in .14s var(--ease);
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } }
.pop-big { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; border-radius: 12px; }
.pop-big:hover, .pop-big:focus-visible { background: var(--primary-soft); }
.pop-big b { display: block; font-size: 16px; }
.pop-big small { display: block; color: var(--muted); font-size: 13.5px; }
.pop-ic { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.pop-ic .ic { width: 20px; height: 20px; stroke-width: 2; }
.pop-ic.blue { background: var(--primary); }
.pop-ic.violet { background: linear-gradient(135deg, #8b6cff, #6a4fd6); }
.work-pop { position: fixed; width: 270px; font-size: 15px; }
.work-pop .mi { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 10px 12px; border-radius: 8px; }
.work-pop .mi:hover, .work-pop .mi:focus-visible { background: var(--surface-2); }
.work-pop .mi .ic { width: 17px; height: 17px; color: var(--muted); }
.work-pop .del { color: var(--red-text); }
.work-pop .del .ic { color: var(--red-text); }
.work-pop small { margin-left: auto; color: var(--muted-2); font-size: 12.5px; }
.work-pop hr { border: none; border-top: 1px solid var(--line); margin: 5px 0; }

/* Правый блок шапки: нейросеть и лимиты подписки в одной рамке шириной с панель файлов. */
.hdr-col {
  flex: none; width: var(--right-w); margin-right: -26px; margin-bottom: -1px; box-sizing: border-box;
  border: 1px solid var(--border); border-right: none; border-bottom: none; border-radius: 12px 0 0 0;
  padding: 6px 12px 7px; background: var(--field); font-size: 12px; color: var(--text-2); white-space: nowrap;
}
.mrow { display: flex; align-items: center; gap: 10px; }
.hdr-col .mdl { border: none; background: none; padding: 0; gap: 8px; border-radius: 8px; }
.hdr-col .mdl:hover { background: none; }
.hdr-col .mdl:hover .lk { text-decoration: underline; }
.hdr-col .mdl .mi { width: 26px; height: 26px; border-radius: 7px; }
.hdr-col .mdl .mi .ic { width: 15px; height: 15px; }
.hdr-col .mdl .mtx { flex-direction: row; align-items: baseline; gap: 6px; }
.hdr-col .mdl .ml { font-size: 11px; line-height: 1; }
.hdr-col .mdl .mv { font-size: 14px; line-height: 1; }
.hdr-col .mdl .lk { border: none; padding: 0; font-size: 12px; line-height: 1; }
.mrow .plan { margin-left: auto; font-size: 11px; color: var(--muted-2); overflow: hidden; text-overflow: ellipsis; }
.mrow .plan:empty { display: none; }
.lim { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 0; cursor: pointer; }
/* Строка лимита: название, срок обновления и крупный остаток, под ними полоска расхода во всю ширину. */
.lim .lr { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 3px; align-items: baseline; margin-top: 6px; }
.lim .nm { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.lim .tm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; text-align: right; }
.lim .lr em { font-style: normal; font-weight: 700; font-size: 16px; line-height: 1; color: var(--text); text-align: right; }
.lim .lr em small { font-size: 11px; font-weight: 400; color: var(--muted); margin-right: 2px; }
.lim .lr b { grid-column: 1 / 4; display: block; height: 6px; border-radius: 3px; background: var(--surface-3); position: relative; overflow: hidden; }
.lim .lr b i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primary); border-radius: 3px; transition: width .3s ease; }
.lim .lr.warn em, .lim .lr.out em { color: var(--red); } .lim .lr.warn b i, .lim .lr.out b i { background: var(--red); }
.lim .ld { font-size: 11.5px; color: var(--muted-2); margin-top: 5px; white-space: normal; }
.lim .ld:empty { display: none; }
.lim.loading { opacity: .55; }
.nav { display: flex; gap: 6px; padding: 4px 12px calc(8px + env(safe-area-inset-bottom)); flex: none; }
.nb {
  flex: 1 1 0; min-width: 0; border: none; border-radius: 9px; padding: 7px 10px; display: flex; align-items: center; justify-content: center;
  gap: 8px; font-weight: 700; font-size: 15px; color: #fff; white-space: nowrap;
}
.nb > .nl { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.nb:hover { filter: brightness(1.06); }
.nb i { font-style: normal; font-size: 12px; color: rgba(255, 255, 255, .85); font-weight: 600; }
.nb i:empty { display: none; }
.nic { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; }
.nic .ic { width: 17px; height: 17px; stroke-width: 2.3; }
.nb#btn-access { background: var(--violet); }
.nb#btn-dev { background: var(--primary); }
.nb#btn-dev.on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--primary); }
/* Кнопки плагинов в том же ряду: фиолетовые. */
.nb:not(#btn-access):not(#btn-dev) { background: #1fa98f; }
/* Панель уже 400 px: счётчик шаблонов прячется; уже 370 px: у кнопок одни значки, подпись в подсказке. */
.side.tight .nb i, .side.tight .btn-new i { display: none; }
.side.narrow .sh h1 { font-size: 17px; }
.side.narrow .sh .btn-new { padding: 6px 8px 6px 6px; font-size: 14px; }
.side.narrow .nb { padding: 7px 8px; gap: 6px; font-size: 14px; }

/* режим разработки: только переписка, без документа и файлов */
body.dev-mode #tabs { display: none; }
/* В разработке справа — макеты нейросети и присланные картинки; служебная подпись не нужна. */
body.dev-mode #files-panel .panel-foot { display: none; }
.dev-act { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px;
  padding: 3px 10px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.dev-act:hover { background: var(--surface-2); }
.dev-act.warn { border-color: var(--orange); color: var(--orange-text); }
.dev-state { font-size: 13px; color: var(--muted); }
.dev-state.bad { color: var(--red-text); cursor: pointer; text-decoration: underline dotted; }
.dev-log { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.dev-log li { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.dev-log code { color: var(--muted); flex: none; }
.dev-log span.when { margin-left: auto; color: var(--muted); flex: none; }
.dev-report { white-space: pre-wrap; font-size: 12.5px; max-height: 50vh; overflow: auto; background: var(--surface-2);
  padding: 10px; border-radius: 8px; }

/* ---------- центр ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--surface); position: relative; }
.view { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.top { padding: 8px 26px 0; border-bottom: 1px solid var(--border); padding-top: max(8px, env(safe-area-inset-top)); flex: none; }
.tr { display: flex; align-items: stretch; gap: 12px; }
.ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ttl .tabs { margin-top: auto; padding-top: 12px; }
.title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ttl h2 { font-size: 22px; line-height: 28px; margin: 0; cursor: text; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.01em; }
.ttl h2:hover { text-decoration: underline dotted var(--muted-2); text-underline-offset: 5px; }
.title-input {
  font-size: 22px; font-weight: 700; line-height: 28px; padding: 3px 10px; border: 2px solid var(--primary); border-radius: 8px;
  background: var(--surface); outline: none; box-shadow: 0 0 0 3px var(--primary-ring); min-width: 0; width: min(640px, 100%);
}
.title-input.dashed { border: 1px dashed var(--border-2); box-shadow: none; }
.title-input.dashed:focus { border: 2px solid var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.title-hint { font-size: 13.5px; color: var(--muted-2); white-space: nowrap; }
.meta { display: flex; gap: 9px; align-items: center; margin-top: 8px; font-size: 14px; color: var(--muted); flex-wrap: wrap; min-height: 26px; }
.pill { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 20px; font-size: 13.5px; font-weight: 700;
  background: var(--primary-soft); color: var(--primary); white-space: nowrap; }
.pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill.gray { background: var(--surface-2); color: var(--text-2); }
.pill.gray::before { background: var(--primary); }
.pill.orange { background: var(--orange-soft); color: var(--orange-text); }
.pill.green { background: var(--green-soft); color: var(--green-text); }
.pill.red { background: var(--red-soft); color: var(--red-text); }
.pill.tgp { background: var(--tg-soft); color: var(--tg-text); }
.pill.busy::before { animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
button.pill:hover { filter: brightness(.97); }
.sel-t { border: 1px solid var(--violet-line); background: var(--violet-soft); color: var(--violet-text); font-weight: 600;
  border-radius: 8px; padding: 3px 10px; font-size: 13.5px; white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.cost { white-space: nowrap; }
.mdl {
  display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; background: var(--field); flex: none; text-align: left;
}
.mdl:hover { border-color: var(--border-2); background: var(--surface-2); }
.mdl .mi { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #2f7bff, #7b5cff); display: flex; align-items: center; justify-content: center; color: #fff; }
.mdl .mi .ic { width: 18px; height: 18px; stroke-width: 2; }
.mdl .mtx { display: flex; flex-direction: column; }
.mdl .ml { font-size: 12px; color: var(--muted-2); line-height: 15px; }
.mdl .mv { font-size: 15.5px; font-weight: 700; line-height: 20px; white-space: nowrap; }
.mdl .lk { font-size: 13px; color: var(--primary); font-weight: 600; border-left: 1px solid var(--border); padding-left: 12px; line-height: 17px; }
.tabs { display: flex; gap: 4px; }
.tab { padding: 11px 16px; font-size: 15.5px; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.on { color: var(--text); border-color: var(--primary); font-weight: 700; }
.tab i { font-style: normal; font-size: 12.5px; background: var(--surface-3); border-radius: 10px; padding: 1px 7px; margin-left: 6px; color: var(--text-2); }
.tab i:empty { display: none; }

.body { flex: 1; display: flex; min-height: 0; }
.col { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--chat-bg); position: relative; }
.chat { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px max(24px, calc((100% - 1000px) / 2)); display: flex; flex-direction: column; gap: 16px; }
.msg { max-width: 900px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px 20px;
  font-size: 15.5px; line-height: 1.6; overflow-wrap: anywhere; align-self: flex-start; }
.msg.user { align-self: flex-end; background: var(--primary); color: #fff; border: none; max-width: min(800px, 92%); white-space: pre-wrap; }
.who { font-size: 12.5px; color: var(--muted-2); margin-bottom: 5px; white-space: normal; }
.msg.user .who { color: #cfe0ff; }
.att-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; white-space: normal; }
.att { display: inline-flex; gap: 6px; align-items: center; background: rgba(255, 255, 255, .18); border-radius: 8px; padding: 4px 10px; font-size: 13.5px; }
.att .ic { width: 14px; height: 14px; }
.msg p { margin: 0 0 9px; } .msg p:last-child { margin-bottom: 0; }
.msg ul, .msg ol { margin: 6px 0; padding-left: 22px; }
.msg li { margin: 3px 0; }
.msg code { background: var(--surface-2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.msg pre { background: var(--surface-2); padding: 12px; border-radius: 8px; overflow-x: auto; font-size: 13px; }
.msg pre code { background: none; padding: 0; }
.msg h3 { font-size: 16px; margin: 12px 0 6px; }
.msg .note { color: var(--muted); font-size: 14px; margin-top: 8px; }
.msg .note.red { color: var(--red-text); }
.steps { margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--field); padding: 6px 14px; }
.steps:first-child { margin-top: 2px; }
.sp { display: flex; gap: 12px; padding: 8px 0; align-items: flex-start; border-bottom: 1px dashed var(--border); }
.sp:last-child { border: none; }
.sn { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 700; margin-top: 1px; }
.sp.done .sn { background: var(--green); color: #fff; }
.sp.done .sn .ic { width: 14px; height: 14px; stroke-width: 3; }
.sp.run .sn { border: 2.5px solid var(--primary-ring); border-top-color: var(--primary); animation: spin .9s linear infinite; }
.sp.wait .sn { background: var(--surface-3); color: var(--muted-2); }
@keyframes spin { to { transform: rotate(360deg); } }
.sp .grow { flex: 1; min-width: 0; }
.st1 { font-size: 15px; font-weight: 700; color: var(--text); }
.sp.wait .st1 { color: var(--muted-2); font-weight: 600; }
.sp.run .st1 { color: var(--primary); }
.sd { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.sp .bar { width: min(420px, 100%); margin-top: 7px; }
.tm { margin-left: auto; font-size: 12.5px; color: var(--muted-2); white-space: nowrap; padding-top: 2px; }
.thinking { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; margin-top: 10px; }
.thinking .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: blink 1.1s infinite; }
.blank { margin: auto; text-align: center; max-width: 560px; padding: 24px; color: var(--muted); }
.blank-ic { width: 64px; height: 64px; border-radius: 16px; background: var(--primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; }
.blank-ic .ic { width: 26px; height: 26px; }
.blank h3 { color: var(--text); font-size: 21px; margin: 22px 0 10px; }
.blank p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.floating { position: absolute; top: max(10px, env(safe-area-inset-top)); left: 10px; }
.scroll-down { position: absolute; right: 22px; bottom: 140px; z-index: 4; width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-pop); display: flex; align-items: center; justify-content: center; }

/* Поле ввода. */
.comp { padding: 12px max(24px, calc((100% - 1000px) / 2)) calc(16px + env(safe-area-inset-bottom)); flex: none; }
/* Одна строка: скрепка, текст, кнопки; при длинном тексте поле растёт вверх. */
/* Как в Telegram: скрепка без рамки, круглая синяя кнопка с самолётиком, скруглённое поле. */
.cbox { display: flex; align-items: flex-end; gap: 6px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 24px; padding: 4px 5px 4px 6px; cursor: text; transition: border-color .14s, box-shadow .14s; }
.cbox:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.cbox textarea { flex: 1; min-width: 0; resize: none; border: none; background: none; outline: none; font-size: 16px; line-height: 1.45; max-height: 220px; padding: 9px 4px; display: block; }
.cbox textarea::placeholder { color: var(--muted-2); }
.cbar { display: flex; align-items: center; gap: 9px; }
.hint { flex: 1; font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clip { width: 40px; height: 40px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; background: none; color: var(--muted); flex: none; }
.clip:hover { color: var(--text); background: var(--surface-2); }
.clip .ic { width: 22px; height: 22px; }
.send { width: 40px; height: 40px; border-radius: 10px; background: none; color: #6c9fdc; display: flex; align-items: center; justify-content: center; flex: none; transition: color .12s; }
.send:hover { color: var(--primary); }
.send .ic { width: 28px; height: 28px; fill: currentColor; stroke: none; margin-left: 2px; }
.stop { width: 40px; height: 40px; border-radius: 10px; border: none; background: none; color: #e0646a; display: flex; align-items: center; justify-content: center; flex: none; transition: color .12s; }
.stop .ic { width: 26px; height: 26px; fill: currentColor; stroke: none; }
.stop:hover { color: var(--red); }
.attachments { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; }
.attach-chip { display: inline-flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px 6px 4px 6px; font-size: 13px; max-width: 100%; }
.attach-chip .fi { width: 26px; height: 30px; font-size: 7.5px; padding-bottom: 3px; border-radius: 5px; }
.attach-chip.up { opacity: .75; }
.attach-chip .up-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--primary-ring); border-top-color: var(--primary); animation: spin .9s linear infinite; flex: none; }
.attach-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.attach-chip button { color: var(--muted); display: inline-flex; padding: 3px; border-radius: 4px; }
.attach-chip button:hover { color: var(--text); background: var(--surface-2); }
.attach-chip .ic { width: 14px; height: 14px; }
.drop-active .cbox, .drop-active .drop-zone { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }

/* ---------- правая панель: файлы ---------- */
.right { width: var(--right-w); border-left: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; flex: none; overflow-y: auto; overscroll-behavior: contain; }
.sec { padding: 18px 16px 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .05em; color: var(--text); font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sec + .files, .sec + .empty-box { margin-top: 2px; }
.sec.sep { border-top: 1px solid var(--line); margin-top: 10px; }
.sec .links { display: flex; gap: 12px; text-transform: none; letter-spacing: 0; }
.files { padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.f { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--surface); }
.f:hover { border-color: var(--border-2); background: var(--field); }
.f.off { opacity: .55; }
.f.off .n { text-decoration: line-through; }
.f .grow { flex: 1; min-width: 0; }
/* Голосовое как в Telegram: кнопка, волна с перемоткой, время, скорость. */
.f:has(.player) { flex-wrap: wrap; }
.f .player.voice { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; margin-top: 2px; cursor: default; --wave-off: var(--border-2); }
.vp-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; transition: background .14s; }
.vp-btn:hover { background: var(--primary-hover); }
.vp-btn:disabled { background: var(--gray-dot); }
.vp-btn .ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.vp-main { flex: 1; min-width: 0; }
.vp-wave { display: block; width: 100%; height: 28px; cursor: pointer; touch-action: none; }
.vp-time { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.player.playing .vp-time .cur { color: var(--primary); font-weight: 600; }
.vp-rate { flex: none; font-size: 11.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 3px 6px; line-height: 1; }
.vp-rate:hover { color: var(--text); border-color: var(--border-2); }
.vp-rate.on { color: var(--primary); border-color: var(--primary); }
/* Карточка выданных файлов в переписке — как пачка документов в Telegram. */
.sent-card { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); max-width: 560px; display: flex; flex-direction: column; gap: 6px; }
.sent-title { font-weight: 700; margin-bottom: 2px; }
.sent-card .f { background: var(--surface); }
.sent-card .tg-btn { align-self: flex-start; margin-top: 4px; }
.lightbox { display: block; max-width: 100%; max-height: 76vh; margin: 0 auto; border-radius: 8px; }
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow: auto; }
.pick-list .choice .st { flex: none; }
.f .n { font-size: 15px; font-weight: 600; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f .s { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f .act { display: flex; gap: 10px; align-items: center; flex: none; }
.f .dl { color: var(--muted); display: inline-flex; padding: 4px; border-radius: 6px; }
.f .dl:hover { color: var(--text); background: var(--surface-2); }
.f .rm { color: var(--muted); width: 32px; height: 32px; border: 1px solid var(--border-2); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.f .rm:hover { color: var(--red-text); border-color: var(--red-text); }
.f .back-link { color: var(--primary); font-weight: 700; font-size: 14px; }
.badge-new { font-size: 11px; background: var(--green-soft); color: var(--green-text); border-radius: 4px; padding: 1px 5px; margin-left: 6px; font-weight: 700; vertical-align: 1px; }
.badge-tg { font-size: 11px; color: var(--tg-text); background: var(--tg-soft); border-radius: 4px; padding: 1px 5px; margin-left: 6px; font-weight: 700; vertical-align: 1px; }
.fi { width: 38px; height: 46px; border-radius: 6px; color: #fff; font-size: 10.5px; font-weight: 700; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; flex: none; letter-spacing: .02em; background: #8a93a3; }
.fi.w { background: #2b6be3; } .fi.x { background: #1f8a52; } .fi.p { background: #d64545; } .fi.pp { background: #d9692b; }
.fi.i { background: #7b5cff; } .fi.c { background: #0e7c86; } .fi.z { background: #6b7482; }
.empty-box { margin: 4px 12px; border: 1px dashed var(--border-2); border-radius: 10px; padding: 14px; text-align: center; color: var(--muted); font-size: 14px; }
.drop-zone { margin: 6px 0 0; border: 2px dashed var(--border-2); border-radius: 10px; padding: 11px; text-align: center; color: var(--text-2); font-weight: 700; font-size: 14.5px; width: 100%; }
.drop-zone:hover { border-color: var(--primary); color: var(--primary); }
.panel-foot { padding: 14px 16px 18px; color: var(--muted-2); font-size: 12.5px; margin-top: auto; }

/* ---------- документ ---------- */
.docview { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--chat-bg); }
.doc-bar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface); flex: none; }
.doc-files { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: thin; padding: 1px; }
.dchip { display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 10px; padding: 5px 12px 5px 6px; white-space: nowrap; background: var(--surface); flex: none; font-weight: 700; font-size: 14.5px; }
.dchip:hover { border-color: var(--border-2); background: var(--field); }
.dchip.on { border: 2px solid var(--primary); padding: 4px 11px 4px 5px; background: var(--primary-soft); color: var(--primary); }
.dchip small { color: var(--muted-2); font-weight: 400; font-size: 12.5px; }
.dchip > span:not(.fi) { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.dchip .fi { width: 28px; height: 32px; font-size: 8.5px; padding-bottom: 3px; border-radius: 5px; }
.zoom { display: flex; align-items: center; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; flex: none; }
.zoom button { width: 32px; height: 38px; color: var(--text-2); font-size: 17px; }
.zoom button:hover { background: var(--surface-2); }
.zoom span { min-width: 62px; text-align: center; border-left: 1px solid var(--border-2); border-right: 1px solid var(--border-2); line-height: 38px; font-size: 14px; }
.doc-body { flex: 1; display: flex; min-height: 0; }
/* Пока открывается другой документ, текущий приглушаем, а не убираем — без мигания. */
#col-doc .doc-body { transition: opacity .25s; }
#col-doc.loading .doc-body { opacity: .45; cursor: progress; }
.doc-side { width: 290px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; flex: none; }
.seg { display: flex; margin: 12px 12px 6px; background: var(--surface-2); border-radius: 10px; padding: 3px; flex: none; }
.seg button { flex: 1; padding: 7px; border-radius: 8px; color: var(--muted); font-size: 14.5px; }
.seg button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 16px; }
.toc-i { display: flex; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; font-size: 14.5px; color: var(--text-2); align-items: baseline; }
.toc-i:hover { background: var(--surface-2); }
.toc-i.on { background: var(--primary-soft); color: var(--primary); font-weight: 700; }
.toc-i .tt { flex: 1; min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.toc-i .pg { color: var(--muted-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.toc-i.l2 { padding-left: 24px; font-size: 14px; }
.toc-i.l3 { padding-left: 38px; font-size: 13.5px; }
.thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 4px 0; }
.thumb { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.thumb img { width: 100%; aspect-ratio: 210/297; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.thumb.on img { border: 2px solid var(--primary); }
.thumb.on { color: var(--primary); font-weight: 700; }
.pages { flex: 1; overflow: auto; position: relative; padding: 22px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.page { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 6px 20px rgba(0, 0, 0, .06); width: calc(820px * var(--zoom, 1)); max-width: none; flex: none; position: relative; }
.page img { width: 100%; display: block; aspect-ratio: auto 210 / 297; min-height: 200px; background: #fff; }
.page.image { width: auto; max-width: calc(100% * var(--zoom, 1)); }
.pager { position: sticky; bottom: 8px; margin-top: auto; display: flex; align-items: center; gap: 4px; background: #1b1f24; color: #fff; border-radius: 12px; padding: 5px; box-shadow: var(--shadow-toast); z-index: 3; flex: none; }
.pager button { width: 34px; height: 34px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; }
.pager button:hover { background: rgba(255, 255, 255, .1); }
.pager span { background: rgba(255, 255, 255, .1); border-radius: 8px; padding: 6px 14px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.pane-empty { color: var(--muted); text-align: center; padding: 60px 16px; margin: auto; max-width: 520px; }
.pane-empty b { color: var(--text); display: block; margin-bottom: 8px; font-size: 16px; }

/* ---------- экраны шаблона и черновика ---------- */
.alt { background: var(--bg); overflow-y: auto; }
.alt-in { padding: 24px 32px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.alt-head { display: flex; align-items: flex-start; gap: 12px; }
.alt-head .ttl h2 { cursor: default; }
.alt-head .ttl h2:hover { text-decoration: none; }
.sub { color: var(--muted); font-size: 14.5px; margin-top: 4px; }
.alt-actions { display: flex; gap: 10px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.banner { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 11px 14px; font-size: 14.5px; }
.banner b { white-space: nowrap; }
.banner .grow { flex: 1; }
.banner.yellow { background: var(--yellow-soft); border: 1px solid var(--yellow-line); color: var(--yellow-text); }
.banner.violet { background: var(--violet-soft); border: 1px solid var(--violet-line); color: var(--violet-text); }
.banner.tgb { background: var(--tg-soft); border: 1px solid var(--tg-line); color: var(--text); }
.banner.tgb b { color: var(--text); }
.cards { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 16px; flex: 1 1 0; min-height: 420px; }
.alt-in:has(.cards) { height: 100%; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; display: flex; flex-direction: column; min-width: 0; }
.card-h { font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-2); font-weight: 700; margin-bottom: 12px; display: flex; justify-content: space-between; gap: 10px; }
.card-h a, .card-h span.r { text-transform: none; letter-spacing: 0; color: var(--primary); font-weight: 700; }
/* Список файлов черновика занимает всю высоту карточки до подписи внизу и прокручивается внутри. */
.card .files { padding: 0; flex: 1 1 0; min-height: 140px; overflow: auto; }
.mpreview { display: flex; flex-direction: column; gap: 12px; max-height: 72vh; overflow: auto; background: var(--surface-2); padding: 12px; border-radius: 10px; }
.mpreview img { flex: none; width: 100%; height: auto; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); min-height: 200px; }
.task { flex: 1; width: 100%; min-height: 300px; resize: none; border: 1px solid var(--border-2); border-radius: 10px; padding: 16px 18px; font-size: 15.5px; line-height: 1.7; background: var(--surface); outline: none; }
.task:focus { border: 2px solid var(--primary); padding: 15px 17px; }
.task[readonly] { background: var(--field); cursor: pointer; }
.task-foot { display: flex; justify-content: space-between; color: var(--muted-2); font-size: 12.5px; margin-top: 8px; }
.card-foot { margin-top: auto; padding-top: 16px; color: var(--muted); font-size: 14px; display: flex; flex-direction: column; gap: 8px; }
.works-by .row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.works-by .row:last-child { border: none; }
.works-by .row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.works-by .row span { color: var(--muted); white-space: nowrap; font-size: 14px; }
.works-by .row:hover b { color: var(--primary); }
.bottom-bar { display: flex; align-items: center; gap: 14px; }
.bottom-bar .grow { flex: 1; }
.bottom-bar .muted { font-size: 14px; text-align: right; }
.more-fields { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 12px; }
.more-fields summary { cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 600; }

/* Аватар-метка вуза в списке шаблонов. */
.av { width: 40px; height: 40px; border-radius: 10px; background: var(--violet-soft); color: var(--violet-text); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.av.gray { background: var(--surface-2); color: var(--text-2); }
.tpl-it.on { background: var(--violet-soft); box-shadow: inset 4px 0 0 var(--violet); }
.tpl-it { align-items: center; }
.tpl-it .t { font-size: 15px; }

/* ---------- модальные окна ---------- */
.modal { position: fixed; inset: 0; background: rgba(15, 18, 24, .5); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 60; animation: fade .16s ease; }
@keyframes fade { from { opacity: 0; } }
.modal-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); width: min(640px, 100%); max-height: 88dvh; display: flex; flex-direction: column; animation: pop-in .18s var(--ease); }
.modal-card.wide { width: min(920px, 100%); }
.modal-card.narrow { width: min(460px, 100%); }
.sheet-handle { display: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px; overflow-y: auto; overscroll-behavior: contain; }
.modal-foot { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--line); }
.modal-foot .spacer { flex: 1; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.field input, .field textarea, .field select, .inline-input {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--border-2); background: var(--surface); outline: none; font-size: 15px;
}
.field textarea { resize: vertical; min-height: 90px; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus, .inline-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.field .tip { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; min-width: 0; }
.inline-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.inline-row .inline-input { flex: 1; }
.section-title { font-size: 12.5px; font-weight: 700; color: var(--muted-2); margin: 22px 0 10px; text-transform: uppercase; letter-spacing: .05em; }
.section-title:first-child { margin-top: 0; }
.choice { display: flex; gap: 10px; align-items: flex-start; width: 100%; text-align: left; padding: 12px; border-radius: 10px; border: 1px solid var(--border); margin-bottom: 8px; background: var(--surface); }
.choice:hover { border-color: var(--border-2); background: var(--field); }
.choice.on { border-color: var(--primary); background: var(--primary-soft); }
.choice .mark { color: var(--muted); display: flex; padding-top: 1px; }
.choice.on .mark { color: var(--primary); }
.choice .grow { flex: 1; min-width: 0; }
.choice .nm { font-weight: 700; font-size: 15px; display: block; }
.choice .sub2 { font-size: 13px; color: var(--muted); display: block; }
.choice .pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
/* Строка в одну линию: учётные записи и аккаунты Telegram в «Доступах». */
.choice .row1 { display: flex; align-items: center; gap: 12px; min-width: 0; }
.choice .row1 .nm { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice .row1 .sub2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice .row1 .pills { margin-top: 0; flex: none; }
.choice:has(.row1) { align-items: center; padding: 8px 12px; margin-bottom: 6px; }
.choice:has(.row1) .mark { padding-top: 0; }
.tgacc .av { width: 30px; height: 30px; border-radius: 50%; background: var(--tg); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex: none; }
.tgacc.pending { opacity: .8; }
.tagp.tgon { background: var(--primary-soft); color: var(--primary); flex: none; }
.icon-btn.danger { color: var(--red-text); }
.tg-add { display: flex; gap: 8px; margin-top: 4px; }
.tg-add input { flex: 1; border: 1px dashed var(--border-2); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.tagp { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.tagp.ok { background: var(--green-soft); color: var(--green-text); }
.tagp.bad { background: var(--red-soft); color: var(--red-text); }
.tagp.old { background: var(--orange-soft); color: var(--orange-text); }
.action-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.action-grid .ghost { flex: 1 1 auto; }
.status-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.status-chips .chip.on { background: var(--primary); color: #fff; }
.spend-table { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.spend-table > div { display: flex; justify-content: space-between; gap: 12px; }
.spend-table span { color: var(--muted); }
.check-summary { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.stat { flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.stat b { display: block; font-size: 20px; }
.stat span { font-size: 12.5px; color: var(--muted); }
.stat.bad b { color: var(--red-text); }
.stat.good b { color: var(--green-text); }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.check-row.bad { border-color: color-mix(in srgb, var(--red) 40%, var(--border)); background: var(--red-soft); }
.check-row .mark { display: flex; color: var(--green); }
.check-row.bad .mark { color: var(--red); }
.check-row .nm { font-size: 14.5px; font-weight: 700; }
.check-row .sub2 { font-size: 13px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.src { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; margin-bottom: 8px; }
.src .n { color: var(--muted); min-width: 24px; }
.src .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.src .meta2 { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; font-size: 12.5px; }
.seg-theme { display: inline-flex; background: var(--surface-2); border-radius: 10px; padding: 3px; gap: 2px; }
.seg-theme button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 8px; color: var(--muted); font-size: 14px; }
.seg-theme button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.switch { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14.5px; }
.switch input { accent-color: var(--primary); width: 18px; height: 18px; }

/* Всплывающее уведомление: тёмная плашка справа внизу, как в макете. */
.toast { position: fixed; right: calc(var(--right-w) + 20px); bottom: 120px; background: #1b1f24; color: #fff; border-radius: 12px;
  padding: 12px 16px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-toast); z-index: 80;
  max-width: min(90vw, 480px); animation: toast-in .18s var(--ease); }
.toast b { color: #7fd1f5; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- ширины ---------- */
@media (max-width: 1500px) {
  :root { --side-w: 340px; --right-w: 340px; }
  .chat, .comp { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 1240px) {
  /* Файлы уезжают во вкладку: переписке нужна ширина. */
  .right { display: none; }
  .hdr-col { width: auto; min-width: 340px; margin-right: 0; margin-bottom: 0; border: 1px solid var(--border); border-radius: 12px; }
  .right.show { display: flex; flex: 1; width: auto; border-left: none; }
  .only-narrow { display: inline-flex !important; }
  .toast { right: 20px; }
  .cards { grid-template-columns: 1fr; }
  .doc-side { width: 240px; }
}

@media (pointer: coarse) {
  :root { --tap: 44px; }
  .dots { display: inline-flex; }
}

@media (max-width: 860px) {
  .only-mobile { display: inline-flex !important; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 40; width: min(88vw, 380px) !important; transform: translateX(-102%); transition: transform .24s var(--ease), visibility 0s .24s; visibility: hidden; }
  .layout.nav-open .side { transform: none; visibility: visible; transition: transform .24s var(--ease); box-shadow: var(--shadow-pop); }
  .layout.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 30; animation: fade .2s ease; }
  .resizer { display: none; }
  /* На телефоне панель выезжает целиком, подписи кнопок остаются. */
  .top { padding: 10px 12px 0; padding-top: max(10px, env(safe-area-inset-top)); }
  .tr { gap: 6px; align-items: center; }
  .ttl h2 { font-size: 17px; line-height: 24px; }
  .title-input { font-size: 17px; }
  .title-hint { display: none; }
  .meta { margin-top: 4px; gap: 6px; font-size: 13px; }
  .hdr-col { min-width: 0; border: none; background: none; padding: 0; }
  .hdr-col .lim, .mrow .plan { display: none; }
  .mdl { padding: 6px 8px; gap: 8px; }
  .mdl .mi, .mdl .lk, .mdl .ml { display: none; }
  .mdl .mv { font-size: 13.5px; }
  .tabs { margin-top: 6px; }
  .tab { flex: 1 1 0; text-align: center; padding: 10px 4px; font-size: 14.5px; }
  .chat { padding: 14px 12px; gap: 12px; }
  .msg { padding: 12px 14px; max-width: 100%; font-size: 15px; }
  .comp { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .cbox textarea, .search input, .field input, .field textarea, .field select, .inline-input, .task { font-size: 16px; }
  .scroll-down { right: 14px; bottom: 120px; }
  .doc-bar { padding: 8px 10px; flex-wrap: wrap; }
  .doc-files { flex-basis: 100%; }
  .doc-side { display: none; }
  .pages { padding: 12px 8px; }
  .page { width: calc(100% * var(--zoom, 1)); }
  .alt-in { padding: 14px 12px calc(16px + env(safe-area-inset-bottom)); }
  .alt-head { flex-wrap: wrap; align-items: center; }
  .alt-head .ttl { flex: 1 1 calc(100% - 60px); }
  .alt-head .mdl { margin-left: auto; }
  .alt-actions { justify-content: stretch; width: 100%; }
  .cards { min-height: 0; }
  .task { min-height: 220px; }
  .alt-actions > * { flex: 1; }
  .bottom-bar { flex-wrap: wrap; }
  .bottom-bar .muted { flex-basis: 100%; text-align: left; order: -1; }
  .bottom-bar .grow { display: none; }
  .bottom-bar > button { flex: 1; }
  .banner { flex-wrap: wrap; }
  .field-row { flex-direction: column; gap: 0; }
  .modal { align-items: flex-end; padding: 0; }
  .modal-card, .modal-card.wide, .modal-card.narrow { width: 100%; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: none; animation: sheet-up .26s var(--ease); }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  .sheet-handle { display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--border-2); margin: 8px auto 0; flex: none; }
  .modal-body { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .toast { left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: none; }
  .work-pop { left: 12px !important; right: 12px; width: auto; }
}

/* ---------- вход ---------- */
.login-page { display: grid; place-items: center; background: var(--bg); padding: 20px; }
.login-card { width: min(400px, 100%); background: var(--surface); padding: 32px 28px; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); }
.login-card h1 { margin: 0 0 6px; font-size: 22px; }
.login-card p { margin: 0 0 22px; font-size: 14.5px; color: var(--muted); }
.login-card input { width: 100%; height: 46px; padding: 0 12px; margin-bottom: 12px; font-size: 16px; border: 1px solid var(--border-2); border-radius: 8px; background: var(--field); outline: none; }
.login-card input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-ring); }
.login-card button { width: 100%; height: 46px; }
.error { color: var(--red-text); font-size: 13.5px; margin-top: 12px; }

/* печати и подписи в «Доступах» */
.stamp-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.stamp-row img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 8px; border: 1px solid var(--border-2); flex: none; }
.stamp-row .grow { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stamp-row .muted { font-size: 13px; }
.stamp-drop { border: 1.5px dashed var(--border-2); border-radius: 10px; padding: 14px; text-align: center; font-size: 14px; color: var(--text-2); }
.stamp-drop.on { border-color: var(--accent, #4f6bed); background: var(--surface-2); }

/* Линия под вкладками «Переписка / Документ» - на уровне переключателя «Все / В работе».
   Шапку центральной части больше не растягивает правый блок с лимитами: он вынесен из потока
   и остаётся на прежнем месте, нависая над панелью файлов на величину --hdr-overhang (считает app.js). */
@media (min-width: 1241px) {
  .top { position: relative; border-bottom: none; }
  .tr { align-items: flex-start; }
  .ttl { border-bottom: 1px solid var(--border); margin-left: -26px; padding-left: 26px; padding-right: calc(var(--right-w) + 12px); }
  .ttl .tabs { display: none; }
  .ttl { min-height: 73px; box-sizing: border-box; }
  .hdr-col { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 0; margin: 0; z-index: 2; border-bottom: 1px solid var(--border); }
  #files-panel { padding-top: var(--hdr-overhang, 0px); }
}

/* Предпросмотр документа: открывается кликом по файлу справа, в шапке - крестик, имя и масштаб. */
.doc-close { width: 36px; height: 36px; border-radius: 9px; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; flex: none; border: 1px solid var(--border); }
.doc-close:hover { color: var(--text); background: var(--surface-2); border-color: var(--border-2); }
.doc-name { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; font-weight: 700; font-size: 15px; }
.doc-name > span:not(.fi) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-name small { color: var(--muted-2); font-weight: 400; font-size: 12.5px; white-space: nowrap; }
.doc-name .fi { width: 28px; height: 32px; font-size: 8.5px; padding-bottom: 3px; border-radius: 5px; flex: none; }
.f.on { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary) inset; }
.f.on .n { color: var(--primary); }
.doc-side.hide { display: none; }
.doc-toc { padding: 0 12px; height: 38px; border: 1px solid var(--border-2); border-radius: 8px; color: var(--muted); font-size: 14px; white-space: nowrap; flex: none; }
.doc-toc:hover { color: var(--text); background: var(--surface-2); }
.doc-toc.on { color: var(--text); background: var(--surface-2); font-weight: 700; }

/* Режим поиска - кнопка в стиле переключателя «Все / В работе», без меню. */
.smode { height: 24px; padding: 0 10px; border: none; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--surface-2); }
.smode:hover { color: var(--text); background: var(--surface-3); }
.smode.by-chat { color: var(--text-2); background: var(--surface-2); border: none; }
.smode.by-chat:hover { color: var(--text); background: var(--surface-3); }

/* Включённые переключатели - тонкая синяя обводка. */
.smode.by-chat { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary); }
.seg button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), inset 0 0 0 1px var(--primary); }
.doc-toc.on { box-shadow: inset 0 0 0 1px var(--primary); border-color: var(--primary); color: var(--primary); }
/* Крупный масштаб: страница шире области - её можно прокрутить к левому краю, мелкая остаётся по центру. */
.pages { align-items: stretch; }
.page { margin-inline: auto; }
.pager { align-self: center; }
/* Картинка в предпросмотре масштабируется так же, как страницы: ширина области x масштаб. */
.page.image { width: calc(100% * var(--zoom, 1)); max-width: none; }
/* Узкая область просмотра (окно поменьше): список содержания прячется, чтобы страница читалась. */
.docview { container-type: inline-size; }
@container (max-width: 900px) { .doc-side { display: none; } }

/* Карточка хода нейросети - во всю ширину колонки, как и ответ над ней. */
.msg.assistant { width: 100%; }
/* Действия внутри шага: треугольник разворачивает список «время - что сделано». */
.sp-toggle { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 6px 1px 3px; border-radius: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; vertical-align: middle; }
.sp-toggle:hover { background: var(--surface-2); color: var(--text); }
.sp-toggle .ic { width: 14px; height: 14px; stroke-width: 2.4; transition: transform .15s; }
.sp.open .sp-toggle .ic { transform: rotate(90deg); }
.sp .sd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp.open > .grow > .sd { display: none; }
.acts { display: none; margin-top: 6px; border-left: 2px solid var(--border); padding-left: 10px; }
.sp.open .acts { display: block; }
.acts .act { display: flex; gap: 10px; padding: 3px 0; font-size: 13.5px; line-height: 1.4; }
/* Текст живого хода — обычным потоком, а не колонками (.body занят раскладкой страницы). */
.msg .body { display: block; flex: none; min-height: 0; }
.act .at { color: var(--muted-2); flex: none; font-variant-numeric: tabular-nums; width: 40px; }
.act .ad { color: var(--text-2); overflow-wrap: anywhere; }

/* Поле просмотра: курсор-рука, страницу можно таскать, картинки не перетаскиваются как файлы. */
.pages { cursor: grab; user-select: none; }
.pages.dragging { cursor: grabbing; }
.pages.dragging .page img { pointer-events: none; }
.page img { -webkit-user-drag: none; user-drag: none; }

/* Заметка о фоновой работе (помощники пишут файлы после ответа нейросети). */
.msg.sys { align-self: center; width: auto; max-width: min(760px, 100%); background: var(--surface-2); border: none; color: var(--muted); font-size: 13.5px; line-height: 1.45; padding: 7px 14px; border-radius: 12px; text-align: center; }
.msg.sys .nt { color: var(--muted-2); margin-right: 8px; font-variant-numeric: tabular-nums; }

/* Шаг хода: счётчик действий - тихой подписью, разворот - крупной стрелкой справа. */
.sp-count { margin-left: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted-2); }
.sp-toggle { margin-left: 6px; padding: 0; width: 30px; height: 30px; border-radius: 8px; justify-content: center; flex: none; align-self: flex-start; margin-top: -3px; }
.sp-toggle .ic { width: 20px; height: 20px; stroke-width: 2.2; }
/* Карточка файлов в ответе - как панель файлов справа. */
.sent-card { padding: 0 0 10px; gap: 0; max-width: 620px; background: var(--surface); }
.sent-card .sec { padding: 12px 14px 8px; }
.sent-card .files { padding: 0 10px; }

/* Ожидание предпросмотра: крутилка и пояснение, шапка с крестиком сразу. */
.doc-spin { display: block; width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--primary-ring); border-top-color: var(--primary); animation: spin .9s linear infinite; }
#col-doc .pane-empty b { display: block; margin-bottom: 6px; color: var(--text); }

/* Текстовый слой предпросмотра: невидимые слова поверх картинки страницы — их можно
   выделить мышью и скопировать. Поля и пустые места по-прежнему тащат страницу. */
.page { container-type: inline-size; }
.tl-layer { position: absolute; inset: 0; user-select: text; -webkit-user-select: text; }
.tl { position: absolute; white-space: pre; color: transparent; cursor: text; }
.tw { position: absolute; top: 0; height: 100%; transform-origin: 0 0; white-space: pre; font-family: "Times New Roman", Times, serif; }
.tl::selection, .tw::selection { background: rgba(26, 109, 255, .3); color: transparent; }
.pages.dragging .tl { cursor: grabbing; }

/* Режим аккаунта в «Доступах»: СИНХРОН или работы. */
.mode-seg { display: inline-flex; flex: none; border: 1px solid var(--border-2); border-radius: 8px; overflow: hidden; font-size: 12.5px; }
.mode-seg button { padding: 4px 9px; color: var(--muted); background: var(--surface); }
.mode-seg button.on { background: var(--primary); color: #fff; font-weight: 700; }

/* Строка статистики под «Мои работы» и окно с графиком. */
.side-stats { display: flex; justify-content: flex-start; cursor: pointer; align-items: center; gap: 8px; width: calc(100% - 24px); margin: 2px 12px 6px; padding: 3px 4px; border-radius: 7px; font-size: 13px; color: var(--muted); text-align: left; }
.side-stats[hidden] { display: none; }
.side-stats b { color: var(--text); }
.side-stats .lnk { color: var(--primary); font-weight: 600; flex: none; }
.side-stats:hover { background: var(--surface-2); }
.st-kp { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.st-kp > div { border: 1px solid var(--border); border-radius: 12px; padding: 9px 14px; min-width: 140px; display: flex; flex-direction: column; }
.st-kp b { font-size: 22px; } .st-kp span { color: var(--muted); font-size: 12.5px; }
.st-ctl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.st-ctl .chip.on { background: var(--text); color: var(--surface); }
.st-date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.st-date input { border: 1px solid var(--border); border-radius: 9px; padding: 5px 8px; background: var(--surface); color: var(--text); font: inherit; }
.st-seg { display: inline-flex; margin-left: auto; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.st-seg button { padding: 5px 12px; font-size: 13px; color: var(--muted); }
.st-seg button.on { background: var(--primary); color: #fff; font-weight: 700; }
.st-sum { font-size: 13.5px; color: var(--muted); margin: 6px 0 4px; }
.st-chart { position: relative; }
.st-svg { width: 100%; height: 300px; display: block; }
.st-svg text { font-size: 11px; fill: var(--muted-2); }
.st-svg .g { stroke: var(--border); stroke-width: 1; }
.st-svg .l { fill: none; stroke: var(--primary); stroke-width: 2.2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.st-svg .a { fill: var(--primary); opacity: .08; }
.st-svg .d { fill: var(--primary); }
.st-svg .hv { stroke: var(--border-2); stroke-dasharray: 3 3; }
.st-svg .hp { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.st-tip { position: absolute; transform: translate(-50%, -130%); background: var(--text); color: var(--surface); font-size: 12.5px; padding: 4px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; }

/* Крестик удаления шаблона в списке: виден при наведении на строку. */
.tpl-it { position: relative; }
.tpl-del { margin-left: auto; flex: none; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0; }
.tpl-it:hover .tpl-del, .tpl-del:focus { opacity: 1; }
.tpl-del:hover { background: var(--red-soft); color: var(--red-text); }
.tpl-del .ic { width: 15px; height: 15px; }
@media (hover: none) { .tpl-del { opacity: 1; } }

/* Подтверждение окошком у кнопки (удаление шаблона). */
.cpop { position: fixed; z-index: 60; width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); padding: 12px 14px; animation: pop-in .12s ease-out; }
.cpop::before { content: ""; position: absolute; top: -7px; left: var(--arrow, 200px); width: 12px; height: 12px; background: var(--surface);
  border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); }
.cpop.up::before { top: auto; bottom: -7px; transform: rotate(225deg); }
.cpop b { display: block; font-size: 14.5px; margin-bottom: 4px; overflow-wrap: anywhere; }
.cpop p { margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.cpop-row { display: flex; gap: 8px; justify-content: flex-end; }
.cpop-row button { min-height: 34px; padding: 0 14px; border-radius: 9px; font-weight: 600; }
.danger-btn { background: var(--red, #dc2626); color: #fff; }
.danger-btn:hover { filter: brightness(.94); }
.tpl-del.armed { opacity: 1; background: var(--red-soft); color: var(--red-text); }

/* Режим поиска: мелкая метка заглавными — «СЕССИЯ» / «ПЕРЕПИСКА», занимает меньше места. */
.smode { height: 22px; padding: 0 7px; gap: 0; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2); background: var(--surface-2); border: none; box-shadow: none; }
.smode:hover { color: var(--text); background: var(--surface-3); }
.smode.by-chat, .smode.by-chat:hover { color: var(--violet-text); background: var(--violet-soft); box-shadow: none; }

/* Перетаскивание черновика на сессию. */
/* Обычные сессии — простая стрелка мыши, рука только у черновика, который можно тащить. */
#works .it { cursor: default; }
#works .it[draggable="true"] { cursor: grab; }
#works .it[draggable="true"]:active { cursor: grabbing; }
.it.drag-src { opacity: .4; }
/* Подсказка висит поверх списка и не сдвигает строки: иначе цель уезжает из-под мыши. */
.drag-hint { position: sticky; top: 0; z-index: 2; margin: 0 8px -34px; height: 34px; pointer-events: none; box-shadow: 0 6px 16px rgba(0, 0, 0, .15); padding: 7px 10px; border-radius: 9px; background: var(--violet, #7c5cff); color: #fff; font-size: 12.5px; font-weight: 600; }
.drop-hint { display: none; margin-left: auto; font-size: 11px; font-weight: 700; color: var(--violet-text); flex: none; }
.it.drop { outline: 2px solid var(--violet, #7c5cff); background: var(--violet-soft); }
.it.drop .drop-hint { display: inline; }
.it.drop .dots, .it.drop .go { display: none; }
.cpop-row .danger-btn.ok-blue { background: var(--primary); }

/* Аккаунт Telegram работы в строке статуса и меню выбора. */
.tg-target { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 20px; font-size: 13px; font-weight: 600;
  background: var(--tg-soft, #e7f5fc); color: var(--tg-text, #13739f); }
.tg-target .ic { width: 13px; height: 13px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
.tg-target i { font-style: normal; font-size: 10px; opacity: .8; }
.tg-target.own { box-shadow: inset 0 0 0 1px var(--tg, #2aa3df); }
.tg-target:hover { filter: brightness(.97); }
.tg-menu { position: fixed; z-index: 60; width: 270px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16); padding: 6px; animation: pop-in .12s ease-out; }
.tg-menu .h { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 4px 8px 6px; }
.tg-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border-radius: 8px; font-size: 13.5px; text-align: left; color: var(--text); }
.tg-menu button:hover { background: var(--surface-2); }
.tg-menu button.on { background: var(--primary-soft); font-weight: 700; }
.tg-menu .av { width: 24px; height: 24px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 11.5px; display: flex; align-items: center; justify-content: center; flex: none; }
.tg-menu .ck { margin-left: auto; color: var(--primary); }
.tg-menu .def { color: var(--muted); font-size: 12.5px; }
.tg-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }

.tgacc .nm[data-tgrename] { cursor: text; border-bottom: 1px dashed transparent; }
.tgacc .nm[data-tgrename]:hover { border-bottom-color: var(--border-2); }
.tg-rename { width: 180px; height: 28px; padding: 2px 8px; font-weight: 700; }

/* Пометка у одноимённых аккаунтов: «Михаил Федосеев 2». */
.tg-mark { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--surface-3, #e9edf3); color: var(--text-2); font-size: 11.5px; font-weight: 800; flex: none; }

/* «Друг ▾» в углу: какая подписка сейчас, и меню выбора с остатком лимитов. */
.acc-pick { color: var(--primary); font-weight: 800; font-size: 11.5px; border-bottom: 1px dashed var(--primary); padding: 0; line-height: 1.3; }
.acc-pick:hover { color: var(--primary-hover, var(--primary)); }
.acc-menu { position: fixed; z-index: 60; width: 290px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18); padding: 6px; animation: pop-in .12s ease-out; }
.acc-menu .h { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 4px 8px 6px; }
.acc-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border-radius: 9px; text-align: left; color: var(--text); }
.acc-menu button:hover:not(:disabled) { background: var(--surface-2); }
.acc-menu button.on { background: var(--primary-soft); }
.acc-menu button:disabled { opacity: .5; cursor: not-allowed; }
.acc-menu .av { width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
.acc-menu .nm { display: flex; flex-direction: column; min-width: 0; }
.acc-menu .nm b { font-size: 13.5px; } .acc-menu .nm small { color: var(--muted); font-size: 11.5px; }
.acc-menu .lm { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--muted); line-height: 1.45; flex: none; }
.acc-menu .lm b { color: var(--text); } .acc-menu .lm .out { color: var(--red-text, #e5484d); }

/* Шапка лимитов: нейросеть и подписка — две голубые плашки «✦ Opus 5.5 ▾» и «Основной ▾». */
.hpill { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 4px; border-radius: 20px;
  border: 1px solid var(--primary-line, #cfe0ff); background: var(--primary-soft); color: var(--primary);
  font-weight: 800; font-size: 12.5px; line-height: 1; white-space: nowrap; }
.hpill:hover { filter: brightness(.97); background: var(--primary-soft); }
.hpill .caret { font-style: normal; font-size: 10px; margin-left: 1px; }
.hdr-col .mdl.hpill { gap: 6px; border-radius: 20px; padding: 0 10px 0 4px; background: var(--primary-soft); border: 1px solid var(--primary-line, #cfe0ff); }
.hdr-col .mdl.hpill:hover { background: var(--primary-soft); }
.hdr-col .mdl.hpill .mi { width: 18px; height: 18px; border-radius: 6px; }
.hdr-col .mdl.hpill .mi .ic { width: 11px; height: 11px; }
.hdr-col .mdl.hpill .mv { font-size: 12.5px; font-weight: 800; color: var(--primary); }
.acc-pick.hpill { padding: 0 10px; border-bottom: 1px solid var(--primary-line, #cfe0ff); font-size: 12px; }
.mrow .plan { display: flex; align-items: center; gap: 0; }
.mrow .plan .plan-rest { margin-left: 4px; }

/* Плашка нейросети — фиолетовая (подписка остаётся синей). */
.hdr-col .mdl.hpill { background: var(--violet-soft, #f0ecff); border-color: var(--violet-line, #ddd3ff); }
.hdr-col .mdl.hpill:hover { background: var(--violet-soft, #f0ecff); }
.hdr-col .mdl.hpill .mv, .hdr-col .mdl.hpill .caret { color: var(--violet-text, #6d4fe0); }
.hdr-col .mdl.hpill .mi { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
/* Список нейросетей у плашки. */
.mdl-menu { position: fixed; z-index: 60; width: 270px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .18); padding: 6px; animation: pop-in .12s ease-out; }
.mdl-menu .h { font-size: 11px; color: var(--muted); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin: 4px 8px 6px; }
.mdl-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px; border-radius: 9px; text-align: left; color: var(--text); }
.mdl-menu button:hover { background: var(--surface-2); }
.mdl-menu button.on { background: var(--violet-soft, #f0ecff); }
.mdl-menu b { font-size: 13.5px; }
.mdl-menu .rd { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-2); flex: none; }
.mdl-menu button.on .rd { border-color: var(--violet, #7c5cff); background: var(--violet, #7c5cff); box-shadow: inset 0 0 0 3px var(--surface); }
.mdl-menu .tag { margin-left: auto; font-size: 11px; font-weight: 700; border-radius: 5px; padding: 1px 6px; flex: none; }
.mdl-menu .t1 { background: var(--red-soft, #fde8e8); color: var(--red-text, #b42318); }
.mdl-menu .t2 { background: var(--green-soft, #e8f5ec); color: var(--green-text, #16794a); }
.mdl-menu .t3 { background: var(--surface-2); color: var(--text-2); }
.mdl-menu .foot { font-size: 11.5px; color: var(--muted); margin: 6px 8px 2px; }
/* Подписки: каждое окно лимита строкой с полоской. */
.acc-menu { width: 390px; }
.acc-menu button { align-items: flex-start; }
.acc-menu .pro { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acc-menu .wl { display: grid; grid-template-columns: auto 1fr auto; gap: 0 8px; align-items: baseline; margin-top: 6px; font-size: 11.5px; white-space: nowrap; }
.acc-menu .wl .k { color: var(--text); }
.acc-menu .wl .u { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.acc-menu .wl .p { font-weight: 800; font-size: 12.5px; color: var(--text); }
.acc-menu .wl .p.out { color: var(--red-text, #e5484d); }
.acc-menu .wl .mb { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: var(--surface-3, #e8ebf1); position: relative; margin: 2px 0 3px; }
.acc-menu .wl .mb i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--primary); }
.acc-menu .wl .mb.out i { background: var(--red, #e5484d); }
.acc-menu .wl-none { color: var(--muted); font-size: 11.5px; margin-top: 4px; }

/* Просмотр картинки: большое окно, увеличение и перетаскивание. */
.modal-card.image { width: min(1400px, 96vw); }
.lb-stage { position: relative; height: min(68vh, 860px); overflow: hidden; background: var(--surface-2); border-radius: 10px; cursor: zoom-in; touch-action: none; user-select: none; }
.lb-stage.can-drag { cursor: grab; }
.lb-stage.dragging { cursor: grabbing; }
.lb-img { position: absolute; left: 0; top: 0; transform-origin: 0 0; max-width: none; max-height: none; border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.lb-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lb-bar .icon-btn { width: 32px; height: 32px; font-size: 18px; font-weight: 700; }
.lb-val { min-width: 54px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb-fit { height: 32px; padding: 0 12px; }
.lb-hint { font-size: 12.5px; margin-left: auto; }

/* Подписки: без кружков — имя цветом подписки и тонкая полоса того же цвета слева; плотнее. */
.acc-menu { width: 370px; padding: 5px; }
.acc-menu .h { margin: 3px 7px 4px; font-size: 10.5px; }
.acc-menu button.sub-row { padding: 5px 8px 5px 9px; border-left: 3px solid var(--sub); border-radius: 4px 8px 8px 4px; margin-bottom: 3px; }
.acc-menu button.sub-row.on { background: var(--primary-soft); }
.acc-menu .nm { flex-direction: row; align-items: baseline; gap: 6px; }
.acc-menu .nm b { color: var(--sub); font-size: 13px; font-weight: 800; }
.acc-menu .nm small { font-size: 11px; }
.acc-menu .nm small::before { content: "· "; }
.acc-menu .wl { margin-top: 2px; font-size: 11px; }
.acc-menu .wl .p { font-size: 11.5px; }
.acc-menu .wl .mb { height: 2px; margin: 1px 0 2px; }
/* Подписки: текст крупнее, проценты как были. */
.acc-menu .h { font-size: 11.5px; }
.acc-menu .nm b { font-size: 14.5px; }
.acc-menu .nm small { font-size: 12.5px; }
.acc-menu .wl { font-size: 12.5px; }
.acc-menu .wl .k, .acc-menu .wl .u { font-size: 12.5px; }
.acc-menu { width: 410px; }

/* Просмотр картинки: щелчок — крупнее (лупа «+»), на максимуме — лупа «−», при перетаскивании — рука. */
.lb-stage, .lb-stage.can-drag { cursor: zoom-in; }
.lb-stage.at-max { cursor: zoom-out; }
.lb-stage.dragging { cursor: grabbing; }
.lb-img.anim { transition: transform .22s ease; }
.lb-bar .icon-btn:disabled { opacity: .35; cursor: default; }

/* Меню «⋯» работы: заголовок с названием, цветные значки, удаление на розовом. */
.work-pop { width: 272px; padding: 6px; border-radius: 14px; box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 2px 6px rgba(15, 23, 42, .06); animation: pop-in .14s ease-out; }
.work-pop .wm-head { font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; padding: 6px 10px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.work-pop .mi { gap: 11px; padding: 7px 9px; border-radius: 10px; font-size: 14.5px; font-weight: 500; transition: background .12s; }
.work-pop .mi .mic { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; transition: transform .12s; }
.work-pop .mi .mic .ic { width: 16px; height: 16px; stroke-width: 2.1; color: inherit; }
.work-pop .mi:hover .mic { transform: scale(1.06); }
.work-pop .c-blue .mic { background: #e8f0ff; color: #1a6dff; }
.work-pop .c-amber .mic { background: #fff3dc; color: #c27803; }
.work-pop .c-violet .mic { background: #f0ebff; color: #7c5cff; }
.work-pop .c-green .mic { background: #e3f6ee; color: #0e8a5f; }
.work-pop .mi.del { color: var(--red-text); margin-top: 2px; }
.work-pop .mi.del .mic { background: #fde8e8; color: #dc2626; }
.work-pop .mi.del:hover { background: #fdecec; }
.work-pop kbd { margin-left: auto; font: 600 11px/1 inherit; color: var(--muted-2); border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: 3px 5px; }
.work-pop small { font-size: 11.5px; }
.work-pop .mi.del small { color: #e57373; }
.work-pop hr { margin: 5px 6px; }
/* Подтверждение сбоку от строки — стрелка влево. */
.cpop.side::before { top: var(--arrow-y, 18px); left: -7px; transform: rotate(-45deg); }
.it.del-armed { background: #fdecec !important; box-shadow: inset 3px 0 0 #dc2626 !important; }

/* Меню «⋯» работы — тёмное: значок и текст, справа от строки. */
.work-pop { width: 250px; padding: 6px; border-radius: 12px; border: none; background: #111827; color: #e5e9f0;
  box-shadow: 0 16px 38px rgba(15, 23, 42, .32), 0 2px 6px rgba(15, 23, 42, .18); }
.work-pop .mi { gap: 12px; padding: 9px 12px; border-radius: 8px; font-size: 15px; font-weight: 400; color: #e5e9f0; }
.work-pop .mi:hover, .work-pop .mi:focus-visible { background: #2a3242; outline: none; }
.work-pop .mi > .ic { width: 19px; height: 19px; color: #cbd2de; stroke-width: 1.8; flex: none; }
.work-pop .mi.del, .work-pop .mi.del > .ic { color: #ff7a7a; }
.work-pop .mi.del:hover, .work-pop .mi.del:focus-visible { background: rgba(255, 122, 122, .14); }
.work-pop hr { border: none; border-top: 1px solid #2a3242; margin: 4px 0; }

/* Украшение синапсом — только шапка «Мои работы»: картинка за заголовком, кнопками и
   статистикой, к поиску плавно уходит в фон. Шапка работы справа — без рисунка. */
#side-works { position: relative; isolation: isolate; }
#side-works::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 130px; pointer-events: none; opacity: .9;
  background: url(/fonts/synapse.jpg) 62% 52% / 150% auto no-repeat;
  -webkit-mask: linear-gradient(#000 35%, transparent 92%); mask: linear-gradient(#000 35%, transparent 92%); }
/* На телефоне картинка в шапке списка тоже есть — как на макете. */

/* Кнопка меню работы — жёлтая молния в кружке («быстрые действия»). */
.dots { width: 28px; height: 28px; border-radius: 50%; border: none; background: #fff4dc; color: #d97706; transition: background .12s, transform .12s; }
.dots:hover, .it.menu-open .dots { background: #ffe8b5; transform: scale(1.06); }
.dots .ic { width: 15px; height: 15px; }

/* Список подписок: «осталось» вплотную к проценту; пока переспрашиваем — «обновляю…». */
.acc-menu .wl .p small { font-weight: 400; font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.acc-menu .wl .p.out small { color: inherit; }
.acc-menu .h .upd { margin-left: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--primary); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* Листание картинок в окне просмотра: круглые стрелки по бокам и «2 из 5». */
.lb-wrap { position: relative; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; z-index: 2;
  display: flex; align-items: center; justify-content: center; background: rgba(17, 24, 39, .55); color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .2); transition: background .12s, transform .12s; }
.lb-nav:hover { background: rgba(17, 24, 39, .8); transform: translateY(-50%) scale(1.06); }
.lb-nav .ic { width: 22px; height: 22px; stroke-width: 2.4; }
.lb-nav.prev { left: 12px; } .lb-nav.next { right: 12px; }
.lb-count { font-weight: 700; font-size: 13px; color: var(--text-2); margin-right: 6px; }

/* Аккаунты Telegram с фото из Telegram (вариант 5): фото 34 px, строки просторнее. */
.tg-menu { width: 290px; }
.tg-menu button { padding: 8px 10px; font-size: 14.5px; gap: 11px; }
.tg-menu .av, .tg-target .av { position: relative; overflow: hidden; }
.tg-menu .av { width: 34px; height: 34px; font-size: 14px; }
.tg-menu .av img, .tg-target .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.tg-menu .ck { font-weight: 800; }
.tg-target { gap: 6px; padding-left: 4px; height: 28px; }
.tg-target .av { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 10.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* Своя реплика: «Вы» слева, время и дата справа; картинки крупно сверху, документы карточками. */
.msg.user .who { display: flex; justify-content: space-between; gap: 16px; }
.msg.user .who .when { opacity: .85; white-space: nowrap; }
.msg.user.has-pics { padding-top: 6px; }
.u-pics { display: grid; gap: 4px; margin: 0 -10px 10px; grid-template-columns: repeat(var(--c, 1), 1fr); }
.u-pics.n2 { --c: 2; } .u-pics.n3 { --c: 3; }
.u-pics img { width: 100%; height: 170px; object-fit: cover; border-radius: 12px; cursor: zoom-in; background: rgba(255, 255, 255, .15); }
.u-pics.n1 img { height: auto; max-height: 280px; }
.u-docs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; white-space: normal; }
.u-doc { display: flex; align-items: center; gap: 10px; background: #fff; color: var(--text, #111827); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: transform .12s; }
.u-doc:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.u-doc.off { opacity: .6; cursor: default; }
.u-doc b { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-doc small { color: var(--muted, #6b7280); font-size: 11.5px; }
.u-doc .grow { min-width: 0; }

/* Предпросмотр документа: больше места странице, чтобы 100 % помещались целиком. */
.doc-side { width: 230px; }
.pages { padding: 18px 10px; }
/* 100 % — страница во всю ширину области (но не шире 820 px); крупнее — шире, с прокруткой. */
.page:not(.image) { width: calc(min(820px, 100%) * var(--zoom, 1)); }

/* Лимиты: полоска плавно доезжает до нового значения. */
#limits .lr b i { transition: width .8s cubic-bezier(.2, .8, .2, 1); }

/* Ручка над полем ввода: курсор ↕ у верхнего края, тянем вверх — поле выше. */
#composer .cbox { position: relative; }
.comp-grip { position: absolute; left: 24px; right: 24px; top: -7px; height: 14px; cursor: ns-resize; z-index: 2; touch-action: none; }
.comp-grip i { position: absolute; left: 50%; top: 5px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border-2); opacity: 0; transition: opacity .15s; }
.comp-grip:hover i, body.comp-resizing .comp-grip i { opacity: 1; background: var(--primary); }
body.comp-resizing { cursor: ns-resize; user-select: none; }
@media (pointer: coarse) { .comp-grip { display: none; } }

/* Выдача блоками: жирное название предмета над карточками, внизу «всё в Telegram» и «скачать всё». */
.blk-title { font-weight: 800; font-size: 15px; margin: 14px 0 -4px; color: var(--text); }
.sent-all { display: flex; gap: 16px; margin-top: 10px; }
.sent-all .link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.sent-all .link .ic { width: 15px; height: 15px; }

/* Выдача: «всё в Telegram» справа на строке первого предмета, время и дата файла — справа в карточке. */
.blk-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; max-width: 620px; padding-right: 14px; }
.blk-title .blk-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.blk-title .blk-all .ic { width: 15px; height: 15px; }
.sent-card .f .fw { margin-left: auto; font-size: 11.5px; color: var(--muted); white-space: nowrap; text-align: right; padding-left: 8px; }

/* Картинки в своей реплике — лента квадратиков 84 px (вариант 3); пятая и дальше — под «+N». */
.u-pics { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; grid-template-columns: none; }
.u-pic { position: relative; width: 84px; height: 84px; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.u-pic[hidden] { display: none; }
.u-pics .u-pic img, .u-pics.n1 .u-pic img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top left; border-radius: 0; display: block; }
.u-pic.more b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .5);
  color: #fff; font-size: 18px; font-weight: 800; pointer-events: none; }
.msg.user.has-pics { padding-top: 10px; }

/* Кнопка под ответом нейросети: текст ответа — в Telegram. */
.ans-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.ans-tg { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--tg, #2aa3df); color: #fff; transition: transform .12s, filter .12s; }
.ans-tg:hover { transform: scale(1.06); filter: brightness(1.05); }
.ans-tg:disabled { opacity: .6; }
.ans-tg.done { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tg, #2aa3df); }
.ans-tg .ic { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }

/* Просмотр картинок — тёмный экран, миниатюры столбиком слева (вариант 3б). */
.lbx { position: fixed; inset: 0; z-index: 80; display: flex; background: rgba(10, 12, 16, .97); backdrop-filter: blur(6px); animation: lbx-in .16s ease-out; }
@keyframes lbx-in { from { opacity: 0; } }
.lbx-side { flex: none; width: 112px; padding: 16px 12px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.lbx-th { flex: none; width: 88px; height: 66px; border-radius: 8px; overflow: hidden; opacity: .5; transition: opacity .12s, box-shadow .12s; padding: 0; }
.lbx-th img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.lbx-th:hover { opacity: .85; }
.lbx-th.on { opacity: 1; box-shadow: 0 0 0 2px #fff; }
.lbx-main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.lbx-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px 8px; color: #e5e7eb; }
.lbx-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbx .lb-count { color: #9ca3af; font-weight: 600; font-size: 13px; }
.lbx-close { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
.lbx-close:hover { background: rgba(255, 255, 255, .2); }
.lbx-close .ic { width: 18px; height: 18px; }
.lbx .lb-stage { flex: 1; height: auto; min-height: 0; background: none; border-radius: 0; margin: 0 16px; }
.lbx-bar { align-self: center; display: flex; align-items: center; gap: 4px; margin: 10px 0 16px; padding: 5px 8px; border-radius: 22px;
  background: rgba(40, 44, 52, .9); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
.lbx-bar button { color: #fff; padding: 4px 10px; border-radius: 14px; font-weight: 700; }
.lbx-bar button:hover:not(:disabled) { background: rgba(255, 255, 255, .12); }
.lbx-bar button:disabled { opacity: .35; }
.lbx-bar .lb-val { min-width: 48px; text-align: center; }
.lbx-bar i { width: 1px; height: 16px; background: rgba(255, 255, 255, .25); margin: 0 4px; }
.attach-chip.can-open { cursor: zoom-in; }
.attach-chip.can-open:hover { filter: brightness(.97); }
@media (max-width: 860px) { .lbx-side { display: none; } }

/* Правка текста ответа перед отправкой в Telegram (сам ответ в кабинете не меняется). */
.ans-txt { border-radius: 8px; transition: background .12s, box-shadow .12s; cursor: text; }
.ans-txt[contenteditable="true"] { outline: none; background: #f7faff; box-shadow: 0 0 0 2px var(--primary-ring, #c7d7fe); padding: 4px 6px; margin: -4px -6px; }
.ans-bar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 10px 0 4px; font-size: 12.5px; flex-wrap: wrap; }
.ans-send { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--tg, #2aa3df); color: #fff; font-weight: 700; font-size: 13px; }
.ans-send:hover { filter: brightness(1.05); }
.ans-send:disabled { opacity: .6; }
.ans-send .ic { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 1.2; }
/* «всё в Telegram» — на одной линии с названием предмета, чуть ниже, ближе к карточке. */
.blk-title { align-items: flex-end; }
.blk-title .blk-all { position: relative; top: 3px; }

/* Кнопка меню работы — зелёная звёздочка (вариант 7 в цвете 5, насыщеннее). */
.dots { background: #c9efdd; color: #047857; }
.dots:hover, .it.menu-open .dots { background: #b3e7cf; }
.dots .ic { fill: none; stroke: currentColor; stroke-width: 2; width: 15px; height: 15px; }

/* «всё в Telegram» в переписке — как в панели справа: без значка, тем же шрифтом и цветом. */
.blk-title .blk-all { display: inline; font-weight: 600; font-size: 14px; color: var(--tg-text); }

/* Меню «★» работы — белое, пункт под мышью зелёный, в цвет звёздочки (вариант 1). */
.work-pop { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: 0 14px 34px rgba(15, 23, 42, .14); }
.work-pop .mi { color: var(--text); }
.work-pop .mi:hover, .work-pop .mi:focus-visible { background: #e3f6ee; color: #047857; outline: none; }
.work-pop .mi > .ic { color: var(--muted); }
.work-pop .mi:hover > .ic, .work-pop .mi:focus-visible > .ic { color: #047857; }
.work-pop .mi.del, .work-pop .mi.del > .ic { color: var(--red-text, #dc2626); }
.work-pop .mi.del:hover, .work-pop .mi.del:focus-visible { background: var(--red-soft, #fdecec); color: var(--red-text, #dc2626); }
.work-pop .mi.del:hover > .ic { color: var(--red-text, #dc2626); }
.work-pop hr { border-top-color: var(--line, #e9ecf2); }

/* Поиск при открытом черновике: черновик наверху, результаты — под пунктиром (вариант 3в). */
.draft-sep { border-top: 1px dashed var(--border-2, #cbd5e1); margin: 6px 6px 2px; }

/* Стрелки по бокам картинки в просмотре — листать мышкой. */
.lbx-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .12); color: #fff; transition: background .12s, transform .12s; }
.lbx-nav:hover { background: rgba(255, 255, 255, .24); transform: translateY(-50%) scale(1.06); }
.lbx-nav .ic { width: 24px; height: 24px; stroke-width: 2.4; }
.lbx-nav.prev { left: 24px; } .lbx-nav.next { right: 24px; }

/* Новый черновик, пришедший во время поиска, — всплывает наверху и мягко мигает. */
.it.draft-new { animation: draft-in 1.6s ease-out; }
@keyframes draft-in { 0% { background: #c7ddff; transform: translateY(-6px); } 100% { background: inherit; transform: none; } }

/* ---------- телефон и веб-версия в боте: вкладки работы, лимиты, карточки файлов ---------- */
.only-phone { display: none !important; }
@media (max-width: 860px) {
  .only-phone { display: inline-flex !important; }
  .ttl h2 { white-space: normal; overflow: visible; }
  .tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin: 6px -12px 0; padding: 0 4px; }
  .tabs .tab { justify-content: center; font-size: 13.5px; padding: 9px 2px; }
  /* Нейросеть, подписка и лимиты — во вкладке «Лимиты», в шапке их нет. */
  .hdr-col { display: none; }
  body.tab-limits .tr { flex-wrap: wrap; }
  body.tab-limits .hdr-col { display: block; order: 5; flex: 1 1 100%; width: 100%; padding: 12px 0 0; }
  body.tab-limits .hdr-col .lim, body.tab-limits .mrow .plan { display: block !important; }
  body.tab-limits .hdr-col .mdl .mi, body.tab-limits .hdr-col .mdl .lk { display: inline-flex; }
  body.tab-limits .lim .lr { font-size: 13px; }
  /* Список работ — на весь экран, как отдельный экран приложения. */
  .side { width: 100vw !important; }
  /* Карточки файлов в переписке: название во всю ширину, кнопки — строкой ниже. */
  .sent-card .f { flex-wrap: wrap; row-gap: 6px; }
  .sent-card .f .grow { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .sent-card .f .fw { margin-left: 46px; }
  .sent-card .f .ap-btn { margin-left: 46px; order: 4; }
  .sent-card .f .fw, .sent-card .f .act { order: 5; }
  .sent-card .f .act { margin-left: auto; }
  .ap-res { flex-wrap: wrap; }
  .blk-title { padding-right: 0; flex-wrap: wrap; }
}
/* В Telegram: без лишних отступов сверху (шапку рисует сам Telegram). */
body.tg-app .top { padding-top: 8px; }

/* Телефон / веб-версия в боте: шапка без отдельной колонки под ≡, черновик без наложений. */
@media (max-width: 860px) {
  #view-work .tr { display: block; position: relative; }
  #view-work #open-side { position: absolute; left: -6px; top: 0; width: 34px; height: 34px; }
  #view-work .ttl { padding-left: 34px; }
  #view-work .ttl .tabs { margin-left: -46px; }
  .alt-head { position: relative; padding-left: 34px; }
  .alt-head [data-open-side] { position: absolute; left: -6px; top: 2px; }
  .alt-head .ttl { flex: 1 1 100%; }
  .alt-head .mdl { margin-left: 0; }
  .alt-in:has(.cards) { height: auto; }
  .cards { display: flex; flex-direction: column; flex: none; min-height: 0; }
  .cards .card { flex: none; }
  .card .files { flex: none; max-height: 40vh; min-height: 0; }
  .bottom-bar { position: static; margin-top: 12px; }
  .sent-card .f .fw { display: none; }
}

/* Нижняя панель разделов на телефоне и в веб-версии бота. */
.mnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--border);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
.mnav button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 0 3px; font-size: 10.5px; font-weight: 600; color: var(--muted); position: relative; }
.mnav button .ic { width: 22px; height: 22px; }
.mnav button.on { color: var(--primary); }
.mnav button i { position: absolute; top: 1px; left: calc(50% + 8px); font-style: normal; background: #ef4444; color: #fff; border-radius: 8px; padding: 0 5px; font-size: 10px; font-weight: 800; line-height: 16px; }
.mnav button i:empty { display: none; }
.mnav button[hidden] { display: none; }
@media (max-width: 860px) {
  .mnav.only-phone { display: flex !important; }
  .layout { height: calc(var(--app-h, 100dvh) - 58px - env(safe-area-inset-bottom)); }
  .side { bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
  .layout.nav-open .scrim { bottom: calc(58px + env(safe-area-inset-bottom)); }
  /* Разделы — в нижней панели: кнопки «Доступы / Разработка» и крестик в списке не нужны. */
  .side .nav, #close-side { display: none !important; }
  /* Шапка списка: «Мои работы» целиком, кнопки поменьше, без пустого места сверху. */
  .sh { padding-top: 10px; gap: 6px; }
  .sh h1 { font-size: 20px; overflow: visible; text-overflow: clip; }
  .sh-btns .btn-new { padding: 6px 10px; font-size: 13px; }
  .sh-btns .btn-new .ic { width: 15px; height: 15px; }
  .toast { bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* Раздел нижней панели («Доступы») на телефоне — на весь экран над панелью, как остальные вкладки. */
@media (max-width: 860px) {
  .modal.page { bottom: calc(58px + env(safe-area-inset-bottom)); padding: 0; background: var(--bg); backdrop-filter: none; z-index: 44; animation: none; align-items: stretch; }
  .modal.page .modal-card { width: 100%; max-width: none; height: 100%; max-height: none; border: none; border-radius: 0; box-shadow: none; animation: none; }
  .modal.page .sheet-handle, .modal.page #modal-close { display: none; }
}

/* «Доступы» на телефоне (вариант А): каждый аккаунт — одна строка: кружок «сюда шлёт сайт»,
   имя и ник, переключатель «черновики / в работу», крестик. Список — одним блоком. */
@media (max-width: 860px) {
  #tg-accounts { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
  .tgacc { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; margin: 0; border: none; border-bottom: 1px solid var(--line); border-radius: 0; }
  .tgacc:last-child { border-bottom: none; }
  .tgacc .mark { padding-top: 0; }
  .tgacc .av { width: 28px; height: 28px; font-size: 13px; }
  .tgacc .row1 { display: block; flex: 1 1 0; min-width: 0; }
  .tgacc .row1 .nm { display: inline; font-size: 14.5px; white-space: nowrap; }
  .tgacc .row1 .sub2 { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tgacc .row1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tgacc .row1 .tg-mark { margin-left: 4px; }
  .tgacc .tagp.tgon { display: none; }
  .tgacc .mode-seg { margin-left: 0; flex: none; }
  .tgacc .mode-seg button { font-size: 11.5px; padding: 4px 6px; }
  .tgacc [data-tgdel], .tgacc [data-tgdel-nick] { margin-left: 0; flex: none; width: 26px; height: 26px; }
  /* Учётные записи Claude и прочие пункты — тоже плотнее. */
  .modal.page .choice:not(.tgacc) { padding: 8px 10px; margin-bottom: 6px; }
  .modal.page .modal-body { padding: 10px 12px; }
}

/* Подсказка в поле ввода — в одну строку, без обрезанной второй строки. */
.cbox textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Внутри Telegram шапку и полосу состояния рисует сам Telegram: отступ «под вырез экрана»
   там лишний — на Android он давал пустую полосу сверху. */
body.tg-app .side { padding-top: 0; }
body.tg-app .top { padding-top: 8px; }
body.tg-app .alt-in { padding-top: 10px; }

/* «Разработка» на телефоне: вкладки «Переписка», «Файлы» и «Лимиты» (нейросеть и подписка),
   как в обычных работах; «Документ» здесь не нужен. */
@media (max-width: 860px) {
  body.dev-mode #tabs { display: flex; }
  body.dev-mode #tabs .tab[data-tab="doc"] { display: none !important; }
}

/* Шапка работы в одну строку на телефоне (вариант 1 + аккаунт Telegram справа). */
.w-dot, .w-more, .w-tgq, .sent-more { display: none; }
@media (max-width: 860px) {
  #view-work .title-row { gap: 8px; }
  #view-work .ttl h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; font-size: 16.5px; }
  #view-work .w-dot:not([hidden]) { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--muted-2); }
  #view-work .w-dot.busy { background: #2563eb; animation: pulse 1.4s ease-in-out infinite; }
  #view-work .w-dot.work { background: #2563eb; }
  #view-work .w-dot.review { background: #f59e0b; }
  #view-work .w-dot.done { background: #16a34a; }
  #view-work .w-dot.broken { background: #ef4444; }
  #view-work .w-more:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 26px; color: var(--muted); font-size: 12px; flex: none; transition: transform .2s; }
  #view-work.meta-open .w-more { transform: rotate(180deg); }
  #view-work .w-tgq:not([hidden]) { display: inline-flex; flex: none; }
  .w-tgq .tg-target > span:not(.av) { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Статус, стоимость и прочее — по «▾». Обрыв связи («Продолжить») виден всегда. */
  #view-work #w-meta { display: none; }
  #view-work.meta-open #w-meta, #view-work #w-meta:has(.pill.red) { display: flex; }
  #view-work #w-meta [data-tgtarget] { display: none; }
  /* Выданные файлы — строками списка: имя, размер и кнопки в одной строке. */
  /* Одним списком с разделителями, а не отдельными карточками. */
  .sent-card .files { gap: 0; padding: 0 6px; }
  .sent-card .f { padding: 6px 4px; gap: 10px; border: none; border-radius: 0; border-bottom: 1px solid var(--line); background: transparent; }
  .sent-card .f:last-child { border-bottom: none; }
  .sent-card .f .fi { width: 30px; height: 34px; font-size: 9px; padding-bottom: 4px; }
  .sent-card .f .n { font-size: 14.5px; }
  .sent-card .f .grow { flex: 1 1 calc(100% - 150px); }
  .sent-card .f .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sent-card .f .act { order: 2; margin-left: 6px; }
  .sent-card .f .ap-btn { order: 6; }
  .sent-card:not(.open) .f.fold { display: none; }
  .sent-more { display: block; width: 100%; padding: 10px; color: var(--primary); font-weight: 700; font-size: 14px; text-align: center; }
}

/* Переписка на телефоне — как в Telegram: фон-«обои», плотный текст 16 px, пузыри,
   свои сообщения светло-зелёные, время внизу справа. На компьютере — как было. */
.tg-time { display: none; }
:root { --tgc-bg: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22260%22%20height%3D%22260%22%20viewBox%3D%220%200%20260%20260%22%20fill%3D%22none%22%20stroke%3D%22%232f4a1f%22%20stroke-opacity%3D%22.13%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M30%2040c-6-8-20-2-14%208l14%2013%2014-13c6-10-8-16-14-8z%22/%3E%20%3Cpath%20d%3D%22M120%2022l5%2010%2011%202-8%208%202%2011-10-5-10%205%202-11-8-8%2011-2z%22/%3E%20%3Ccircle%20cx%3D%22210%22%20cy%3D%2240%22%20r%3D%2212%22/%3E%3Ccircle%20cx%3D%22210%22%20cy%3D%2240%22%20r%3D%224%22/%3E%20%3Cpath%20d%3D%22M40%20120l50-30%208%2013-50%2030zM40%20120l-4%2015%2012-2%22/%3E%20%3Cpath%20d%3D%22M150%20110c0-10%2014-14%2020-6%208-6%2022%200%2018%2012%208%202%208%2014-2%2014h-32c-10%200-12-14-4-20z%22/%3E%20%3Crect%20x%3D%22200%22%20y%3D%22100%22%20width%3D%2240%22%20height%3D%2228%22%20rx%3D%224%22/%3E%3Cpath%20d%3D%22M200%20102l20%2015%2020-15%22/%3E%20%3Cpath%20d%3D%22M30%20200a16%2016%200%201%200%2032%200a16%2016%200%201%200-32%200M40%20196h.01M52%20196h.01M40%20208c4%204%208%204%2012%200%22/%3E%20%3Cpath%20d%3D%22M110%20190l20%2030M130%20190l-20%2030%22/%3E%3Cpath%20d%3D%22M100%20205h40%22/%3E%20%3Cpath%20d%3D%22M190%20180c10-10%2030%200%2020%2014l-10%2026M195%20230h.01%22/%3E%20%3Cpath%20d%3D%22M90%20250c8-8%2016%208%2024%200s16%208%2024%200%22/%3E%20%3C/svg%3E") 0 0 / 260px 260px repeat, radial-gradient(circle at 0% 0%, #c8cc7f 0, transparent 55%), radial-gradient(circle at 100% 100%, #d5dbb9 0, transparent 55%), radial-gradient(circle at 0% 100%, #7fad86 0, transparent 60%), radial-gradient(circle at 100% 0%, #8ab985 0, transparent 60%), #a9c48d; --tgc-in: #f6f7f3; --tgc-out: #effdde; --tgc-out-text: #000; --tgc-time: #4fae4e; --tgc-in-text: #000; }
:root[data-theme="dark"] { --tgc-bg: #0e1621; --tgc-in: #182533; --tgc-out: #2b5278; --tgc-out-text: #fff; --tgc-time: #7da8d3; --tgc-in-text: #f5f5f5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tgc-bg: #0e1621; --tgc-in: #182533; --tgc-out: #2b5278; --tgc-out-text: #fff; --tgc-time: #7da8d3; --tgc-in-text: #f5f5f5; }
}
@media (max-width: 860px) {
  /* Обои — на неподвижной колонке, а не на прокручиваемой переписке: иначе при прокрутке
     телефон перерисовывает узор каждый кадр и переписка тормозит. */
  #view-work #col-chat { background: var(--tgc-bg); }
  #view-work .chat { background: transparent; gap: 6px; padding: 6px 6px 10px; }
  /* Шрифт как в Telegram: системный (Roboto на Android, SF на iPhone), 15.5 px, плотные строки.
     Arial на телефоне выглядит крупнее из-за высоких строчных букв. */
  #view-work .msg { font-family: Roboto, -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    font-size: 15.5px; line-height: 1.25; padding: 6px 9px 7px; border: none; border-radius: 14px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .13); background: var(--tgc-in); color: var(--tgc-in-text); }
  /* Ответ — почти во всю ширину экрана, как длинные сообщения в Telegram. */
  #view-work .msg.assistant { width: auto; max-width: 100%; border-bottom-left-radius: 4px; }
  #view-work .msg.user { background: var(--tgc-out); color: var(--tgc-out-text); max-width: 88%; border-bottom-right-radius: 4px; }
  #view-work .msg.user .who { display: none; }
  /* Время — в правом нижнем углу; пустой «хвост» в конце текста держит под него место:
     поместилось в последнюю строку — встаёт рядом, нет — уходит строкой ниже. */
  #view-work .msg.user { position: relative; }
  #view-work .msg.user .tg-time { display: inline-block; width: 38px; height: 1px; }
  #view-work .msg.user[data-time]::after { content: attr(data-time); position: absolute; right: 10px; bottom: 5px; font-size: 12px; line-height: 14px; color: var(--tgc-time); }
  #view-work .msg .who { font-size: 12.5px; margin-bottom: 2px; }
  #view-work .msg p { margin: 0 0 6px; }
  #view-work .msg ul, #view-work .msg ol { margin: 4px 0; padding-left: 18px; }
  #view-work .msg li { margin: 1px 0; }
  #view-work .msg h3 { font-size: 16px; margin: 8px 0 4px; }
  #view-work .msg .steps { margin-top: 6px; padding: 4px 10px; }
  #view-work .msg.sys { background: rgba(0, 0, 0, .22); color: #fff; box-shadow: none; font-size: 13px; padding: 4px 10px; border-radius: 12px; }
  #view-work .msg.user .att { background: rgba(0, 0, 0, .06); }
}

/* «Разработка» на телефоне (вариант А): шапка в одну строку, все кнопки — в меню «⋯». */
@media (max-width: 860px) {
  #view-work.dev-head #w-meta { display: none; }
  #view-work.dev-head.meta-open #w-meta { display: flex; position: absolute; right: 0; top: 36px; z-index: 30; flex-direction: column; align-items: stretch; gap: 0;
    min-width: 240px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 4px 0; margin: 0; }
  #view-work.dev-head.meta-open #w-meta > * { border: none; border-radius: 0; padding: 11px 16px; text-align: left; background: none; font-size: 15px; height: auto; justify-content: flex-start; }
  #view-work.dev-head.meta-open #w-meta > .pill { display: none; }
  #view-work.dev-head.meta-open #w-meta > .cost, #view-work.dev-head.meta-open #w-meta > .dev-state { font-size: 12.5px; color: var(--muted); padding: 8px 16px; border-top: 1px solid var(--line); }
  #view-work.dev-head .w-more { transform: none !important; font-size: 22px; width: 30px; color: var(--text-2); order: 5; }
  .dev-mini { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
}
@media (max-width: 860px) {
  /* Файл в своём сообщении — полупрозрачная плашка на цвете пузыря (и в тёмной теме читается). */
  #view-work .msg.user .u-doc { background: rgba(0, 0, 0, .07); color: inherit; }
  #view-work .msg.user .u-doc small { color: inherit; opacity: .7; }
}

/* Телефон, вариант А: внутри работы — как чат в Telegram. Нижней панели нет (она — в списках),
   слева «‹» — назад к списку, вкладки и поле ввода тоньше. В «Разработке» и «Доступах» панель остаётся. */
@media (max-width: 860px) {
  body.in-work .mnav { display: none !important; }
  body.in-work .layout { height: calc(var(--app-h, 100dvh) - env(safe-area-inset-bottom)); }
  body.in-work .toast { bottom: calc(76px + env(safe-area-inset-bottom)); }
  #view-work #open-side svg { display: none; }
  #view-work #open-side::before { content: '‹'; font-size: 32px; line-height: 30px; font-weight: 300; color: var(--primary); margin-top: -3px; }
  #view-work .tabs .tab { padding: 7px 2px; }
  #view-work .comp { padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); }
  #view-work .cbox textarea { padding: 6px 4px; line-height: 1.35; }
}

/* «Разработка» на телефоне, вариант В: одна строка — «‹», точка, «Разработка», переключатель
   «Чат / Файлы / Лимиты» и «⋯». Нижней панели нет, как в обычной работе. */
@media (max-width: 860px) {
  #view-work.dev-head .ttl { display: flex; flex-direction: row; align-items: center; gap: 8px; min-height: 36px; padding-bottom: 4px; }
  #view-work.dev-head #w-title { flex: 1 1 auto; min-width: 0; }
  #view-work.dev-head .title-row { display: contents; }
  #view-work.dev-head .w-dot { order: 1; }
  #view-work.dev-head #w-title { order: 2; font-size: 16px; }
  #view-work.dev-head .w-tgq { display: none !important; }
  #view-work.dev-head .tabs { order: 4; flex: none; margin: 0; padding: 2px; border: none; border-radius: 9px; background: var(--surface-2); gap: 0; }
  #view-work.dev-head .tabs .tab { padding: 4px 8px; margin: 0; font-size: 12.5px; border-radius: 7px; border: none; box-shadow: none; }
  #view-work.dev-head .tabs .tab.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
  #view-work.dev-head .tabs .tab::after { display: none; }
  #view-work.dev-head .tabs .tab[data-tab="chat"] { font-size: 0; }
  #view-work.dev-head .tabs .tab[data-tab="chat"]::before { content: 'Чат'; font-size: 12.5px; }
  #view-work.dev-head .tabs .tab i { font-size: 10.5px; padding: 0 5px; margin-left: 3px; }
  #view-work.dev-head .w-more { order: 5; }
}

/* Телефон: основной шрифт — системный, как в Telegram (Roboto на Android, SF на iPhone).
   Arial с высокими строчными буквами на телефоне выглядит крупнее. Список работ — размеры как в списке чатов Telegram. */
@media (max-width: 860px) {
  body, button, input, textarea, select { font-family: Roboto, -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif; }
  .side .t { font-size: 15px; line-height: 20px; font-weight: 600; }
  .side .it .m { font-size: 13px; }
  .side .it { padding-top: 6px; padding-bottom: 6px; }
}

/* Телефон: кнопка «Лимиты» в нижней панели — кружок с остатком недели; по нажатию снизу
   выезжает список подписок с полосками лимитов (то же меню, что на сайте у названия подписки). */
.mnav #mnav-lim { display: none; }
.acc-dim { position: fixed; inset: 0; z-index: 59; background: rgba(15, 18, 24, .4); animation: fade .16s ease; }
@media (max-width: 860px) {
  .mnav #mnav-lim { display: flex; }
  .mring { --p: 0; width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: conic-gradient(var(--primary) calc(var(--p) * 1%), var(--border) 0); }
  .mring.warn { background: conic-gradient(#f59e0b calc(var(--p) * 1%), var(--border) 0); }
  .mring.out { background: conic-gradient(#ef4444 100%, #ef4444 0); }
  .mnav button .mring i { position: static; padding: 0; line-height: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); font-style: normal; font-size: 8.5px; font-weight: 800;
    color: var(--text-2); display: flex; align-items: center; justify-content: center; letter-spacing: -.02em; }
  .acc-menu.sheet { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-height: 80vh; overflow-y: auto;
    border-radius: 18px 18px 0 0; border: none; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); animation: sheet-up .26s var(--ease); }
  .acc-menu.sheet::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--border-2); margin: 0 auto 10px; }
  .acc-menu.sheet .h { font-size: 12px; }
  .acc-menu.sheet button { padding: 10px 8px; }
}

/* Панель «Лимиты и подписка» на телефоне — карточками (макет «панелью снизу»). */
@media (max-width: 860px) {
  .acc-menu.sheet { background: var(--bg); }
  .acc-menu.sheet .lc-h { font-weight: 800; font-size: 16px; margin: 0 4px 10px; display: flex; gap: 8px; align-items: baseline; }
  .acc-menu.sheet .lc-h .upd { font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .acc-menu.sheet .lc-card { display: block; width: 100%; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
  .acc-menu.sheet .lc-card.on { border: 2px solid var(--primary); background: var(--primary-soft); }
  .acc-menu.sheet .lc-card:disabled { opacity: .55; }
  .lc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .lc-head b { font-size: 17px; font-weight: 800; }
  .lc-head small { font-size: 12.5px; color: var(--muted); }
  .lc-rad { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted-2); flex: none; }
  .lc-card.on .lc-rad { border: 5px solid var(--primary); }
  .lc-now { margin-left: auto; font-size: 11.5px; font-weight: 800; color: var(--primary); background: var(--surface); border-radius: 10px; padding: 3px 8px; }
  .lc-pick { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--primary); }
  .lc-row { margin-top: 7px; }
  .lc-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--text-2); }
  .lc-top i { font-style: normal; color: var(--muted); }
  .lc-top b { font-size: 14px; color: var(--text); white-space: nowrap; }
  .lc-row.out .lc-top b, .lc-row.low .lc-top b { color: #ef4444; }
  .lc-top b small { font-size: 11.5px; font-weight: 600; color: var(--muted); }
  .lc-bar { height: 6px; border-radius: 3px; background: var(--border); margin-top: 4px; overflow: hidden; }
  .lc-bar i { display: block; height: 100%; border-radius: 3px; background: var(--primary); transition: width .6s var(--ease); }
  .lc-row.low .lc-bar i, .lc-row.out .lc-bar i { background: #ef4444; }
  .lc-none { font-size: 12.5px; color: var(--muted); }
}

/* Телефон: вкладки работы — «Переписка, Файлы, Документ, Лимиты». */
@media (max-width: 860px) {
  #tabs .tab[data-tab="chat"] { order: 0; }
  #tabs .tab[data-tab="files"] { order: 1; }
  #tabs .tab[data-tab="doc"] { order: 2; }
  #tabs .tab[data-tab="limits"] { order: 3; }
}

/* Телефон, светлая тема: везде, где был чисто белый фон (шапка, вкладки, поле ввода, списки,
   карточки, блоки шагов), — тот же мягкий «не белый», что у пузырей ответов. Листы документа остаются белыми. */
@media (max-width: 860px) and (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --surface: #f6f7f3; --surface-2: #ecede8; --field: #eef0ea; }
}
@media (max-width: 860px) {
  :root[data-theme="light"] { --surface: #f6f7f3; --surface-2: #ecede8; --field: #eef0ea; }
}

/* Телефон: точка статуса в шапке работы нажимается (раскрывает статус и стоимость) — пошире зона нажатия. */
@media (max-width: 860px) {
  #view-work:not(.dev-head) .w-dot:not([hidden]) { width: 11px; height: 11px; cursor: pointer; box-shadow: 0 0 0 8px transparent; }
}

/* Телефон, обычная работа: вместо вкладки «Лимиты» — кнопка нейросети «Opus 5.5 ▾» (лимиты — кружком внизу в списке).
   В «Разработке» вкладки прежние. */
.tab-model { display: none; }
@media (max-width: 860px) {
  #view-work:not(.dev-head) #tabs .tab[data-tab="limits"] { display: none !important; }
  #view-work:not(.dev-head) .tab-model { display: inline-flex; order: 4; align-self: center; align-items: center; gap: 5px; margin: 0 2px 0 auto; height: 28px;
    padding: 0 8px 0 3px; border-radius: 14px; background: var(--violet-soft); color: var(--violet-text); font-weight: 700; font-size: 13px; white-space: nowrap; flex: none; }
  .tab-model .tm-i { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(135deg, #2f7bff, #7b5cff); color: #fff; display: flex; align-items: center; justify-content: center; }
  .tab-model .tm-i .ic { width: 13px; height: 13px; }
  .tab-model i { font-style: normal; font-size: 10px; opacity: .8; }
  #view-work:not(.dev-head) #tabs .tab { flex: 0 1 auto; padding-left: 8px; padding-right: 8px; }
}

/* Телефон: вкладки внизу переключаются сразу, без выезда списка — анимация на весь экран дёргалась. */
@media (max-width: 860px) {
  .side, .layout.nav-open .side { transition: none !important; }
  .layout.nav-open .side { box-shadow: none; }
}

/* Телефон, вариант Б: нижней панели нет. Лимиты (кружок с остатком), Доступы и Разработка —
   кружками справа в строке «Октябрь … · 30 дней …». Из «Доступов» назад — стрелкой «‹». */
.sh-quick { display: none; }
.stats-row { display: flex; align-items: center; }
@media (max-width: 860px) {
  .mnav, .mnav.only-phone { display: none !important; }
  .layout, body.in-work .layout { height: calc(var(--app-h, 100dvh) - env(safe-area-inset-bottom)); }
  .side { bottom: 0 !important; }
  .layout.nav-open .scrim { bottom: 0; }
  .modal.page { bottom: 0; }
  .toast, body.in-work .toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
  .stats-row .side-stats { flex: 1; width: auto; margin-right: 6px; }
  .sh-quick { display: flex; gap: 6px; margin-right: 12px; flex: none; }
  .q-btn { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); display: flex; align-items: center; justify-content: center; color: var(--text-2); }
  .q-btn[hidden] { display: none; }
  .q-btn .ic { width: 17px; height: 17px; }
  .q-btn .mring { width: 26px; height: 26px; }
  .q-btn .mring i { position: static; padding: 0; line-height: 1; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); font-style: normal;
    font-size: 9px; font-weight: 800; color: var(--text-2); display: flex; align-items: center; justify-content: center; }
  /* «Доступы» на весь экран: слева в заголовке — «‹» назад. */
  .modal.page #modal-close { display: inline-flex !important; order: -1; color: var(--primary); }
  .modal.page #modal-close svg { display: none; }
  .modal.page #modal-close::before { content: '‹'; font-size: 32px; line-height: 28px; font-weight: 300; margin-top: -4px; }
  .modal.page .modal-head { justify-content: flex-start; }
}

/* Телефон, вариант А: поиск и «Все / В работе» — тоньше, на тех же местах. */
@media (max-width: 860px) {
  #side-works .search { height: 34px; border-radius: 10px; }
  #side-works .search input::placeholder { font-size: 14.5px; }
  #side-works .search .ic { width: 16px; height: 16px; }
  #filters { margin-top: 5px; padding: 2px; border-radius: 9px; }
  #filters .chip { font-size: 13px; padding: 4px 6px; }
}

/* Телефон: масштаб как в Telegram. Сверено по снимкам: у нас буквы были ~7 % крупнее и строки
   ~12 % выше, чем в Telegram (телефон ещё и сам увеличивает текст в веб-версии). */
@media (max-width: 860px) {
  #view-work .msg { font-size: 14.5px; line-height: 1.22; padding: 5px 9px 6px; }
  #view-work .msg .who { font-size: 11.5px; }
  #view-work .msg h3 { font-size: 15px; }
  #view-work .msg.user[data-time]::after { font-size: 11px; bottom: 4px; }
  #view-work .msg.user .tg-time { width: 34px; }
  #view-work .msg .steps { font-size: 13px; }
  #view-work .ttl h2 { font-size: 15.5px; }
  #view-work .tabs .tab { font-size: 13px; }
  .side .t { font-size: 14.5px; line-height: 19px; }
  .side .it .m { font-size: 12.5px; }
  .sh h1 { font-size: 19px !important; }
  /* Поле ввода — как в Telegram: ниже, без лишних отступов. */
  #view-work .cbox { padding: 2px 4px 2px 6px; min-height: 40px; }
  #view-work .cbox textarea { padding: 5px 4px; line-height: 1.3; }
  #view-work .cbox textarea::placeholder { font-size: 15px; }
  #view-work .comp { padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); }
  .sent-card .f .n { font-size: 14px; }
  .sent-card .f .s { font-size: 12px; }
}

/* Шаблон на телефоне, вариант Б: «‹», название и ✎; вкладки «Задание / Файлы / Работы»;
   «Начать работу по шаблону» — всегда внизу экрана. На компьютере всё как было. */
.tpl-tabs, .tpl-pen, .tpl-only-phone { display: none; }
@media (max-width: 860px) {
  .tpl-view { gap: 8px; padding-top: 6px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .tpl-view .alt-head { flex-wrap: nowrap; padding-left: 34px; gap: 8px; }
  .tpl-view .alt-head .ttl { flex: 1 1 auto; min-width: 0; }
  .tpl-view .alt-head .ttl h2 { font-size: 16px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tpl-view .alt-head .sub { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tpl-view .tpl-back svg { display: none; }
  .tpl-view .tpl-back::before { content: '‹'; font-size: 32px; line-height: 28px; font-weight: 300; color: var(--primary); margin-top: -3px; }
  .tpl-view:not(.tpl-edit) .tpl-pen { display: flex; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
    align-items: center; justify-content: center; color: var(--text-2); flex: none; }
  .tpl-view .tpl-pen .ic { width: 16px; height: 16px; }
  .tpl-view:not(.tpl-edit) .alt-actions #tl-edit { display: none; }
  .tpl-view:not(.tpl-edit) .alt-actions { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; margin: 0; }
  .tpl-view:not(.tpl-edit) #tl-go { width: 100%; height: 46px; border-radius: 12px; font-size: 15px; box-shadow: 0 4px 14px rgba(26, 109, 255, .3); }
  .tpl-view .tpl-tabs { display: flex; background: var(--surface-2); border-radius: 10px; padding: 2px; }
  .tpl-view .tpl-tabs button { flex: 1; padding: 6px 0; font-size: 13px; color: var(--muted); border-radius: 8px; }
  .tpl-view .tpl-tabs button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
  .tpl-view .tpl-only-phone { display: block; }
  .tpl-view[data-tpltab="task"] .tpl-sec-files, .tpl-view[data-tpltab="task"] .tpl-sec-works,
  .tpl-view[data-tpltab="files"] .tpl-sec-task, .tpl-view[data-tpltab="files"] .tpl-sec-works,
  .tpl-view[data-tpltab="works"] .tpl-sec-task, .tpl-view[data-tpltab="works"] .tpl-sec-files { display: none !important; }
  .tpl-view .card { padding: 10px 12px; }
  .tpl-view .card-h { font-size: 11.5px; }
  .tpl-view .task { font-size: 15px; line-height: 1.35; padding: 10px 12px; }
  .tpl-view .empty-box { font-size: 13px; padding: 12px; }
  .tpl-view .drop-zone { padding: 10px; font-size: 14px; }
  .tpl-view .works-by .row { padding: 7px 0; font-size: 13.5px; }
  .tpl-view .works-by .row span { font-size: 12.5px; }
}
@media (max-width: 860px) {
  .tpl-view:not(.tpl-edit) .alt-actions { display: block; width: auto; }
  .tpl-view:not(.tpl-edit) #tl-go { display: block; box-sizing: border-box; max-width: 100%; }
  /* Задание — на всю свободную высоту экрана, а не маленьким окошком. */
  .tpl-view[data-tpltab="task"] .task { min-height: calc(var(--app-h, 100dvh) - 260px); }
}

/* Новый шаблон / правка шаблона на телефоне — вариант Д «как сообщение в Telegram»:
   вверху ✕ и название; на «обоях» подсказка пузырём, файлы и «Дополнительно»;
   внизу скрепка, поле задания и зелёная ✓ — сохранить. На компьютере всё как было. */
.tpl-hint, #tpl-add .ic { display: none; }
@media (max-width: 860px) {
  .tpl-view.tpl-edit { background: var(--tgc-bg); min-height: 100%; padding: 0 8px calc(46vh + 70px); gap: 8px; }
  .tpl-edit .alt-head { position: sticky; top: 0; z-index: 15; margin: 0 -8px; padding: 8px 12px 8px 46px; background: var(--surface); border-bottom: 1px solid var(--border); }
  .tpl-edit .tpl-back, .tpl-edit .alt-head .sub, .tpl-edit .tpl-tabs, .tpl-edit #tpl-banner { display: none !important; }
  .tpl-edit .alt-head .ttl { flex: 1; }
  .tpl-edit #te-name { font-size: 16.5px; font-weight: 700; border: none; border-bottom: 2px solid var(--primary); border-radius: 0; padding: 6px 2px; background: none; width: 100%; }
  .tpl-edit .alt-actions { position: static; display: contents; }
  .tpl-edit #te-cancel { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; font-size: 0; border: none; background: none; }
  .tpl-edit #te-cancel::before { content: '✕'; font-size: 20px; color: var(--muted); }
  .tpl-edit #te-save { position: fixed; right: 8px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 21; width: 42px; height: 42px; padding: 0;
    border-radius: 50%; font-size: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
  .tpl-edit #te-save::before { content: '✓'; font-size: 20px; font-weight: 800; color: #fff; }
  .tpl-hint { display: block; align-self: flex-start; max-width: 88%; background: var(--tgc-in); color: var(--tgc-in-text); border-radius: 14px 14px 14px 4px;
    padding: 7px 10px; font-size: 14px; line-height: 1.3; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); margin-top: 8px; }
  .tpl-edit .cards, .tpl-edit .card { background: none; border: none; box-shadow: none; padding: 0; gap: 8px; }
  .tpl-edit .card-h, .tpl-edit .task-foot, .tpl-edit .empty-box { display: none !important; }
  .tpl-edit .files { padding: 0; gap: 6px; }
  .tpl-edit .files .f { background: var(--tgc-out); border: none; border-radius: 14px 14px 4px 14px; align-self: flex-end; max-width: 88%; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); }
  /* Скрепка — слева внизу, как в Telegram. */
  .tpl-edit #tpl-add { position: fixed; left: 8px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 21; width: 38px; height: 38px; margin: 0; padding: 0;
    border: none; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); }
  .tpl-edit #tpl-add .tpl-add-t { display: none; }
  .tpl-edit #tpl-add .ic { display: block; width: 22px; height: 22px; }
  /* Поле задания — внизу, как поле сообщения; растёт по тексту до 45 % экрана. */
  .tpl-edit #tpl-text { position: fixed; left: 52px; right: 58px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; min-height: 42px; max-height: 45vh;
    border-radius: 21px; padding: 10px 14px; font-size: 15px; line-height: 1.3; background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); flex: none; }
  .tpl-edit #tpl-text:focus { border-width: 1px; padding: 10px 14px; }
  .tpl-edit .more-fields { align-self: flex-start; max-width: 92%; background: var(--tgc-in); border-radius: 14px; padding: 8px 12px; font-size: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); }
  .tpl-edit .card-foot { padding: 0; border: none; }
  .tpl-edit #te-delete { background: var(--tgc-in); border-radius: 12px; padding: 6px 12px; font-size: 13.5px; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); }
}
@media (max-width: 860px) {
  /* В правке видны файлы и «Дополнительно» сразу (вкладок нет), работ по шаблону — нет. */
  .tpl-view.tpl-edit .tpl-sec-files, .tpl-view.tpl-edit .tpl-sec-task { display: flex !important; flex-direction: column; }
  .tpl-view.tpl-edit .tpl-sec-works { display: none !important; }
  .tpl-edit #tpl-text { width: auto; min-height: 42px !important; }
}
@media (max-width: 860px) {
  /* Кружки у счётчика — ровно посередине между кнопками «Шаблон / Новая» и поиском (вариант А). */
  .stats-row { margin: 0 0 6px; }
  .stats-row .side-stats { margin-top: 0; margin-bottom: 0; }
  .sh-quick { align-items: center; }
  .q-btn { width: 32px; height: 32px; }
}

@media (max-width: 860px) {
  /* Меню работы — рядом со звёздочкой, которая его открывает. */
  .work-pop { right: auto !important; width: 268px !important; }
}

/* Удалённая работа плавно схлопывается в списке сразу после «Удалить». */
.it.del-gone { opacity: 0; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin: 0 !important; overflow: hidden;
  transition: opacity .18s ease, max-height .2s ease, padding .2s ease; }
.it { max-height: 200px; }

.older-btn { align-self: center; margin: 4px 0 6px; padding: 6px 14px; border-radius: 14px; background: rgba(0, 0, 0, .22); color: #fff; font-size: 13px; font-weight: 600; }

/* «Доступы» на телефоне — вариант А, как «Настройки» в Telegram: группы на светлых плашках,
   без длинных пояснений и без печатей; аккаунт — строка с меткой режима и «›», нажатие — действия. */
.tg-modetag, .tg-chev, .acc-phone { display: none; }
@media (max-width: 860px) {
  .modal.page .acc-note, .modal.page .acc-stamps { display: none !important; }
  .modal.page .acc-phone { display: block; }
  .modal.page .section-title { margin: 14px 6px 6px; font-size: 12px; }
  .modal.page .acc-grp, .modal.page #tg-accounts { background: var(--surface); border: none; border-radius: 14px; overflow: hidden; }
  .modal.page .acc-grp .choice { margin: 0; border: none; border-radius: 0; border-bottom: 1px solid var(--line); background: none; padding: 10px 12px; }
  .modal.page .acc-grp .choice.on { background: none; }
  .modal.page .acc-grp > details { margin: 0 !important; padding: 12px; }
  .modal.page .acc-grp > details > summary { color: var(--primary); font-weight: 700; list-style: none; }
  .modal.page .acc-grp > details > summary::before { content: '+ '; }
  .modal.page .acc-grp > details > summary::-webkit-details-marker { display: none; }
  /* Telegram-аккаунты: метка режима и «›», кружок выбора, переключатель и ✕ — в панели действий. */
  .modal.page .tgacc .mark, .modal.page .tgacc .mode-seg, .modal.page .tgacc [data-tgdel] { display: none !important; }
  .modal.page .tgacc .nm[data-tgrename] { pointer-events: none; }
  .modal.page .tgacc.on { background: none; }
  .modal.page .tgacc .tagp.tgon { display: inline !important; background: none; padding: 0; margin-left: 4px; font-size: 12px; color: var(--primary); }
  .modal.page .tg-modetag { display: inline-block; flex: none; font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 2px 8px; }
  .tg-modetag.p { background: var(--violet-soft); color: var(--violet-text); }
  .tg-modetag.g { background: var(--green-soft); color: var(--green-text); }
  .modal.page .tg-chev { display: inline; flex: none; color: var(--muted-2); font-size: 20px; line-height: 1; margin-left: 2px; }
  .modal.page .tg-add { margin: 8px 0 0; background: var(--surface); border-radius: 14px; padding: 6px; }
  /* Бот: три строки-пункта. */
  .modal.page .acc-bot { display: flex; flex-direction: column; }
  .modal.page .acc-bot > * { margin: 0 !important; border-bottom: 1px solid var(--line); }
  .modal.page .acc-bot > *:last-child { border-bottom: none; }
  .modal.page .acc-bot .inline-row > span, .modal.page .acc-bot .field-row { gap: 0; }
  .modal.page .acc-bot .inline-row > span.muted { display: none; }
  .modal.page .acc-bot #bot-photo, .modal.page .acc-bot #tg-test { width: 100%; justify-content: flex-start; border: none; border-radius: 0; background: none; padding: 12px; font-weight: 600; }
  .modal.page .acc-bot .field { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin: 0; }
  .modal.page .acc-bot .field label { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); }
  .modal.page .acc-bot .field select { width: auto; flex: none; }
  /* Панель действий с аккаунтом. */
  .tg-acts .lc-h { display: flex; flex-direction: column; gap: 2px; }
  .tg-acts .lc-h small { font-size: 12px; font-weight: 400; color: var(--muted); }
  .tg-acts .ta-seg { display: flex; background: var(--surface-2); border-radius: 10px; padding: 2px; margin-bottom: 8px; }
  .tg-acts .ta-seg button { flex: 1; padding: 8px 0; border-radius: 8px; font-size: 14px; color: var(--muted); justify-content: center; }
  .tg-acts .ta-seg button.on { background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
  .acc-menu.sheet.tg-acts .ta-row { width: 100%; padding: 12px 8px; font-size: 15px; border-top: 1px solid var(--line); border-radius: 0; justify-content: flex-start; }
  .tg-acts .ta-row:disabled { opacity: 1; color: var(--primary); }
  .tg-acts .ta-row.del { color: var(--red-text); }
}
@media (max-width: 860px) {
  .modal.page .tgacc.on { box-shadow: none; border-bottom: 1px solid var(--line) !important; }
  .modal.page .acc-bot .field label { font-size: 0; }
  .modal.page .acc-bot .field label::before { content: 'Пауза нового черновика'; font-size: 14px; }
}

/* Телефон: пока открывается работа или «Разработка» — строка/кружок подсвечены и «дышат». */
@keyframes q-wait { 50% { opacity: .45; } }
.q-btn.loading { animation: q-wait .8s ease-in-out infinite; pointer-events: none; }
.it.opening { background: var(--primary-soft); animation: q-wait .8s ease-in-out infinite; }

/* «Доступы» на телефоне — плотнее и с аватарками: у Telegram-аккаунтов фото из Telegram,
   у учётных записей Claude — цветной кружок с буквой. */
.pav { display: none; }
.tgacc .av { position: relative; overflow: hidden; }
.tgacc .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
@media (max-width: 860px) {
  .modal.page .acc-grp .choice { padding: 7px 10px; align-items: center; }
  .modal.page .acc-grp .choice .mark { display: none; }
  .modal.page .pav { display: flex; width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 14px; align-items: center; justify-content: center; flex: none; }
  .modal.page .acc-grp .choice.on .pav { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary); }
  .modal.page .acc-grp .choice .row1 { display: block; }
  .modal.page .acc-grp .choice .row1 .nm { display: block; font-size: 15px; }
  .modal.page .acc-grp .choice .row1 .sub2 { display: inline; font-size: 12px; }
  .modal.page .acc-grp .choice .pills { display: inline-flex; margin: 0 0 0 6px; vertical-align: middle; }
  .modal.page .acc-grp .choice .tagp { font-size: 11px; padding: 1px 6px; }
  .modal.page .acc-grp .choice .icon-btn { width: 30px; height: 30px; }
  .modal.page .acc-grp > details { padding: 10px 12px; }
  .modal.page .tgacc { padding: 6px 8px 6px 10px; }
  .modal.page .tgacc .av { width: 34px; height: 34px; }
  .modal.page .tgacc .tg-id { display: none; }
  .modal.page .tgacc .row1 .nm { display: block; font-size: 14.5px; line-height: 18px; }
  .modal.page .tgacc .row1 .sub2 { display: inline; }
  .modal.page .tgacc .tagp.tgon::before { content: '· '; }
}
@media (max-width: 860px) {
  .modal.page .acc-grp .choice .row1 { flex: 1 1 0; min-width: 0; overflow: hidden; }
  .modal.page .acc-grp .choice .row1 .sub2 { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal.page .acc-grp .choice .pills { display: none; }
  .modal.page .acc-grp .choice .icon-btn { flex: none; }
  .modal.page .tgacc .row1 { white-space: normal; }
  .modal.page .tgacc .row1 .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .modal.page .tgacc .tg-mark { display: none; }
}
/* Фото аккаунта — ровным кружком (общее правило для картинок в окнах растягивало его в высоту). */
.tgacc .av img, .tg-target .av img, .tg-menu .av img { height: 100% !important; min-height: 0 !important; max-height: none; }
@media (max-width: 860px) {
  /* Поле названия работы (новая работа / переименование) — тем же размером, что и название. */
  #view-work #w-title-input { font-size: 15.5px; font-weight: 700; height: 30px; padding: 2px 8px; flex: 1 1 auto; min-width: 0; width: auto; border-radius: 8px; }
  #view-work .title-hint { display: none !important; }
}

/* Телефон, вариант Б: выданный файл — одна строка: маленький значок, имя · размер,
   «Антиплагиат» — кружок «АП», скачать и Telegram. */
@media (max-width: 860px) {
  .sent-card .f { padding: 5px 2px; gap: 8px; flex-wrap: nowrap; }
  .sent-card .f .fi { width: 22px; height: 26px; font-size: 7px; padding-bottom: 3px; border-radius: 5px; }
  .sent-card .f .grow { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 5px; flex: 1 1 0; min-width: 0; }
  .sent-card .f .n { flex: 0 1 auto; min-width: 0; font-size: 13.5px; }
  .sent-card .f .s { flex: none; margin: 0; font-size: 11.5px; max-width: 40%; }
  .sent-card .f .s::before { content: '· '; }
  .sent-card .f .ap-res { flex: 1 0 100%; margin-top: 3px; }
  .sent-card .f .act { order: 3; margin-left: 0; gap: 6px; }
  .sent-card .f .act .tg { width: 26px; height: 26px; }
  .sent-card .f .ap-btn:not(.run):not(.ap-fix) { order: 2; margin: 0 !important; width: 26px; height: 26px; padding: 0; border-radius: 50%; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
  .sent-card .f .ap-btn:not(.run):not(.ap-fix)::before { content: 'АП'; font-size: 10.5px; font-weight: 800; }
  .sent-card .f .ap-btn.run, .sent-card .f .ap-fix { order: 2; margin: 0 !important; font-size: 10.5px; padding: 0 7px; height: 24px; }
}
@media (max-width: 860px) {
  .sent-card .f .grow { display: grid; grid-template-columns: minmax(0, max-content) auto; align-items: baseline; column-gap: 5px; }
  .sent-card .f .s { max-width: none; white-space: nowrap; }
  .sent-card .f .ap-res { grid-column: 1 / -1; }
  .sent-card .f .fi { width: 25px; font-size: 6.5px; letter-spacing: -.02em; }
}
@media (max-width: 860px) {
  /* Имени — приоритет: размер ужимается первым («25 листов · 78…»). */
  .sent-card .f .grow { grid-template-columns: minmax(55%, max-content) minmax(0, auto); }
  .sent-card .f .s { overflow: hidden; text-overflow: ellipsis; }
}

/* Телефон, вариант В: готовые шаги — одна строка (последний шаг + «+N шага ›»);
   каждый шаг — в одну строку: галочка, название · число, время. */
.sp-more { display: none; }
@media (max-width: 860px) {
  #view-work .steps { padding: 2px 8px; }
  #view-work .steps .sp { padding: 5px 0; align-items: center; gap: 8px; }
  #view-work .steps .sp .sn { width: 20px; height: 20px; flex: none; }
  #view-work .steps .sp .sn .ic { width: 12px; height: 12px; }
  #view-work .steps .sp.done:not(.open) .sd { display: none; }
  #view-work .steps .st1 { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-work .steps .sp-count { font-size: 11px; }
  #view-work .steps .tm { font-size: 11px; }
  #view-work .steps.fold:not(.unfold) .sp:not(:first-child) { display: none; }
  #view-work .steps.fold .sp-more { display: inline-flex; flex: none; color: var(--primary); font-weight: 700; font-size: 12px; white-space: nowrap; padding: 2px 0 2px 4px; }
  #view-work .steps.fold.unfold .sp:first-child .sp-more { order: 9; }
  /* Файл в вашем сообщении — как выданные файлы: одна тонкая строка. */
  #view-work .msg.user .u-docs { gap: 4px; }
  #view-work .msg.user .u-doc { padding: 5px 8px; gap: 8px; border-radius: 10px; }
  #view-work .msg.user .u-doc .fi { width: 25px; height: 26px; font-size: 6.5px; padding-bottom: 3px; border-radius: 5px; letter-spacing: -.02em; }
  #view-work .msg.user .u-doc .grow { display: grid; grid-template-columns: minmax(55%, max-content) minmax(0, auto); align-items: baseline; column-gap: 5px; min-width: 0; }
  #view-work .msg.user .u-doc b { font-size: 13.5px; }
  #view-work .msg.user .u-doc small { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #view-work .msg.user .u-doc small::before { content: '· '; }
}
@media (max-width: 860px) { #view-work .msg .steps { margin-bottom: 6px; } }
@media (max-width: 860px) {
  /* «‹» — на одной высоте с точкой, названием и аккаунтом. */
  #view-work:not(.dev-head) #open-side { top: -3px; }
}
@media (max-width: 860px) {
  /* Меньше зазор между названием работы и вкладками. */
  #view-work:not(.dev-head) .tabs { padding-top: 4px; }
}

/* Телефон: строка ввода как в Telegram — «плавает» над перепиской: прозрачная подложка,
   переписка видна под ней и уходит под поле; само поле — белая «таблетка» с тенью. */
@media (max-width: 860px) {
  #view-work .comp { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: transparent !important; border: none !important;
    box-shadow: none !important; pointer-events: none; padding: 4px 6px calc(6px + env(safe-area-inset-bottom)); }
  #view-work .comp > * { pointer-events: auto; }
  #view-work .chat { padding-bottom: 64px; }
  #view-work .cbox { border: none; background: var(--surface); border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08); }
  #view-work .cbox:focus-within { box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 2px 8px rgba(0, 0, 0, .08); }
  #view-work .attachments { background: var(--surface); border-radius: 14px; padding: 6px; margin-bottom: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
  #view-work .scroll-down { bottom: 70px; }
}
@media (max-width: 860px) {
  /* «готов» на телефоне не показываем, а «нет входа / вход устарел» и кнопку «войти» — показываем. */
  .modal.page .acc-grp .choice .pills { display: inline-flex !important; margin: 2px 0 0; gap: 6px; }
  .modal.page .acc-grp .choice .pills .tagp.ok { display: none; }
  .modal.page .acc-grp .choice .pills [data-login] { font-weight: 700; font-size: 13px; }
}

/* Перетаскивание черновика пальцем: строка-«призрак» под пальцем. */
.touch-ghost { position: fixed; z-index: 70; pointer-events: none; background: var(--surface); border-radius: 12px; opacity: .95;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .25); transform: scale(1.02); }
body.dragging-draft #works { touch-action: none; }

/* Готовые шаги нейросети — одной строкой и на компьютере («+N шага ›» раскрывает остальные). */
@media (min-width: 861px) {
  .steps.fold:not(.unfold) .sp:not(:first-child) { display: none; }
  .steps.fold .sp-more { display: inline-flex; flex: none; color: var(--primary); font-weight: 700; font-size: 13px; white-space: nowrap; padding: 2px 4px; }
  .steps.fold:not(.unfold) .sp:first-child .sd { display: none; }
}
@media (max-width: 860px) {
  /* Панель «Лимиты и подписка» — плотнее по высоте: каждая полоса в одну строку. */
  .acc-menu.sheet .lc-card { padding: 8px 12px; margin-bottom: 8px; }
  .acc-menu.sheet .lc-h { margin-bottom: 8px; font-size: 15px; }
  .lc-head { margin-bottom: 2px; }
  .lc-head b { font-size: 15.5px; }
  .lc-row { margin-top: 4px; }
  .lc-top { font-size: 12px; align-items: baseline; }
  .lc-top > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .lc-top b { font-size: 13px; }
  .lc-bar { height: 4px; margin-top: 3px; }
}

/* Черновик на телефоне, вариант А: плотная шапка, файлы строками, задание на всю высоту,
   внизу — удалить, в работу и большая «Запустить работу». */
.dr-when, .dr-links, .dr-short { display: none; }
@media (max-width: 860px) {
  .dr-view { gap: 8px; padding: 0 12px calc(72px + env(safe-area-inset-bottom)); min-height: 100%; }
  .dr-view .alt-head { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 8px 0 8px 34px; margin: 0 -12px; padding-right: 12px; padding-left: 46px; border-bottom: 1px solid var(--border); }
  .dr-view .dr-back { left: 6px !important; top: 50% !important; transform: translateY(-50%); }
  .dr-view .dr-back svg { display: none; }
  .dr-view .dr-back::before { content: '‹'; font-size: 32px; line-height: 28px; font-weight: 300; color: var(--primary); margin-top: -3px; }
  .dr-view .alt-head .ttl { flex: 1 1 auto; min-width: 0; }
  .dr-view #dr-name { font-size: 16px; font-weight: 800; border: none; padding: 0; height: auto; background: none; width: 100%; }
  .dr-view .title-hint, .dr-view .meta .pill, .dr-view .meta .tag { display: none; }
  .dr-view .meta { margin: 0; }
  .dr-view .dr-when { display: block; font-size: 12px; font-weight: 600; color: var(--tg-text); }
  .dr-view #dr-model { flex: none; height: 28px; padding: 2px 8px 2px 2px; border-radius: 14px; background: var(--violet-soft); color: var(--violet-text); gap: 5px; margin: 0; }
  .dr-view #dr-model .mi { width: 22px; height: 22px; border-radius: 7px; }
  .dr-view #dr-model .mi .ic { width: 13px; height: 13px; }
  .dr-view #dr-model .ml, .dr-view #dr-model .lk { display: none; }
  .dr-view #dr-model .mv { font-size: 13px; }
  .dr-view #dr-model .mv::after { content: ' ▾'; font-size: 10px; }
  .dr-view .banner.tgb, .dr-view .card-foot, .dr-view .drop-zone, .dr-view .task-foot, .dr-view .card-h .r { display: none !important; }
  .dr-view .cards { gap: 8px; }
  .dr-view .card { background: none; border: none; box-shadow: none; padding: 0; }
  .dr-view .card-h { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; margin: 4px 2px 6px; }
  .dr-view .dr-links { display: inline; letter-spacing: 0; text-transform: none; font-size: 13px; color: var(--primary); }
  .dr-view .dr-links button { color: var(--primary); font-weight: 700; padding: 0; }
  .dr-view .dr-full { display: none; }
  .dr-view .dr-short { display: inline; }
  .dr-view .files { padding: 0; gap: 6px; }
  .dr-view .files .f { padding: 6px 8px; gap: 8px; }
  .dr-view .files .f .fi { width: 25px; height: 28px; font-size: 6.5px; padding-bottom: 3px; border-radius: 5px; }
  .dr-view .files .f .n { font-size: 13.5px; }
  .dr-view .files .f .s { font-size: 11.5px; }
  .dr-view .task { min-height: calc(var(--app-h, 100dvh) - 330px); font-size: 15px; line-height: 1.35; padding: 10px 12px; }
  .dr-view .bottom-bar { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; display: flex; gap: 8px; align-items: center;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); }
  .dr-view .bottom-bar .muted, .dr-view .bottom-bar .grow { display: none; }
  .dr-view #dr-delete, .dr-view #dr-move { width: 44px; height: 44px; padding: 0; font-size: 0; border-radius: 12px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
  .dr-view #dr-delete::before { content: '✕'; font-size: 18px; color: var(--red-text); }
  .dr-view #dr-move::before { content: '⇄'; font-size: 19px; color: var(--text-2); }
  .dr-view #dr-go { flex: 1; height: 44px; border-radius: 12px; font-size: 15px; }
}

/* «Доступы» на телефоне, вариант А: ниже заголовок, тоньше строки, маленькая кнопка «+». */
@media (max-width: 860px) {
  .modal.page .modal-head { padding: 8px 12px; min-height: 44px; }
  .modal.page .modal-head h2 { font-size: 17px; }
  .modal.page .modal-body { padding: 4px 12px 12px; }
  .modal.page .section-title { margin: 10px 4px 5px; font-size: 11.5px; }
  .modal.page .acc-grp .choice { padding: 5px 10px; min-height: 46px; }
  .modal.page .pav { width: 30px; height: 30px; font-size: 13px; }
  .modal.page .acc-grp .choice .row1 .nm { font-size: 14.5px; line-height: 18px; }
  .modal.page .acc-grp .choice .row1 .sub2 { font-size: 11.5px; }
  .modal.page .acc-grp > details { padding: 8px 12px; font-size: 14px; }
  .modal.page .tgacc { padding: 5px 8px 5px 10px; min-height: 46px; }
  .modal.page .tgacc .av { width: 30px; height: 30px; }
  .modal.page .tgacc .row1 .nm { font-size: 14.5px; }
  .modal.page .tgacc .row1 .sub2 { font-size: 11.5px; }
  .modal.page .tg-add { display: flex; gap: 6px; align-items: center; padding: 0; background: none; margin-top: 8px; }
  .modal.page .tg-add input { flex: 1; min-width: 0; height: 38px; font-size: 14.5px; }
  .modal.page #tg-add-btn { width: 38px; height: 38px; padding: 0; flex: none; border-radius: 10px; font-size: 0; display: inline-flex; align-items: center; justify-content: center; }
  .modal.page #tg-add-btn .ic { width: 20px; height: 20px; margin: 0; }
}
@media (max-width: 860px) {
  .modal.page .acc-grp .choice .pills:not(:has(.tagp.bad, .tagp.old, [data-login])) { display: none !important; }
  .modal.page .tgacc .row1, .modal.page .acc-grp .choice .row1 { line-height: 1.25; }
}
@media (max-width: 860px) {
  .modal.page .tgacc .row1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .modal.page .tgacc .tagp.tgon { font-size: 11.5px; }
}

/* «Доступы» на телефоне, вариант В: «+ Добавить» в заголовке Telegram-аккаунтов, поле — в панели снизу. */
.tg-add-head { display: none; }
@media (max-width: 860px) {
  .modal.page .tg-title { display: flex; justify-content: space-between; align-items: center; }
  .modal.page .tg-add-head { display: inline; color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: 0; text-transform: none; padding: 0; }
  .modal.page .tg-add { display: none !important; }
  .tg-add-sheet { display: flex; flex-direction: column; gap: 10px; }
  .tg-add-sheet #tg-new-sheet { width: 100%; height: 44px; font-size: 16px; padding: 0 12px; }
  .tg-add-sheet .tg-add-tip { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
  .tg-add-sheet #tg-add-go { height: 46px; border-radius: 12px; font-size: 15px; width: 100%; justify-content: center; }
}
@media (max-width: 860px) {
  .acc-menu.sheet.tg-add-sheet #tg-add-go { color: #fff; background: var(--primary); }
  .modal.page .seg-theme button { white-space: nowrap; font-size: 13px; padding-left: 8px; padding-right: 8px; }
}

/* «Пауза черновика» на телефоне, вариант Б: «5 мин ›», по нажатию — маленькое меню рядом. */
.tg-pause-btn { display: none; }
@media (max-width: 860px) {
  .modal.page .acc-bot #tg-pause { display: none; }
  .modal.page .acc-bot .tg-pause-btn { display: inline; color: var(--muted); font-size: 14.5px; padding: 6px 0; flex: none; }
  .pause-pop { position: fixed; width: 150px !important; z-index: 70; padding: 4px; }
  .pause-pop .mi { justify-content: space-between; padding: 9px 12px; }
  .pause-pop .ck { color: var(--primary); font-weight: 800; }
}

/* Просмотр на телефоне, вариант А «как фото в Telegram»: чёрный фон, сверху ✕ · имя · 3/36,
   внизу скачать / в Telegram / повернуть. Миниатюры, стрелки и кнопки масштаба — только на компьютере. */
.lbx-mbar { display: none; }
@media (max-width: 860px) {
  .lbx { background: #000; backdrop-filter: none; }
  .lbx-side, .lbx-nav, .lbx-bar { display: none !important; }
  .lbx-main { display: flex; flex-direction: column; }
  .lbx-top { position: static; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px; background: rgba(0, 0, 0, .6); }
  .lbx-top .lbx-close { order: -1; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; }
  .lbx-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lbx-top .lb-count { color: rgba(255, 255, 255, .8); font-size: 14px; flex: none; }
  .lb-stage { flex: 1; touch-action: none; }
  .lbx-mbar { display: flex; justify-content: space-around; align-items: center; padding: 10px 12px calc(14px + env(safe-area-inset-bottom)); background: rgba(0, 0, 0, .6); }
  .lbx-mb { width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
  .lbx-mb .ic { width: 20px; height: 20px; }
  .lbx-mb.tg { background: #2aa3df; }
  .lbx-mb[hidden] { display: none; }
}

/* Веб-версия в Telegram на весь экран: всё содержимое ниже кнопок Telegram поверх страницы. */
body.tg-full { padding-top: var(--tg-top, 0px); }
body.tg-full .layout, body.tg-full.in-work .layout { height: calc(var(--app-h, 100dvh) - var(--tg-top, 0px) - env(safe-area-inset-bottom)); }
body.tg-full .side { top: var(--tg-top, 0px) !important; }
body.tg-full .modal.page { top: var(--tg-top, 0px); }
body.tg-full .lbx { padding-top: var(--tg-top, 0px); }
body.tg-full { background: var(--surface); }
html:has(body.tg-full) { background: #fff; }
body.tg-full::before { content: ''; position: fixed; left: 0; right: 0; top: 0; height: var(--tg-top, 0px); background: var(--surface); z-index: 1; }
body.tg-full .scrim { display: none !important; }

/* На весь экран в Telegram: низ — над системными кнопками телефона. */
body.tg-full .layout, body.tg-full.in-work .layout { height: calc(var(--app-h, 100dvh) - var(--tg-top, 0px) - var(--tg-bottom, 0px)); }
body.tg-full .side { bottom: var(--tg-bottom, 0px) !important; }
body.tg-full .modal.page { bottom: var(--tg-bottom, 0px); }
body.tg-full .dr-view .bottom-bar, body.tg-full .tpl-view:not(.tpl-edit) .alt-actions { bottom: calc(10px + var(--tg-bottom, 0px)) !important; }
body.tg-full .acc-menu.sheet { padding-bottom: calc(14px + var(--tg-bottom, 0px)); }
body.tg-full .lbx { padding-bottom: var(--tg-bottom, 0px); }

/* Телефон: время ответов нейросети — внизу справа, как у ваших сообщений; «Ассистент · 17:57» сверху не нужен.
   Место под время пошире — чтобы не наезжало на текст. */
@media (max-width: 860px) {
  #view-work .msg.user .tg-time { width: 46px; }
  #view-work .msg.assistant { position: relative; }
  #view-work .msg.assistant > .who { display: none; }
  #view-work .msg.assistant .tg-time { display: block; height: 10px; }
  #view-work .msg.assistant[data-time]::after { content: attr(data-time); position: absolute; right: 10px; bottom: 4px; font-size: 11px; line-height: 14px; color: var(--muted); }
  #view-work .msg.assistant .steps:first-child { margin-top: 0; }
}

@media (max-width: 860px) {
  #view-work .msg.assistant .tg-time.in { display: inline-block; width: 46px; height: 1px; }
}
@media (max-width: 860px) {
  /* Ответ кончается файлами — время отдельной строкой под рамкой, не впритык к ней. */
  #view-work .msg.assistant .tg-time:not(.in) { height: 14px; }
  #view-work .msg.assistant[data-time]::after { bottom: 5px; }
}