/* ========== ПОЛЕ ВВОДА ========== */
.input-area {
  position: sticky; bottom: 0; left: 0; right: 0;
  margin: auto 32px 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; z-index: 10;
  background: var(--bg-base);
}

.input-wrapper {
  display: flex; align-items: flex-end; gap: 4px;
  background: var(--bg-input); border: 1.0px solid var(--border-l2);
  border-radius: 20px; padding: 16px 12px;
  width: 100%; max-width: var(--message-max-width);
  transition: all var(--transition-duration) var(--ease-in-out); box-sizing: border-box;
}
[data-theme="light"] .input-wrapper { border-width: 1.5px; }

.input-wrapper:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15); }
[data-theme="light"] .input-wrapper:focus-within { box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2); }

.input-wrapper.art-focus:focus-within { border-color: #f3d779; box-shadow: 0 0 0 3px rgba(243, 215, 121, 0.2); }
[data-theme="light"] .input-wrapper.art-focus:focus-within { box-shadow: 0 0 0 3px rgba(243, 215, 121, 0.25); }

.input-wrapper.video-focus:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); }
[data-theme="light"] .input-wrapper.video-focus:focus-within { box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25); }

.input-wrapper textarea {
  flex: 1; background: none; border: none; color: var(--text-primary);
  font-size: 15px; line-height: 24px; resize: none; outline: none; padding: 12px 0;
  font-family: var(--font-family); min-height: 56px; max-height: 400px;
  overflow-y: auto; caret-color: var(--accent-text); align-self: center;
}
.input-wrapper textarea::placeholder { color: var(--text-caption); }

.input-action-btn {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
  padding: 6px; border-radius: 50%; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--transition-duration-fast) var(--ease-in-out);
  align-self: flex-end; margin-bottom: 6px;
}
.input-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-send {
  background: linear-gradient(135deg, #0071e3, #409cff);
  border: none; color: #fff;
  width: 32px; height: 32px; border-radius: 50%;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: all var(--transition-duration) var(--ease-in-out);
  align-self: flex-end; margin-bottom: 6px;
  box-shadow: 0 2px 8px rgba(0, 113, 227, 0.3);
}
.btn-send:not(:disabled):hover {
  background: linear-gradient(135deg, #0077ed, #409cff);
  box-shadow: 0 8px 24px rgba(0, 113, 227, 0.5), 0 0 30px rgba(0, 113, 227, 0.2);
  transform: translateY(-1px) scale(1.05);
}
.btn-send:active { transform: scale(0.95); }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }

.input-hint { text-align: center; color: var(--text-tertiary); font-size: 11px; line-height: 16px; margin-top: 6px; }

/* ========== КНОПКА СКРОЛЛА ВНИЗ (позиция через CSS-переменную) ========== */
:root {
  --scroll-btn-right: 190px; /* ← МЕНЯЙ ЗДЕСЬ: 16px = почти у правого края, 50px = левее */
}

.scroll-to-bottom {
  position: absolute;
  bottom: calc(100% + 18px);
  right: var(--scroll-btn-right);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-input);
  border: 1px solid var(--border-l2);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 11;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.scroll-to-bottom.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-to-bottom:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
  transform: translateY(-2px);
}