/* Shared product language. Page styles own their layouts; these tokens and the
   workspace shell keep every route, dialog and empty state in one system. */
@font-face {
  font-family:'IBM Plex Sans';
  src:url('/design/IBMPlexSans-Variable.ttf') format('truetype');
  font-weight:100 700;
  font-stretch:85% 100%;
  font-style:normal;
  font-display:swap
}
:root {
  color-scheme:dark;
  /* «Чертёжный лист»: tokens are the only colour source for every page (DESIGN.md). */
  --bg:#1b1b19;
  --sunken:#131312;
  --surface:#242320;
  --raised:#2c2b28;
  --hover:#34332f;
  --line-soft:#2e2d2a;
  --line:#3d3c37;
  --line-strong:#4b4944;
  --line-field:#6e6a62;
  --wire:#76726a;
  --text:#ece8df;
  --text-2:#bdb8ad;
  --text-3:#9d988e;
  --text-4:#8e897f;
  --paper:#ece8df;
  --highlight:#ece8df;
  --shadow:#000000;
  --accent:#d4aa55;
  --accent-text:#e2be72;
  --accent-line:#7d6533;
  --accent-tint:#2b2517;
  --on-accent:#1b1606;
  --info:#a9bedc;
  --info-line:#3f5675;
  --info-tint:#1d2430;
  --ok:#93b58c;
  --ok-line:#45603f;
  --ok-tint:#222a20;
  --ok-paper:#222a20;
  --warn:#8fb0dc;
  --warn-line:#3f5675;
  --warn-tint:#1d2430;
  --warn-paper:#1d2430;
  --danger:#e97468;
  --danger-line:#803a33;
  --danger-tint:#33201c;
  --danger-paper:#33201c;
  /* Department hatching: identifies a branch, never a state. */
  --dept-1:#c27c5e;
  --dept-2:#9ca66a;
  --dept-3:#7fa890;
  --dept-4:#7f9cbe;
  --dept-5:#be8a99;
  --dept-6:#a48a6e;
  --dept-7:#9c9a94;
  --dept-8:#b5ad8f;
  --font:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --narrow:88%;
  --ease:120ms ease-out;
  /* Earlier names kept for existing rules. */
  --surface-raised:var(--raised);
  --muted:var(--text-3);
  --accent-strong:var(--accent);
  --navy:var(--text);
  --green:var(--ok);
  --warning:var(--warn)
}
:root[data-theme=light] {
  color-scheme:light;
  /* «Калька»: warm drafting paper, graphite ink, the same pencil lacquer (DESIGN.md). */
  --bg:#ede8df;
  --sunken:#e3ddd2;
  --surface:#f6f3ed;
  --raised:#fbf9f5;
  --hover:#e0d9cd;
  --line-soft:#ddd6ca;
  --line:#cfc7b9;
  --line-strong:#b9b0a1;
  --line-field:#7c7466;
  --wire:#8a8172;
  --text:#23211d;
  --text-2:#48443d;
  --text-3:#645f56;
  --text-4:#69635a;
  --paper:#23211d;
  --highlight:#23211d;
  --shadow:#2b261d;
  --accent:#d2a03a;
  --accent-text:#80590c;
  --accent-line:#c9a45a;
  --accent-tint:#f1e5c6;
  --on-accent:#1f1703;
  --info:#2b5a98;
  --info-line:#9db4d6;
  --info-tint:#e0e7f1;
  --ok:#346a30;
  --ok-line:#9cbf94;
  --ok-tint:#e2ebdc;
  --ok-paper:#e2ebdc;
  --warn:#2b5a98;
  --warn-line:#9db4d6;
  --warn-tint:#e0e7f1;
  --warn-paper:#e0e7f1;
  --danger:#b03427;
  --danger-line:#d9a39c;
  --danger-tint:#f3deda;
  --danger-paper:#f3deda;
  --dept-1:#a85f40;
  --dept-2:#7a8340;
  --dept-3:#4f8266;
  --dept-4:#4f71a0;
  --dept-5:#9e5e72;
  --dept-6:#7e6347;
  --dept-7:#6e6b64;
  --dept-8:#8c8360
}
:root[data-theme=light] :is(input,textarea,select) {
  color-scheme:light
}

/* ---------- Base ---------- */
* {
  box-sizing:border-box
}
html {
  background:var(--bg)
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased
}
button,input,select,textarea {
  border-color:var(--line);
  touch-action:manipulation
}
button,a {
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation
}
button {
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
a {
  color:var(--accent-text);
  text-underline-offset:3px;
  text-decoration-thickness:1px
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
[hidden] {
  display:none!important
}
::selection {
  background:color-mix(in srgb,var(--accent) 32%,transparent);
  color:var(--text)
}
svg {
  flex-shrink:0
}
input,textarea,select {
  color-scheme:dark;
  accent-color:var(--accent)
}
input::placeholder,textarea::placeholder {
  color:var(--text-4)
}
h1,h2,h3 {
  color:var(--text);
  font-family:inherit;
  font-weight:600;
  font-stretch:var(--narrow);
  letter-spacing:normal
}
small {
  line-height:1.5
}
.eyebrow {
  color:var(--text-3);
  letter-spacing:normal;
  text-transform:none;
  font-size:13px;
  font-weight:500;
  font-stretch:var(--narrow)
}

/* ---------- Shell: the desk (menu) and the sheet (work area) ---------- */
.shell {
  height:100dvh;
  min-height:0;
  display:flex;
  overflow:hidden;
  background:var(--bg)
}
.sidebar {
  width:248px;
  flex:0 0 248px;
  padding:20px 0 12px;
  background:var(--sunken);
  border-right:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  overflow:visible;
  min-height:0;
  position:relative;
  z-index:2
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 22px 24px;
  color:var(--text);
  font-size:22px;
  font-weight:600;
  font-stretch:var(--narrow);
  line-height:1;
  text-decoration:none
}
.brand-mark {
  display:block;
  width:22px;
  height:22px;
  min-width:22px;
  padding:0;
  fill:none;
  overflow:visible;
  background:none;
  border:0;
  border-radius:0
}
.brand-trunk {stroke:var(--text);stroke-width:2.2}
.brand-branch {stroke:var(--text-2);stroke-width:1.5}
.brand-node {fill:var(--accent)}
/* The menu keeps its items in view; only the conversation register under «Разговоры» scrolls. */
.primary-navigation {
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:0 1 auto;
  min-height:0
}
.primary-navigation>* {
  flex-shrink:0
}
.nav-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:42px;
  padding:10px 20px 10px 22px;
  border:0;
  border-radius:0;
  color:var(--text-2);
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  background:transparent;
  margin:0;
  position:relative;
  transition:background var(--ease),color var(--ease)
}
.nav-item>span:first-child {
  display:flex;
  width:18px;
  height:18px;
  align-items:center
}
.nav-item svg {
  width:18px;
  height:18px
}
.nav-item:hover {
  color:var(--text);
  background:var(--surface)
}
/* The chosen section is a tab of the sheet: it covers the desk edge and merges with the page. */
.nav-item.active {
  color:var(--text);
  background:var(--bg);
  margin-right:-1px;
  font-weight:600
}
.nav-item.active:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:var(--accent)
}
.nav-item .count {
  margin-left:auto;
  font-size:13px;
  color:var(--text-3);
  background:none;
  padding:0;
  border:0;
  font-weight:500
}
/* Chevrons are drawn, not typed: the glyph falls back to another font and reads as a letter. */
.nav-chevron,.workspace-arrow {
  display:block;
  flex-shrink:0;
  width:7px;
  height:7px;
  margin-left:auto;
  margin-right:3px;
  font-size:0;
  line-height:0;
  overflow:hidden;
  border-right:1.5px solid var(--text-3);
  border-bottom:1.5px solid var(--text-3);
  transform:translateY(-2px) rotate(45deg)
}
#team-navigation[aria-expanded=true] .nav-chevron {
  transform:translateY(2px) rotate(-135deg)
}
/* «Команда» opens a small drawing: the views hang off one line, the chosen one is drawn in lacquer. */
#team-navigation.active[aria-expanded=true] {
  background:transparent;
  margin-right:0
}
#team-navigation.active[aria-expanded=true]:before {
  display:none
}
.team-views {
  display:flex;
  flex-direction:column;
  margin:0 0 6px 31px;
  padding:0
}
.team-views[hidden] {
  display:none
}
.team-views a {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:38px;
  padding:8px 12px 8px 22px;
  color:var(--text-2);
  font-size:14px;
  text-decoration:none;
  border-radius:0;
  position:relative;
  margin-right:-1px;
  transition:background var(--ease),color var(--ease)
}
.team-views a:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:var(--wire)
}
.team-views a:last-child:before {
  bottom:50%
}
.team-views a:after {
  content:'';
  position:absolute;
  left:0;
  top:50%;
  width:12px;
  height:1px;
  background:var(--wire)
}
.team-views svg {
  width:16px;
  height:16px;
  display:block
}
.team-views a:hover {
  color:var(--text);
  background:var(--surface)
}
.team-views a.active {
  color:var(--text);
  background:var(--bg);
  font-weight:600
}
.team-views a.active:after {
  height:2px;
  margin-top:-1px;
  background:var(--accent)
}
.team-views a:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:-2px
}
/* «Разговоры» opens the register of conversations the same way: rows hang off one line,
   the open conversation is a tab of the sheet with a lacquer tick. */
