/* =============================================================
   АйЮрист — Forms UI-kit (referens/10-forms)
   ============================================================= */
/* -----------------------------------------------------------
   Базовая геометрия (общая для Input и Input + Icon)
   Figma: Property 1 = Input | Input + Icon
   ----------------------------------------------------------- */

.ui-input {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  gap: 10px;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;

  background: var(--bg-secondary);       /* Field/Fields Default  #1F1E1E */
  border: 1px solid var(--border);       /* Strokes/Stroke default #4D4A4A */
  border-radius: var(--radius-6);        /* 6px */
  outline: none;

  color: var(--text-secondary);          /* Text/Secondary при вводе */
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal);
}

.ui-input::placeholder {
  color: var(--text-hint);               /* Text/Hint #9A9898 */
}

/* -----------------------------------------------------------
   Состояния поля
   Figma: Property 2 = Inactive | Hover | Focused | Disabled
   ----------------------------------------------------------- */

/* Inactive — базовые стили выше */

.ui-input:hover:not(:disabled):not(:focus) {
  border-color: var(--border-focus);     /* Strokes/Stroke main #666262 */
}

.ui-input:focus,
.ui-input:focus-visible {
  background: var(--bg-focus);           /* Field/Focused #2E2D2D */
  border-color: var(--border-focus);
  color: var(--text-secondary);
}

.ui-input:disabled {
  background: var(--bg-secondary);
  border-color: var(--border);
  color: var(--text-inactive);           /* Text/Disabled #666262 */
  cursor: not-allowed;
}

.ui-input:disabled::placeholder {
  color: var(--text-inactive);
}

/* -----------------------------------------------------------
   Input + Icon
   Figma: Property 1 = Input + Icon, Property 3 = yes
   ----------------------------------------------------------- */

.ui-input--with-icon {
  justify-content: space-between;
}

.ui-input__icon {
  flex-shrink: 0;
  width: var(--icon-size-sm);            /* 16×16 */
  height: var(--icon-size-sm);
  filter: var(--icon-hint);              /* Text/Hint #9A9898 */
  transition: filter var(--transition-normal);
}

/* Иконка: hover на поле (поле не в фокусе) */
.ui-input--with-icon:hover:not(:disabled):not(:focus) .ui-input__icon {
  filter: var(--icon-accent);            /* Main color #C86848 */
}

/* Иконка: focus */
.ui-input--with-icon:focus .ui-input__icon,
.ui-input--with-icon:focus-visible .ui-input__icon {
  filter: var(--icon-white);             /* White main #FFFFFF */
}

/* Иконка: disabled */
.ui-input--with-icon:disabled .ui-input__icon,
.ui-input__icon--disabled {
  filter: var(--icon-inactive);
}

/* -----------------------------------------------------------
   Input + 2 Icons (Add слева + Send справа)
   Figma: Property 1 = Default | Variant2 | Variant3 | Variant4
   ----------------------------------------------------------- */

.ui-input--with-2-icons {
  justify-content: space-between;
}

.ui-input__leading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ui-input__leading .ui-input__icon--leading {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  filter: var(--icon-accent);            /* Main color #C86848 — всегда, кроме disabled */
}

.ui-input--with-2-icons:disabled .ui-input__icon--leading {
  filter: var(--icon-inactive);
}

/* Send справа — те же правила, что .ui-input__icon в Input + Icon */
.ui-input--with-2-icons .ui-input__icon--trailing {
  filter: var(--icon-hint);
}

.ui-input--with-2-icons:hover:not(:disabled):not(:focus) .ui-input__icon--trailing {
  filter: var(--icon-accent);
}

.ui-input--with-2-icons:focus .ui-input__icon--trailing,
.ui-input--with-2-icons:focus-visible .ui-input__icon--trailing {
  filter: var(--icon-white);
}

.ui-input--with-2-icons:disabled .ui-input__icon--trailing {
  filter: var(--icon-inactive);
}

/* Focus: border 2px (отличие от базового Input) */
.ui-input--with-2-icons:focus,
.ui-input--with-2-icons:focus-visible {
  border-width: 2px;
  padding: 5px 11px;                     /* компенсация +1px border */
}

/* -----------------------------------------------------------
   Input + Title (поле с подписью сверху)
   Figma: Property 1 = Input + Title
   ----------------------------------------------------------- */

.ui-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);                   /* 4px */
  width: 100%;
}

.ui-field__label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;
  color: var(--text-hint);               /* Text/Hint #9A9898 */
}

.ui-field:hover:not(:has(:disabled)) .ui-field__label {
  color: var(--text-tertiary);         /* Text/Tertiary #BFBFBF — только hover */
}

