/* Air controls and local copy of the theme selected on the company's Bitrix24 portal. */
:root {
  --air-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --air-page: #eef2f4;
  --air-surface: #fff;
  --air-secondary: #f1f4f6;
  --air-primary: #0075ff;
  --air-link: #2066b0;
  --air-blue-1: #c4e6ff;
  --air-blue-2: #e6f4ff;
  --air-blue-3: #edf7ff;
  --air-success: #1bce7b;
  --air-green-2: #caffe7;
  --air-green-3: #e7fff5;
  --air-green-ink: #065217;
  --air-warning: #faa72c;
  --air-warning-bg: #fff4d6;
  --air-alert: #ff5752;
  --air-alert-bg: #ffe8e8;
  --air-violet: #853af5;
  --air-violet-bg: #f6ecff;
  --ink: #333;
  --muted: #525c69;
  --line: #dfe0e3;
  --brand: var(--air-primary);
  --soft: var(--air-blue-3);
  --good: var(--air-green-ink);
  --warn: #875200;
  --danger: #c21b16;
  --guide-background: var(--air-secondary);
  --guide-edge: #c9ccd0;
  --guide-ink: var(--muted);
  font: 15px/1.45 var(--air-font);
  color: var(--ink);
  background: var(--air-page);
}

body, button, input, textarea, select, .button-tip, .doc pre { font-family: var(--air-font); }
button, input, textarea, select { accent-color: var(--air-primary); }
a { color: var(--air-link); }
:focus-visible { outline: 2px solid var(--air-primary); }