#chat-navigation.active.expanded {
  background:transparent;
  margin-right:0
}
#chat-navigation.active.expanded:before {
  display:none
}
.primary-navigation>.conversation-list {
  display:flex;
  flex-direction:column;
  flex-shrink:1;
  min-height:0;
  margin:0 0 6px 31px
}
.conversation-items {
  min-height:0;
  margin-right:-1px;
  overflow-x:hidden;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent
}
.conversation-list button {
  position:relative;
  display:grid;
  grid-template-columns:24px minmax(0,1fr);
  column-gap:9px;
  align-items:start;
  width:100%;
  padding:7px 12px 7px 18px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:14px;
  line-height:1.35;
  text-align:left;
  transition:background var(--ease),color var(--ease)
}
.conversation-list .conversation-new {
  align-items:center;
  width:calc(100% + 1px);
  min-height:38px
}
.conversation-list button:before {
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:var(--wire)
}
.conversation-items button:last-child:before {
  bottom:auto;
  height:19px
}
.conversation-list button:after {
  content:'';
  position:absolute;
  left:0;
  top:19px;
  width:12px;
  height:1px;
  background:var(--wire)
}
.conversation-list button:hover {
  color:var(--text);
  background:var(--surface)
}
.conversation-list button.selected {
  color:var(--text);
  background:var(--bg)
}
.conversation-list button.selected:after {
  height:2px;
  margin-top:-1px;
  background:var(--accent)
}
.conversation-list button:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:-2px
}
.conversation-text {
  display:grid;
  min-width:0
}
.conversation-title {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500
}
.conversation-list button.selected .conversation-title {
  font-weight:600
}
.conversation-list small {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:12px;
  color:var(--text-3)
}
.sidebar-bottom {
  display:block;
  margin-top:auto;
  padding:10px 0 0;
  border-top:1px solid var(--line-soft);
  flex-shrink:0
}
.sidebar-bottom .nav-item {
  margin-bottom:6px
}
button.workspace {
  width:calc(100% - 20px);
  display:flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border:1px solid transparent;
  background:transparent;
  border-radius:4px;
  text-align:left;
  margin:0 10px;
  color:var(--text);
  font:inherit;
  transition:background var(--ease),border-color var(--ease)
}
button.workspace:hover,button.workspace[aria-expanded=true] {
  background:var(--surface);
  border-color:var(--line)
}
/* A person is a circle with an initial; agents are hatched squares. */
.workspace-icon {
  display:grid;
  place-items:center;
  width:30px;
  min-width:30px;
  height:30px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--text-2);
  font-size:13px;
  font-weight:600
}
.workspace-text {
  display:grid;
  gap:1px;
  min-width:0
}
.workspace-text>span {
  color:var(--text);
  font-size:13px;
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.workspace-text small {
  color:var(--text-3);
  font-size:12px
}
button.workspace[aria-expanded=true] .workspace-arrow {
  transform:translateY(2px) rotate(-135deg)
}
.work-area {
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
  background:var(--bg)
}
.topbar {
  height:56px;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  border-bottom:1px solid var(--line-soft);
  background:var(--bg);
  gap:16px
}
.breadcrumb {
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
  font-size:13px;
  color:var(--text-3);
  white-space:nowrap
}
.breadcrumb span {
  margin:0;
  color:var(--text-4)
}
.breadcrumb strong {
  font-weight:500;
  color:var(--text);
  overflow:hidden;
  text-overflow:ellipsis
}
/* On the conversation page the top bar is the conversation's own heading: the agent, then the
   conversation. The menu already names the section, so no second header row and no breadcrumb. */
.chat-heading,.mobile-conversations,#toggle-inspector {
  display:none
}
body[data-page=chat] .breadcrumb {
  display:none
}
body[data-page=chat] .chat-heading {
  display:flex;
  flex:1;
  align-items:center;
  gap:10px;
  min-width:0
}
body[data-page=chat][data-chat=room] #toggle-inspector {
  display:inline-flex
}
.chat-heading-mark {
  display:flex
}
.chat-heading-mark:empty,.chat-heading-agent:empty,.chat-heading-agent:empty+.chat-heading-divider {
  display:none
}
.chat-heading-agent {
  flex:0 1 auto;
  max-width:36%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-2);
  font-size:14px;
  font-weight:500
}
.chat-heading-divider {
  color:var(--text-4)
}
.chat-heading h1 {
  flex:0 1 auto;
  min-width:0;
  max-width:none;
  margin:0;
  font-size:17px;
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.topbar-right {
  display:flex;
  align-items:center;
  gap:20px
}
.connection {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  font-size:13px
}
.connection i {
  display:block;
  width:7px;
  height:7px;
  border-radius:0;
  background:var(--ok)
}
.connection.offline i {
  background:var(--warn)
}
/* A working connection needs no words; only a lost one is shown. */
.connection:not(.offline) {
  display:none
}
.account-chip {
  display:none;
  align-items:center;
  border:1px solid var(--line);
  background:transparent;
  border-radius:4px;
  color:var(--text);
  padding:3px;
  gap:8px;
  font:inherit;
  transition:background var(--ease),border-color var(--ease)
}
.account-chip:hover,.account-chip[aria-expanded=true] {
  background:var(--surface);
  border-color:var(--line-strong)
}
.account-chip .avatar {
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--text-2);
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:12px;
  font-weight:600
}
.account-chip-text {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.25;
  text-align:left
}
.account-chip-text strong {
  color:var(--text);
  font-size:13px;
  font-weight:600;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.account-chip-text small {
  color:var(--text-3);
  font-size:12px
}
.app-loading {
  margin:40px 32px;
  font-size:14px;
  color:var(--text-3)
}

/* ---------- Section tabs: the chosen tab is cut out of the sheet ---------- */
.section-navigation {
  padding:18px 40px 0;
  flex-shrink:0
}
.section-back {
  font-size:13px;
  text-decoration:none;
  color:var(--text-3);
  display:inline-block;
  margin-bottom:12px
}
.section-back:hover {
  color:var(--text)
}
.section-navigation nav {
  display:flex;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  border-bottom:1px solid var(--line);
  padding-bottom:0;
  scrollbar-width:none
}
.section-tab {
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  white-space:nowrap;
  color:var(--text-2);
  padding:10px 14px;
  text-decoration:none;
  font-size:14px;
  border:1px solid transparent;
  border-bottom:0;
  border-radius:4px 4px 0 0;
  margin-bottom:-1px;
  transition:color var(--ease),background var(--ease)
}
.section-tab strong {
  font-weight:500
}
.section-tab svg {
  width:16px;
  height:16px
}
.section-tab:hover {
  color:var(--text);
  background:var(--surface)
}
.section-tab[aria-current] {
  background:var(--bg);
  color:var(--text);
  border-color:var(--line);
  border-top:2px solid var(--accent)
}
.section-tab[aria-current] strong {
  font-weight:600
}
.section-tab:focus-visible {
  outline-offset:-2px
}

/* ---------- Hubs: a ruled register with an index column ---------- */
.hub-page {
  padding:40px;
  overflow:auto;
  flex:1
}
.hub-heading {
  max-width:880px;
  margin-bottom:28px
}
.hub-heading h1 {
  font-size:30px;
  line-height:1.15;
  margin:6px 0 10px;
  max-width:none;
  white-space:normal;
  overflow:visible
}
.hub-heading p {
  color:var(--text-2);
  font-size:15px;
  line-height:1.6;
  margin:0
}
.hub-grid {
  max-width:880px;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden
}
.hub-card {
  min-height:0;
  display:grid;
  grid-template-columns:56px minmax(0,1fr) 48px;
  align-items:stretch;
  gap:0;
  padding:0;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  text-decoration:none;
  color:var(--text);
  transition:background var(--ease)
}
.hub-card:last-child {
  border-bottom:0
}
.hub-card:hover {
  background:var(--raised)
}
.hub-card:focus-visible {
  outline-offset:-2px
}
.hub-card>svg {
  width:20px;
  height:20px;
  color:var(--text-2);
  align-self:center;
  justify-self:center;
  margin:0
}
.hub-card>span:not(.hub-arrow) {
  min-width:0;
  padding:16px 20px;
  border-left:1px solid var(--line-soft)
}
.hub-card strong {
  display:block;
  font-size:15px;
  font-weight:600;
  letter-spacing:normal
}
.hub-card small {
  display:block;
  margin-top:3px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-3);
  max-width:none
}
.hub-arrow {
  display:grid;
  place-items:center;
  color:var(--text-3);
  transition:color var(--ease)
}
.hub-arrow svg {
  width:16px;
  height:16px
}
.hub-card:hover .hub-arrow {
  color:var(--text)
}
.hub-note {
  max-width:880px;
  margin-top:18px;
  padding:0;
  font-size:13px;
  line-height:1.6;
  color:var(--text-3)
}
.hub-note a {
  color:var(--accent-text);
  text-underline-offset:3px
}