.ui-field:has(:disabled) .ui-field__label {
  color: var(--text-inactive);
}

.ui-field .ui-input:focus,
.ui-field .ui-input:focus-visible {
  font-size: var(--text-12);             /* Body small 12px при вводе */
  line-height: 17px;
}

/* -----------------------------------------------------------
   Input + Extra Buttons (текстовые кнопки под полем)
   Figma: Input + Title (вариант с кнопками, без label)
   ----------------------------------------------------------- */

.ui-field__actions {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-4);                   /* 4px между кнопками */
}

.ui-field__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  border-radius: var(--radius-4);
  background: transparent;
  cursor: pointer;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;
  text-align: center;

  transition: opacity var(--transition-fast);
}

.ui-field__action--success {
  color: var(--color-success);           /* Strokes/Success #4FA36B */
}

.ui-field__action--neutral {
  color: var(--color-neutral);           /* Strokes/Neutral #797979 */
}

.ui-field__action--error {
  color: var(--color-error);             /* Strokes/Error #A34F50 */
}

.ui-field__action:hover:not(:disabled) {
  opacity: 0.85;
}

.ui-field:has(.ui-input:disabled) .ui-field__action {
  color: var(--text-inactive);
  cursor: not-allowed;
  pointer-events: none;
}

/* -----------------------------------------------------------
   Search (Input + иконка Search справа)
   Figma: Property 1 = Search, Property 3 = yes
   Отличие от Input+Icon: иконка НЕ становится accent на hover
   ----------------------------------------------------------- */

.ui-input--search {
  justify-content: space-between;
}

.ui-input--search .ui-input__icon--search {
  flex-shrink: 0;
  width: var(--icon-size-sm);            /* 16×16 */
  height: var(--icon-size-sm);
  filter: var(--icon-hint);
  transition: filter var(--transition-normal);
}

.ui-input--search:focus .ui-input__icon--search,
.ui-input--search:focus-visible .ui-input__icon--search {
  filter: var(--icon-white);
}

.ui-input--search:disabled .ui-input__icon--search {
  filter: var(--icon-inactive);
}

/* -----------------------------------------------------------
   Фильтр disabled-иконок (≈ #666262)
   TODO: перенести в tokens.css как --icon-inactive
   ----------------------------------------------------------- */

/* -----------------------------------------------------------
   Dropdown — закрытый trigger (кнопка)
   Figma: Property 1 = Dropdown, Property 3 = yes
   Варианты Dropdown+Title / +2 Icons — та же логика, что Input
   ----------------------------------------------------------- */

.ui-select {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  gap: 10px;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-12);             /* Body small — выбранное значение */
  line-height: 17px;
  text-align: left;

  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;

  transition:
    border-color var(--transition-normal),
    color var(--transition-normal);
}

.ui-select:hover:not(:disabled):not([aria-expanded="true"]) {
  border-color: var(--border-focus);
}

.ui-select:focus,
.ui-select:focus-visible,
.ui-select[aria-expanded="true"] {
  border-color: var(--border-focus);
  /* фон НЕ меняется на --bg-focus (отличие от .ui-input) */
}

.ui-select:disabled {
  border-color: var(--border);
  color: var(--text-inactive);
  cursor: not-allowed;
}

/* -----------------------------------------------------------
   Chevron (Expand) — 14×8
   SVG: 09-icons/normal/24-chevron-down.svg
   ----------------------------------------------------------- */

.ui-select__chevron {
  flex-shrink: 0;
  width: 14px;
  height: 8px;
  filter: var(--icon-hint);
  transition: filter var(--transition-normal);
}

.ui-select:focus .ui-select__chevron,
.ui-select:focus-visible .ui-select__chevron,
.ui-select[aria-expanded="true"] .ui-select__chevron {
  filter: var(--icon-white);
}

.ui-select:disabled .ui-select__chevron {
  filter: var(--icon-inactive);
}

/* -----------------------------------------------------------
   Dropdown + Title — обёртка .ui-field + .ui-select
   Dropdown + 2 Icons — .ui-select--with-2-icons (см. input.css)
   ----------------------------------------------------------- */

.ui-select--with-2-icons {
  justify-content: space-between;
}

