/* ==========================================================================
   Экраны
   ========================================================================== */

/* Общий каркас экрана */
.scr-head {
  position: relative;
  z-index: 30;
  padding: 58px 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-height: 0;
}
.scr-head__title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scr-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px calc(20px + var(--safe-b));
}
.scr-foot { flex: none; padding: 10px 16px calc(22px + var(--safe-b)); }

/* --------------------------------------------------------------------------
   Заставка
   -------------------------------------------------------------------------- */

.splash {
  justify-content: space-between;
  padding: 0 24px calc(26px + var(--safe-b));
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 12%, #1A1A1D 0%, #000 62%);
}
.splash__top {
  padding-top: 96px;
  padding-top: clamp(54px, 12cqh, 108px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.splash__top::-webkit-scrollbar { display: none; }
.splash__logo {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 21px;
  font-size: clamp(18px, 2.5cqh, 22px);
  font-weight: 700;
  letter-spacing: .26em;
  color: #fff;
}
.splash__logo i {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .10), 0 0 40px rgba(255, 255, 255, .4);
  display: block;
  flex: none;
}
.splash__claim {
  margin-top: 28px;
  margin-top: clamp(18px, 3.4cqh, 34px);
  font-size: 36px;
  font-size: clamp(28px, 4.5cqh, 39px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  color: #fff;
}
.splash__claim b { font-weight: 600; color: var(--on-dark-3); }
.splash__note {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--on-dark-2);
  max-width: 300px;
}

.splash__art {
  position: absolute;
  left: -60px; right: -60px;
  top: 44%; bottom: 20%;
  pointer-events: none;
  opacity: .9;
}
.splash__art svg { width: 100%; height: 100%; }

.splash__stats {
  display: flex;
  gap: 18px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.splash__stat { min-width: 0; }
.splash__stat b {
  display: block;
  font-size: 22px;
  font-size: clamp(19px, 2.8cqh, 24px);
  font-weight: 600;
  letter-spacing: -.04em;
  color: #fff;
  white-space: nowrap;
}
.splash__stat span { font-size: 11px; color: var(--on-dark-3); letter-spacing: .01em; }

/* --------------------------------------------------------------------------
   Вход
   -------------------------------------------------------------------------- */

.auth { padding: 0 20px calc(24px + var(--safe-b)); overflow: hidden; }
.auth__top {
  padding-top: 88px;
  padding-top: clamp(54px, 6.2cqh, 92px);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.auth__top::-webkit-scrollbar { display: none; }
.auth__field {
  margin-top: 22px;
  margin-top: clamp(12px, 2.6cqh, 26px);
}
.code {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  margin-top: clamp(12px, 2.6cqh, 22px);
}
.code i {
  flex: 1 1 0;
  min-width: 0;
  height: 58px;
  height: clamp(48px, 7cqh, 62px);
  border-radius: var(--r-md);
  background: var(--fill-dark-1);
  display: grid;
  place-items: center;
  font-size: 23px;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.02em;
  transition: background var(--t-fast);
}
.code i.is-filled { background: var(--fill-dark-2); }

.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  flex: none;
}
.keypad button {
  height: 55px;
  height: clamp(44px, 6.5cqh, 58px);
  border-radius: var(--r-md);
  background: var(--fill-dark-1);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #fff;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-out);
}
.keypad button:active { transform: scale(.95); background: var(--fill-dark-2); }
.keypad button.is-flat { background: transparent; }
.keypad button svg { width: 20px; height: 20px; margin: 0 auto; }

.auth__legal {
  margin-top: 10px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--on-dark-3);
}

/* --------------------------------------------------------------------------
   Главный экран (карта)
   -------------------------------------------------------------------------- */

.home { position: relative; }
.home__map { position: absolute; inset: 0; }
.home__top {
  position: absolute;
  z-index: 30;
  top: 56px; left: 14px; right: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* подложка по ширине кнопок, а не на всю строку */
.mode {
  display: inline-flex;
  flex: none;
  margin: 0 auto;
  padding: 4px;
  border-radius: var(--r-pill);
  background: rgba(19, 19, 21, .84);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  min-width: 0;
}
.mode button {
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--on-dark-2);
  white-space: nowrap;
  transition: background var(--t-base) var(--e-out), color var(--t-base);
}
.mode button.is-on { background: #fff; color: var(--ink); }

.home__panel { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; }
.home__panel > div { padding: 0 10px calc(18px + var(--safe-b)); }

/* Плашка «700 Meter» из референса */
.pill-panel {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 13px 13px 16px;
  border-radius: var(--r-xl);
  background: rgba(22, 22, 25, .92);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
}
.pill-panel__big {
  font-size: 28px;
  font-size: clamp(24px, 3.5cqh, 30px);
  font-weight: 600;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}
.pill-panel__cap { margin-top: 3px; font-size: 11px; color: var(--on-dark-3); letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill-panel .metas { flex: none; }
.pill-panel .sq { width: 40px; height: 40px; border-radius: 13px; background: var(--fill-dark-2); }

.search-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 58px;
  height: clamp(52px, 7cqh, 60px);
  padding: 0 7px 0 16px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .34);
  transition: transform var(--t-fast) var(--e-out);
}
.search-btn:active { transform: scale(.985); }
.search-btn > span:first-child { flex: none; display: grid; place-items: center; }
.search-btn > span:first-child svg { width: 18px; height: 18px; }
.search-btn__t { font-size: 16px; font-weight: 550; letter-spacing: -.02em; flex: 1 1 auto; min-width: 0; }
.search-btn__go {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid; place-items: center;
  flex: none;
}
.search-btn__go svg { width: 17px; height: 17px; }

.quick { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }

/* --------------------------------------------------------------------------
   Указание точки на карте
   -------------------------------------------------------------------------- */

.pickrow { display: flex; gap: 8px; margin-top: 10px; }
.pickrow .chip { background: var(--fill-dark-2); }

.pick { position: relative; }
.pick__top {
  position: absolute;
  z-index: 30;
  top: 56px; left: 14px; right: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pick__title {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: var(--r-pill);
  background: rgba(19, 19, 21, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.pick__panel { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; }
.pick__panel > .sheet { margin-bottom: calc(12px + var(--safe-b)); }

/* --------------------------------------------------------------------------
   Маршрут
   -------------------------------------------------------------------------- */

.route { position: relative; }
.route__map { position: absolute; inset: 0; }
.route__panel {
  position: absolute;
  z-index: 30;
  left: 0; right: 0; bottom: 0;
  max-height: 84%;
  display: flex;
  flex-direction: column;
}
.route__panel > .sheet { min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.route__fields { position: relative; display: flex; flex-direction: column; gap: 8px; }
.route__swap {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--panel-3);
  color: #fff;
  display: grid; place-items: center;
  z-index: 2;
  transition: transform var(--t-base) var(--e-out);
}
.route__swap:active { transform: translateY(-50%) rotate(180deg) scale(.9); }
.route__swap svg { width: 16px; height: 16px; }

.suggest {
  margin-top: 6px;
  overflow-y: auto;
  max-height: 220px;
  max-height: clamp(120px, 26cqh, 232px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.seg { display: flex; gap: 5px; padding: 4px; border-radius: var(--r-pill); background: var(--fill-dark-1); }
.seg button {
  flex: 1 1 0;
  min-width: 0;
  height: 36px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 550;
  color: var(--on-dark-2);
  white-space: nowrap;
  transition: background var(--t-base) var(--e-out), color var(--t-base);
}
.seg button.is-on { background: #fff; color: var(--ink); }

/* --------------------------------------------------------------------------
   Поиск / Ближайшие
   -------------------------------------------------------------------------- */

.results { position: relative; }
.results__map { position: absolute; inset: 0; }
.results__head { position: absolute; z-index: 30; top: 56px; left: 16px; right: 16px; }
.results__title {
  margin-top: 18px;
  font-size: 30px;
  font-size: clamp(25px, 3.8cqh, 32px);
  font-weight: 600;
  letter-spacing: -.04em;
  color: #fff;
}
.results__sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--on-dark-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.results__bottom { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; padding-bottom: calc(18px + var(--safe-b)); }
.results__filters { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; }
.results__cta { padding: 12px 16px 0; }

/* --------------------------------------------------------------------------
   Карточка водителя (детально)
   -------------------------------------------------------------------------- */

.dcard { position: relative; }
.dcard__hero {
  position: relative;
  height: 200px;
  height: clamp(150px, 24cqh, 206px);
  border-radius: var(--r-2xl);
  background: linear-gradient(160deg, #F7F7F8 0%, #E7E7EA 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
  flex: none;
}
.dcard__hero svg.car {
  width: auto;
  height: 84%;
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .26));
}
.dcard__plate {
  position: absolute;
  left: 14px; bottom: 14px;
  padding: 7px 11px;
  border-radius: 10px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  color: var(--ink);
  box-shadow: var(--sh-1);
  white-space: nowrap;
}
.dcard__eco {
  position: absolute;
  right: 14px; top: 14px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.dcard__eco svg { width: 12px; height: 12px; }

.dcard__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.025em;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.dcard__name .nowrap { min-width: 0; }
.dcard__ok { width: 15px; height: 15px; flex: none; color: var(--ink); display: block; }
.dcard__car { font-size: 12.5px; color: var(--on-light-2); margin-top: 2px; }
.dcard__rate { text-align: right; flex: none; }
.dcard__rate b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -.04em; }
.dcard__rate span { font-size: 11px; color: var(--on-light-2); }

.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.price-row b { font-size: 30px; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; }

.pay-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: var(--on-light-2);
}
.pay-line + .pay-line { margin-top: 8px; }
.pay-line span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-line span:last-child { flex: none; }

.timeline { display: flex; flex-direction: column; }
.tl { display: flex; gap: 13px; position: relative; padding-bottom: 16px; }
.tl:last-child { padding-bottom: 0; }
.tl__dot { position: relative; width: 10px; flex: none; display: flex; justify-content: center; padding-top: 5px; }
.tl__dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); display: block; z-index: 1; }
.tl__dot i.ring { background: transparent; box-shadow: inset 0 0 0 2.5px var(--ink); }
.tl:not(:last-child) .tl__dot::after {
  content: '';
  position: absolute;
  top: 16px; bottom: -4px;
  width: 2px;
  border-radius: 1px;
  background: var(--fill-light-2);
}
.theme-dark .tl__dot i { background: #fff; }
.theme-dark .tl__dot i.ring { background: transparent; box-shadow: inset 0 0 0 2.5px #fff; }
.theme-dark .tl:not(:last-child) .tl__dot::after { background: var(--fill-dark-2); }
.tl__t { font-size: 14px; font-weight: 550; letter-spacing: -.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl__s { margin-top: 2px; font-size: 12px; color: var(--on-light-2); }
.theme-dark .tl__s { color: var(--on-dark-2); }
.tl__time { margin-left: auto; padding-left: 8px; font-size: 12.5px; font-weight: 600; opacity: .7; flex: none; }

/* --------------------------------------------------------------------------
   Поездка (тёмный экран с картой)
   -------------------------------------------------------------------------- */

.trip { position: relative; }
.trip__map { position: absolute; inset: 0; }
.trip__top { position: absolute; z-index: 30; top: 56px; left: 14px; right: 14px; display: flex; gap: 8px; }
.trip__status {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: rgba(19, 19, 21, .88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font-size: 13px;
  font-weight: 550;
  color: #fff;
}
.trip__status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trip__status i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--positive);
  flex: none;
  animation: blink 1.6s var(--e-in-out) infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.trip__panel { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; }

.eta-row__big {
  font-size: 40px;
  font-size: clamp(32px, 5.2cqh, 46px);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}
.eta-row__big small { font-size: .38em; opacity: .5; margin-left: 3px; letter-spacing: -.02em; }

.progress { height: 4px; border-radius: 2px; background: var(--fill-dark-2); overflow: hidden; margin-top: 13px; }
.progress i { display: block; height: 100%; width: 0; border-radius: 2px; background: #fff; transition: width 300ms linear; }

.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 14px; }
.act {
  height: 60px;
  height: clamp(52px, 7.2cqh, 62px);
  border-radius: var(--r-md);
  background: var(--fill-dark-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 2px;
  font-size: 10px;
  font-weight: 550;
  letter-spacing: -.01em;
  color: var(--on-dark-2);
  white-space: nowrap;
  overflow: hidden;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-out);
}
.act:active { transform: scale(.95); }
.act svg { width: 17px; height: 17px; color: #fff; flex: none; }
.act--danger svg { color: #FF6B6B; }

/* --------------------------------------------------------------------------
   В пути (светлый экран — панель 3 из референса)
   -------------------------------------------------------------------------- */

.intrip { background: var(--paper); color: var(--ink); overflow: hidden; }
.intrip__car {
  position: absolute;
  top: 38px;
  right: -30px;
  width: auto;
  height: 300px;
  height: clamp(190px, 36cqh, 310px);
  pointer-events: none;
  filter: drop-shadow(0 30px 46px rgba(0, 0, 0, .22));
  animation: car-float 6s var(--e-in-out) infinite;
}
.intrip__car svg { height: 100%; width: auto; }
@keyframes car-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.intrip__head { position: relative; z-index: 2; padding: 58px 20px 0; flex: none; }
.intrip__dest {
  margin-top: 4px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.035em;
  max-width: 62%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intrip__stats {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding: 0 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  gap: clamp(10px, 2.4cqh, 22px);
  min-height: 0;
}
.intrip__panel {
  position: relative;
  z-index: 2;
  flex: none;
  margin: 0 10px calc(10px + var(--safe-b));
  border-radius: var(--r-2xl);
  background: var(--ink);
  color: #fff;
  padding: 14px;
}

.mini-map {
  position: relative;
  height: 88px;
  height: clamp(58px, 10.5cqh, 92px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #000;
}

/* --------------------------------------------------------------------------
   Оценка
   -------------------------------------------------------------------------- */

.rate {
  padding: 0 20px calc(24px + var(--safe-b));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rate__top { padding-top: 72px; padding-top: clamp(46px, 9cqh, 80px); text-align: center; flex: none; }
.rate__check {
  width: 70px; height: 70px;
  width: clamp(56px, 8.4cqh, 74px);
  height: clamp(56px, 8.4cqh, 74px);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  animation: pop 620ms var(--e-out) both;
}
.rate__check svg { width: 44%; height: 44%; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.rate .stars { justify-content: center; margin: 20px 0 6px; }

.tips { display: flex; gap: 7px; justify-content: center; margin-top: 6px; }
.tips button {
  flex: 1 1 0;
  min-width: 0;
  height: 46px;
  height: clamp(40px, 5.4cqh, 46px);
  border-radius: var(--r-md);
  background: var(--fill-dark-1);
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  transition: background var(--t-fast), transform var(--t-fast) var(--e-out);
}
.tips button.is-on { background: #fff; color: var(--ink); }
.tips button:active { transform: scale(.95); }

.praise { display: flex; flex-wrap: wrap; gap: 7px; }

/* --------------------------------------------------------------------------
   Профиль
   -------------------------------------------------------------------------- */

.profile__hero { padding: 62px 16px 16px; display: flex; align-items: center; gap: 12px; flex: none; }
.profile__name {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.03em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  border-radius: var(--r-lg);
  background: var(--fill-dark-1);
  padding: 14px;
  min-width: 0;
}
.tile b {
  display: block;
  font-size: 24px;
  font-size: clamp(20px, 3cqh, 26px);
  font-weight: 600;
  letter-spacing: -.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tile span { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.3; color: var(--on-dark-2); }
.theme-light .tile span { color: var(--on-light-2); }

.wallet-card {
  border-radius: var(--r-xl);
  background: linear-gradient(150deg, #FFFFFF 0%, #E9E9EC 100%);
  color: var(--ink);
  padding: 17px;
  position: relative;
  overflow: hidden;
}
.wallet-card::after {
  content: '';
  position: absolute;
  right: -40px; top: -60px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(10, 10, 11, .04);
}
.wallet-card__sum {
  font-size: 31px;
  font-size: clamp(26px, 3.9cqh, 34px);
  font-weight: 600;
  letter-spacing: -.04em;
  margin-top: 2px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Чат
   -------------------------------------------------------------------------- */

.chat__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.chat__body {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  gap: 8px;
  padding: 12px 16px 16px;
}
.msg {
  max-width: 80%;
  padding: 10px 13px;
  border-radius: 20px;
  font-size: 14px;
  line-height: 1.35;
  letter-spacing: -.01em;
  word-break: break-word;
  animation: fade-up 380ms var(--e-out) both;
}
.msg--in  { align-self: flex-start; background: var(--fill-dark-1); color: #fff; border-bottom-left-radius: 7px; }
.msg--out { align-self: flex-end; background: #fff; color: var(--ink); border-bottom-right-radius: 7px; }
.msg__time { display: block; margin-top: 4px; font-size: 10px; opacity: .45; }

.chat__quick { display: flex; gap: 8px; padding: 0 16px 10px; overflow-x: auto; flex: none; }
.chat__input { display: flex; gap: 8px; padding: 0 14px calc(20px + var(--safe-b)); flex: none; }
.chat__send {
  width: 54px;
  height: 54px;
  height: clamp(48px, 6.4cqh, 56px);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
  transition: transform var(--t-fast) var(--e-out);
}
.chat__send:active { transform: scale(.92); }
.chat__send svg { width: 19px; height: 19px; }

.typing { display: flex; gap: 4px; align-items: center; padding: 14px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--on-dark-3); animation: typing 1.2s var(--e-in-out) infinite; }
.typing i:nth-child(2) { animation-delay: .16s; }
.typing i:nth-child(3) { animation-delay: .32s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* --------------------------------------------------------------------------
   Режим водителя
   -------------------------------------------------------------------------- */

.req {
  border-radius: var(--r-2xl);
  background: var(--panel);
  padding: 16px;
  box-shadow: var(--sh-dark);
  animation: fade-up 460ms var(--e-out) both;
}
.req__timer { height: 3px; border-radius: 2px; background: var(--fill-dark-2); overflow: hidden; margin: 13px 0; }
.req__timer i { display: block; height: 100%; background: #fff; width: 100%; animation: countdown 12s linear forwards; }
@keyframes countdown { to { width: 0%; } }

.earn {
  border-radius: var(--r-xl);
  background: var(--paper);
  color: var(--ink);
  padding: 16px;
}
.earn__sum {
  font-size: 29px;
  font-size: clamp(24px, 3.7cqh, 32px);
  font-weight: 600;
  letter-spacing: -.04em;
  margin-top: 4px;
}
.bars { display: flex; align-items: flex-end; gap: 6px; height: 60px; height: clamp(42px, 7.2cqh, 64px); margin-top: 12px; }
.bars i {
  flex: 1 1 0;
  min-width: 0;
  border-radius: 4px 4px 2px 2px;
  background: var(--fill-light-2);
  animation: grow 700ms var(--e-out) both;
  transform-origin: bottom;
}
.bars i.is-on { background: var(--ink); }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* --------------------------------------------------------------------------
   Пустые состояния
   -------------------------------------------------------------------------- */

.empty { padding: 56px 20px; text-align: center; }
.empty__ic {
  width: 62px; height: 62px;
  border-radius: 22px;
  background: var(--fill-dark-1);
  display: grid; place-items: center;
  margin: 0 auto 15px;
}
.empty__ic svg { width: 24px; height: 24px; opacity: .5; }

/* --------------------------------------------------------------------------
   Низкие экраны: убираем второстепенное, чтобы ничего не наезжало
   (запрос к контейнеру — реагирует именно на экран приложения)
   -------------------------------------------------------------------------- */

@container app (max-height: 680px) {
  .auth__legal { display: none; }
  .keypad { gap: 7px; padding-top: 10px; }
  .splash__note { margin-top: 12px; }
  .splash__stats { gap: 14px; margin-bottom: 14px; }
  .scr-head { padding-top: 54px; }
  .home__top, .trip__top, .results__head { top: 52px; }
  .profile__hero { padding-top: 56px; }
  .intrip__head { padding-top: 54px; }
  .actions { margin-top: 10px; }
  .rate .stars { margin: 14px 0 4px; }
  .stars svg { width: 28px; height: 28px; }
  .intrip__stats { gap: 9px; padding-bottom: 10px; }
  .intrip__panel { padding: 12px; margin-bottom: calc(8px + var(--safe-b)); }
  .mini-map { height: 54px; }
  .intrip__dest { font-size: 18px; }
}

@container app (max-height: 580px) {
  .splash__note { display: none; }
  .auth__top .h-sub { display: none; }
  .rate__check { display: none; }
}

/* Телефон в альбомной ориентации */
@container app (max-height: 480px) {
  .intrip__car { display: none; }
  .intrip__stats { flex-direction: row; align-items: flex-end; gap: 14px; }
  .intrip__stats .stat { flex: 1 1 0; min-width: 0; }
  .intrip__stats .stat__value { font-size: 24px; letter-spacing: -.035em; }
  .intrip__stats .stat__label { font-size: 10.5px; }
  .intrip__dest { max-width: 100%; font-size: 17px; }
  .mini-map { height: 46px; }
  .splash__stats { margin-bottom: 10px; }
}

/* --------------------------------------------------------------------------
   Очень узкие экраны
   -------------------------------------------------------------------------- */

@media (max-width: 359px) {
  .scr-body, .results__filters, .rides, .chat__body { padding-left: 13px; padding-right: 13px; }
  .scr-head { padding-left: 13px; padding-right: 13px; }
  .home__top, .trip__top { left: 11px; right: 11px; }
  .results__head { left: 13px; right: 13px; }
  .ride { width: 162px; }
  .act { font-size: 9.5px; }
  .mode button { padding: 0 11px; font-size: 12.5px; }
}