/* ---------- Conversation: a journal on the sheet ---------- */
.chat-page {
  display:flex;
  flex:1;
  min-height:0;
  min-width:0;
  overflow:hidden
}
.subtle-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  padding:7px 12px;
  background:transparent;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:4px;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  transition:background var(--ease),border-color var(--ease)
}
.subtle-button span {
  margin:0;
  font-size:14px
}
.subtle-button svg {
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:square
}
.subtle-button:hover,.subtle-button[aria-expanded=true] {
  background:var(--surface);
  border-color:var(--line-strong)
}
.room-layout {
  position:relative;
  display:flex;
  flex:1;
  min-height:0;
  overflow:hidden
}
.chat {
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0;
  min-height:0;
  background:var(--bg)
}
.chat-scroll {
  flex:1;
  overflow-y:auto;
  min-height:80px;
  padding:24px clamp(22px,4vw,56px);
  scroll-behavior:smooth
}
/* Status notes are slips: a frame in the state's line colour and a 7px square before the words. */
.task-summary,.memory-chat-note,.pending-note,.test-mode-note,.agent-unavailable,.pending-block,.error {
  position:relative;
  padding:9px 14px 9px 31px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  line-height:1.5
}
.task-summary:before,.memory-chat-note:before,.pending-note:before,.test-mode-note:before,.agent-unavailable:before,.pending-block:before,.error:before {
  content:'';
  position:absolute;
  left:14px;
  top:15px;
  width:7px;
  height:7px;
  background:var(--line-strong)
}
.test-mode-note,.agent-unavailable,.pending-block,.pending-note {
  border-color:var(--warn-line)
}
.test-mode-note:before,.agent-unavailable:before,.pending-block:before,.pending-note:before {
  background:var(--warn)
}
.error {
  border-color:var(--danger-line)
}
.error:before {
  background:var(--danger)
}
/* The state of the order and the memory note close the journal, under the last entry. */
.task-summary,.memory-chat-note {
  max-width:860px;
  margin:16px auto 0
}
.task-summary:not([hidden])+.memory-chat-note {
  margin-top:8px
}
.task-summary {
  display:flex;
  flex-direction:column;
  gap:1px;
  padding-top:10px;
  padding-bottom:10px
}
.task-summary:before {
  top:17px;
  background:var(--warn)
}
.task-summary strong {
  color:var(--text);
  font-size:14px;
  font-weight:600
}
.task-summary p {
  margin:0;
  color:var(--text-2);
  font-size:13px;
  line-height:1.5
}
.task-summary[data-state=running]:before,.task-summary[data-state=succeeded]:before {
  background:var(--ok)
}
.task-summary[data-state=failed],.task-summary[data-state=interrupted],.task-summary[data-state=cancelled] {
  border-color:var(--danger-line)
}
.task-summary[data-state=failed]:before,.task-summary[data-state=interrupted]:before,.task-summary[data-state=cancelled]:before {
  background:var(--danger)
}
.memory-chat-note {
  color:var(--text-2)
}
.memory-chat-note:before {
  background:var(--ok)
}
.welcome {
  max-width:680px;
  margin:clamp(16px,6vh,64px) auto 24px;
  text-align:left;
  padding:0
}
.welcome .eyebrow {
  display:block;
  font-size:13px;
  color:var(--text-3)
}
.welcome h2 {
  font-size:clamp(24px,2.3vw,30px);
  font-weight:600;
  line-height:1.2;
  margin:8px 0 12px;
  color:var(--text);
  white-space:normal
}
.welcome p {
  font-size:15px;
  line-height:1.6;
  color:var(--text-2);
  margin:0
}
.start-panel a {
  color:var(--accent-text)
}
.start-panel h2 {
  margin-top:0
}
.start-panel .start-primary {
  display:inline-flex;
  align-items:center;
  min-height:40px;
  margin-top:22px;
  padding:0 18px;
  border-radius:4px;
  background:var(--accent);
  color:var(--on-accent);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:background var(--ease)
}
.start-panel .start-primary:hover {
  background:color-mix(in srgb,var(--accent) 90%,var(--shadow))
}
.start-panel .start-primary:focus-visible {
  outline-color:var(--text)
}
/* The first order is a blank «Поручение» slip: dashed, because nothing is written on it yet. */
#welcome {
  max-width:860px;
  margin-top:clamp(12px,4vh,40px);
  padding:0 20px 18px;
  border:1px dashed var(--line-strong);
  border-radius:4px
}
#welcome .eyebrow {
  margin:0 -20px 16px;
  padding:6px 20px 5px;
  border-bottom:1px dashed var(--line)
}
#welcome h2 {
  font-size:20px;
  line-height:1.3;
  margin:0 0 6px
}
#welcome p {
  font-size:14px;
  max-width:62ch
}
/* Sample orders: a ruled register, one row each, the arrow on the right edge. */
.suggestions {
  display:block;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden
}
.suggestions button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-height:44px;
  padding:10px 16px;
  background:transparent;
  color:var(--text);
  border:0;
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  font-size:14px;
  text-align:left;
  transition:background var(--ease)
}
.suggestions button:last-child {
  border-bottom:0
}
.suggestions button span {
  display:none
}
.suggestions button:after {
  content:'';
  flex-shrink:0;
  width:7px;
  height:7px;
  margin-right:4px;
  border-top:1.5px solid var(--text-3);
  border-right:1.5px solid var(--text-3);
  transform:rotate(45deg)
}
.suggestions button:hover {
  background:var(--raised)
}
.suggestions button:hover:after {
  border-color:var(--text)
}
.suggestions button:focus-visible {
  outline-offset:-2px
}
/* Starting a conversation: agents in one ruled register, not floating cards. */
.start-agents {
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  margin-top:22px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  overflow:hidden
}
.start-agents button {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 16px;
  align-items:center;
  column-gap:14px;
  text-align:left;
  padding:12px 16px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  color:var(--text);
  transition:background var(--ease)
}
.start-agents button:last-child {
  border-bottom:0
}
.start-agents button:hover:not(:disabled) {
  background:var(--raised)
}
.start-agents button:focus-visible {
  outline-offset:-2px
}
.start-agents button>span:not(.agent-mark):not(.start-arrow) {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0
}
.start-arrow {
  display:grid;
  place-items:center;
  color:var(--text-3)
}
.start-arrow svg {
  width:16px;
  height:16px
}
.start-agents button:hover:not(:disabled) .start-arrow {
  color:var(--text)
}
.start-agents strong {
  font-size:15px;
  font-weight:600
}
.start-agents small {
  font-size:13px;
  line-height:1.5;
  color:var(--text-3);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}