.ui-select--with-2-icons .ui-select__leading {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.ui-select--with-2-icons .ui-select__icon--leading {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  filter: var(--icon-accent);
}

.ui-select--with-2-icons:disabled .ui-select__icon--leading {
  filter: var(--icon-inactive);
}

/* -----------------------------------------------------------
   Dropdown panel (выпадающий список)
   Источник: выведено по стилю trigger (экспорта Figma нет)
   ----------------------------------------------------------- */

.ui-select-wrap {
  position: relative;
  width: 100%;
}

/* Открытый dropdown — поверх следующих полей формы */
.ui-field:has(.ui-select-wrap.is-open),
.desktop-input-section:has(.ui-select-wrap.is-open) {
  position: relative;
  z-index: var(--z-dropdown);
}

.ui-select-wrap.is-open {
  z-index: var(--z-dropdown);
}

.ui-select__panel {
  box-sizing: border-box;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--z-dropdown);

  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;

  background: var(--bg-secondary);       /* #1F1E1E — как trigger */
  border: 1px solid var(--border-focus); /* #666262 — открытое состояние */
  border-radius: var(--radius-6);        /* 6px — как trigger */
  box-shadow: var(--shadow-md);
  overflow: hidden;
  overflow-y: auto;
  max-height: 240px;
}

.ui-select__option {
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-12);
  line-height: 17px;
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}

.ui-select__option:hover,
.ui-select__option:focus,
.ui-select__option:focus-visible {
  background: var(--bg-hover);           /* #2E2D2D */
  outline: none;
}

.ui-select__option[aria-selected="true"] {
  background: var(--bg-hover);
}

.ui-select__option:disabled,
.ui-select__option[aria-disabled="true"] {
  color: var(--text-inactive);
  cursor: not-allowed;
  pointer-events: none;
}

.ui-select__option-icon {
  flex-shrink: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  filter: var(--icon-hint);
}

.ui-select__option:hover .ui-select__option-icon,
.ui-select__option[aria-selected="true"] .ui-select__option-icon {
  filter: var(--icon-accent);
}
/* -----------------------------------------------------------
   Textarea
   Figma: Property 1 = Text Area + Title
   ----------------------------------------------------------- */

.ui-textarea-wrap {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 60px;
  padding: 6px 12px;

  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);

  transition: border-color var(--transition-normal);
}

.ui-textarea-wrap:hover:not(:has(.ui-textarea:disabled)) {
  border-color: var(--border-focus);
}

.ui-textarea-wrap:focus-within {
  border-color: var(--border-focus);
  /* фон НЕ меняется на --bg-focus (как у Dropdown) */
}

.ui-textarea-wrap:has(.ui-textarea:disabled) {
  border-color: var(--border);
}

.ui-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 28px;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  resize: vertical;
  background: transparent;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;
  color: var(--text-secondary);
}

.ui-textarea::placeholder {
  color: var(--text-hint);
}

.ui-textarea:focus,
.ui-textarea:focus-visible {
  color: var(--text-secondary);
}

.ui-textarea:disabled {
  color: var(--text-inactive);
  cursor: not-allowed;
  resize: none;
}

.ui-textarea:disabled::placeholder {
  color: var(--text-inactive);
}

/* -----------------------------------------------------------
   Счётчик символов (0/100)
   ----------------------------------------------------------- */

.ui-textarea__counter {
  align-self: flex-end;
  padding: 0 8px 0 0;
  margin-top: auto;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;
  text-align: right;
  color: var(--text-hint);
}

.ui-textarea-wrap:has(.ui-textarea:disabled) .ui-textarea__counter {
  color: var(--text-inactive);
}

/* -----------------------------------------------------------
   Textarea + Title — .ui-field > .ui-field__label + .ui-textarea-wrap
   Общая высота в макете: 96px (14 label + 4 gap + 60 field)
   ----------------------------------------------------------- */
/* -----------------------------------------------------------
   Password + Title
   Figma: Property 1 = Password, Property 3 = yes
   Обёртка: .ui-field + .ui-field__label + .ui-input--password
   ----------------------------------------------------------- */

.ui-input--password {
  justify-content: space-between;
}

.ui-input--password .ui-input__control,
.ui-input--password input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;

  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-12);
  line-height: 17px;
  color: var(--text-hint);               /* маска ······ в inactive */
}

.ui-input--password .ui-input__control::placeholder,
.ui-input--password input::placeholder {
  color: var(--text-hint);
}

.ui-input--password .ui-input__control:focus,
.ui-input--password input:focus {
  color: var(--text-secondary);          /* маска / текст при focus */
}

.ui-input--password:has(.ui-input__control:disabled),
.ui-input--password:has(input:disabled) {
  color: var(--text-inactive);
}

.ui-input--password:has(.ui-input__control:disabled) .ui-input__control,
.ui-input--password:has(input:disabled) input {
  color: var(--text-inactive);
  cursor: not-allowed;
}

/* Фон при focus — как Dropdown/Textarea, не --bg-focus */
.ui-input--password:focus-within {
  background: var(--bg-secondary);
  border-color: var(--border-focus);
}

