/*
 * go24 components. Uses only variables from tokens.css — change the look there or in a theme.css.
 * Icons: <i class="i i-NAME">, image set in icons.css via --icon (see docs/theming.md).
 */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: var(--font-size)/1.5 var(--font); background: var(--page-bg, var(--bg)); background-attachment: fixed; color: var(--text); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font: var(--font-size-sm) var(--font-mono); background: var(--hover); padding: 1px 5px; border-radius: 4px; }

/* icons: a mask filled with the current text color */
.i { display: inline-block; width: var(--icon-size); height: var(--icon-size); flex: none; vertical-align: -4px;
  background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }

/* ---------- shell ---------- */
.app { display: grid; grid-template-columns: var(--side-width) 1fr; min-height: 100vh; }
.side { background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column; padding: 16px 10px; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--side-bg-hover) transparent; }
.logo { display: flex; align-items: center; gap: 10px; color: var(--side-text-active); font-weight: 700; font-size: 19px; padding: 4px 10px 18px; }
.logo b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-size: 14px; }
.logo:hover { text-decoration: none; }
.logo .plogo { max-width: 120px; max-height: 32px; object-fit: contain; flex: none; }
.logo .pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side nav { display: flex; flex-direction: column; gap: 2px; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--side-text); }
.side nav a:hover { background: var(--side-bg-hover); text-decoration: none; color: var(--side-text-active); }
.side nav a.on { background: var(--side-bg-hover); color: var(--side-text-active); font-weight: 600; }
.side .navitem { position: relative; display: flex; align-items: center; }
.side .navitem > a:first-child { flex: 1; }
.side nav a.cnt { position: absolute; right: 8px; padding: 0 7px; font-size: 12px; background: var(--accent); color: var(--on-accent); border-radius: 10px; line-height: 18px; }
.side nav a.cnt:hover { filter: brightness(1.15); color: var(--on-accent); }
.side nav a.cnt.red { background: var(--danger); }
.side .sep { height: 1px; background: var(--side-bg-hover); margin: 12px 6px; }
.side .grow { flex: 1; }
.langs { display: flex; gap: 10px; flex-wrap: wrap; padding: 10px 10px 0; font-size: var(--font-size-sm); }
.langs a { color: var(--side-text); }
.langs a.on { color: var(--side-text-active); font-weight: 600; }
.login .langs { justify-content: center; padding-top: 4px; }
.login .langs a { color: var(--muted); }
.login .langs a.on { color: var(--accent); }
.main { display: flex; flex-direction: column; min-width: 0; }
.top { display: flex; align-items: center; gap: var(--gap); padding: 12px var(--content-pad); background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.search { flex: 1; max-width: 520px; position: relative; display: flex; align-items: center; }
.search .i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
/* more specific than the generic input[type=search] rule below, so the text never runs under the icon */
.search input[type=search] { width: 100%; padding: 8px 12px 8px 38px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); }
.me { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.admin-toggle { font-size: var(--font-size-sm); padding: 5px 10px; }
.admin-toggle.on { background: var(--admin); border-color: var(--admin); color: var(--on-accent); }
.admin-banner { display: flex; align-items: center; gap: 8px; background: var(--admin-soft); border: 1px solid var(--admin); color: var(--admin);
  padding: 8px 14px; border-radius: 10px; margin-bottom: var(--gap); font-weight: 500; }
.content { padding: var(--content-pad); max-width: var(--content-max); width: 100%; }

/* ---------- building blocks ---------- */
h1 { font-size: var(--font-size-h1); margin: 0 0 4px; font-weight: 650; }
h2 { font-size: var(--font-size-h2); margin: 0 0 12px; font-weight: 650; display: flex; align-items: center; gap: 8px; }
.sub { color: var(--muted); margin-bottom: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--pad); margin-bottom: var(--gap); }
.card.flush { padding: 0; overflow: hidden; }
.muted { color: var(--muted); }
.small { font-size: var(--font-size-sm); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.layout2 { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap); align-items: start; }
.flash { background: var(--warn-soft); border: 1px solid var(--warn); padding: 10px 14px; margin-bottom: var(--gap); border-radius: 10px; }
.flash.vacremind { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .flash.vacremind form { margin: 0; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 10px 14px; border-bottom: 1px solid var(--line); }
td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--hover); }
.tkey { color: var(--muted); font-size: 12px; margin-right: 6px; }
.ttitle { color: var(--text); font-weight: 500; }

/* forms */
label { display: block; font-size: var(--font-size-sm); color: var(--muted); margin: 10px 0 4px; }
label.check { display: flex; gap: 8px; align-items: center; color: var(--text); font-size: var(--font-size); }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=tel], input[type=datetime-local], input[type=date], input[type=time], input[type=email], input[type=number], input[type=search], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
textarea { min-height: 90px; resize: vertical; }
.btn, button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); cursor: pointer; color: var(--text); font-weight: 500; }
.btn:hover, button:hover { background: var(--hover); text-decoration: none; }
.btn.primary, button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover, button.primary:hover { filter: brightness(1.07); }
.btn.ok, button.ok { background: var(--ok); border-color: var(--ok); color: var(--on-accent); }
button.ghost { border: 0; background: none; color: var(--muted); padding: 4px; }
button.ghost:hover { color: var(--danger); background: none; }
.me button.ghost:hover { color: var(--accent); }
details > summary { cursor: pointer; color: var(--accent); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
details > summary::-webkit-details-marker { display: none; }

/* status, priority, deadline */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 20px; font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; }
.st-pending { background: var(--st-pending-bg); color: var(--st-pending-fg); border: 1px solid var(--line); }
.st-in_progress { background: var(--st-in_progress-bg); color: var(--st-in_progress-fg); }
.st-awaiting_control { background: var(--st-awaiting_control-bg); color: var(--st-awaiting_control-fg); }
.st-completed { background: var(--st-completed-bg); color: var(--st-completed-fg); }
.st-deferred { background: var(--st-deferred-bg); color: var(--st-deferred-fg); }
.dl { font-size: var(--font-size-sm); padding: 2px 8px; border-radius: 6px; background: var(--hover); white-space: nowrap; }
.dl.over { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.prio { color: var(--danger); }

/* avatars: --h (hue) is set per person in the markup */
.ava { display: inline-grid; place-items: center; width: var(--ava-size); height: var(--ava-size); border-radius: 50%; flex: none;
  background: hsl(var(--h, 210) var(--ava-saturation) var(--ava-lightness)); color: var(--ava-text); font-size: 11px; font-weight: 700; }
.ava.lg { width: var(--ava-size-lg); height: var(--ava-size-lg); font-size: 13px; }
.person { display: inline-flex; align-items: center; gap: 8px; }

/* tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); text-decoration: none; }
.tabs a.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tabs .cnt { font-size: 12px; background: var(--hover); border-radius: 10px; padding: 0 7px; color: var(--muted); }
.tabs .spacer { flex: 1; }

/* task card */
.task-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.task-head h1 { flex: 1; }
.crumbs { font-size: var(--font-size-sm); color: var(--muted); margin-bottom: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px var(--pad); border-top: 1px solid var(--line); background: var(--hover); }
.desc { line-height: 1.6; }
.props { display: grid; grid-template-columns: 120px 1fr; gap: 10px 8px; align-items: center; }
.props .k { color: var(--muted); font-size: var(--font-size-sm); }
/* task checklists (several lists */
.ck-list { margin-top: 10px; }
.ck-list + .ck-list { margin-top: 18px; }
.ck-head { display: flex; align-items: center; gap: 10px; }
.ck-head .ck-name { flex: 1; min-width: 0; }
.ck-head .ck-name input { width: 100%; border-color: transparent; background: none; font-weight: 600; padding: 4px 6px; }
.ck-head .ck-name input:hover, .ck-head .ck-name input:focus { border-color: var(--line); background: var(--bg); }
.ck-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.ck-item[draggable="true"] { cursor: grab; }
.ck-item[data-level] { padding-left: calc(var(--lvl, 0) * 24px); }
.ck-people { display: inline-flex; gap: 2px; }
.ck-people .ava { width: 20px; height: 20px; font-size: 9px; }
.ck-item.dragging { opacity: .4; }
.ck-item .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ck-item .ck-edit { flex: 1; }
.ck-item .ck-edit input { width: 100%; }
.ck-item.done .t { text-decoration: line-through; color: var(--muted); }
.ck-item.important .t { font-weight: 600; }
.ck-imp { color: var(--danger); display: inline-flex; }
.ck-tools { display: inline-flex; opacity: 0; transition: opacity .1s; }
.ck-item:hover .ck-tools, .ck-item:focus-within .ck-tools { opacity: 1; }
@media (hover: none) { .ck-tools { opacity: 1; } }
.ck-item { flex-wrap: wrap; }
.ck-attach label { display: inline-flex; color: var(--muted); padding: 4px; cursor: pointer; }
.ck-attach label:hover { color: var(--accent); }
.ck-files { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 28px; font-size: 13px; }
.ck-file { display: inline-flex; align-items: center; gap: 2px; }
.ck-file a { display: inline-flex; align-items: center; gap: 4px; }
.ck-items:empty { min-height: 8px; }
.ck-add { margin-top: 8px; }
.ck-add textarea { flex: 1; resize: none; min-height: 34px; }
.ck-more { margin-top: 10px; }
.ck-hide { margin-left: auto; font-weight: 400; }
[data-checklist].hide-done .ck-item.done { display: none; }
.progress { height: 6px; background: var(--hover); border-radius: 4px; overflow: hidden; width: 140px; }
.progress span { display: block; height: 100%; background: var(--ok); }
.progress.over span { background: var(--danger); }
.timer-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ok-soft); color: var(--ok); border-radius: 20px; padding: 2px 4px 2px 10px; font-size: var(--font-size-sm); }
.timer-chip a { color: inherit; display: inline-flex; align-items: center; gap: 4px; }
.timer-chip b { font-variant-numeric: tabular-nums; }
.comment { display: flex; gap: 10px; margin-bottom: 14px; }
.comment .bubble { background: var(--hover); border-radius: 10px; padding: 8px 12px; flex: 1; }
.history td { padding: 6px 8px; font-size: var(--font-size-sm); }

/* kanban */
.board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.col { background: var(--hover); border-radius: var(--radius); padding: 10px; min-height: 260px; border: 2px solid transparent; }
.col.over { border-color: var(--accent); }
.col.deny { border-color: var(--danger); }
.colhead { display: flex; align-items: center; gap: 8px; margin: 2px 2px 10px; }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow); }
.kcard[draggable=true] { cursor: grab; }
.kcard.dragging { opacity: .5; }
[hidden] { display: none !important; }
.kcard .foot { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.kcard .kamount { margin-top: 4px; }
.kcard .kline { margin-top: 3px; overflow-wrap: anywhere; }
.kcard .kline:has(.kval:empty) { display: none; }
.board.plan { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.plan .kcard { cursor: grab; }
.board.deadlines { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.deadlines .kcard { cursor: grab; }
.deadlines .dcol-overdue .colhead b { color: var(--danger); }
.add-col { background: none; border: 2px dashed var(--line); }
.stage-menu { margin-left: auto; position: relative; }
.stage-menu[open] > form { margin-top: 6px; }

/* project kanban: columns are the project's stages */
.board.stages { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); }
.stages .col { background: none; border-left: 1px dashed var(--line); border-radius: 0; padding: 0 8px; }
.stages .col.over { background: var(--hover); border-color: var(--accent); border-style: solid; }
.stagehead { background: var(--stage); color: var(--stage-fg); border-radius: var(--stage-radius); padding: 6px 10px; margin: 0 0 8px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-right: 18px; }
.stagehead .stitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stagehead .colcount { opacity: .85; font-size: var(--font-size-sm); }
.stagehead .stage-menu summary { color: var(--stage-fg); }
.stagehead .stage-menu[open] { position: static; }
.stage-pop { position: absolute; z-index: 5; margin-top: 8px; width: 240px; background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px; }
.stages .col { position: relative; }
.stage-pop input[type=text] { width: 100%; margin-bottom: 6px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.swatches label { width: 20px; height: 20px; border-radius: 50%; background: var(--sw); cursor: pointer; outline-offset: 2px; }
.swatches label:has(input:checked) { outline: 2px solid var(--text); }
.swatches input { display: none; }
.quick > summary { list-style: none; text-align: center; color: var(--muted); padding: 4px; border-radius: 8px; cursor: pointer; }
.quick > summary::-webkit-details-marker { display: none; }
.quick > summary:hover { background: var(--hover); color: var(--text); }
.quick form { display: flex; gap: 6px; margin-bottom: 8px; }
.quick input { flex: 1; min-width: 0; }
.quick form.crmquick { flex-direction: column; } /* CRM: title, amount, client one under another */
/* CRM «Контроль дубликатов» while a form is filled (crmdupcheck.js) */
.dupcheck { background: var(--warn-soft); border: 1px solid var(--warn); border-radius: 8px; padding: 6px 10px; margin: 6px 0; font-size: .92em; }
.dupcheck-head { font-weight: 600; }
.dupcheck ul { margin: 4px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; }
.dupcheck li { overflow-wrap: anywhere; }
.kcard .ttitle { font-weight: 600; }
.kcard .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.kcard .chip { display: inline-flex; align-items: center; gap: 3px; font-size: var(--font-size-sm); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0 5px; }
.kcard .chip.done { color: var(--st-completed-fg); }
.kcard .prio { color: var(--danger); }
.kcard .kcover { display: block; margin-top: 6px; border-radius: 6px; overflow: hidden; background: var(--line); }
.kcard .kcover img { display: block; width: 100%; max-height: 140px; object-fit: cover; }
.kcard .ktags { margin-top: 4px; overflow-wrap: anywhere; }
.stages .more { text-align: center; padding: 6px; }

/* gantt: geometry from the server, colors from theme variables */
.gantt { display: grid; grid-template-columns: 300px 1fr; }
.g-names { border-right: 1px solid var(--line); background: var(--card); }
.g-name { display: flex; align-items: center; padding: 0 12px; border-bottom: 1px solid var(--line); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--font-size-sm); }
.g-name a { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.g-chart { overflow-x: auto; }
.g-chart svg { display: block; font: 11px var(--font); }
.g-month { fill: var(--hover); }
.g-month-label { fill: var(--text); font-weight: 600; }
.g-tick { fill: var(--muted); }
.g-grid { stroke: var(--line); stroke-width: 1; }
.g-grid.strong { stroke: var(--muted); stroke-opacity: .4; }
.g-row { stroke: var(--line); }
.g-weekend { fill: var(--hover); }
.g-today { stroke: var(--danger); stroke-width: 2; stroke-dasharray: 4 3; }
.g-bar { fill: var(--accent); }
.g-bar.st-pending { fill: var(--muted); }
.g-bar.st-in_progress { fill: var(--st-in_progress-fg); }
.g-bar.st-awaiting_control { fill: var(--st-awaiting_control-fg); }
.g-bar.st-completed { fill: var(--st-completed-fg); }
.g-bar.st-deferred { fill: var(--st-deferred-fg); }
.g-bar.derived { fill-opacity: .45; }
.g-bar.over { stroke: var(--danger); stroke-width: 2; }
.g-link { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.g-link.bad { stroke: var(--danger); stroke-width: 2; }
.g-arrowhead { fill: var(--muted); }
.g-arrowhead.bad { fill: var(--danger); }
.g-link[data-link] { cursor: pointer; }
.g-link[data-link]:hover { stroke: var(--accent); stroke-width: 3; }
.g-link.draft { stroke: var(--accent); stroke-dasharray: 4 3; pointer-events: none; }
.g-item.edit .g-bar { cursor: grab; }
.g-item.dragging .g-bar { cursor: grabbing; fill-opacity: .8; }
.g-dot { fill: var(--card); stroke: var(--accent); stroke-width: 1.5; opacity: 0; cursor: crosshair; }
.g-item:hover .g-dot, .gantt svg:has(.g-link.draft) .g-dot { opacity: 1; }
.g-deadline { fill: var(--danger); }
.g-fold { display: inline-flex; width: 18px; flex: none; color: var(--muted); }
.g-tip { position: fixed; z-index: 50; pointer-events: none; background: var(--text); color: var(--card); padding: 3px 8px; border-radius: 4px; font-size: var(--font-size-sm); }
@media (max-width: 900px) { .gantt { grid-template-columns: 140px 1fr; } }

/* login */
.login { min-height: 100vh; display: grid; place-items: center; background: var(--login-bg); }
.login .card { width: 360px; text-align: center; padding: 32px; }
.login .logo { justify-content: center; color: var(--text); }
.login .logo b { color: var(--on-accent); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; }
  .side nav { flex-direction: row; flex-wrap: wrap; }
  .side .sep, .side .grow, .side nav a .lbl { display: none; }
  .side .msec { position: relative; }
  .side .msec summary .lbl, .side .msec .caret { display: none; }
  .side .msec[open] .msub { position: absolute; z-index: 10; background: var(--side-bg); border-radius: var(--radius-sm); padding: 6px; min-width: 200px; }
  .side .msec .msub .lbl { display: inline; }
  .layout2 { grid-template-columns: 1fr; }
  .content { padding: 14px; }
  .board { grid-template-columns: repeat(5, 240px); }
}

/* ---------- the phone (≤ 760px), as the portal app: the bar at the bottom and the left menu sliding out (drawer.js) ---------- */
.mnav, .mnav-burger { display: none; }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; inset: 0 auto 0 0; z-index: 30; width: min(300px, 84vw); height: 100%; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; padding: calc(12px + env(safe-area-inset-top)) 10px 16px; overflow-y: auto; transform: translateX(-105%);
    transition: transform .2s ease; box-shadow: var(--shadow-pop); }
  :root[data-drawer] .side { transform: none; }
  .side nav { flex-direction: column; flex-wrap: nowrap; }
  .side .sep, .side .grow { display: block; }
  .side nav a .lbl, .side .msec summary .lbl, .side .msec .caret { display: inline; }
  .side .msec[open] .msub { position: static; background: none; padding: 0; min-width: 0; }
  .mnav-shade { position: fixed; inset: 0; z-index: 29; background: rgba(16, 24, 40, .45); }
  :root[data-drawer] { overflow: hidden; }
  .mnav-burger { display: inline-flex; padding: 6px; }
  .top { padding: 8px 10px; gap: 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .top .me-btn .small, .top .timer-chip b, .top .workday summary .small { display: none; }
  .top .search { min-width: 0; }
  .top .me { gap: 4px; }
  .content { padding: 12px 10px calc(72px + env(safe-area-inset-bottom)); }
  .mnav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: var(--card); border-top: 1px solid var(--line);
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(16, 24, 40, .08); }
  .mnav > a, .mnav > button { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px 4px;
    font-size: 11px; color: var(--muted); background: none; border: 0; border-radius: var(--radius-sm); min-width: 0; font-family: inherit; }
  .mnav > a span, .mnav > button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mnav > a:hover { text-decoration: none; }
  .mnav > a.on { color: var(--accent); }
  .mnav .i { --icon-size: 22px; }
  .mnav .mcnt { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; line-height: 18px;
    font-weight: 600; background: var(--ok); color: var(--on-accent); text-align: center; }
  .mnav .mcnt.red { background: var(--danger); }
  /* the head of a section: its buttons go on to the next lines instead of making the page wider than the phone (GO24DEV-744) */
  .pagehead { flex-wrap: wrap; gap: 8px; row-gap: 6px; }
  .pagehead h1 { font-size: 20px; }
  .pagehead .calviews { margin-bottom: 0; }
  .pagehead, .row.bi-head { flex-wrap: wrap; }
  .pop { max-width: calc(100vw - 16px); }
  /* one column: its cards no wider than the screen, whatever is inside (a long login, a wide table — they scroll) */
  .profile > *, .crmcatalog > * { min-width: 0; }
  /* tabs in one line scrolled sideways, as in the portal app — not seven lines of CRM's tabs above the list */
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs > * { flex: none; white-space: nowrap; }
  .tabs > form, .tabs > .row { position: sticky; right: 0; padding-left: 6px; background: var(--bg); }  /* the search of a list stays in sight */
  .tabs > form input[type=search] { width: 130px; }
  .phead { flex-wrap: wrap; } .phead > div[style] { min-width: 60%; }
  /* a menu dropping from a button (a settings, a «+» of the head) takes the screen's width under its button, wherever the
     button is in the row — else the one on the right goes past the screen's edge */
  .content details[open] > .pop:not(.up):not([style]) { position: fixed; left: 10px; right: 10px; top: auto; width: auto; min-width: 0; max-width: none;
    max-height: calc(100vh - 140px); overflow-y: auto; }
}

/* ---------- task card: the task on the left, its chat on the right (as the portal task card) ---------- */
.tcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 42%); gap: var(--gap); align-items: start; }
.tleft { min-width: 0; }
.thead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.thead h1 { flex: 1; overflow-wrap: anywhere; }
.thead .prio { color: var(--danger); margin-top: 6px; }
.tmenu, .tsettings, .tfoot .more { position: relative; }
.tviews { position: relative; justify-self: start; } .tviews > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; } .tviews > summary::-webkit-details-marker { display: none; }
.tmenu > summary, .tsettings > summary, .tfoot .more > summary { list-style: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; }
.tmenu > summary::-webkit-details-marker, .tsettings > summary::-webkit-details-marker, .tfoot .more > summary::-webkit-details-marker { display: none; }
.tmenu > summary:hover, .tsettings > summary:hover, .tfoot .more > summary:hover { background: var(--hover); color: var(--text); }
.pop { position: absolute; right: 0; z-index: 6; min-width: 240px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.tsettings .pop { left: 0; right: auto; padding: 12px; }
.pop.up { bottom: 100%; top: auto; margin-bottom: 6px; left: 0; right: auto; }
.pop > button, .pop form button { justify-content: flex-start; width: 100%; text-align: left; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; }
.tdesc .desc.clamp { max-height: 12em; overflow: hidden; }
.tdesc-foot { margin-top: 10px; }
.tdesc-foot .spacer { flex: 1; }
.tfields .props, .tpeople .props { grid-template-columns: 150px 1fr; }
.tfields .st { display: inline-flex; align-items: center; gap: 6px; color: var(--st-fg, var(--text)); }
.tpeople .addp { margin-top: 4px; }
[data-copy].copied { color: var(--ok); position: relative; }
[data-copy].copied::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--card); font-size: var(--font-size-sm); padding: 2px 8px; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.tchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 var(--gap); }
.tchip { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px 10px; color: var(--muted); font-size: var(--font-size-sm); cursor: pointer; }
.tchip:hover { color: var(--accent); border-color: var(--accent); }
.tfoot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px var(--pad); box-shadow: var(--shadow); z-index: 4; }
.tchat { position: sticky; top: calc(var(--top-h) + 12px); height: calc(100vh - var(--top-h) - 24px); display: flex; flex-direction: column;
  background: var(--chat-bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.chathead { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.chatico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
.msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-empty { margin: auto; text-align: center; max-width: 280px; }
.chat-empty .i { width: 40px; height: 40px; }
.chatday { text-align: center; }
.chatday span, .sysmsg span { display: inline-block; background: var(--chat-sys-bg); color: var(--chat-sys-fg); border-radius: 12px; padding: 2px 10px; font-size: var(--font-size-sm); }
.sysmsg { text-align: center; }
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 88%; }
.msg.mine { align-self: flex-end; }
.msg .bubble { background: var(--chat-other-bg); border-radius: 12px; padding: 6px 10px 4px; box-shadow: var(--shadow); min-width: 80px; }
.msg.mine .bubble { background: var(--chat-mine-bg); }
.msg .who { display: block; font-size: var(--font-size-sm); color: var(--accent); }
.msg .text { overflow-wrap: anywhere; }
.msg .time { display: block; text-align: right; font-size: 11px; color: var(--muted); }
.chatform { display: flex; gap: 8px; align-items: flex-end; padding: 10px; background: var(--card); border-top: 1px solid var(--line); flex-wrap: wrap; }
.chatform textarea { flex: 1; resize: none; min-height: 40px; max-height: 200px; margin: 0; }
.chatform .send { border-radius: 50%; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; }
.chat-error { flex-basis: 100%; color: var(--danger); font-size: var(--font-size-sm); }
@media (max-width: 1000px) {
  .tcard { grid-template-columns: 1fr; }
  .tchat { position: static; height: 70vh; }
}
.pop button.ghost { color: var(--text); padding: 6px 8px; display: flex; align-items: center; gap: 8px; border-radius: 8px; }
.pop button.ghost:hover { background: var(--hover); color: var(--text); }
/* the task card and the kanban use the whole width */
.content:has(.tcard), .content:has(.board.stages) { max-width: none; }
.tcard .st { padding: 1px 8px; border-radius: 6px; background: var(--st-bg, transparent); }

/* task lists: a horizontal scroll on narrow screens instead of squeezed columns */
.tlist-wrap { overflow-x: auto; }
/* the footer of a task list grids: ticked / all, the pages, «На странице» */
.tlist-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); }
.tlist-foot b { color: var(--text); }
.tlist-foot .pager { display: flex; align-items: center; gap: 2px; }
.tlist-foot .pager a, .tlist-foot .pager b { min-width: 28px; padding: 3px 6px; text-align: center; border-radius: var(--radius); }
.tlist-foot .pager a:hover { background: var(--hover); }
.tlist-foot .pager b.on { background: var(--accent-soft); color: var(--accent); }
.tlist-foot .pagesize { margin-left: auto; }
.tlist-foot .pagesize select { width: auto; margin-left: 4px; }
.tlist th, .tlist td { white-space: nowrap; }
.tlist td:nth-child(3) { white-space: normal; min-width: 260px; width: 40%; }
.tlist .gearcol { width: 36px; padding: 6px 0 6px 10px; }
.colpick { position: relative; }
.colpick > summary { list-style: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; }
.colpick > summary::-webkit-details-marker { display: none; }
.colpick > summary:hover { background: var(--hover); color: var(--text); }
.colpick .pop { left: 0; right: auto; text-transform: none; letter-spacing: 0; font-size: var(--font-size); color: var(--text); font-weight: 400; }
.colpick .check { margin: 4px 0; }
/* task lists: headers sort, ☰ of a row is its menu, a click on the deadline changes it */
.tlist .tsort { display: inline; }
.tlist .tsort button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; font: inherit; color: inherit; }
.tlist .tsort button:hover { color: var(--text); }
.tlist .tsort .i { width: 14px; height: 14px; }
.trowmenu, .tdl { position: relative; display: inline-block; }
.trowmenu > summary, .tdl > summary { list-style: none; cursor: pointer; border-radius: 6px; }
.trowmenu > summary::-webkit-details-marker, .tdl > summary::-webkit-details-marker { display: none; }
.trowmenu > summary { color: var(--muted); display: grid; place-items: center; width: 26px; height: 26px; opacity: .55; }
.tlist tr:hover .trowmenu > summary, .trowmenu[open] > summary { opacity: 1; }
.trowmenu > summary:hover, .tdl > summary:hover { background: var(--hover); color: var(--text); }
.tdl > summary { padding: 2px 4px; margin: -2px -4px; }
.trowmenu .pop, .tdl .pop { left: 0; right: auto; white-space: normal; font-weight: 400; }
.tdl .pop { min-width: 280px; gap: 6px; }
.trowmenu .pop a.button.ghost { border-color: transparent; background: none; box-shadow: none; justify-content: flex-start; padding: 6px 8px; color: var(--text); font-weight: 400; }
.trowmenu .pop a.button.ghost:hover { background: var(--hover); }

/* left menu sections (Задачи, Проекты, Файлы…): a click on the name or icon opens the section's own items */
.side .msec > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--side-text); cursor: pointer; user-select: none; position: relative; }
.side .msec > summary::-webkit-details-marker { display: none; }
.side .msec > summary:hover { background: var(--side-bg-hover); color: var(--side-text-active); }
.side .msec > summary .lbl { flex: 1; }
.side .msec > summary .caret { width: 14px; height: 14px; opacity: .6; transition: transform .15s; }
.side .msec[open] > summary .caret { transform: rotate(90deg); }
.side .msec[open] > summary .cnt { display: none; }
.side .msec > summary .cnt { position: static; padding: 0 7px; font-size: 12px; background: var(--danger); color: var(--on-accent); border-radius: 10px; line-height: 18px; }
.side .msub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; padding-left: 28px; }
.side .msub a { padding: 6px 10px; }
.side .msub a.proj .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.side .msub a.proj .n { font-size: 12px; opacity: .6; }