/* Journal entries: separated by hairlines. The owner's message is an order slip; the answer lies on the sheet. */
.message {
  display:flex;
  gap:16px;
  max-width:860px;
  margin:0 auto;
  padding:20px 0;
  line-height:1.6;
  border-bottom:1px solid var(--line-soft);
  position:relative
}
.message>div:last-child {
  min-width:0;
  flex:1
}
.message-avatar {
  align-self:flex-start;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  min-width:34px;
  margin:3px;
  border-radius:50%;
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--text-2);
  font-size:13px;
  font-weight:600
}
.message.assistant .message-avatar {
  width:40px;
  height:40px;
  min-width:40px;
  margin:0;
  border:0;
  border-radius:0
}
.message.assistant:after {
  content:'';
  position:absolute;
  left:20px;
  top:66px;
  bottom:20px;
  width:1px;
  background:var(--line)
}
.message-header {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:4px 10px;
  margin:9px 0 8px;
  font-size:14px;
  line-height:1.4;
  color:var(--text)
}
.message-header strong {
  font-weight:600
}
.message-header time {
  font-size:13px;
  color:var(--text-3)
}
.message-text {
  font-size:15px;
  line-height:1.65;
  color:var(--text);
  /* 68 Cyrillic characters: «ch» is the width of «0», wider than an average Cyrillic letter in Plex. */
  max-width:35em;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}