/* -----------------------------------------------------------
   Toggle «глаз» — Eye closed / Eye open
   Размер: 14×11
   SVG: 25-eye-off.svg, 26-eye-on.svg
   ----------------------------------------------------------- */

.ui-input__toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.ui-input__toggle:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.ui-input__icon--eye {
  width: 14px;
  height: 11px;
  filter: var(--icon-hint);
  transition: filter var(--transition-normal);
}

.ui-input--password:focus-within .ui-input__icon--eye {
  filter: var(--icon-white);
}

.ui-input--password:has(input:disabled) .ui-input__icon--eye {
  filter: var(--icon-inactive);
}
/* -----------------------------------------------------------
   Validation (предупреждение) — Figma «Validation»
   Гайдлайн: --color-warning / --color-warning-bg
   ----------------------------------------------------------- */

.ui-input.is-warning,
.ui-field.is-warning .ui-input,
.ui-textarea-wrap.is-warning,
.ui-select.is-warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.ui-input.is-warning::placeholder,
.ui-field.is-warning .ui-input::placeholder {
  color: var(--color-warning);
}

.ui-field.is-warning .ui-field__label {
  color: var(--color-warning);
}

/* -----------------------------------------------------------
   Error
   ----------------------------------------------------------- */

.ui-input.is-error,
.ui-field.is-error .ui-input,
.ui-textarea-wrap.is-error,
.ui-select.is-error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

.ui-input.is-error::placeholder,
.ui-field.is-error .ui-input::placeholder {
  color: var(--color-error);
}

.ui-field.is-error .ui-field__label {
  color: var(--color-error);
}

/* -----------------------------------------------------------
   Success
   ----------------------------------------------------------- */

.ui-input.is-success,
.ui-field.is-success .ui-input,
.ui-textarea-wrap.is-success,
.ui-select.is-success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.ui-input.is-success::placeholder,
.ui-field.is-success .ui-input::placeholder {
  color: var(--color-success);
}

.ui-field.is-success .ui-field__label {
  color: var(--color-success);
}

/* Иконки в статусных полях — тот же цвет, что border/text */
.ui-input.is-warning .ui-input__icon,
.ui-input.is-error .ui-input__icon,
.ui-input.is-success .ui-input__icon {
  opacity: 1;
  /* filter: подбирается при внедрении или SVG currentColor */
}

/* -----------------------------------------------------------
   Loading — текст заменяется спиннером, border нейтральный
   ----------------------------------------------------------- */

.ui-input.is-loading,
.ui-field.is-loading .ui-input {
  background: var(--bg-secondary);
  border-color: var(--border-focus);
  color: var(--text-hint);
  pointer-events: none;
}

.ui-input.is-loading input,
.ui-input.is-loading .ui-input__control {
  visibility: hidden;
  width: 0;
  flex: 0;
}

.ui-input__spinner {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-focus);
  border-top-color: var(--text-hint);
  border-radius: 50%;
  animation: ui-input-spin 0.8s linear infinite;
}

@keyframes ui-input-spin {
  to { transform: rotate(360deg); }
}

/* -----------------------------------------------------------
   Внутренний input в обёртке .ui-input
   ----------------------------------------------------------- */

.ui-input > input:not([type="hidden"]),
.ui-input > .ui-input__control,
.ui-input > textarea {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.ui-input > input:focus,
.ui-input > .ui-input__control:focus {
  font-size: var(--text-12);
  line-height: 17px;
}

input.ui-input,
textarea.ui-input {
  display: block;
}

.ui-input--search > input {
  flex: 1;
}

.ui-field__error {
  display: none;
  font-family: var(--font-ui);
  font-size: var(--text-12);
  line-height: 14px;
  color: var(--color-error);
  margin-top: 4px;
}

.ui-field.is-error .ui-field__error {
  display: block;
}

/* Скрытый native select (UiSelect) */
.ui-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ui-select__panel[hidden] {
  display: none !important;
}

/* -----------------------------------------------------------
   Legacy aliases (миграция с desktop-module-input / form-label)
   ----------------------------------------------------------- */

.desktop-input-section,
.ui-field--legacy-spacing {
  margin-bottom: var(--space-24);
  width: 100%;
}

.form-label,
.desktop-input-section > label {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;
  color: var(--text-hint);
  margin-bottom: var(--space-4);
}

.desktop-module-input:not(.ui-select-native) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-10);
  line-height: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  outline: none;
  color: var(--text-secondary);
  transition:
    background var(--transition-normal),
    border-color var(--transition-normal),
    color var(--transition-normal);
}