@media screen {
  body { background: var(--air-page); }
  h1, h2, h3, h4 { color: var(--ink); }
  h1 { font-size: 28px; font-weight: 400; letter-spacing: -.4px; }
  h2 { font-size: 20px; font-weight: 500; }
  h3 { font-weight: 600; }
  button { border-radius: 10px; background: var(--air-surface); border-color: var(--line); }
  button:hover:not(:disabled) { background-color: var(--air-secondary); border-color: #a8adb4; }
  .primary { color: white; background: var(--air-primary); border-color: var(--air-primary); }
  .primary:hover:not(:disabled) { background: var(--air-link); border-color: var(--air-link); }
  .quiet { background: transparent; border-color: transparent; }
  .danger { color: var(--danger); }
  .sidebar { background: linear-gradient(165deg,var(--air-blue-2),var(--air-page) 52%); border-color: var(--line); gap: 21px; }
  .brand b { color: var(--ink); font-weight: 650; }
  .brand small { color: var(--muted); }
  .nav { gap: 3px; }
  .nav button { justify-content: flex-start; gap: 9px; border-radius: 8px; min-height: 40px; padding: 8px 10px; font-size: 14px; }
  .nav button:hover:not(:disabled) { background: #ffffffb3; }
  .nav button.active { background: var(--air-surface); color: var(--air-link); box-shadow: inset 3px 0 var(--air-primary); font-weight: 600; }
  .nav-glyph { width: 21px; height: 21px; flex: none; fill: currentColor; color: var(--muted); }
  .nav .active .nav-glyph { color: var(--air-primary); }
  .nav .count, .inbox-count { margin-inline-start: auto; border-radius: 99px; color: var(--air-surface); background: var(--air-primary); font-weight: 600; min-width: 19px; padding: 1px 6px; text-align: center; font-variant-numeric: tabular-nums; }
  .nav [data-route=projects] .count, .nav [data-route=extensions] .count { background: var(--air-surface); color: var(--muted); }
  .nav [data-route=notifications] .count { background: var(--air-alert-bg); color: var(--danger); }
  .identity { border-color: #c9ccd0; }
  .topbar { min-height: 58px; height: auto; border-color: var(--line); }
  .topbar .path { color: var(--muted); }
  .env { color: var(--air-link); background: var(--air-blue-2); border-radius: 99px; }
  .top-actions button[data-action=help] { width: 30px; min-height: 30px; border: 1px solid var(--line); border-radius: 50%; padding: 0; background: var(--air-surface); color: var(--muted); }
  .panel, .desk-box, .desk-people, .desk-list, .project-card, .archive-list, .messenger, .version-reader, .naming-guide {
    background-color: var(--air-surface); border-color: var(--line); border-radius: 12px;
  }
  .panel-head, .chat-header, .dialog-head { background: var(--air-surface); border-color: var(--line); }
  .page-head p, .task-body p, .doc pre, .field-guide, .chat-meta small { color: var(--muted); }
  .notice,.review-source,.desk-task-note { background: var(--air-blue-3); color: var(--ink); border-color: var(--air-blue-1); }
  .notice.warn { background: var(--air-warning-bg); color: var(--warn); }
  .badge { background: var(--air-secondary); color: var(--muted); font-size: 12px; font-weight: 500; border-radius: 99px; }
  .badge.good { background: var(--air-green-2); color: var(--good); }
  .badge.warn { background: var(--air-warning-bg); color: var(--warn); }
  .badge.bad, .form-error:not(:empty) { color: var(--danger); }
  .badge.bad { background: var(--air-alert-bg); }
  .task-mark { background: var(--air-primary); }
  .task-mark.late { background: var(--air-alert); }
  .task-history .desk-task { background: var(--air-secondary); color: var(--muted); }
  .task-history .task-mark { background: #a8adb4; }
  .blockers li::before { background: var(--air-warning); }
  .event { border-color: var(--air-blue-1); }
  .voice,.help,.topic-head { background: var(--air-secondary); border-color: var(--line); }
  .voice.recording { background: var(--air-alert-bg); border-color: var(--air-alert); }
  .tabs button.selected,.switch button.selected,.desk-filters button[aria-pressed=true],.desk-row.current,.chat-tools [aria-expanded=true] {
    background: var(--air-blue-3); color: var(--air-link); border-color: var(--air-blue-1);
  }
  .desk-tabs button[aria-pressed=true],.desk-layout .desk-icon.on { outline-offset: 2px; box-shadow: inset 0 -3px var(--air-primary); }
  .desk-name strong,.desk-head h1 { font-weight: 600; }
  .desk-icon b { background: var(--air-primary); color: white; }
  .desk-icon.delegated b { background: var(--air-link); color: white; }
  .desk-icon.late b { background: var(--danger); color: white; }
  .desk-layout .desk-icon[data-tab=topics],.desk-tabs [data-tab=topics] { --section-bg: var(--air-blue-2); --section-ink: var(--air-link); }
  .desk-layout .desk-icon[data-tab=tasks],.desk-tabs [data-tab=tasks] { --section-bg: var(--air-warning-bg); --section-ink: var(--warn); }
  .desk-layout .desk-icon[data-tab=documents],.desk-tabs [data-tab=documents] { --section-bg: var(--air-violet-bg); --section-ink: #6625c6; }
  .project-color-0 { --project-edge: var(--air-primary); }
  .project-color-1 { --project-edge: var(--air-success); }
  .project-color-2 { --project-edge: var(--air-warning); }
  .project-color-3 { --project-edge: var(--air-violet); }
  .project-color-4 { --project-edge: #f85e9e; }
  .group-customer { --folder-accent: var(--air-primary); --folder-edge: var(--air-blue-1); --folder-bg: var(--air-blue-3); }
  .group-supplier { --folder-accent: #00a659; --folder-edge: #a7fad3; --folder-bg: var(--air-green-3); }
  .group-operations { --folder-accent: var(--air-violet); --folder-edge: #f1e0ff; --folder-bg: #fbf6ff; }
  .archive-line:hover { background: var(--air-blue-3); }
  .field :is(input,select,textarea),.recipient-head input,.desk-list input[type=search],.desk-sort select,.chat-compose textarea {
    border-color: #c9ccd0; border-radius: 8px; background-color: var(--air-surface); color: var(--ink);
  }
  .field :is(input,select,textarea):focus,.recipient-head input:focus,.chat-compose textarea:focus { border-color: var(--air-primary); }
  .button-tip,.recipient-popup,dialog { border-radius: 12px; box-shadow: 0 6px 24px #33333329; }
  .field-guide,.task-guide,.task-body .task-guide,.touch-guide[open]>p,.button-tip { color: var(--guide-ink); }
  .recipient-list label:has(input:checked) { background: var(--air-blue-2); }
  .chat-scroll {
    background-color: #9fcfff;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='160' viewBox='0 0 224 160'%3E%3Cg fill='none' stroke='white' stroke-width='1.35' stroke-linecap='round' stroke-linejoin='round' opacity='.34'%3E%3Cpath d='M16 30l4-14 19 6-4 14-9-3-6 3 1-5z M24 22l9 3m-10 1 6 2 M152 27l11-6 10 6v13l-11 6-10-6z m0 0 10 6 11-6m-11 6v13 M77 109l11-11 8 8-3 3-3-3m0 6-3-3m-1 7-7-7 M170 126l7-11 12 7-7 12z m8-7 6 4m-8-1 3 2'/%3E%3Ccircle cx='88' cy='45' r='3'/%3E%3Ccircle cx='38' cy='111' r='2'/%3E%3Cpath d='M117 78l3-2m-1 5 3-2 M210 87l3-2M55 150l3-2'/%3E%3C/g%3E%3C/svg%3E"),
      linear-gradient(118deg,#c4e7ef 0%,#9fcfff 56%,#b8d9fa 100%);
    background-repeat: repeat,no-repeat;
    background-size: 224px 160px,cover;
  }
  .chat-date,.chat-empty { width: fit-content; max-width: 100%; border-radius: 20px; background: #355b76; color: white; line-height: 1.5; }
  .chat-date { margin: 7px auto; padding: 2px 10px; font-size: 12px; }
  .messenger.chat-short .chat-empty { margin: 12px auto; padding: 3px 12px; text-align: center; font-size: 13px; }
  .chat-short .chat-scroll { min-height: clamp(64px,10vh,94px); }
  .chat-header { padding: 5px 12px; }
  @media (min-width:641px) {
    .chat-tools [data-who] { width: 10rem; }
    .chat-tools button { padding-inline: 8px; }
  }
  .chat-bubble,.outgoing .chat-bubble { border: 0; border-radius: 10px; box-shadow: 0 1px 2px #28476424; }
  .chat-bubble { background: white; border-end-start-radius: 3px; }
  .outgoing .chat-bubble { background: #e9fecb; border-end-end-radius: 3px; }
  .chat-by time,.chat-meta small,.chat-audience summary { color: #47586a; }
  .chat-meta { flex-wrap: wrap; justify-content: flex-start; gap: 0 14px; }
  .chat-audience { min-width: 0; font-size: 12px; }
  .chat-audience summary { width: fit-content; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
  .chat-audience[open] { flex-basis: 100%; }
  .chat-message-actions { display: flex; flex-wrap: wrap; gap: 0 12px; }
  .chat-meta .quiet { margin: 0; padding: 2px 0; min-height: 24px; color: #305978; font-size: 12px; }
  .chat-meta .quiet:hover { text-decoration: underline; }
  .chat-file { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 8px 4px 4px; box-sizing: border-box; border: 1px solid #c4d5df; border-radius: 8px; background: #fff; color: #154f81; overflow-wrap: anywhere; }
  .chat-file-type { flex: none; border-radius: 5px; background: #e9f2fb; padding: 6px 4px; color: #365977; font-size: 10px; font-weight: 700; }
  .chat-scroll .desk-task-note { width: fit-content; max-width: 94%; box-sizing: border-box; background: #fff; border-radius: 8px; border-inline-start: 3px solid #b47c25; }
  .chat-compose button.primary { background: #176aca; border-color: #176aca; }
  .chat-compose button.primary:hover:not(:disabled) { background: #1258aa; border-color: #1258aa; }
  @media (pointer:coarse) { .chat-meta .quiet { min-height: 36px; } }
  .chat-by strong { color: var(--air-link); }
  .chat-bubble blockquote,.chat-draft-note,.chat-panel { background: var(--air-blue-3); border-color: var(--air-blue-1); }
  .chat-highlight .chat-bubble { outline-color: var(--air-primary); }
  .chat-inbox .inbox-entry { display: grid; width: 100%; min-width: 0; grid-template-columns: 44px minmax(0,1fr) max-content; align-items: center; gap: 12px; text-align: start; min-height: 70px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: var(--air-surface); }
  .chat-inbox .inbox-entry:last-child { border-bottom: 0; }
  .chat-inbox .inbox-entry:hover,.chat-inbox .inbox-entry:focus-visible { background: var(--air-blue-3); }
  .chat-inbox .inbox-entry:focus-visible { outline-offset: -2px; }
  .inbox-avatar { display: grid; place-items: center; height: 42px; width: 42px; border-radius: 50%; background: var(--section-bg,var(--air-blue-2)); color: var(--section-ink,var(--air-link)); font-size: 16px; font-weight: 600; }
  .inbox-avatar.project-color-1 { --section-bg: var(--air-green-2); --section-ink: var(--good); }
  .inbox-avatar.project-color-2 { --section-bg: var(--air-warning-bg); --section-ink: var(--warn); }
  .inbox-avatar.project-color-3 { --section-bg: var(--air-violet-bg); --section-ink: #6625c6; }
  .inbox-avatar.project-color-4 { --section-bg: var(--air-alert-bg); --section-ink: var(--danger); }
  .inbox-text,.inbox-meta { display: grid; min-width: 0; gap: 3px; }
  .inbox-text b { color: var(--ink); font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
  .inbox-entry.has-unread .inbox-text b { font-weight: 650; }
  .inbox-preview { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 400; }
  .inbox-meta { justify-items: end; color: var(--muted); font-size: 12px; }
  .login-intro { background: var(--air-blue-2); color: var(--ink); }
  .login-intro .brand small,.login-intro p { color: var(--muted); }
  .login-form { background: var(--air-surface); }
  .login-intro h1 { font-weight: 400; }
  #toast { background: #333; }
  #toast.error { background: var(--danger); }
}
@media screen and (min-width:901px) {
  .shell,.shell:has(.desk-layout) { grid-template-columns: clamp(176px,14vw,210px) minmax(0,1fr); }
  .sidebar,.sidebar:has(+.main .desk-layout) { padding: 22px 10px; }
  .sidebar,.sidebar .nav { min-width: 0; }
  .sidebar .nav { grid-template-columns: minmax(0,1fr); }
  .sidebar .nav button { display: grid; grid-template-columns: 20px minmax(0,1fr) auto; text-align: left; column-gap: 5px; padding-inline: 5px; min-width: 0; width: 100%; }
  .sidebar .nav button>span:not(.count) { overflow-wrap: anywhere; }
  .topbar,.main:has(.desk-layout) .topbar { height: 58px; }
}
@media screen and (max-width:900px) {
  .nav button,.sidebar:has(+.main .desk-layout) .nav button { gap: 5px; min-height: 36px; padding: 6px 8px; }
  .nav-glyph { width: 17px; height: 17px; }
}
@media screen and (max-width:640px) {
  .chat-inbox .inbox-entry { grid-template-columns: 34px minmax(0,1fr) max-content; gap: 8px; min-height: 65px; padding: 8px; }
  .inbox-avatar { width: 34px; height: 34px; font-size: 14px; }
  .inbox-text b { font-size: 14px; }
  .inbox-preview { font-size: 13px; }
}
@media screen {
  body { background: #353493 url("/portal-vibecode.jpg") center center / cover fixed no-repeat; }
  .sidebar { background: rgb(29 29 107 / 38%); border-color: #ffffff30; }
  .sidebar .brand :is(b,small), .sidebar .identity :is(strong,span,button),
  .sidebar .nav button, .sidebar .nav .nav-glyph,
  .topbar :is(.path,.quiet,a) { color: white; }
  .sidebar .nav button { background: transparent; border-color: transparent; }
  .sidebar .nav button.active,.sidebar .nav button:hover:not(:disabled),.sidebar .identity button:hover { background: #ffffff38; color: white; box-shadow: none; }
  .sidebar .identity,.topbar { border-color: #ffffff38; }
  .topbar { background: transparent; }
  .topbar .env { background: #ffffff27; color: white; }
  .topbar .quiet:hover:not(:disabled) { background: #ffffff30; }
  .page>.page-head :is(h1,p,time),.page>.row>h2 { color: white; }
  .page>.desk-layout .desk-project,.page>.tabs,.page>.row:not(:has(h2)),.page>.stack,
  .page>.empty,.page>.field,.page>.mobile-service,.page>form { background: var(--air-surface); border-radius: 12px; padding: 12px; }
  .desk-content,.page>.grid { min-width: 0; }
  button.primary { background: #1cae6a; border-color: #1cae6a; color: white; font-weight: 600; }
  button.primary:hover:not(:disabled) { background: #148452; border-color: #148452; }
  .task h3 .task-title { background: transparent; color: var(--air-link); border: 0; padding: 0; min-height: 0; font: inherit; text-align: start; }
  .task h3 .task-title:hover { text-decoration: underline; }
  .task-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-block: 5px; }
  .task-body .task-guide { display: grid; gap: 3px; padding: 6px 9px; }
  .task-body .task-guide p { margin: 0; color: var(--guide-ink); font-size: 14px; line-height: 1.4; white-space: pre-line; }
  .task-guide ol { padding-inline-start: 1.5em; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.45; }
  .task-guide li + li { margin-top: 3px; }
  .pending-answers { margin: 10px 18px 0; color: var(--air-link); font-size: 15px; }
  .task-result { white-space: pre-line; }
  .desk-task.chosen { border-color: var(--air-link); }
  .desk-task { scroll-margin-block: 12px; }
  .page>.grid .task-body { min-width: 0; overflow-wrap: anywhere; }
}

/* Keep the working area close to the top and use available width for content. */
@media screen {
  .main,.main:has(.desk-layout) { padding: 0 14px 20px; }
  .main .topbar,.main:has(.desk-layout) .topbar { min-height: 46px; height: auto; gap: 8px; }
  .main>.page,.page:has(.desk-layout) { padding-top: 10px; gap: 12px; }
  .page-head { gap: 8px; }
  .page-head h1 { font-size: 24px; }
  .page-head p { margin-top: 3px; }
  .grid { gap: 12px; }
  .stack { gap: 10px; }
  .panel-head { padding: 9px 12px; }
  .panel-body { padding: 12px; gap: 10px; }
  .task { padding: 10px 12px; gap: 9px; }
  .task-body .actions { margin-top: 7px; gap: 5px 8px; }
  .facts { gap: 10px 16px; }
  .fact { gap: 3px; }
  .blockers { gap: 7px; }
  .notice { padding: 9px 12px; }
  .empty { padding: 14px 12px; }
  .doc { padding: 12px; gap: 9px; }
  .file-row { padding-block: 8px; }
  .timeline { gap: 12px; }
  .event { padding-left: 10px; gap: 3px; }
  .desk-layout { gap: 10px; }
  .desk-list { padding: 9px; gap: 6px; }
  #desk-list-body { gap: 5px; }
  .page>.desk-layout .desk-project { padding: 10px; }
  .desk-head { padding-bottom: 5px; }
  .desk-tabs { margin-bottom: 7px; }
  .desk-box { padding: 10px; }
  .desk-box h3 { margin: 0 0 5px; }
  .desk-section-head { flex-wrap: wrap; }
  .task-group-title { margin: 3px 0 0; }
  .task-history { margin-top: 4px; }
  .desk-task>small { margin: 0 12px 8px; }
  .archive-filters { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 10px; align-items: end; }
  .archive-filters .field { min-width: 0; }
  .archive-line { padding: 4px 10px; }
  .archive-line .desk-material { padding-block: 5px; }
  .overview-files .desk-section-head h3 { margin: 0; }
  .overview-files .material-line .desk-material { padding-block: 6px; }
  .chat-inbox .inbox-entry { min-height: 60px; padding: 7px 12px; }
  .dialog-head { padding: 10px 14px; }
  .dialog-body { padding: 12px 14px; gap: 10px; }
  .dialog-actions { padding-top: 8px; }
  .field input,.field select { padding: 8px 10px; min-height: 38px; }
}
@media screen and (min-width:901px) {
  .shell,.shell:has(.desk-layout) { grid-template-columns: clamp(168px,12.5vw,184px) minmax(0,1fr); }
  .sidebar,.sidebar:has(+.main .desk-layout) { padding: 16px 8px; gap: 16px; }
  .desk-layout { grid-template-columns: clamp(290px,21vw,340px) minmax(0,1fr) clamp(120px,9vw,144px); }
  .desk-list-title h2 { font-size: 18px; }
}
@media screen and (min-width:901px) and (max-width:1240px) {
  .desk-layout { grid-template-columns: 244px minmax(0,1fr) 112px; gap: 8px; }
}
@media screen and (max-width:900px) {
  .shell { display: block; }
  .sidebar,.sidebar:has(+.main .desk-layout) { padding: 4px 8px; gap: 0; }
  .sidebar :is(.brand,.identity) { display: none; }
  .sidebar .nav,.sidebar:has(+.main .desk-layout) .nav { display: flex; flex-wrap: wrap; gap: 2px; }
  .sidebar .nav button { padding: 6px 8px; }
}
@media screen and (max-width:640px) {
  .main,.main:has(.desk-layout) { padding: 0 8px 16px; }
  .main>.page,.page:has(.desk-layout) { padding-top: 8px; gap: 10px; }
  .page>.desk-layout .desk-project { padding: 8px; }
  .archive-filters { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .chat-inbox .inbox-entry { padding: 6px 8px; }
  .field input,.field select { min-height: 42px; }
}
@media screen and (pointer:coarse) {
  .sidebar .nav button,.sidebar:has(+.main .desk-layout) .nav button { min-height: 42px; }
}
.control-register>header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 12px; }
.control-register>header h3 { margin:0; }
.control-register .task:focus { outline:2px solid var(--blue,#1477a3); outline-offset:2px; scroll-margin-block:16px; }
.archive-line .desk-material { border:0; }
.archive-line .desk-material>span:first-child { white-space:normal; text-wrap:wrap; font-size:14px; }
.work-heading,.work-toolbar,.work-calendar>header,.work-agenda-head,.work-lane>header {
  display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;
}
.work-heading h1 { margin:0;font-size:26px;color:white; }
.work-toolbar { justify-content:flex-start; }
.work-toolbar .switch,.work-heading .switch { max-width:100%; }
.work-board { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start; }
.work-lane,.work-calendar { background:#f9fbfd;border:1px solid #d8e0e8;border-radius:12px;color:#233646; }
.work-lane { padding:8px;min-width:0;border-top:4px solid #6d9edb; }
.work-lane.lane-doing { border-top-color:#7670c2; }.work-lane.lane-waiting { border-top-color:#c49337; }.work-lane.lane-done { border-top-color:#69a389; }
.work-lane>header { padding:2px 3px 9px;gap:6px; }
.work-lane>header span { font-size:12px;border-radius:10px;background:#e4ebf0;padding:1px 7px; }
.work-lane h2,.work-calendar h2,.work-agenda-head h2 { margin:0;font-size:16px;color:#203446; }
.work-card { background:white;border:1px solid #d7e1e9;border-radius:8px;padding:10px;min-width:0;overflow-wrap:anywhere; }
.work-card+.work-card,.work-lane>.work-card+button { margin-top:6px; }
.work-card-meta { display:flex;flex-wrap:wrap;justify-content:space-between;gap:3px 8px;font-size:12px;color:#475c6f; }
.work-card h3 { margin:5px 0 2px;line-height:1.25; }
.work-title { display:inline-block;min-width:0;min-height:0;padding:0!important;border:0!important;border-radius:2px!important;background:transparent!important;box-shadow:none!important;text-align:left;font-size:15px;font-weight:650;color:#175483;white-space:normal;overflow-wrap:anywhere; }
.work-title:hover { text-decoration:underline; }
.work-card p { font-size:13px;line-height:1.4;margin:3px 0;color:#405665; }
.work-card .actions { margin-top:7px;gap:4px; }
.work-card .actions button { white-space:normal;max-width:100%; }
.work-card.is-done { background:#f0f5f3; }
.work-empty { color:#526676;font-size:14px;margin:10px 4px; }
.work-list .work-card { margin:6px; }
.work-calendar { padding:12px; }
.work-calendar>header,.work-agenda-head { margin-bottom:8px; }
.work-calendar h2::first-letter { text-transform:uppercase; }
.work-weekdays,.work-month-grid { display:grid;grid-template-columns:repeat(7,minmax(0,1fr)); }
.work-weekdays b { font-size:12px;color:#516576;padding:6px; }
.work-month-grid { background:#d6e1e9;gap:1px;border:1px solid #d6e1e9;border-radius:8px;overflow:hidden; }
.work-day { background:white;color:#2c455a;min-width:0;min-height:62px;padding:3px 5px; }
.work-day.outside { color:#687b88;background:#f1f4f6; }
.work-day[data-selected=true] { box-shadow:inset 0 0 0 2px #2476ae;background:#eff8ff; }
.work-day>button { display:flex;width:100%;justify-content:space-between;align-items:center;gap:2px;padding:3px 5px;min-height:28px;border:0;box-shadow:none;color:inherit;background:transparent;font-size:14px; }
.work-day>button[aria-current=date] .work-day-number { background:#176da2;color:white;border-radius:20px;padding:1px 6px; }
.day-count { color:#234c68;background:#dcecf6;padding:0 5px;border-radius:10px;font-size:11px; }
.day-preview { display:flex;align-items:baseline;gap:4px;min-width:0; }
.day-preview time { font-size:11px;color:#405965;font-variant-numeric:tabular-nums; }
.day-preview .work-title { display:block;max-width:100%;font-size:12px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.work-agenda-head { margin-top:14px; }.work-agenda { display:grid;gap:6px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.work-agenda .work-card { margin:0; }
.work-agenda-head button[aria-pressed=true] { background:#e3f2ff;color:#144d79;border-color:#6d9dbb; }
.work-calendar>[data-action=work-history] { margin-top:9px; }
#source-archive>label {display:inline-grid;gap:3px;margin:4px 8px 4px 0;max-width:100%}
.source-entry {padding:9px 0;border-top:1px solid #d8e0e6;overflow-wrap:anywhere}
.source-entry p {white-space:pre-wrap;margin:4px 0}.source-entry header,.source-entry small,.source-entry>a {font-size:13px}
@media(max-width:1120px){.work-board{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:640px){
  .work-heading h1{font-size:22px}.work-heading,.work-toolbar{gap:6px 9px}.work-board{grid-template-columns:1fr;}
  .work-calendar{padding:8px}.work-day{min-height:44px;padding:1px}.work-day>button{min-height:44px;padding:3px;justify-content:center}.day-preview{display:none}
  .work-calendar>header .actions{gap:2px}.work-calendar>header button{min-width:36px}.work-agenda{grid-template-columns:1fr}
}
@media screen and (min-width:901px) {
  .shell,.shell:has(.desk-layout) { grid-template-columns:clamp(180px,13.5vw,192px) minmax(0,1fr); }
}
@media screen and (max-width:600px) {
  .archive-line { display:grid; grid-template-columns:minmax(0,1fr) auto; }
  .archive-line .archive-row-tools { max-width:125px; }
}
.chat-inbox.staff-inbox .inbox-entry { grid-template-columns:minmax(0,1fr) auto; }
.page .chat-list-heading { display:table; margin:14px 0 6px; padding:3px 9px; color:#16314b; background:#f3f6fb; border-radius:5px; font-size:16px; }
.staff-room .staff-recipients { position:relative; min-width:0; color:#16314b; }
.staff-room .staff-recipients summary,.staff-attach { padding:6px 10px; border:1px solid #aabbcc; background:#fff; border-radius:6px; cursor:pointer; }
.staff-picker { position:absolute; z-index:6; bottom:calc(100% + 5px); left:0; width:min(255px,75vw); max-height:min(36vh,260px); overflow:auto; overscroll-behavior:contain; padding:8px; border:1px solid #cbd5e0; background:#fff; box-shadow:0 3px 14px #1c305233; border-radius:8px; }
.staff-picker label { display:flex; align-items:center; gap:8px; padding:5px; color:#193048; }
.staff-picker input { width:auto; margin:0; }
.staff-picker [data-choose] { position:sticky; bottom:0; background:#fff; }
.staff-files { display:flex; flex-wrap:wrap; gap:6px; }
.staff-files:empty { display:none; }
.staff-files span { background:#edf3f8; padding:3px 6px; border-radius:5px; overflow-wrap:anywhere; }
.staff-files button { padding:2px 7px; min-height:28px; }
.staff-attach { position:relative; overflow:hidden; color:#193048; }
.staff-attach input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.staff-attach:focus-within { outline:2px solid #2776ae; }
.staff-message a { display:block; overflow-wrap:anywhere; }
.staff-message footer,.staff-draft-quote:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.staff-message footer button { color:#18577d; min-height:28px; padding:3px 7px; }
.staff-message .staff-quote,.staff-draft-quote { margin:4px 0; padding:5px 9px; background:#eff4fa; border:0; border-left:3px solid #6e9abc; color:#233f58; text-align:start; overflow-wrap:anywhere; }
.staff-message .staff-quote { display:block; width:100%; }
.staff-message:focus { outline:2px solid #4b81ae; outline-offset:-2px; }
.staff-original-text { white-space:pre-wrap; overflow-wrap:anywhere; }
@media(max-width:600px){.staff-room .actions{position:relative;flex-wrap:wrap}.staff-room .staff-recipients{position:static}.staff-picker{width:100%;max-width:100%}}

.contract-source{background:#f0f6fc;border-radius:8px;padding:12px;display:grid;gap:5px}.contract-source strong{overflow-wrap:anywhere}.contract-source>div{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.contract-link{font-weight:650}.dialog-body:has(.contract-source) .dialog-actions{position:sticky;bottom:0;background:white;z-index:2;padding:10px 0}
/* The desktop project list, project card and participants share one workspace. */
@media screen {
 .shell.workspace-shell,.shell.workspace-shell:has(.desk-layout){display:block;grid-template-columns:none}
 .workspace-bar{position:sticky;top:0;z-index:24;display:flex;align-items:center;gap:clamp(8px,2vw,30px);min-height:54px;padding:5px 14px;background:#292c72;color:#fff;box-shadow:0 1px 5px #16235950}
 .workspace-bar .brand,.workspace-bar .identity{position:static;display:flex;align-items:center;gap:6px;padding:0;margin:0;border:0;color:white}
 .workspace-bar .brand b,.workspace-bar .brand small{color:white}.workspace-bar .brand img{width:29px;height:29px}
 .workspace-bar .identity{margin-left:auto;display:grid;gap:0;text-align:right}.workspace-bar .identity small{color:#e5e8ff}
 .workspace-bar .workspace-nav{display:flex;flex-wrap:nowrap;align-items:center;gap:3px;margin:0;overflow:visible}
 .workspace-nav>button,.workspace-more>summary{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;min-height:39px;border:0;border-radius:7px;background:transparent;color:white;white-space:nowrap;cursor:pointer;font:inherit}
 .workspace-nav>button:is(.active,:hover),.workspace-more>summary:is(.active,:hover){background:#ffffff29;color:white}
 .workspace-bar .nav-glyph{width:18px;height:18px;fill:currentColor}.workspace-bar .count{border-radius:9px;padding:1px 5px;background:#fff;color:#303682;font-size:11px}
 .workspace-more{position:relative}.workspace-more>summary{list-style:none}.workspace-more>div{position:absolute;right:0;top:100%;z-index:2;min-width:205px;background:#fff;color:#172c43;box-shadow:0 8px 28px #15264b40;border-radius:8px;padding:7px;max-height:70dvh;overflow:auto}
 .workspace-more>div>*{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px;background:white;border:0}.workspace-more>div>hr{padding:0;border-top:1px solid #d9dfea}.workspace-more>div>button:is(.active,:hover){background:#eaf3ff}
 .workspace-shell .main:has(.desk-layout){padding:0 8px 16px}.workspace-shell .page:has(.desk-layout){padding-top:8px}
 .workspace-shell .desk-layout{grid-template-columns:clamp(345px,34vw,595px) minmax(0,1fr) clamp(150px,13vw,220px);gap:8px}
 .workspace-shell :is(.desk-list,.desk-people){top:64px;max-height:calc(100dvh - 75px);overflow:auto}
 .workspace-shell .desk-name :is(strong,small){display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .workspace-shell .desk-project{min-width:0}.workspace-shell .desk-content{scroll-margin-top:65px}
}
@media screen and (max-width:1000px){
 .workspace-bar .brand small,.workspace-bar .identity small{display:none}.workspace-bar{gap:6px}
 .workspace-shell .desk-layout{grid-template-columns:minmax(270px,35%) minmax(0,1fr) 125px}
 .workspace-shell .desk-people{grid-column:3;grid-row:1;position:sticky;display:block}
}
@media screen and (max-width:900px){
 .workspace-shell .desk-choose{display:inline-flex;align-items:center;min-height:40px}
 .workspace-shell .desk-list-heading,.workspace-shell .desk-list[data-list-open=false] #desk-list-body{display:none}
 .workspace-bar{padding:3px 5px;justify-content:center}.workspace-bar .identity,.workspace-bar .brand{display:none}
 .workspace-bar .workspace-nav{width:100%;justify-content:space-around;gap:0}.workspace-nav>button,.workspace-more>summary{font-size:12px;padding:5px 3px;white-space:normal;justify-content:center;line-height:1.1;min-height:44px}.workspace-bar .nav-glyph{display:none}
 .workspace-shell .desk-layout{display:flex;flex-direction:column}.workspace-shell .desk-list,.workspace-shell .desk-project,.workspace-shell .desk-people{width:100%}
 .workspace-shell .desk-list,.workspace-shell .desk-people{position:static;max-height:none}.workspace-shell .desk-list{order:0}
 .workspace-shell .desk-people{order:1;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;overflow-x:auto;padding:4px 7px}
 .workspace-shell .desk-people>*{flex:none;width:auto}.workspace-shell .desk-project{order:2}.workspace-shell .desk-people button,.workspace-shell .desk-self{border:0;padding:3px 6px}
}

.desk-people.chat-roster,.desk-people.staff-roster{display:flex;flex-direction:column;align-items:stretch;gap:5px;overflow:hidden}
.chat-roster [data-room-members],.staff-roster [data-members]{min-height:0;overflow:auto}
.desk-people .chat-invite:not([hidden]){display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:34px;padding:5px 6px;background:#eaf6fc;border:1px solid #a4c9dd;border-radius:6px;color:#125075;font-weight:600;flex:none}
.desk-people .chat-invite[hidden]{display:none}
@media(max-width:900px){
  .workspace-shell .desk-people.chat-roster{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;padding:6px 8px}
  .chat-roster [data-room-members]{grid-column:1/-1;grid-row:2;display:flex;gap:4px;overflow:auto}
  .chat-roster [data-room-members]>*{flex:0 0 auto;width:auto;white-space:nowrap}
  .chat-roster .chat-invite{grid-column:2;grid-row:1}
}

 .desk-row-unread,.past-rooms[open]>div,.room-chips{display:flex;align-items:center;flex-wrap:wrap;gap:5px;min-width:0}
 .workspace-shell .page:has(>.desk-layout){grid-template-columns:minmax(0,1fr)}
 .workspace-shell .desk-layout{min-width:0}
 .workspace-shell .desk-tabs{flex-wrap:nowrap;column-gap:4px;margin:0 0 6px;min-width:0;contain:inline-size}
 .workspace-shell .desk-tabs>button,.workspace-shell .desk-tabs>details{flex:none;white-space:nowrap}
 .workspace-shell .desk-tabs>details[hidden]{display:none}
 .workspace-shell .desk-tabs>button,.workspace-shell .desk-tabs summary{min-height:30px;padding:4px 7px}
 .workspace-shell .desk-tabs details>div{right:0;left:auto;max-width:min(80vw,280px);z-index:8}
 .process-strip{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:4px 8px;margin:0 0 8px}
 .room-groups{display:grid;gap:4px;min-width:0}
 .room-group{background:#f3f7fa;border-radius:6px;padding:3px 6px 5px;min-width:0}
 .room-heading{display:block;margin-bottom:2px;font-size:12px;line-height:15px;font-weight:600;color:#425d70}
 .process-chip svg{width:16px;height:16px;fill:currentColor;flex:none}
 .desk-row-unread{grid-column:1/-1;padding:1px 0 3px}
 .workspace-shell .process-chip{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:flex-start;gap:5px;max-width:100%;min-height:30px;padding:3px 7px;border:1px solid #b8cedb;border-radius:6px;background:#fff;color:#25475b;font:14px/1.35 "Segoe UI",Arial,sans-serif;overflow-wrap:anywhere}
 .workspace-shell .process-chip:hover,.workspace-shell .process-chip[aria-pressed=true]{background:#e4f4fc;border-color:#3981a4;color:#074e72}
 .workspace-shell .process-strip .general-room{align-self:stretch;justify-content:center;min-height:42px;padding-inline:9px;background:#eef6fb;font-weight:600}
 .workspace-shell .general-room[aria-pressed=true]{border-color:#3981a4;background:#e1f1fa}
 .workspace-shell .room-chips .process-chip{min-height:26px;padding:2px 6px;font-size:13px}
 .process-strip>.past-rooms{grid-column:1/-1}
 .workspace-shell .process-chip:focus-visible,.past-rooms summary:focus-visible{outline:2px solid #0972a2;outline-offset:2px}
 .room-badge{display:inline-grid;place-items:center;flex:none;min-width:18px;height:18px;padding:0 4px;border-radius:14px;color:white;background:#076895;font:600 12px/1 "Segoe UI",Arial,sans-serif}
 .desk-row-unread .process-chip{font-size:12px;min-height:26px}
 .past-rooms{max-width:100%;color:#465f72;font-size:13px}
 .past-rooms[open]{flex-basis:100%}.past-rooms[open]>div{margin-top:5px}
 .past-rooms summary{cursor:pointer;padding:5px 3px}
 .chat-header [data-rooms]{font-weight:600}
 @media(pointer:coarse){.workspace-shell .process-chip,.workspace-shell .room-chips .process-chip,.workspace-shell .desk-tabs>button,.workspace-shell .desk-tabs summary,.past-rooms summary{min-height:44px}}
 @media(max-width:360px){.workspace-bar:has(.walk-next){flex-wrap:wrap}.workspace-bar .walk-next{margin-inline-start:auto}}
 

.workspace-shell .process-strip{border:1px solid #bed8e7;background:#f4f9fd;border-radius:9px;padding:5px 7px}
.workspace-shell .room-group{background:transparent}
.workspace-shell a.desk-name,.workspace-shell a.process-chip{text-decoration:none}
.workspace-shell .compose-destination{display:block;font-size:15px;line-height:1.3;font-weight:650;color:#25485f;margin:0 0 3px}
.workspace-shell .chat-compose #chat-body,.workspace-shell .staff-room #staff-body{min-height:36px;height:38px;max-height:140px;resize:vertical}
.desk-people .in-room{color:#356478}.in-room[hidden],.desk-people .chat-invite[hidden]{display:none!important}
.workspace-shell [data-project-roster]{min-height:0;overflow:auto}
@media(max-width:640px){.workspace-shell [data-project-roster]{display:flex;overflow:auto;gap:8px}.workspace-shell [data-project-roster]>*{flex:0 0 auto}}