.message.user .message-text {
  max-width:calc(35em + 34px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:4px;
  padding:0 16px 12px
}
.message.user .message-text:before {
  content:'Поручение';
  display:block;
  margin:0 -16px 10px;
  padding:6px 16px 5px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  font-stretch:var(--narrow);
  color:var(--text-3);
  white-space:normal
}
.message-footer {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:12px;
  font-size:13px;
  color:var(--text-3)
}
/* State marker: a 7px square, green when saved, blue while the answer is still coming. */
.message-footer:before {
  content:'';
  flex-shrink:0;
  width:7px;
  height:7px;
  background:var(--ok)
}
.message-footer.interim:before {
  background:var(--warn)
}
.message-sources,.message-decision-sources {
  font-size:13px;
  color:var(--text-2);
  border-color:var(--line)
}
.message-sources a,.message-decision-sources a {
  color:var(--accent-text)
}
.message-sources .source-unavailable {
  color:var(--text-3);
  font-style:italic
}
.save-decision {
  display:inline-block;
  margin-top:8px;
  padding:4px 0;
  border:0;
  background:transparent;
  color:var(--text-3);
  font:inherit;
  font-size:13px;
  text-decoration:underline;
  text-decoration-color:var(--line-strong);
  text-underline-offset:3px;
  transition:color var(--ease)
}
.save-decision:hover {
  color:var(--accent-text);
  text-decoration-color:currentColor
}
.pending-note {
  max-width:860px;
  margin:16px auto;
  font-size:14px
}
.pending-note:before {
  top:16px
}
/* Composer: a field on the desk with a double edge in focus. */
/* The field and its send button never scroll away: only the notes above them scroll when there are many. */
.compose-area {
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  max-height:60%;
  overflow:hidden;
  padding:12px clamp(22px,4vw,56px) 16px;
  background:var(--bg)
}
.compose-area>* {
  width:100%;
  max-width:860px;
  margin-left:auto;
  margin-right:auto
}
.compose-notes {
  flex:0 1 auto;
  min-height:0;
  margin-bottom:8px;
  overflow:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent
}
.compose-notes>.claude-status {
  margin-bottom:0
}
#composer,.compose-area>.error {
  flex-shrink:0
}
/* Without an open conversation there is nobody to write to: no journal of the previous one, no field, no executor state, no progress panel. */
body:not([data-chat=room]) :is(#messages,.compose-area .compose-notes,.compose-area #composer,.inspector) {
  display:none
}
body:not([data-chat=room]) .compose-area {
  padding-top:0;
  padding-bottom:0
}
body:not([data-chat=room]) .compose-area>.error:not([hidden]) {
  margin-bottom:16px
}
.compose-area :is(.test-mode-note,.agent-unavailable,.pending-block,.error) {
  margin-top:0;
  margin-bottom:8px
}
.pending-attempts {
  max-height:190px;
  overflow:auto;
  margin-bottom:8px
}
.pending-attempt {
  position:relative;
  margin-bottom:6px;
  padding:10px 14px 10px 31px;
  border:1px solid var(--warn-line);
  border-radius:4px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  line-height:1.5
}
.pending-attempt:before {
  content:'';
  position:absolute;
  left:14px;
  top:16px;
  width:7px;
  height:7px;
  background:var(--warn)
}
.pending-attempt strong {
  font-size:14px;
  font-weight:600
}
.pending-attempt p {
  margin:6px 0;
  color:var(--text-2)
}
.pending-attempt details {
  overflow-wrap:anywhere;
  color:var(--text-2)
}
.pending-attempt summary {
  cursor:pointer
}
.pending-attempt details div {
  white-space:pre-wrap;
  margin:8px 0;
  color:var(--text)
}
.pending-attempt button {
  min-height:32px;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  background:transparent;
  color:var(--text);
  font-size:13px
}
.pending-attempt button:hover:not(:disabled) {
  background:var(--raised);
  border-color:var(--line-strong)
}
.claude-status {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:0 auto 8px;
  padding:9px 12px 9px 14px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface);
  color:var(--text-2)
}
.claude-status>div {
  min-width:0;
  padding-left:17px
}
.claude-status strong {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 2px -17px;
  font-size:13px;
  font-weight:600;
  color:var(--text)
}
.claude-status strong:before {
  content:'';
  width:7px;
  height:7px;
  flex-shrink:0;
  background:var(--line-strong)
}
.claude-status p {
  display:inline;
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--text-2)
}
.claude-status small {
  display:inline;
  margin:0 0 0 8px;
  font-size:12px;
  color:var(--text-3);
  white-space:nowrap
}
.claude-status small:empty {
  display:none
}
.claude-status button {
  flex-shrink:0;
  min-height:32px;
  padding:5px 12px;
  background:transparent;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--text);
  font-size:13px;
  transition:background var(--ease),border-color var(--ease),color var(--ease)
}
.claude-status button:hover:not(:disabled) {
  background:var(--raised);
  border-color:var(--line-strong)
}
/* A ready executor needs no slip: the field and its send button say enough. A short check is not announced either. */
.claude-status:is([data-state=ready],[data-state=checking]) {
  display:none
}
/* A missing or expired connection needs attention (blue pencil); red stays for real errors. */
.claude-status:is([data-state=refreshing],[data-state=authorization_required],[data-state=unavailable]) {
  border-color:var(--warn-line)
}
.claude-status:is([data-state=refreshing],[data-state=authorization_required],[data-state=unavailable]) strong:before {
  background:var(--warn)
}
.claude-status[data-state=error] {
  border-color:var(--danger-line)
}
.claude-status[data-state=error] strong:before {
  background:var(--danger)
}
/* With the test process chosen Claude is not needed for the next order: one quiet line. */
.test-mode-note:not([hidden])~.claude-status {
  padding:4px 4px 4px 14px
}
.test-mode-note:not([hidden])~.claude-status :is(p,small) {
  display:none
}
.test-mode-note:not([hidden])~.claude-status strong {
  margin-bottom:0
}
#composer {
  background:var(--sunken);
  border:1px solid var(--line-field);
  border-radius:4px;
  padding:12px 14px 10px;
  transition:border-color var(--ease),box-shadow var(--ease)
}
#composer:focus-within {
  border-color:var(--text-2);
  box-shadow:0 0 0 1px var(--text-2)
}
#composer:has(textarea:disabled) {
  background:var(--sunken);
  border-color:var(--line)
}
#prompt {
  display:block;
  width:100%;
  min-height:56px;
  max-height:170px;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:15px;
  line-height:1.6;
  resize:vertical
}
#prompt:focus-visible {
  box-shadow:none
}
#prompt:disabled {
  cursor:not-allowed;
  color:var(--text-3)
}
.composer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:8px
}
.composer-bottom>span {
  min-width:0;
  font-size:13px;
  color:var(--text-3);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
/* The keyboard hint sits by the button it explains instead of a separate line under the field. */
.composer-bottom>.composer-keys {
  flex-shrink:9;
  margin-left:auto;
  font-size:12px;
  color:var(--text-4)
}
#send {
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  min-height:36px;
  padding:0 16px;
  background:var(--accent);
  color:var(--on-accent);
  border:0;
  border-radius:4px;
  font-size:14px;
  font-weight:600
}
#send:hover:not(:disabled) {
  background:color-mix(in srgb,var(--accent) 90%,var(--shadow))
}
#send span {
  margin:0;
  font-size:15px
}
/* Inspector «Ход работы»: a side sheet with a ruled title block and the task's path as a drawn line. */
.inspector {
  width:300px;
  flex:0 0 300px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:0;
  border-left:1px solid var(--line-soft);
  background:var(--bg);
  overflow:auto;
  min-height:0
}
.inspector.hidden {
  display:none
}
.inspector-title {
  font-size:17px;
  font-weight:600;
  font-stretch:var(--narrow);
  line-height:1.3;
  color:var(--text)
}
.environment {
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:0;
  background:transparent
}
.env-top {
  padding:10px 12px 0;
  font-size:14px;
  font-weight:600;
  color:var(--text)
}
.environment p {
  margin:2px 0 0;
  padding:0 12px 10px;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  line-height:1.5;
  color:var(--text-2)
}
.capacity {
  display:flex;
  justify-content:space-between;
  padding:8px 12px 0;
  font-size:13px;
  color:var(--text-3)
}
.capacity strong {
  font-weight:500;
  color:var(--text)
}
.capacity-track {
  height:2px;
  margin:8px 12px 11px;
  background:var(--line);
  border-radius:0;
  overflow:hidden
}
.capacity-track div {
  height:100%;
  width:0;
  background:var(--ok)
}
.section-caption {
  margin:22px 0 10px;
  font-size:13px;
  font-weight:500;
  font-stretch:var(--narrow);
  color:var(--text-3)
}
.empty-hint {
  margin:2px 0 12px;
  font-size:13px;
  line-height:1.6;
  color:var(--text-3)
}
/* The path of an order: one line with square nodes, as on the team chart. */
.path-step {
  position:relative;
  display:flex;
  gap:12px;
  padding:0 0 14px;
  font-size:14px;
  line-height:1.4;
  color:var(--text)
}
.path-step:not(:last-child):before {
  content:'';
  position:absolute;
  left:3px;
  top:14px;
  bottom:0;
  width:1px;
  background:var(--line)
}
.path-step i {
  position:relative;
  z-index:1;
  flex:0 0 7px;
  width:7px;
  height:7px;
  margin-top:6px;
  border:1px solid var(--line-strong);
  border-radius:0;
  background:var(--bg);
  font-size:0;
  font-style:normal;
  overflow:hidden
}
.path-step div small {
  display:block;
  margin-top:1px;
  font-size:13px;
  color:var(--text-3)
}
.path-step.done i {
  background:var(--ok);
  border-color:var(--ok)
}
.path-step.done:not(:last-child):before {
  background:var(--ok-line)
}
.path-step.current i {
  background:var(--warn);
  border-color:var(--warn)
}
.path-step:not(.done):not(.current) {
  color:var(--text-2)
}
.lab {
  margin:18px 0 16px;
  padding:12px 0;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft)
}
.lab summary {
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  color:var(--text-3)
}
.lab summary::-webkit-details-marker {
  display:none
}
.lab summary:after {
  content:'+';
  margin-left:auto;
  font-size:16px;
  line-height:1
}
.lab[open] summary:after {
  content:'−'
}
.lab summary:hover {
  color:var(--text)
}
.lab label {
  display:block;
  margin:12px 0 6px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-2)
}
.lab select {
  width:100%;
  min-height:36px;
  padding:6px 8px;
  font-size:14px;
  background:var(--sunken);
  border:1px solid var(--line-field);
  border-radius:4px;
  color:var(--text)
}
.lab p {
  margin:8px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--text-3)
}
.stop-button {
  width:100%;
  min-height:36px;
  padding:7px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  background:transparent;
  color:var(--danger);
  font-size:14px;
  font-weight:500;
  transition:background var(--ease),border-color var(--ease)
}
.stop-button:hover:not(:disabled) {
  background:var(--surface);
  border-color:var(--line-strong)
}
.inspector .stop-button {
  margin-bottom:12px
}
.event-details {
  margin-top:4px;
  font-size:13px;
  color:var(--text-3)
}
.event-details summary {
  cursor:pointer;
  padding:4px 0
}
.event-details summary:hover {
  color:var(--text)
}
.event-details summary span {
  margin-left:6px;
  color:var(--text-3)
}
.events {
  margin-top:8px;
  max-height:250px;
  overflow:auto;
  border-top:1px solid var(--line-soft)
}
.event {
  display:grid;
  grid-template-columns:42px 1fr;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:13px;
  line-height:1.5;
  color:var(--text-2)
}
.event time {
  padding-top:1px;
  font-size:12px;
  color:var(--text-3)
}
.inspector-foot {
  margin-top:auto;
  padding-top:20px;
  font-size:13px;
  line-height:1.5;
  color:var(--text-3)
}
.delegation-flow {
  margin-top:6px
}
.delegation-plan {
  font-size:13px;
  line-height:1.6;
  color:var(--text-2)
}
.delegation-flow details {
  margin:8px 0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  background:var(--surface)
}
.delegation-flow summary {
  display:flex;
  gap:8px;
  justify-content:space-between;
  align-items:flex-start;
  list-style:none;
  cursor:pointer;
  font-size:13px;
  color:var(--text);
  overflow-wrap:anywhere
}
.delegation-flow summary::-webkit-details-marker {
  display:none
}
.delegation-flow summary strong {
  flex:1;
  min-width:0;
  font-weight:500
}
.delegation-flow summary span {
  flex-shrink:0;
  max-width:44%;
  text-align:right;
  font-size:13px;
  color:var(--text-3)
}
.task-chevron {
  font-size:15px;
  font-style:normal;
  line-height:1.3;
  color:var(--text-3);
  transition:transform var(--ease)
}
.delegation-flow details[open]>summary>.task-chevron {
  transform:rotate(90deg)
}
.delegation-flow p,.child-result {
  font-size:13px;
  line-height:1.6;
  color:var(--text-2);
  overflow-wrap:anywhere;
  white-space:pre-wrap
}
.task-depth {
  color:var(--text-3)!important
}
.child-result {
  border-top:1px solid var(--line-soft);
  padding-top:8px;
  color:var(--text)
}
.nested-delegation {
  margin:12px 0 14px;
  padding-left:10px;
  border-left:1px solid var(--wire)
}
.nested-delegation details {
  padding:8px 10px
}
.delegation-flow .stop-button {
  margin:6px 0
}