/* «Сотрудники»: list filters, employee card, company structure */
.filters { margin-bottom: var(--gap); }
a.person { display: inline-flex; align-items: center; gap: 8px; color: var(--text); padding: 3px 0; }
a.person:hover { text-decoration: none; color: var(--accent); }
.subpeople { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; }
.profile { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap); align-items: start; }
.profile .person { display: flex; }
.phead { display: flex; align-items: center; gap: 16px; }
.phead .ava.lg { width: 72px; height: 72px; font-size: 26px; }
button.danger { color: var(--danger); }
.orgtree { overflow-x: auto; padding-bottom: 12px; }
.dept { display: flex; flex-direction: column; align-items: flex-start; }
.dkids { margin-left: 28px; padding-left: 18px; border-left: 2px solid var(--line); display: flex; flex-direction: column; gap: 0; }
.dkids > .dept { position: relative; }
.dkids > .dept::before { content: ""; position: absolute; left: -18px; top: 28px; width: 16px; border-top: 2px solid var(--line); }
.dcard { min-width: 300px; max-width: 420px; margin-bottom: 10px; padding: 12px 14px; }
.dept.root > .dcard { border-color: var(--accent); }
.dhead { display: flex; align-items: center; gap: 8px; }
.dhead .dname { flex: 1; }
.dhead .dname a { color: var(--text); }
.dlead { margin-top: 6px; }
.dchats { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* «Чаты и каналы» of a department */
.dchats .pill .icon { width: 14px; height: 14px; }
.deptchat { padding: 6px 0; border-bottom: 1px solid var(--line); }
.deptchat:last-child { border-bottom: 0; }
.dpeople { margin-top: 6px; }
.dpeople .person { display: flex; }
/* the department menu opens under the card, inside it: never past the screen edge */
.dcard { position: relative; }
.dmenu { position: static; }
.dmenu .pop { left: 0; right: auto; top: 44px; width: 100%; min-width: 280px; }
.dmenu .pop input, .dmenu .pop select { width: 100%; }
/* the search and drags in the structure (structure.js) */
.structbar { align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.structfind { width: 320px; max-width: 100%; }
.dept.struct-hide, .teamcard.struct-hide { display: none; }
.dcard.found { box-shadow: 0 0 0 2px var(--accent); }
.dcard .person.found { background: var(--accent-soft); border-radius: 6px; }
.orgtree .dhead[draggable], .orgtree .dpeople .person[draggable] { cursor: grab; }
/* «Команды» under a department (GO24DEV-689) */
.dteams { display: flex; flex-wrap: wrap; gap: 0 10px; margin-left: 28px; }
.teamcard { min-width: 260px; max-width: 360px; margin-bottom: 10px; padding: 10px 12px; position: relative; border-left: 3px solid var(--violet); }
.teamcard .teamname { flex: 1; }
.teamcard .teamname a { color: var(--text); }
.teamcard .teamdesc { margin: 6px 0 0; white-space: pre-line; }
.teamcard.found { box-shadow: 0 0 0 2px var(--violet); }
.teamcard .person.found { background: var(--accent-soft); border-radius: 6px; }
.pill.team-pill { background: var(--violet-soft); color: var(--violet); }
.orgtree .dragging { opacity: .5; }
.dcard.drop-in { outline: 2px dashed var(--accent); outline-offset: 2px; }
@media (max-width: 1000px) { .profile { grid-template-columns: 1fr; } }

/* employee photo (lists, structure, card) */
.ava.photo { background: var(--avatar-photo) center / cover no-repeat; color: transparent; }
.pphoto { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.photoform label { cursor: pointer; font-size: var(--font-size-sm); }
input:invalid:not(:placeholder-shown) { border-color: var(--danger); }

/* scrum: backlog on the left, sprints on the right */
.scrum { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(360px, 1.3fr); gap: var(--gap); align-items: start; }
.scrum .backlog { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; }
.scrum [data-sprint].over { outline: 2px solid var(--accent); outline-offset: 2px; }
.shead { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.shead .spacer, .sprinthead .spacer { flex: 1; }
.sprint.active { border-color: var(--accent); }
.sprint .progress { display: block; width: 100%; margin: 4px 0 8px; }
/* «Мероприятия» of a scrum team: the next meetings, «Присоединиться» */
.scrummeet { margin-bottom: var(--gap); }
.scrummeet .shead b { display: inline-flex; align-items: center; gap: 6px; }
.scrummeet .pop { right: 0; left: auto; padding: 6px; }
.scrummeet .pop a.button { display: flex; width: 100%; justify-content: flex-start; }
.meetline { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.meetline .spacer { flex: 1; }
.quickrow { display: flex; gap: 6px; margin-bottom: 8px; }
.quickrow input { flex: 1; min-width: 0; }
.srows { display: flex; flex-direction: column; gap: 4px; min-height: 8px; }
.srow { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; }
.backlog .srow { background: var(--bg); }
.srow[draggable=true] { cursor: grab; }
.srow.dragging { opacity: .5; }
.srow.done .ttitle { text-decoration: line-through; color: var(--muted); }
.srow .ttitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.srow .spacer { flex: 1; }
.srow .grip { color: var(--muted); cursor: grab; }
.srow .sp { width: 44px; text-align: center; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--hover); font-variant-numeric: tabular-nums; }
.srow .epicsel { width: 110px; padding: 2px 4px; font-size: var(--font-size-sm); }
.epic { display: inline-block; font-size: 12px; padding: 0 8px; border-radius: 10px; background: var(--epic); color: var(--stage-fg); white-space: nowrap; }
.epicline { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.newsprint button { width: 100%; padding: 18px; border: 2px dashed var(--line); background: none; color: var(--muted); border-radius: var(--radius); cursor: pointer; }
.newsprint button:hover { color: var(--accent); border-color: var(--accent); }
.sprinthead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; }
summary.button { list-style: none; cursor: pointer; }
summary.button::-webkit-details-marker { display: none; }
.ghostbtn { background: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; color: var(--text); cursor: pointer; }
/* burndown: geometry from the server, colors from tokens */
.burn svg { width: 100%; max-width: 760px; height: auto; display: block; }
.burn .axis { stroke: var(--line); }
.burn .lbl { fill: var(--muted); font-size: 11px; }
.burn .ideal { fill: none; stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 2; }
.burn .real { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.burn .legend { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.burn .lg { display: inline-block; width: 18px; border-top: 2px dashed var(--muted); }
.burn .lg.real { border-top: 3px solid var(--accent); margin-left: 12px; }
@media (max-width: 1000px) { .scrum { grid-template-columns: 1fr; } }

/* person pop-up card */
.me-btn { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 4px 8px; border-radius: 20px; cursor: pointer; color: var(--text); }
.me-btn:hover { background: var(--hover); }
.pcard-pop { position: absolute; z-index: 50; width: 340px; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 14px; }
.pcard .pc-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.pcard .pc-head .ava.lg { width: 56px; height: 56px; }
.pcard .props { grid-template-columns: 120px 1fr; gap: 6px 8px; }
.pcard .pc-actions { margin-top: 12px; }
a.button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); }
a.button:hover { text-decoration: none; border-color: var(--accent); color: var(--accent); }

/* fields of the same row have the same height (selects and dates included) */
input[type=text], input[type=tel], input[type=date], input[type=time], input[type=email], input[type=number], select { min-height: 38px; }
label .req { color: var(--danger); }
.form-error { color: var(--danger); background: var(--danger-soft); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; }

/* «Лента» */
.feed { max-width: 860px; }
.composer input[type=text] { margin-bottom: 8px; }
.composer textarea { margin-bottom: 8px; }
.fpost.important { border-color: var(--danger); }
/* new since the feed was last opened */
.fpost.fnew { box-shadow: inset 3px 0 0 var(--accent); }
.fc.fnew { box-shadow: inset 2px 0 0 var(--accent); padding-left: 8px; }
.fhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.fimp { color: var(--danger); font-weight: 600; margin-bottom: 6px; }
.fpost h3 { margin: 4px 0 6px; font-size: var(--font-size-h2); }
.fbody { line-height: 1.6; overflow-wrap: anywhere; }
.fbody blockquote { margin: 6px 0; padding: 2px 10px; border-left: 3px solid var(--line); color: var(--muted); }
.fbody pre { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: var(--hover); overflow-x: auto; white-space: pre-wrap; }
.fbody code { font-size: 13px; }
/* a long post folded, «Развернуть» under it */
.fbody.ffold { max-height: 400px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.ffold-btn { margin-top: 4px; }
/* the editor's buttons of a post */
.fmtbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-bottom: 4px; }
.fmtbar .ghostbtn { padding: 3px 6px; color: var(--muted); }
.fmtbar .ghostbtn:hover { color: var(--text); }
.fmtbar-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--line); }
.ftags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ftags .ftag { padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; }
.ftag { text-decoration: none; }
.ftags-new input { min-width: 220px; }
.factions { margin-top: 10px; }
.ghostbtn.on { color: var(--accent); border-color: var(--accent); }
.fcomments { margin-top: 8px; border-top: 1px solid var(--line); }
.fc { padding: 8px 0; border-bottom: 1px solid var(--line); }
.fc:target { background: var(--hover); }
.fc-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.fc-actions > .ghostbtn { color: var(--muted); }
.fcomment-form { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fcomment-files { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fcomment-files:not(:has(.dpick-chip)):has([data-files-names]:empty) { display: none; }
.fdrop { outline: 2px dashed var(--accent); outline-offset: 2px; }
.fc .ffiles .fimg img { max-width: 160px; max-height: 120px; }
.fcomment-form input, .fcomment-form textarea { flex: 1; }
.fcomment-form textarea { resize: none; min-height: 36px; max-height: 240px; overflow-y: auto; }
.fc-more { display: block; margin: 6px 0; }
.fc blockquote { margin: 4px 0; padding: 2px 10px; border-left: 3px solid var(--line); color: var(--muted); }
.fevent { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; font-size: var(--font-size-sm); }
.fevent a { min-width: 0; overflow-wrap: anywhere; }
.fedit input, .fedit textarea { margin-bottom: 8px; }
/* reactions of the feed: the button, the summary, the picker and «Кто оценил» */
.freact { display: inline-flex; gap: 4px; align-items: center; position: relative; }
.freact .ghostbtn { display: inline-flex; align-items: center; gap: 4px; }
.freact.small { margin-top: 4px; }
.freact.small .ghostbtn { border: 0; padding: 2px 6px; font-size: var(--font-size-sm); color: var(--muted); }
.freact.small .ghostbtn.on { color: var(--accent); }
.freact-sum .remoji + .remoji { margin-left: -4px; }
.remoji { font-size: 1.1em; line-height: 1; }
.rpicker { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; display: flex; gap: 2px; padding: 4px 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.rpicker button { border: 0; background: none; font-size: 24px; line-height: 1; padding: 4px; cursor: pointer; transition: transform .1s; }
.rpicker button:hover, .rpicker button:focus-visible { transform: scale(1.3); }
.rwho { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 280px; max-width: calc(100vw - 32px); max-height: 320px;
  overflow: auto; padding: 8px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.rwho .tabs { margin-bottom: 6px; }
.rwho .tabs a { padding: 4px 8px; cursor: pointer; }
.rwho .person { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.rwho .person img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.rwho .person span:last-child { margin-left: auto; }
.fviews .rwho { left: auto; right: 0; }

/* messenger: chats | conversation | thread */
.content:has(.im) { max-width: none; padding-bottom: 0; }
.im { display: grid; grid-template-columns: var(--im-rooms, 320px) minmax(0, 1fr); gap: var(--gap); height: calc(100vh - var(--top-h) - 2 * var(--content-pad)); }
.im:has(.im-thread:not([hidden])) { grid-template-columns: var(--im-rooms, 320px) minmax(0, 1fr) var(--im-side, 360px); }
.im-rooms, .im-chat, .im-thread { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.im-chat, .im-thread { background: var(--im-bg, var(--chat-bg)); }
.im-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; background: var(--card); border-bottom: 1px solid var(--line); }
.im-filter { margin: 8px; width: auto !important; }
.im-new { padding: 0 8px 8px; }
.im-new summary { cursor: pointer; color: var(--accent); font-size: var(--font-size-sm); }
.im-new form { margin-top: 6px; }
.im-list { flex: 1; overflow-y: auto; }
.im-room { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text); border-left: 3px solid transparent; }
.im-room:hover { background: var(--hover); text-decoration: none; }
.im-room.on { background: var(--accent-soft); border-left-color: var(--accent); }
.im-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.im-meta b, .im-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-room .cnt { background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 0 7px; font-size: 12px; }
.im-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--hover); color: var(--muted); font-weight: 700; flex: none; }
.im-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.msg.notice .bubble { background: var(--chat-sys-bg); }
.im-file img, .im-file video { display: block; max-width: min(360px, 100%); max-height: 320px; height: auto; border-radius: 8px; margin: 4px 0; }
.im-file audio { max-width: 100%; vertical-align: middle; }
.im-filecard { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; margin: 4px 0; max-width: 100%; }
.im-filecard span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-filecard a[data-im-view] { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.im-filedl { color: var(--muted); }
.chatform .attach { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; color: var(--muted); }
.chatform .attach:hover { color: var(--accent); background: var(--hover); }
/* «Прикрепить»: the paperclip's menu opens above the field */
.im-attach-wrap { position: relative; display: contents; }
.im-attach-menu { position: absolute; left: 0; bottom: calc(100% + 4px); z-index: 20; display: flex; flex-direction: column; min-width: 220px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.im-attach-menu[hidden] { display: none; }
.im-attach-menu > label { margin: 0; }
.im-attach-menu > * { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: none;
  color: var(--text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.im-attach-menu > *:hover, .im-attach-menu > *:focus-visible { background: var(--hover); color: var(--accent); }
.chatform .voice { width: auto; min-width: 40px; padding: 0 8px; display: inline-flex; gap: 2px; border: 0; background: none; }
.chatform .voice.recording { color: var(--danger); background: var(--hover); font-variant-numeric: tabular-nums; }
.im-voice-text { white-space: pre-wrap; color: var(--muted); max-width: 360px; }
.im-voice-text:empty { display: none; }
.msg .bubble { position: relative; }
/* room for the «…» in the bubble's corner: it never covers the author or the text — the bubble grows instead */
.msg .bubble:has(> .im-menu) { padding-right: 32px; }
.im-menu { position: absolute; top: 2px; right: 4px; opacity: 0; }
.msg:hover .im-menu, .im-menu[open] { opacity: 1; }
.im-menu > summary { list-style: none; cursor: pointer; color: var(--muted); padding: 0 4px; }
.im-menu > summary::-webkit-details-marker { display: none; }
/* «Выбрать»: chosen messages of the chat or the thread, the bar of actions under them */
.selecting .msg:has(> .bubble) { cursor: pointer; position: relative; padding-left: 30px; }
.selecting .msg:has(> .bubble)::before { content: ""; position: absolute; left: 6px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid var(--muted); border-radius: 50%; box-sizing: border-box; }
.selecting .msg.chosen::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--card); }
.selecting .msg.chosen > .bubble { outline: 2px solid var(--accent); }
.selecting .im-menu, .selecting .react-add { display: none; }
.im-selbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 10px; border-top: 1px solid var(--line); background: var(--card); }
.im-selbar[hidden] { display: none; }
.im-selbar [data-sel-count] { margin-right: auto; }
.im-menu .pop { position: absolute; right: 0; top: 100%; z-index: 5; display: flex; flex-direction: column; min-width: 180px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.im-menu .pop button { display: flex; gap: 8px; align-items: center; background: none; border: 0; color: var(--text); padding: 6px 8px; text-align: left; cursor: pointer; }
.im-menu .pop button:hover { background: var(--hover); }
.im-menu .pop button.danger { color: var(--danger); }
/* the message's «…»: a row of quick reactions on top, the whole choice beside the message */
.im-menu .pop .im-menu-reacts { display: flex; gap: 2px; padding: 2px 2px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.im-menu .pop .im-menu-reacts button { padding: 4px 6px; font-size: 18px; line-height: 1; border-radius: 8px; }
.msg .bubble > .im-emoji { top: 28px; bottom: auto; left: auto; right: 0; }
.im-menu .pop { overflow-y: auto; }
/* an open «…» is placed by im.js over everything, whole in the window (the chat and thread panes clip their content) */
.im-menu .pop.fixed { position: fixed; right: auto; bottom: auto; z-index: 60; }
.im-share { width: min(620px, calc(100vw - 32px)); }
.im-share img { max-width: 100%; max-height: 50vh; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; align-self: center; }
.im-share .row { display: flex; flex-wrap: wrap; gap: 8px; }
.im-menu .pop a { display: flex; gap: 8px; align-items: center; color: var(--text); padding: 6px 8px; }
.im-menu .pop a:hover { background: var(--hover); text-decoration: none; }
/* group chats: the people in the header, a line about the chat itself */
.im-group { position: relative; }
.im-group > summary { list-style: none; }
.im-group > summary::-webkit-details-marker { display: none; }
.im-group .pop { position: absolute; right: 0; top: 100%; z-index: 6; display: flex; flex-direction: column; gap: 8px; width: min(340px, calc(100vw - 32px));
  padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.im-members { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.im-members li { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.im-members li a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-members form { margin: 0; }
.im-members li a.person { display: flex; gap: 8px; align-items: center; color: inherit; }
/* the author's photo opens their card, the name puts «@Name» into the message */
.msg .im-ava { display: flex; flex-shrink: 0; }
.msg .who[data-mention-name] { cursor: pointer; }
.msg .who[data-mention-name]:hover { text-decoration: underline; }
.im-head .im-peer { color: inherit; }
.mention[data-user] { cursor: pointer; }
.im-group-new { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
img.im-ico { object-fit: cover; padding: 0; }
.msg.system { justify-content: center; text-align: center; }
.tick { letter-spacing: -3px; margin-left: 2px; }
.tick.read { color: var(--accent); }
.im-typing { padding: 2px 14px; font-style: italic; }
/* «Звонит …» (ring.js): over every page, bottom right */
.ringpop { position: fixed; right: 16px; bottom: 16px; z-index: 1000; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center;
  width: min(360px, calc(100vw - 32px)); padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .2); animation: ringpop 1.2s ease-in-out infinite alternate; }
.ringpop img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.ringwho { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.ringpop .row { width: 100%; gap: 8px; }
@keyframes ringpop { from { box-shadow: 0 8px 28px rgba(0, 0, 0, .2); } to { box-shadow: 0 8px 28px rgba(0, 0, 0, .2), 0 0 0 4px var(--accent-soft); } }
@media (prefers-reduced-motion: reduce) { .ringpop { animation: none; } }
/* the softphone (/phone, softphone.js) and its button in the top bar (phone.js) */
.phonebtn[data-state="talking"], .phonebtn[data-state="dialing"] { color: var(--ok); }
.phonebtn[data-state="ringing"] { color: var(--accent); animation: ringpop 1.2s ease-in-out infinite alternate; }
.softphone { max-width: 340px; margin: 0 auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sp-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-top .muted { flex-basis: 100%; }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); flex: none; }
.sp-dot.ok { background: var(--ok); }
.sp-dot.busy { background: var(--warn); }
.sp-dot.talk { background: var(--accent); }
.sp-dot.err { background: var(--danger); }
.sp-who { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.sp-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.sp-who > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.sp-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-timer { font-variant-numeric: tabular-nums; color: var(--muted); }
.sp-entry { display: flex; gap: 6px; }
.sp-entry input { flex: 1; font-size: 1.4em; text-align: center; letter-spacing: .04em; }
.sp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-keys button { font-size: 1.3em; padding: 10px 0; justify-content: center; text-align: center; }
.sp-acts { display: flex; gap: 8px; justify-content: center; align-items: center; }
.sp-acts .sp-call, .sp-acts .sp-hang { flex: 1; padding: 10px; color: #fff; border: 0; }
.sp-call { background: var(--ok); }
.sp-hang { background: var(--danger); }
.sp-acts .ghost.on { background: var(--accent-soft); color: var(--accent); }
.sp-hint { text-align: center; }
.sp-links { display: flex; justify-content: center; gap: 12px; }
.sp-who a { color: inherit; }
.sp-card { padding: 10px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); gap: 8px; }
.sp-card-top { justify-content: space-between; }
.sp-client { display: flex; flex-direction: column; gap: 2px; }
.sp-card textarea { width: 100%; resize: vertical; }
/* «Скрипт продаж» — in the call card and tried in «Настройки → Телефония» (salescript.js) */
.ss-box { gap: 6px; padding: 8px; border-radius: var(--radius); background: var(--bg); }
.ss-box [data-sales-view] { display: flex; flex-direction: column; gap: 6px; }
.ss-text { white-space: pre-wrap; }
.ss-answers button { text-align: left; }
.sp-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-list li { overflow-wrap: anywhere; }
.sp-stage { font-size: 12px; padding: 0 6px; border-radius: 8px; background: color-mix(in srgb, var(--c, var(--muted)) 20%, transparent); }
.sp-call-missed > span:first-child { color: var(--danger); }
.sp-call-note { white-space: pre-wrap; }
.crmcall-note, .tel-note { color: var(--text); }
.crmcall-note { margin-top: 4px; font-size: 13px; }
.tel-note { margin-top: 4px; max-width: 320px; font-size: 13px; }
.sp-xfer { padding: 10px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); gap: 8px; }
/* «Детализация звонков» */
.phonefilter { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
.pill.tel-missed { background: var(--danger-soft); color: var(--danger); }
.pill.tel-in { background: var(--ok-soft); color: var(--ok); }
.pill.tel-out { background: var(--accent-soft); color: var(--accent); }
/* «Статистика звонков»: the calls by day, a stacked bar each (answered, missed, outgoing) */
.telbars { display: flex; align-items: flex-end; gap: 2px; height: 160px; overflow-x: auto; padding-bottom: 18px; }
.telbar { position: relative; flex: 1 0 14px; height: 100%; display: flex; flex-direction: column-reverse; }
.telbar small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; color: var(--muted); font-size: 10px; }
.telbar span { display: block; min-height: 0; }
.tb-in { background: var(--ok); } .tb-missed { background: var(--danger); } .tb-out { background: var(--accent); }
.telbars-legend { gap: 14px; } .telbars-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.tel-delta { margin-left: 6px; font-size: 12px; font-weight: normal; color: var(--muted); } .tel-delta.up::before { content: "▲ "; } .tel-delta:not(.up)::before { content: "▼ "; }
.telheat { border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.telheat th { color: var(--muted); font-weight: normal; padding: 0 4px; text-align: center; }
.telheat tbody th { text-align: left; }
.telheat td { position: relative; min-width: 24px; height: 28px; padding: 0; text-align: center; border-radius: 3px; background: var(--hover, rgba(127, 127, 127, .08)); }
.telheat td.h1 { background: color-mix(in srgb, var(--ok) 25%, transparent); } .telheat td.h2 { background: color-mix(in srgb, var(--ok) 50%, transparent); }
.telheat td.h3 { background: color-mix(in srgb, var(--ok) 75%, transparent); } .telheat td.h4 { background: var(--ok); color: #fff; }
.telheat td i { position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); }
/* «Пульс компании» (GO24DEV-748) */
.pulse-h { margin: 0; padding: 12px 14px 4px; }
.pulsemeter { display: block; height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pulsemeter i { display: block; height: 100%; background: var(--accent); }
.pill.pulse-ok { background: var(--ok-soft, var(--line)); color: var(--ok); }
.pulse-tool { display: inline-block; padding: 1px 7px; margin: 1px 0; border-radius: 10px; background: var(--line); font-size: 12px; }
.fside-pulse b { font-size: 20px; }
/* «eNPS»: the scale 0–10 of the answer (red — detractors, grey — passives, green — promoters) and the index */
.enpsscale { display: flex; gap: 4px; flex-wrap: wrap; margin: 8px 0 4px; }
.enpsscore { margin: 0; cursor: pointer; }
.enpsscore input { position: absolute; opacity: 0; pointer-events: none; }
.enpsscore span { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px;
  border: 1px solid var(--line); font-weight: 600; background: var(--bg); }
.enpsscore:hover span { border-color: var(--accent); }
.enpsscore input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.enpsscore input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.enpsscore.s0 input:checked + span, .enpsscore.s1 input:checked + span, .enpsscore.s2 input:checked + span, .enpsscore.s3 input:checked + span,
.enpsscore.s4 input:checked + span, .enpsscore.s5 input:checked + span, .enpsscore.s6 input:checked + span { background: var(--danger, #d9534f); border-color: var(--danger, #d9534f); }
.enpsscore.s9 input:checked + span, .enpsscore.s10 input:checked + span { background: var(--ok, #2e9e5b); border-color: var(--ok, #2e9e5b); }
.enpsends { max-width: 484px; }
.enps-index { color: var(--ok, #2e9e5b); } .enps-index.neg { color: var(--danger, #d9534f); }
.pill.enps-open { background: var(--ok-soft, var(--line)); color: var(--ok); }
.enpsbars .telbar.s0 .tb-in, .enpsbars .telbar.s1 .tb-in, .enpsbars .telbar.s2 .tb-in, .enpsbars .telbar.s3 .tb-in, .enpsbars .telbar.s4 .tb-in,
.enpsbars .telbar.s5 .tb-in, .enpsbars .telbar.s6 .tb-in { background: var(--danger, #d9534f); }
.enpsbars .telbar.s7 .tb-in, .enpsbars .telbar.s8 .tb-in { background: var(--muted, #999); }
.enpsbars .telbar.s9 .tb-in, .enpsbars .telbar.s10 .tb-in { background: var(--ok, #2e9e5b); }
.enpscomment { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: var(--line); }
.phonecalls audio { height: 32px; max-width: 220px; }
.tel-text { margin-top: 4px; max-width: 420px; } .tel-text p { margin: 4px 0 0; white-space: normal; color: var(--text); }
.crmcall audio { height: 30px; max-width: 240px; vertical-align: middle; }
.crmfill form.inline { display: inline; margin: 0 0 0 6px; } /* CoPilot's offered value: «Применить» / «Отклонить» */
/* «Внешние линии» в настройках телефонии */
details.trunk { border-top: 1px solid var(--line); padding: 8px 0; }
details.trunk > summary { cursor: pointer; }
.trunkform { margin-top: 8px; }
.trunkform .grow { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 4px; }
/* voice menu (IVR): an item shows only the fields of its action */
.ivr-act .ivr-p { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.ivr-act .ivr-ring .upick { min-width: 240px; }
.ivr-act:has(option[value="ring"]:checked) .ivr-ring,
.ivr-act:has(option[value="forward"]:checked) .ivr-forward,
.ivr-act:has(option[value="menu"]:checked) .ivr-menu,
.ivr-act:has(option[value="group"]:checked) .ivr-group { display: flex; }
table.ivr td { vertical-align: top; }
/* the chat list: a row's own menu, its marks (pinned, muted, marked unread) */
.im-row { position: relative; }
.im-row[hidden] { display: none; }
.im-rmenu { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); opacity: 0; }
.im-row:hover .im-rmenu, .im-rmenu[open] { opacity: 1; }
.im-rmenu > summary { list-style: none; cursor: pointer; color: var(--muted); padding: 2px 4px; background: var(--card); border-radius: 6px; }
.im-rmenu > summary::-webkit-details-marker { display: none; }
.im-rmenu .pop { position: absolute; right: 0; top: 100%; z-index: 7; display: flex; flex-direction: column; min-width: 210px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.im-rmenu .pop button { display: flex; background: none; border: 0; color: var(--text); padding: 6px 8px; text-align: left; cursor: pointer; }
.im-rmenu .pop button:hover { background: var(--hover); }
.im-rmenu .pop button span { display: flex; gap: 8px; align-items: center; }
.im-rmenu .on, .im-marks .i { display: none !important; }
.im-row[data-favorite="1"] [data-room-mark="favorite"] .on, .im-row[data-muted="1"] [data-room-mark="mute"] .on,
.im-row[data-marked="1"] [data-room-mark="unread"] .on { display: flex !important; }
.im-row[data-favorite="1"] [data-room-mark="favorite"] .off, .im-row[data-muted="1"] [data-room-mark="mute"] .off,
.im-row[data-marked="1"] [data-room-mark="unread"] .off { display: none; }
.im-marks { display: flex; gap: 2px; color: var(--muted); }
.im-row[data-favorite="1"] .im-marks .i-pin, .im-row[data-muted="1"] .im-marks .i-bell-off { display: inline-block !important; }
.cnt.dot { display: none; min-width: 10px; width: 10px; height: 10px; padding: 0; }
.im-row[data-marked="1"] .cnt.dot { display: inline-block; }
.im-row[data-muted="1"] .cnt { background: var(--muted); }
/* pinned messages under the header; the search of messages */
.im-pins:empty { display: none; }
.im-pinbar { position: relative; border-bottom: 1px solid var(--line); }
.im-pinbar > summary { list-style: none; cursor: pointer; padding: 6px 12px; display: flex; gap: 8px; align-items: center; }
.im-pinbar > summary::-webkit-details-marker { display: none; }
.im-pinbar > summary span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-pinbar .pop { position: absolute; left: 8px; right: 8px; top: 100%; z-index: 6; max-height: 320px; overflow: auto; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.im-pin { display: flex; gap: 6px; align-items: center; }
.im-pin a { flex: 1; min-width: 0; padding: 6px 8px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-pin a:hover { background: var(--hover); }
.im-latest { position: sticky; bottom: 8px; align-self: center; margin: -36px auto 8px; z-index: 4; border-radius: 16px; }
/* the «@»: the person was mentioned — in the list, on the message, and a button to the next mention */
.im-room .cnt.at { padding: 0 6px; font-weight: 600; }
/* threads: the unread replies of a chat's threads (beside its own count), of a thread under its root, «Треды» */
.im-room .cnt.th { display: inline-flex; align-items: center; gap: 2px; padding: 0 6px; background: var(--accent-soft); color: var(--accent); }
.im-room .cnt.th[hidden] { display: none; }
.im-room .cnt.th .i { width: 12px; height: 12px; }
.im-room .cnt.th i { font-style: normal; }
.im-threads-btn { position: relative; }
.im-threads-btn .cnt { position: absolute; top: -2px; right: -4px; background: var(--accent); color: var(--on-accent); border-radius: 10px; padding: 0 5px; font-size: 11px; line-height: 16px; }
.im-thnew { margin-left: 6px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.im-thlink.new { font-weight: 600; }
.im-thlink .th-comment, .im.channel .im-thlink .th-reply { display: none; } /* a channel's thread — comments on its post */
.im.channel .im-thlink .th-comment { display: inline; }
.im-thitem.new { background: var(--accent-soft); }
.im-row[data-muted="1"] .cnt.at { background: var(--accent); }
.msg.to-me .bubble { box-shadow: inset 3px 0 0 var(--accent), var(--shadow); }
.im-at { position: sticky; bottom: 8px; align-self: flex-end; margin: -36px 16px 8px auto; z-index: 4; border-radius: 16px; font-weight: 600; }
.im-search-all { display: block; padding: 0 8px 6px; text-align: left; }
.im-search-form { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.im-hits { overflow: auto; flex: 1; padding: 0 8px 8px; }
.im-hit { display: flex; flex-direction: column; gap: 2px; padding: 8px; border-radius: 8px; color: var(--text); text-decoration: none; }
.im-hit:hover { background: var(--hover); }
.im-hit-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.im-media-tabs { margin: 0 0 8px; flex-wrap: wrap; }
.im-media-tabs a { padding: 6px 8px; }
.im-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; }
.im-media-grid > a { aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--hover); display: flex; align-items: center; justify-content: center; }
.im-media-grid img { width: 100%; height: 100%; object-fit: cover; }
.im-media-file > a:first-child { overflow-wrap: anywhere; }
.im-quote { display: block; border-left: 3px solid var(--accent); padding: 2px 8px; margin: 2px 0 4px; color: var(--text); background: var(--hover); border-radius: 4px; }
.im-quote span { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.im-fwd { margin-bottom: 2px; }
/* the buttons of a bot's message (KEYBOARD) and the list of commands on «/» */
.im-kbd { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 2px; }
.im-kbd-row { display: flex; flex-wrap: wrap; gap: 4px; }
.im-kbd-row > * { flex: 1 1 auto; justify-content: center; }
.im-kbd-row > .ghost { border: 1px solid var(--line); }
/* a bot's card (ATTACH): blocks under the text with a colored stripe */
.im-attach { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 2px; padding: 2px 0 2px 10px; border-left: 3px solid var(--accent); }
.im-at-link { display: flex; gap: 8px; align-items: flex-start; }
.im-at-link > span { display: flex; flex-direction: column; min-width: 0; }
.im-at-link img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex: none; }
.im-at-imgs { display: flex; flex-wrap: wrap; gap: 4px; }
.im-at-imgs img { max-width: 240px; max-height: 180px; border-radius: 6px; display: block; }
.im-at-files { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.im-at-hr { border: 0; border-top: 1px solid var(--line); margin: 2px 0; max-width: 100%; }
.im-at-grid { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.im-at-cell { display: flex; flex-direction: column; min-width: 0; }
.im-at-cell.d-BLOCK { flex-basis: 100%; }
.im-at-cell.d-ROW { flex-basis: 100%; flex-direction: row; gap: 8px; }
.im-at-cell.d-ROW > :first-child { flex: 0 0 35%; }
.im-at-user { display: flex; gap: 8px; align-items: center; }
.im-cmds { width: 360px; }
.im-cmds .mention-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the card of a link under the message: the picture, the site, the title and the text of the page */
.im-link { display: block; border-left: 3px solid var(--accent); padding: 4px 8px; margin: 4px 0 2px; max-width: 360px; color: var(--text); text-decoration: none; background: var(--hover); border-radius: 4px; }
.im-link:hover { text-decoration: none; filter: brightness(.98); }
.im-link img { display: block; width: 100%; max-height: 180px; object-fit: cover; border-radius: 4px; margin-bottom: 4px; }
.im-link > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.im-link .site { font-size: 12px; color: var(--muted); }
.im-link .title { color: var(--accent); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.im-link .desc { font-size: 13px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.flink { max-width: 480px; margin: 8px 0 4px; }
/* formatting in a message, as in the portal messenger: a quote, code, links */
.msg .text blockquote { border-left: 3px solid var(--accent); margin: 2px 0; padding: 0 8px; color: var(--muted); }
.msg .text code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; background: var(--hover); border-radius: 4px; padding: 0 4px; }
.msg .text pre { margin: 4px 0; padding: 6px 8px; background: var(--hover); border-radius: 6px; overflow-x: auto; max-width: min(560px, 70vw); }
.msg .text pre code { background: none; padding: 0; white-space: pre; }
.msg .text a { text-decoration: underline; word-break: break-all; }
.msg.flash-msg .bubble { outline: 2px solid var(--accent); }
.im-replying { display: flex; align-items: center; gap: 8px; padding: 4px 12px; border-top: 1px solid var(--line); background: var(--hover); }
.im-replying span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.im-fwd-pick { border: 1px solid var(--line); border-radius: 12px; padding: 16px; width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--text); }
/* «Напомнить» and the marks of kept messages and those with a reminder (GO24DEV-259) */
.im-remind { border: 1px solid var(--line); border-radius: 12px; padding: 16px; width: min(360px, calc(100vw - 32px)); background: var(--card); color: var(--text); }
.im-remind form { display: flex; flex-direction: column; gap: 8px; }
.im-remind label { display: flex; flex-direction: column; gap: 4px; }
.msg .time .im-saved { color: #e0a800; }
.msg .time .im-reminder { cursor: help; }
.im-fwd-list { display: flex; flex-direction: column; max-height: 50vh; overflow-y: auto; margin-top: 8px; }
.im-fwd-list button { justify-content: flex-start; text-align: left; }
/* the widgets of applications in the messenger (GO24DEV-977): the side panel, over the input field, instead of a chat */
.im-appbox { flex: 1; min-height: 0; display: flex; }
.im-appbox iframe, .im-appnav { flex: 1; width: 100%; min-height: 0; border: 0; background: var(--card); }
.im-apppop { margin: 0 10px; padding: 6px 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow, 0 4px 16px rgb(0 0 0 / .12)); max-width: calc(100% - 20px); overflow: auto; }
.im-apppop iframe { display: block; max-width: 100%; border: 0; }
.im-navapps { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.im-navapps a { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; color: inherit; text-decoration: none; }
.im-navapps a .i { color: var(--app-color, var(--accent)); }
.im-navapps a:hover, .im-navapps a.on { background: var(--accent-soft); }
.im-chat.dropping, .im-thread.dropping { position: relative; }
.im-chat.dropping::after, .im-thread.dropping::after { content: attr(data-drop-hint); position: absolute; inset: 8px; display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-weight: 600; pointer-events: none; }
.msg .link.small { font-size: 12px; margin-top: 2px; }
/* «Настройки» of the messenger: the chat background (also the swatches to pick it), all messages on the left (GO24DEV-340) */
.im-bg-plain { --im-bg: var(--chat-bg); }
.im-bg-sky { --im-bg: linear-gradient(160deg, color-mix(in srgb, #5aa9ff 22%, var(--chat-bg)), color-mix(in srgb, #a8e0ff 26%, var(--chat-bg))); }
.im-bg-mint { --im-bg: linear-gradient(160deg, color-mix(in srgb, #3fc59a 20%, var(--chat-bg)), color-mix(in srgb, #c8f2dc 30%, var(--chat-bg))); }
.im-bg-sand { --im-bg: linear-gradient(160deg, color-mix(in srgb, #f2c879 24%, var(--chat-bg)), color-mix(in srgb, #fbe9c6 30%, var(--chat-bg))); }
.im-bg-rose { --im-bg: linear-gradient(160deg, color-mix(in srgb, #f28aa8 20%, var(--chat-bg)), color-mix(in srgb, #fde0e8 30%, var(--chat-bg))); }
.im-bg-lilac { --im-bg: linear-gradient(160deg, color-mix(in srgb, #a98bf2 22%, var(--chat-bg)), color-mix(in srgb, #e6dcff 30%, var(--chat-bg))); }
.im-bg-night { --im-bg: linear-gradient(160deg, #1d2740, #2c3550); }
.im-bg-night .im-msgs .chatday span, .im-bg-night .im-msgs .sysmsg span { background: rgba(255, 255, 255, .14); color: #e8ecf5; }
.im-left .msg.mine { align-self: flex-start; }
.im-left .msg.mine .react-pick { right: auto; }
.im-settings { border: 1px solid var(--line); border-radius: 12px; padding: 16px; width: min(420px, calc(100vw - 32px)); background: var(--card); color: var(--text); }
.im-settings form { display: flex; flex-direction: column; gap: 10px; }
.im-settings fieldset { border: 1px solid var(--line); border-radius: 8px; display: flex; flex-direction: column; gap: 6px; margin: 0; }
.im-settings legend { font-weight: 600; padding: 0 4px; }
.im-bgs { display: flex; flex-wrap: wrap; gap: 8px; }
.im-bgs label { width: 44px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--im-bg); cursor: pointer; position: relative; }
.im-bgs label:has(:checked) { outline: 2px solid var(--accent); outline-offset: 2px; }
.im-bgs input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
@media (max-width: 1000px) { .im, .im:has(.im-thread:not([hidden])) { grid-template-columns: 1fr; height: auto; } .im-msgs { max-height: 60vh; } }

/* page title with the green «Создать» */
.pagehead { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.pagehead h1 { margin: 0; }
a.button.create { background: var(--ok); border-color: var(--ok); color: var(--on-accent); font-weight: 600; }
a.button.create:hover { filter: brightness(1.08); color: var(--on-accent); }
.newtask .ntitle { font-size: var(--font-size-h2); font-weight: 600; margin-bottom: 10px; }
.newtask textarea { margin-bottom: 10px; }

/* «Уведомления»: the bell in the top bar, its pop-up, the list page and toasts */
.bell { position: relative; }
.bell > button { position: relative; padding: 6px; border-radius: 50%; }
.bell > button .i { width: 20px; height: 20px; }
.bell .bcnt { position: absolute; top: -2px; right: -4px; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; text-align: center;
  background: var(--danger); color: var(--on-accent); border-radius: 9px; }
.bellpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 400px; max-width: calc(100vw - 16px); padding: 0;
  box-shadow: var(--shadow-pop); overflow: hidden; }
.nphead { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bellpop .nlist { max-height: min(60vh, 520px); overflow-y: auto; }
.npall { display: block; text-align: center; padding: 10px; border-top: 1px solid var(--line); }
.nitem { display: flex; gap: 10px; padding: 10px 14px; color: var(--text); border-bottom: 1px solid var(--line); }
.nitem:last-child { border-bottom: 0; }
.nitem:hover { background: var(--hover); text-decoration: none; }
.nitem.unread { background: var(--accent-soft); }
.nitem .ava { flex: none; }
.ntext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nsubj { color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbody { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nempty { padding: 20px 14px; margin: 0; text-align: center; }
.nitem .nx { margin-left: auto; align-self: flex-start; flex: none; visibility: hidden; padding: 0 6px; }
.nitem:hover .nx, .nitem .nx:focus { visibility: visible; }
@media (hover: none) { .nitem .nx { visibility: visible; } }
.nitem .nans { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.nfilter { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.card.nlist { padding: 0; overflow: hidden; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: 360px; max-width: calc(100vw - 32px); }
.toast { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); overflow: hidden;
  animation: toast-in .2s ease-out; }
.toast .nitem { border: 0; background: none; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }

/* @-mentions: in texts and the name picker */
.mention { color: var(--accent); font-weight: 500; }
.mention-pop { position: fixed; z-index: 120; width: 280px; max-height: 280px; overflow-y: auto; padding: 4px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.mention-item { padding: 7px 10px; border-radius: 6px; cursor: pointer; line-height: 20px; }
.mention-item.on, .mention-item:hover { background: var(--accent-soft); color: var(--accent); }
.nset { max-width: 640px; display: flex; flex-direction: column; gap: 14px; }
.nset fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.nset legend { font-weight: 600; margin-bottom: 6px; }
/* the kinds of notifications by channel (go24, Telegram…) sets them */
.nset-table { border-collapse: collapse; }
.nset-table th, .nset-table td { padding: 4px 8px; text-align: center; font-weight: 400; }
.nset-table td:first-child, .nset-table th.nset-group { text-align: left; }
.nset-table thead th { font-size: var(--font-size-sm); color: var(--muted); white-space: nowrap; }
.nset-table th.nset-group { font-weight: 600; padding-top: 12px; }
.nset-table tbody tr:hover td { background: var(--hover); }
.nchan h2 { margin: 0; }
.nchan-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.nchan-row > b { min-width: 110px; }
.nchan-row form { margin: 0; }
.nchan-devices { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 0 122px; display: grid; gap: 4px; }
.nchan-devices li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
@media (max-width: 640px) { .nchan-devices { padding-left: 0; } }
.nphead a.ghost { display: inline-flex; padding: 4px; color: var(--muted); }

/* the one task form (new task, «Изменить» in the card) */
.taskform { display: flex; flex-direction: column; gap: 12px; }
.taskform .ntitle { font-size: 18px; font-weight: 600; }
.tf-grid { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 14px; align-items: start; }
.tf-grid > label { padding-top: 8px; color: var(--muted); margin: 0; }
.tf-checks { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 640px) { .tf-grid { grid-template-columns: 1fr; gap: 4px; } .tf-grid > label { padding-top: 6px; } }
/* «CoPilot» of the description (GO24DEV-933): the actions under the field, the AI's answer to insert */
.tf-copilot { display: flex; flex-direction: column; gap: 6px; margin-top: -6px; }
.tf-copilot > .row { flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.tf-copilot button { padding: 3px 8px; font-size: 13px; }
.tf-copilot-out { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 8px; }
.tf-copilot-out.error { color: var(--danger); background: var(--danger-soft); border-color: transparent; }
.tf-copilot-text { white-space: pre-wrap; max-height: 320px; overflow: auto; }
/* the people picker (template "upick", js/people.js): chips and a search field in one box, the list under it */
.upick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 38px; padding: 3px 6px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); cursor: text; }
.upick:focus-within { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.upick input.upick-q { flex: 1; min-width: 120px; width: auto; min-height: 28px; padding: 2px 4px; border: 0; background: none; outline: none; }
.upick-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); max-width: 100%; }
.upick-chip button { padding: 2px; color: inherit; }
.upick-chip.fired { opacity: .6; text-decoration: line-through; }
.upick:not(.multi) .upick-chip ~ .upick-q:not(:focus) { min-width: 0; flex-basis: 20px; }
.upick-pop { position: absolute; z-index: 130; max-width: calc(100vw - 16px); background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-pop); }
.upick-tabs { display: flex; gap: 2px; padding: 4px 4px 0; border-bottom: 1px solid var(--line); }
.upick-tabs button { border-radius: 6px 6px 0 0; padding: 6px 10px; }
.upick-tabs button.on { color: var(--accent); box-shadow: inset 0 -2px var(--accent); }
.upick-list { max-height: 320px; overflow-y: auto; padding: 4px; }
.upick-row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; cursor: pointer; line-height: 18px; }
.upick-row.on, .upick-row:hover { background: var(--accent-soft); }
.upick-row.chosen { color: var(--accent); font-weight: 600; }
.upick-row.chosen::after { content: "✓"; margin-left: auto; }
.upick-row.dept small, .upick-row .upick-text small { color: var(--muted); font-weight: 400; }
.upick-row.back, .upick-row.more, .upick-row.deptall { color: var(--accent); }
.upick-text { display: flex; flex-direction: column; min-width: 0; }
.upick-text span, .upick-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upick-none { padding: 10px; }
.upick-crumbs { padding: 6px 12px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); }
.upick-crumbs a { color: var(--accent); cursor: pointer; }
.upick-row.dept .upick-dname { flex: 1; }
.upick-row.dept small { margin-left: auto; }
.upick-row.dept button { padding: 2px 6px; }
.upick-row.scope { justify-content: space-between; color: var(--muted); font-size: 13px; }
.upick-row.scope b { color: var(--accent); font-weight: 500; }

/* templates and «Повторять задачу» */
.repeat { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.tf-wide { grid-column: 1 / -1; margin: 0; }
input.num { width: 90px; flex: none; }
.tf-after input[type=number] { width: 80px; }
.wdays { flex-wrap: wrap; gap: 4px 12px; }
/* a list row's buttons: the cell stays a table cell, the buttons stand in one line inside it (GO24DEV-488) */
.tpl-actions { width: 1%; text-align: right; white-space: nowrap; }
.tpl-actions .acts { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; flex-wrap: nowrap; }
.tpl-actions form { margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 1px 8px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.tmenu .pop a.button.ghost { border: 0; justify-content: flex-start; }
.subcnt { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.subcnt .i { width: 13px; height: 13px; }
.subcnt.done { color: var(--ok); }
.ttree { display: inline-flex; align-items: center; gap: 1px; padding: 0 4px 0 0; margin-right: 4px; border: 0; background: none; color: var(--muted); cursor: pointer; vertical-align: middle; min-width: 2.2em; }
.ttree .i { width: 14px; height: 14px; transition: transform .15s; }
.ttree[aria-expanded="true"] .i { transform: rotate(90deg); }
.ttree:hover { color: var(--text); }
.ttree-pad { display: inline-block; width: calc(2.2em + 4px); }
.ttree:hover, .ttree:focus, .ttree:active { background: none; box-shadow: none; }
tr.tsub > td { background: color-mix(in srgb, var(--muted) 4%, transparent); }
/* «Группировать по проектам»: a project's header over its tasks; a folded project hides its rows */
tr.tgroup > td { background: color-mix(in srgb, var(--accent) 7%, transparent); font-weight: 600; }
tr.tgroup a { color: inherit; }
.tgroup-btn { border: 0; background: none; padding: 0 4px 0 0; color: var(--muted); cursor: pointer; vertical-align: middle; }
.tgroup-btn .i { width: 14px; height: 14px; transition: transform .15s; }
.tgroup-btn[aria-expanded="true"] .i { transform: rotate(90deg); }
.tgroup-btn:hover, .tgroup-btn:focus, .tgroup-btn:active { background: none; box-shadow: none; color: var(--text); }
tr.gfold { display: none; }

/* reactions under task chat messages */
.reacts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; }
.react { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--text); font-size: 13px; line-height: 20px; cursor: pointer; }
.react b { font-weight: 600; font-size: 12px; color: var(--muted); }
.react.mine { border-color: var(--accent); background: var(--accent-soft); }
.react-add { position: relative; display: inline-block; }
.react-add summary { list-style: none; cursor: pointer; opacity: 0; padding: 0 4px; border-radius: 10px; color: var(--muted); }
.react-add summary::-webkit-details-marker { display: none; }
.msg:hover .react-add summary, .react-add[open] summary { opacity: 1; }
.react-pick { position: absolute; bottom: 100%; z-index: 20; display: flex; gap: 2px; padding: 4px; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-pop); }
.msg.mine .react-pick { right: 0; }
.react-pick button { border: 0; background: none; font-size: 18px; padding: 2px 4px; border-radius: 8px; cursor: pointer; }
.react-pick button:hover { background: var(--hover); }

/* tasks with messages not seen yet: the green counter */
.ttitle.unread { font-weight: 700; }
.newcmt { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px; border-radius: 10px; font-size: 12px; line-height: 18px;
  background: var(--ok); color: #fff; white-space: nowrap; vertical-align: 1px; }
.newcmt .i { width: 12px; height: 12px; }
a.newcmt:hover { color: #fff; text-decoration: none; filter: brightness(1.1); }
.chip.newcmt { background: var(--ok); color: #fff; }
.side nav a.cnt.green, .side .msec > summary .cnt.green { background: var(--ok); }

/* «Календарь»: the month */
.calnav { gap: 6px; align-items: center; }
.calmonth { min-width: 150px; text-align: center; font-size: 16px; }
.cal { overflow: hidden; }
.calrow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calhead div { padding: 8px 10px; font-size: 12px; color: var(--muted); text-transform: uppercase; border-bottom: 1px solid var(--line); }
.calday { min-height: 112px; padding: 4px 6px 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.calrow .calday:last-child { border-right: 0; }
.calday.out { background: var(--hover); }
.calday.out .calnum { color: var(--muted); }
.calnum { align-self: flex-end; font-size: 13px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; color: var(--text); }
.calhol { align-self: flex-end; font-size: 11px; color: var(--muted); }
.calnum:hover { background: var(--accent-soft); text-decoration: none; }
.calday.today .calnum { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.calitem { display: block; font-size: 12px; line-height: 18px; padding: 0 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--accent); }
.calitem:hover { text-decoration: none; filter: brightness(0.97); }
.calitem.project { background: var(--violet-soft); color: var(--violet); border-left-color: var(--violet); }
.calitem.company { background: var(--ok-soft); color: var(--ok); border-left-color: var(--ok); }
.calitem.invited { border-left-style: dashed; background: transparent; border: 1px dashed var(--accent); }
.calitem.declined { opacity: .5; text-decoration: line-through; }
/* a meeting's own colour and «Важная встреча» (GO24DEV-422) */
.calitem.colored { background: color-mix(in srgb, var(--evc) 16%, var(--card)); color: color-mix(in srgb, var(--evc) 70%, var(--text)); border-left-color: var(--evc); }
.calitem.colored.invited { background: transparent; border-color: var(--evc); }
.calitem.important { font-weight: 600; }
.calitem.important .i-exclamation-mark, .evimportant { color: var(--danger); }
.evcolors { margin: 0; align-items: center; }
.evcolors .nocolor { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--border); }
.calitem.task { background: var(--hover); color: var(--text); border-left-color: var(--muted); }
.calitem.task.over { color: var(--danger); border-left-color: var(--danger); }
.calitem .i { width: 12px; height: 12px; vertical-align: -2px; }
.calleg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.calleg .calitem { display: inline-block; }
.evwhen { flex-wrap: wrap; gap: 8px; }
.evwhen .evtz { width: auto; max-width: 260px; }
.openev { flex-wrap: wrap; } .openev .openwhen { min-width: 190px; }
.callink { align-items: flex-start; } .callink > span { display: flex; flex-direction: column; gap: 2px; } .callink-url { overflow-wrap: anywhere; } .callink .err { color: var(--danger); }
.evwhen input[type=datetime-local] { width: auto; }
.evanswer { align-items: center; gap: 8px; margin-bottom: 12px; }
.evtools { gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.evatt { justify-content: space-between; margin-bottom: 6px; }
.pill.ev-accepted { background: var(--ok-soft); color: var(--ok); }
.pill.ev-declined { background: var(--danger-soft); color: var(--danger); }
.pill.inv-paid, .pill.inv-accepted { background: var(--ok-soft); color: var(--ok); }
.pill.inv-overdue, .pill.inv-declined { background: var(--danger-soft); color: var(--danger); }
.pill.inv-sent { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 760px) { .calday { min-height: 70px; } .calitem { font-size: 11px; padding: 0 3px; } }
/* week and day on an hour grid */
.calviews { margin: 0; border: 0; }
.calgrid { overflow-x: auto; }
.cg-row { display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(110px, 1fr)); }
.cg-head .cg-day { padding: 8px; text-align: center; color: var(--muted); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.cg-head .cg-day b { color: var(--text); font-size: 16px; margin-left: 4px; }
.cg-head .cg-day.today b { color: var(--accent); }
.cg-allday > div { min-height: 28px; padding: 3px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cg-allday > div:first-child { border-left: 0; padding: 6px; }
.cg-hours div { height: var(--hour); font-size: 11px; color: var(--muted); text-align: right; padding: 0 6px; transform: translateY(-6px); }
.cg-col { position: relative; border-left: 1px solid var(--line);
  background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--hour)),
    linear-gradient(to bottom, var(--hover) 0 var(--work0, 0), transparent var(--work0, 0) var(--work1, 100%), var(--hover) var(--work1, 100%)); }
.cg-col.off { background-color: var(--hover); }
.cg-col.today { background-color: var(--accent-soft); }
.cg-head .cg-day.off, .calday.off .calnum { color: var(--muted); }
.calday.off:not(.out) { background: color-mix(in srgb, var(--hover) 50%, transparent); }
.cg-ev { position: absolute; left: 3px; right: 3px; white-space: normal; overflow: hidden; line-height: 16px; padding: 2px 6px; }
.te-actions { gap: 2px; justify-content: flex-end; }
.te-actions form { margin: 0; }

/* task marks: tags, favourite, pin, mute */
.tags { flex-wrap: wrap; gap: 4px; }
.tag { display: inline-flex; align-items: center; gap: 2px; padding: 0 4px 0 8px; border-radius: 10px; background: var(--hover); font-size: 12px; line-height: 20px; }
.tag a, a.tag { color: var(--accent); }
a.tag.small { padding: 0 6px; margin-left: 2px; }
.tag form { margin: 0; }
.tag button { padding: 1px; }
.tag button .i { width: 12px; height: 12px; }
.tagadd input { width: 110px; padding: 2px 8px; font-size: 12px; height: 24px; }
/* «Интересы» of the profile (GO24DEV-836): the popular ones to add with one click */
.pipopular { margin-top: 8px; align-items: center; }
.pipopular form { margin: 0; }
.pipopular button.tag { cursor: pointer; border: 0; padding: 0 8px 0 4px; color: var(--accent); }
.markic { display: inline-flex; color: var(--muted); margin-right: 4px; vertical-align: -2px; }
.markic .i { width: 14px; height: 14px; }
.markic.fav { color: var(--warn); }
.thead .markic .i { width: 18px; height: 18px; }
.tmenu .pop form { margin: 0; }
/* «Оценка» and «Результат» */
.rating form { margin: 0; }
.rate { font-size: 18px; filter: grayscale(1); opacity: .5; }
.rate.on { filter: none; opacity: 1; }
.result { padding: 8px 0; border-bottom: 1px solid var(--line); }
.result:last-child { border-bottom: 0; }
.resform { display: inline; margin: 0; }
.react-res { opacity: 0; padding: 0 4px; filter: grayscale(1); }
.msg:hover .react-res, .react-res.on { opacity: 1; }
.react-res.on { filter: none; }
/* absences and birthdays */
.absform { flex-wrap: wrap; gap: 8px; }
.pill.abs-green { background: var(--ok-soft); color: var(--ok); }
.pill.abs-red { background: var(--danger-soft); color: var(--danger); }
.pill.abs-violet { background: var(--violet-soft); color: var(--violet); }
.pill.abs-orange { background: var(--warn-soft); color: var(--warn); }
.pill.abs-blue { background: var(--accent-soft); color: var(--accent); }
.pill.abs-gray { background: var(--hover); color: var(--muted); }
.bday-today td { background: var(--accent-soft); }
.calitem.absence { background: var(--warn-soft); color: var(--warn); border-left-color: var(--warn); }
.calitem.birthday { background: transparent; color: var(--text); border-left-color: var(--violet); }
/* «Кадровые изменения»: by days */
.staffday { margin: 16px 0 6px; font-size: 14px; color: var(--muted); }
.staffchanges .tlist { table-layout: fixed; }
.staffchanges .tlist td:first-child { width: 36%; }
.staffchanges .tlist td:nth-child(2) { width: 130px; }
.staffchanges .tlist td:last-child { width: 220px; text-align: right; }
.pill.staff-hired, .pill.staff-returned { background: var(--ok-soft); color: var(--ok); }
.pill.staff-moved { background: var(--accent-soft); color: var(--accent); }
.pill.staff-fired { background: var(--danger-soft); color: var(--danger); }
.pill.audit-login_denied, .pill.audit-api_bad_key, .pill.audit-user_fired { background: var(--danger-soft); color: var(--danger); }
/* «Журнал событий»: refusals and wrong keys in red, the admin mode in yellow */
.pill.audit-admin_on { background: var(--warn-soft); color: var(--warn); }
/* «График отсутствий»: people × days, an absence is a bar over its days */
.abstools { gap: 8px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
/* «Сотрудники»: quick filters, the view switch, tiles */
.emppresets { align-items: center; }
.viewswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.viewswitch a { padding: 4px 8px; color: var(--muted); }
.viewswitch a.on { background: var(--accent-soft); color: var(--accent); }
.emptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap); }
.emptile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: var(--text); text-decoration: none; padding: 18px 12px; margin: 0; }
.emptile:hover { text-decoration: none; border-color: var(--accent); }
.emptile b { margin-top: 6px; }
.honortile { cursor: default; }
.honortile .ava.lg { width: 96px; height: 96px; font-size: 32px; }
.honortile .honorwho { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); }
.honortile .honorwho:hover { text-decoration: none; color: var(--accent); }
.honortile .honorwhy { margin: 6px 0 2px; font-style: italic; }
.honortile.coming { opacity: .75; }
/* «Обучение»: course tiles with a colored cover, the course's lessons, a lesson with the plan beside it */
.lcourses { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); }
.lcourse { display: flex; flex-direction: column; gap: 6px; padding: 0 0 14px; margin: 0; overflow: hidden; color: var(--text); text-decoration: none; }
.lcourse > :not(.lcover) { margin: 0 14px; }
.lcourse:hover { text-decoration: none; border-color: var(--accent); }
.lcourse .lcdesc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lcover { position: relative; display: flex; align-items: center; justify-content: center; height: 96px; font-size: 40px; color: #fff; background: var(--lc, #3b82f6); }
.lcover > .i { --icon-size: 44px; }
.lhead .lcover > .i { --icon-size: 52px; }
.lcover .pill { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.35); color: #fff; font-size: var(--font-size-sm); }
.c-blue { --lc: #3b82f6; } .c-green { --lc: #16a34a; } .c-orange { --lc: #ea580c; } .c-purple { --lc: #7c3aed; }
.c-red { --lc: #dc2626; } .c-teal { --lc: #0d9488; } .c-gray { --lc: #64748b; }
.lhead { display: flex; gap: 18px; align-items: flex-start; }
.lhead .lcover { width: 120px; height: 120px; flex: none; border-radius: 10px; }
.lhead h1 { margin: 0 0 6px; }
.lplan h3, .lside h4 { margin: 12px 0 4px; }
.llist { margin: 0; padding-left: 26px; }
.llist li { padding: 3px 0; }
.llist li.done a { color: var(--muted); }
.llist li.done .i { color: var(--ok); }
.llist li.on a { font-weight: 600; color: var(--accent); }
.llayout { display: grid; grid-template-columns: 260px 1fr; gap: var(--gap); align-items: start; }
.lside { position: sticky; top: 12px; max-height: calc(100vh - 100px); overflow: auto; }
.lbody h1 { margin: 0 0 8px; }
.lnav { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 14px; }
.lnav form { margin: 0; }
.llessons form.inline { display: inline; margin: 0; }
.lcolors { gap: 8px; }
.lcolor { width: 28px; height: 28px; border-radius: 50%; background: var(--lc); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.lcolor input { margin: 0; accent-color: #fff; }
.pill.l-ok { background: var(--ok-soft); color: var(--ok); }
.pill.l-over { background: var(--danger-soft); color: var(--danger); }
.l-late { color: var(--danger); }
.ltestset { gap: 14px; } .ltestset input { width: 110px; }
.lqform .lq-text { display: none; }
.lqform:has(select[name=kind] option[value=text]:checked) .lq-text { display: block; }
.lqform:has(select[name=kind] option[value=text]:checked) .lq-opts { display: none; }
.ltestinfo { color: var(--muted); }
.lprofile { list-style: none; padding: 0; margin: 0; } .lprofile li { gap: 10px; padding: 3px 0; }
.ltries { margin-top: 8px; }
.lquestions { padding-left: 22px; }
.lquestions > li { margin: 0 0 18px; }
.lquestions > li p { margin: 0 0 6px; }
.lquestions label.check { display: flex; gap: 8px; align-items: baseline; margin: 4px 0; font-weight: normal; }
.lquestions input[type=text] { max-width: 420px; }
.lquestions li.wrong > p b { color: var(--danger); }
.lopts { list-style: none; padding: 0; margin: 0; } .lopts li.chosen { font-weight: 600; }
.lresult { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 8px; margin: 6px 0 18px; }
.lresult.ok { background: var(--ok-soft); color: var(--ok); } .lresult.fail { background: var(--danger-soft); color: var(--danger); }
.lresult b { font-size: 18px; }
.ltimer { background: var(--accent-soft); color: var(--accent); font-variant-numeric: tabular-nums; font-size: 15px; }
.ltimer.late { background: var(--danger-soft); color: var(--danger); }
@media (max-width: 760px) { .llayout { grid-template-columns: 1fr; } .lside { position: static; max-height: none; } .lhead .lcover { width: 72px; height: 72px; } .lhead .lcover > .i { --icon-size: 32px; } }
.honorpill { background: var(--warn-soft); color: var(--text); margin-left: 4px; }
.honorpill:hover { text-decoration: none; }
/* «Собрания и планёрки»: the agenda's items with their decisions and tasks */
.mitem { padding: 10px 0; border-top: 1px solid var(--line); }
.mitem:first-of-type { border-top: 0; }
.mitem.sub { margin-left: 28px; }
.mitem .mnum { min-width: 28px; }
.mresult { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0 0 28px; }
.mresult textarea { flex: 1; }
.mres { margin: 6px 0 0 28px; }
.mitemact { margin: 6px 0 0 28px; gap: 14px; align-items: flex-start; }
.mitemact details[open] { flex-basis: 100%; }
.mform { display: grid; gap: 6px; margin-top: 6px; max-width: 620px; }
.madd { margin-top: 12px; max-width: none; }
.mtasks { margin: 6px 0 0 28px; padding-left: 18px; }
.mtasks li.done > a { text-decoration: line-through; }
.mst-action { background: var(--accent-soft); }
.mst-done { background: var(--ok-soft); }
.minfo h3 { margin: 12px 0 4px; font-size: 13px; }
.minfo p { margin: 4px 0; }
.absform-card > h2 { margin-top: 0; }
.absform-card:not([open]) { display: none; }
.abschart td.who { max-width: 260px; }
.abschart td.who a.person { display: flex; line-height: normal; min-height: 34px; overflow: hidden; white-space: nowrap; }
.abschart td.who a.person > span { overflow: hidden; text-overflow: ellipsis; }
.abschart td.absc { padding: 2px 1px; }
.abschart .absbar { display: block; line-height: 28px; border-radius: 6px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; text-decoration: none; }
.abschart .absbar.cutl { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.abschart .absbar.cutr { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.abschart a.absbar:hover { filter: brightness(.95); }
.abschart td:not(.who):not(.absc) a:hover { background: var(--hover); }
.abschart.week th, .abschart.week td { min-width: 90px; }
.abschart td.today { background: var(--warn-soft); }
.absbar.abs-green, .wslegend .abs-green::before, .abscolor.abs-green { background: var(--ok-soft); color: var(--ok); }
.absbar.abs-red, .wslegend .abs-red::before, .abscolor.abs-red { background: var(--danger-soft); color: var(--danger); }
.absbar.abs-violet, .wslegend .abs-violet::before, .abscolor.abs-violet { background: var(--violet-soft); color: var(--violet); }
.absbar.abs-orange, .wslegend .abs-orange::before, .abscolor.abs-orange { background: var(--warn-soft); color: var(--warn); }
.absbar.abs-blue, .wslegend .abs-blue::before, .abscolor.abs-blue { background: var(--accent-soft); color: var(--accent); }
.absbar.abs-gray, .wslegend .abs-gray::before, .abscolor.abs-gray { background: var(--hover); color: var(--muted); border: 1px solid var(--line); }
.abskinds td { vertical-align: middle; }
.abskinds tr.off td:not(:last-child) { opacity: .55; }
.abscolor { display: inline-block; width: 18px; height: 18px; border-radius: 4px; vertical-align: middle; }
.wslegend span.hint::before { display: none; }
.vacreport tr.vacdept th { background: var(--hover); text-align: left; }
.vacreport td.num, .vacreport th.num { text-align: right; width: 80px; min-width: 0; }
.vacreport td:nth-child(2) { white-space: normal; }
.vacreport tr.noplan td:first-child { opacity: .8; }
.vacreport td.num.danger { color: var(--danger); font-weight: 600; }
/* «Зарплата и отпуск» (GO24DEV-895) */
.vacset { gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.vacleft { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 10px; }
.vacleft b { font-size: 28px; line-height: 1; } .vacleft b.danger { color: var(--danger); }
.payslips { list-style: none; padding: 0; margin: 0 0 8px; } .payslips li { gap: 8px; padding: 3px 0; }
.payslipbulk { gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.payslipone input[type=file] { max-width: 220px; font-size: 12px; }
.actingbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; } .actingbox label:first-child { color: var(--muted); }
/* the task list filter: presets and the form */
.presets { flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.presets .chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; color: var(--text); text-decoration: none; }
.presets .chip a { color: inherit; text-decoration: none; }
.presets .chip.on { background: var(--accent-soft); border-color: var(--accent); }
.presets .chip form { display: inline; }
.tfilter > summary { cursor: pointer; font-weight: 600; }
.tfilter form { margin-top: 10px; }
/* group actions: the ticks show only where the page has the panel */
.tlist .bulkcol { display: none; width: 28px; }
body:has(#bulk) .tlist .bulkcol { display: table-cell; }
.bulkbar { position: sticky; bottom: 8px; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.bulkbar select, .bulkbar input[type=text], .bulkbar input[type=datetime-local] { width: auto; }
/* files and pictures in feed posts */
.ffiles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.ffiles .fimg img { display: block; max-width: 240px; max-height: 180px; border-radius: 8px; border: 1px solid var(--line); object-fit: cover; }
.ffiles .ffile { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 6px; }
.ffiles form.inline, .cl-item form.inline { display: inline; margin: 0 0 0 -4px; } /* «Сохранить на Диск» beside an attachment */
/* polls in feed posts */
.fpoll { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 6px; }
.fpoll-res { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 4px 8px; border-radius: 6px; overflow: hidden; }
.fpoll-res i { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); z-index: 0; }
.fpoll-res span { position: relative; z-index: 1; }
.fpoll-res.mine { font-weight: 600; }
.fpoll { position: relative; }
.fpoll-res button { position: relative; z-index: 1; }
.fpoll .rwho .person span:last-child { margin-left: 0; }
.fpoll-peek summary { cursor: pointer; color: var(--accent); width: max-content; }
.fpoll-peek[open] { display: grid; gap: 6px; }
.fpoll-new { display: inline-block; }
.fpoll-new[open] { display: grid; gap: 6px; flex-basis: 100%; }
/* gratitudes («Благодарности»): in the feed and the profile */
.fgrat { display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: var(--accent-soft); }
.gbadge { font-size: 20px; line-height: 1; }
.gbadge.big { font-size: 34px; }
.gbadges { flex-wrap: wrap; gap: 4px; }
.gbadge-pick { font-size: 20px; cursor: pointer; }
.pthanks { display: grid; gap: 6px; }
.pthank { display: flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; }
/* «Благодарности» of the company: the honor board of the period and who thanked whom */
.tleaders { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.tleader { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); color: var(--text); min-width: 0; }
.tleader:hover { text-decoration: none; border-color: var(--accent); }
.tleader.on { border-color: var(--accent); background: var(--accent-soft); }
.tleader .tplace { width: 18px; color: var(--muted); font-weight: 600; text-align: center; }
.tleader .tname { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tleader .tname > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tleader .tbadges { display: flex; flex-wrap: wrap; gap: 2px; font-size: 16px; }
.tleader .tbadges sub { font-size: 10px; color: var(--muted); }
.tleader .tcount { font-size: 20px; font-weight: 700; color: var(--accent); }
.thankrow { display: grid; grid-template-columns: 48px 1fr auto; gap: 4px 12px; align-items: center; padding: 10px 14px; }
.thankrow + .thankrow { border-top: 1px solid var(--line); }
.thankrow .gbadge { text-align: center; }
.thankrow .thankstext { color: var(--text); display: block; overflow-wrap: anywhere; }
@media (max-width: 640px) { .thankrow { grid-template-columns: 40px 1fr; } .thankrow .thankfrom { grid-column: 2; } }
/* «Рабочее время»: the working day in the top bar */
.workday > summary { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
.workday .wd-running { color: var(--st-completed-fg); border-color: currentColor; }
.workday .wd-paused { color: var(--warn); border-color: currentColor; }
.workday .pop { min-width: 280px; display: grid; gap: 8px; }
.pill.wd-running { color: var(--st-completed-fg); }
.workday .wd-forgotten { color: var(--danger); border-color: currentColor; }
.workday .wd-report-due { color: var(--warn); }
/* «План на день» in the working day window */
.workday .pop { width: min(360px, calc(100vw - 32px)); left: auto; right: 0; } /* the day plan: long titles are cut, not widening it */
@media (max-width: 600px) { .workday .pop { position: fixed; left: 16px; right: 16px; top: auto; width: auto; min-width: 0; } } /* a phone: the whole screen width under the button */
.dayplan { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.dp-item { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dp-item > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-item.done > a { text-decoration: line-through; color: var(--muted); }
.dp-item form { margin: 0; }
.dayplan .dp-item button { padding: 2px 4px; width: auto; }
.dp-add { display: flex; gap: 4px; margin: 0; }
.dp-add select { flex: 1; min-width: 0; width: auto; }
.dayplan .dp-add button { width: auto; flex: none; }
.dayevents { border-top: 0; }
.dp-item.past > a { color: var(--muted); }
.dp-item.now > a { font-weight: 600; }
.de-add { flex-wrap: wrap; }
.de-add input[name=title] { flex: 1 1 100%; min-width: 0; }
.de-add input[type=time] { flex: 1; min-width: 0; width: auto; }
/* «Рабочие отчёты»: marks, facts of a report, the departments' rules */
.pill.wr-good { background: var(--ok-soft); color: var(--ok); }
.pill.wr-bad { background: var(--danger-soft); color: var(--danger); }
.pill.wr-wait { color: var(--muted); }
.wreport .wrfacts label { display: block; color: var(--muted); font-size: var(--font-size-sm); margin: 0; }
.wrdepts select, .wrdepts input { width: 100%; }
.wd-forgot { display: grid; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
/* «Таблица рабочего времени»: people × days */
.wsheet-wrap { overflow-x: auto; }
.wsheet { border-collapse: collapse; font-size: 12px; }
.wsheet th, .wsheet td { border: 1px solid var(--line); padding: 0; text-align: center; min-width: 38px; height: 34px; }
.wsheet th.who, .wsheet td.who { text-align: left; min-width: 180px; padding: 4px 8px; position: sticky; left: 0; background: var(--card); z-index: 1; }
.wsheet th.off { color: var(--danger); }
.wsheet th.today { background: var(--warn-soft); }
.wsheet td a { display: block; color: inherit; text-decoration: none; line-height: 34px; position: relative; }
.wsheet td.ws-off { background: var(--line); opacity: .55; }
.wsheet td.ws-work { background: var(--st-completed-bg); color: var(--st-completed-fg); }
.wsheet td.ws-bad { background: var(--danger-soft); color: var(--danger); font-weight: 600; }
.wsheet td.ws-absence { background: var(--st-deferred-bg); color: var(--st-deferred-fg); }
.wsheet td.ws-run { background: var(--st-in_progress-bg); color: var(--st-in_progress-fg); }
.wsheet td .ws-pend { position: absolute; top: 1px; right: 2px; line-height: 1; color: var(--warn); }
.wsheet td .ws-away { position: absolute; bottom: 1px; right: 2px; line-height: 1; color: var(--accent); font-weight: 600; }
.wsheet td.sum { padding: 0 8px; white-space: nowrap; }
.wslegend { display: flex; flex-wrap: wrap; gap: 12px; padding: 8px 16px; font-size: 12px; }
.wslegend span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -2px; border: 1px solid var(--line); }
.wslegend .ws-work::before { background: var(--st-completed-bg); }
.wslegend .ws-bad::before { background: var(--danger-soft); }
.wslegend .ws-absence::before { background: var(--st-deferred-bg); }
.wslegend .ws-run::before { background: var(--st-in_progress-bg); }
.wslegend .ws-off::before { background: var(--line); }
.wslegend .ws-awayl::before { content: "↗"; border: 0; width: auto; color: var(--accent); font-weight: 600; vertical-align: 0; }
.wsheet td.ws-free { color: var(--muted); }
.wsheet td .ws-plan { display: block; max-width: 44px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--muted); margin: 0 auto; }
/* «Графики работы»: the parts of the form of the other kinds are hidden */
fieldset.plain { border: 0; padding: 0; margin: 0; min-width: 0; }
.wsform:has([name=kind][value=fixed]:checked) :is(.ws-k-shift, .ws-k-flexible),
.wsform:has([name=kind][value=shift]:checked) :is(.ws-k-fixed, .ws-k-flexible),
.wsform:has([name=kind][value=flexible]:checked) :is(.ws-k-fixed, .ws-k-shift) { display: none; }
.wstime { border-top: 1px solid var(--line); padding: 8px 0; }
.wstime:first-of-type { border-top: 0; }
.wsshifts input { width: 100%; }
.wspeople { margin-top: 10px; }
.wspeople .row { gap: 6px 14px; padding-top: 6px; }
.wsheet.shplan td select { border: 0; background: transparent; font-size: 11px; width: 100%; min-width: 58px; height: 34px; padding: 0 2px; }
.wsheet.shplan td.ws-set { background: var(--st-in_progress-bg); color: var(--st-in_progress-fg); }
.wsheet.shplan td span { display: block; padding: 0 4px; line-height: 34px; white-space: nowrap; }
/* «База знаний» */
.kbspaces { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kbcard { display: grid; gap: 4px; color: inherit; text-decoration: none; }
.kbquick { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 12px; }
.kbquick h3 { margin-top: 0; }
.kblinks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.kbmarks { display: inline-flex; gap: 2px; align-items: center; margin: 0; }
.kbmarks .kbstar.on, .kbmarks .kbstar:hover { color: var(--warn); }
.kbmarks .kbwatch.on { color: var(--accent); }
.kbnav .kbmarks { display: flex; margin: 4px 0 2px; }
.kbtpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.kbtpl { position: relative; display: grid; align-content: start; gap: 2px; padding: 8px 28px 8px 32px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; margin: 0; font-weight: normal; }
.kbtpl:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.kbtpl input[type=radio] { position: absolute; left: 10px; top: 10px; margin: 0; }
.kbtpl b { font-weight: 600; }
.kbtpl button { position: absolute; right: 4px; top: 4px; padding: 2px 4px; }
.kblayout { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .kblayout { grid-template-columns: 1fr; } }
.kbtree { list-style: none; padding-left: 12px; margin: 6px 0; }
.kbnav > .kbtree { padding-left: 0; }
.kbtree a { display: block; padding: 2px 4px; border-radius: 4px; color: inherit; }
.kbtree a.on { background: var(--accent-soft); color: var(--accent); }
/* the tree of pages (kbtree.js): an arrow opens a branch, «+» adds a subpage, a dragged page shows where it drops */
.kbtree li { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; }
.kbtree li > ul { grid-column: 1 / -1; }
.kbtree-js li:not(.open) > ul { display: none; }
.kbtoggle { width: 16px; height: 20px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.kbtoggle:not(:disabled)::before { content: "▸"; }
li.open > .kbtoggle::before { content: "▾"; }
.kbtoggle:disabled { cursor: default; }
.kbadd { visibility: hidden; padding: 0 6px; color: var(--muted); text-decoration: none; font-weight: bold; }
.kbtree li:hover > .kbadd, .kbadd:focus { visibility: visible; }
.kbtree li.dragging > a { opacity: .5; }
.kbtree a.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.kbtree a.drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
.kbtree a.drop-in { outline: 2px dashed var(--accent); }
.kbchildren { margin-top: 1.5em; border-top: 1px solid var(--border); padding-top: .5em; }
.kbchildren ul { list-style: none; padding: 0; }
.kbchildren li { padding: 2px 0; }
.kbtalk h3 { margin: 12px 0 4px; }
.kblikes { gap: 8px; align-items: center; }
.kblikes button.on { color: var(--accent); }
.kbcomment { border-top: 1px solid var(--line); padding: 8px 0 4px; }
.kbcomment:target { background: var(--accent-soft); border-radius: 6px; }
.kbcomment-body { overflow-wrap: anywhere; }
.kbcomment-body > :first-child { margin-top: 2px; }
.kbcomment-acts { display: flex; gap: 12px; flex-wrap: wrap; }
.kbcomment-acts summary { cursor: pointer; color: var(--muted); list-style: none; }
.kbcomment-acts details[open] { flex-basis: 100%; }
.kbreplies { margin-left: 24px; }
.kbpage h2, .kbpage h3, .kbpage h4 { margin-top: 1.2em; }
.kbpage pre { background: var(--hover); padding: 10px; border-radius: 6px; overflow-x: auto; }
.kbpage img { max-width: 100%; height: auto; border-radius: 4px; }
/* the editor's draft and who else edits the page (GO24DEV-605) */
.kbdraftline { min-height: 1.4em; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.kbdraftline .kbchanged { color: var(--danger); }
.kbediting { color: var(--muted); display: flex; gap: 6px; align-items: center; margin: 0 0 6px; }
.kbclash { margin-bottom: var(--gap); }
.kbdiff { font: 13px/1.5 var(--mono, monospace); white-space: pre-wrap; margin: 8px 0; }
.kbdiff div { padding: 0 6px; }
.kbdiff .add { background: var(--ok-soft); }
.kbdiff .del { background: var(--danger-soft); text-decoration: line-through; }
.kbpage blockquote { border-left: 3px solid var(--line); margin: 8px 0; padding-left: 10px; color: var(--muted); }
.kbhit { margin-bottom: 8px; }
/* the page's editor (kbedit.js): «Текст / Предпросмотр» and the panel of marks over the field */
.kbtools { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; margin: 8px 0 4px; }
.kbtabs, .kbfmt { display: flex; flex-wrap: wrap; gap: 2px; }
.kbtabs .on { background: var(--accent-soft); color: var(--accent); }
.kbfmt button:disabled { opacity: .4; }
.kbpreview { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; min-height: 12em; }
.kbpage table { border-collapse: collapse; margin: 8px 0; }
.kbpage th, .kbpage td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; vertical-align: top; }
.kbpage th { background: var(--hover); }
.kbpage li.check { list-style: none; margin-left: -1.2em; }
/* «Содержание» of a page by its headings and the search in one base */
.kbtoc { float: right; max-width: 260px; margin: 0 0 10px 16px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--hover); font-size: .9em; }
.kbtoc ul { list-style: none; padding: 0; margin: 4px 0 0; }
.kbtoc li.l2 { padding-left: 12px; } .kbtoc li.l3 { padding-left: 24px; }
.kbpublic { max-width: 1200px; }
.kbpub { flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .kbpub input { min-width: 200px; }
.kbpage :is(h2, h3, h4)[id] { scroll-margin-top: 70px; }
.kbfind { margin: 6px 0; } .kbfind input { width: 100%; }
.kbimport > summary.button { padding: 6px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: var(--font-size-sm); }
.kbimport > summary.button:hover { border-color: var(--accent); color: var(--accent); }
.kbimport > form { margin-top: 8px; } .kbimport input[type=file] { max-width: 100%; }
.kbhit mark { background: var(--accent-soft); color: inherit; padding: 0 1px; border-radius: 2px; }
@media (max-width: 700px) { .kbtoc { float: none; max-width: none; margin: 0 0 10px; } }
/* calls */
.callgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 10px 0; }
.calltile { position: relative; aspect-ratio: 16 / 9; background: #111; border-radius: 10px; overflow: hidden; border: 2px solid transparent; }
.calltile.speaking { border-color: var(--accent); }
.calltile video { width: 100%; height: 100%; object-fit: cover; }
/* in the call: «Докладчик» — one tile large (a shared screen, or whoever speaks), the others in a row under it */
.callgrid.speaker { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.callgrid.speaker .calltile.main { grid-column: 1 / -1; order: -1; aspect-ratio: auto; height: min(62vh, 56vw); }
.calltile.screen video, .callgrid.speaker .calltile.main video { object-fit: contain; }
.calltile.cam-off:not(.screen) video { display: none; }
.calltile.cam-off:not(.screen) .callname { inset: 0; display: grid; place-items: center; font-size: 1.2em; background: none; }
.calltile.mic-off .callname::after { content: " 🔇"; }
.callpop { position: relative; }
.callpop > summary { list-style: none; }
.callpop > summary::-webkit-details-marker { display: none; }
.callpop .pop { position: absolute; bottom: 100%; right: 0; z-index: 6; display: flex; flex-direction: column; gap: 8px; min-width: 240px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.callpop select { width: 100%; }
.callpeople { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.callpeople li { padding: 3px 0; }
.callpeople li:has(.callhost) { display: flex; align-items: center; gap: 4px; }
.callhost { margin-left: auto; display: inline-flex; gap: 2px; }
.callhost button { padding: 2px 6px; min-height: 0; }
.callinvite .pop { top: 100%; bottom: auto; min-width: 300px; } /* guest links: the popup opens down from the page head */
.callinvite-form { display: grid; gap: 8px; }
.callinvite-form input[type=text], .callinvite-form select { width: 100%; }
.calllobby { display: grid; gap: 6px; margin-bottom: 8px; }
.callpage:fullscreen { background: var(--bg); padding: 12px; overflow: auto; }
.callname { position: absolute; left: 8px; bottom: 6px; color: #fff; font-size: 13px; text-shadow: 0 1px 2px #000; }
.callbar { justify-content: center; gap: 8px; }
.callbar button.off { opacity: .6; }
/* a raised hand, the reactions floating over a tile, the chat of the call (GO24DEV-747) */
.calltile.hand .callname::before { content: "✋ "; }
.calltile.hand { border-color: #f0b429; }
.callreact { position: absolute; left: 50%; bottom: 20%; font-size: 40px; pointer-events: none; animation: callreact 3s ease-out forwards; }
@keyframes callreact { from { transform: translate(-50%, 0); opacity: 1; } to { transform: translate(-50%, -120%); opacity: 0; } }
.callemojis { flex-direction: row !important; min-width: 0 !important; }
.callemojis button { font-size: 20px; padding: 4px 6px; }
.callchat .pop { width: min(360px, 92vw); }
.callchat .cnt { background: var(--danger); color: var(--on-accent); border-radius: 10px; padding: 0 7px; font-size: 12px; }
.callmsgs { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; display: grid; gap: 6px; }
.callmsgs div { white-space: pre-wrap; overflow-wrap: anywhere; }
.callchat form textarea { flex: 1; resize: vertical; }
/* the background of one's video and noise suppression (GO24DEV-778) */
.callbgs { display: grid; grid-template-columns: repeat(4, 52px); gap: 6px; margin-top: 4px; }
.callbg { position: relative; width: 52px; height: 32px; padding: 0; display: grid; place-items: center; font-size: 12px; border: 2px solid var(--line);
  border-radius: 6px; background: var(--bg) center / cover no-repeat; cursor: pointer; }
.callbg.on { border-color: var(--accent); }
.callbg.blur { background-image: linear-gradient(135deg, #b8c6db, #f5f7fa); }
.callbg.blur2 { background-image: linear-gradient(135deg, #8e9eab, #eef2f3); }
.callbg-x { position: absolute; top: -7px; right: -7px; width: 16px; height: 16px; line-height: 16px; border-radius: 50%; font-size: 10px; background: var(--card);
  border: 1px solid var(--line); }
/* CRM */
.crmboard { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.crmboard .kcard { cursor: grab; }
/* the stage's head: its color, count, and the sum of its cards on a line of its own */
.crmboard .stagehead { flex-wrap: wrap; row-gap: 2px; }
.crmboard .stagehead .stitle { flex: 1; min-width: 0; }
.crmboard .colsum { flex-basis: 100%; white-space: nowrap; font-size: var(--font-size-sm); opacity: .85; }
/* «Пресеты фильтра» of deals and leads: the star makes one the list's default */
.crmpresets .crmpreset-def { opacity: .4; padding: 0 2px; }
.crmpresets .crmpreset-def.on, .crmpresets .crmpreset-def:hover { opacity: 1; color: var(--warn); }
.crmstages { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.crmstages form { display: contents; }
.crmcommlist { display: flex; flex-direction: column; gap: 2px; }
.crmcomms { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.crmcomms [data-comm-add] { align-self: flex-start; }
.crmst { border: 1px solid var(--line); border-bottom: 3px solid var(--c); border-radius: 6px; background: var(--card); padding: 4px 10px; cursor: pointer; }
.crmdicts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.crmdicts .tlist form { margin: 0; }
.crmdicts .tlist input[type=text] { min-width: 0; }
.crmst.on { background: var(--c); color: #fff; font-weight: 600; }
.crmev { padding: 6px 0; border-bottom: 1px solid var(--line); }
/* «Дела» of the CRM: a row per deed; overdue ones in red */
.crmact { display: flex; gap: 8px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid var(--line); }
.crmact form { margin: 0; }
.crmact .overdue, .kcard .overdue { color: var(--danger); }
.crmact.overdue { border-left: 3px solid var(--danger); padding-left: 6px; }
.kcard .nextact { display: block; margin-top: 4px; }
/* the CRM analytics: the figures and the bars of the funnel */
.triggers { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 8px; }
.triggers .trigger { display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; border-radius: 12px; background: var(--accent-soft); font-size: 12px; }
.crmkpi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.crmkpi .card { margin: 0; }
.crmkpi b { font-size: 22px; }
.crmbar { display: grid; grid-template-columns: minmax(110px, 30%) 1fr auto auto; gap: 8px; align-items: center; padding: 3px 0; }
.crmbar .bar { background: var(--line); border-radius: 4px; height: 14px; overflow: hidden; }
.crmbar .bar i { display: block; height: 100%; min-width: 2px; }
.crmplan .planbar { grid-template-columns: minmax(80px, 1fr) auto; min-width: 140px; }
.crmplan .planbar .bar i { background: var(--accent); }
.crmplan .planbar .bar i.done { background: var(--ok); }
.crmplan tr.sub th { text-align: left; background: var(--hover); font-weight: 600; }
.crmplanform input[name$=amount], .crmplanform input[name=company] { max-width: 200px; }
/* the CRM list: the view and filter bar, the group actions */
.crmtools { margin: 0 0 10px; gap: 8px; }
.crmtools .seg { display: inline-flex; gap: 4px; }
.crmbulk { padding: 8px 12px; gap: 8px; border-bottom: 1px solid var(--line); }
.tlist .nowrap { white-space: nowrap; }
/* «Товары» of a deal or a lead: an editable table */
.crmrows .tablewrap { overflow-x: auto; }
.crmrows td { vertical-align: top; }
.crmrows input[type=text] { min-width: 0; }
.crmcontacts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.crmcontacts select { width: 100%; }
.crmrows td:first-child input, .crmrows td:first-child select { width: 100%; min-width: 180px; }
.crmrows .nowrap { white-space: nowrap; }
.crmrows .right { text-align: right; }
/* «Почта» */
/* the mail as in Outlook (mail.html): folders | letters | reading pane (right, bottom or off) */
.mailpanes { margin-left: auto; gap: 2px; }
/* the ribbon instead of the page's title, as Outlook's «Главная»: small icons, grey when nothing to act on; what does
   not fit goes into «…» (mail.js) */
.mailhead { gap: 10px; }
.mribbon { flex: 1 1 auto; min-width: 0; gap: 2px; flex-wrap: nowrap; }
.mribbon > button { padding: 6px 7px; flex: none; }
.mribbon button:disabled { opacity: .35; cursor: default; }
.mribbon .mlabel { display: none; }
.mribbon-sep { flex: none; width: 1px; height: 20px; margin: 0 4px; background: var(--line); }
.mribbon-more { flex: none; }
.mribbon-more > summary { color: var(--muted); }
.mribbon-more .mbox-pop { right: 0; left: auto; }
.mribbon-more .mbox-pop button { display: flex; width: 100%; justify-content: flex-start; gap: 6px; }
.mribbon-more .mlabel { display: inline; }
.mribbon-more .mribbon-sep { display: none; }
.mailpanes button.on { color: var(--accent); background: var(--accent-soft); }
.mail3 { --mail-nav: 250px; --mail-list: 380px; --mail-listh: 320px; position: relative; display: grid; grid-template-columns: var(--mail-nav) var(--mail-list) minmax(0, 1fr); grid-template-areas: "nav list read"; gap: 12px; align-items: start; }
.mail3.pane-bottom { grid-template-columns: var(--mail-nav) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "nav list" "nav read"; }
.mail3.pane-off { grid-template-columns: var(--mail-nav) minmax(0, 1fr); grid-template-areas: "nav list"; }
/* the borders between the panes are dragged (static/js/mail.js); at the bottom the list is resized by its corner */
.msplit { position: absolute; top: 0; bottom: 0; width: 8px; margin-left: 2px; cursor: col-resize; z-index: 5; border-radius: 4px; touch-action: none; }
.msplit:hover, .msplit.on { background: var(--accent-soft); }
.msplit[data-split=nav] { left: var(--mail-nav); }
.msplit[data-split=list] { left: calc(var(--mail-nav) + 12px + var(--mail-list)); }
.mail3.pane-bottom .msplit[data-split=list], .mail3.pane-off .msplit[data-split=list] { display: none; }
.mail3.pane-bottom .maillist { resize: vertical; height: var(--mail-listh); min-height: 120px; max-height: none; }
.mail3.pane-off .mailread { display: none; }
.mail3.pane-off.reading { grid-template-areas: "nav read"; }
.mail3.pane-off.reading .maillist { display: none; }
.mail3.pane-off.reading .mailread { display: block; }
.mail3 .mailnav { grid-area: nav; padding: 8px; position: sticky; top: 8px; max-height: calc(100vh - 100px); overflow-y: auto; }
.mail3 .maillist { grid-area: list; max-height: calc(100vh - 140px); overflow-y: auto; }
.mail3 .mailread { grid-area: read; min-width: 0; }
.mread-back { display: none; }
.mail3.pane-off .mread-back { display: inline-flex; }
@media (max-width: 900px) {
  .mail3, .mail3.pane-bottom, .mail3.pane-off { grid-template-columns: 1fr; grid-template-areas: "nav" "list"; }
  .mail3 .mailread { display: none; }
  .mail3.reading { grid-template-areas: "read"; }
  .mail3.reading .mailnav, .mail3.reading .maillist { display: none; }
  .mail3.reading .mailread { display: block; }
  .mail3 .mread-back { display: inline-flex; }
  .mail3 .mailnav { position: static; max-height: none; }
  .msplit { display: none; }
  .mailpanes { display: none; }
}
.mbox { padding: 6px 0 8px; border-bottom: 1px solid var(--line); }
.mbox:last-of-type { border-bottom: 0; }
.mbox-head { display: flex; align-items: center; gap: 2px; }
.mbox-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.mbox-state { padding: 0 4px 4px; }
.mbox-menu, .mfolder-menu { position: relative; }
.mbox-menu > summary, .mfolder-menu > summary { list-style: none; cursor: pointer; }
.mbox-menu > summary::-webkit-details-marker, .mfolder-menu > summary::-webkit-details-marker { display: none; }
.mbox-pop { position: absolute; right: 0; z-index: 20; width: 240px; padding: 10px; display: grid; gap: 8px; box-shadow: var(--shadow-pop); }
.mfolder-form { display: grid; gap: 6px; }
.mfolder-row { display: flex; align-items: center; }
.mfolder-row .mfolder { flex: 1; min-width: 0; }
.mfolder-menu > summary { padding: 4px; opacity: 0; }
.mfolder-menu .mbox-pop form > button { width: 100%; justify-content: flex-start; }
.mfolder-row:hover .mfolder-menu > summary, .mfolder-menu[open] > summary { opacity: 1; }
.mfolder { display: flex; align-items: center; gap: 8px; padding: 5px 8px 5px calc(8px + 14px * var(--depth, 0)); border-radius: 6px; color: inherit; text-decoration: none; }
.mfolder:hover { background: var(--hover, var(--accent-soft)); }
.mfolder.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.mfolder.drop { outline: 2px dashed var(--accent); }
.mf-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfolder .cnt { font-weight: 600; color: var(--accent); }
.mfolder .cnt-total { font-weight: 400; color: var(--muted); } /* «Черновики»: how many, as Outlook shows */
.mfav-person .ava { --ava-size: 18px; font-size: 9px; } /* a favorite person: the avatar in place of the folder icon */
.mconnect { margin-top: 8px; }
.mailconnect { display: grid; gap: 6px; margin-top: 8px; }
.mailoauth { display: grid; gap: 6px; margin-top: 8px; }
.mailoauth button { width: 100%; justify-content: flex-start; }
.mailoauth-or { text-align: center; margin: 2px 0 0; }
/* above the sticky group headers (.mgroup): its menus (Фильтр, Сортировка, search suggestions) open over the list */
.maillist-head { padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--card); z-index: 3; }
.maillist-head input[type=search] { flex: 1; min-width: 120px; }
.mlist-title { white-space: nowrap; }
.mailrow { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px 8px 9px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; }
.mailrow:hover { background: var(--hover, var(--accent-soft)); }
.mailrow.on { background: var(--accent-soft); }
.mailrow.unread { border-left-color: var(--accent); }
.mailrow.pinned { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.mailrow.unread .mfrom, .mailrow.unread .msubj { font-weight: 600; }
.mailrow.unread .msubj { color: var(--accent); }
.mailrow.dragging { opacity: .5; }
.mailrow .msel { margin-top: 3px; width: 16px; height: 16px; cursor: pointer; }
.mrow-link { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; color: inherit; text-decoration: none; }
.mailrow .mfrom, .mailrow .msubj, .mailrow .mprev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mailrow .msubj, .mailrow .mprev { grid-column: 1 / -1; }
.mmarks { display: flex; flex-direction: column; gap: 2px; min-width: 16px; color: var(--muted); }
.mmarks .i { width: 15px; height: 15px; }
.mgroup { padding: 10px 12px 4px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--card); position: sticky; top: var(--mlist-head, 0); z-index: 1; }
.mquick { display: none; gap: 2px; align-self: center; }
.mailrow:hover .mquick { display: flex; }
.mailrow:hover .mmarks { display: none; }
.mquick button { padding: 3px; border: 0; background: none; color: var(--muted); border-radius: 4px; cursor: pointer; line-height: 0; }
.mquick button:hover { background: var(--card); color: var(--accent); }
.mquick button.on { color: var(--danger); }
.mquick .i { width: 15px; height: 15px; }
.mctx { position: absolute; z-index: 60; min-width: 220px; padding: 4px; display: grid; box-shadow: var(--shadow-pop); }
.mctx > a, .mctx > button { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 6px 10px; border: 0; background: none; color: inherit; text-decoration: none; border-radius: 5px; cursor: pointer; font: inherit; text-align: left; }
.mctx > a:hover, .mctx > button:hover { background: var(--hover, var(--accent-soft)); }
.mctx-sub > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 5px; cursor: pointer; }
.mctx-sub > summary::-webkit-details-marker { display: none; }
.mctx-sub > summary:hover { background: var(--hover, var(--accent-soft)); }
.mctx-items { display: grid; padding-left: 18px; }
.mctx-items > button { justify-content: flex-start; border: 0; background: none; padding: 5px 10px; border-radius: 5px; cursor: pointer; font: inherit; color: inherit; text-align: left; }
.mctx-items > button:hover { background: var(--hover, var(--accent-soft)); }
.mctx hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.mctx .mcat-dot { margin: 0 3px; }
.mclip { padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; line-height: 0; }
.mclip:hover, .mclip:focus-visible { color: var(--accent); }
.mclip-pop { position: absolute; z-index: 50; width: 320px; max-height: 60vh; overflow-y: auto; padding: 6px; box-shadow: var(--shadow-pop); }
.mclip-file { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px; border-radius: 6px; align-items: center; }
.mclip-file:hover { background: var(--hover, var(--accent-soft)); }
.mclip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.mclip-acts { grid-column: 1 / -1; gap: 4px; }
.mflag, .mflag .i { color: var(--danger); }
.mdone, .mdone .i { color: var(--st-completed-fg, green); }
.mcount { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--line); color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; vertical-align: middle; }
.mail3.pane-bottom .mrow-link, .mail3.pane-off .mrow-link { grid-template-columns: 220px 1fr auto; }
.mail3.pane-bottom .mailrow .mfrom, .mail3.pane-off .mailrow .mfrom { grid-row: 1; grid-column: 1; }
.mail3.pane-bottom .mailrow .msubj, .mail3.pane-off .mailrow .msubj { grid-row: 1; grid-column: 2; }
.mail3.pane-bottom .mailrow .mdate, .mail3.pane-off .mailrow .mdate { grid-row: 1; grid-column: 3; }
.mail3.pane-bottom .mailrow .mprev, .mail3.pane-off .mailrow .mprev { display: none; }
.maillist-head { display: grid; gap: 6px; }
.maillist-head > form.row { flex-wrap: nowrap; }
.mtoolbar { flex-wrap: wrap; gap: 2px; align-items: center; }
.mtoolbar .mlabel { display: none; }
.mtoolbar:not(.has-sel) > :is(button, details) { opacity: .45; pointer-events: none; }
.mtoolbar .msel-all { width: 16px; height: 16px; margin: 0 6px 0 3px; cursor: pointer; }
.mtoolbar.has-sel { background: var(--accent-soft); border-radius: 6px; }
.mread-act { gap: 2px; flex-wrap: wrap; }
.mread-act .mlabel { display: none; }
.mact-menu .mbox-pop { left: 0; right: auto; }
.mact-menu .mbox-pop > button { justify-content: flex-start; }
.mact-menu .mbox-pop { width: max-content; min-width: 240px; max-width: 360px; }
.mbox-pop a.button.ghost { border: 0; }
.mbox-pop > a.button, .mbox-pop > button, .mbox-pop > form > button, .mbox-pop > details > summary.button { width: 100%; justify-content: flex-start; text-align: left; white-space: normal; }
.mkeys .mbox-pop { width: 300px; line-height: 1.6; }
/* the search box with its suggestions and scope, the advanced search, the tabs «Отсортированные / Другие», the filter
   and the order (GO24DEV-137) */
.msearch-box { position: relative; flex: 1; min-width: 120px; display: flex; }
.msearch-box input[type=search] { flex: 1; min-width: 0; }
.msuggest { position: absolute; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px; z-index: 30; padding: 4px; display: grid; box-shadow: var(--shadow-pop); max-height: 60vh; overflow-y: auto; }
.msuggest[hidden] { display: none; }
.msuggest .msg-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 2px; font-size: 12px; color: var(--muted); font-weight: 600; }
.msuggest .msg-head button { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.msuggest .msg-item { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 5px; cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.msuggest .msg-item:hover, .msuggest .msg-item.on { background: var(--hover, var(--accent-soft)); }
.msuggest .msg-item code { color: var(--accent); }
.maillist-head > form.msearch { flex-wrap: wrap; gap: 4px 6px; }
.mscope { max-width: 120px; }
.madv-pop { width: 300px; }
.madv-pop label { display: grid; gap: 2px; font-size: 13px; }
.madv-pop label.check { display: flex; gap: 6px; align-items: center; }
.madv-pop .row > label { flex: 1; }
.mlist-bar { align-items: center; gap: 4px; flex-wrap: nowrap; }
.mlist-sp { flex: 1; }
.mtabs { gap: 2px; }
.mtab { padding: 4px 10px; color: var(--muted); border-bottom: 2px solid transparent; text-decoration: none; font-weight: 500; }
.mtab:hover { color: var(--text); text-decoration: none; }
.mtab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.mfilter > summary.on { color: var(--accent); }
.mfilter-pop { width: 220px; gap: 0; padding: 6px; }
.mfilter-pop b { padding: 4px 8px; }
.mfilter-pop hr { width: 100%; margin: 4px 0; border: 0; border-top: 1px solid var(--line); }
.mf-item { padding: 5px 8px 5px 26px; border-radius: 5px; color: inherit; text-decoration: none; position: relative; }
.mf-item:hover { background: var(--hover, var(--accent-soft)); text-decoration: none; }
.mf-item.on::before { content: "✓"; position: absolute; left: 9px; color: var(--accent); }
.mother-hint { gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--accent-soft); color: inherit; text-decoration: none; }
.mother-hint:hover { text-decoration: none; filter: brightness(.98); }
.mother-hint span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msearch-res { gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line); color: var(--muted); flex-wrap: wrap; }
.msearch-res > span { flex: 1; min-width: 0; }
.msearch-res .mbox-pop { left: 0; right: auto; }
.mailrow mark.mhl { background: color-mix(in srgb, #ffd400 45%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.msearches { border-top: 1px solid var(--line); margin-top: 6px; }
.mcat { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11px; line-height: 16px; color: #fff; background: var(--cat); }
.mcat-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cat); flex: none; }
.c-red { --cat: #d13438; } .c-orange { --cat: #ca5010; } .c-yellow { --cat: #c19c00; } .c-green { --cat: #498205; }
.c-teal { --cat: #038387; } .c-blue { --cat: #0078d4; } .c-purple { --cat: #8764b8; } .c-gray { --cat: #7a7574; }
.mcolors { gap: 4px; flex-wrap: wrap; }
.mcolor { display: inline-flex; padding: 3px; border-radius: 5px; cursor: pointer; }
.mcolor input { position: absolute; opacity: 0; pointer-events: none; }
.mcolor:has(input:checked) { outline: 2px solid var(--accent); }
.mcolor .mcat-dot { width: 16px; height: 16px; }
.mcats { border-top: 1px solid var(--line); margin-top: 6px; }
/* «Условное форматирование»: the letters a rule takes, set off in the list (the colour of the rule's category palette) */
.mlook { color: var(--cat); }
.mailrow.mlook .mfrom, .mailrow.mlook .msubj { color: var(--cat); }
.mlook-b, .mailrow.mlook-b .mfrom, .mailrow.mlook-b .msubj { font-weight: 700; }
.mlook-i, .mailrow.mlook-i .mfrom, .mailrow.mlook-i .msubj { font-style: italic; }
.mlook-u, .mailrow.mlook-u .mfrom, .mailrow.mlook-u .msubj { text-decoration: underline; }
.mread-tags { gap: 8px; align-items: center; margin: 0 0 8px; font-size: 13px; }
.mmsg { border-top: 1px solid var(--line); padding: 6px 0; }
.mmsg > summary { list-style: none; cursor: pointer; }
.mmsg > summary::-webkit-details-marker { display: none; }
.mmsg-who { min-width: 0; flex: 1; }
.mmsg[open] .mmsg-prev { display: none; }
.mmsg-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mmsg-to { margin: 0 0 8px 46px; }
.mmsg > .mailbody, .mmsg > .ffiles { margin-left: 46px; }
.mailread-empty { display: grid; place-items: center; gap: 8px; min-height: 240px; color: var(--muted); }
.mailread-empty .i { width: 48px; height: 48px; }
.mread-head { align-items: flex-start; gap: 10px; margin: 8px 0; flex-wrap: nowrap; }
.mread-actions { flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.mread-move select { width: auto; max-width: 220px; }
.mailbody { white-space: pre-wrap; overflow-wrap: anywhere; }
/* an HTML letter in its sandboxed frame (mail.js sizes it); marks of importance, drafts, scheduled letters */
.mailhtml { display: block; width: calc(100% - 46px); margin-left: 46px; min-height: 40px; border: 0; background: #fff; border-radius: 4px; }
.mimp { color: var(--danger); }
.mdraft { color: var(--danger); font-weight: 600; }
.msched { color: var(--accent); }
.mc-banner { gap: 8px; align-items: center; padding: 8px 10px; margin: 0 0 10px; border-radius: 6px; background: var(--accent-soft); font-size: 13px; }
.mc-banner.msmime { flex-wrap: wrap; gap: 14px; }
/* «Слияние»: the bar under the addresses, the letter of each recipient in a dialog */
.mc-banner.mc-merge { flex-wrap: wrap; margin: 6px 0; }
.mc-banner.mc-merge[hidden] { display: none; }
.mc-merge-dlg { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); display: grid; gap: 8px; }
.mc-merge-dlg:not([open]) { display: none; }
.mc-merge-dlg .row { gap: 6px; align-items: center; }
.mc-merge-dlg .mc-merge-close { margin-left: auto; }
.mc-merge-body { width: 100%; height: min(420px, 60vh); border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.mc-banner.msmime-bad { background: var(--danger-soft); color: var(--danger); }
/* sender checks (GO24DEV-927): Outlook's «?» on the picture, the warnings, «через» */
.msa-ava { position: relative; display: inline-flex; flex: none; }
.msa-ava > b { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: var(--danger); color: var(--on-accent);
  font-size: 11px; line-height: 15px; text-align: center; box-shadow: 0 0 0 2px var(--card); }
.mc-banner.msa-bad { flex-wrap: wrap; gap: 8px; background: var(--danger-soft); color: var(--danger); }
.mc-banner.msa-bad > span { flex: 1; min-width: 200px; }
.mc-banner.msa-bad form { margin: 0; }
.msa-first { gap: 6px; padding: 4px 0; }
.msa-why { text-decoration: underline dotted; cursor: help; }
.msa-via { font-style: italic; }
/* the contact card of a sender or a recipient, as Outlook's profile card (template "mperson") */
.mperson { cursor: pointer; }
.mperson:hover { color: var(--accent); text-decoration: underline; }
.mperson-acts, .mperson-more { margin-top: 10px; gap: 6px; flex-wrap: wrap; }
.mperson-contact > summary { list-style: none; cursor: pointer; }
.mperson-form { display: grid; gap: 6px; margin-top: 8px; }
.mperson-form label { display: grid; gap: 2px; font-size: 13px; }
.mperson-recent { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 2px; }
.mperson-letter { gap: 6px; padding: 3px 4px; border-radius: 6px; color: inherit; text-decoration: none; min-width: 0; }
.mperson-letter:hover { background: var(--hover); }
.mperson-letter.unread .mperson-subj { font-weight: 600; }
.mperson-subj { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* «Назначить политику» (GO24DEV-935) */
.mpol-form { gap: 6px; flex-wrap: wrap; padding: 4px 0; }
.mpol-line { gap: 6px; padding: 2px 0; }
.munsub summary { list-style: none; cursor: pointer; gap: 8px; align-items: center; }
.munsub summary::-webkit-details-marker { display: none; }
.munsub[open] summary .button { display: none; }
.munsub-form { display: grid; gap: 6px; justify-items: start; margin-top: 8px; }
.munsub-form p { margin: 0; }
.munsub-done { gap: 6px; align-items: center; margin: 0 0 10px; }
/* voting buttons (mail.html «mailread»): the choices over the letter; «Отслеживание» of the user's own */
.mvote { flex-wrap: wrap; }
.mvote .mbox-menu summary { list-style: none; }
.mvote-track summary { list-style: none; cursor: pointer; gap: 8px; align-items: center; flex-wrap: wrap; }
.mvote-track summary::-webkit-details-marker { display: none; }
.mvote-n { padding: 1px 8px; border-radius: 10px; background: var(--card); }
.mvote-list { margin-top: 8px; border-collapse: collapse; }
.mvote-list th, .mvote-list td { text-align: left; padding: 3px 12px 3px 0; }
/* «Опрос о времени встречи» (mailpoll.html, mailpollpub.html, the editor's dialog) */
.mpoll-dlg { width: min(560px, calc(100vw - 32px)); }
.mpoll-dlg .mpoll-f { display: flex; flex-direction: column; gap: 4px; flex: 1; margin-bottom: 8px; }
.mpoll-row { gap: 12px; align-items: flex-start; }
.mpoll-times { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.mpoll-time { gap: 6px; flex-wrap: wrap; align-items: center; }
/* «Вставить свободное время» (mailavail.js): a day per box, its free spans ticked in a row that wraps */
.mavail-days { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; max-height: 50vh; overflow-y: auto; }
.mavail-day { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.mavail-day legend { font-weight: 600; font-size: 0.9em; padding: 0 4px; }
.mavail-dlg .mpoll-row { flex-wrap: wrap; }
.mavail-dlg .mpoll-f { min-width: 110px; }
.mavail-dlg .mpoll-f :is(input, select) { min-width: 0; width: 100%; }
.mpoll-time input { flex: 0 1 230px; min-width: 0; }
.mpoll-note { color: var(--ok); }
.mpoll-note.mpoll-busy, .mpoll-busy { color: var(--warn); }
.mpoll-grid th, .mpoll-grid td { text-align: center; }
.mpoll-grid th:first-child, .mpoll-grid td:first-child { text-align: left; }
.mpoll-who { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: normal; }
.mpoll-sum { width: 64px; }
.mpoll-yes, .mpoll-a.mpoll-yes { color: var(--ok); }
.mpoll-maybe, .mpoll-a.mpoll-maybe { color: var(--warn); }
.mpoll-no, .mpoll-a.mpoll-no { color: var(--danger); }
.mpoll-a.mpoll-none { color: var(--muted); }
.mpoll-best td { background: var(--ok-soft); }
.mpoll-on td { background: var(--accent-soft); }
.mpoll-tag { color: var(--ok); }
.mpoll-st-open { background: var(--accent-soft); }
.mpoll-st-scheduled { background: var(--ok-soft); }
.mpoll-st-cancelled { background: var(--danger-soft); }
.mpoll-link { gap: 8px; margin: 8px 0 12px; flex-wrap: wrap; }
.mpoll-link input { flex: 1; min-width: 200px; }
.mpoll-link form, .mpoll-grid form { margin: 0; }
.mpoll-chosen { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mpoll-people { display: flex; flex-wrap: wrap; gap: 8px; }
.mpoll-pick { display: inline-flex; padding: 6px; cursor: pointer; }
.mpollpub { min-width: 0; max-width: 100%; }
.mpollpub .card { min-width: 0; overflow-x: auto; }
@media (max-width: 600px) {
  .mpollpub .mpoll-grid th, .mpollpub .mpoll-grid td { padding-left: 4px; padding-right: 4px; }
  .mpollpub .mpoll-grid th:last-child, .mpollpub .mpoll-grid td:last-child { display: none; }
}
.mrecall-recalled { color: var(--ok, #1a7f37); }
.mrecall-read, .mrecall-missing, .mrecall-external, .mrecall-failed { color: var(--danger, #cf222e); }
.mrecall-form { display: grid; gap: 4px; max-width: 320px; padding: 4px 0; }
.mrecall-form button { text-align: left; white-space: normal; }
.mc-voting { display: grid; gap: 4px; margin-top: 6px; }
.mc-sens { display: grid; gap: 4px; margin-bottom: 6px; }
.msens-bar[data-sens=private], .msens-bar[data-sens=confidential] { background: var(--warn-soft); }
.mvote-tag { padding: 0 6px; border-radius: 8px; background: var(--accent-soft); }
/* the editor of a letter (mail.html «mcompose», static/js/compose.js), as Outlook's */
.mcompose { display: grid; gap: 8px; container-type: inline-size; }
/* a phone: the editor's column and its fields are never wider than the screen (a grid's column grows to its widest
   row otherwise, and the page scrolled sideways under every dialog) */
.mcompose, .mc-fields { grid-template-columns: minmax(0, 1fr); }
.mc-rcpt, .mc-field input.mc-subject { min-width: 0; }
@container (max-width: 700px) { .mc-rcpt > input { min-width: 80px; } }
.mcompose.inline { border-top: 2px solid var(--accent); padding-top: 10px; margin-top: 10px; }
.mcompose.drop { outline: 2px dashed var(--accent); outline-offset: 4px; }
.mc-bar { gap: 4px; align-items: center; flex-wrap: wrap; --icon-size: 18px; }
/* the icons of the bar: one size, one colour (a menu's summary and a file's label too), as a ribbon */
.mc-bar .ghost:not(.on) { color: var(--text); }
.mc-bar .ghost:hover { color: var(--accent); }
.mc-bar > label.button { font-size: inherit; margin: 0; }
.mc-bar .mlabel { display: inline; }
/* a narrow window: the bar in one line, its words in the tips */
@container (max-width: 700px) { .mc-bar .mlabel { display: none; } }
.mc-bar button.on { color: var(--danger); background: var(--danger-soft, var(--accent-soft)); }
.mc-send { gap: 1px; flex-wrap: nowrap; }
.mc-send > button { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mc-later > summary { border-top-left-radius: 0; border-bottom-left-radius: 0; padding-left: 6px; padding-right: 6px; }
.mc-later .mbox-pop, .mc-menu .mbox-pop { left: 0; right: auto; min-width: 240px; }
.mc-later .mbox-pop > button, .mc-menu .mbox-pop > button { justify-content: space-between; width: 100%; }
.mc-status { margin-left: auto; }
.mc-fields { display: grid; gap: 4px; }
.mc-field { display: flex; align-items: flex-start; gap: 8px; border-bottom: 1px solid var(--line); padding: 2px 0; }
/* one grid: the captions (Кому, Копия, Скрытая — the address book; Тема) on the left, the fields in a line after them */
.mc-label { flex: none; width: 72px; height: 36px; margin: 0; padding: 0 4px 0 0; display: flex; align-items: center; justify-content: flex-start; color: var(--muted); font-size: 13px; font-weight: normal; }
button.mc-label:hover { color: var(--accent); }
.mc-field input.mc-subject { flex: 1; min-height: 36px; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 6px 2px; }
.mc-field input.mc-subject:focus { outline: none; }
.mc-field > select { flex: 1; }
.mc-ccb { display: flex; gap: 2px; flex: none; padding-top: 3px; }
.mc-rcpt { position: relative; flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 36px; cursor: text; }
.mc-rcpt > input { flex: 1; min-width: 160px; border: 0; box-shadow: none; background: transparent; padding: 6px 2px; min-height: 0; }
.mc-rcpt > input:focus { outline: none; }
.mc-chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; max-width: 100%; }
.mc-chip.bad { background: var(--danger-soft, #fde7e9); color: var(--danger); text-decoration: underline wavy; }
.mc-chip.ext { box-shadow: inset 0 0 0 1px var(--warn); }
/* «Подсказки по почте» (MailTips) over the addresses */
.mc-tips { display: grid; gap: 2px; padding: 6px 10px; border-radius: 6px; background: var(--warn-soft); font-size: 13px; }
/* «Диктовка» (static/js/mailvoice.js): the microphone red while it listens */
.mc-dictate { gap: 0; }
.mc-dictate [data-dictate].on { color: var(--danger); animation: mc-listen 1.2s ease-in-out infinite; }
@keyframes mc-listen { 50% { opacity: .45; } }
.mc-dictating { margin-left: 6px; color: var(--muted); }
.mc-dictating.err { color: var(--danger); }
/* «Прочитать вслух»: the player over the letter; without the browser's voices there is no button */
html:not(.go24-tts) [data-speak] { display: none; }
.mspeak { gap: 4px; flex-wrap: wrap; }
.mspeak select { width: auto; padding: 2px 6px; }
::highlight(go24-speak) { background: #fff1a8; color: #000; }
/* «Предлагаемые ответы» under a letter received (mailsuggest.go), hidden while asked for and once a reply is open */
.msreply { gap: 6px; flex-wrap: wrap; margin: 10px 0 4px; color: var(--accent); }
.msreply[data-ask], .mailletter:has(.mreply-box [data-compose]) .msreply { display: none; }
.msreply .msreply-a { border-radius: 999px; border-color: var(--accent-soft); color: var(--accent); max-width: 100%; white-space: normal; text-align: left; }
.mc-tip { overflow-wrap: anywhere; }
.mc-tip-more { color: var(--muted); white-space: pre-line; }
/* «Проверка читаемости» (Accessibility Checker) over the letter's text: errors red, warnings orange, tips muted */
.mc-a11y { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 6px 0; max-height: 40vh; overflow: auto; font-size: 13px; }
.mc-a11y-head { justify-content: space-between; }
.mc-a11y ul { list-style: none; margin: 2px 0 8px; padding: 0; display: grid; gap: 6px; }
.mc-a11y-level { font-weight: 600; margin-top: 6px; }
.mc-a11y-level[data-level="error"] { color: var(--danger); }
.mc-a11y-level[data-level="warn"] { color: var(--warn); }
.mc-a11y-level[data-level="tip"] { color: var(--muted); }
.mc-a11y-fix { gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.mc-a11y-fix input { flex: 1 1 200px; width: auto; padding: 3px 6px; }
.mc-chip button { border: 0; background: none; padding: 0 4px; min-height: 0; cursor: pointer; color: inherit; line-height: 1; }
.mc-sugg { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 320px; max-width: 100%; max-height: 300px; overflow-y: auto; padding: 4px 0; }
.mc-sugg-item { padding: 6px 10px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; white-space: nowrap; overflow: hidden; }
.mc-sugg-item:hover, .mc-sugg-item.on { background: var(--accent-soft); }
.mc-sugg-item .tag { margin-left: auto; }
.mc-sugg-item .mc-kind { align-self: center; }
/* the source of a recipient (mailbook.go): its colour on the icon, the tag and the chip */
[data-kind] { --kind: var(--muted); }
[data-kind="employee"] { --kind: #0f6cbd; }
[data-kind="contact"] { --kind: #107c41; }
[data-kind="crm_contact"], [data-kind="crm_lead"] { --kind: #c239b3; }
[data-kind="crm_company"] { --kind: #8764b8; }
[data-kind="history"] { --kind: #ca5010; }
.mc-kind { display: inline-flex; flex: none; color: var(--kind); }
.mc-kind .i { width: 14px; height: 14px; }
.mc-chip .mc-kind { margin-right: 2px; }
.mc-kind-tag[data-kind] { color: var(--kind); background: color-mix(in srgb, var(--kind) 12%, transparent); }
.mc-book { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); width: min(640px, 94vw); height: min(560px, 90vh); padding: 14px; flex-direction: column; gap: 8px; }
.mc-book[open] { display: flex; }
.mc-book-head { display: flex; align-items: center; gap: 6px; }
.mc-book-head h3 { margin: 0; margin-right: auto; }
.mc-book-tools { display: flex; gap: 4px; flex-wrap: wrap; }
.mc-book-tools[hidden] { display: none; }
.mc-book-edit .row input[readonly] { flex: 1; min-width: 0; }
.mc-book-row[aria-disabled="true"] .mc-book-who b { font-weight: 500; }
.mc-book-tabs { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--line); }
.mc-book-tabs button { border-radius: 0; border-bottom: 2px solid transparent; color: var(--muted); }
.mc-book-tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.mc-book-list { flex: 1; overflow-y: auto; min-height: 0; }
.mc-book-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; cursor: pointer; }
.mc-book-row:hover { background: var(--hover); }
.mc-book-row[aria-selected="true"] { background: var(--accent-soft); }
.mc-book-row button { flex: none; }
.mc-book-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mc-book-who > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-book-empty { padding: 16px 8px; }
.mc-book-edit { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.mc-book-edit label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.mc-book-edit[hidden] { display: none; }
.mc-book-foot { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
@media (max-width: 600px) { .mc-book-row .mc-kind-tag { display: none; } }
.mc-files { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-files:empty { display: none; }
.mc-file { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.mc-tools { gap: 1px; flex-wrap: wrap; align-items: center; padding: 4px; border: 1px solid var(--line); border-radius: 6px 6px 0 0; background: var(--hover); }
.mc-tools select { width: auto; min-height: 30px; padding: 2px 6px; font-size: 13px; max-width: 130px; }
.mc-tools button.on { background: var(--accent-soft); color: var(--accent); }
.mc-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.mc-color { position: relative; }
.mc-color input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.mc-grid { display: grid; grid-template-columns: repeat(8, 18px); gap: 2px; min-width: 0 !important; padding: 6px; }
.mc-grid button { width: 18px; height: 18px; min-height: 0; padding: 0; border: 1px solid var(--line); background: var(--card); border-radius: 2px; }
.mc-grid button.on { background: var(--accent-soft); border-color: var(--accent); }
/* «Эмодзи» and «Символ» of the editor; «Формат по образцу» picked up */
.mc-chars { width: min(304px, 86vw); max-height: 280px; overflow: auto; padding: 8px; }
.mc-chars-row { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0 6px; }
.mc-chars-row button { width: 30px; height: 30px; min-height: 0; padding: 0; font-size: 18px; line-height: 1; background: none; border: 0; border-radius: 4px; cursor: pointer; }
.mc-chars-row button:hover, .mc-chars-row button:focus-visible { background: var(--accent-soft); }
[data-chars="symbols"] .mc-chars-row button { font-size: 15px; color: var(--text); }
.mc-painting { cursor: copy; }
.mc-editor { min-height: 260px; max-height: 70vh; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px;
  background: #fff; color: #1f2328; font-family: Calibri, Arial, sans-serif; font-size: 11pt; line-height: 1.4; overflow-wrap: anywhere; }
.mc-editor:focus { outline: 2px solid var(--accent-soft); }
.mc-editor p { margin: 0; }
.mc-editor img { max-width: 100%; }
.mc-editor table td, .mc-editor table th { vertical-align: top; }
.mc-editor blockquote { margin: 0 0 0 .8em; padding-left: .8em; border-left: 2px solid #c8ccd1; }
.mc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; gap: 12px; align-items: center; padding: 10px 16px; box-shadow: 0 4px 16px rgb(0 0 0 / .18); }
/* «Почта», step 7: the files of a letter, their viewer, the drive picker, the toast of a new letter */
.mfiles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mfile { display: inline-flex; align-items: center; gap: 2px; }
.mfile form, .mfiles-all form { display: inline; margin: 0; }
.mviewer { position: fixed; inset: 0; z-index: 120; background: rgb(0 0 0 / .72); display: flex; flex-direction: column; }
.mviewer-bar { background: var(--card); padding: 6px 12px; gap: 8px; align-items: center; flex-wrap: wrap; }
.mviewer-bar .grow, .mpicker .grow { flex: 1; }
.mviewer-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
.mviewer-body { flex: 1; overflow: auto; display: flex; justify-content: center; align-items: flex-start; padding: 16px; }
.mviewer-body > img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; align-self: center; }
.mviewer-pdf { width: min(1000px, 100%); height: 100%; border: 0; background: #fff; }
.mviewer-doc { background: #fff; color: #1f2328; width: min(1000px, 100%); padding: 24px 32px; border-radius: var(--radius); overflow-wrap: anywhere; }
.mviewer-doc table { border-collapse: collapse; margin: 0 0 16px; }
.mviewer-doc td { border: 1px solid #d0d7de; padding: 2px 6px; vertical-align: top; }
.mviewer-doc .pv-slide { border-bottom: 1px solid #d0d7de; padding: 12px 0; }
.mviewer-doc .pv-slide-n, .mviewer-doc .pv-sheet { color: #656d76; font-size: 12px; }
.mviewer-doc .pv-text { white-space: pre-wrap; font: 13px/1.45 ui-monospace, monospace; margin: 0; }
.mviewer-doc .pv-head { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 0 0 12px; }
.mviewer-doc .pv-head dt { font-weight: 600; }
.mviewer-doc .pv-head dd { margin: 0; }
/* «Поля для шаблонов» of the document templates: a field to copy by a click and what it is */
.docfields { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; align-items: center; margin: 6px 0 10px; }
.docfields button { justify-content: flex-start; padding: 2px 6px; }
.docimages { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 8px 0; }
.docimage { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.docimage-pic { height: 90px; display: flex; align-items: center; justify-content: center; background: var(--bg); border-radius: 6px; }
.docimage-pic img { max-height: 86px; max-width: 100%; object-fit: contain; }
.mpicker { align-items: center; justify-content: center; }
.mpicker-card { width: min(560px, calc(100vw - 32px)); max-height: 80vh; display: flex; flex-direction: column; gap: 8px; padding: 12px; }
.mpicker-path { flex-wrap: wrap; gap: 2px; }
.mpicker-items { overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.mpicker-item { justify-content: flex-start; text-align: left; gap: 6px; align-items: center; }
.mtoast { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.mtoast-head { display: flex; flex-direction: column; color: inherit; text-decoration: none; padding-right: 20px; }
.mtoast-subj, .mtoast-prev { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtoast-acts { gap: 4px; flex-wrap: wrap; }
.mtoast-x { position: absolute; top: 4px; right: 4px; }
.mx-say, .im-toast { padding: 10px 12px; }
.im-toast { color: inherit; text-decoration: none; }
/* the mail settings */
.msettings { padding: 16px; }
.msettings-form { display: grid; gap: 6px; max-width: 760px; }
.msnippet { gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.msnippet b { flex: 1; }
.msig-box { gap: 10px; align-items: center; flex-wrap: wrap; padding: 6px 0; }
.msig-box select { width: auto; }
.mooo { margin: 0 0 10px; }
.mooo span { flex: 1; }
.mrule { flex-wrap: wrap; }
.mrule.off b, .mrule.off .mrule-sum { opacity: .55; }
.mrule-acts { gap: 4px; align-items: center; flex: 1; min-width: 0; }
.mrule-sum { flex-basis: 100%; padding-left: 36px; }
.mrule-checks { gap: 6px 16px; flex-wrap: wrap; }
.mrule-form fieldset { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px 12px; }
.mrule-except { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
.mrule-except[open] { display: grid; gap: 6px; }
.mooo-period { gap: 12px; flex-wrap: wrap; }
.mooo-form textarea { width: 100%; }
.msweep-days { width: 72px; display: inline-block; }
/* «Бизнес-процессы» */
.bpapproval { display: grid; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.fbp { border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; }
.fbp > .row { padding: 8px 14px; gap: 10px; }
.bpsteps li { margin: 4px 0; }
.bpsteps li.done { color: var(--muted); text-decoration: line-through; }
.bpsteps li.now { font-weight: 600; color: var(--accent); }
.bpsteps li.on { background: var(--accent-soft); border-radius: 4px; }
.bpsteps li.off, .bpblock.off { opacity: .55; } /* «Выключить»: the process skips the step */
.bpaddstep { display: grid; gap: 6px; margin-top: 8px; }
.pill.bp-done { color: var(--st-completed-fg); }
.pill.bp-rejected, .pill.bp-failed { color: var(--danger); }
.bpmine { border-left: 4px solid var(--accent); }
.bprequest { display: grid; gap: 6px; max-width: 640px; }
.pill.bp-stopped { color: var(--muted); }
.pill.bplabel { color: var(--accent); border-color: var(--accent); }
.bpactions { margin: 8px 0; gap: 8px; }
/* the scheme of a template (bpscheme.js), as the graphical designer: blocks top-down joined by a line,
   a condition's «Да» and «Нет», a parallel step's branches side by side, an iterator's and a loop's steps inside */
.bphead { justify-content: space-between; align-items: center; } .bphead h2 { margin: 0; }
.bpviews button.on { color: var(--accent); background: var(--accent-soft); }
.bpview-scheme .bpsteps, .bpview-list .bpscheme { display: none; }
.bpscheme { overflow-x: auto; padding: 4px 0 8px; }
.bpflow, .bpcol { display: flex; flex-direction: column; align-items: center; }
.bpnode { display: flex; flex-direction: column; align-items: center; }
.bpblock { position: relative; display: flex; gap: 8px; align-items: flex-start; width: 240px; padding: 8px 10px; background: var(--card);
  border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 8px; cursor: grab; font-size: 13px; }
.bpblock:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.bpblock.k-if, .bpblock.k-loop, .bpblock.k-foreach { border-left-color: var(--warn); }
.bpblock.k-parallel, .bpblock.k-goto, .bpblock.k-end { border-left-color: var(--muted); }
.bpblock.dragging { opacity: .4; }
.bpnum { flex: none; min-width: 20px; height: 20px; border-radius: 10px; background: var(--hover); color: var(--muted); font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; }
.bptext { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.bptools { position: absolute; top: -12px; right: 4px; display: none; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.bpblock:hover .bptools, .bpblock:focus-within .bptools { display: inline-flex; }
.bpsplit { display: flex; gap: 16px; align-items: flex-start; padding: 6px 10px 0; border-top: 2px solid var(--line); }
.bpsplit.bpbody { border: 1px dashed var(--line); border-radius: 8px; padding: 6px 10px 2px; }
.bpcolhead { font-size: 12px; font-weight: 600; color: var(--muted); }
.bpskip { font-size: 12px; color: var(--muted); padding: 6px 0; }
.bpgap { display: flex; align-items: center; justify-content: center; width: 22px; height: 26px; color: var(--muted); text-decoration: none;
  font-weight: bold; position: relative; }
.bpgap::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; border-left: 2px solid var(--line); z-index: 0; }
.bpgap { background: none; } .bpgap:hover, .bpgap.drop { color: var(--accent); text-decoration: none; }
.bpgap.drop { outline: 2px dashed var(--accent); border-radius: 6px; width: 60px; }
.bpend { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; padding: 2px 10px; }
.bpsteps li[draggable] { cursor: grab; } .bpsteps li.drop { box-shadow: inset 0 2px 0 var(--accent); }
/* «Открытые линии» */
.olrow.on { background: var(--accent-soft); }
.olmsgs { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; max-height: 55vh; overflow: auto; }
.olm { max-width: 80%; padding: 8px 10px; border-radius: 10px; background: var(--hover); }
.olm.op { align-self: flex-end; background: var(--accent-soft); }
.olm.auto { border: 1px dashed var(--line); background: transparent; }
.olnote { align-self: center; text-align: center; }
.olm.secret { background: var(--warn-soft); border: 1px dashed var(--warn); }
.ol-formdone { color: var(--ok); }
.olhide { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; cursor: pointer; }
.olreply.hidden-msg textarea { background: var(--warn-soft); }
.olfile { margin-top: 4px; }
.olfile img { max-width: 240px; max-height: 200px; border-radius: 6px; display: block; }
.olfile audio { display: block; max-width: 100%; height: 36px; margin-bottom: 2px; }
.oltext { margin-top: 4px; white-space: pre-wrap; font-style: italic; }
.olread { text-align: right; margin-top: 2px; }
.oltyping { margin: -6px 0 8px; font-style: italic; }
.olquick-wrap { position: relative; }
.olquick-wrap textarea { width: 100%; }
.olquick { bottom: 100%; left: 0; right: auto; margin-bottom: 6px; max-height: 260px; overflow: auto; }
.olquick button { display: block; text-align: left; }
.olquick button.on { background: var(--accent-soft); }
.oltransfer .pop, .olforms .pop { padding: 12px; min-width: 300px; }
.olrate .pop { padding: 12px; min-width: 300px; right: 0; left: auto; }
.olrate .pop textarea { width: 100%; }
.olvotes { gap: 16px; align-items: center; margin-top: 6px; }
details.olline { margin-top: 10px; }
details.olline > summary { cursor: pointer; font-weight: 600; }
.pill.ol-kpi { background: var(--danger-soft); color: var(--danger); }
.olcode { background: var(--hover); padding: 8px; border-radius: 6px; overflow-x: auto; user-select: all; }
.olchatlink { align-items: center; flex-wrap: wrap; }
.olchatlink a { word-break: break-all; }
/* «Приложения»: the application's page fills the main area */
.app-frame iframe { display: block; width: 100%; height: calc(100vh - 110px); border: 0; border-radius: 8px; background: var(--card); }
.apptab summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; list-style: none; }
.apptab summary h2 { margin: 0; }
.apptab iframe { display: block; width: 100%; height: 520px; border: 0; margin-top: 10px; border-radius: 6px; background: var(--card); }

/* efficiency: the big percent and the chart side by side */
.eff-period { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.eff-top { display: grid; grid-template-columns: minmax(180px, 220px) 1fr; gap: 12px; }
.eff-big { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.eff-pct { font-size: 48px; font-weight: 700; color: var(--ok); line-height: 1.1; }
.eff-pct.sm { font-size: inherit; }
.eff-pct.mid { color: var(--warn); }
.badge.red { background: var(--danger-soft); color: var(--danger); }
.eff-pct.low { color: var(--danger); }
@media (max-width: 700px) { .eff-top { grid-template-columns: 1fr; } }

/* flows: counters of a flow, its forms */
.flow-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 10px 0; }
.flow-stats .n { font-size: 24px; font-weight: 700; }
.flow-form, .flow-task { display: grid; gap: 6px; max-width: 720px; }
.flow-task { max-width: none; }
.flow-task > :not(.flowlink) { max-width: 720px; }
/* «Поставить задачу» and the flow's link on one line; a long link ends in «…» (GO24DEV-493) */
.flowlink { display: flex; align-items: center; gap: 8px; min-width: 0; margin-top: 6px; }
.flowlink > * { flex: none; }
.flowlink > a { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-dist { display: grid; gap: 4px; }

/* work in progress (forms.js, mail.js): a running line on top of the page, the pressed button spins */
html.go24-busy, html.go24-busy * { cursor: progress !important; }
html.go24-busy::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: go24-run 1s linear infinite; }
@keyframes go24-run { from { background-position: -40% 0; } to { background-position: 140% 0; } }
button.busy, .button.busy { position: relative; color: transparent !important; pointer-events: none; }
button.busy > *, .button.busy > * { visibility: hidden; }
button.busy::after, .button.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--accent); border-right-color: transparent; animation: go24-spin .7s linear infinite; }
@keyframes go24-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { html.go24-busy::before { animation-duration: 3s; } button.busy::after { animation-duration: 2s; } }

/* «Коллабы»: the list of collabs, the guest mark, the collab tab of the messenger */
.collabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.collabs .collab { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.collab-links { flex-wrap: wrap; gap: 12px; margin-top: auto; font-size: var(--font-size-sm); }
.pill.guest { background: var(--warn-soft); color: var(--warn); padding: 0 8px; font-size: 11px; }
.im-tabs { margin: 8px 8px 0; }
.im-tabs a { font-size: var(--font-size-sm); }
.im-ico.k-collab { background: var(--warn-soft); color: var(--warn); }
/* «Звонки» of the messenger: the call history, a missed call in red, calling back on hover */
.im-tabs a { padding: 8px 10px; }
.im-calls { flex: 1; overflow-y: auto; }
.im-calls-tabs { margin: 4px 8px 6px; }
.im-calls-tabs a { font-size: var(--font-size-sm); padding: 4px 10px; }
.im-call-what { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.im-call-what .i { width: 14px; height: 14px; }
.im-call.k-missed .im-call-what, .im-call.k-declined .im-call-what { color: var(--danger); }
.im-call-at { text-align: right; flex: none; }
.im-call-back { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: none; gap: 2px; background: var(--card); border-radius: 6px; }
.im-call:hover .im-call-back { display: flex; }
/* a collab's settings, its log, deleting it */
#settings fieldset { border: 0; padding: 0; margin: 0; }
.clog { list-style: none; margin: 8px 0 0; padding: 0; max-height: 420px; overflow-y: auto; }
.clog li { padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--font-size-sm); }
.danger-zone { margin-top: 10px; }
.danger-zone summary { color: var(--danger); cursor: pointer; }

/* the editor's picture frame (compose.js resizer) */
.mresize { position: absolute; border: 1px solid var(--accent); pointer-events: none; z-index: 5; }
.mresize-h { position: absolute; width: 9px; height: 9px; background: var(--card); border: 1px solid var(--accent); pointer-events: auto; touch-action: none; }
.mresize-nw { left: -5px; top: -5px; cursor: nwse-resize; } .mresize-n { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.mresize-ne { right: -5px; top: -5px; cursor: nesw-resize; } .mresize-e { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.mresize-se { right: -5px; bottom: -5px; cursor: nwse-resize; } .mresize-s { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.mresize-sw { left: -5px; bottom: -5px; cursor: nesw-resize; } .mresize-w { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.mresize-size { position: absolute; right: 0; bottom: -22px; padding: 1px 6px; border-radius: 4px; background: var(--accent); color: #fff; font-size: 11px; white-space: nowrap; }
/* the planner of the meeting form: busy time of its people on the day */
.planner { min-width: 0; }
.pl-head { gap: 8px; align-items: center; margin-bottom: 4px; }
.pl-state { color: var(--ok); }
.pl-state.bad { color: var(--danger); }
.pl-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; min-height: 24px; }
.pl-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.pl-row.clash .pl-name { color: var(--danger); }
.pl-track { position: relative; height: 20px; background: var(--hover); border-radius: 4px; }
.pl-hours .pl-track { background: none; height: 16px; }
.pl-hours .pl-track span { position: absolute; font-size: 11px; color: var(--muted); transform: translateX(-50%); }
.pl-hours .pl-track span:first-child { transform: none; }
.pl-slot, .pl-here { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.pl-slot.busy { background: var(--accent); opacity: .55; }
.pl-slot.tentative { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, transparent 3px 6px); opacity: .55; }
.pl-slot.absent { background: var(--violet); opacity: .45; }
.pl-here { top: 0; bottom: 0; border: 2px solid var(--ok); background: transparent; }
.pl-row.clash .pl-here { border-color: var(--danger); }
.pl-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 6px 0 0; }
.pl-key { display: inline-block; width: 14px; height: 10px; border-radius: 2px; }
.pl-key.busy { background: var(--accent); opacity: .55; }
.pl-key.tentative { background: repeating-linear-gradient(45deg, var(--accent) 0 3px, transparent 3px 6px); }
.pl-key.absent { background: var(--violet); opacity: .45; }
.pl-key.here { border: 2px solid var(--ok); }
@media (max-width: 760px) { .pl-row { grid-template-columns: 90px 1fr; } }


/* «Диск»: selection bar, row menu, drag and drop, uploads, the move/copy dialog */
.disk { position: relative; }
.disk-list .selcol { width: 28px; }
.disk-list td:nth-child(2) { width: 50%; }
.disk-list tr.drop-on td, .crumbs a.drop-on { background: var(--hover); outline: 2px dashed var(--accent); outline-offset: -2px; }
.disk-bulk { padding: 8px 12px; border-bottom: 1px solid var(--line); gap: 8px; align-items: center; }
.disk-bulk form { margin: 0; }
.dmore .pop { left: auto; right: 0; min-width: 200px; padding: 6px; }
.dmore .pop a.button.ghost { border: 0; justify-content: flex-start; width: 100%; }
.disk-drop { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.1em;
  background: color-mix(in srgb, var(--card) 85%, transparent); border: 2px dashed var(--accent); border-radius: var(--radius); pointer-events: none; z-index: 5; }
.disk-progress { padding: 8px 12px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.disk-up { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 8px; align-items: center; }
.disk-up span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disk-up small { color: var(--danger, #c00); }
.disk-dlg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); width: min(480px, 92vw); padding: 16px; }
.disk-dlg form { display: grid; gap: 10px; }
.disk-dlg h3 { margin: 0; }
.disk-clash { width: min(720px, 92vw); }
.disk-pick { max-height: 300px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; min-height: 80px; }
.disk-pick-row { display: block; padding: 6px 10px; color: var(--text); }
.disk-pick-row:hover { background: var(--hover); text-decoration: none; }

/* «Диск»: tiles and the viewer's player */
.disk-list .thumb { display: none; }
.disk.tiles .disk-list thead { display: none; }
.disk.tiles .disk-list tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 12px; }
.disk.tiles .disk-list tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "thumb thumb thumb" "sel name more";
  align-items: center; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; position: relative; }
.disk.tiles .disk-list td { border: 0; padding: 2px; white-space: normal; }
.disk.tiles .disk-list td.meta { display: none; }
.disk.tiles .disk-list td.thumb { display: block; grid-area: thumb; width: auto; } /* not the list's 50% of the second column */
.disk.tiles .disk-list td.selcol { grid-area: sel; }
.disk.tiles .disk-list td:nth-child(3) { grid-area: name; width: auto; overflow-wrap: anywhere; font-size: .92em; }
.disk.tiles .disk-list td:last-child { grid-area: more; }
.disk.tiles .disk-list td:nth-child(3) .i { display: none; }
.disk-list .thumb a { display: flex; align-items: center; justify-content: center; height: 110px; border-radius: 8px; background: var(--hover); overflow: hidden; }
.disk-list .thumb img { max-width: 100%; max-height: 110px; object-fit: cover; }
.disk.big .disk-list tbody { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.disk.big .disk-list .thumb a { height: 200px; }
.disk.big .disk-list .thumb img { max-height: 200px; }
.disk.big .disk-list .ticon .i { width: 72px; height: 72px; font-size: 72px; }
.disk-list .ticon { display: grid; justify-items: center; gap: 2px; color: var(--muted, #888); }
.disk-list .ticon[hidden] { display: none; }
.disk-list .ticon .i { width: 40px; height: 40px; font-size: 40px; }
.disk-list .ticon small { font-weight: 600; }
.diskhead { align-items: center; gap: 8px; }
.disk-search { gap: 4px; flex-wrap: nowrap; }
.disk-search input[type=search] { width: 200px; }
.dfilter .pop { right: 0; left: auto; min-width: 300px; }
.dfilter-body { display: grid; gap: 10px; }
.dfilter-body label { display: grid; gap: 4px; }
.dfilter-body [data-disk-range] { flex-wrap: nowrap; gap: 6px; }
.dfilter-body [data-disk-range] input { flex: 1; min-width: 0; }
.dfilter summary.on { color: var(--accent); }
.dchips { gap: 6px; flex-wrap: wrap; margin: -4px 0 8px; }
.dchips .pill { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.dchips .pill:hover { text-decoration: none; background: var(--hover); }
.diskusage { gap: 6px; margin: -4px 0 8px; }
.disklimits { gap: 16px; flex-wrap: wrap; }
.disklimits input { width: 90px; }
.davinfo .pop { width: min(440px, calc(100vw - 32px)); right: 0; left: auto; }
.officenew { display: grid; gap: 6px; min-width: 220px; }
.officenew button { justify-content: flex-start; }
.officepage { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - 96px); min-height: 420px; }
.officeframe { flex: 1; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); }
.officeframe .empty { padding: 24px; }
.boardpage .officeframe { position: relative; }
#board-editor { position: absolute; inset: 0; }
#board-editor.empty { position: static; }
[data-board-status].err { color: var(--danger); }
.disk-list th .sortlink { color: inherit; text-decoration: none; white-space: nowrap; }
@media (max-width: 700px) { .diskhead { flex-wrap: wrap; } .disk-search input[type=search] { width: 130px; } }
[data-disk-view] { display: inline-flex; gap: 2px; }
[data-disk-view] button.on { background: var(--hover); }
.mviewer-media { max-width: 100%; max-height: 100%; align-self: center; background: #000; }
.mviewer-audio { align-self: center; width: min(600px, 100%); }
.mviewer-none { color: #fff; align-self: center; }
.mviewer-tools { gap: 4px; }
.mviewer-fit { position: relative; flex-shrink: 0; margin: auto; }
.mviewer-fit img { position: absolute; left: 50%; top: 50%; max-width: none; background: #fff; }
.mviewer-print { position: fixed; width: 0; height: 0; border: 0; }
.mviewer-arc { background: var(--card); color: var(--text); border-radius: 8px; padding: 12px 16px; width: min(760px, 100%); max-height: 100%; overflow: auto; align-self: flex-start; margin: 0 auto; }
.arc-list { list-style: none; margin: 0; padding: 0; }
.arc-list li { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.arc-list li:hover { background: var(--hover); }
.arc-list .arc-fold, .arc-list .arc-fold:hover { padding: 0 4px; font-weight: 600; color: inherit; }
.arc-list .grow { flex: 1; }

/* «Публичная ссылка»: the link's settings in the drive and the page it opens */
.linkform { display: grid; gap: 6px; margin-top: 6px; max-width: 420px; }
.dlink { margin-left: 6px; color: var(--accent); }
.diskcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .diskcard { grid-template-columns: 1fr; } }
.dcard-img { max-width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; background: var(--bg); }
.dcomment { border-top: 1px solid var(--line); padding-top: 8px; }
.dcomment:target { background: var(--accent-soft); border-radius: 6px; }
.dcomment-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.dlock { margin-left: 4px; color: var(--muted); cursor: help; }
.dlock .icon { width: 14px; height: 14px; vertical-align: -2px; }
.dsnip { color: var(--muted); margin-top: 2px; max-width: 60ch; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dsnip mark { background: color-mix(in srgb, var(--accent, #f5c400) 25%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }
.dediting { margin-left: 4px; font-size: 11px; color: var(--accent); }
.dediting .icon { width: 12px; height: 12px; vertical-align: -2px; }
.share { max-width: 900px; margin: 24px auto; padding: 0 16px; display: grid; gap: 12px; }
.share-file, .share-pass { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 24px; }
.share-pass { max-width: 360px; justify-self: center; width: 100%; }
.share-file img { max-width: 100%; max-height: 60vh; border-radius: 8px; }
.share-file .ticon .i { width: 64px; height: 64px; }
.share-foot { text-align: center; }
.pubdoc-view { width: 100%; height: 80vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
/* «Подпись» (sign.go): statuses, the document and the signers side by side */
.pill.sg-signing, .pill.sg-pready { background: var(--warn-soft); color: var(--warn); }
.pill.sg-done, .pill.sg-psigned { background: var(--ok-soft); color: var(--ok); }
.pill.sg-refused, .pill.sg-prefused { background: var(--danger-soft); color: var(--danger); }
.pill.sg-cancelled, .pill.sg-pwait { background: var(--hover); color: var(--muted); }
.pill.sg-me { background: var(--accent-soft); color: var(--accent); }
.sgp-signed { color: var(--ok); } .sgp-refused { color: var(--danger); } .sgp-ready { font-weight: 600; }
/* the list's search and filter bar, the list or kanban switch; the kanban's columns are the statuses (GO24DEV-953) */
.sign-filters { gap: 8px; flex-wrap: wrap; align-items: center; }
.sign-filters .seg { display: inline-flex; gap: 4px; margin-left: auto; }
.sign-filters .chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; color: var(--text); text-decoration: none; }
.sign-filters .chip.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.pill.sg-expired { background: var(--danger-soft); color: var(--danger); }
.sgbar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: 2px 0 4px; max-width: 220px; }
.sgbar > span { display: block; height: 100%; background: var(--ok); }
.sgremind { gap: 6px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.sgremind select { width: auto; }
.sgclient { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 12em) auto; gap: 6px; margin-bottom: 6px; }
@media (max-width: 560px) { .sgclient { grid-template-columns: minmax(0, 1fr) auto; } .sgclient input[type=email], .sgclient input[type=tel] { grid-column: 1; } }
.sgclient:has(select) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 10em) minmax(0, 11em) auto; }
@media (max-width: 560px) { .sgclient:has(select) { grid-template-columns: minmax(0, 1fr) auto; } .sgclient select { grid-column: 1; } }
.sgwrap { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.sgwrap .pubdoc-view { height: calc(100vh - 160px); }
.sgparty { padding: 8px 0; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.sgparty:first-of-type { border-top: 0; }
.sgev { display: grid; grid-template-columns: 96px 1fr; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.sghist h2 + .sgev { border-top: 0; }
.sgev-done > div { color: var(--ok); }
.sgev-refused > div, .sgev-warn { color: var(--danger); }
.sgturn { border-color: var(--accent); }
.sgturn form.row { flex-wrap: wrap; gap: 8px; }
.sgturn .row { flex-wrap: wrap; gap: 8px; }
/* «Ваша подпись»: the pad is white like paper, the ink dark in either theme */
.sgpad { display: grid; gap: 6px; margin-bottom: 8px; }
.sgpad canvas { width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed var(--line); border-radius: 8px; touch-action: none; cursor: crosshair; }
.sgpad.sgpad-need canvas { border-color: var(--danger); }
.sgsig { max-width: 160px; max-height: 54px; background: #fff; border-radius: 4px; }
@media (max-width: 900px) { .sgwrap { grid-template-columns: 1fr; } }
/* «Подпись»: blocks on the pages of the document (GO24DEV-837) */
.sgb { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.sgb-pages { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.sgb-page { position: relative; width: 100%; max-width: 820px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); user-select: none; touch-action: none; }
.sgb-page img { display: block; width: 100%; height: 100%; }
.sgb-num { position: absolute; right: 6px; bottom: 4px; font-size: 11px; color: #888; }
.sgb-placing .sgb-page { cursor: crosshair; }
.sgb-tools { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 8px; }
.sgb-tools label { display: flex; flex-direction: column; gap: 4px; }
.sgb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.sgb-kinds [aria-pressed="true"] { background: var(--accent); color: #fff; }
.sgb-block { position: absolute; box-sizing: border-box; border: 2px dashed var(--accent); background: var(--accent-soft);
  font-size: 11px; color: #123; overflow: hidden; cursor: move; padding: 1px 16px 1px 3px; line-height: 1.2; }
.sgb-block:focus { outline: 2px solid var(--accent); }
.sgb-stamp { border-radius: 50%; }
.sgb-field { border-style: dotted; }
.sgfields { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; }
.sgfields label { display: flex; flex-direction: column; gap: 4px; }
.sgfilled { display: flex; flex-direction: column; gap: 2px; }
.sgb-del { position: absolute; top: 0; right: 0; padding: 0 4px; border: 0; background: transparent; color: #a00; cursor: pointer; font-size: 14px; line-height: 1; }
.sgb-size { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: var(--accent); cursor: nwse-resize; }
@media (max-width: 900px) { .sgb { grid-template-columns: 1fr; } .sgb-tools { position: static; order: -1; } }
.crmdoc-link .pop { left: auto; right: 0; width: 300px; }
.crmdoc-link > summary.on { color: var(--accent); }
[data-crmmail-docs] { flex-wrap: wrap; gap: 6px; }
[data-crmmail-docs] .chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 2px 4px 2px 10px; }
[data-crmmail-docs] .chip select { width: auto; padding: 0 4px; }

/* polls in a chat (GO24DEV-260): the answers as buttons, the share of votes as a bar behind each */
.im-poll { display: flex; flex-direction: column; gap: 6px; min-width: min(320px, 70vw); }
.im-poll-q { font-size: 15px; }
.im-poll-a { position: relative; overflow: hidden; display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--card); color: var(--text); cursor: pointer; }
.im-poll-a:disabled { cursor: default; opacity: 1; }
.im-poll-a.mine { border-color: var(--accent); }
.im-poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--accent-soft); pointer-events: none; }
.im-poll-t, .im-poll-n { position: relative; }
.im-poll-n { color: var(--muted); white-space: nowrap; }
.im-poll-acts { display: flex; gap: 12px; }
.im-poll-answers { display: flex; flex-direction: column; gap: 6px; }

/* a channel for one who only reads it (GO24DEV-261): a note instead of the field, no «Ответить» and no pins */
.im-readonly { padding: 10px 12px; border-top: 1px solid var(--line); }
.im-open { flex: 0 1 auto; max-height: 45%; overflow-y: auto; border-top: 1px solid var(--line); padding-top: 6px; }
.im-open > b { display: flex; align-items: center; gap: 6px; padding: 2px 12px 4px; }
.im-join { display: flex; align-items: center; gap: 12px; justify-content: flex-end; padding: 10px 12px; border-top: 1px solid var(--line); }
.im-join .muted { flex: 1; }
.im.read-only .im-menu [data-act="reply"], .im.read-only .im-menu [data-act="pin"], .im.read-only .im-menu [data-act="unpin"],
.im.read-only .im-pin [data-unpin] { display: none; }

/* smileys beside the field (GO24DEV-262) */
.chatform { position: relative; }
.im-emoji { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 20; width: min(340px, calc(100vw - 32px)); max-height: 280px; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-pop); padding: 8px; }
.im-emoji-row { display: flex; flex-wrap: wrap; margin: 2px 0 6px; }
.im-emoji-row button { border: 0; background: none; font-size: 20px; line-height: 1; padding: 4px; border-radius: 6px; cursor: pointer; }
.im-emoji-row button:hover { background: var(--hover); }
/* dragging meetings on the calendar (static/js/calendar.js) */
.calgrid[data-calmove]:not([data-frozen]) .cg-col { user-select: none; cursor: cell; }
.calgrid .cg-ev.movable { cursor: grab; }
.calgrid .cg-ev.movable::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; cursor: ns-resize; }
.cg-ghost { background: var(--accent-soft); border: 1px dashed var(--accent); pointer-events: none; }
.calday.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
/* meeting rooms (Settings) */
.room-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.room-row form { margin: 0; }
.room-busy { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; }
/* the schedule (view=list) and the panel «Календари» */
.calcals { flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; font-size: 13px; }
/* one's own calendars in the panel: a dot of the colour, «изменить» on hover, «Добавить календарь» (GO24DEV-423) */
.calsec { display: inline-flex; align-items: center; gap: 2px; }
.caldot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--evc); vertical-align: 0; }
.calsec-edit { opacity: 0; }
.calsec:hover .calsec-edit, .calsec-edit:focus-visible { opacity: 1; }
.calsec-edit:hover { color: var(--accent) !important; }
.calsec-edit .i { width: 13px; height: 13px; }
button.calsec-add { color: var(--accent); }
.calperson form.inline { display: inline; margin: 0; }
.flash form.inline { display: inline; margin: 0; } /* «Прочитать все» of the new comments */
.calperson > a { color: inherit; }
.calshare { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 8px; display: grid; gap: 6px; }
.calaccess .calgrant { gap: 8px; align-items: center; flex-wrap: nowrap; }
.calaccess .calgrant [data-upick] { flex: 1; min-width: 0; }
.calaccess .calgrant select { width: auto; }
.reminds { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.reminds .remind { display: inline-flex; gap: 2px; align-items: center; }
.reminds select { width: auto; }
@media (hover: none) { .calsec-edit { opacity: 1; } }
.callist .cl-day { display: grid; grid-template-columns: 170px 1fr; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.callist .cl-day.today .cl-date b { color: var(--accent); }
.callist .cl-date { color: var(--text); }
.callist .cl-date b { font-size: 20px; margin-right: 4px; }
.callist .cl-date span { color: var(--muted); font-size: 12.5px; }
.cl-item { display: grid; grid-template-columns: 96px 1fr; gap: 8px; align-items: center; margin-bottom: 4px; }
.cl-item .calitem { white-space: normal; }
@media (max-width: 760px) { .callist .cl-day { grid-template-columns: 1fr; gap: 4px; } }
/* the calendar's search: the text and the presets («Приглашения» with its counter); an invitation is answered in the list */
.calsearch { flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.calsearch input[type=search] { width: 260px; max-width: 100%; }
.calsearch .chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; background: none; color: var(--text); cursor: pointer; font: inherit; }
.calsearch .chip.on { background: var(--accent-soft); border-color: var(--accent); }
.calsearch .chip .counter { background: var(--danger, #de2b24); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 11px; line-height: 16px; }
.callist .cl-item:has(> :nth-child(3)) { grid-template-columns: 96px 1fr auto; }
.cl-answer { display: inline-flex; gap: 2px; }
[data-cal][hidden], .cl-item[hidden], .cl-day[hidden] { display: none !important; }
.ffilter { flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; padding: 10px 12px; }
/* «Тема оформления» (layout.html "themedlg", theme.js) */
.themedlg { width: min(640px, calc(100vw - 32px)); border: 0; border-radius: var(--radius); padding: var(--pad); background: var(--card); color: var(--text); box-shadow: var(--shadow-pop); }
.themedlg::backdrop { background: rgba(16, 24, 40, .35); }
.themedlg h2 { margin: 0; font-size: var(--font-size-h2); display: flex; gap: 8px; align-items: center; }
.themedlg h3 { margin: 14px 0 8px; font-weight: 600; }
.themedlg-modes { gap: 10px; }
.tmode { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.tmode input, .tbg input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.tmode-pic { width: 110px; height: 66px; border-radius: var(--radius-sm); border: 2px solid var(--line); }
.tmode-auto .tmode-pic { background: linear-gradient(135deg, #eef2f6 50%, #0f151c 50%); }
.tmode-light .tmode-pic { background: linear-gradient(#ffffff 30%, #eef2f6 30%); }
.tmode-dark .tmode-pic { background: linear-gradient(#18212c 30%, #0f151c 30%); }
.themedlg-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.tbg { display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; text-align: center; }
.tbg-pic { width: 100%; height: 56px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--page-bg, var(--bg)); }
.tbg-pic:not([data-bg]) { --page-bg: var(--bg); } /* «Без фона»: not the page's background it sits on */
.tbg-custom { display: flex; align-items: center; justify-content: center; color: var(--muted); background: var(--hover) center / cover; }
.tmode input:checked + .tmode-pic, .tbg input:checked + .tbg-pic { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tmode input:focus-visible + .tmode-pic, .tbg input:focus-visible + .tbg-pic { outline: 2px solid var(--accent); }
.themedlg-actions { margin-top: 14px; gap: 8px; }
/* the saved filters of the feed: chips above the tabs, «Сохранить фильтр» */
.fsaved { flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 10px; }
.fsaved-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; padding: 0 2px 0 10px; font-size: 13px; }
.fsaved-chip.on { border-color: var(--accent); background: var(--accent-soft, transparent); }
.fsaved-chip a { display: inline-flex; gap: 4px; align-items: center; color: inherit; }
.fsaved-chip form { display: inline; }
.fsaved-chip button { padding: 2px 4px; min-height: 0; }
.fsaved-new form { margin-top: 6px; gap: 6px; }
/* the feed: the viewer's marks, the pinned posts above */
.fmark { opacity: .45; }
.fmark.on { opacity: 1; color: var(--accent); }
.fmore .pop { min-width: 290px; }
.fmore .pop button.ghost, .fmore .pop a.button.ghost { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; justify-content: flex-start; text-align: left; white-space: nowrap; }
.fmore .fmark { opacity: 1; }
/* «Вид ленты»: the order and «Экспертный режим» (GO24DEV-1023) */
.pagehead .fviewmenu { margin-left: auto; }
.fviewmenu .pop { right: 0; left: auto; min-width: 300px; }
.fviewmenu form { display: flex; flex-direction: column; gap: 8px; padding: 6px 4px; }
.fviewmenu label { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; }
.fviewmenu button[type=submit] { align-self: flex-start; }
a.fdate { color: inherit; }
a.fdate:hover { text-decoration: underline; }
.fpinned { margin-bottom: 14px; padding-bottom: 6px; border-bottom: 2px dashed var(--line); }
.fpinned h2 { margin: 0 0 6px; }

/* presence: a dot at the avatar (green — online, yellow — away, red — do not disturb) */
.pr-ava { position: relative; display: inline-flex; flex: none; }
.pr-ava::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--card); display: none; }
.pr-ava.pr-online::after, .pr-ava.pr-away::after, .pr-ava.pr-dnd::after { display: block; }
.pr-online::after, .pr-dot.pr-online { background: var(--ok); }
.pr-away::after, .pr-dot.pr-away { background: var(--warn); }
.pr-dnd::after, .pr-dot.pr-dnd { background: var(--danger); }
.pr-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; }
.im-head .pr-line { display: block; font-weight: normal; }
.im-head .im-topic { display: block; font-weight: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.im-head .im-collab { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-weight: normal; margin-top: 2px; }
.im-head .im-collab a { display: inline-flex; align-items: center; gap: 4px; }
.im-cchats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.im-cchats a { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 6px; }
.im-cchats a.on, .im-cchats a:hover { background: var(--hover); }
.im-topic-form { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.im-topic-form textarea { width: 100%; resize: vertical; }
.im-rights > summary { cursor: pointer; }
.im-rights form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; align-items: flex-start; }
.im-rights label { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; }
.im-topic-full { white-space: pre-wrap; margin: 0; }
.pr-line.pr-online { color: var(--ok); }
.pcard .pc-presence { margin-top: 10px; gap: 4px; flex-wrap: wrap; }
.pcard .pc-presence button.on { background: var(--hover); }
/* «Избранное» of the mail's folder pane (GO24DEV-288) */
.mfavs > summary { list-style: none; cursor: pointer; padding: 0 4px 2px; }
.mfavs > summary::-webkit-details-marker { display: none; }
.mfavs > summary .i-chevron-down { transition: transform .15s; }
.mfavs:not([open]) > summary .i-chevron-down { transform: rotate(-90deg); }
.mfavs [data-fav].dragging { opacity: .5; }
.mfav-empty { padding: 2px 8px; }
.crmev { position: relative; }
.crmevact { position: absolute; right: 0; top: 2px; display: flex; gap: 2px; opacity: 0; }
.crmev:hover .crmevact, .crmev.pinned .crmevact, .crmevact:focus-within { opacity: 1; }
.crmevact form { margin: 0; }
.crmevact .pop { right: 0; left: auto; min-width: 320px; }
.crmevact .pop textarea { width: 100%; }
.crmpinned { border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 10px; margin: 8px 0; background: var(--accent-soft); }
.crmpinned h3 { margin: 4px 0; }
/* «Ожидание» of a card: above its deeds */
.crmwait { align-items: flex-start; gap: 8px; border: 1px dashed var(--line); border-radius: var(--radius); padding: 6px 10px; margin: 0 0 8px; }
/* «Скоринг сделок»: the probability of a deal on its tile and in its card, with the reasons */
.crmscore { font-variant-numeric: tabular-nums; }
.crmscore.hi { background: var(--ok-soft); color: var(--ok); }
.crmscore.mid { background: var(--warn-soft); color: var(--text); }
.crmscore.lo { background: var(--danger-soft); color: var(--danger); }
.crmscorebox { margin: 4px 0 8px; }
.crmscorebox summary { cursor: pointer; list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.crmscorewhy { list-style: none; padding: 0; margin: 6px 0; }
.crmscorewhy .up { color: var(--ok); }
.crmscorewhy .down { color: var(--danger); }
.crmev.pinned .crmevact .button, .crmev.pinned .crmevact button[title] { color: var(--accent); }
/* CRM «Товары»: the sections of the catalog beside the list */
.crmcatalog { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
@media (max-width: 800px) { .crmcatalog { grid-template-columns: 1fr; } }
.crmsections a { display: block; padding: 3px 6px 3px calc(6px + var(--d, 0) * 14px); border-radius: 4px; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crmsections a.on { background: var(--accent-soft); color: var(--accent); }
.crmsections details { margin-top: 8px; }
.crmsectionhead { margin-bottom: 8px; gap: 8px; }
.crmthumb { width: 48px; }
.barcodescan { width: 190px; margin-left: 8px; }
.crmthumb img, .crmthumb span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; object-fit: cover; border-radius: 6px; background: var(--hover); color: var(--muted); }
.crmvariant td:nth-child(2) { padding-left: 28px; }
.crmvariant .crmthumb img, .crmvariant .crmthumb span { width: 28px; height: 28px; margin-left: 12px; }

/* «Складской учёт»: the head of a stock document, its rows, the statuses; the menu of the kinds to create */
.stockhead { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.stockhead .props { grid-column: 1 / -1; }
.stockrows select[name="product"] { min-width: 220px; }
.stockrows select[name="from"], .stockrows select[name="to"] { width: auto; min-width: 160px; }
.stockrows input[name="quantity"] { width: 80px; }
.stockrows input[name="price"] { width: 120px; }
.pill.stock-conducted { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.pill.stock-cancelled { color: var(--muted); }
/* the reserve of a deal's products: more reserved than there is — in red; a won deal not shipped yet */
.stockshort { color: var(--danger); }
tr[data-service] [data-stockcell] > * { visibility: hidden; } /* a service is not kept on a warehouse */
.stockwarn { background: var(--warn-soft); border: 1px solid var(--warn); padding: 8px 12px; border-radius: 10px; }
/* the reports: the bar of the filter; a product's movements — its head; the worth under the table */
.stockreportbar { flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.stockreporthead { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
.stockreporthead h2 { margin: 0; }
.stockreportfoot { padding: 10px 16px; text-align: right; border-top: 1px solid var(--line); }
.tlist td.loss { color: var(--danger); }
.tlist tfoot td { border-top: 1px solid var(--line); }
.crmrows select[name="warehouse"] { width: auto; min-width: 120px; }
/* the numbers keep their width: a wide table scrolls rather than squeezes them */
.crmrows input[name="price"] { min-width: 90px; }
.crmrows input[name="quantity"], .crmrows input[name="reserve"] { min-width: 64px; }
.crmrows input[name="unit"], .crmrows input[name="discount"] { min-width: 56px; }
.crmrows input[name="reserve_until"] { min-width: 130px; }
.pop.links { padding: 4px; display: flex; flex-direction: column; }
.pop.links a { padding: 6px 8px; border-radius: 8px; color: var(--text); }
.pop.links a:hover { background: var(--hover); }

/* Mail «Макет» (Outlook's Layout): the density of the list, the text size of the list and the reading pane, the
   sender's picture and the names of the files in a row */
.mtext-small .maillist, .mtext-small .mailread { --font-size: 13px; --font-size-sm: 11.5px; font-size: var(--font-size); }
.mtext-large .maillist, .mtext-large .mailread { --font-size: 16px; --font-size-sm: 14px; font-size: var(--font-size); }
.mailrow { flex-wrap: wrap; }
.mailrow > .ava { margin-top: 1px; }
.mdense-roomy .mailrow { padding-top: 13px; padding-bottom: 13px; }
.mdense-roomy .mrow-link { gap: 4px 10px; }
.mdense-compact .mailrow { padding-top: 4px; padding-bottom: 4px; align-items: center; }
.mdense-compact .mrow-link { gap: 0 10px; }
.mdense-compact .mailrow > .ava { --ava-size: 22px; font-size: 10px; margin-top: 0; }
.mdense-compact .mmarks { flex-direction: row; }
.mrow-files { order: 10; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-left: 24px; margin-top: 4px; min-width: 0; }
.mailrow:has(> .ava) .mrow-files { padding-left: calc(32px + var(--ava-size)); }
.mrow-files a { display: inline-flex; align-items: center; gap: 4px; max-width: 180px; padding: 1px 8px; border: 1px solid var(--line); border-radius: 12px;
  font-size: var(--font-size-sm); color: inherit; text-decoration: none; background: var(--card); }
.mrow-files a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-files a:hover { border-color: var(--accent); color: var(--accent); }
.mrow-files .i { width: 13px; height: 13px; flex: none; }
.mdense-compact .mrow-files { margin-top: 2px; }
/* CRM: the dialog asking for the fields required at a stage; the stages a field is required at, in its settings */
.crm-dlg { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); color: var(--text); width: min(420px, 92vw); padding: 16px; }
.crm-dlg form { display: grid; gap: 8px; }
.crm-dlg h3 { margin: 0 0 4px; }
.fieldreq { margin: 4px 0 8px 22px; display: grid; gap: 4px; }
.fieldreq .small { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* dragged widths of list columns and page panes (widths.js, GO24DEV-477) */
table.cols > thead th { position: relative; }
.colgrip { position: absolute; top: 0; right: -4px; width: 8px; height: 100%; cursor: col-resize; z-index: 1; touch-action: none; }
.colgrip:hover, .colgrip.on { background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; }
table.cols-set th, table.cols-set td { overflow: hidden; text-overflow: ellipsis; }
.cols-scroll { overflow-x: auto; max-width: 100%; }
.panegrip { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 3; touch-action: none; }
.panegrip.left { left: 0; }
.panegrip.right { right: 0; }
.panegrip:hover, .panegrip.on { background: linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat; }
@media (max-width: 1000px) { .panegrip { display: none; } }
.disk.tiles .disk-list.cols-set { width: 100% !important; table-layout: auto !important; }
.boardgrip { right: -9px; } /* in the gap between two board columns */

/* «Настройки»: sections of settings pages; «Общие настройки» of the portal */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; }
.settings-grid .card { margin: 0; }
.settings-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.portal-form { max-width: 720px; }
.portal-logo { max-height: 40px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; }

/* «Идёт запись» of a call: a red dot that pulses */
.callrec { display: inline-flex; align-items: center; gap: .35em; margin-left: .5em; color: var(--danger, #d33); font-weight: 600; vertical-align: middle; }
.callrec::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: currentColor; animation: callrec 1.4s ease-in-out infinite; }
@keyframes callrec { 50% { opacity: .25; } }
/* a period «с [дата] по [дата]»: the words stand on the line of their fields; on a narrow screen the halves wrap,
   never a word away from its field (GO24DEV-489) */
.period { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; color: var(--muted); font-size: var(--font-size-sm); }
.period > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.period input { width: auto; font-size: var(--font-size); }
.crmtools .tsettings .pop { width: min(420px, calc(100vw - 32px)); } /* the CRM filter: a period and an amount on one line */
.crmtools .tsettings .pop .row { flex-wrap: nowrap; }
.crmtools .tsettings .pop .row input[name=min], .crmtools .tsettings .pop .row input[name=max] { flex: 1; min-width: 0; }
/* «Настроить меню» of the left menu (menu.js, GO24DEV-490) */
.side .menu-tools { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
.side .menu-edit-tools { display: flex; flex-direction: column; gap: 1px; }
.side .menu-tools[hidden], .side .menu-edit-tools[hidden], .side .menu-tool[hidden] { display: none; }
.side .menu-tool { display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--side-text); font: inherit; font-size: var(--font-size-sm); text-align: left; cursor: pointer; opacity: .75; }
.side .menu-tool:hover { background: var(--side-bg-hover); color: var(--side-text-active); opacity: 1; }
.side .menu-tool.on { color: var(--side-text-active); opacity: 1; font-weight: 600; }
.side [data-mid][draggable="true"] { -webkit-user-drag: element; }
.side [data-mid].dragging { opacity: .45; }
.side.menu-editing [data-mid] { outline: 1px dashed var(--side-bg-hover); outline-offset: -1px; border-radius: var(--radius-sm); cursor: grab; }
.side.menu-editing [data-mid] .cnt { display: none; }
.side .mi-more { flex: none; margin-left: auto; padding: 0 6px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--side-text);
  font: inherit; line-height: 22px; cursor: pointer; }
.side .mi-more:hover { background: var(--side-bg); color: var(--side-text-active); }
.side .navitem > .mi-more { position: absolute; right: 4px; }
.side .mhidden > summary .n { font-size: 12px; opacity: .6; }
.menu-pop { position: fixed; z-index: 60; min-width: 200px; padding: 4px; background: var(--card); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; }
.menu-pop button { display: block; width: 100%; padding: 7px 10px; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  border-radius: var(--radius-sm); cursor: pointer; }
.menu-pop button:hover { background: var(--hover); }
.menu-dlg { width: min(440px, calc(100vw - 32px)); border: 1px solid var(--line); }
.menu-dlg form { display: grid; gap: 10px; }
.menu-dlg label { display: grid; gap: 4px; }
.menu-dlg label.check { display: flex; align-items: center; gap: 6px; }
.menu-dlg::backdrop { background: rgb(0 0 0 / .35); }
.menu-star { margin-left: 6px; padding: 2px 6px; vertical-align: middle; opacity: .45; }
.menu-star:hover { opacity: 1; }
.menu-star.on { opacity: 1; color: var(--warn); }
@media (max-width: 900px) { .side .menu-tools, .side .mhidden { display: none; } }

/* «Видеовстреча через …»: opens below its button (in headers and forms), services one under another */
.callext { display: inline-block; }
.callext .pop { top: 100%; bottom: auto; margin-top: 4px; }
.callext-list { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
.callext-list button { justify-content: flex-start; text-align: left; }
.callext .lbl { display: none; } /* in the headers of chats only the icon, its title tells */
form .callext .lbl { display: inline; }

/* «Сайты» */
.sitegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 12px; }
.sitecard { display: grid; gap: 4px; }
.sitethumb { display: grid; place-items: center; height: 96px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-size: 40px; }
.sitetpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 8px; }
.sitenav .sitetpls { grid-template-columns: 1fr; gap: 4px; }
.sitetpl { display: grid; gap: 2px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; margin: 0; color: var(--text); }
.sitetpl:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sitetpl input { position: absolute; opacity: 0; pointer-events: none; }
.sitetpl .sitethumb { height: 56px; font-size: 28px; }
.sitearea-header, .sitearea-footer { background: repeating-linear-gradient(135deg, transparent 0 10px, var(--hover) 10px 11px); }
.sitearea-header { border-bottom: 1px dashed var(--accent); }
.sitearea-footer { border-top: 1px dashed var(--accent); }
.sitearea-header .siteblk, .sitearea-footer .siteblk { background: #fff; }
.sitenavtools { display: grid; gap: 4px; justify-items: start; margin-top: 10px; }
.sitenavtools form { margin: 0; }
.sitecols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
@media (max-width: 800px) { .sitecols { grid-template-columns: 1fr; } }
.sitefav { width: 24px; height: 24px; object-fit: contain; }
.sitepub { padding: 1px 6px; border-radius: 4px; background: var(--hover); }
.sitepub.on { background: var(--ok-soft); }
.sitelayout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.sitenav details { margin-top: 8px; }
.sitepages { list-style: none; padding: 0; margin: 6px 0; }
.sitepages a { display: flex; align-items: center; gap: 6px; padding: 3px 6px; border-radius: 4px; color: inherit; }
.sitepages a.on { background: var(--accent-soft); color: var(--accent); }
.sitetitle { display: inline; margin: 0; font-size: 1.1em; }
.sitenav form { display: grid; gap: 6px; margin-top: 6px; }
.sitehead { align-items: center; gap: 8px; }
.siteedit { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.siteblk { position: relative; outline: 1px dashed transparent; }
.siteblk:hover { outline-color: var(--accent); }
.siteblk.off > :not(.sitetools):not(.siteform) { opacity: .35; }
.sitetools { position: absolute; top: 6px; right: 6px; z-index: 2; display: none; gap: 2px; align-items: center; padding: 2px 6px;
  background: var(--bg, #fff); border: 1px solid var(--line); border-radius: 6px; font: 13px system-ui, sans-serif; }
.siteblk:hover .sitetools, .siteblk:focus-within .sitetools, .siteblk.off .sitetools { display: flex; }
.siteform { margin: 8px; font: 14px system-ui, sans-serif; color: var(--text); }
.siteadd { text-align: center; font: 13px system-ui, sans-serif; padding: 2px 0; }
.siteadd summary { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; color: var(--muted); opacity: .5; }
.siteadd summary:hover, .siteadd[open] summary { opacity: 1; color: var(--accent); }
.sitelib { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; padding: 8px; }
.sitelib button { justify-content: flex-start; }
.siteempty { padding: 24px; text-align: center; }
@media (max-width: 900px) { .sitelayout { grid-template-columns: 1fr; } }
/* «Онлайн-запись»: resources side by side on an hour grid */
.bkgrid .cg-row { grid-template-columns: 56px repeat(var(--cols), minmax(140px, 1fr)); }
.bkgrid .bk-res { line-height: 1.3; }
.bkgrid .bk-col { cursor: cell; user-select: none; }
.bkgrid .bk-col.off, .bkgrid .bk-off { background-color: var(--hover); cursor: default; }
.bkgrid .bk-off { position: absolute; left: 0; right: 0; pointer-events: none; }
.bk-ev { border-left: 3px solid var(--accent); }
.bk-ev.bk-unconfirmed { border-left-color: #e8a33d; }
.bk-ev.bk-confirmed { border-left-color: var(--accent); }
.bk-ev.bk-came { border-left-color: #2fa36b; }
.bk-ev.bk-no_show { border-left-color: #d9534f; }
.bk-ev.bk-cancelled { opacity: .55; text-decoration: line-through; }
.bk-ev.bk-late { border-left-color: #d9534f; box-shadow: inset 0 0 0 1px #d9534f; }
.bk-presets { margin-bottom: 8px; }
.bk-filter { flex-wrap: wrap; gap: 8px; }
.bk-filter input[type=search] { width: 260px; }
.bk-list-wrap { overflow-x: auto; }
.bk-list td { vertical-align: top; }
.bk-stars { color: #e8a33d; letter-spacing: 1px; white-space: nowrap; }
.bk-rate { display: grid; gap: 8px; margin: 12px 0; }
.bk-rate-form { display: grid; gap: 8px; }
.bk-starpick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; font-size: 32px; line-height: 1; }
.bk-starpick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-starpick label { cursor: pointer; color: #c9ced6; font-size: 32px; line-height: 1; margin: 0; }
.bk-rate-form button { justify-self: start; }
.bk-starpick input:checked ~ label, .bk-starpick label:hover, .bk-starpick label:hover ~ label { color: #e8a33d; }
.bk-starpick input:focus-visible + label { outline: 2px solid var(--accent); }
.bk-list td:first-child, .bk-list .bk-phone { white-space: nowrap; }
.bk-list tr.bk-cancelled td { opacity: .55; }
.pill.bk-st { background: var(--accent-soft); color: var(--accent); }
.pill.bk-st.bk-unconfirmed { background: #fdf0dc; color: #a86a12; }
.pill.bk-st.bk-came { background: var(--ok-soft); color: var(--ok); }
.pill.bk-st.bk-no_show, .pill.bk-st.bk-late { background: var(--danger-soft); color: var(--danger); }
.pill.bk-st.bk-cancelled { background: var(--hover); color: var(--muted); }
.bk-dlg .row label { flex: 1; }
.bk-crm { display: grid; gap: 4px; }
.bk-chips { flex-wrap: wrap; gap: 4px; }
.bk-chips:empty { display: none; }
.bk-chip { display: inline-flex; align-items: center; gap: 4px; }
.bk-chip button { padding: 0 4px; line-height: 1; }
.bk-crm-res { display: grid; gap: 2px; max-height: 12em; overflow: auto; }
.bk-crm-res:empty { display: none; }
.bk-crm-res button { text-align: left; justify-content: flex-start; }
.bk-extras { display: grid; gap: 4px; }
.bk-extras .bk-checks label[hidden] { display: none; }
.bk-svcs { display: grid; gap: 4px; }
.bk-svcs[hidden], .bk-svcs .bk-checks label[hidden] { display: none; }
.bk-svcs [data-bk-total] { margin: 0; font-weight: 600; }
.bk-ev-svc { opacity: .85; }
.bk-ev.bk-extra { border-left-style: dashed; opacity: .85; }
.bk-wait { display: grid; gap: 8px; margin-bottom: 12px; }
.bk-wait-head { align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-wait-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.bk-wait-item { flex: 0 0 220px; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-left: 3px solid #e8a33d;
  border-radius: 8px; background: var(--bg, transparent); cursor: grab; }
.bk-wait-item:active { cursor: grabbing; }
.bk-wait-item a { color: inherit; text-decoration: none; }
.bk-wait-item form { margin: 0; }
.bkgrid.bk-dragging .bk-col:not(.off) { outline: 1px dashed var(--line); outline-offset: -1px; }
.bkgrid .bk-col.bk-drop { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.bk-for { display: flex; align-items: center; gap: 8px; }
/* «Онлайн-запись»: links and the client's public page */
.bk-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.bk-url { flex-wrap: nowrap; gap: 4px; }
.bk-url input { min-width: 16em; font-size: var(--font-size-sm); }
.card.bk-stats-wrap { overflow-x: auto; }
.bk-stats th, .bk-stats td { padding-left: 8px; padding-right: 8px; }
.bk-stats td { white-space: nowrap; }
.bk-stats td:first-child { white-space: normal; min-width: 10em; }
.bk-stats th { font-size: var(--font-size-sm); }
.bk-stats .bk-load { width: 40px; }
.bk-stats .bk-total td { border-top: 2px solid var(--line); font-weight: 600; }
.bk-load { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: var(--hover); vertical-align: middle; overflow: hidden; }
.bk-load span { display: block; height: 100%; background: var(--accent); }
.bkpub { max-width: 720px; }
.bk-text { white-space: pre-line; }
.bk-reslist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.bk-resbtn { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; }
.bk-resbtn:hover, .bk-resbtn.on { border-color: var(--accent); }
.bk-resbtn.on { box-shadow: inset 0 0 0 1px var(--accent); }
.bk-days { gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.bk-day { display: grid; justify-items: center; min-width: 56px; padding: 6px 4px; border: 1px solid var(--line); border-radius: 8px; color: inherit; text-decoration: none; line-height: 1.2; }
.bk-day b { font-size: 1.2em; }
.bk-day:hover, .bk-day.on { border-color: var(--accent); }
.bk-day.on { background: var(--accent); color: #fff; }
.bk-day.off { opacity: .4; }
.bk-slots { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-slot { padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; color: inherit; text-decoration: none; font-variant-numeric: tabular-nums; }
.bk-slot:hover { border-color: var(--accent); }
.bk-slot.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-form { max-width: 420px; }
.bk-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bk-sum { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.bk-sum dt { color: var(--muted); }
.bk-sum dd { margin: 0; }
@media (max-width: 600px) { .bk-url input { min-width: 0; width: 100%; } }

/* «Маркетинг»: campaigns' statuses, counts, the editor's columns */
.pill.mkt-draft { background: var(--hover); color: var(--muted); }
.pill.mkt-planned, .pill.mkt-paused, .pill.mkt-r-pending { background: var(--warn-soft); color: var(--warn); }
.pill.mkt-sending, .pill.mkt-sg-process { background: var(--accent-soft); color: var(--accent); }
.pill.mkt-done, .pill.mkt-r-sent, .pill.mkt-sg-success { background: var(--ok-soft); color: var(--ok); }
.pill.mkt-stopped, .pill.mkt-r-error, .pill.mkt-sg-failure { background: var(--danger-soft); color: var(--danger); }
.pill.mkt-r-skipped { background: var(--hover); color: var(--muted); }
.mkt-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .mkt-cols { grid-template-columns: 1fr; } }
.mkt-segs td:not(:first-child), .mkt-segs th:not(:first-child) { text-align: center; width: 80px; }
.mkt-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 6px; }
.mkt-stat { display: flex; flex-direction: column; min-width: 110px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: inherit; text-decoration: none; }
.mkt-stat b { font-size: 22px; }
.mkt-stat span { color: var(--muted); font-size: var(--font-size-sm); }
.mkt-stat small { color: var(--muted); }
.mkt-stat.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mkt-letter { overflow-wrap: anywhere; }
.mkt-letter img { max-width: 100%; height: auto; }
.mkt-tpl-h { margin: 18px 0 8px; }
.mkt-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.mkt-tpl { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.mkt-tpl-thumb { height: 240px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #fff; pointer-events: none; }
.mkt-tpl-thumb > div { width: 640px; zoom: .36; overflow-wrap: anywhere; }
.mkt-tpl .row { margin-top: auto; flex-wrap: nowrap; }
.mkt-blocks { gap: 4px; margin: 2px 0 6px; }
.mkt-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.mkt-panel[hidden] { display: none; }
.pill.mkt-r-held { background: var(--hover); color: var(--muted); }
.mkt-script { white-space: pre-wrap; }
.mkt-resend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mkt-ab-tabs { margin: 2px 0 6px; align-items: center; }
.mkt-ab-tabs[hidden], .mkt-ab [hidden] { display: none; }
.mkt-ab-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 6px 14px; color: var(--muted); }
.mkt-ab-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.mkt-ab-res tr.mkt-ab-win td { background: var(--ok-soft); }
.mkt-panel input[type=url], .mkt-panel input[type=text] { flex: 1 1 180px; width: auto; }
.mkt-panel input[type=color] { width: 40px; padding: 2px; }
.mkt-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.tlist td.num, .tlist th.num { text-align: right; white-space: nowrap; }
.mkt-scroll { overflow-x: auto; }
.mkt-through td:nth-child(3), .mkt-exp td:nth-child(3) { min-width: 0; width: auto; }
.mkt-exp td:nth-child(5) { white-space: normal; min-width: 140px; }
.mkt-expfilter select { width: auto; max-width: 220px; }
.mkt-through tr.mkt-camp td { font-size: var(--font-size-sm); color: var(--muted); }
.mkt-through tr.mkt-camp td:first-child { padding-left: 30px; }
.mkt-through tr.mkt-total td { border-top: 2px solid var(--line); font-weight: 600; }
.mkt-through .green, .crmkpi .green { color: var(--ok); }
.mkt-through .red, .crmkpi .red { color: var(--danger); }
.crmutm { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 10px; }
/* CRM lists: «Настроить колонки» — lines dragged to reorder (GO24DEV-532) */
.crmcols .pop { max-height: 70vh; overflow: auto; min-width: 240px; }
.crmbulk select { width: auto; }
.crmcols-list { list-style: none; margin: 6px 0; padding: 0; }
.crmcols-list li { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px; cursor: grab; }
.crmcols-list li:hover { background: var(--hover); }
.crmcols-list li.dragging { opacity: .5; }
.crmcols-list .grip { color: var(--muted); font-size: var(--font-size-sm); letter-spacing: -2px; }
.crmcols-list .check { margin: 0; flex: 1; }
/* «Настроить карточку»: the card's fields by sections; the gear in the fields' corner, the editor (crmlayout.js) */
.crmfields { position: relative; }
.crmlayout-gear { position: absolute; top: 8px; right: 8px; }
.crmfields .crmsec + .crmsec { margin-top: 12px; }
.crmfields section.crmsec:not(:has(.props > *)) { display: none; } /* no field of the section has a value */
.crmfields .crmsec h3 { margin: 0 0 6px; text-transform: uppercase; letter-spacing: .03em; }
.crmfields fieldset.crmsec { border: 0; border-top: 1px solid var(--line); padding: 8px 0 0; margin: 12px 0 0; min-width: 0; }
.crmfields fieldset.crmsec legend { padding: 0 6px 0 0; font-weight: 600; color: var(--muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .03em; }
.crmfields details.crmhidden { margin-top: 12px; }
.crmfields details.crmhidden > summary { cursor: pointer; color: var(--muted); }
.crmlsecs { display: grid; gap: 10px; }
.crmlsec { border: 1px solid var(--line); border-radius: 8px; padding: 8px; }
.crmlsec.crmlhidden { border-style: dashed; margin-top: 10px; }
.crmlfields { list-style: none; margin: 6px 0 0; padding: 0; min-height: 28px; }
.crmlfields li { display: flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; cursor: grab; }
.crmlfields li:hover { background: var(--hover); }
.crmlfields li.dragging { opacity: .5; }
.crmlfields .grip { color: var(--muted); font-size: var(--font-size-sm); letter-spacing: -2px; }
.crmlf-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.crmlhidden [data-hide], .crmlsecs [data-show] { display: none; }

/* «Скорость команды» of a scrum project */
.velocity .plan { fill: var(--line); }
.velocity .done { fill: var(--accent); }
.velocity .avg { stroke: var(--muted); stroke-dasharray: 5 4; stroke-width: 1.5; }
.velocity .lg.plan { border-top: 8px solid var(--line); }
.velocity .lg.done { border-top: 8px solid var(--accent); margin-left: 12px; }
.velocity .lg.avg { margin-left: 12px; }
/* Definition of Done in a task card */
.dodlist { list-style: none; padding: 0; margin: 6px 0; }
.dodlist li { padding: 3px 0; }
/* «Параметры» of a business process: a table of fields to edit */
.bpfields .tablewrap { overflow-x: auto; }
.bpfields td { padding: 2px 4px; }
.bpfields td input, .bpfields td select { width: 100%; min-width: 90px; }
.bpfields td select { width: auto; min-width: 0; }
.bpfields td input[name$=_label] { min-width: 160px; }
/* «Онлайн-запись»: the break of a resource on the grid; its schedule by days in the form */
.bkgrid .bk-break { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 7px); }
.bkgrid .bk-cal { background-color: transparent; background-image: repeating-linear-gradient(45deg, transparent 0 5px, color-mix(in srgb, var(--accent) 35%, transparent) 5px 6px); }
.calitem.booking { background: color-mix(in srgb, var(--accent) 10%, var(--bg)); color: var(--text); border-left-color: var(--accent); }
.calitem.booking.bk-unconfirmed { border-left-color: #e8a33d; }
.bk-days td { padding: 2px 8px 2px 0; }
.bk-days input[type=time], .bk-offdates input[type=date] { width: auto; }
/* feed: the event of another section a post is of (GO24DEV-468) */
.fsrc { display: flex; gap: 12px; align-items: center; padding: 8px 0; }
/* feed: the right column (GO24DEV-659) */
.feedwrap { display: grid; grid-template-columns: minmax(0, 860px) 280px; gap: 20px; align-items: start; }
.fside { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }
.fside .card { padding: 12px 14px; }
.fside h3 { margin: 0 0 8px; }
.fside-row { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; color: inherit; text-decoration: none; border-top: 1px solid var(--line); }
.fside-row:first-of-type { border-top: 0; }
.fside-row.line { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
@media (max-width: 1100px) { .feedwrap { grid-template-columns: minmax(0, 1fr); } .fside { position: static; } }
/* «Онлайн-запись» in a frame of a website: no page margins, the background of the site shows through */
body:has(.bk-embed) { background: transparent; }
.share.bk-embed { margin: 0 auto; padding: 8px; }
.bk-embed .share-foot { display: none; }
.bk-code { width: 100%; font-family: var(--mono, monospace); font-size: 12px; }
.bk-qr { width: 180px; height: 180px; image-rendering: pixelated; }

/* open lines: the chat bot's menu in the line's settings (GO24DEV-717) */
.olbot-item { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.olbot-sub { padding-left: 16px; border-left: 2px solid var(--accent-soft); }

/* task chat: the message's menu — reply, copy, subtask, edit, delete (GO24DEV-771) */
.msg .msg-menu { position: absolute; top: 2px; right: 2px; opacity: 0; padding: 0 4px; min-height: 0; color: var(--muted); }
.msg:hover .msg-menu, .msg .msg-menu:focus-visible { opacity: 1; }
.tchat .msg .bubble { padding-right: 26px; }
.msgpop { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 190px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
.msgpop[hidden] { display: none; }
.msgpop > button, .msgpop > a { display: flex; gap: 8px; align-items: center; justify-content: flex-start; background: none; border: 0;
  color: var(--text); padding: 6px 8px; text-align: left; cursor: pointer; text-decoration: none; }
.msgpop > button:hover, .msgpop > a:hover { background: var(--hover); }
.msgpop > .danger { color: var(--danger); }
.msg .time .edited { font-style: italic; }
.chatctx { flex-basis: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-left: 3px solid var(--accent);
  background: var(--hover); border-radius: 4px; }
.chatctx[hidden] { display: none; }
.chatctx-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--font-size-sm); }
.chatctx-text span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* «Все группы»: cards of the open and closed groups (GO24DEV-774) */
.groupcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.groupcards .groupcard { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.groupcards .groupcard .row:last-child { margin-top: auto; }
/* the projects list: «Участники» as a stack of faces */
.faces { display: inline-flex; align-items: center; }
.faces .ava + .ava { margin-left: -8px; box-shadow: 0 0 0 2px var(--card); }
.faces .small { margin-left: 4px; }

/* CRM «Календарь»: a card being dragged onto a day */
.crmcal .calday.over { outline: 2px dashed var(--accent); outline-offset: -2px; }
.crmcal .calitem[draggable=true] { cursor: grab; }

/* CRM «Контакт-центр»: a tile per channel, the connected ones marked */
.cctiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.cctile { display: grid; gap: 6px; align-content: start; color: inherit; text-decoration: none; }
.cctile:hover { border-color: var(--accent); }
.cctile .ccicon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 50%; background: var(--line); color: var(--muted); }
.cctile.on .ccicon { background: var(--accent-soft); color: var(--accent); }
.cctile .ccgo { color: var(--accent); font-size: var(--font-size-sm); margin-top: 4px; }
.pill.cc-on { background: var(--ok-soft); color: var(--ok); }
.pill.cc-err { background: var(--danger-soft); color: var(--danger); }

/* «Терминал учёта времени»: a tablet at the entrance */
.wterm .card { width: 400px; max-width: calc(100vw - 32px); }
.wterm-clock { font-size: 40px; font-weight: 600; margin: 4px 0 12px; font-variant-numeric: tabular-nums; }
.wterm-pin { font-size: 28px; text-align: center; letter-spacing: 8px; }
.wterm-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wterm-pad button { font-size: 24px; padding: 14px 0; }
.wterm-who { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 8px; }
.wterm-who b { font-size: 20px; }
.wterm .big { font-size: 18px; padding: 14px; width: 100%; }
.wterm-done { font-size: 18px; margin: 16px 0; }

/* mail: «Напоминания» (nudges) over the inbox list */
.mnudges { border-bottom: 1px solid var(--line); background: var(--accent-soft); }
.mnudge { gap: 6px; align-items: center; padding: 6px 8px 6px 12px; }
.mnudge + .mnudge { border-top: 1px solid var(--line); }
.mnudge-link { flex: 1; min-width: 0; display: flex; gap: 8px; align-items: center; color: inherit; text-decoration: none; }
.mnudge-link:hover { text-decoration: none; }
.mnudge-link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mnudge form { margin: 0; }

/* «Фотогалерея» (GO24DEV-929) */
.galbums { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); }
.galbum { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; padding: 8px; }
.galbum .gcover { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--hover); display: grid; place-items: center; }
.galbum .gcover img { width: 100%; height: 100%; object-fit: cover; }
.galbum .gcover .i { font-size: 48px; opacity: .4; }
.gphotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }
.gphoto { position: relative; aspect-ratio: 1; border-radius: 4px; overflow: hidden; background: var(--hover); }
.gphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gphoto .gmeta { position: absolute; left: 4px; bottom: 4px; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.gdrop { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px; border: 2px dashed var(--line); border-radius: 8px; text-align: center; cursor: pointer; }
.gdrop.over { border-color: var(--accent); background: var(--accent-soft); }
.gview { position: relative; display: flex; align-items: center; justify-content: center; background: #111; border-radius: 8px; min-height: 300px; }
.gview img { max-width: 100%; max-height: 75vh; object-fit: contain; }
.gview:fullscreen img { max-height: 100vh; }
.gview .gnav { position: absolute; top: 0; bottom: 0; width: 15%; display: flex; align-items: center; padding: 0 12px; color: #fff; opacity: .6; font-size: 32px; }
.gview .gnav:hover { opacity: 1; }
.gview .gprev { left: 0; }
.gview .gnext { right: 0; justify-content: flex-end; }
.gbar { margin: 8px 0; flex-wrap: wrap; }
.gcaption { font-size: 1.05em; }
.gedit { max-width: 640px; }
.gcomment { align-items: flex-start; gap: 8px; margin: 8px 0; }
.gcomment-form { max-width: 640px; }

/* Mail: «Не пересылать» — a restricted letter is read only (no selecting, no printing its text) */
.mnocopy { -webkit-user-select: none; user-select: none; }
.mnofwd-bar { background: var(--warn-soft); flex-wrap: nowrap; align-items: flex-start; }
.mnofwd-bar > span { flex: 1; min-width: 0; }
/* «Срок действия истекает» (Outlook's Expiry-Date): an out-of-date letter is struck through, as Outlook shows it */
.mailrow.mexpired .msubj, .mailrow.mexpired .mfrom { text-decoration: line-through; color: var(--muted); }
.mexp-bar.past { background: var(--warn-soft); }
@media print { .mnocopy { display: none !important; } }
/* Tasks: «Календарь» — the tasks on their days, a week and a day taller (GO24DEV-988) */
.taskcal .tc-head { gap: 6px; align-items: center; }
.taskcal.tc-week .calday { min-height: 360px; }
.taskcal.tc-day .calrow { grid-template-columns: minmax(0, 1fr); }
.taskcal.tc-day .calday { min-height: 240px; }
.taskcal.tc-day .calitem { font-size: 13px; line-height: 22px; }
.calitem.task.span { border-left-style: dotted; opacity: .8; }
.calitem.task.done { text-decoration: line-through; opacity: .6; }
/* «Задания» of business processes: a decided task is quieter, the panel of group actions under the list */
.bpapproval.done { opacity: .8; }
.bpbulk { align-items: center; flex-wrap: wrap; gap: 8px; }
.bptasksuser { min-width: 220px; }