/* Проект → «Договоры и КП»: рабочее место менеджера (Figma «LidFly — Проекты»,
   страница 09, экраны C–E). Документы, диалог и данные документа рядом; уже
   1040 px данные открываются поверх диалога, на телефоне — нижним листом.
   Шкала текста: 20 заголовок списка, 17 документ и панель, 15 текст, 13 мета. */
.contracts-frame{container:contracts/inline-size}
.contracts-shell{position:relative;display:grid;grid-template-columns:minmax(240px,276px) minmax(0,1fr);height:640px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:0 2px 12px rgba(0,0,0,.04);overflow:hidden;font-family:var(--font-sans);font-size:var(--text-lg);line-height:1.5;color:var(--color-text)}
.contracts-shell h2,.contracts-shell h3,.contracts-shell h4,.contracts-shell p{margin:0}
.contracts-shell svg{flex:none}
.contracts-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Список документов */
.contracts-list{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;padding:20px 16px 12px;border-right:1px solid var(--color-border)}
.contracts-list__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.contracts-list__head h2{font-size:var(--text-3xl);font-weight:700;line-height:1.4}
.contracts-list__head .btn svg{width:16px;height:16px}
.contracts-search{position:relative;display:block}
.contracts-search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.contracts-search input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px 8px 38px;border:1px solid var(--color-border);border-radius:var(--radius-element);background:var(--color-bg-card);font:inherit;font-size:var(--text-lg);color:var(--color-text)}
.contracts-search input:focus-visible{outline:2px solid var(--color-brand);outline-offset:1px}
.contracts-list__scroll{flex:1;min-height:0;overflow:auto;margin:0 -8px;padding:0 8px 8px}
.contracts-list__label{margin:8px 0 6px!important;font-size:var(--text-base);font-weight:600;color:var(--color-text-muted)}
.contracts-list__empty{padding:2px 0 8px;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-chats{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.contracts-chat{display:grid;gap:4px;width:100%;padding:10px 12px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.contracts-chat:hover{background:var(--color-bg-subtle)}
.contracts-chat.is-active{background:var(--color-matcha-lighter);box-shadow:inset 0 0 0 1px rgba(0,200,83,.28)}
.contracts-chat:focus-visible{outline:2px solid var(--color-brand);outline-offset:1px}
.contracts-chat__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:var(--text-lg);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.contracts-chat__meta{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-chat__badges{display:flex;flex-wrap:wrap;gap:6px}

/* Документ: шапка, полоса «Не хватает», диалог */
.contracts-doc{display:flex;flex-direction:column;min-width:0;min-height:0}
.contracts-doc--empty{display:grid;place-items:center;padding:24px;background:var(--color-bg)}
.contracts-doc__head{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--color-border)}
.contracts-doc__title{flex:1 1 auto;min-width:0}
.contracts-doc__title h2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:17px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.contracts-doc__title p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-back{display:none}
.contracts-back svg,.contracts-doc__head .btn-s svg{width:18px;height:18px}
.contracts-doc__body{flex:1;min-height:0;display:flex;flex-direction:column}
.contracts-strip{padding:12px 16px 0;background:var(--color-bg)}
.contracts-strip__open{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 10px 8px 14px;border:1px solid var(--status-warning-border);border-radius:12px;background:var(--status-warning-bg);color:var(--status-warning-fg);font:inherit;font-weight:600;text-align:left;cursor:pointer}
.contracts-strip__open>svg{width:18px;height:18px;color:var(--status-warning-dot)}
.contracts-strip.is-ready .contracts-strip__open{border-color:var(--status-success-border);background:var(--status-success-bg);color:var(--status-success-fg)}
.contracts-strip.is-ready .contracts-strip__open>svg{color:var(--status-success-dot)}
.contracts-strip__text{flex:1;min-width:0}
.contracts-strip__more{display:inline-flex;align-items:center;gap:2px;color:var(--btn-plain-fg)}
.contracts-strip__more svg{width:18px;height:18px}
.contracts-strip__open:focus-visible{outline:3px solid var(--btn-focus-ring);outline-offset:1px}
.contracts-feed{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:20px;background:var(--color-bg)}
.contracts-msg{display:flex}
.contracts-msg--me{justify-content:flex-end}
.contracts-msg__bubble{display:grid;justify-items:start;gap:8px;max-width:min(560px,85%);padding:12px 16px;border-radius:4px 16px 16px 16px;background:var(--color-bg-card);border:1px solid var(--color-border)}
.contracts-msg--me .contracts-msg__bubble{border-radius:16px 4px 16px 16px;background:var(--color-matcha-light);border-color:transparent}
.contracts-msg__text{font-size:var(--text-lg);line-height:1.5;overflow-wrap:anywhere;user-select:text}
.contracts-msg__text.is-collapsed{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.contracts-msg__bubble .btn svg{width:16px;height:16px}
.contracts-typing{color:var(--color-text-muted)}
.contracts-link{padding:0;border:0;background:none;color:var(--btn-plain-fg);font:inherit;font-weight:600;cursor:pointer}
.contracts-quick{display:flex;flex-wrap:wrap;gap:8px;padding:12px 20px;background:var(--color-bg)}
/* Без поля ввода (образец ещё не выбран) быстрые ответы — последний блок: отступаем от рамки. */
.contracts-quick:last-child{padding-bottom:32px}
.contracts-msg__file{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-msg__file svg{width:18px;height:18px;margin-top:2px;color:var(--color-forest)}
.contracts-msg__file strong{color:var(--color-text);font-weight:600}
.contracts-msg__voice{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-msg__voice svg{width:14px;height:14px}
.contracts-msg--note{justify-content:flex-end}
.contracts-msg--note p{display:flex;align-items:flex-start;gap:6px;max-width:min(560px,85%);font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-msg--note svg{width:14px;height:14px;margin-top:3px}

/* Поле ввода: повторяет окно сообщений встроенного чата (правки — в обоих местах). */
.contracts-composer{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 20px 16px;border-top:1px solid var(--color-border);background:var(--color-bg-card)}
.contracts-composer__field{box-sizing:border-box;min-width:0;display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 14px;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-bg-card);transition:border-color 160ms ease,box-shadow 160ms ease}
.contracts-composer__field:focus-within{border-color:var(--color-brand-700);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-brand) 14%,transparent)}
.contracts-composer.is-drag-over .contracts-composer__field{border-color:var(--color-brand-700);background:var(--color-matcha-lighter)}
.contracts-composer textarea{flex:1;min-width:0;box-sizing:border-box;min-height:44px;max-height:240px;padding:10px 0;border:0;outline:0;background:transparent;color:var(--color-text);font:inherit;font-size:var(--text-lg);resize:none}
/* The field draws the focus ring (as in the chat composer); the textarea itself stays borderless. */
.contracts-composer textarea:focus,.contracts-composer textarea:focus-visible{outline:0;box-shadow:none}
.contracts-composer__actions{display:flex;align-items:center;gap:6px;flex:none}
.contracts-composer__actions [data-contracts-send][hidden]{display:none}
.contracts-composer__hint{font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-attach{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.contracts-attach__item{display:flex;align-items:center;gap:8px;max-width:100%;padding:6px 6px 6px 10px;border:1px solid var(--color-border);border-radius:var(--radius-medium);background:var(--color-bg-subtle)}
.contracts-attach__icon svg{display:block;width:18px;height:18px;color:var(--color-forest)}
.contracts-attach__body{display:grid;min-width:0}
.contracts-attach__body strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;font-size:var(--text-base);font-weight:600}
.contracts-attach__body span{font-size:var(--text-base);color:var(--color-text-muted)}

/* Меню «⋯»: «Начать заново», «Убрать черновик», действия образцов владельца. */
.contracts-menu{position:relative;flex:none}
.contracts-menu>summary{list-style:none}
.contracts-menu>summary::-webkit-details-marker{display:none}
.contracts-menu>summary svg{width:16px;height:16px}
.contracts-menu__list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:grid;min-width:220px;padding:6px;background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:12px;box-shadow:0 8px 40px rgba(0,0,0,.12)}
.contracts-menu__list button{display:block;width:100%;padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--color-text);font:inherit;font-size:var(--text-lg);text-align:left;cursor:pointer}
.contracts-menu__list button:hover,.contracts-menu__list button:focus-visible{background:var(--btn-plain-hover);outline:0}
.contracts-menu__list button.is-danger{color:var(--btn-danger-fg)}
.contracts-menu__list button.is-danger:hover,.contracts-menu__list button.is-danger:focus-visible{background:var(--btn-danger-plain-hover)}

/* Данные документа */
.contracts-panel{display:flex;flex-direction:column;min-width:0;min-height:0;border-left:1px solid var(--color-border);background:var(--color-bg-card)}
.contracts-panel__head{display:grid;gap:8px;padding:18px 20px 14px}
.contracts-panel__title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.contracts-panel__title h3{font-size:17px;font-weight:600;line-height:1.4}
.contracts-panel__close svg{width:18px;height:18px}
.contracts-progress{appearance:none;-webkit-appearance:none;width:100%;height:6px;border:0;border-radius:3px;background:var(--color-border);overflow:hidden;color:var(--btn-filled-bg-top)}
.contracts-progress::-webkit-progress-bar{background:var(--color-border);border-radius:3px}
.contracts-progress::-webkit-progress-value{background:var(--btn-filled-bg-top);border-radius:3px}
.contracts-progress::-moz-progress-bar{background:var(--btn-filled-bg-top);border-radius:3px}
.contracts-panel__count{font-size:var(--text-base);font-weight:600;color:var(--color-text-muted)}
.contracts-panel__body{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;gap:18px;padding:4px 20px 16px}
.contracts-missing{display:grid;gap:4px;padding:12px 14px 10px;border:1px solid var(--status-warning-border);border-radius:12px;background:var(--status-warning-bg)}
.contracts-missing h4{display:flex;align-items:center;gap:8px;font-size:var(--text-lg);font-weight:600;color:var(--status-warning-fg)}
.contracts-missing h4 svg{width:18px;height:18px;color:var(--status-warning-dot)}
.contracts-missing ul{list-style:none;margin:0;padding:0;display:grid}
.contracts-missing li{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;overflow-wrap:anywhere}
.contracts-missing li.is-editing{display:block;padding:6px 0}
.contracts-missing p{font-size:var(--text-base);color:var(--status-warning-fg)}
.contracts-group{display:grid;gap:6px}
.contracts-group h4{font-size:var(--text-lg);font-weight:600}
.contracts-rows{display:grid;gap:10px;margin:0}
.contracts-row{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"label source" "value value";column-gap:12px}
.contracts-row dt{grid-area:label;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-row dd{margin:0}
.contracts-row__value{grid-area:value;white-space:pre-line;overflow-wrap:anywhere}
.contracts-row__source{grid-area:source;display:flex;align-items:center;justify-content:flex-end;gap:2px;min-width:0;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-row__source span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contracts-row__source .btn{width:28px;height:28px;margin:-4px -4px -4px 0}
.contracts-row__source svg{width:15px;height:15px}
.contracts-row__warning{display:block;margin-top:4px;font-size:var(--text-base);color:var(--color-accent-warm-copy)}
.contracts-row.is-editing{display:block}
.contracts-edit{display:grid;gap:8px}
.contracts-edit label{font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-edit input,.contracts-edit textarea{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px;border:1px solid var(--color-brand-700);border-radius:var(--radius-element);background:var(--color-bg-card);color:var(--color-text);font:inherit;font-size:var(--text-lg)}
.contracts-edit input:focus-visible,.contracts-edit textarea:focus-visible{outline:2px solid var(--color-brand);outline-offset:1px}
.contracts-edit__buttons{display:flex;flex-wrap:wrap;gap:8px}
.contracts-edit__help{font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.contracts-items li{display:grid;gap:2px}
.contracts-items strong{font-weight:600;overflow-wrap:anywhere}
.contracts-items span{font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-files{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.contracts-files li{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;overflow-wrap:anywhere}
.contracts-files .btn svg{width:16px;height:16px}
.contracts-panel__foot{display:grid;gap:8px;padding:16px 20px;border-top:1px solid var(--color-border)}
.contracts-panel__foot .btn svg{width:18px;height:18px}
.contracts-panel__foot p{font-size:var(--text-base);color:var(--color-text-muted)}
/* Tabs of a chat with several documents sit between the title and the progress. */
.contracts-panel__tabs{min-width:0}
.contracts-panel__doc{font-size:var(--text-base);font-weight:600;overflow-wrap:anywhere}
.contracts-note{font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-status{padding:0 20px;font-size:var(--text-base);color:var(--color-error)}
.contracts-status:empty{display:none}
.contracts-empty{display:grid;gap:8px;max-width:520px;margin:auto;padding:24px;text-align:center}
.contracts-empty h2{font-size:var(--text-3xl);font-weight:700}
.contracts-empty p{color:var(--color-text-muted)}
.contracts-field{display:grid;gap:4px;font-size:var(--text-base);color:var(--color-text-muted)}

/* «Новый документ»: сделка, тип клиента, образец */
.contracts-start{flex:1;min-height:0;overflow:auto;padding:24px;background:var(--color-bg)}
.contracts-start__form{display:grid;gap:16px;max-width:600px;margin:0 auto}
.contracts-start__step{display:grid;gap:12px;padding:16px 20px 20px;border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-bg-card)}
.contracts-start__head{display:flex;align-items:center;gap:10px}
.contracts-start__head h3{flex:1;font-size:17px;font-weight:600;line-height:1.4}
.contracts-start__num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--color-matcha-light);color:var(--color-forest);font-size:var(--text-base);font-weight:700}
.contracts-start__search{display:flex;gap:8px}
.contracts-start__query{position:relative;flex:1;min-width:0}
.contracts-start__query svg{position:absolute;left:12px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--color-text-muted);pointer-events:none}
.contracts-start__query input{width:100%;box-sizing:border-box;min-height:40px;padding:8px 12px 8px 38px;border:1px solid var(--color-border);border-radius:var(--radius-element);background:var(--color-bg-card);font:inherit;color:var(--color-text)}
.contracts-start__query input:focus-visible{outline:2px solid var(--color-brand);outline-offset:1px}
.contracts-start__hits{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.contracts-start__hit{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:10px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.contracts-start__hit:hover{background:var(--color-bg-subtle)}
.contracts-start__hit.is-selected{background:var(--color-matcha-lighter)}
.contracts-start__hit:focus-visible{outline:2px solid var(--color-brand);outline-offset:1px}
.contracts-start__hit>svg{width:18px;height:18px;color:var(--color-text-muted)}
.contracts-start__hit.is-selected>svg{color:var(--btn-plain-fg)}
.contracts-start__radio{flex:none;width:20px;height:20px;box-sizing:border-box;border:1.5px solid rgba(20,20,20,.24);border-radius:var(--radius-pill);background:var(--color-bg-card)}
.contracts-start__hit.is-selected .contracts-start__radio{border:6px solid var(--btn-filled-bg-top)}
.contracts-start__hit-body{display:grid;gap:2px;min-width:0}
.contracts-start__hit-body strong{font-weight:600;overflow-wrap:anywhere}
.contracts-start__hit-body span{font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-start__lead{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--color-border);border-radius:12px}
.contracts-start__lead .btn{justify-self:start}
.contracts-start__lead-link{display:inline-flex;align-items:center;gap:6px;color:var(--btn-plain-fg);font-weight:600;text-decoration:none}
.contracts-start__lead-link:hover{text-decoration:underline}
.contracts-start__lead-link svg{width:16px;height:16px}
.contracts-start__party{display:flex;flex-wrap:wrap;gap:8px}
.contracts-start__hint{font-size:var(--text-base);color:var(--color-text-muted)}
/* Several samples in one chat: the fit filter toggle under the list. */
.contracts-start__step>[data-start-show-all]{justify-self:start}
.contracts-start__options{display:grid;gap:4px}
.contracts-start__option{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer}
.contracts-start__option:hover{background:var(--color-bg-subtle)}
.contracts-start__option.is-selected{background:var(--color-matcha-lighter);font-weight:600}
.contracts-start__option input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--btn-filled-bg-top)}
.contracts-start__option span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
.contracts-start__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.contracts-start__error{font-size:var(--text-base);color:var(--status-danger-fg)}
.contracts-start__note{display:flex;align-items:flex-start;gap:8px;font-size:var(--text-base);color:var(--color-text-muted)}
.contracts-start__note svg{width:16px;height:16px;margin-top:1px}

/* Три колонки, когда рабочее место достаточно широкое; иначе данные — поверх диалога. */
.contracts-panel__close{display:inline-flex}
@container contracts (min-width:1040px){
  .contracts-shell.has-panel{grid-template-columns:276px minmax(0,1fr) 340px}
  .contracts-strip,.contracts-panel__close{display:none}
}
@container contracts (max-width:1039.98px){
  /* The dimmed dialog behind the panel says the panel is on top and closes with × or Escape. */
  .contracts-panel{display:none;position:absolute;top:0;right:0;bottom:0;z-index:5;width:min(360px,100%);box-shadow:-12px 0 40px rgba(0,0,0,.12),0 0 0 100vmax rgba(20,20,20,.24)}
  .contracts-shell[data-panel="open"] .contracts-panel{display:flex}
}

@media (max-width:760px){
  /* Без контейнера: иначе fixed-лист данных позиционировался бы от рамки, а не от окна. */
  .contracts-frame{container-type:normal}
  .contracts-panel{display:none}
  .contracts-shell{grid-template-columns:minmax(0,1fr);height:auto;min-height:calc(100vh - 220px)}
  .contracts-shell[data-view="list"] .contracts-doc,.contracts-shell[data-view="doc"] .contracts-list{display:none}
  .contracts-list{border-right:0}
  .contracts-back{display:inline-flex;margin-left:-8px}
  .contracts-doc__head{align-items:flex-start;padding:10px 12px}
  .contracts-feed{padding:14px 16px}
  .contracts-msg__bubble{max-width:92%}
  .contracts-composer{position:sticky;bottom:0;padding:10px 12px 14px}
  /* На телефоне поле во всю ширину, кнопки строкой ниже: «Отправить» не сжимает текст. */
  .contracts-composer__field{flex-wrap:wrap;padding-left:12px}
  .contracts-composer textarea{flex-basis:100%}
  .contracts-composer__actions{margin-left:auto}
  .contracts-composer__hint{display:none}
  .contracts-shell[data-panel="open"] .contracts-panel{display:flex;position:fixed;inset:auto 0 0 0;z-index:60;max-height:85vh;border-left:0;border-radius:16px 16px 0 0;box-shadow:0 -16px 48px rgba(0,0,0,.18),0 0 0 100vmax rgba(20,20,20,.32)}
  .contracts-start{padding:16px 12px}
  .contracts-start__step{padding:14px 16px 16px}
  .contracts-start__search{flex-wrap:wrap}
  .contracts-start__search .btn{flex:1 1 auto}
}

/* Таблицы владельца (поля образца, сопоставление сделок) */
.contracts-table-wrap{overflow-x:auto}
.contracts-table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.contracts-table th,.contracts-table td{padding:var(--space-2);border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.contracts-table th{font-weight:600;color:var(--color-text-muted)}
.contracts-table input:not([type=checkbox]),.contracts-table textarea{width:100%;min-width:120px;box-sizing:border-box}
.contracts-sample{max-width:320px;color:var(--color-text-muted)}
.contracts-sample mark{background:var(--color-bg-subtle);color:var(--color-text);font-weight:600;padding:0 2px;border-radius:4px}