/* Sticky footer layout: header | main (flex) | footer */
html, body { height: 100%; }
body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100svh; }
.nv-main { padding: 32px 0 48px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.nv-link { text-decoration: none; }
.nv-container { display: grid; gap: 28px; }
.nv-hero { text-align: center; margin-bottom: 8px; }
.nv-hero-title { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; }
.nv-hero-sub { color: var(--nv-text-2); margin-top: 6px; }

.nv-exchange { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: start; }
.nv-card-header { padding: 18px 18px 0; }
.nv-card-title { margin: 0; font-size: 22px; }
/* .nv-field-group { padding: 18px; } */
.nv-field-head { display:flex; justify-content: space-between; align-items:center; margin-bottom: 8px; }
.nv-label { color: var(--nv-text-2); font-weight: 600; }
.nv-token-price { color: var(--nv-text-2); font-size: 14px; }
.nv-input-row { display:flex; gap: 12px; align-items:center; }
.nv-input-row.nv-address-row { --nv-row-h: 48px; }
.nv-amount { flex: 1; background: var(--nv-card-2); border: 1px solid var(--nv-border); color: var(--nv-text); padding: 18px; border-radius: 14px; font-size: 18px; }
.nv-token-select { display:flex; align-items:center; gap: 10px; background: var(--nv-card-2); border: 1px solid var(--nv-border); padding: 10px 12px; border-radius: 14px; cursor: pointer; transition: transform .12s ease, box-shadow .2s ease, border-color .15s ease, color .15s ease; }
.nv-token-select:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.28); border-color: #8b5cf6; color: #fff; text-decoration: none; }
.nv-token-icon img { width: 28px; height: 28px; border-radius: 50%; }
.nv-token-info { display:flex; flex-direction: column; line-height: 1.1; }
.nv-dropdown { opacity: .7; }
/* Обертка контента селектора (иконка + текст) слева, стрелка справа */
.nv-token-wrapper { display:flex; align-items:center; gap:10px; flex: 1 1 auto; min-width: 0; }
.nv-token-select .nv-dropdown { margin-left: auto; flex: 0 0 auto; }
.nv-token-info .token-symbol { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 100%; }
.nv-reverse { display:flex; justify-content:center; }
.nv-reverse-btn { background: transparent; border: 1px dashed var(--nv-border); color: var(--nv-text-2); border-radius: 12px; padding: 8px 10px; transition: transform .12s ease, box-shadow .2s ease, border-color .15s ease, color .15s ease; }
.nv-reverse-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.28); border-color: #8b5cf6; color: #fff; text-decoration: none; }
.nv-swap-icon { width: 22px; height: 22px; }
.nv-recipient .nv-input { background: var(--nv-card-2); }
.nv-hint { color: var(--nv-text-2); font-size: 14px; margin-left: 10px; }
.nv-btn-icon { background: var(--nv-card-2); border: 1px solid var(--nv-border); color: var(--nv-text-2); padding: 12px; border-radius: 12px; transition: transform .12s ease, box-shadow .2s ease, border-color .15s ease, color .15s ease; }
.nv-address-row .nv-btn-icon { height: var(--nv-row-h); aspect-ratio: 1 / 1; display:inline-flex; align-items:center; justify-content:center; }
.nv-btn-icon:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.28); border-color: #8b5cf6; color: #fff; text-decoration: none; }
/* Плавное скрытие кнопки вставки в строке адреса */
.nv-address-row .nv-btn-icon { transition: opacity .2s ease, transform .2s ease; }
.nv-address-row .nv-btn-icon.is-hidden { opacity: 0; transform: scale(0.96); pointer-events: none; }
.nv-valid { margin-top: 8px; color: var(--nv-success); display:flex; gap:8px; align-items:center; }
.nv-info { color: var(--nv-text-2); }
.nv-rate { display:flex; gap: 10px; align-items:center; }
.nv-details { display:grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.nv-detail { display:flex; justify-content: space-between; border: 1px dashed var(--nv-border); padding: 10px 12px; border-radius: 12px; }

.nv-aside-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.nv-aside { position: sticky; top: 16px; height: fit-content; }
.nv-tx-list { display: grid; gap: 10px; }
.nv-tx { display:grid; grid-template-columns: 32px 1fr 24px; gap: 10px; align-items: center; background: var(--nv-surface); border:1px solid var(--nv-border); padding: 12px; border-radius: 14px; cursor: pointer; transition: transform .12s ease; }
.nv-tx:hover { transform: translateY(-1px); }
.nv-tx-icon { display:flex; align-items:center; justify-content:center; color: var(--nv-text-2); }
.nv-tx-body { display:flex; flex-direction: column; gap: 4px; }
.nv-tx-amount { display:flex; gap: 6px; align-items:center; color: var(--nv-text-2); }
.nv-val { color: var(--nv-text); font-weight: 600; }
.nv-tx-time { color: var(--nv-text-2); font-size: 12px; }
.nv-st-completed { color: var(--nv-success); }
.nv-st-processing { color: var(--nv-accent-2); }
.nv-st-pending { color: var(--nv-text-2); }
.nv-empty { color: var(--nv-text-2); border:1px dashed var(--nv-border); padding: 16px; border-radius: 12px; text-align:center; }

@media (max-width: 992px) { .nv-exchange { grid-template-columns: 1fr; } .nv-aside { display: none; } }

@media (max-width: 576px) {
	.nv-main { padding: 24px 0 40px; }
	.nv-input-row { flex-direction: column; align-items: stretch; }
	.nv-address-row { flex-direction: row; } 
	.nv-token-select { width: 100%; justify-content: space-between; }
	.nv-amount { font-size: 16px; padding: 16px; }
	.nv-details { grid-template-columns: 1fr; }
	.nv-reverse { padding: 6px 0; }
	.nv-reverse-btn { width: 100%; }
	.nv-card-title { font-size: 20px; }
	.nv-hero-title { font-size: 32px; }
}

/* Fallback: скрывать шапку истории на узких экранах, если history.css не подключён */
@media (max-width: 768px){
  .nv-table .nv-thead{ display: none !important; }
}

/* Общие состояния показа/скрытия (используются BitflowUtils.showElement/hideElement) */
.hide { display: none !important; }
.show { display: block !important; }

/* Валидация адреса: визуальная подсветка */
.address-input.invalid { border-color: var(--nv-error); box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.address-input.valid { border-color: var(--nv-success); box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
/* Сообщение "Valid address" должно быть спрятано по умолчанию, пока не пройдена валидация */
.nv-valid.hide { display: none !important; }

/* Иконка валидации внутри инпута адреса */
.nv-address-row { align-items: stretch; }
.nv-address-row .nv-input { height: var(--nv-row-h); display:flex; align-items:center; }
.nv-input-wrap { position: relative; width: 100%; }
.address-valid-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--nv-success); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.address-input.valid ~ .address-valid-icon { opacity: 1; transform: translateY(-50%) scale(1); }
.address-input.invalid ~ .address-valid-icon { opacity: 0; }
.address-input { padding-right: 42px !important; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* Фокус стайл для amount-input как hover у nv-token-select */
.amount-input:focus { outline: none; border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.18); }

/* Скрыть стрелочки у числовых инпутов */
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Firefox */
input[type=number] { appearance: textfield; -moz-appearance: textfield; }