@layer modules {
  /* Компоновка контактов, общей истории и переиспользуемого редактора. */
  .interactions-layout {
    display: grid;
    grid-template-columns: var(--contacts-pane-size) minmax(0, 1fr);
    flex: 1;
    min-block-size: 0;
  }
  .contacts-pane {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    background: var(--color-pane);
    border-inline-end: var(--border-default);
  }
  .contacts-heading {
    padding: var(--space-6-25) var(--space-5-5) var(--space-4-25);
  }
  .contacts-heading h2 {
    font-size: var(--font-19);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-heading);
  }
  .contacts-heading p {
    color: var(--color-secondary);
    font-size: var(--font-11);
    margin-block-start: var(--space-1);
  }
  .contact-search {
    margin-inline: var(--space-4-75);
    display: block;
  }
  .contact-filters {
    margin: var(--space-3-5) var(--space-4-75) var(--space-3);
    inline-size: calc(100% - var(--size-38));
  }
  .contact-filters button {
    flex: 1;
    padding-inline: var(--space-1-75);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1-75);
  }
  .contact-filters button:last-child {
    flex: 0 0 var(--size-29);
  }
  .contact-filters button span {
    font-size: var(--font-9);
    background: var(--color-hover);
    min-inline-size: var(--size-14);
    border-radius: var(--radius-3);
  }
  .contacts-list {
    overflow-y: auto;
    min-block-size: 0;
    flex: 1;
    padding: 0 var(--space-2-5);
    overscroll-behavior: contain;
  }
  .list-group-label {
    display: flex;
    gap: var(--space-1-25);
    align-items: center;
    font-size: var(--font-9);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    color: var(--color-muted);
    padding: var(--space-3-75) var(--space-3) var(--space-2);
  }
  .list-group-label .icon {
    inline-size: var(--size-11);
    block-size: var(--size-11);
  }
  .contact-card {
    display: flex;
    gap: var(--space-2-75);
    padding: var(--space-3-75) var(--space-3);
    border-radius: var(--card-radius);
    border: var(--border-width) var(--border-style) transparent;
    margin-block: var(--space-0-5);
    position: relative;
  }
  .contact-card:hover {
    background: var(--color-hover);
  }
  .contact-card.is-selected {
    background: var(--contact-selected-bg);
    border-color: var(--contact-selected-border);
  }
  .contact-card.is-selected::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: var(--space-4);
    inline-size: var(--size-2);
    background: var(--color-accent);
    border-radius: var(--radius-2);
  }
  .contact-card-body {
    flex: 1;
    min-inline-size: 0;
  }
  .contact-card-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-1);
    margin-block-start: calc(-1 * var(--space-0-25));
  }
  .contact-name {
    font-size: var(--font-12);
    font-weight: var(--font-weight-semibold);
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .contact-card-heading time {
    color: var(--color-muted);
    font-size: var(--font-10);
    flex: none;
  }
  .contact-company {
    color: var(--color-secondary);
    font-size: var(--font-10);
    margin-block-start: var(--space-0-25);
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .contact-preview {
    display: flex;
    align-items: center;
    gap: var(--space-1-25);
    margin-block-start: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-11);
  }
  .contact-preview > span:not(.count) {
    min-inline-size: 0;
    flex: 1;
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .contact-preview .icon {
    inline-size: var(--size-12);
    block-size: var(--size-12);
  }
  .contact-preview .count {
    margin-inline-start: auto;
    flex: none;
  }
  .attention-dot {
    inline-size: var(--size-5);
    block-size: var(--size-5);
    background: var(--color-danger);
    border-radius: var(--radius-circle);
  }
  .contacts-footer {
    display: flex;
    gap: var(--space-1-5);
    align-items: center;
    padding: var(--space-3-75) var(--space-5-25);
    color: var(--color-muted);
    font-size: var(--font-10);
    border-block-start: var(--border-default);
    background: var(--color-pane);
  }
  .conversation {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    min-block-size: 0;
    background: var(--color-surface);
  }
  .conversation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3-75);
    min-block-size: var(--size-91);
    padding: var(--space-5-25) var(--space-7-5) var(--space-4-75);
    border-block-end: var(--border-default);
  }
  .conversation-name {
    font-size: var(--font-16);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--tracking-heading);
  }
  .company-link {
    display: flex;
    align-items: center;
    gap: var(--space-1-25);
    color: var(--color-secondary);
    font-size: var(--font-11);
    margin-block-start: var(--space-0-75);
  }
  .company-link:hover {
    color: var(--color-accent);
  }
  .company-link .icon {
    inline-size: var(--size-12);
    block-size: var(--size-12);
  }
  .conversation-context {
    min-block-size: var(--size-55);
    padding: var(--space-2-75) var(--space-7-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2-5);
    border-block-end: var(--border-default);
  }
  .deal-links {
    min-inline-size: 0;
    flex-wrap: wrap;
  }
  .deal-chip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-11);
    min-inline-size: 0;
    color: var(--color-secondary);
  }
  .deal-chip > span:first-of-type {
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .deal-chip:hover {
    color: var(--color-accent);
  }
  .channel-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: var(--conversation-padding-inline);
    background: var(--color-surface);
    border-block-end: var(--border-default);
    gap: var(--space-2-5);
  }
  .channel-hint {
    font-size: var(--font-10);
    color: var(--color-muted);
    white-space: nowrap;
  }
  .conversation-history {
    flex: 1;
    min-block-size: var(--size-110);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    background: var(--color-history);
    padding: var(--space-2-5) var(--space-7-5) var(--space-6-25);
  }
  .date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin: var(--space-3-75) 0 var(--space-5);
    color: var(--color-muted);
    font-size: var(--font-10);
  }
  .date-divider::before,
  .date-divider::after {
    content: '';
    flex: 1;
    block-size: var(--size-1);
    background: var(--color-border);
  }
  .date-divider span {
    padding-inline: var(--space-1);
    white-space: nowrap;
  }
  .message {
    max-inline-size: var(--message-max-size);
    padding: var(--space-4-25) var(--space-5) var(--space-4-75);
    background: var(--message-bg);
    border: var(--message-border);
    border-radius: var(--message-radius);
    margin-block-end: var(--space-4);
  }
  .message--outgoing {
    background: var(--message-outgoing-bg);
    border-color: var(--message-outgoing-border);
    margin-inline-start: auto;
    max-inline-size: var(--message-outgoing-size);
  }
  .message--note {
    background: var(--color-warning-soft);
  }
  .message-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-2-75);
  }
  .message-sender {
    font-size: var(--font-11);
    font-weight: var(--font-weight-semibold);
  }
  .message-channel {
    font-size: var(--font-9);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-muted);
    margin-inline-start: var(--space-0-75);
  }
  .message-channel .icon {
    inline-size: var(--size-11);
    block-size: var(--size-11);
  }
  .message-header time {
    font-size: var(--font-10);
    color: var(--color-muted);
    margin-inline-start: auto;
  }
  .message-subject {
    font-size: var(--font-12);
    margin-block-end: var(--space-2-25);
    font-weight: var(--font-weight-semibold);
  }
  .message-body {
    white-space: pre-wrap;
    font-size: var(--message-font-size);
    line-height: var(--line-height-message);
    color: var(--color-body);
    overflow-wrap: anywhere;
  }
  .message .attachment {
    margin-block-start: var(--space-3-5);
  }
  .message-demo {
    font-size: var(--font-9);
    color: var(--color-success);
    margin-block-start: var(--space-2-5);
  }
  .next-task {
    display: flex;
    align-items: center;
    gap: var(--space-2-25);
    padding: var(--space-1-75) var(--space-7-5);
    border-block-start: var(--border-default);
    background: var(--color-subtle);
    font-size: var(--font-11);
  }
  .next-task a {
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .next-task a:hover {
    color: var(--color-accent);
  }
  .next-task-icon {
    color: var(--color-warning);
  }
  .next-task-date {
    margin-inline-start: auto;
    font-size: var(--font-10);
    color: var(--color-warning);
    white-space: nowrap;
  }
  .composer-wrap {
    padding: var(--space-3-75) var(--space-7-5) var(--space-2-75);
    background: var(--color-surface);
  }
  .composer {
    border: var(--composer-border);
    border-radius: var(--composer-radius);
    background: var(--color-surface);
  }
  .composer:focus-within {
    border-color: var(--color-accent-border);
    box-shadow: var(--shadow-focus);
  }
  .composer-context {
    display: flex;
    align-items: center;
    gap: var(--space-1-75);
    padding: var(--space-2) var(--space-3-25) var(--space-1);
    color: var(--color-muted);
    font-size: var(--font-10);
  }
  .recipient {
    color: var(--color-secondary);
    font-size: var(--font-10);
    background: var(--color-accent-soft);
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-4);
    white-space: nowrap;
  }
  .composer-address {
    font-size: var(--font-9);
    overflow: clip;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer textarea {
    inline-size: 100%;
    display: block;
    padding: var(--space-2-5) var(--space-3-75);
    border: 0;
    border-radius: 0;
    outline: 0;
    resize: none;
    font-size: var(--font-12);
    min-block-size: var(--composer-min-size);
    max-block-size: var(--composer-max-size);
    background: transparent;
    field-sizing: content;
  }
  .composer textarea::placeholder {
    color: var(--color-muted);
  }
  .composer textarea:focus-visible {
    outline: var(--focus-outline);
  }
  .composer-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2-75);
    border-block-start: var(--border-default);
  }
  .composer-channel {
    display: flex;
    align-items: center;
    gap: var(--space-1-25);
    color: var(--color-secondary);
    margin-inline-end: var(--space-1-25);
  }
  .composer-channel .icon {
    inline-size: var(--size-15);
    block-size: var(--size-15);
  }
  .composer-channel select {
    border: 0;
    background: transparent;
    font-size: var(--font-11);
    padding: var(--space-1) 0;
    inline-size: var(--size-85);
  }
  .toolbar-divider {
    block-size: var(--size-15);
    inline-size: var(--size-1);
    background: var(--color-border);
    margin-inline: var(--space-1-25);
  }
  .composer-keyboard {
    margin-inline-start: auto;
    color: var(--color-muted);
    font-size: var(--font-9);
    margin-inline-end: var(--space-2-5);
  }
  .composer-toolbar .btn {
    font-size: var(--font-11);
    min-block-size: var(--size-30);
  }
  .composer-footnote {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-1-25);
    margin-block-start: var(--space-2);
    color: var(--color-muted);
    font-size: var(--font-9);
  }
  .status-dot {
    inline-size: var(--size-4);
    block-size: var(--size-4);
    border-radius: var(--radius-circle);
    background: var(--color-success);
  }
  .composer-file {
    font-size: var(--font-10);
    color: var(--color-accent);
    margin: 0 var(--space-3-5) var(--space-2-5);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  @media (min-width: 1600px) {
    .conversation-history {
      padding-inline: var(--conversation-padding-inline);
    }
  }
  @media (max-width: 1100px) {
    .interactions-layout {
      grid-template-columns: var(--contacts-pane-size) minmax(0, 1fr);
    }
    .conversation-header {
      padding-inline: var(--conversation-padding-inline);
    }
    .conversation-context,
    .channel-bar {
      padding-inline: var(--conversation-padding-inline);
    }
    .conversation-history {
      padding-inline: var(--conversation-padding-inline);
    }
    .composer-wrap {
      padding-inline: var(--conversation-padding-inline);
    }
    .next-task {
      padding-inline: var(--conversation-padding-inline);
    }
    .channel-hint,
    .composer-address {
      display: none;
    }
    .channel-tabs {
      gap: var(--space-4);
    }
    .deal-chip .badge {
      display: none;
    }
    .conversation-name {
      font-size: var(--font-15);
    }
  }
  @media (max-width: 820px) {
    .interactions-layout {
      grid-template-columns: var(--contacts-pane-size) minmax(0, 1fr);
    }
    .contacts-heading {
      padding-inline: var(--space-4);
    }
    .contact-search {
      margin-inline: var(--space-3);
    }
    .contact-filters {
      margin-inline: var(--space-3);
      inline-size: calc(100% - var(--size-24));
    }
    .contact-card {
      padding-inline: var(--space-2);
      gap: var(--space-2);
    }
    .contact-card .avatar {
      inline-size: var(--size-31);
      block-size: var(--size-31);
      font-size: var(--font-10);
    }
    .contact-name {
      font-size: var(--font-11);
    }
    .message {
      padding: var(--space-3-25);
    }
    .message-channel {
      display: none;
    }
    .composer-keyboard {
      display: none;
    }
    .composer-toolbar .btn {
      margin-inline-start: auto;
    }
    .conversation-context {
      flex-wrap: wrap;
    }
    .next-task-date {
      display: none;
    }
    .composer-context .btn {
      font-size: var(--font-10);
    }
  }
  @media (max-width: 620px) {
    .interactions-layout {
      display: flex;
    }
    .contacts-pane {
      inline-size: 100%;
      border-inline-end: 0;
    }
    .conversation {
      display: none;
    }
    .interactions-layout.has-selection .contacts-pane {
      display: none;
    }
    .interactions-layout.has-selection .conversation {
      display: flex;
      inline-size: 100%;
    }
    .contact-card {
      padding: var(--space-3-75) var(--space-3-25);
    }
    .contact-name {
      font-size: var(--font-13);
    }
    .contact-card .avatar {
      inline-size: var(--size-38);
      block-size: var(--size-38);
    }
    .contact-company,
    .contact-preview {
      font-size: var(--font-11);
    }
    .conversation-header {
      padding: var(--space-3-75) var(--space-3);
      min-block-size: var(--size-77);
      gap: var(--space-1-25);
    }
    .conversation-header > .flex-row {
      gap: var(--space-1-75);
    }
    .conversation-header .avatar--lg {
      display: none;
    }
    .conversation-header .badge {
      display: none;
    }
    .conversation-context {
      padding: var(--space-2-25) var(--space-3-5);
      gap: var(--space-1-25);
    }
    .conversation-name {
      font-size: var(--font-14);
    }
    .channel-bar {
      padding-inline: var(--conversation-padding-inline);
    }
    .channel-tabs {
      gap: var(--space-3-75);
    }
    .channel-tabs .tab {
      font-size: var(--font-10);
      gap: var(--space-1);
    }
    .channel-tabs .icon {
      inline-size: var(--size-12);
      block-size: var(--size-12);
    }
    .conversation-history {
      padding: var(--space-0-5) var(--space-3) var(--space-3);
      min-block-size: var(--size-70);
    }
    .message {
      padding: var(--space-3);
      border-radius: var(--message-radius);
      margin-block-end: var(--space-2-5);
    }
    .message--outgoing {
      max-inline-size: var(--message-outgoing-size);
    }
    .message-sender {
      font-size: var(--font-10);
    }
    .message-body {
      font-size: var(--message-font-size);
    }
    .message-subject {
      font-size: var(--font-11);
    }
    .composer-wrap {
      padding: var(--space-2-5) var(--space-3) var(--space-2);
    }
    .composer-context {
      flex-wrap: wrap;
      gap: var(--space-1);
      padding-inline: var(--space-2-25);
    }
    .composer-context .btn {
      margin-inline-start: auto;
      padding: var(--space-0-75) var(--space-1);
    }
    .composer-context .btn .icon {
      display: none;
    }
    .composer-toolbar {
      padding: var(--space-1-5);
      gap: var(--space-0-25);
      flex-wrap: wrap;
    }
    .composer-toolbar .icon-btn {
      inline-size: var(--size-25);
    }
    .composer-channel select {
      inline-size: var(--size-65);
      font-size: var(--font-10);
    }
    .toolbar-divider {
      margin-inline: var(--space-0-5);
    }
    .composer-toolbar .btn {
      font-size: var(--font-10);
      padding: var(--space-1-5) var(--space-1-75);
    }
    .next-task {
      padding-inline: var(--conversation-padding-inline);
      font-size: var(--font-10);
      gap: var(--space-1-25);
    }
    .composer-footnote {
      font-size: var(--font-8);
    }
  }
}