/* ---------- Account menu, password dialog and notices ---------- */
.account-menu {
  position:fixed;
  z-index:20;
  width:248px;
  display:flex;
  flex-direction:column;
  padding:4px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:4px
}
.account-menu-head {
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 10px 11px;
  margin:0 -4px 4px;
  padding-left:14px;
  padding-right:14px;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere
}
.account-menu-head strong {
  font-size:14px;
  font-weight:600;
  color:var(--text)
}
.account-menu-head small {
  font-size:12px;
  color:var(--text-3)
}
.account-menu button,.account-menu>a {
  display:block;
  width:100%;
  padding:9px 10px;
  border:0;
  border-radius:3px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:14px;
  text-align:left;
  text-decoration:none
}
.account-menu button:hover,.account-menu>a:hover {
  background:var(--raised);
  color:var(--text)
}
.account-menu :is(button,a):focus-visible {
  outline-offset:-2px
}
.account-dialog {
  width:min(460px,calc(100vw - 28px));
  max-height:90dvh;
  overflow:auto;
  padding:24px 26px;
  background:var(--bg);
  border:1px solid var(--line-strong);
  border-top:2px solid var(--text-2);
  border-radius:4px;
  color:var(--text)
}
.account-dialog::backdrop {
  background:color-mix(in srgb,var(--shadow) 62%,transparent)
}
.account-dialog h2 {
  font-size:22px;
  line-height:1.25;
  margin:0 0 8px
}
.account-dialog form {
  display:flex;
  flex-direction:column
}
.account-dialog p {
  margin:0 0 4px;
  font-size:14px;
  line-height:1.6;
  color:var(--text-2)
}
.account-dialog label {
  margin:14px 0 6px;
  font-size:13px;
  font-weight:500;
  color:var(--text-2)
}
.account-dialog input[type=text],.account-dialog input[type=password] {
  width:100%;
  min-height:40px;
  padding:9px 12px;
  border:1px solid var(--line-field);
  border-radius:4px;
  background:var(--sunken);
  color:var(--text);
  font:inherit;
  font-size:15px
}
/* The login is shown, not edited: it lies on the card, not in a field on the desk.
   The id outweighs the shared field rule below. */