.desktop-module-input:not(.ui-select-native):hover:not(:disabled):not(:focus) {
  border-color: var(--border-focus);
}

.desktop-module-input:not(.ui-select-native):focus {
  background: var(--bg-focus);
  border-color: var(--border-focus);
  font-size: var(--text-12);
  line-height: 17px;
}

.desktop-module-input:not(.ui-select-native)::placeholder {
  color: var(--text-hint);
}

.desktop-module-input:not(.ui-select-native):disabled {
  color: var(--text-inactive);
  cursor: not-allowed;
}

/* Search / counterparty legacy class names (standalone inputs) */
.search-input,
.counterparty-search-input,
.ui-input--search-field {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  padding: 6px 12px;
  font-family: var(--font-ui);
  font-size: var(--text-10);
  line-height: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  color: var(--text-secondary);
  outline: none;
  transition: border-color var(--transition-normal), background var(--transition-normal);
}

.search-input:focus,
.counterparty-search-input:focus,
.ui-input--search-field:focus {
  background: var(--bg-focus);
  border-color: var(--border-focus);
  font-size: var(--text-12);
  line-height: 17px;
}

.search-input::placeholder,
.counterparty-search-input::placeholder,
.ui-input--search-field::placeholder {
  color: var(--text-hint);
}

/* Chat composer — Input + 2 Icons (referens/02_chat_welcome.png) */
.input-field.ui-composer {
  height: auto;
  min-height: 40px;
  padding: 10px 14px;
  gap: 10px;
  border-radius: var(--radius-8);
  background: var(--bg-secondary);
  align-items: center;
}

.input-field.ui-composer:focus-within {
  border-width: 2px;
  padding: 9px 13px;
  background: var(--bg-focus);
}

.input-field.ui-composer .add-btn img,
.input-field.ui-composer .ui-input__icon--leading {
  width: 10px;
  height: 10px;
  filter: var(--icon-accent);
}

.input-field.ui-composer .send-btn img,
.input-field.ui-composer .ui-input__icon--trailing {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  filter: var(--icon-hint);
  transition: filter var(--transition-normal);
}

.input-field.ui-composer:hover:not(.disabled):not(:focus-within) .send-btn img {
  filter: var(--icon-accent);
}

.input-field.ui-composer:focus-within .send-btn img {
  filter: var(--icon-white);
}

.input-field.ui-composer .text-input {
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  align-self: center;
}

.input-field.ui-composer .text-input::placeholder {
  color: var(--text-inactive);
}

.input-field.ui-composer:focus-within .text-input {
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

/* Welcome project selector aligned with ui-select panel (referens/02_chat_welcome.png) */
.project-selector-btn.ui-select-style {
  height: auto;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-8);
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  background: var(--bg-secondary);
}

.project-dropdown.ui-select-panel-style {
  background: var(--bg-secondary);
  border: 1px solid var(--border-focus);
  border-radius: var(--radius-6);
  box-shadow: var(--shadow-md);
}

.project-option {
  min-height: 40px;
  padding: 6px 12px;
  font-size: var(--text-12);
  line-height: 17px;
  color: var(--text-secondary);
}

.project-option:hover,
.project-option.selected {
  background: var(--bg-hover);
}

/* Counterparty / modal search row */
.counterparty-search-area .search-field,
.modal-body .search-field,
.counterparty-check-modal__search-row {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
}

.counterparty-search-area .search-field .ui-input--search,
.counterparty-search-area .search-field .counterparty-search-wrap,
.modal-body .search-field .ui-input--search {
  flex: 1;
  min-width: 0;
}

.counterparty-search-area .search-field .search-btn,
.modal-body .search-field .search-btn,
.counterparty-check-modal__search-row .search-btn {
  flex-shrink: 0;
}

.knowledge-search .ui-input--search {
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 10px 14px;
  border-radius: var(--radius-8);
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  align-items: center;
}

.knowledge-search .ui-input--search:focus-within,
.knowledge-search .ui-input--search:focus,
.knowledge-search .ui-input--search:focus-visible {
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
}

.knowledge-search .ui-input--search .ui-input__control,
.knowledge-search .ui-input--search .knowledge-search-input {
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
  color: var(--text-primary);
}

.knowledge-search .ui-input--search .ui-input__control:focus,
.knowledge-search .ui-input--search .knowledge-search-input:focus {
  font-size: var(--font-size-14);
  line-height: var(--line-height-normal);
}

.knowledge-search .ui-input--search .ui-input__control::placeholder,
.knowledge-search .ui-input--search .knowledge-search-input::placeholder {
  color: var(--text-inactive);
}