/* ControlDesk — раздел «Приложения». Только токены из tokens.css. */

#view-apps { gap: var(--sp-3); }
.apps-home, .apps-app { display: flex; flex-direction: column; gap: var(--sp-3); }

/* баннер состояния связи / блокировки / сброса */
.apps-banner { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s); font-weight: 600; }
.apps-banner[data-kind="err"] { background: var(--danger-soft); color: var(--danger); }
.apps-banner span:not(.spinner) { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.apps-head { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); }
.apps-head h2 { flex: 1; min-width: 0; font-size: var(--fs-l); }
.apps-sub { font-size: var(--fs-s); color: var(--text-2); overflow-wrap: anywhere; }

/* карточки приложений */
.apps-card { gap: var(--sp-2); }
.apps-card-head { display: flex; align-items: center; gap: var(--sp-3); }
.apps-card-head .ico { color: var(--accent); width: 28px; height: 28px; }
.apps-card-name { flex: 1; min-width: 0; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-m); }
.apps-caps { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.badge-ok { background: var(--accent-soft); color: var(--accent); }
.badge-err { background: var(--danger-soft); color: var(--danger); }
.apps-limited { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s); }
.apps-limited .ico { margin-top: 1px; }
.apps-limited span { min-width: 0; overflow-wrap: anywhere; }

/* строка «окна» в разделе «Другие окна» */
.apps-win { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0; border-top: 1px solid var(--line); }
.apps-win:first-child { border-top: 0; padding-top: 0; }
.apps-win-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sp-3); }
.apps-win-head .ico { color: var(--text-2); }
.apps-wrap { overflow-wrap: anywhere; }

/* экран выбранного приложения */
.apps-title { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.apps-chat-cur { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--touch); }
.apps-chat-cur .item-main { flex: 1; }
.apps-chats { max-height: 38vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.apps-chats .item[aria-current="true"] { background: var(--accent-soft); border-radius: var(--r-s); }
.apps-chats .item[aria-current="true"] .ico:first-child { color: var(--accent); }
.item[disabled] { opacity: 0.5; pointer-events: none; }

/* редактор сообщения */
/* высота поля зависит от видимой области (--app-h уменьшается при открытой экранной клавиатуре): поле и кнопки под ним помещаются вместе */
.apps-editor textarea.field { min-height: clamp(84px, calc(var(--app-h) * 0.2), 140px); max-height: max(96px, calc(var(--app-h) * 0.34)); overflow-y: auto; resize: none; font-size: var(--fs-m); }
.apps-count { display: flex; gap: var(--sp-2); justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); }
.apps-editor .row-wrap > .btn { flex: 1 1 140px; }
.apps-actions { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); }
.apps-busy { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-s); color: var(--text-2); }
.apps-warnline { display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--warn-soft); color: var(--warn); font-size: var(--fs-s); }
.apps-warnline span { min-width: 0; overflow-wrap: anywhere; }

/* вложения */
.apps-att { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--line); min-height: 52px; }
.apps-att:first-child { border-top: 0; }
.apps-att .ico { color: var(--text-2); }
.apps-att[data-state="ok"] .ico:first-child { color: var(--accent); }
.apps-att[data-state="err"] .ico:first-child { color: var(--danger); }
.apps-att-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.apps-att-sub { font-size: var(--fs-s); color: var(--text-2); overflow-wrap: anywhere; }
.apps-att[data-state="err"] .apps-att-sub { color: var(--danger); }
.apps-att-btns { display: flex; gap: var(--sp-1); }
.apps-attach-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--sp-2); }

/* итог действия: честное состояние */
.apps-outcome { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: 1px solid var(--line); background: var(--surface-2); }
.apps-outcome[data-tone="ok"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); }
.apps-outcome[data-tone="warn"] { border-color: color-mix(in srgb, var(--warn) 50%, transparent); background: var(--warn-soft); }
.apps-outcome[data-tone="err"] { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: var(--danger-soft); }
.apps-outcome-head { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; }
.apps-outcome-head .grow { min-width: 0; }
.apps-outcome[data-tone="ok"] .apps-outcome-head { color: var(--accent); }
.apps-outcome[data-tone="warn"] .apps-outcome-head { color: var(--warn); }
.apps-outcome[data-tone="err"] .apps-outcome-head { color: var(--danger); }
.apps-outcome p { font-size: var(--fs-s); overflow-wrap: anywhere; white-space: pre-wrap; }
.apps-outcome .row-wrap > .btn { flex: 1 1 120px; }

/* предпросмотр */
.apps-pre { margin: 0; padding: var(--sp-3); max-height: 38vh; overflow: auto; border-radius: var(--r-m); background: var(--surface-2); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: var(--fs-m); line-height: var(--lh-body); }
.apps-sheet-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.apps-result-big { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); text-align: center; }