.account-dialog #password-login[readonly] {
  background:var(--surface);
  border-color:var(--line);
  color:var(--text-2)
}
.account-dialog #password-current[aria-invalid=true],.account-dialog #password-next[aria-invalid=true],.account-dialog #password-repeat[aria-invalid=true] {
  border-color:var(--danger-line)
}
/* «Показать пароли» is the one control for this; Edge's own eye would duplicate it. */
input[type=password]::-ms-reveal {
  display:none
}
.account-dialog .account-hint {
  margin:6px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--text-3)
}
.account-dialog .account-check {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:14px;
  font-weight:400;
  color:var(--text-2);
  cursor:pointer
}
.account-check input {
  width:16px;
  height:16px;
  margin:0
}
.account-dialog .account-error {
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5
}
.account-dialog .account-error:not(:empty) {
  position:relative;
  padding:9px 14px 9px 31px;
  border:1px solid var(--danger-line);
  border-radius:4px;
  background:var(--surface);
  color:var(--text)
}
.account-dialog .account-error:not(:empty):before {
  content:'';
  position:absolute;
  left:14px;
  top:15px;
  width:7px;
  height:7px;
  background:var(--danger)
}
.account-dialog .account-error:empty {
  margin:0
}
.account-dialog .account-actions {
  max-width:none;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:10px;
  margin-top:20px
}
.account-actions button {
  min-height:38px;
  padding:0 16px;
  border:1px solid var(--line);
  border-radius:4px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:14px;
  font-weight:500;
  transition:background var(--ease),border-color var(--ease)
}
.account-actions button:hover:not(:disabled) {
  background:var(--surface);
  border-color:var(--line-strong)
}
.account-actions .account-primary {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  font-weight:600
}
.account-actions .account-primary:hover:not(:disabled) {
  background:color-mix(in srgb,var(--accent) 90%,var(--shadow));
  border-color:color-mix(in srgb,var(--accent) 90%,var(--shadow))
}
.app-notice {
  position:fixed;
  left:50%;
  bottom:22px;
  z-index:30;
  transform:translateX(-50%);
  max-width:min(520px,calc(100vw - 28px));
  margin:0;
  padding:10px 16px;
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-radius:4px;
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  transition:opacity var(--ease)
}
.app-notice:empty {
  opacity:0;
  padding:0;
  border:0;
  pointer-events:none
}

/* ---------- Shared page components (all sections) ---------- */
/* Material and administration pages keep their existing actions and states. */
.work-area>:is(.reports-page,.memory-page,.knowledge-page,.decisions-page,.people-page,.connectors-page,.telegram-page,.claude-accounts-page) {
  padding:32px 40px;
  background:var(--bg)
}
.work-area>:is(.reports-page,.memory-page,.knowledge-page,.decisions-page,.people-page,.connectors-page,.telegram-page,.claude-accounts-page) h1 {
  font-size:30px;
  line-height:1.15;
  font-weight:600;
  margin-top:6px;
  letter-spacing:normal;
  max-width:none;
  white-space:normal
}
.reports-card,.knowledge-card,.decision-card,.people-card,.connector-card,.connector-connection,.claude-account,.telegram-card {
  box-shadow:none;
  border-radius:4px
}
dialog {
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--line-strong);
  border-top:2px solid var(--text-2);
  border-radius:4px;
  box-shadow:none
}
dialog::backdrop {
  background:color-mix(in srgb,var(--shadow) 62%,transparent)
}
.reports-primary,.company-primary,.knowledge-primary,.people-primary,.memory-primary,.decisions-primary {
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:var(--on-accent)!important;
  font-weight:600
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),select,textarea {
  background-color:var(--sunken);
  color:var(--text);
  border-color:var(--line-field)
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):focus-visible,select:focus-visible,textarea:focus-visible {
  outline:none;
  border-color:var(--text-2);
  box-shadow:0 0 0 1px var(--text-2)
}
#prompt:focus-visible {
  border-color:transparent;
  box-shadow:none
}
:is(#send,.login-primary,.org-add,.org-write,.reports-primary,.company-primary,.knowledge-primary,.people-primary,.memory-primary,.decisions-primary,.connectors-primary,.account-primary):focus-visible {
  outline-color:var(--text)
}
.page-help {
  margin:22px 0;
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px 16px;
  max-width:980px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.6
}
.page-help summary {
  cursor:pointer;
  color:var(--text-3)
}
.page-help p {
  margin:10px 0;
  padding:0;
  background:transparent;
  color:var(--text-2)
}
.connectors-page .connectors-primary,.connector-dialog .connectors-primary {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--on-accent);
  font-weight:600
}
.connectors-page .connectors-primary:hover:not(:disabled),.connector-dialog .connectors-primary:hover:not(:disabled) {
  background:color-mix(in srgb,var(--accent) 90%,var(--shadow))
}
/* Agent mark: initials on a tile hatched in the department colour. */
.agent-mark {--hue:var(--dept-7);--angle:45deg;--size:40px;position:relative;display:inline-grid;place-items:center;flex:0 0 var(--size);width:var(--size);height:var(--size);border-radius:3px;border:1px solid color-mix(in srgb,var(--hue) 55%,transparent);background:repeating-linear-gradient(var(--angle),color-mix(in srgb,var(--hue) 38%,transparent) 0 1px,transparent 1px 5px),color-mix(in srgb,var(--hue) 10%,var(--sunken));color:var(--text);font-size:15px;font-weight:600;font-stretch:var(--narrow);line-height:1}
.agent-mark>span {padding:1px 3px;border-radius:2px;background:color-mix(in srgb,var(--hue) 10%,var(--sunken))}
.agent-mark.s {--size:24px;font-size:12px;background:color-mix(in srgb,var(--hue) 16%,var(--sunken))}
.agent-mark.s>span {padding:0;background:none}
.agent-mark.l {--size:52px;font-size:19px}
.agent-mark.blank {--hue:var(--text-3);border-style:dashed;background:transparent;color:var(--text-3)}
.agent-mark.blank>span {background:none}
.agent-mark[data-hue="1"] {--hue:var(--dept-1)}
.agent-mark[data-hue="2"] {--hue:var(--dept-2)}
.agent-mark[data-hue="3"] {--hue:var(--dept-3)}
.agent-mark[data-hue="4"] {--hue:var(--dept-4)}
.agent-mark[data-hue="5"] {--hue:var(--dept-5)}
.agent-mark[data-hue="6"] {--hue:var(--dept-6)}
.agent-mark[data-hue="7"] {--hue:var(--dept-7)}
.agent-mark[data-hue="8"] {--hue:var(--dept-8)}
.agent-mark[data-hatch="1"] {--angle:-45deg}
.agent-mark[data-hatch="2"] {--angle:0deg}
.agent-mark[data-hatch="3"] {--angle:90deg}

