внутри сохраняет нормальный LTR-порядок символов пути */
direction: rtl; text-align: right;
}
/* ── Нативная карточка AskUserQuestion (фаза 73) ─────────────────────────
VS Code-style: табы по вопросам, опции с label+description (радио/чекбокс),
«Другое…» со свободным вводом, «Ответить» одним сабмитом. Живёт в зоне
.quick-actions.poll-mode (docked над полем ввода). */
.sdkq-card {
width: 100%;
background: var(--secondary-bg);
/* --border — белая альфа: в светлой теме Telegram давала 1.01:1. */
border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
border-radius: var(--r-2xl);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 10px;
max-height: calc(var(--vh) * 48);
overflow-y: auto;
box-sizing: border-box;
}
.sdkq-tabs {
display: flex;
gap: 4px;
flex-wrap: wrap;
border-bottom: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
padding-bottom: 7px;
}
.sdkq-tab {
background: transparent;
border: none;
color: var(--hint);
font-family: inherit;
font-size: var(--fs-md);
padding: 5px 10px;
border-radius: var(--r-md);
cursor: pointer;
transition: color 0.15s, background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.sdkq-tab.active {
color: var(--text);
background: var(--accent-bg-strong);
font-weight: 500;
}
.sdkq-tab.done {
color: color-mix(in srgb, var(--success) 82%, var(--text));
}
.sdkq-tab.done::after {
content: '✓';
margin-left: 5px;
color: var(--success);
font-size: var(--fs-base);
font-weight: 700;
}
.sdkq-tab.done.active { color: var(--text); }
.sdkq-question {
font-size: var(--fs-lg);
/* 500, а не 600: раньше жирным было всё — заголовок, чипы, вопрос,
каждый вариант — и иерархии не оставалось (12.09.2026). Вопрос —
единственный акцент карточки, варианты идут обычным весом. */
font-weight: 500;
color: var(--text);
line-height: 1.4;
overflow-wrap: anywhere;
/* Модель нередко пишет вопрос в несколько строк (контекст, потом сам
вопрос) — без этого всё схлопывалось в одну простыню. */
white-space: pre-line;
}
.sdkq-opts {
display: flex;
flex-direction: column;
gap: 6px;
}
.sdkq-opt {
display: flex;
align-items: flex-start;
gap: 10px;
width: 100%;
text-align: left;
background: transparent;
border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
border-radius: var(--r-lg);
padding: 9px 12px;
cursor: pointer;
font-family: inherit;
color: var(--text);
transition: border-color 0.15s, background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.sdkq-opt:hover { border-color: var(--accent-line); background: var(--accent-bg); }
.sdkq-opt.selected { border-color: var(--link); background: var(--accent-bg); }
.sdkq-mark {
flex: 0 0 16px;
width: 16px;
height: 16px;
margin-top: 1px;
border: 1.6px solid var(--hint);
border-radius: 50%;
position: relative;
transition: border-color 0.15s;
}
.sdkq-mark.sq { border-radius: var(--r-xs); }
.sdkq-opt.selected .sdkq-mark { border-color: var(--link); }
.sdkq-opt.selected .sdkq-mark::after {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--link);
}
.sdkq-opt.selected .sdkq-mark.sq {
background: var(--link);
border-color: var(--link);
}
.sdkq-opt.selected .sdkq-mark.sq::after {
/* Галочка, а не заливка: с квадратной точкой множественный выбор
визуально не отличался от одиночного (проверка 108). */
inset: 0;
background: none;
border: 2px solid #fff;
border-top: none;
border-right: none;
border-radius: 1px;
width: 8px;
height: 4px;
margin: 4px auto 0;
transform: rotate(-45deg);
}
.sdkq-opt-text {
display: flex;
flex-direction: column;
gap: 3px;
flex: 1 1 auto;
min-width: 0;
}
/* Подпись переносится целиком, длинный идентификатор (gtokens-withdraw,
URL) рвётся только когда не влезает; никакой обрезки на клиенте нет. */
.sdkq-opt-label { font-size: var(--fs-lg); font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.sdkq-opt.selected .sdkq-opt-label { font-weight: 500; }
.sdkq-opt-desc { font-size: var(--fs-md); color: var(--hint); line-height: 1.4; overflow-wrap: anywhere; }
.sdkq-other-input {
width: 100%;
box-sizing: border-box;
resize: vertical;
min-height: 44px;
background: var(--bg);
color: var(--text);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 8px 10px;
font-family: inherit;
font-size: var(--fs-md);
}
.sdkq-other-input:focus { outline: none; border-color: var(--link); }
.sdkq-footer {
display: flex;
align-items: center;
/* wrap + nowrap на кнопках: с «Пропустить» и «Стоп» в строке multiSelect-
подсказка вылезала за край карточки, а «Ответить (1/3)» ломался на две
строки (визуальная проверка 105). Теперь переносится подсказка, а не текст. */
flex-wrap: wrap;
gap: 10px;
/* Sticky внутри скроллящейся карточки: кнопка «Ответить» и счётчик всегда
видны, даже когда опции выше max-height (bottom компенсирует padding). */
position: sticky;
bottom: -12px;
margin: 0 -14px -12px;
padding: 8px 14px 12px;
background: var(--secondary-bg);
border-top: 1px solid color-mix(in srgb, var(--text) 14%, transparent);
}
.sdkq-submit {
background: var(--link);
color: #fff;
border: none;
border-radius: var(--r-lg);
padding: 8px 18px;
font-family: inherit;
font-size: var(--fs-md);
font-weight: 600;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: filter 0.15s, opacity 0.15s;
-webkit-tap-highlight-color: transparent;
}
.sdkq-submit:hover:not(:disabled) { filter: brightness(1.12); }
.sdkq-submit:disabled { opacity: 0.45; cursor: default; }
.sdkq-hint { font-size: var(--fs-base); color: color-mix(in srgb, var(--text) 68%, transparent); }
/* permission variant (tool_permission, фаза 55 → карточка в фазе 73) */
.sdkq-perm-head {
font-size: var(--fs-md);
font-weight: 600;
color: var(--text);
display: flex;
align-items: center;
gap: 6px;
}
.sdkq-perm-head code {
background: var(--accent-bg);
border-radius: var(--r-sm);
padding: 1px 7px;
color: var(--link);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--fs-base);
}
.sdkq-perm-detail {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--fs-base);
color: var(--hint);
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: 8px 10px;
white-space: pre-wrap;
word-break: break-word;
max-height: 120px;
overflow-y: auto;
}
.sdkq-perm-btns {
display: flex;
flex-direction: column;
gap: 6px;
}
.sdkq-perm-btn {
display: flex;
flex-direction: column;
gap: 2px;
text-align: left;
border-radius: var(--r-lg);
padding: 9px 12px;
cursor: pointer;
font-family: inherit;
border: 1px solid var(--border);
background: transparent;
color: var(--text);
transition: background 0.15s, border-color 0.15s;
-webkit-tap-highlight-color: transparent;
}
.sdkq-perm-btn.allow {
background: var(--success);
border-color: var(--success);
color: var(--on-accent);
}
.sdkq-perm-btn.allow .sdkq-opt-desc { color: rgba(255,255,255,0.75); }
.sdkq-perm-btn.allow:hover { background: var(--success); border-color: var(--success); }
.sdkq-perm-btn.all {
color: var(--warning);
border-color: var(--warning-line);
}
.sdkq-perm-btn.all .sdkq-opt-desc { color: var(--hint); }
.sdkq-perm-btn.all:hover { background: var(--warning-bg); }
.sdkq-perm-btn.reject {
color: rgba(255,255,255,0.55);
border-color: var(--ov-10);
}
.sdkq-perm-btn.reject .sdkq-opt-desc { color: rgba(255,255,255,0.35); }
.sdkq-perm-btn.reject:hover { color: rgba(255,255,255,0.8); }
@media (max-width: 480px) {
.sdkq-card { max-height: calc(var(--vh) * 52); padding: 10px 12px; }
.sdkq-opt { padding: 10px 12px; }
/* Тач-таргеты: табы и сабмит ближе к 44px */
.sdkq-tab { padding: 8px 12px; }
.sdkq-submit { padding: 10px 18px; }
.sdkq-footer { margin: 0 -12px -10px; padding: 8px 12px 10px; bottom: -10px; }
}
/* ── Model label in agent cards ───────── */
.agent-model {
font-size: var(--fs-xs);
color: var(--hint);
}
/* ── Model change event in chat ───────── */
.msg-model-change {
display: flex;
justify-content: center;
padding: 2px 0;
}
.msg-model-change .msg-system {
font-size: var(--fs-sm);
color: var(--hint);
background: transparent;
padding: 2px 8px;
}
/* ── File Attachment Badge ─────────────── */
.nt-attach-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.attachment-badge {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--secondary-bg);
border-radius: var(--r-lg);
font-size: var(--fs-base);
color: var(--text);
margin-top: 0;
max-width: 200px;
overflow: hidden;
flex-shrink: 0;
}
.attachment-badge span {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.attachment-badge .btn-icon {
background: none;
border: none;
cursor: pointer;
font-size: var(--fs-lg);
padding: 0 2px;
color: var(--hint);
line-height: 1;
flex-shrink: 0;
}
/* ── Карточка приложенного файла (не-изображение) + загрузка ── */
.attachment-badge.file-card {
display: flex;
align-items: center;
gap: 9px;
padding: 6px 8px;
flex: 0 0 auto;
width: auto;
max-width: 230px;
min-width: 0;
cursor: default;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
}
.file-card .fc-icon {
width: 38px;
height: 38px;
border-radius: var(--r-md);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-xs);
font-weight: 700;
letter-spacing: 0.3px;
color: #fff;
}
.fc-icon.fc-red { background: var(--cat-red); }
.fc-icon.fc-blue { background: var(--cat-blue); }
.fc-icon.fc-green { background: var(--cat-green); }
.fc-icon.fc-orange { background: var(--cat-orange); }
.fc-icon.fc-violet { background: var(--cat-violet); }
.fc-icon.fc-teal { background: var(--cat-teal); }
.fc-icon.fc-pink { background: var(--cat-pink); }
.fc-icon.fc-slate { background: var(--cat-slate); }
.fc-icon.fc-gray { background: var(--cat-gray); }
.file-card .fc-body {
flex: 0 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.file-card .fc-name {
font-size: var(--fs-md);
font-weight: 600;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.file-card .fc-meta {
font-size: var(--fs-sm);
font-variant-numeric: tabular-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--hint);
}
.file-card .fc-bar {
height: 4px;
margin-top: 5px;
border-radius: 2px;
background: var(--secondary-bg);
overflow: hidden;
}
.file-card .fc-fill {
height: 100%;
border-radius: 2px;
background: var(--link);
transition: width 0.15s ease;
}
/* Миниатюра изображения / превью документа на месте иконки типа */
.file-card .fc-thumb {
object-fit: cover;
background: var(--secondary-bg);
}
/* Превью документа (PDF) — показываем верх страницы (заголовок), не центр */
.file-card .fc-doc-thumb {
object-position: top center;
background: #fff;
}
/* Кликабельная миниатюра — курсор-лупа + лёгкий hover */
.file-card .fc-icon.fc-clickable { cursor: zoom-in; }
.file-card .fc-icon.fc-clickable:hover { filter: brightness(0.92); }
/* ── Лайтбокс превью вложения (картинка/PDF/DOCX) ── */
.preview-lightbox { position: fixed; inset: 0; z-index: 9000; display: none; }
.preview-lightbox.open { display: block; }
.preview-lightbox .lb-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.7);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.preview-lightbox .lb-panel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(920px, calc(var(--vw) * 94));
max-height: calc(var(--vh) * 92);
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--r-2xl);
background: var(--bg);
box-shadow: 0 12px 48px var(--sh-strong);
}
.preview-lightbox .lb-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 14px;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.preview-lightbox .lb-title {
font-size: var(--fs-lg);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text);
}
.preview-lightbox .lb-close {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
font-size: var(--fs-2xl);
line-height: 1;
padding: 4px 8px;
color: var(--hint);
}
.preview-lightbox .lb-close:hover { color: var(--text); }
.preview-lightbox .lb-content {
flex: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 14px;
background: var(--secondary-bg);
}
.preview-lightbox .lb-image {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
border-radius: var(--r-sm);
}
.preview-lightbox .lb-page {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto 12px;
background: #fff;
box-shadow: 0 1px 8px var(--sh-soft);
}
.preview-lightbox .lb-loading,
.preview-lightbox .lb-note {
text-align: center;
color: var(--hint);
padding: 32px 12px;
font-size: var(--fs-md);
}
.preview-lightbox .lb-note { padding: 10px; font-size: var(--fs-base); }
/* docx-preview: убрать его серый фон-обёртку, оставить страницы-листы */
.preview-lightbox .docx-wrapper {
background: transparent !important;
padding: 0 !important;
}
.preview-lightbox .docx-wrapper > section.docx {
margin: 0 auto 12px !important;
box-shadow: 0 1px 8px var(--sh-soft);
}
/* Порядок: иконка/миниатюра → тело → кнопка. У изображения кнопка идёт первой
в DOM (legacy-разметка) — order выравнивает её вправо, как у файлов. */
.file-card .fc-icon,
.file-card .fc-thumb { order: 0; }
.file-card .fc-body { order: 1; }
.file-card .fc-remove,
.file-card .attach-remove { order: 2; }
.file-card .fc-remove,
.file-card .attach-remove {
align-self: flex-start;
flex-shrink: 0;
position: static;
width: auto;
height: auto;
border-radius: 0;
background: none;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: none;
cursor: pointer;
padding: 2px 4px;
font-size: var(--fs-lg);
line-height: 1;
color: var(--hint);
}
.file-card .fc-remove:hover,
.file-card .attach-remove:hover { color: var(--text); }
.file-card .fc-spin {
display: inline-block;
width: 9px;
height: 9px;
margin-right: 3px;
vertical-align: -1px;
border: 1.5px solid var(--link);
border-top-color: transparent;
border-radius: 50%;
animation: fc-spin 0.7s linear infinite;
}
@keyframes fc-spin { to { transform: rotate(360deg); } }
/* ── Attachment image preview ────────────── */
.attach-preview {
width: 40px;
height: 40px;
border-radius: var(--r-sm);
object-fit: cover;
flex-shrink: 0;
}
/* ── Pasted content cards (override .attachment-badge base) ── */
.attachment-badge.attach-pasted-text,
.attachment-badge.attach-image-card {
position: relative;
flex-direction: column;
align-items: stretch;
gap: 0;
margin-top: 0;
padding: 0;
border-radius: var(--r-2xl);
border: 1px solid var(--ov-08);
background: var(--secondary-bg);
overflow: hidden;
flex-shrink: 0;
}
/* ── Pasted long text card ── */
.attachment-badge.attach-pasted-text {
width: 260px;
max-width: 100%;
flex-direction: row;
align-items: flex-start;
gap: 8px;
padding: 9px 8px 9px 10px;
}
.attach-pasted-clickable { cursor: pointer; }
.attach-pasted-clickable:hover { border-color: var(--border); }
.attach-pasted-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--r-md);
color: var(--link);
background: color-mix(in srgb, var(--link) 12%, transparent);
}
.attach-pasted-body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.attach-pasted-title {
font-size: var(--fs-md);
font-weight: 600;
line-height: 1.3;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.attach-pasted-expand {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 3px;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: var(--fs-base);
line-height: 1.3;
color: var(--hint);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
max-width: 100%;
/* Перенос, а не обрезка: на узком layout (375px при масштабе 140% — это 268)
подпись не влезала в строку и срезалась посередине слова, без многоточия,
потому что ellipsis во flex-строке с иконкой не отрабатывает. */
white-space: normal;
text-align: left;
}
.attach-pasted-expand:hover { color: var(--text); }
.attach-pasted-chevron { text-decoration: none; }
.attach-pasted-text .attach-remove {
position: static;
flex-shrink: 0;
align-self: flex-start;
width: auto;
height: auto;
padding: 0 2px;
border: none;
border-radius: var(--r-sm);
font-size: var(--fs-md);
line-height: 1.3;
background: transparent;
color: var(--hint);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.attach-pasted-text .attach-remove:hover {
color: var(--text);
background: var(--ov-08);
}
/* Редактор вставленного текста */
.modal-card.pasted-text-modal {
width: 100%;
max-width: 760px;
display: flex;
flex-direction: column;
gap: 10px;
}
.pasted-text-modal .pt-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.pasted-text-modal .pt-head h3 { margin: 0; }
.pasted-text-modal .pt-close {
flex-shrink: 0;
background: none;
border: none;
color: var(--hint);
font-size: var(--fs-xl);
cursor: pointer;
}
.pasted-text-modal .pt-close:hover { color: var(--text); }
.pasted-text-modal .pt-text {
width: 100%;
min-height: 240px;
height: calc(var(--vh) * 46);
height: calc(var(--dvh) * 46);
resize: vertical;
padding: 10px 12px;
border: 1px solid var(--ov-08);
border-radius: var(--r-lg);
background: var(--secondary-bg);
color: var(--text);
font-family: var(--font-mono);
font-size: var(--fs-md);
line-height: 1.5;
white-space: pre-wrap;
}
.pasted-text-modal .pt-text:focus {
outline: none;
border-color: var(--link);
}
.pasted-text-modal .pt-count {
font-size: var(--fs-base);
color: var(--hint);
}
/* У .btn-secondary глобально width: 100% (как и у .btn-primary), поэтому три
действия вставали столбиком — .confirm-modal лечит это тем же способом.
На десктопе строим их в строку: «Отмена» слева, подтверждающие — справа. */
.pasted-text-modal .pt-actions {
margin-top: 6px;
align-items: center;
}
.pasted-text-modal .pt-actions button {
width: auto;
padding: 9px 16px;
font-size: var(--fs-lg);
}
.pasted-text-modal .pt-actions .pt-cancel { margin-right: auto; }
@media (max-width: 600px) {
.pasted-text-modal .pt-text { height: calc(var(--vh) * 42); min-height: 180px; }
.pasted-text-modal .pt-text { height: calc(var(--dvh) * 42); }
.pasted-text-modal .pt-actions { flex-wrap: wrap; }
.pasted-text-modal .pt-actions button { flex: 1 1 auto; }
.pasted-text-modal .pt-actions .pt-cancel { margin-right: 0; }
/* На телефоне подтверждающая кнопка должна быть под большим пальцем — она
идёт первой строкой, «Отмена» уходит вниз. */
.pasted-text-modal .pt-actions .pt-save { order: -1; flex-basis: 100%; }
}
/* ── Pasted image card ── */
.attachment-badge.attach-image-card {
width: 72px;
height: 72px;
padding: 0;
border-radius: var(--r-xl);
}
.attach-image-card .attach-preview {
width: 100%;
height: 100%;
border-radius: var(--r-lg);
object-fit: cover;
}
/* ── Remove button (shared for absolute-positioned cards) ── */
.attach-remove {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: none;
color: rgba(255,255,255,0.85);
font-size: var(--fs-sm);
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
padding: 0;
transition: background 0.15s, transform 0.1s, color 0.15s;
}
.attach-remove:hover { background: rgba(0,0,0,0.8); }
.attach-remove:active { transform: scale(0.9); }
/* ── Chat image preview (in user messages) ── */
.chat-img-preview {
margin-top: 8px;
}
.chat-img-preview img {
max-width: 240px;
max-height: 200px;
border-radius: var(--r-lg);
cursor: pointer;
transition: opacity 0.15s;
}
.chat-img-preview img:hover {
opacity: 0.85;
}
.chat-file-badge {
display: inline-block;
padding: 2px 8px;
background: var(--accent-bg);
border-radius: var(--r-sm);
font-size: var(--fs-base);
color: var(--link);
margin-top: 4px;
}
/* ── File content viewer ───────────────── */
.file-content-header {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--secondary-bg);
border-radius: var(--radius-sm);
margin-bottom: 8px;
}
.file-content-name {
flex: 1;
font-size: var(--fs-md);
font-weight: 600;
color: var(--text);
font-family: var(--font-mono);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-size-badge {
font-size: var(--fs-sm);
color: var(--hint);
white-space: nowrap;
}
.file-content-pre {
background: var(--secondary-bg);
border-radius: var(--radius-sm);
padding: 12px 12px 12px 0;
overflow-x: auto;
font-size: var(--fs-base);
line-height: 1.5;
font-family: var(--font-mono);
color: var(--text);
white-space: pre;
max-height: calc(var(--vh) * 72);
overflow-y: auto;
counter-reset: line;
}
/* Issue 18: line numbers */
.file-content-pre .code-line {
display: block;
padding-left: 12px;
counter-increment: line;
}
.file-content-pre .code-line::before {
content: counter(line);
display: inline-block;
width: 3.5ch;
margin-right: 16px;
padding-right: 8px;
color: var(--hint);
text-align: right;
user-select: none;
opacity: 0.4;
border-right: 1px solid var(--ov-06);
}
.file-content-pre .code-line:hover {
background: var(--ov-03);
}
/* Ensure file lines don't wrap unexpectedly */
.file-content-pre code {
display: block;
white-space: pre;
}
/* highlight.js: transparent bg so our controls background */
.file-content-pre code.hljs {
background: transparent;
padding: 0;
}
/* Шапка главной (её видно только на телефоне): знак 1do + имя. Версия
сборки — в «Настройках», в шапке она была первым, что видел человек. */
/* Словесный знак «1do.» — как в шапке сайта: «1» и точка брендом, «do» цветом
текста (в тёмной теме — светлым). Плитка остаётся в узком сайдбаре. */
:root { --wordmark-accent: #2f5bea; }
[data-theme="dark"] { --wordmark-accent: #5b7cf0; }
.wordmark { display: block; height: 24px; width: auto; color: var(--text); flex-shrink: 0; }
.brand-title { display: flex; align-items: center; min-height: 40px; }
#screen-dashboard .header .version-tag { display: none; }
/* ══════════════════════════════════════════════════════════
VERSION TAG
══════════════════════════════════════════════════════════ */
.version-tag {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--link);
background: var(--accent-bg);
border: 1px solid var(--accent-bg-strong);
padding: 2px 8px;
border-radius: var(--r-lg);
white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════
Workspace selector (shared) — фаза 126.7
Стили общие для сайдбара (десктоп) и шапок экранов (телефон).
Держать их ВНЕ @media (min-width:960px): раньше они лежали внутри, и
на телефоне чип отрисовался бы голой системной кнопкой.
══════════════════════════════════════════════════════════ */
.ws-mount {
position: relative;
display: flex;
align-items: center;
}
/* Прижимает чип к правому краю шапки — по решению владельца он стоит
вплотную слева от шестерёнки, а не болтается у заголовка. */
.header .ws-mount-header,
.form-header .ws-mount-header { margin-left: auto; }
/* У кнопки настроек свой margin-left:auto; если оставить оба, свободное место
поделится между ними пополам и шестерёнка уедет от чипа на пол-экрана. */
.header .ws-mount-header + .header-settings-btn { margin-left: 0; }
.ws-trigger {
height: 28px;
max-width: 132px;
padding: 0 10px;
border-radius: var(--r-md);
background: var(--ov-06);
border: 1px solid var(--border);
color: var(--text-secondary);
font-size: var(--fs-sm);
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ws-trigger:hover {
background: var(--ov-10);
color: var(--text);
}
/* fixed, а не absolute: сайдбар шириной 56px стоит с overflow:hidden, и
абсолютный дропдаун шириной 190px обрезался им целиком — список вех не
было видно вообще. Координаты проставляет JS по позиции триггера. */
.ws-dropdown {
position: fixed;
min-width: 190px;
max-width: calc(var(--vw) * 100 - 16px);
max-height: calc(var(--vh) * 60);
overflow-y: auto;
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 4px;
z-index: 1000;
box-shadow: 0 8px 24px var(--sh-mid);
}
.ws-option {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
padding: 6px 12px;
border: none;
background: none;
color: var(--text-secondary);
font-size: var(--fs-base);
text-align: left;
cursor: pointer;
border-radius: var(--r-sm);
transition: all 0.1s;
}
.ws-option:hover {
background: var(--ov-06);
color: var(--text);
}
.ws-option.active {
color: var(--link);
background: var(--accent-bg);
}
.ws-count {
flex: 0 0 auto;
font-size: var(--fs-sm);
opacity: 0.55;
font-variant-numeric: tabular-nums;
}
.ws-manage {
margin-top: 4px;
border-top: 1px solid var(--border);
border-radius: 0 0 6px 6px;
padding-top: 8px;
font-size: var(--fs-sm);
}
/* Палец против курсора: на телефоне строки списка ниже 40px промахиваются */
@media (max-width: 959px) {
.ws-option { padding: 10px 12px; font-size: var(--fs-md); }
.ws-trigger { height: 30px; font-size: var(--fs-base); }
}
/* ══════════════════════════════════════════════════════════
ANIMATED ORB — EMPTY STATE (canvas-based)
══════════════════════════════════════════════════════════ */
.empty-state-orb {
padding: 40px 20px 30px;
}
.orb-container {
/* 280 — желаемый размер, но не обязательный: масштаб интерфейса (фаза 169)
делает layout реально узким (375 → 234 CSS-px при 160%), и фиксированный
квадрат вылезал за край, давая горизонтальный скролл. Канва берёт размер
у контейнера через getBoundingClientRect, поэтому ей всё равно. */
width: min(280px, 100%);
aspect-ratio: 1 / 1;
height: auto;
margin: 0 auto 16px;
}
/* Канва орба — инлайновый элемент: под `height: auto` у контейнера он
добавляет базлайновый зазор, и блок пустой ленты стал выше на 3px даже при
масштабе 100% (поймано сравнением с чистым HEAD). display:block убирает
зазор, ничего больше не меняя. */
.orb-container canvas { display: block; }
.orb-text {
font-size: var(--fs-lg);
color: var(--hint);
opacity: 0.7;
animation: orb-text-pulse 3s ease-in-out infinite;
}
@keyframes orb-text-pulse {
0%, 100% { opacity: 0.5; }
50% { opacity: 0.8; }
}
/* ══════════════════════════════════════════════════════════
SCREEN TRANSITIONS
══════════════════════════════════════════════════════════ */
.screen {
animation: screen-enter 0.25s ease-out;
}
.screen-exit {
animation: screen-exit 0.2s ease-in forwards;
}
@keyframes screen-enter {
from { opacity: 0; transform: translateX(20px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes screen-exit {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-20px); }
}
.screen-back {
animation: screen-enter-back 0.25s ease-out;
}
@keyframes screen-enter-back {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
}
/* ══════════════════════════════════════════════════════════
AGENT CARD ANIMATIONS
══════════════════════════════════════════════════════════ */
/* Появление карточки — ТОЛЬКО для реально новых (класс agent-card-fresh его
ставит JS, сверяясь с прошлым рендером). Лента перерисовывается целиком
(`list.innerHTML`), поэтому раньше `card-in` висел на всех карточках сразу:
каждый ре-рендер заново проигрывал translateY(12px)→0 и opacity 0→1 у ВСЕЙ
ленты — она «спускалась на пару пикселей и мерцала». Фаза 158. */
.agent-card.agent-card-fresh {
animation: card-in 0.3s ease-out both;
}
.agent-card.agent-card-fresh:nth-child(1) { animation-delay: 0s; }
.agent-card.agent-card-fresh:nth-child(2) { animation-delay: 0.06s; }
.agent-card.agent-card-fresh:nth-child(3) { animation-delay: 0.12s; }
.agent-card.agent-card-fresh:nth-child(4) { animation-delay: 0.18s; }
.agent-card.agent-card-fresh:nth-child(5) { animation-delay: 0.24s; }
@keyframes card-in {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Running agent glow */
.agent-card.agent-running {
border-color: var(--success-line);
box-shadow: 0 0 0 1px var(--success-bg);
animation: agent-glow 3s ease-in-out infinite;
}
/* Свежая работающая карточка: выезд + пульс. Специфичность 0-3-0 выше обоих
правил выше, поэтому шорткат не съедает ни того, ни другого. */
.agent-card.agent-running.agent-card-fresh {
animation: card-in 0.3s ease-out both, agent-glow 3s ease-in-out infinite;
}
@keyframes agent-glow {
0%, 100% { box-shadow: 0 0 0 1px var(--success-bg), 0 0 12px var(--success-bg); }
50% { box-shadow: 0 0 0 1px var(--success-line), 0 0 20px var(--success-bg); }
}
.agent-status-tag {
display: inline-flex; align-items: center; gap: 2px;
margin-top: 0;
font-size: var(--fs-xs);
font-weight: 500;
padding: 1px 6px;
border-radius: var(--r-xs);
flex-shrink: 0;
}
.agent-bottom .agent-status-tag { margin-top: 0; }
.status-tag-completed, .status-tag-stopped { background: var(--warning-bg); color: var(--warning); }
.status-tag-failed { background: var(--danger-bg); color: var(--destructive); }
.status-tag-done { background: var(--success-bg); color: var(--success); }
.status-tag-cancelled { background: rgba(113,113,122,0.12); color: var(--hint); }
.status-tag-deferred { background: var(--accent-bg); color: var(--link); }
/* ── Costs dashboard ── */
.costs-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 16px;
}
.cost-card {
background: var(--secondary-bg);
border-radius: var(--radius);
padding: 14px 12px;
text-align: center;
}
.cost-card-label {
font-size: var(--fs-sm);
color: var(--hint);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cost-card-value {
font-size: var(--fs-3xl);
font-weight: 700;
color: var(--text);
}
.cost-card-accent { color: var(--link); }
.costs-section {
background: var(--secondary-bg);
border-radius: var(--radius);
padding: 14px;
margin-bottom: 12px;
}
.costs-section-title {
font-size: var(--fs-base);
color: var(--hint);
margin-bottom: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
}
/* Bar chart */
.costs-chart {
display: flex;
align-items: flex-end;
gap: 2px;
height: 120px;
padding-bottom: 20px;
position: relative;
}
.chart-bar-col {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
position: relative;
cursor: default;
}
.chart-bar {
width: 100%;
min-width: 4px;
max-width: 14px;
background: var(--link);
border-radius: 2px 2px 0 0;
opacity: 0.7;
transition: opacity 0.15s;
}
.chart-bar-col:hover .chart-bar { opacity: 1; }
.chart-bar-col.chart-today .chart-bar { opacity: 1; background: var(--success); }
.chart-day {
font-size: var(--fs-xs);
color: var(--hint);
position: absolute;
bottom: -16px;
}
.chart-bar-col:nth-child(5n) .chart-day,
.chart-bar-col.chart-today .chart-day,
.chart-bar-col:first-child .chart-day { display: block; }
.chart-day { display: none; }
/* Breakdown rows */
.breakdown-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.breakdown-row:last-child { margin-bottom: 0; }
.breakdown-label {
font-size: var(--fs-base);
font-weight: 600;
color: var(--text);
min-width: 70px;
flex-shrink: 0;
}
/* Каналы входа (фаза 171): подпись фиксированной ширины.
У .breakdown-label только min-width, поэтому длинная подпись отъедает трек —
и одинаковые доли рисуются полосками разной длины (на 375px замер дал 37px
против 53px при равных 33%). Там, где строки сравнивают глазом, треки обязаны
начинаться в одной колонке. */
.breakdown-row--fixed .breakdown-label {
width: 104px;
min-width: 104px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breakdown-note {
font-size: var(--fs-sm);
line-height: 1.4;
margin-top: 8px;
}
/* На узком экране фиксированные 104px съедали бы 28% ширины, и доля в 4%
рисовалась бы полоской в 5px (на 320px — 2.8px, то есть исчезала бы). */
@media (max-width: 400px) {
.breakdown-row--fixed .breakdown-label { width: 84px; min-width: 84px; }
}
.breakdown-bar-track {
flex: 1;
height: 6px;
background: var(--ov-06);
border-radius: 3px;
overflow: hidden;
}
.breakdown-bar-fill {
height: 100%;
background: var(--link);
border-radius: 3px;
min-width: 2px;
}
.breakdown-bar-fill.breakdown-model { background: var(--warning); }
.breakdown-bar-fill.breakdown-tag { background: #14b8a6; }
.breakdown-value {
font-size: var(--fs-base);
color: var(--text);
font-weight: 600;
min-width: 65px;
text-align: right;
flex-shrink: 0;
white-space: nowrap;
}
.breakdown-runs {
font-weight: 400;
color: var(--hint);
font-size: var(--fs-sm);
}
.stats-muted { color: var(--hint); opacity: 0.6; }
/* Идентификатор человека: @логин основной, имя профиля рядом серым. */
.user-ident { display: inline; min-width: 0; }
.user-ident strong { font-weight: 600; }
.user-realname {
color: var(--hint);
font-weight: 400;
font-size: 0.92em;
margin-left: 5px;
word-break: break-word;
}
/* Автор чужой реплики в чате (фаза 159). Рисуется только у сообщений других
людей, поэтому в одноавторном чате разметка не меняется вообще. */
.msg-author {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: var(--fs-base);
line-height: 1.2;
opacity: 0.85;
min-width: 0;
}
.msg-author .agent-avatar {
flex: 0 0 auto;
width: 20px;
height: 20px;
font-size: var(--fs-xs);
}
/* Длинный логин не должен распирать пузырь и рвать раскладку на 375px. */
.msg-author .user-ident {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Quick-actions slide-up animation */
.quick-actions[data-animate] {
animation: qaSlideUp 200ms ease-out;
}
@keyframes qaSlideUp {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* 3-dot menu separator */
.chat-menu-dropdown .menu-sep {
padding: 6px 16px 4px;
font-size: var(--fs-xs);
text-transform: uppercase;
letter-spacing: 1px;
color: var(--hint);
opacity: 0.5;
cursor: default;
border-top: 1px solid var(--ov-06);
margin-top: 2px;
}
/* ── Message action icons (ChatGPT-style) ── */
/* «Копировать» — только у итоговой реплики хода (turn-tail, _markTurnHeads):
* под каждой промежуточной строкой кнопка была мусором. */
.chat-messages > .msg-text:not(.turn-tail) > .msg-actions { display: none; }
.msg-actions {
display: flex;
gap: 4px;
padding: 4px 0 2px;
margin-top: 4px;
}
.msg-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border: none;
border-radius: var(--r-sm);
background: transparent;
color: var(--hint);
cursor: pointer;
transition: color 0.15s, background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.msg-action-btn:active {
background: var(--ov-08);
}
.msg-action-btn.copied {
color: var(--success);
}
@media (hover: hover) {
.msg-action-btn:hover {
color: var(--text);
background: var(--ov-06);
}
}
/* History item stagger — только новым строкам: экран истории тоже
перерисовывается целиком, и на всех строках анимация давала тот же «выезд»
при каждом обновлении (фаза 158). */
.history-item.history-item-fresh {
animation: card-in 0.2s ease-out both;
}
/* ══════════════════════════════════════════════════════════
FAB GLOW
══════════════════════════════════════════════════════════ */
.fab {
animation: fab-glow 3s ease-in-out infinite;
transition: transform 0.2s, box-shadow 0.2s;
}
@keyframes fab-glow {
0%, 100% { box-shadow: 0 4px 12px var(--sh-mid), 0 0 0 0 rgba(91,110,174,0); }
50% { box-shadow: 0 4px 12px var(--sh-mid), 0 0 20px 4px var(--accent-line); }
}
.fab:hover {
transform: scale(1.08);
}
.fab:active { transform: scale(0.92); }
.fab .fab-icon {
transition: transform 0.2s;
}
.fab:hover .fab-icon {
transform: rotate(90deg);
}
/* ══════════════════════════════════════════════════════════
MESSAGE SEND FEEDBACK
══════════════════════════════════════════════════════════ */
.btn-send.sent {
background: var(--success);
animation: send-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-send.sent svg path {
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: check-draw 0.35s ease-out 0.1s forwards;
}
@keyframes send-pop {
0% { transform: scale(0.8); opacity: 0.6; }
50% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes check-draw {
to { stroke-dashoffset: 0; }
}
.msg-user {
animation: msg-slide-up 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes msg-slide-up {
from { opacity: 0; transform: translateY(16px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Status pill bounce */
.msg-status {
animation: status-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes status-bounce {
0% { opacity: 0; transform: translateY(8px) scale(0.85); }
60% { opacity: 1; transform: translateY(-2px) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* ══════════════════════════════════════════════════════════
AGENT WORKING — CRISP NEON PERIMETER BORDER (5-6px)
══════════════════════════════════════════════════════════ */
.agent-glow-border {
position: fixed;
inset: 0;
pointer-events: none;
/* Выше #mobile-tab-bar и .conn-bar (оба 100), иначе нижнюю линию рамки
съедает тулбар — а её там как раз и ждут. Ниже дропдаунов (1100),
тостов (999) и модалок. Кликам не мешает: pointer-events: none. */
z-index: 150;
opacity: 0;
transition: opacity 0.6s ease, background 0.6s ease;
overflow: hidden;
border-radius: var(--screen-radius-tl, 0px) var(--screen-radius-tr, 0px) var(--screen-radius-br, 0px) var(--screen-radius-bl, 0px);
}
/* Rotating conic gradient masked to a 5px border — JS drives --glow-angle */
.agent-glow-border::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: conic-gradient(
from var(--glow-angle, 0deg),
var(--button),
var(--accent),
#8a63e8,
#e0896a,
var(--accent),
var(--button)
);
mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
padding: 5px;
}
/* Subtle inner glow for depth */
.agent-glow-border::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow:
inset 0 0 20px var(--accent-bg),
inset 0 0 40px var(--violet-bg);
opacity: 0;
transition: opacity 0.6s;
}
/* SVG-маска контура видимой области (со скруглениями и вырезом, если он в
кадре) — заменяет маску на padding. Строится в app.js по фактическому
размеру элемента, поэтому 100% 100% ничего не растягивает. */
.agent-glow-border.has-shape-mask::before {
mask: var(--glow-border-mask) center / 100% 100% no-repeat;
-webkit-mask: var(--glow-border-mask) center / 100% 100% no-repeat;
padding: 0;
}
.agent-glow-border.has-shape-mask::after {
mask: var(--glow-border-mask) center / 100% 100% no-repeat;
-webkit-mask: var(--glow-border-mask) center / 100% 100% no-repeat;
}
.agent-glow-border.active {
opacity: 1;
animation: glow-dim 30s ease forwards;
}
/* 182.3: на время живого набора рамка гаснет — см. _liveGlowHold в app.js.
Именно opacity, а не пауза анимаций: и неподвижный слой с маской на весь
экран удорожает каждую перерисовку ленты. */
.agent-glow-border.live-typing,
.agent-glow-border.active.live-typing {
opacity: 0;
}
/* TEMPORARILY DISABLED: screen dimming behind glow border
@keyframes glow-dim {
0% { background: rgba(0, 0, 0, 0); }
0.1% { background: rgba(0, 0, 0, 0.1); }
33% { background: rgba(0, 0, 0, 0.1); }
34% { background: rgba(0, 0, 0, 0.3); }
99% { background: rgba(0, 0, 0, 0.3); }
100% { background: rgba(0, 0, 0, 0.7); }
} */
@keyframes glow-dim {
0% { background: transparent; }
100% { background: transparent; }
}
.agent-glow-border.active::before {
animation: glow-breathe 2.5s ease-in-out infinite;
}
.agent-glow-border.active::after {
opacity: 1;
animation: glow-inner-breathe 3s ease-in-out infinite;
}
@keyframes glow-breathe {
0%, 100% { opacity: 0.6; filter: brightness(0.9); }
50% { opacity: 1; filter: brightness(1.2); }
}
@keyframes glow-inner-breathe {
0%, 100% { box-shadow: inset 0 0 15px var(--accent-bg), inset 0 0 30px var(--violet-bg); }
50% { box-shadow: inset 0 0 30px var(--accent-bg-strong), inset 0 0 60px var(--violet-bg); }
}
/* Вспышка по исходу: зелёная — завершился, красная — упал, янтарная — остановлен */
.agent-glow-border.flash-done { --flash-color: #4caf50; --flash-rgb: 76,175,80; }
.agent-glow-border.flash-failed { --flash-color: #ef4444; --flash-rgb: 239,68,68; }
.agent-glow-border.flash-stopped { --flash-color: #f59e0b; --flash-rgb: 245,158,11; }
.agent-glow-border.flash-done,
.agent-glow-border.flash-failed,
.agent-glow-border.flash-stopped {
opacity: 1;
animation: none;
}
.agent-glow-border.flash-done::before,
.agent-glow-border.flash-failed::before,
.agent-glow-border.flash-stopped::before {
background: var(--flash-color);
filter: none;
opacity: 1;
animation: flash-done-fade 1.2s ease-out forwards;
}
.agent-glow-border.flash-done::after,
.agent-glow-border.flash-failed::after,
.agent-glow-border.flash-stopped::after {
opacity: 1;
box-shadow:
inset 0 0 30px rgba(var(--flash-rgb), 0.3),
inset 0 0 60px rgba(var(--flash-rgb), 0.1);
animation: flash-done-fade 1.2s ease-out forwards;
}
@keyframes flash-done-fade {
0% { opacity: 1; }
40% { opacity: 0.7; }
100% { opacity: 0; }
}
/* Question flash — accent/amber pulse */
.agent-glow-border.flash-question {
opacity: 1;
animation: none;
}
.agent-glow-border.flash-question::before {
background: linear-gradient(135deg, var(--accent), var(--warning));
filter: none;
opacity: 1;
animation: flash-question-pulse 2s ease-in-out 3;
}
.agent-glow-border.flash-question::after {
opacity: 1;
box-shadow:
inset 0 0 30px var(--violet-bg),
inset 0 0 60px var(--warning-bg);
animation: flash-question-pulse 2s ease-in-out 3;
}
@keyframes flash-question-pulse {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* ══════════════════════════════════════════════════════════
REDUCED MOTION
══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════
MOBILE BOTTOM TAB BAR
══════════════════════════════════════════════════════════ */
#mobile-tab-bar {
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
background: var(--secondary-bg);
border-top: 1px solid var(--ov-10);
padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
z-index: 100;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#mobile-tab-bar .tab-btn {
flex: 1;
display: flex; flex-direction: column; align-items: center;
gap: 2px;
font-size: var(--fs-xs);
color: var(--hint);
background: none; border: none;
cursor: pointer;
padding: 2px 0;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s;
}
#mobile-tab-bar .tab-btn.active { color: var(--link); }
#mobile-tab-bar .tab-btn svg { width: 22px; height: 22px; }
#mobile-tab-bar .tab-btn span { font-weight: 500; }
/* ── Mobile: chat view compact spacing ── */
@media (max-width: 959px) {
/* Reduce horizontal padding on all messages */
.chat-messages .msg {
padding: 4px 12px;
}
/* User bubble — less left margin = wider bubble */
.chat-messages .msg-user {
padding: 8px 14px;
margin: 8px 12px 8px 40px;
}
/* Agent text — tighter padding */
.chat-messages .msg-text {
padding: 8px 12px;
}
/* Tool use/result — reduce indentation */
.chat-messages .msg-tool_use {
padding: 6px 12px;
margin-left: 12px;
}
.chat-messages .msg-tool_result {
padding: 4px 12px 8px;
margin-left: 12px;
}
/* Thinking — match tool indentation */
.chat-messages .msg-thinking {
padding: 4px 12px;
margin-left: 12px;
}
/* Code blocks — smaller font, tighter padding */
.chat-messages .msg code {
font-size: var(--fs-sm);
}
.chat-messages .msg pre {
font-size: var(--fs-sm);
padding: 8px 10px;
}
/* Quick actions — tighter padding */
.quick-actions {
padding: 8px 12px;
}
}
/* ═══════════════ Главная: hero с композером (фаза 139) ═══════════════ */
.home-hero {
display: flex;
flex-direction: column;
justify-content: safe center; /* safe: при нехватке места не режет верх */
align-items: center;
padding: 24px 16px;
box-sizing: border-box;
}
.home-col {
width: 100%;
max-width: var(--composer-max);
display: flex;
flex-direction: column;
}
.home-greet {
margin: 0 0 36px;
font-size: 24px;
font-weight: 400; /* обычное начертание: не заголовок, а обращение */
text-align: center;
color: var(--text);
}
.composer-resume {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
margin-bottom: 10px;
padding: 12px 14px;
background: var(--secondary-bg);
border: 1px solid var(--ov-08);
border-radius: var(--r-2xl);
color: var(--text);
font-size: var(--fs-lg);
font-family: inherit;
text-align: left;
cursor: pointer;
transition: border-color 0.15s;
}
.composer-resume:hover { border-color: var(--ov-16); }
.home-slot { margin-top: 28px; }
.home-suggest {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.home-running { display: flex; flex-direction: column; gap: 8px; }
.home-foot {
margin: 14px 0 0;
font-size: var(--fs-base);
color: var(--hint);
text-align: center;
}
/* Композер на главной: отступ под таб-бар уже держит #screen-dashboard, а узел
приезжает со своим таким же (мобильный override .chat-input-bar). Без этого
правила они складываются и карточка повисает в 60-94px над таб-баром. */
body[data-screen="dashboard"] #chat-input-bar {
padding: 0;
background: transparent;
}
/* Телефон: hero пока живёт под старой лентой (она уедет на 139.5), поэтому
нижний отступ под таб-бар нужен ему самому - иначе карточка композера
налезает на таб-бар на 8px. */
@media (max-width: 959px) {
.home-hero {
padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px) + 8px);
}
}
/* Чипы параметров запуска в тулбаре композера (фаза 139). */
.cmp-chip-wrap { position: relative; display: inline-flex; }
.cmp-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 10px;
background: transparent; border: none; border-radius: var(--r-md);
color: var(--hint); font-size: var(--fs-md); font-family: inherit; cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.cmp-chip:hover { background: var(--ov-04); color: var(--text); }
.cmp-chip svg { width: 15px; height: 15px; flex-shrink: 0; }
.cmp-chip-eff { color: var(--hint); white-space: nowrap; }
.cmp-chip-label { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
#cmp-project-wrap .cmp-chip-label { color: var(--text); font-weight: 500; }
/* Проект не выбран — это блокирует запуск, поэтому чип не молчит. */
#cmp-project-wrap.is-empty .cmp-chip-label { color: var(--warning, #d08c3f); font-weight: 600; }
/* Отход от дефолта стенда видно, не открывая поповер. */
#cmp-model-wrap.is-custom .cmp-chip-label { color: var(--text); }
.cmp-popover {
position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 60;
min-width: 260px; max-width: 320px; max-height: min(calc(var(--vh) * 52), 420px);
overflow-y: auto; padding: 6px;
background: var(--secondary-bg); border: 1px solid var(--ov-08);
border-radius: var(--r-2xl); box-shadow: 0 12px 32px var(--sh-soft);
}
/* На главной поле ввода по центру экрана: вверх поповеру не хватает места,
и заголовок «Модель» с верхними строками уходил за край окна. */
@media (min-width: 960px) {
#home-hero .cmp-popover { bottom: auto; top: calc(100% + 8px); }
}
.cmp-filter {
width: 100%; box-sizing: border-box; margin-bottom: 6px;
padding: 8px 10px; font-size: var(--fs-lg); font-family: inherit;
background: var(--bg); color: var(--text);
border: 1px solid var(--ov-08); border-radius: var(--r-lg); outline: none;
}
.cmp-pop-head { padding: 8px 10px 4px; font-size: var(--fs-sm); text-transform: uppercase; color: var(--hint); letter-spacing: 0.04em; }
.cmp-list { display: flex; flex-direction: column; gap: 2px; }
.cmp-row {
display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
width: 100%; padding: 8px 10px; text-align: left;
background: transparent; border: none; border-radius: var(--r-lg);
color: var(--text); font-size: var(--fs-lg); font-family: inherit; cursor: pointer;
}
.cmp-row:hover { background: var(--ov-04); }
/* Выбранное — фирменным цветом: --ov-08 в светлой теме давал ~1,15:1 к фону,
и выбранную модель было не отличить (WCAG 1.4.11, UX-аудит, круг 2). */
.cmp-row.active { background: var(--accent-bg); color: var(--link); font-weight: 600; }
.cmp-row-title { font-weight: 500; }
.cmp-row-desc { font-size: var(--fs-base); color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.cmp-empty { padding: 12px 10px; color: var(--hint); font-size: var(--fs-md); }
.cmp-create {
width: 100%; margin-top: 6px; padding: 9px 10px;
background: transparent; border: 1px dashed var(--ov-16); border-radius: var(--r-lg);
color: var(--hint); font-size: var(--fs-md); font-family: inherit; cursor: pointer;
}
.cmp-create:hover { color: var(--text); border-color: var(--ov-24, var(--ov-16)); }
.cmp-effort-row { display: flex; gap: 4px; padding: 2px 4px 4px; }
.cmp-effort {
flex: 1; padding: 7px 4px; font-size: var(--fs-base); font-family: inherit;
background: transparent; border: 1px solid var(--ov-08); border-radius: var(--r-md);
color: var(--hint); cursor: pointer;
}
.cmp-effort:hover { color: var(--text); }
.cmp-effort.active { background: var(--accent-bg); color: var(--link); border-color: color-mix(in srgb, var(--link) 50%, transparent); font-weight: 600; }
.cmp-pop-note { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--hint); }
/* Телефон: в тулбаре 375px четыре подписи не помещаются и налезают друг на
друга («Playground», «Авто», «Haiku · Medium», «План» в одной каше).
Режим оставляем иконкой, остальное ужимаем. */
/* Слой затемнения под листами композера. Виден только на телефоне: на
десктопе меню остаются обычными поповерами у кнопки. */
.sheet-scrim {
position: fixed;
inset: 0;
z-index: 110;
background: rgba(0, 0, 0, 0.45);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
animation: scrimIn 0.16s ease-out;
}
.sheet-scrim[hidden] { display: none; }
@keyframes scrimIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheetUp { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (min-width: 960px) {
/* Десктоп остаётся как был: затемнение не показываем. */
.sheet-scrim { display: none !important; }
}
@media (max-width: 959px) {
/* Телефон: меню композера открывались ВВЕРХ от кнопки, а кнопка стоит у низа
экрана - список уезжал за верхний край, часть строк было физически не
нажать (жалобы 30.08 на проект, модель и «+»). Единый лист снизу: удобно
большому пальцу, ничего не уезжает, задний фон затемнён и размыт. */
.cmp-popover,
#chat-input-bar .modes-popover,
#plus-dropdown.open,
#chat-cmd-palette {
position: fixed;
left: 0;
right: 0;
top: auto;
bottom: 0;
width: auto;
min-width: 0;
max-width: none;
max-height: calc(var(--vh) * 70);
overflow-y: auto;
z-index: 120;
border-radius: 18px 18px 0 0;
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.35);
animation: sheetUp 0.18s ease-out;
-webkit-overflow-scrolling: touch;
}
/* Пункты листа крупнее: попасть пальцем, а не курсором. */
.cmp-popover .cmp-row,
.cmp-popover .cmp-create,
#chat-cmd-palette .cmd-row,
#plus-dropdown.open .plus-item { min-height: 48px; }
/* Палитра «/» шире 320px не нужна, но на телефоне она лист во всю ширину. */
#chat-cmd-palette { width: auto; }
.cmp-effort { min-height: 44px; }
/* Строка выросла до 48px, а текст оставался прижат к верху. */
.cmp-popover .cmp-row { justify-content: center; }
/* Пять кнопок в 366px: «Очень глубоко» ломалось на две строки — делим 3+2. */
.cmp-effort-row { flex-wrap: wrap; }
.cmp-effort { flex: 1 1 calc(33.333% - 4px); white-space: nowrap; }
.cmp-chip-label { max-width: 56px; }
.cmp-chip { padding: 0 5px; gap: 3px; }
/* Иконки в тулбаре главной: 32px не влезают семь штук в 375px - «/» наезжала
на кнопку режима. 28px дают запас и на 360px. */
body[data-screen="dashboard"] .ct-icon-btn,
body[data-screen="dashboard"] .btn-voice { width: 28px; height: 28px; }
body[data-screen="dashboard"] .ct-left,
body[data-screen="dashboard"] .ct-right { gap: 2px; }
/* Усилие на телефоне не показываем: с ним тулбар переполнялся на 17px и
элементы налезали друг на друга. Значение видно в поповере. */
.cmp-chip-eff { display: none; }
/* Обе половины тулбара обязаны уметь сжиматься, иначе flex их не разведёт. */
body[data-screen="dashboard"] .composer-toolbar { gap: 4px; }
body[data-screen="dashboard"] .ct-left,
body[data-screen="dashboard"] .ct-right { min-width: 0; flex-shrink: 1; }
body[data-screen="dashboard"] .ct-left { overflow: hidden; }
body[data-screen="dashboard"] .mode-btn-name { display: none; }
body[data-screen="dashboard"] .voice-lang-select { display: none !important; }
}
/* ── Очень узкий layout (фаза 169) ───────────────────────────────────────
Масштаб интерфейса впервые делает layout уже 340px: на 375-м телефоне при
130% это 288 CSS-px, при 160% — 234. Устройств такой ширины не бывает,
поэтому места, свёрстанные «всё в одну строку», раньше с ней не
сталкивались — при зуме они вылезали за край и давали горизонтальный
скролл ВСЕЙ страницы (замер: главная при 160% скроллилась до 328px).
Здесь ровно то, что упиралось: тулбар композера и метастрока карточки. */
@media (max-width: 340px) {
/* Тулбар композера переносится на две строки, а не обрезается: восемь
элементов (чип проекта, чип модели, «+», улучшатель, команды, режим,
голос, отправка) в 234px не влезают ни при каких размерах, а спрятать
их через overflow значило бы сделать кнопки недоступными — они остаются
в потоке, просто не видны. Перенос сохраняет всё. */
.composer-toolbar { flex-wrap: wrap; gap: 3px; row-gap: 4px; }
.ct-left,
.ct-right { min-width: 0; flex-shrink: 1; flex-wrap: wrap; }
.ct-icon-btn { width: 28px; height: 28px; }
.btn-send, .btn-voice, .btn-stop-agent, .btn-queue { width: 32px; height: 32px; }
.btn-send svg, .btn-stop-agent svg, .btn-queue svg { width: 18px; height: 18px; }
/* Микрофон на экране «Задача» — единственная кнопка шире стандартных 36px. */
#btn-nt-mic { width: 36px; height: 36px; }
/* Таб-бар: при 130% подписи «Проекты|Рутины» сходятся почти вплотную, а
«Настройки» упираются в кромку экрана. */
#mobile-tab-bar { padding-left: 2px; padding-right: 2px; }
.tab-btn span { font-size: var(--fs-xs); letter-spacing: -0.01em; }
.tab-btn svg { width: 19px; height: 19px; }
/* Выбор проекта на экране «Задача»: в две колонки названия вырождались в
«Алм…», «Ауд…», «Дир…» — проект становилось не выбрать. */
.nt-project-grid { grid-template-columns: 1fr; }
/* Поле задачи не должно сжиматься до строчки в 30px из-за иконок рядом. */
.nt-input-wrapper { flex-wrap: wrap; }
.nt-input-wrapper textarea,
.nt-input-wrapper .nt-input { flex: 1 1 100%; min-width: 0; }
/* Селект языка распознавания (58px) — самый крупный элемент строки ввода, и
без него «скрепка», «вставить», улучшатель и микрофон складываются в
доступные 210px. В композере чата он на телефоне скрыт тем же приёмом;
язык распознавания при этом определяется автоматически. */
#voice-lang-nt { display: none !important; }
/* Метастрока карточки уезжает на свою строку, когда рядом со статусом ей
тесно. Сама обрезка многоточием живёт в базовом правиле .agent-meta —
здесь её держать нельзя: при масштабе интерфейса медиазапрос не
срабатывает, а защита нужна (см. комментарий у .agent-card .agent-meta). */
.agent-card .agent-bottom { flex-wrap: wrap; }
/* Бейдж усилия уходит: в строке карточки семь элементов (аватар, номер,
точка непрочитанного, проект, модель, усилие, «⋯») просят 240px при
доступных 234, а усилие из них — самое второстепенное. Оно остаётся
видно внутри карточки, когда её открыли. Тот же приём уже применён к
чипу усилия в тулбаре композера на телефоне. */
.agent-card .agent-effort { display: none; }
/* Кнопки карточки рутины («Запуски», «Запустить сейчас», «Удалить») стоят в
одну строку и просят ~300px — на 234px переносим их на вторую строку. */
.sched-actions { flex-wrap: wrap; gap: 8px 10px; }
/* Шапка главной: заголовок с версией, чип вехи и две кнопки просят ~360px.
Заголовок обрезается многоточием, чип вехи сжимается, кнопки держат
размер, версия уходит совсем. */
.header { flex-wrap: nowrap; }
.header h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header .ws-mount-header { min-width: 0; }
.header .btn-icon { flex-shrink: 0; }
.header .version-tag { display: none; }
/* Шапка формы: у «Проектов» это «←», заголовок, чип вехи, «Команды» и
«+ Новый проект» — на узком layout переносим вторую половину на свою
строку. Тесно ей и на 375px (кнопка вылезает и без масштаба — дефект
старый, базовое поведение здесь не меняем), но масштаб не должен его
усугублять. */
.form-header { flex-wrap: wrap; row-gap: 8px; }
.form-header h2 { flex: 1 1 auto; min-width: 0; }
}
/* ── Совсем узкий layout (масштаб 150-160% на 375px) ─────────────────────
Шесть подписей таб-бара в 234 CSS-px стоят вплотную и режутся кромкой —
иконок здесь достаточно, название раздела остаётся в aria-label. */
@media (max-width: 264px) {
.tab-btn span:not(.tab-badge) { display: none; }
.tab-btn svg { width: 22px; height: 22px; }
}
/* Элементы, уместные только на главной или только в чате. */
.home-only { display: none; }
body[data-screen="dashboard"] .home-only { display: inline-flex; }
body[data-screen="dashboard"] #btn-stop-inline { display: none !important; }
/* Mobile: offset content above tab bar */
@media (max-width: 959px) {
/* Chat input bar — sits above tab bar */
.chat-input-bar {
padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
/* Chat action buttons (Выполнено, Отложить, etc.) */
.chat-action-bar {
padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
/* Scrollable screen content — add bottom padding so last items aren't hidden */
#screen-projects,
#screen-settings,
#screen-files,
#screen-admin-access {
padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}
/* Главная вынута из общего селектора: композер стоит внизу и отступ ей нужен
по реальной высоте таб-бара, а не по 56px, которые тут стояли исторически. */
#screen-dashboard {
padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
/* New task: панель ввода стоит НАД таб-баром. Раньше поднимался только
отступ, а сама панель (z 200) накрывала таб-бар (z 100): внизу пустая
полоса, уйти с экрана можно было лишь стрелкой «←». */
.nt-input-bar {
bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
padding-bottom: 12px;
}
.nt-body {
padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
}
/* Toast — above tab bar */
.toast-container {
bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
}
/* ══════════════════════════════════════════════════════════
DESKTOP 3-PANEL LAYOUT (Beacon-style)
══════════════════════════════════════════════════════════ */
/* ── Mobile: hide desktop-only elements ── */
@media (max-width: 959px) {
#desktop-sidebar { display: none !important; }
#desktop-list-panel { display: none !important; }
#desktop-layout { display: block; }
}
/* ── Desktop layout ── */
@media (min-width: 960px) {
/* 3-column grid */
#desktop-layout {
display: grid;
grid-template-columns: 56px 300px 1fr;
height: calc(var(--vh) * 100);
overflow: hidden;
}
/* ── Sidebar ── */
#desktop-sidebar {
display: flex;
flex-direction: column;
align-items: center;
/* Рельс в тон карточек, а не «фон на 15% темнее»: в светлой теме это был
тяжёлый серый #d9d9d9 рядом с белой панелью. */
background: var(--secondary-bg);
border-right: 1px solid var(--border);
padding: 12px 0;
overflow: hidden;
/* min-height: 0 — иначе grid-элемент растёт по содержимому и выходит за
строку грида (замер при 160%: сетка 562px, рейка 797px), а кнопки
уезжают под кромку экрана вместе с «Настройками». С нулём рейка
принимает высоту строки, и её кнопки начинают отдавать высоту. */
min-height: 0;
}
.sidebar-logo {
margin-bottom: 20px;
padding: 4px;
}
.sidebar-nav {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex: 1;
/* min-height: 0 — без него колонка не отдаёт своим кнопкам разрешение
сжиматься, и при масштабе интерфейса (фаза 169) нижние просто уезжали
под кромку: на экране 900px при 160% полезной высоты остаётся 562
CSS-px, а четырнадцать кнопок по 40px в них не встают. Скролл тут не
годится — ниже в файле тултипы требуют overflow:visible. */
min-height: 0;
}
.sidebar-btn {
width: 40px;
height: 40px;
/* Кнопка отдаёт высоту, когда рейка не вмещает весь список (масштаб
интерфейса): 28px — предел, после которого иконка становится нечитаемой.
Там, где места хватает, сжатия не происходит вовсе. */
flex: 0 1 auto;
min-height: 28px;
border-radius: var(--r-lg);
border: none;
background: transparent;
color: var(--hint);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.sidebar-btn:hover {
color: var(--text);
background: var(--ov-06);
}
.sidebar-btn.active {
color: var(--link);
background: var(--accent-bg);
}
.sidebar-bottom {
margin-top: auto;
padding: 8px 0 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.sidebar-avatar-wrap { position: relative; display: flex; }
.sidebar-btn.sidebar-learn { color: var(--hint); }
.sidebar-btn.sidebar-learn:hover, .sidebar-btn.sidebar-learn.active { color: var(--link); }
/* Подсказки при наведении: своя плашка справа от иконки. Нативный title
появляется с секундной задержкой и не у всех кнопок — люди не понимали,
что за иконки (владелец, 06.09). Плашки не обрезаем: сайдбар без overflow. */
#desktop-sidebar, #desktop-sidebar .sidebar-nav, #desktop-sidebar .sidebar-bottom { overflow: visible; }
#desktop-sidebar [data-tip]::after {
content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
transform: translate(-6px, -50%); background: var(--text); color: var(--bg);
font-size: var(--fs-md); font-weight: 500; line-height: 1; padding: 8px 11px; border-radius: var(--r-md);
white-space: nowrap; opacity: 0; pointer-events: none; z-index: 1300;
box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .12s ease, transform .12s ease; }
#desktop-sidebar [data-tip]::before {
content: ''; position: absolute; left: calc(100% + 6px); top: 50%;
transform: translate(-6px, -50%); border: 6px solid transparent; border-right-color: var(--text);
opacity: 0; pointer-events: none; z-index: 1300; transition: opacity .12s ease, transform .12s ease; }
#desktop-sidebar [data-tip]:hover::after, #desktop-sidebar [data-tip]:focus-visible::after,
#desktop-sidebar [data-tip]:hover::before, #desktop-sidebar [data-tip]:focus-visible::before {
opacity: 1; transform: translate(0, -50%); transition-delay: .08s; }
.sidebar-author {
display: block;
}
.sidebar-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
opacity: 0.7;
transition: opacity 0.2s;
cursor: default;
}
.sidebar-avatar:hover { opacity: 1; }
.sidebar-avatar-initials {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--accent-bg-strong);
color: var(--link);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--fs-md);
font-weight: 600;
opacity: 0.7;
transition: opacity 0.2s;
}
.sidebar-avatar-initials:hover { opacity: 1; }
/* Workspace selector (базовые стили — вне этого медиа, см. «Workspace
selector (shared)»: на телефоне селектор живёт в шапках экранов) */
.sidebar-workspaces {
padding: 6px 8px;
position: relative;
display: flex;
justify-content: center;
}
/* В сайдбаре ширина фиксированная: колонка 56px, чип обязан быть предсказуем */
.sidebar-workspaces .ws-trigger {
width: 64px;
padding: 0;
}
/* Дубль селектора в шапке был бы лишним — на десктопе он в сайдбаре */
.ws-mount-header { display: none !important; }
/* ── List Panel ── */
#desktop-list-panel {
display: flex;
flex-direction: column;
background: var(--bg);
border-right: 1px solid var(--border);
overflow: hidden;
}
.dl-header-title {
font-size: var(--fs-input);
font-weight: 600;
flex: 1;
}
.dl-badge {
background: var(--success);
color: var(--on-accent);
font-size: var(--fs-sm);
font-weight: 600;
min-width: 20px;
height: 20px;
padding: 0 6px;
border-radius: var(--r-lg);
display: inline-flex;
align-items: center;
justify-content: center;
}
.dl-tabs {
display: flex;
border-bottom: 1px solid var(--border);
padding: 0 16px;
flex-shrink: 0;
}
.dl-tab {
flex: 1;
padding: 8px 0;
text-align: center;
font-size: var(--fs-md);
font-weight: 500;
color: var(--hint);
cursor: pointer;
border: none;
background: none;
border-bottom: 2px solid transparent;
transition: all 0.15s;
}
.dl-tab:hover { color: var(--text); }
.dl-tab.active {
color: var(--link);
border-bottom-color: var(--link);
}
.dl-projects {
display: flex;
gap: 6px;
padding: 8px 16px;
overflow-x: auto;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
mask-image: linear-gradient(to right, #000 85%, transparent);
flex-shrink: 0;
}
.dl-projects::-webkit-scrollbar { display: none; }
.dl-projects:empty { display: none; }
.dl-project-chip {
flex-shrink: 0;
padding: 4px 10px;
border-radius: var(--r-xl);
background: var(--secondary-bg);
color: var(--hint);
font-size: var(--fs-sm);
border: 1px solid transparent;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
}
.dl-project-chip:hover,
.dl-project-chip.active {
background: var(--button);
color: var(--button-text);
border-color: var(--button);
}
.dl-search {
padding: 4px 12px 8px;
flex-shrink: 0;
}
.dl-search input {
width: 100%;
padding: 7px 12px;
border-radius: var(--r-2xl);
border: 1px solid var(--ov-08);
background: var(--secondary-bg);
color: var(--text);
font-size: var(--fs-base);
outline: none;
font-family: inherit;
}
.dl-search input::placeholder { color: var(--hint); }
.dl-search input:focus { border-color: var(--ov-15); }
.dl-list {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
}
/* ── List items ── */
.dl-item {
padding: 10px 16px;
cursor: pointer;
border-bottom: 1px solid var(--ov-05);
transition: background 0.15s;
border-left: 3px solid transparent;
}
.dl-item:hover { background: var(--ov-06); }
.dl-item.active {
background: var(--accent-bg);
border-left-color: var(--link);
}
.dl-item-top {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 3px;
}
.dl-item-project {
font-size: var(--fs-sm);
font-weight: 600;
color: var(--link);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dl-item-model {
font-size: var(--fs-xs);
color: var(--hint);
}
.dl-item-time {
font-size: var(--fs-xs);
color: var(--hint);
flex-shrink: 0;
}
.dl-item-task {
font-size: var(--fs-base);
color: var(--text);
opacity: 0.85;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.dl-item-bottom {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.dl-item-status {
font-size: var(--fs-xs);
font-weight: 600;
padding: 2px 7px;
border-radius: var(--r-xs);
letter-spacing: 0.02em;
}
.dl-item-status.s-running { background: var(--success-bg); color: var(--success); }
.dl-item-status.s-waiting_input { background: var(--accent-bg); color: var(--link); }
.dl-item-status.s-completed { background: var(--warning-bg); color: var(--warning); }
.dl-item-status.s-done { background: var(--success-bg); color: var(--success); }
.dl-item-status.s-failed { background: var(--danger-bg); color: var(--destructive); }
.dl-item-status.s-stopped { background: var(--warning-bg); color: var(--warning); }
.dl-item-status.s-cancelled { background: var(--danger-bg); color: var(--destructive); }
.dl-item-status.s-deferred { background: var(--warning-bg); color: var(--warning); }
.dl-item-cost {
font-size: var(--fs-xs);
color: var(--hint);
margin-left: auto;
font-family: var(--font-mono);
}
/* Без opacity: она перемножалась с приглушением карточки на паузе, и id
уходил в 2.6:1. Серого --hint достаточно. */
.dl-item-id {
font-size: var(--fs-xs);
color: var(--hint);
font-family: var(--font-mono);
}
.dl-item-children {
font-size: var(--fs-xs);
color: var(--link);
margin-left: auto;
opacity: 0.8;
}
/* ── Status dots ── */
.dl-status-dot {
width: 7px;
height: 7px;
border-radius: 50%;
flex-shrink: 0;
background: var(--hint);
opacity: 0.5;
}
.dl-running .dl-status-dot {
background: var(--success);
opacity: 1;
box-shadow: 0 0 6px var(--success-line);
animation: dot-pulse 1.5s ease-in-out infinite;
}
.dl-paused .dl-status-dot {
background: var(--warning);
opacity: 0.8;
}
.dl-error .dl-status-dot {
background: var(--destructive);
opacity: 1;
}
.dl-interrupted .dl-status-dot {
background: var(--warning);
opacity: 1;
box-shadow: 0 0 6px var(--warning-line);
}
.dl-draft .dl-status-dot {
background: var(--link);
opacity: 0.6;
}
@keyframes dot-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--success-line); }
50% { opacity: 0.5; box-shadow: 0 0 2px var(--success-line); }
}
/* ── Running item glow ── */
.dl-item.dl-running {
border-left-color: var(--success);
background: var(--success-bg);
animation: dl-item-glow 3s ease-in-out infinite;
}
@keyframes dl-item-glow {
0%, 100% { box-shadow: inset 3px 0 8px -4px var(--success-line); }
50% { box-shadow: inset 3px 0 12px -4px var(--success-line); }
}
.dl-item.dl-running:hover {
background: var(--success-bg);
}
/* ── Interrupted item styling ── */
.dl-item.dl-interrupted {
border-left-color: var(--warning);
background: var(--warning-bg);
}
.dl-item.dl-interrupted:hover {
background: var(--warning-bg);
}
/* ── Paused/error item styling ── */
/* Без opacity: приглушение прозрачностью роняло серые подписи карточки
(id, цена) ниже 4.5:1 в светлой теме. Статус и так виден по бейджу. */
.dl-item.dl-paused {
opacity: 1;
}
.dl-item.dl-paused:hover {
opacity: 1;
background: var(--warning-bg);
}
.dl-item.dl-error {
border-left-color: transparent;
opacity: 1;
}
.dl-item.dl-error:hover {
opacity: 1;
background: var(--danger-bg);
}
.dl-item.dl-draft {
opacity: 0.6;
}
.dl-item.dl-draft:hover {
opacity: 1;
}
/* Pinned (Фаза 45) — gold left stripe + full opacity, overrides status. */
.dl-item.agent-pinned {
border-left-color: var(--warning);
opacity: 1;
}
/* ── Section separator for paused group ── */
.dl-item.dl-paused:first-of-type,
.dl-item.dl-error:first-of-type {
margin-top: 2px;
border-top: 1px solid var(--ov-06);
}
.dl-empty {
padding: 40px 20px;
text-align: center;
color: var(--hint);
font-size: var(--fs-md);
}
/* ── Main Panel ── */
#desktop-main-panel {
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
background: var(--bg);
}
/* Dashboard hidden on desktop — list panel replaces it */
#screen-dashboard { display: none !important; }
/* FABs and mobile tab bar hidden on desktop */
.fab { display: none !important; }
#mobile-tab-bar { display: none !important; }
/* Screens fill main panel — instant, no animation */
#desktop-main-panel > .screen,
#desktop-main-panel > .home-hero {
height: 100%;
overflow-y: auto;
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
/* Chat fills main panel properly */
#desktop-main-panel #screen-chat {
height: 100%;
}
/* Fix position:fixed elements inside main panel */
.nt-input-bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
/* Hide back buttons on desktop — sidebar handles navigation */
#desktop-main-panel .form-header > .btn-icon:first-child { display: none; }
#desktop-main-panel .chat-header > #btn-back { display: none; }
/* Screen transitions disabled on desktop */
.screen-exit,
.screen-back {
animation: none !important;
}
/* Pull-to-refresh disabled on desktop */
.ptr-indicator { display: none !important; }
/* Modals: center on desktop, not bottom-sheet */
.modal-overlay {
align-items: center;
}
.modal-content {
border-radius: var(--r-2xl);
max-width: 600px;
}
/* Glow border stays full-viewport */
/* Thin styled scrollbar for desktop */
.dl-list,
#desktop-main-panel > .screen {
scrollbar-width: thin;
scrollbar-color: var(--ov-12) transparent;
}
.dl-list::-webkit-scrollbar,
#desktop-main-panel > .screen::-webkit-scrollbar {
width: 6px;
}
.dl-list::-webkit-scrollbar-track,
#desktop-main-panel > .screen::-webkit-scrollbar-track {
background: transparent;
}
.dl-list::-webkit-scrollbar-thumb,
#desktop-main-panel > .screen::-webkit-scrollbar-thumb {
background: var(--ov-12);
border-radius: 3px;
}
.dl-list::-webkit-scrollbar-thumb:hover,
#desktop-main-panel > .screen::-webkit-scrollbar-thumb:hover {
background: var(--ov-20);
}
}
/* ══════════════════════════════════════════════════════════ */
/* ── MCP Servers ─────────────────────────────────── */
.mcp-card {
background: var(--card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 12px 14px;
margin-bottom: 8px;
cursor: pointer;
transition: border-color 0.15s;
}
.mcp-card:hover { border-color: var(--accent); }
.mcp-card.mcp-disabled { opacity: 0.5; }
.mcp-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.mcp-type-badge {
font-size: var(--fs-sm);
padding: 1px 6px;
border-radius: var(--r-xs);
background: var(--bg-secondary, #1a1a1a);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mcp-card-desc {
color: var(--text-secondary);
font-size: var(--fs-md);
line-height: 1.3;
}
.mcp-card-detail {
font-size: var(--fs-base);
margin-top: 4px;
font-family: monospace;
}
/* Project edit: "Дополнительно" accordion — hides all optional fields behind a
single tappable row so the create form shows only the required basics. */
.pe-advanced {
margin-top: 18px;
border-top: 1px solid var(--border);
}
.pe-advanced > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
padding: 14px 2px;
font-size: var(--fs-lg);
color: var(--text);
user-select: none;
-webkit-user-select: none;
}
.pe-advanced > summary::-webkit-details-marker { display: none; }
.pe-advanced > summary::before {
content: '\25B8'; /* ▸ */
color: var(--hint);
font-size: var(--fs-md);
transition: transform 0.15s;
}
.pe-advanced[open] > summary::before { transform: rotate(90deg); }
.pe-advanced > summary .pe-advanced-title { font-weight: 600; }
.pe-advanced > summary .hint { font-weight: 400; opacity: 0.6; font-size: var(--fs-md); }
.pe-advanced-body { padding-bottom: 4px; }
.pe-advanced-body > label:first-child { margin-top: 4px; }
/* Make sure the save CTA clears the mobile bottom tab bar on the edit screen. */
#screen-project-edit .form-body { padding-bottom: 88px; }
/* Project edit: MCP checkboxes */
.pe-section { margin-top: 16px; }
.pe-checkbox-label {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: var(--fs-md);
line-height: 1.4;
cursor: pointer;
}
.pe-checkbox-label.muted { opacity: 0.5; }
.pe-checkbox-label input[type="checkbox"] {
margin-top: 2px;
flex-shrink: 0;
}
/* Project edit: Skills */
.pe-skill-pkg {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
font-size: var(--fs-md);
}
.btn-sm {
font-size: var(--fs-base);
padding: 3px 10px;
border-radius: var(--r-sm);
border: 1px solid var(--border);
background: transparent;
color: var(--text-secondary);
cursor: pointer;
}
.btn-sm:hover { border-color: var(--accent); color: var(--text); }
.btn-sm.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-sm.btn-secondary { color: var(--accent); border-color: var(--accent); }
/* New task: MCP chips bar */
.nt-mcp-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 0 16px;
margin-top: 4px;
}
.nt-mcp-label {
font-size: var(--fs-base);
color: var(--text-secondary);
flex-shrink: 0;
}
/* ── Advanced SDK Settings (new task) ── */
.nt-advanced {
padding: 0 16px;
margin-top: 6px;
}
.nt-advanced-header {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--fs-base);
color: var(--hint);
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.nt-advanced-arrow {
font-size: var(--fs-xs);
display: inline-block;
transition: transform 0.15s;
}
.nt-advanced.expanded .nt-advanced-arrow {
transform: rotate(90deg);
}
.nt-advanced-body {
display: none;
padding: 8px 0 4px;
}
.nt-advanced.expanded .nt-advanced-body {
display: block;
}
.nt-adv-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.nt-adv-label {
font-size: var(--fs-base);
color: var(--text-secondary);
min-width: 90px;
flex-shrink: 0;
}
.nt-adv-input {
width: 100px;
padding: 5px 8px;
border-radius: var(--r-md);
border: 1.5px solid var(--ov-08);
background: var(--secondary-bg);
color: var(--text);
font-size: var(--fs-base);
font-family: inherit;
outline: none;
}
.nt-adv-input:focus {
border-color: var(--link);
}
.nt-adv-input::placeholder {
color: var(--hint);
}
/* Number input spinner styling */
.nt-adv-input::-webkit-inner-spin-button {
opacity: 0.5;
}
/* Settings: link row */
.st-row-link {
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
padding: 10px 0;
}
.st-row-link:hover .st-row-label { color: var(--accent); }
.st-row-arrow { color: var(--text-secondary); font-size: var(--fs-input); }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ── Skills Dropdown ─────────────────────────────── */
.skills-dropdown {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
max-height: 420px;
overflow-y: auto;
background: #1a1d2e;
border: 1px solid var(--border);
border-radius: var(--r-xl);
margin-bottom: 6px;
box-shadow: 0 -8px 30px var(--sh-strong);
z-index: 300;
}
.sd-section-label {
padding: 8px 14px 4px;
font-size: .7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .05em;
color: var(--text-muted);
opacity: .7;
}
.skills-dropdown-item {
padding: 9px 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: background .15s;
}
.skills-dropdown-item:hover,
.skills-dropdown-item.active {
background: var(--bg-hover);
}
.skills-dropdown-item.selected {
opacity: .6;
}
.skills-dropdown-item .sd-icon {
font-size: 1.1rem;
width: 24px;
text-align: center;
flex-shrink: 0;
}
.skills-dropdown-item .sd-body {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}
.skills-dropdown-item .sd-name {
font-weight: 600;
font-size: .88rem;
color: var(--text);
}
.skills-dropdown-item .sd-desc {
font-size: .76rem;
color: var(--text-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.skills-dropdown-item .sd-check {
color: var(--accent);
font-weight: 700;
font-size: .9rem;
margin-left: auto;
flex-shrink: 0;
}
.skills-dropdown-empty {
padding: 14px;
text-align: center;
color: var(--text-muted);
font-size: .85rem;
}
/* Skills bar (selected skill tags) */
.nt-skills-bar {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 16px;
}
.nt-skill-tag {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--accent);
color: var(--on-accent);
font-size: .78rem;
font-weight: 600;
padding: 3px 8px 3px 8px;
border-radius: var(--r-xl);
white-space: nowrap;
}
.nt-skill-tag-icon {
font-size: .85rem;
}
.nt-skill-tag-x {
cursor: pointer;
opacity: .7;
font-size: .85rem;
line-height: 1;
padding: 0 2px;
transition: opacity .15s;
}
.nt-skill-tag-x:hover { opacity: 1; }
/* Download button per file in list */
.fi-download {
margin-left: 8px;
background: transparent;
border: 1px solid var(--border);
color: var(--hint);
width: 28px;
height: 28px;
border-radius: var(--r-sm);
cursor: pointer;
font-size: var(--fs-lg);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.fi-download:hover { background: var(--violet-bg); color: var(--accent); border-color: var(--accent); }
/* Финальная сводка вложений в конце чата (агрегат всех файлов агента) */
.agent-attachments-summary {
/* Боковые поля как у живой строки: без них рамка блока шла от края до края
колонки и упиралась в список агентов (202.9). */
margin: 16px 12px 8px;
padding: 12px;
background: var(--ov-02);
border: 1px solid var(--border);
border-radius: var(--r-xl);
display: flex;
flex-direction: column;
gap: 8px;
}
.aas-title {
font-size: var(--fs-base);
font-weight: 600;
color: var(--hint);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.agent-attachments-summary .agent-attachment-card { margin: 0; max-width: 100%; }
/* Файлы прошлых ходов сессии — свёрнуты в строку, чтобы длинный чат не
превращался в стопку из 20-30 карточек (фаза 102) */
.aas-history { display: flex; flex-direction: column; gap: 8px; }
.aas-history-toggle {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
min-height: 36px; /* тап-таргет: 22px на телефоне вдвое ниже нормы */
padding: 8px 8px 8px 0;
background: none;
border: none;
border-top: 1px solid var(--border);
color: var(--hint);
font-size: var(--fs-md);
font-family: inherit;
text-align: left;
cursor: pointer;
}
/* Заголовка текущего хода нет → рамка кнопки шла второй волосяной линией
в 12px под рамкой самого блока. Паддинг симметричный (иначе подпись висит
выше оптического центра), но min-height НЕ трогаем: это самый частый кадр
фичи — сразу после нового промпта, — и тап-таргет тут нужен не меньше. */
.aas-history:first-child .aas-history-toggle {
border-top: none;
padding: 0 8px 0 0;
}
.aas-history-toggle:hover { color: var(--text); }
.aas-history-toggle .aas-chevron { flex: 0 0 auto; transition: transform 0.15s ease; }
.aas-history-toggle.open .aas-chevron { transform: rotate(90deg); }
/* 30 карточек — это ~2000px, две с половиной высоты телефона: раскрытая
история прокручивается внутри себя, а не уносит ленту чата. Высота
намеренно НЕ кратна шагу карточки (68px): половина следующей в срезе —
единственный намёк, что список продолжается (overlay-скроллбар на macOS
невидим). overscroll-behavior — чтобы докрутка не уносила ленту чата. */
.aas-history-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 298px;
overflow-y: auto;
overscroll-behavior: contain;
}
.aas-history-list::-webkit-scrollbar { width: 6px; }
.aas-history-list::-webkit-scrollbar-track { background: transparent; }
.aas-history-list::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 3px;
}
/* Без этого правила свёртка не работает вовсе: авторский display перебивает
UA-правило [hidden]{display:none}. */
.aas-history-list[hidden] { display: none; }
/* Attachment-card (claude.ai-style) для файлов созданных агентом */
/* 189.2: агент сам пометил итог как «без результата» (блок ```outcome). */
/* 189.3: вердикт code-reviewer'а (блок ```review в итоге субагента). */
/* 189.3: кнопки в шапке карточки проекта держатся вместе справа. */
.pc-btns { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.agent-review {
margin-top: 8px;
padding: 6px 10px;
border-left: 3px solid #5b8def;
background: rgba(91, 141, 239, 0.10);
border-radius: 6px;
font-size: 0.94em;
}
.agent-review-approved { border-left-color: #3bb273; background: rgba(59, 178, 115, 0.10); }
.agent-review-blocked { border-left-color: #d9534f; background: rgba(217, 83, 79, 0.10); }
.agent-outcome {
margin-top: 8px;
padding: 6px 10px;
border-left: 3px solid #e0a030;
background: rgba(224, 160, 48, 0.10);
border-radius: 6px;
font-size: 0.94em;
}
.agent-attachment-card {
display: flex;
align-items: center;
gap: 10px;
margin: 10px 0 4px;
padding: 10px 12px;
background: var(--card, var(--ov-04));
border: 1px solid var(--border);
border-radius: var(--r-xl);
max-width: 520px;
box-shadow: 0 2px 8px var(--sh-soft);
}
.aac-icon {
width: 38px; height: 38px;
background: var(--violet-bg);
color: var(--accent);
border-radius: var(--r-md);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.aac-info {
flex: 1; min-width: 0;
display: flex; flex-direction: column;
}
.aac-name {
font-weight: 600;
font-size: var(--fs-lg);
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.aac-meta {
font-size: var(--fs-base);
color: var(--hint);
margin-top: 2px;
}
/* Файл вне рабочей папки агента (/tmp, чужой сервер): штатные кнопки сняты
JS-ом, вместо них «Принести в проект» (фаза 110). Гасим текст и иконку
точечно, а не opacity всей карточки — иначе кнопка тоже поблёкла бы. */
.agent-attachment-card.aac-offlimits {
border-style: dashed;
box-shadow: none;
}
.agent-attachment-card.aac-offlimits .aac-name { color: var(--hint); }
.agent-attachment-card.aac-offlimits .aac-icon {
background: rgba(140,140,140,0.15);
color: var(--hint);
}
.aac-btn {
width: 34px; height: 34px;
border-radius: var(--r-md);
border: 1px solid var(--border);
background: var(--ov-04);
color: var(--text);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background 0.15s, transform 0.1s, border-color 0.15s;
}
.aac-btn:hover { background: var(--violet-bg); border-color: var(--violet-bg); }
.aac-btn:active { transform: scale(0.96); }
.aac-btn.aac-primary {
background: var(--accent);
border-color: transparent;
color: var(--on-accent);
}
.aac-btn.aac-primary:hover {
background: #7c6cff;
transform: translateY(-1px);
box-shadow: 0 4px 12px var(--accent-line);
}
.aac-prev.active {
background: var(--accent);
color: var(--on-accent);
border-color: transparent;
}
/* DEPRECATED — оставлен для совместимости со старыми событиями из БД */
.agent-file-dl {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 6px;
padding: 0;
border: 1px solid var(--border);
background: var(--violet-bg);
color: var(--accent);
border-radius: var(--r-xs);
font-size: var(--fs-base);
cursor: pointer;
vertical-align: middle;
transition: background 0.15s, transform 0.1s;
}
.agent-file-dl:hover {
background: var(--violet-bg);
transform: translateY(-1px);
}
.agent-file-dl:active { transform: translateY(0); }
/* Inline buttons next to agent-created files (Write/Edit/Bash) */
.agent-file-prev {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 4px;
padding: 0;
border: 1px solid var(--border);
background: var(--violet-bg);
color: var(--accent);
border-radius: var(--r-xs);
font-size: var(--fs-sm);
cursor: pointer;
vertical-align: middle;
transition: background 0.15s, transform 0.1s;
font-family: var(--font-mono, monospace);
}
.agent-file-prev:hover { background: var(--violet-bg); transform: translateY(-1px); }
.agent-file-prev.active { background: var(--accent); color: var(--on-accent); }
.agent-bash-artifacts {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
align-items: center;
}
.agent-bash-artifacts code {
font-size: var(--fs-base);
padding: 2px 6px;
background: var(--ov-04);
border-radius: var(--r-xs);
}
.agent-file-preview-box {
margin-top: 8px;
padding: 8px;
background: var(--sunk-25);
border: 1px solid var(--border);
border-radius: var(--r-md);
max-height: 320px;
overflow: auto;
}
.agent-file-preview-pre {
margin: 0;
font-size: var(--fs-base);
line-height: 1.45;
font-family: var(--font-mono, monospace);
white-space: pre;
color: var(--text);
}
.agent-file-preview-empty {
color: var(--hint);
font-size: var(--fs-md);
padding: 4px;
}
/* ── User attribution: avatar + ownership filter (Phase 1+2) ── */
.agent-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
flex: 0 0 auto;
object-fit: cover;
background: var(--secondary-bg);
display: inline-block;
vertical-align: middle;
}
.agent-avatar-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--fs-sm);
font-weight: 600;
color: #fff;
letter-spacing: 0.3px;
user-select: none;
}
/* ── Присутствие и непрочитанное (фаза 159, часть II) ──
Зелёная точка значит ровно одно: человек сейчас в Coder. Всё точечными
патчами DOM, без анимаций и тяжёлых теней (память coder-frontend-battery-drain). */
.agent-avatar { position: relative; }
.agent-avatar.is-online { box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 55%, transparent); }
/* картинка не умеет ::after — обводка выше и есть признак; у fallback-кружка
дополнительно точка, чтобы читалось и на цветном фоне */
.agent-avatar-fallback.is-online::after {
content: '';
position: absolute;
right: -1px;
bottom: -1px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success);
border: 2px solid var(--bg);
}
.presence-stack {
display: inline-flex;
align-items: center;
margin-left: 8px;
vertical-align: middle;
gap: 0;
}
.presence-stack .agent-avatar {
width: 18px;
height: 18px;
font-size: var(--fs-xs);
margin-left: -5px;
border: 1.5px solid var(--bg);
}
.presence-stack .agent-avatar:first-child { margin-left: 0; }
.presence-stack .presence-more {
font-size: var(--fs-xs);
font-weight: 600;
margin-left: 2px;
color: var(--hint);
}
.presence-stack .presence-eye {
font-size: var(--fs-sm);
margin-left: 5px;
color: var(--hint);
}
.typing-line {
font-size: var(--fs-base);
color: var(--hint);
padding: 2px 16px 4px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* «Есть непрочитанное» — фиолетовая точка у времени в заголовке. Синяя у
названия проекта путалась со статусом «В работе». */
.unread-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
vertical-align: middle;
background: var(--violet, #b39af5);
flex: 0 0 auto;
}
.agent-card-2l .ac-head .unread-dot { align-self: center; margin-right: -2px; }
.dl-item-2l .dl-item-head .unread-dot { margin: 6px -2px 0 0; }
.agent-card.agent-mine,
.agent-card.agent-foreign {
/* без боковой полосы: чужого агента выдают аватар автора и значок общего
проекта, а полоса на скруглённой карточке рисовалась дугой */
}
.history-item .agent-avatar { width: 24px; height: 24px; margin-right: 4px; }
.history-item .agent-avatar-fallback { font-size: var(--fs-xs); }
/* Признак общего проекта на карточке (фаза 159). Намеренно тихий: это
пояснение, а не статус — статус читается цветом карточки. */
/* Плашка про новое поведение общих проектов (фаза 159). Показывается один
раз тому, кто сам выдал доступ; живёт до нажатия «Понятно». */
.shared-notice {
display: flex;
align-items: flex-start;
gap: 12px;
margin: 8px 12px 12px;
padding: 12px 14px;
border-radius: var(--r-xl);
background: color-mix(in srgb, var(--accent) 12%, var(--bg));
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
font-size: var(--fs-lg);
line-height: 1.35;
}
.shared-notice-text { flex: 1; min-width: 0; }
.shared-notice-sub {
margin-top: 4px;
font-size: var(--fs-md);
color: var(--hint);
}
.shared-notice-ok {
flex: 0 0 auto;
min-height: 40px;
padding: 0 14px;
border: 0;
border-radius: var(--r-lg);
background: var(--accent);
color: var(--on-accent);
font-size: var(--fs-lg);
cursor: pointer;
}
@media (max-width: 600px) {
/* На телефоне кнопка уходит под текст — иначе она сжимает его до трёх слов. */
.shared-notice { flex-wrap: wrap; }
.shared-notice-ok { width: 100%; }
}
.agent-shared {
flex: 0 0 auto;
font-size: var(--fs-base);
opacity: 0.65;
line-height: 1;
}
/* Верхняя строка карточки после фазы 159 несёт на 18px больше (значок общего
проекта плюс отступ), и сжимался в ней ТОЛЬКО автор — у него единственного
стоял overflow:hidden. На 375px имя схлопывалось до «Ольг…». Место отдаёт
ярлык проекта: он читается и обрезанным («TEAMSH…»), а имя человека — нет.
Вес сжатия (2 против 1), а не min-width у автора: с min-width короткое имя
тянуло бы за собой пустую коробку, а вес делит нехватку между ярлыком и
именем пропорционально — оба остаются читаемыми. */
.agent-card .agent-project {
min-width: 0;
flex-shrink: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.agent-card .agent-author { flex-shrink: 1; }
/* Значок в истории стоит вплотную к названию проекта — там строка своя и
ничего не сжимает. */
.hi-project .agent-shared { margin-left: 4px; }
.agent-author {
font-size: var(--fs-sm);
color: var(--hint);
margin-left: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
display: inline-block;
vertical-align: middle;
}
.owner-filter {
display: inline-flex;
gap: 2px;
padding: 3px;
background: var(--secondary-bg);
border: 1px solid var(--border);
border-radius: var(--r-pill);
margin: 6px 16px 10px;
width: fit-content;
}
.owner-chip {
appearance: none;
background: transparent;
border: 0;
color: var(--hint);
font-size: var(--fs-md);
font-weight: 500;
padding: 6px 14px;
border-radius: var(--r-pill);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease, box-shadow 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.owner-chip:hover { color: var(--text); }
.owner-chip:active { transform: scale(0.97); }
.owner-chip.active {
background: var(--button, #2563eb);
color: var(--button-text, #fff);
box-shadow: 0 1px 4px var(--sh-soft);
}
.owner-chip-count {
font-size: var(--fs-sm);
font-weight: 600;
padding: 1px 7px;
border-radius: var(--r-pill);
background: rgba(127, 127, 127, 0.18);
color: inherit;
line-height: 1.4;
min-width: 18px;
text-align: center;
}
.owner-chip.active .owner-chip-count {
background: rgba(255, 255, 255, 0.22);
}
@media (max-width: 480px) {
.agent-avatar { width: 24px; height: 24px; }
.agent-avatar-fallback { font-size: var(--fs-xs); }
.agent-author { max-width: 90px; font-size: var(--fs-xs); }
.history-item .agent-avatar { width: 20px; height: 20px; }
}
/* Desktop list panel — compact avatar in dl-item rows */
#desktop-agent-list .dl-item .agent-avatar,
.dl-ghosts .dl-item .agent-avatar { width: 18px; height: 18px; flex: 0 0 18px; }
#desktop-agent-list .dl-item .agent-avatar-fallback,
.dl-ghosts .dl-item .agent-avatar-fallback { font-size: var(--fs-xs); letter-spacing: 0.2px; }
/* Автор и значок общего проекта переехали в нижнюю строку элемента списка
(см. _renderDlItem): там свободно, поэтому имя можно не душить до 60px. */
#desktop-agent-list .dl-item .agent-author,
.dl-ghosts .dl-item .agent-author { font-size: var(--fs-xs); max-width: 130px; margin-left: 2px; }
#desktop-agent-list .dl-item .dl-item-bottom .agent-shared,
.dl-ghosts .dl-item .dl-item-bottom .agent-shared { font-size: var(--fs-sm); }
/* Preview tabs: Превью / Код */
.agent-file-preview-tabs {
display: flex;
gap: 4px;
padding: 6px 8px;
border-bottom: 1px solid var(--border);
background: var(--ov-02);
}
.afp-tab {
padding: 4px 12px;
border-radius: var(--r-sm);
border: 1px solid transparent;
background: transparent;
color: var(--hint);
font-size: var(--fs-base);
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.afp-tab:hover { background: var(--violet-bg); color: var(--text); }
.afp-tab.active {
background: var(--accent);
color: var(--on-accent);
border-color: transparent;
}
.agent-file-preview-iframe {
width: 100%;
height: 360px;
border: none;
background: #fff;
border-radius: 0 0 8px 8px;
}
.agent-file-preview-svg {
padding: 12px;
background: #fff;
text-align: center;
}
.agent-file-preview-svg svg { max-width: 100%; height: auto; }
.agent-file-preview-svg img { max-width: 100%; height: auto; }
.agent-file-preview-md { padding: 12px; }
/* ── Rendered Markdown (.md preview; reusable .md-rendered) ─────────── */
.md-rendered {
color: var(--text);
font-size: var(--fs-lg);
line-height: 1.6;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.md-rendered > *:first-child { margin-top: 0; }
.md-rendered > *:last-child { margin-bottom: 0; }
.md-rendered h1, .md-rendered h2, .md-rendered h3,
.md-rendered h4, .md-rendered h5, .md-rendered h6 {
margin: 20px 0 10px;
line-height: 1.3;
font-weight: 650;
color: var(--text);
}
.md-rendered h1 { font-size: 1.55em; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.md-rendered h2 { font-size: 1.32em; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.md-rendered h3 { font-size: 1.15em; }
.md-rendered h4 { font-size: 1.02em; }
.md-rendered h5 { font-size: 0.95em; }
.md-rendered h6 { font-size: 0.9em; color: var(--hint); }
.md-rendered p { margin: 10px 0; }
.md-rendered a { color: var(--link); text-decoration: none; }
.md-rendered a:hover { text-decoration: underline; }
.md-rendered strong { font-weight: 680; }
.md-rendered em { font-style: italic; }
.md-rendered del { opacity: 0.65; }
.md-rendered ul, .md-rendered ol { margin: 10px 0; padding-left: 26px; }
.md-rendered li { margin: 4px 0; }
.md-rendered li > ul, .md-rendered li > ol { margin: 4px 0; }
.md-rendered li::marker { color: var(--hint); }
/* GFM task lists: drop the bullet, align the checkbox */
.md-rendered li:has(> input[type="checkbox"]) { list-style: none; margin-left: -20px; }
.md-rendered input[type="checkbox"] { margin-right: 7px; vertical-align: middle; }
/* Inline code; fenced blocks carry their own box (atom-one-dark когда подсвечены) */
.md-rendered code {
font-family: var(--font-mono, monospace);
font-size: 0.86em;
background: var(--secondary-bg);
padding: 1.5px 5px;
border-radius: var(--r-xs);
word-break: break-word;
}
.md-rendered pre { margin: 12px 0; border-radius: var(--radius-sm); overflow: auto; }
.md-rendered pre code {
display: block;
padding: 12px 14px;
background: var(--secondary-bg);
color: var(--text);
border-radius: var(--radius-sm);
font-size: var(--fs-base);
line-height: 1.5;
white-space: pre;
overflow-x: auto;
word-break: normal;
}
.md-rendered blockquote {
margin: 12px 0;
padding: 4px 14px;
border-left: 3px solid var(--link);
background: rgba(127, 127, 127, 0.06);
color: var(--hint);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.md-rendered blockquote p { margin: 6px 0; }
.md-rendered table {
border-collapse: collapse;
margin: 12px 0;
max-width: 100%;
display: block;
overflow-x: auto;
font-size: var(--fs-md);
}
.md-rendered th, .md-rendered td { border: 1px solid var(--border); padding: 6px 11px; text-align: left; }
.md-rendered th { background: var(--secondary-bg); font-weight: 650; }
.md-rendered tr:nth-child(even) td { background: rgba(127, 127, 127, 0.05); }
.md-rendered hr { margin: 18px 0; border: none; border-top: 1px solid var(--border); }
.md-rendered img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.md-rendered .md-fallback {
margin: 0;
white-space: pre-wrap;
word-break: break-word;
font-family: var(--font-mono, monospace);
font-size: var(--fs-base);
line-height: 1.5;
}
/* ── Side preview panel (Claude Code-style artifacts) ───────────── */
.afp-side-panel {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 600px;
max-width: calc(var(--vw) * 95);
background: var(--bg);
border-left: 1px solid var(--border);
box-shadow: -8px 0 24px var(--sh-mid);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
z-index: 8800;
overflow: hidden;
}
.afp-side-panel.open { transform: translateX(0); }
.afp-side-resize {
position: absolute;
left: -3px;
top: 0;
bottom: 0;
width: 6px;
cursor: col-resize;
background: transparent;
z-index: 2;
transition: background 0.15s;
}
.afp-side-resize:hover { background: var(--accent); }
.afp-side-header {
display: flex;
align-items: center;
gap: 10px;
/* env(safe-area-inset-top): на iPhone панель открывается на весь экран (top:0),
без этого крестик закрытия уходит под Dynamic Island / строку состояния и не нажимается */
padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
background: var(--card, var(--ov-02));
}
.afp-side-title {
flex: 1;
font-size: var(--fs-lg);
font-weight: 600;
color: var(--text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.afp-side-close,
.afp-side-collapse {
width: 30px; height: 30px;
border-radius: var(--r-sm);
border: none;
background: transparent;
color: var(--hint);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 0.15s, color 0.15s;
}
.afp-side-close:hover,
.afp-side-collapse:hover { background: var(--ov-06); color: var(--text); }
/* ── Свёрнутая панель: корешок у правого края ────────────────────── */
.afp-side-rail {
display: none;
position: absolute;
inset: 0;
flex-direction: column;
align-items: center;
gap: 10px;
padding: calc(14px + env(safe-area-inset-top, 0px)) 0 14px;
border: none;
background: var(--card, var(--ov-02));
color: var(--hint);
cursor: pointer;
z-index: 3;
transition: color 0.15s, background 0.15s;
}
.afp-side-rail:hover { color: var(--text); background: var(--ov-04); }
.afp-side-rail-ico { flex-shrink: 0; }
.afp-side-rail-label {
/* Подпись вдоль корешка: имя проекта/файла, чтобы свёрнутая полоска не была безымянной */
writing-mode: vertical-rl;
font-size: var(--fs-base);
font-weight: 600;
letter-spacing: 0.03em;
max-height: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.afp-side-panel.afp-collapsed .afp-side-rail { display: flex; }
.afp-side-panel.afp-collapsed .afp-side-header,
.afp-side-panel.afp-collapsed .afp-side-body,
.afp-side-panel.afp-collapsed .afp-side-resize { display: none; }
.afp-side-body {
flex: 1;
overflow: auto;
padding: 0;
}
/* Внутри side-panel preview занимает всё пространство */
.afp-side-body .agent-file-preview-tabs { padding: 10px 14px; }
.afp-side-body .agent-file-preview-iframe { height: 100%; min-height: calc(var(--vh) * 70); }
.afp-side-body .agent-file-preview-pre {
margin: 0;
padding: 16px;
font-size: var(--fs-md);
line-height: 1.5;
white-space: pre;
font-family: var(--font-mono, monospace);
background: transparent;
}
.afp-side-body .agent-file-preview-md { padding: 16px; }
.afp-side-body .agent-file-preview-svg { padding: 24px; min-height: calc(var(--vh) * 50); }
.afp-side-body .afp-iframe {
width: 100%;
height: 100%;
min-height: calc(var(--vh) * 80);
border: 0;
background: var(--secondary-bg);
}
.afp-side-body .afp-image-wrap {
display: flex;
align-items: flex-start;
justify-content: center;
padding: 16px;
}
.afp-side-body .afp-image-wrap img {
max-width: 100%;
height: auto;
border-radius: var(--r-sm);
box-shadow: 0 2px 12px var(--sh-mid);
}
@media (max-width: 768px) {
.afp-side-panel {
width: 100% !important;
max-width: 100%;
}
.afp-side-resize { display: none; }
}
/* Сворачивание в корешок — только там, где панель не занимает весь экран.
JS гейтит то же условие (_afpCanCollapse), CSS страхует от залипшего класса
при переходе с широкого окна на узкое. */
@media (max-width: 959px) {
.afp-side-collapse,
.afp-side-panel.afp-collapsed .afp-side-rail { display: none !important; }
.afp-side-panel.afp-collapsed .afp-side-header { display: flex; }
.afp-side-panel.afp-collapsed .afp-side-body { display: block; }
}
/* На десктопе превью-панель не наезжает на контент, а «отодвигает» весь
layout влево (как выезжающий sidebar). Ширина берётся из --afp-side-width,
которую JS держит в синхроне с реальной шириной панели (в т.ч. при ресайзе). */
@media (min-width: 960px) {
#desktop-layout {
transition: margin-right 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.side-preview-open #desktop-layout {
margin-right: var(--afp-side-width, 600px);
}
/* Во время перетаскивания ручки ресайза убираем transition, чтобы
layout следовал за курсором 1:1 без лага. */
body.afp-resizing #desktop-layout { transition: none; }
/* Панель больше не перекрывает контент → тень-разделитель уводим мягче. */
body.side-preview-open .afp-side-panel { box-shadow: -1px 0 0 var(--border); }
}
/* FAB помощника висел поверх открытой side-панели и закрывал дерево файлов. */
body.side-preview-open .fab { display: none; }
/* ── Project file explorer in side panel (фаза 71, .afx-) ───────── */
.afx-wrap {
display: flex;
height: 100%;
min-height: 0;
position: relative;
}
.afx-tree {
width: var(--afx-tree-w, 240px);
min-width: 0;
flex-shrink: 0;
display: flex;
flex-direction: column;
min-height: 0;
background: transparent;
border-right: 1px solid var(--border);
}
.afx-tree-head {
display: flex;
align-items: center;
gap: 4px;
padding: 7px 8px 7px 12px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.afx-tree-title {
flex: 1;
min-width: 0;
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--hint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.afx-hbtn {
min-width: 26px;
height: 26px;
padding: 0 5px;
border: none;
border-radius: var(--radius-sm, 6px);
background: transparent;
color: var(--hint);
font-size: var(--fs-lg);
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: background 0.15s, color 0.15s;
}
.afx-hbtn:hover { background: var(--ov-06); color: var(--text); }
.afx-hbtn.active { color: var(--link); background: var(--accent-bg); }
.afx-tree-body {
flex: 1;
overflow: auto;
padding: 4px 0;
}
.afx-row {
display: flex;
align-items: center;
gap: 6px;
height: 26px;
padding-right: 10px;
font-size: var(--fs-md);
color: var(--text);
cursor: pointer;
white-space: nowrap;
user-select: none;
-webkit-user-select: none;
}
.afx-row:hover { background: var(--ov-05); }
.afx-row.active {
background: var(--accent-bg);
box-shadow: inset 2px 0 0 var(--link);
}
.afx-chev {
width: 12px;
flex-shrink: 0;
text-align: center;
font-size: var(--fs-xs);
color: var(--hint);
transition: transform 0.15s;
}
.afx-dir.open .afx-chev { transform: rotate(90deg); }
.afx-ico { flex-shrink: 0; font-size: var(--fs-md); }
.afx-name {
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.afx-size {
margin-left: auto;
font-size: var(--fs-sm);
color: var(--hint);
flex-shrink: 0;
}
.afx-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--warning);
flex-shrink: 0;
}
.afx-hint {
color: var(--hint);
font-size: var(--fs-base);
cursor: default;
}
.afx-hint:hover { background: transparent; }
.afx-err { cursor: pointer; color: var(--destructive); }
.afx-err:hover { background: var(--ov-05); }
.afx-note {
padding: 16px 14px;
font-size: var(--fs-md);
line-height: 1.5;
color: var(--hint);
}
.afx-view {
flex: 1;
min-width: 0;
min-height: 0;
display: flex;
flex-direction: column;
}
/* ── Лента вкладок открытых файлов (фаза 128) ────────────────────── */
.afx-tabs {
display: flex;
align-items: stretch;
flex-shrink: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
border-bottom: 1px solid var(--border);
background: var(--ov-02);
}
.afx-tabs::-webkit-scrollbar { height: 4px; }
.afx-tabs::-webkit-scrollbar-thumb { background: var(--ov-10); border-radius: 2px; }
.afx-tab {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
max-width: 190px;
padding: 6px 6px 6px 10px;
border-right: 1px solid var(--border);
font-size: var(--fs-base);
color: var(--hint);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: background 0.12s, color 0.12s;
}
.afx-tab:hover { background: var(--ov-04); color: var(--text); }
.afx-tab.active {
background: var(--bg);
color: var(--text);
/* Активная вкладка «срастается» с содержимым — подчёркиванием сверху, как в IDE */
box-shadow: inset 0 2px 0 var(--link);
}
.afx-tab.preview .afx-tab-name { font-style: italic; }
.afx-tab-ico { flex-shrink: 0; font-size: var(--fs-base); }
.afx-tab-name { overflow: hidden; text-overflow: ellipsis; }
.afx-tab-close {
flex-shrink: 0;
width: 18px;
height: 18px;
border: none;
border-radius: var(--r-xs);
background: transparent;
color: inherit;
font-size: var(--fs-sm);
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity 0.12s, background 0.12s;
}
.afx-tab:hover .afx-tab-close,
.afx-tab.active .afx-tab-close { opacity: 0.7; }
.afx-tab-close:hover { opacity: 1; background: var(--ov-10); }
/* Несохранённые правки: точка вместо крестика, пока на вкладку не навели */
.afx-tab.dirty .afx-tab-close {
opacity: 1;
color: transparent;
background: radial-gradient(circle at 50% 50%, var(--warning) 3.5px, transparent 4px);
}
.afx-tab.dirty:hover .afx-tab-close,
.afx-tab.dirty .afx-tab-close:hover { color: inherit; background: var(--ov-10); }
.afx-tab-menu {
position: fixed;
z-index: 9200;
min-width: 176px;
padding: 4px;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 8px);
background: var(--card);
box-shadow: 0 8px 24px var(--sh-mid);
display: flex;
flex-direction: column;
}
.afx-tab-menu-item {
padding: 7px 10px;
border: none;
border-radius: var(--r-sm);
background: transparent;
color: var(--text);
font-size: var(--fs-md);
text-align: left;
cursor: pointer;
}
.afx-tab-menu-item:hover { background: var(--ov-06); }
.afx-view-head {
display: flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border-bottom: 1px solid var(--border);
background: var(--card, var(--ov-02));
flex-shrink: 0;
}
.afx-view-name {
/* Имя файла теперь на вкладке, здесь — путь внутри проекта (не дублируем) */
flex: 1;
min-width: 0;
font-size: var(--fs-base);
color: var(--hint);
direction: rtl; /* длинный путь режется слева, имя файла всегда видно */
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.afx-view-body {
flex: 1;
overflow: auto;
min-height: 0;
}
.afx-view-body .agent-file-preview-iframe { height: 100%; min-height: calc(var(--vh) * 60); }
.afx-view-body .agent-file-preview-pre {
margin: 0;
padding: 14px;
font-size: var(--fs-md);
line-height: 1.5;
white-space: pre;
font-family: var(--font-mono, monospace);
background: transparent;
}
.afx-view-body .agent-file-preview-md { padding: 14px; }
.afx-view-body .agent-file-preview-svg { padding: 20px; min-height: calc(var(--vh) * 40); }
.afx-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
min-height: 160px;
padding: 24px;
text-align: center;
color: var(--hint);
font-size: var(--fs-md);
}
.afx-empty-ico { font-size: 28px; opacity: 0.6; }
/* Плашка дозагрузки под содержимым большого файла (порционное чтение). */
.afx-more-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-top: 1px solid var(--border);
background: var(--bg-secondary);
position: sticky;
bottom: 0;
}
.afx-more-info {
flex: 1 1 100px;
min-width: 0;
font-size: var(--fs-base);
color: var(--hint);
}
.afx-more-bar .afx-btn { flex: 0 0 auto; }
/* Editor */
.afx-edit-wrap {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.afx-editor {
flex: 1;
width: 100%;
min-height: 0;
border: none;
outline: none;
resize: none;
padding: 12px 14px;
box-sizing: border-box;
background: var(--secondary-bg);
color: var(--text);
font-family: var(--font-mono, monospace);
font-size: var(--fs-md);
line-height: 1.5;
tab-size: 4;
-moz-tab-size: 4;
}
.afx-edit-bar {
position: sticky;
bottom: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-top: 1px solid var(--border);
background: var(--bg);
flex-shrink: 0;
}
.afx-edit-name {
margin-left: auto;
min-width: 0;
font-size: var(--fs-base);
color: var(--hint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.afx-btn {
padding: 6px 14px;
font-size: var(--fs-md);
border: 1px solid var(--ov-08);
border-radius: var(--radius-sm, 6px);
background: var(--secondary-bg);
color: var(--text);
cursor: pointer;
transition: background 0.15s;
}
.afx-btn:hover { background: var(--ov-08); }
.afx-btn:disabled { opacity: 0.6; cursor: default; }
.afx-btn-primary {
background: var(--button);
border-color: transparent;
color: var(--button-text);
font-weight: 600;
}
.afx-btn-primary:hover { background: var(--button); filter: brightness(1.1); }
/* Back button lives only in narrow single-pane mode */
.afx-back {
display: none;
width: auto;
font-size: var(--fs-md);
gap: 4px;
white-space: nowrap;
}
/* ── Свёрнутая колонка дерева + ручка ширины ─────────────────────── */
.afx-tree-resize {
width: 6px;
margin: 0 -3px 0 -3px; /* тянущаяся зона шире видимой границы, но layout не двигает */
flex-shrink: 0;
cursor: col-resize;
background: transparent;
z-index: 3;
transition: background 0.15s;
}
.afx-tree-resize:hover { background: var(--accent); }
.afx-rail {
display: none;
width: 30px;
flex-shrink: 0;
flex-direction: column;
align-items: center;
padding: 7px 0;
border-right: 1px solid var(--border);
}
.afx-wrap.afx-tree-hidden .afx-rail { display: flex; }
.afx-wrap.afx-tree-hidden .afx-tree,
.afx-wrap.afx-tree-hidden .afx-tree-resize { display: none; }
.afx-rail-label {
writing-mode: vertical-rl;
margin-top: 8px;
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--hint);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Narrow mode: tree takes the full panel, the open file overlays it */
.afx-wrap.afx-narrow .afx-tree { width: 100%; border-right: none; }
.afx-wrap.afx-narrow .afx-tree-resize,
.afx-wrap.afx-narrow .afx-tree-fold,
.afx-wrap.afx-narrow .afx-rail { display: none; }
.afx-wrap.afx-narrow .afx-view { display: none; }
.afx-wrap.afx-narrow.afx-show-view .afx-view {
display: flex;
position: absolute;
inset: 0;
background: var(--bg);
z-index: 2;
}
.afx-wrap.afx-narrow .afx-back { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
.afx-chev, .afx-hbtn, .afx-btn { transition: none; }
}
/* ── Admin Stats ─────────────────────────────── */
.admin-stats-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.admin-stats-table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-md);
white-space: nowrap;
}
.admin-stats-table th,
.admin-stats-table td {
padding: 8px 10px;
text-align: left;
border-bottom: 1px solid var(--section-bg, var(--ov-06));
}
.admin-stats-table th {
color: var(--hint);
font-weight: 500;
font-size: var(--fs-sm);
text-transform: uppercase;
letter-spacing: .5px;
}
.admin-stats-table td {
color: var(--text);
}
.admin-stats-table tr:hover td {
background: var(--section-bg, var(--ov-04));
}
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 4px;
}
.status-dot.status-completed { background: var(--success); }
.status-dot.status-failed { background: #f44336; }
.status-dot.status-running { background: #2196f3; }
.status-dot.status-stopped { background: #9e9e9e; }
/* ── Local Workspace screen ──────────────────────── */
#screen-local-fs .form-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.lfs-header-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.lfs-intro { flex: 1; font-size: var(--fs-md); color: var(--hint-color); line-height: 1.45; min-width: 200px; }
.lfs-btn-add { white-space: nowrap; }
.lfs-pwa-hint {
background: var(--warning-bg);
border: 1px solid var(--warning-line);
border-radius: var(--r-md);
padding: 10px 12px;
font-size: var(--fs-base);
color: #e9b34a;
}
.lfs-folders { display: flex; flex-direction: column; gap: 10px; }
.lfs-launched {
background: rgba(33, 150, 243, 0.08);
border: 1px solid rgba(33, 150, 243, 0.25);
border-radius: var(--radius);
padding: 10px 12px;
margin-bottom: 10px;
display: flex; flex-direction: column; gap: 8px;
}
.lfs-launched-header {
display: flex; align-items: center; justify-content: space-between;
font-size: var(--fs-md); font-weight: 600; color: #7bb8ff;
}
.lfs-launched-header .btn-secondary {
background: var(--ov-08); color: var(--text);
border: 0; padding: 4px 10px; font-size: var(--fs-base); border-radius: var(--r-sm); cursor: pointer;
}
.lfs-launched-list { display: flex; flex-direction: column; gap: 6px; }
.lfs-launched-item {
display: flex; align-items: center; gap: 8px;
padding: 6px 8px;
background: var(--sunk-20);
border-radius: var(--r-sm);
font-size: var(--fs-md);
}
.lfs-launched-name { flex: 1; word-break: break-all; }
.lfs-launched-time { font-size: var(--fs-sm); color: var(--hint-color); }
.lfs-launched-btn { padding: 4px 10px; font-size: var(--fs-base); border-radius: var(--r-sm); border: 0; cursor: pointer; }
.lfs-empty {
text-align: center; padding: 28px 16px;
background: var(--secondary-bg);
border: 1px dashed var(--ov-10);
border-radius: var(--radius);
}
.lfs-empty-icon { font-size: 32px; margin-bottom: 6px; }
.lfs-empty p { margin: 4px 0; }
.lfs-empty-hint { font-size: var(--fs-base); color: var(--hint-color); }
.lfs-card {
background: var(--secondary-bg);
border: 1px solid var(--ov-06);
border-radius: var(--radius);
padding: 12px 14px;
display: flex; flex-direction: column; gap: 8px;
}
.lfs-card-active {
border-color: var(--success-line);
box-shadow: 0 0 0 1px var(--success-line);
}
.lfs-card-top { display: flex; align-items: center; gap: 8px; }
.lfs-card-icon { font-size: var(--fs-2xl); }
.lfs-card-name { font-weight: 600; font-size: var(--fs-lg); flex: 1; word-break: break-all; }
.lfs-badge-active {
background: var(--success-line);
color: var(--success);
font-size: var(--fs-sm);
padding: 2px 8px;
border-radius: var(--r-lg);
font-weight: 600;
}
.lfs-card-meta { font-size: var(--fs-sm); color: var(--hint-color); }
.lfs-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lfs-card-actions .btn-primary,
.lfs-card-actions .btn-secondary,
.lfs-card-actions .btn-danger {
padding: 6px 12px;
font-size: var(--fs-md);
border-radius: var(--r-sm);
cursor: pointer;
border: 0;
}
.lfs-card-actions .btn-secondary {
background: var(--ov-08);
color: var(--text);
}
.lfs-btn-remove { padding: 6px 10px; }
.lfs-btn-launch { font-weight: 600; }
.lfs-footer-note {
font-size: var(--fs-sm);
color: var(--hint-color);
padding: 8px 4px;
line-height: 1.5;
}
.lfs-unsupported {
background: var(--secondary-bg);
border-radius: var(--radius);
padding: 24px;
text-align: center;
}
.lfs-unsupported-icon { font-size: 36px; margin-bottom: 8px; }
.lfs-unsupported h3 { margin: 4px 0 12px; }
.lfs-unsupported p { font-size: var(--fs-md); color: var(--hint-color); line-height: 1.5; }
.lfs-tips {
text-align: left;
margin: 14px auto;
max-width: 460px;
font-size: var(--fs-md);
line-height: 1.6;
color: var(--hint-color);
}
.lfs-fallback { margin-top: 14px; font-size: var(--fs-md); }
.lfs-fallback a { color: var(--link); text-decoration: underline; }
/* New-task screen: badge об активной локальной папке */
.nt-local-ws-badge {
display: flex; align-items: center; gap: 8px;
background: var(--success-bg);
border: 1px solid var(--success-line);
border-radius: var(--r-md);
padding: 8px 12px;
margin: 0 0 10px;
font-size: var(--fs-md);
color: var(--success);
}
.nt-lws-text { flex: 1; }
.nt-lws-text b { color: #fff; font-weight: 600; }
.nt-lws-clear {
background: transparent; border: 0; color: var(--success);
font-size: var(--fs-2xl); line-height: 1; cursor: pointer;
padding: 0 4px;
}
.nt-lws-clear:hover { color: #fff; }
/* ── Project source toggle (server path / local folder) ──────────── */
/* Source selector — equal-width segmented cards (flex:1) with real theme vars.
The old rules referenced undefined --bg-secondary/--accent/--text-secondary,
so cards rendered transparent + uneven width + a stray currentcolor border. */
.pe-source-toggle { display: flex; gap: 8px; margin-bottom: 8px; align-items: stretch; }
/* Селектор намеренно специфичнее `.form-body label` (0,1,1), иначе то правило
навязывает карточкам display:block + вертикальные margin и ломает равную высоту. */
.pe-source-toggle .pe-source-opt {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 6px;
margin: 0;
min-height: 62px;
padding: 10px 8px;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--secondary-bg);
color: var(--text);
font-size: var(--fs-md);
font-weight: 500;
line-height: 1.25;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.pe-source-opt input[type="radio"] { margin: 0; accent-color: var(--link); }
.pe-source-opt:has(input:checked) {
border-color: var(--link);
background: var(--accent-bg);
}
.pe-source-hint { color: var(--hint); font-size: var(--fs-base); line-height: 1.4; margin-bottom: 8px; }
.pe-local-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pe-local-status { flex: 1; padding: 8px 12px; border-radius: var(--r-md);
background: var(--bg-secondary); color: var(--text-secondary); font-size: var(--fs-md); }
.pe-local-status.lfs-status-ok { color: var(--success); }
.pe-local-warning { color: var(--warning); font-size: var(--fs-md); padding: 8px 12px;
border: 1px solid var(--warning-line); border-radius: var(--r-md); background: var(--warning-bg); }
/* ── Local-workspace badges on project cards ─────────────────────── */
.nt-pc-local, .pc-local-badge { display: inline-flex; align-items: center;
gap: 4px; font-size: var(--fs-sm); padding: 2px 6px; border-radius: var(--r-xs);
background: var(--bg-secondary); color: var(--text-secondary); margin-left: 6px; }
.pc-local-badge.lfs-ok, .nt-pc-local.lfs-ok { color: var(--success); background: var(--success-bg); }
.pc-local-badge.lfs-warn, .nt-pc-local.lfs-warn { color: var(--warning); background: var(--warning-bg); }
.pc-local-badge.lfs-bad, .nt-pc-local.lfs-bad { color: var(--destructive); background: var(--danger-bg); }
/* ── Multi-runner badge on project cards ─────────────────────── */
.pc-runner-badge { display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-sm); padding: 2px 6px; border-radius: var(--r-xs); margin-left: 6px;
background: var(--bg-secondary); color: var(--text-secondary); cursor: default; }
.pc-runner-badge.rb-ok { color: var(--success); background: var(--success-bg); }
.pc-runner-badge.rb-bad { color: var(--text-secondary); background: var(--bg-secondary); }
/* ── Доступ: «shared with me» badge + collaborators section (phase 50) ── */
/* --card/--separator aren't in :root (Telegram doesn't inject them), so new
rules carry inline fallbacks, mirroring .cx-tracker. */
.pc-shared-badge { display: inline-flex; align-items: center; gap: 4px;
font-size: var(--fs-sm); padding: 2px 6px; border-radius: var(--r-xs); margin-left: 6px;
color: var(--link); background: var(--accent-bg-strong); cursor: default; }
.pe-share-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.pe-share-row { display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--r-lg);
background: var(--secondary-bg);
border: 1px solid var(--separator, var(--border, var(--ov-08))); }
.pe-share-avatar { width: 32px; height: 32px; border-radius: 50%;
flex: 0 0 32px; object-fit: cover; }
.pe-share-avatar-fb { display: inline-flex; align-items: center;
justify-content: center; color: #fff; font-size: var(--fs-md); font-weight: 600; }
.pe-share-meta { flex: 1; min-width: 0; }
.pe-share-name { font-size: var(--fs-lg); font-weight: 500; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-share-sub { font-size: var(--fs-base); color: var(--hint, #8a8a9a);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-share-remove { flex: 0 0 auto; color: var(--destructive); }
.pe-share-warn { margin-top: 8px; font-size: var(--fs-base); line-height: 1.45;
color: var(--warning); }
/* ── Project secrets (phase 93) ─────────────────────────────── */
.pe-secrets-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.pe-secret-row { display: flex; align-items: center; gap: 10px;
padding: 6px 10px; border-radius: var(--radius-sm, 8px);
background: var(--secondary-bg, var(--ov-04)); }
.pe-secret-row-name { font-size: var(--fs-md); overflow-wrap: anywhere; }
.pe-secret-row .hint { flex: 1; }
.pe-secret-del { flex: 0 0 auto; }
.pe-secret-add { display: flex; gap: 8px; margin-top: 10px; align-items: center;
flex-wrap: wrap; }
.pe-secret-add .btn-secondary { width: auto; margin-top: 0; flex: 0 0 auto; }
.pe-secret-name { flex: 1 1 38%; min-width: 0; }
.pe-secret-value { flex: 1 1 auto; min-width: 0; }
/* On narrow phones (Android ~360px) name+value+button in one row squeeze the
value input until its placeholder truncates — give value its own full row. */
@media (max-width: 430px) {
.pe-secret-add .pe-secret-value { flex: 1 1 100%; order: 3; }
}
/* ── Активные сессии (фаза 115.2) ──────────────────────────── */
.st-sessions-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.st-session-row { display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--radius-sm, 8px);
background: var(--secondary-bg, var(--ov-04)); }
.st-session-main { flex: 1; min-width: 0; font-size: var(--fs-lg); }
.st-session-main .hint { font-size: var(--fs-base); color: var(--hint); }
/* ── Опубликованные страницы (фаза 115) ────────────────────── */
.pe-publish-me { display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
font-size: var(--fs-md); color: var(--hint); }
.pe-publish-list { display: flex; flex-direction: column; gap: 8px; }
.pe-publish-row { display: flex; align-items: flex-start; gap: 10px;
padding: 8px 10px; border-radius: var(--radius-sm, 8px);
background: var(--secondary-bg, var(--ov-04)); }
.pe-publish-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pe-publish-title { font-size: var(--fs-lg); font-weight: 500; }
/* Мета-строка карточки наследовала базовый кегль и цвет: на мобильном занимала
три строки крупным текстом и спорила яркостью с названием публикации. */
.pe-publish-main .hint { font-size: var(--fs-base); line-height: 1.35; color: var(--hint); }
/* Ссылка длинная и её надо уметь прочитать глазами, поэтому переносим по
любому символу, а не прячем в многоточие. */
.pe-publish-url { font-size: var(--fs-base); color: var(--link); overflow-wrap: anywhere; }
.pe-publish-err { font-size: var(--fs-base); color: var(--destructive); }
.pe-publish-actions { flex: 0 0 auto; display: flex; gap: 4px; }
.pe-publish-add { display: flex; gap: 8px; margin-top: 10px; align-items: center;
flex-wrap: wrap; }
.pe-publish-add .btn-secondary { width: auto; margin-top: 0; flex: 0 0 auto; }
.pe-publish-dir { flex: 1 1 40%; min-width: 0; }
.pe-publish-access { flex: 1 1 auto; min-width: 0; }
@media (max-width: 430px) {
.pe-publish-add .pe-publish-access { flex: 1 1 100%; order: 3; }
}
/* ── Project invites (phase 55) ─────────────────────────────── */
.pe-invite-block { margin-top: 18px; padding-top: 14px;
border-top: 1px solid var(--separator, var(--border, var(--ov-08))); }
.pe-invite-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
/* Пустое состояние/загрузка в обоих списках: глобального правила .hint нет
(оно везде скоупится по контейнеру), и подсказка рисовалась основным
текстом 17px — тяжелее самих строк списка. */
.pe-share-list > .hint, .pe-invite-list > .hint {
font-size: var(--fs-md); line-height: 1.35; color: var(--hint, #8a8a9a); }
.pe-invite-row { display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--r-lg);
background: var(--secondary-bg);
border: 1px solid var(--separator, var(--border, var(--ov-08))); }
.pe-invite-meta { flex: 1; min-width: 0; }
.pe-invite-who { font-size: var(--fs-lg); font-weight: 500; color: var(--text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-invite-sub { font-size: var(--fs-base); color: var(--hint, #8a8a9a); }
.pe-invite-revoke { flex: 0 0 auto; color: var(--destructive); }
.pe-invite-addr-row { display: flex; gap: 8px; margin-top: 10px; align-items: center;
/* Три элемента в ряду (поле + две кнопки) на 375px не помещаются:
кнопки переносятся под поле, а не сжимают его до нечитаемого. */
flex-wrap: wrap; }
/* ЕДИНСТВЕННОЕ правило flex для поля: второе объявление ниже по файлу
перебивало basis и возвращало поле в одну строку с кнопками (122px на 375). */
.pe-invite-addr { flex: 1 1 100%; min-width: 0; min-height: 40px; }
.pe-invite-addr-row .btn-secondary { width: auto; margin-top: 0; flex: 0 0 auto;
/* display:block у .btn-secondary даёт разную высоту у «Пригласить» (43px)
и «🔗 Ссылка» (46px) — эмодзи тянет строку. inline-flex равняет обе. */
display: inline-flex; align-items: center; justify-content: center;
min-height: 40px; line-height: 1.2; }
.pe-invite-result { display: flex; gap: 8px; margin-top: 10px; align-items: center;
/* Как и ряд приглашения: длинный домен стенда иначе поджимает поле
со ссылкой, и «Копировать» встаёт впритык. */
flex-wrap: wrap; }
.pe-invite-result .btn-secondary { width: auto; margin-top: 0; flex: 0 0 auto; }
.pe-invite-link-val { flex: 1 1 100%; min-width: 0; min-height: 40px;
font-size: var(--fs-base); color: var(--text); }
/* Pending-invite banner on the dashboard (path B) */
.invite-banner { display: flex; align-items: center; gap: 10px;
margin: 10px 12px; padding: 10px 12px; border-radius: var(--r-lg);
background: var(--accent-bg);
border: 1px solid var(--link); }
.invite-banner-text { flex: 1; min-width: 0; font-size: var(--fs-md); color: var(--text); }
.invite-banner-open { flex: 0 0 auto; padding: 6px 12px; border-radius: var(--r-md);
border: none; cursor: pointer; font-size: var(--fs-md); font-weight: 600;
background: var(--link); color: #fff; }
.invite-banner-x { flex: 0 0 auto; background: none; border: none; cursor: pointer;
color: var(--hint, #8a8a9a); font-size: var(--fs-xl); padding: 4px; line-height: 1; }
/* Standalone fullscreen accept screen — works before login (a brand-new invitee)
and after (an authenticated user). Backdrop + card, like a modal. */
.invite-screen { position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: calc(24px + env(safe-area-inset-top, 0px)) 24px
calc(24px + env(safe-area-inset-bottom, 0px));
background: rgba(0,0,0,0.6); }
.invite-card { width: 100%; max-width: 420px; text-align: center;
padding: 28px 22px; border-radius: var(--r-2xl);
background: var(--secondary-bg);
border: 1px solid var(--separator, var(--border, var(--ov-08))); }
.invite-icon { font-size: 40px; line-height: 1; margin-bottom: 8px; }
.invite-card h2 { margin: 0 0 12px; font-size: var(--fs-3xl); color: var(--text); }
.invite-project { font-size: var(--fs-2xl); font-weight: 600; color: var(--link);
margin-bottom: 4px; word-break: break-word; }
.invite-inviter { font-size: var(--fs-md); color: var(--hint, #8a8a9a); margin-bottom: 14px; }
.invite-note { font-size: var(--fs-md); line-height: 1.5; color: var(--hint, #8a8a9a); margin: 0 0 18px; }
.invite-msg { font-size: var(--fs-md); color: var(--destructive); margin-bottom: 12px; }
.invite-card .btn-primary { margin-bottom: 8px; }
/* ── Runners screen ─────────────────────────────────────────── */
/* ── Входящие (фаза 161) ── */
.header-bell-btn { position: relative; }
.header .ws-mount-header + .header-bell-btn { margin-left: 0; }
/* число — «ждут действия», точка — «есть что посмотреть» */
.inbox-badge.is-num { background: var(--warning); }
.inbox-badge.is-dot { min-width: 8px; width: 8px; height: 8px; padding: 0; border-radius: 50%;
background: var(--link); top: 6px; right: 8px; }
#mobile-tab-bar .tab-btn .inbox-badge { top: 4px; right: calc(50% - 22px); }
/* Кнопка в шапке телефона — ровно по иконке (18px + padding 4px), поэтому бейдж
с дефолтными top:4/right:6 ложился точно на колокольчик и закрывал его
целиком: при непустых входящих человек видел только оранжевый кружок.
Выносим бейдж в правый верхний угол за контур иконки и уменьшаем. */
.header-bell-btn .inbox-badge { top: -3px; right: -4px; min-width: 14px; height: 14px;
line-height: 14px; font-size: 9.5px; padding: 0 3.5px; }
.header-bell-btn .inbox-badge.is-dot { top: -1px; right: -1px; min-width: 8px; width: 8px;
height: 8px; padding: 0; }
.inbox-section { margin-bottom: 18px; }
.inbox-section > label { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .4px;
text-transform: uppercase; color: var(--hint); margin-bottom: 8px; }
.inbox-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-xl);
border: 1px solid var(--separator); background: var(--bg-secondary); margin-bottom: 8px; cursor: pointer; }
.inbox-item.static { cursor: default; }
.inbox-item .ii-body { flex: 1 1 200px; min-width: 0; }
.inbox-item .ii-title { font-size: var(--fs-lg); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item .ii-sub { font-size: var(--fs-base); color: var(--hint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-item .ii-sub .dl-resolved-by { max-width: none; }
.inbox-item .ii-icon { font-size: var(--fs-2xl); flex: 0 0 auto; width: 28px; text-align: center; }
.form-body .inbox-item .btn-primary, .form-body .inbox-item .btn-secondary { width: auto; flex: 0 0 auto; margin: 0; padding: 8px 12px; font-size: var(--fs-md); }
.inbox-item.need-question { border-color: var(--link); }
.inbox-item.need-colleague { border-color: var(--warning); }
.inbox-empty { text-align: center; color: var(--hint); padding: 48px 20px; font-size: var(--fs-lg); line-height: 1.5; }
.inbox-empty .icon { font-size: 40px; margin-bottom: 10px; }
/* ── Команды (фаза 159, часть II, П2) ── */
/* Карточка адреса для приглашений: всегда тёмная, независимо от темы —
это «визитка», её ищут глазами. Подпись капителью, значение моноширинное. */
.form-body .id-card { display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 22px 26px; margin: 4px 0 18px; border-radius: var(--r-2xl);
background: #0e1014; color: #fff; border: 1px solid rgba(255,255,255,0.06);
box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset; }
.form-body .id-card:empty { display: none; }
.id-card-body { min-width: 0; flex: 1 1 auto; }
.id-card-label { font-size: var(--fs-sm); letter-spacing: .14em; text-transform: uppercase;
color: rgba(255,255,255,0.55); margin-bottom: 8px; }
.id-card-value { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, "JetBrains Mono", "Roboto Mono", Consolas, monospace;
font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em;
color: #fff; overflow-wrap: anywhere; user-select: all; }
.id-card-text { font-size: var(--fs-lg); line-height: 1.5; color: rgba(255,255,255,0.72); margin-top: 12px; max-width: 640px; }
.form-body .id-card-btn { flex: 0 0 auto; width: auto; margin: 0; padding: 12px 20px; border-radius: var(--r-pill);
border: none; cursor: pointer; font-size: var(--fs-lg); font-weight: 600;
background: var(--link, #4d7cf3); color: #fff; }
.form-body .id-card-btn:hover { filter: brightness(1.08); }
@media (max-width: 600px) {
.form-body .id-card { flex-direction: column; align-items: stretch; padding: 18px; gap: 14px; }
.id-card-value { font-size: 24px; }
.form-body .id-card-btn { width: 100%; }
}
/* Приглашён, но ещё не принял: пунктирный аватар, как «ещё не с нами» */
.team-invite-pending .pe-share-avatar { outline: 1.5px dashed var(--hint); outline-offset: 2px; opacity: .85; }
/* Строка создания: `.btn-primary` в форме по умолчанию во всю ширину (0,1,1),
а поле от этого сжимается до полоски. Перебиваем через `.form-body`. */
.form-body .team-create-row { display: flex; gap: 8px; margin-bottom: 12px; }
.form-body .team-create-row .team-create-name { flex: 1 1 auto; width: auto; min-width: 0;
padding: 11px 12px; border-radius: var(--r-lg); border: 1px solid var(--border);
background: var(--bg-secondary); color: var(--text); font-size: var(--fs-xl); margin: 0; }
.form-body .team-create-row .btn-primary { width: auto; flex: 0 0 auto; margin: 0; padding: 11px 18px; }
/* Пустое состояние: кнопка по содержимому, а не на всю ширину экрана 1280 */
.form-body .teams-list .empty-state .btn-primary { width: auto; display: inline-block; padding: 11px 24px; margin: 6px 0 0; }
.form-body .teams-list .empty-state p { max-width: 560px; margin: 6px auto; }
/* телефон: последняя карточка не должна уходить под таб-бар */
@media (max-width: 959px) {
#screen-learn .form-body, #screen-inbox .form-body, #screen-teams .form-body, #screen-team-edit .form-body { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
}
.learn-intro { font-size: var(--fs-md); line-height: 1.5; color: var(--hint); margin-bottom: 14px; }
.learn-list { display: flex; flex-direction: column; gap: 12px; }
.learn-card { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 14px 16px; background: var(--bg-secondary); }
.learn-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.learn-card-title { font-size: var(--fs-xl); font-weight: 600; color: var(--text); }
.learn-card-sub { font-size: var(--fs-md); line-height: 1.5; color: var(--text); opacity: .85; margin-top: 6px; }
.learn-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.learn-card-meta { font-size: var(--fs-base); color: var(--hint); }
.learn-card.is-locked { opacity: .7; }
.learn-card.is-locked .btn-primary[disabled] { opacity: .5; cursor: default; }
.form-body .learn-card .btn-primary.learn-start { width: auto; padding: 9px 18px; font-size: var(--fs-lg); flex: 0 0 auto; }
.teams-list { display: flex; flex-direction: column; gap: 10px; }
.team-card { border: 1px solid var(--border); border-radius: var(--r-xl); padding: 14px 16px;
background: var(--bg-secondary); cursor: pointer; transition: border-color .15s; }
.team-card:hover { border-color: var(--accent-line); }
.team-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.team-card-name { font-size: var(--fs-xl); font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-card-sub { font-size: var(--fs-md); color: var(--hint); margin-top: 4px; }
.team-role { font-size: var(--fs-sm); padding: 2px 8px; border-radius: var(--r-sm); flex: 0 0 auto;
color: var(--hint); background: var(--sunk-25, rgba(127,127,127,0.12)); }
.team-role.owner { color: var(--link); background: var(--accent-bg-strong); }
.team-role.pending { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
.team-member-menu { flex: 0 0 auto; width: 32px; height: 32px; font-size: var(--fs-3xl); line-height: 1; color: var(--hint); border-radius: var(--r-md); }
.team-member-menu:hover, .team-member-menu.is-open { color: var(--text); background: var(--ov-05); }
.agent-menu.team-menu { min-width: 220px; }
.agent-menu.team-menu .agent-menu-item.danger { color: var(--destructive); }
.team-hint { margin-top: 14px; font-size: var(--fs-base); line-height: 1.5; }
.team-section { margin-top: 18px; }
.team-section > label { display: block; font-size: var(--fs-sm); font-weight: 600; letter-spacing: .4px;
text-transform: uppercase; color: var(--hint); margin-bottom: 8px; }
.team-member-row .pe-share-you { font-size: var(--fs-sm); color: var(--hint); margin-left: 6px; }
.team-member-row .pe-share-avatar.is-online { box-shadow: 0 0 0 2px color-mix(in srgb, var(--success) 55%, transparent); }
.team-invite-pending { opacity: .85; }
.team-invite-pending .pe-share-sub { color: var(--warning); }
.team-invite-row { display: flex; gap: 8px; margin-top: 10px; }
/* Глобальное правило формы растягивает кнопки на всю ширину — в строке поиска
и передачи кнопка обязана оставаться по содержимому, а поле — тянуться. */
.team-invite-row .btn-secondary, .pe-team-attach .btn-secondary,
.pe-team-row .btn-secondary, .team-found .btn-primary {
width: auto; flex: 0 0 auto; margin: 0; padding: 8px 12px; font-size: var(--fs-md); }
.team-actions .hint { font-size: var(--fs-base); line-height: 1.45; }
.team-invite-row .team-invite-input, .pe-team-attach select { flex: 1 1 auto; width: auto; }
.team-invite-input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: var(--r-lg);
border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text); font-size: var(--fs-xl); }
.team-found { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 8px 10px;
border-radius: var(--r-lg); border: 1px dashed var(--link); }
.team-found .btn-primary { padding: 8px 12px; font-size: var(--fs-md); }
/* Специфичность: строка проекта —