/* ---------- Adaptation (DESIGN.md «Адаптация») ---------- */
@media(min-width:1700px) {
  .sidebar {
    width:264px;
    flex-basis:264px
  }
  .hub-page {
    padding:48px 60px
  }
  .topbar {
    padding:0 40px
  }
  .inspector {
    width:320px;
    flex-basis:320px
  }
}
@media(max-width:1200px) {
  .sidebar {
    width:224px;
    flex-basis:224px
  }
  .topbar {
    padding:0 24px
  }
  /* The inspector lies over the journal on the right, below the top bar. */
  .inspector {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    z-index:8
  }
  .hub-page {
    padding:32px
  }
  .work-area>:is(.reports-page,.memory-page,.knowledge-page,.decisions-page,.people-page,.connectors-page,.telegram-page,.claude-accounts-page) {
    padding:25px 28px
  }
}
@media(max-width:950px) {
  /* Narrow strip of icons with accessible names; the account moves to the top bar. */
  .sidebar {
    width:64px;
    flex-basis:64px;
    padding:20px 0 12px
  }
  .brand {
    justify-content:center;
    padding:0 0 26px
  }
  .brand>span:last-child,.nav-text,.nav-item .count,.nav-chevron,.team-view-label,.workspace-text,.workspace-arrow {
    display:none
  }
  .nav-item {
    justify-content:center;
    padding:12px 0;
    min-height:44px
  }
  .nav-item.active {
    margin-right:-1px
  }
  /* The views still hang off a short drawn line, indented under «Команда». */
  .team-views {
    margin:0 0 6px;
    padding:0;
    gap:0
  }
  .team-views a {
    justify-content:center;
    min-height:36px;
    padding:8px 0 8px 16px;
    margin-right:-1px;
    color:var(--text-3)
  }
  .team-views a:before {
    left:14px
  }
  .team-views a:after {
    left:14px;
    width:7px
  }
  .team-views svg {
    width:16px;
    height:16px
  }
  .sidebar-bottom {
    margin-top:auto;
    padding-top:12px
  }
  .sidebar-bottom .nav-item {
    margin-bottom:0
  }
  button.workspace {
    display:none
  }
  .topbar {
    height:56px;
    min-height:56px;
    padding:0 20px
  }
  .account-chip {
    display:flex
  }
  .account-chip-text {
    display:none
  }
  .connection {
    display:none
  }
  .inspector {
    display:none
  }
  .inspector.mobile-open {
    display:flex;
    width:300px
  }
  /* The strip has no room for the register: the conversation is chosen in the top bar instead. */
  .primary-navigation>.conversation-list {
    display:none
  }
  #chat-navigation.active.expanded {
    background:var(--bg);
    margin-right:-1px
  }
  #chat-navigation.active.expanded:before {
    display:block
  }
  /* The picker shows the conversation; the heading stays for screen readers only. */
  body[data-page=chat]:not([data-chat=empty]) .chat-heading {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
  }
  body[data-page=chat]:not([data-chat=empty]) .mobile-conversations {
    display:flex;
    flex:1;
    align-items:center;
    gap:8px;
    min-width:0
  }
  .mobile-conversations select {
    flex:0 1 420px;
    min-width:0;
    min-height:36px;
    padding:6px 8px;
    background:var(--sunken);
    border:1px solid var(--line-field);
    border-radius:4px;
    color:var(--text);
    font:inherit;
    font-size:14px
  }
  .mobile-conversations button {
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:36px;
    height:36px;
    padding:0;
    border:1px solid var(--line);
    border-radius:4px;
    background:transparent;
    color:var(--text);
    font-size:18px;
    line-height:1
  }
  .mobile-conversations button:hover {
    background:var(--surface);
    border-color:var(--line-strong)
  }
  .hub-heading h1 {
    font-size:28px
  }
}
@media(max-width:700px) {
  .section-navigation {
    padding:16px 20px 0
  }
  .section-tab {
    padding:9px 12px
  }
  .chat-scroll {
    padding:18px 16px
  }
  .compose-area {
    padding:10px 16px 14px
  }
  .task-summary,.memory-chat-note {
    margin-top:12px
  }
  /* On a phone the journal keeps the height: finished states need no second line. */
  .task-summary {
    padding-top:7px;
    padding-bottom:7px
  }
  .task-summary:before {
    top:14px
  }
  .task-summary:is([data-state=succeeded],[data-state=cancelled]) p {
    display:none
  }
  .welcome h2 {
    font-size:26px
  }
  .composer-keys {
    display:none
  }
  /* Claude's state is one line with its action; the explanation stays the field's description. */
  .claude-status {
    flex-wrap:nowrap;
    gap:8px;
    padding:4px 4px 4px 12px
  }
  .claude-status :is(p,small) {
    display:none
  }
  .claude-status strong {
    margin-bottom:0
  }
  .compose-area {
    max-height:55%
  }
  /* Hub rows keep the index column; nothing is squeezed into a card. */
  .hub-card {
    grid-template-columns:48px minmax(0,1fr) 36px
  }
  .hub-card>span:not(.hub-arrow) {
    padding:14px 16px
  }
}
@media(max-width:480px) {
  .sidebar {
    width:56px;
    flex-basis:56px;
    padding-top:18px
  }
  .brand {
    padding:0 0 22px
  }
  .nav-item {
    min-height:44px
  }
  .topbar {
    padding:0 16px
  }
  .breadcrumb {
    gap:8px
  }
  .hub-page {
    padding:24px 16px
  }
  .hub-heading {
    margin-bottom:22px
  }
  .hub-heading h1 {
    font-size:26px
  }
  .hub-heading p {
    font-size:14px
  }
  .hub-card {
    grid-template-columns:44px minmax(0,1fr) 32px
  }
  .hub-card>span:not(.hub-arrow) {
    padding:13px 14px
  }
  /* Icon only; the words stay available to screen readers as the button's name. */
  .subtle-button span {
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
  }
  .subtle-button {
    position:relative;
    width:36px;
    justify-content:center;
    padding:0
  }
  .message {
    gap:12px;
    padding:16px 0
  }
  .message.assistant:after {
    top:62px;
    bottom:16px
  }
  .message-text {
    font-size:15px
  }
  .message.user .message-text {
    padding:0 12px 10px
  }
  .message.user .message-text:before {
    margin:0 -12px 8px;
    padding:5px 12px 4px
  }
  .welcome h2 {
    font-size:24px
  }
  .welcome p {
    font-size:14px
  }
  .suggestions button {
    width:100%
  }
  #prompt {
    font-size:16px;
    min-height:48px
  }
  #composer {
    padding:10px 12px
  }
  #send {
    padding:0 12px
  }
  .inspector.mobile-open {
    left:0;
    width:auto;
    border-left:0
  }
  .work-area>:is(.reports-page,.memory-page,.knowledge-page,.decisions-page,.people-page,.connectors-page,.telegram-page,.claude-accounts-page) {
    padding:22px 18px
  }
  .work-area>:is(.reports-page,.memory-page,.knowledge-page,.decisions-page,.people-page,.connectors-page,.telegram-page,.claude-accounts-page) h1 {
    font-size:25px
  }
  .section-navigation {
    padding:14px 16px 0
  }
  .section-tab {
    font-size:13px;
    padding:9px 10px
  }
  .section-tab svg {
    display:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important
  }
}