/* ===== Damu NPS — CLEAN CSS (только под .damu-nps-*) ===== */

/* настройка отступа над чат-виджетом (можешь подправить число) */
:root { --nps-bottom-offset: 16px; }

/* слой */
.damu-nps-root{
  position: fixed; left: 0; right: 0;
  bottom: calc(var(--nps-bottom-offset) + env(safe-area-inset-bottom, 0px));
  z-index: 2147483000;
  display: flex; justify-content: center;
  pointer-events: none;
}

/* карточка-виджет */
.damu-nps{
  pointer-events: auto;
  position: relative;
  max-width: 860px; width: 100%; margin: 0 12px;
  padding: 22px 24px 20px;
  border-radius: 20px; background: #fff;
  border: 1px solid #e6eaf0;
  box-shadow: 0 16px 36px rgba(15,23,42,.14), 0 1px 0 rgba(15,23,42,.04) inset;
  display: none; flex-direction: column; gap: 16px;
}
.damu-nps.is-visible{ display:flex; }

/* заголовок */
.damu-nps__label{
  margin: 0 40px 4px 0;
  font: 700 20px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color: #0f172a;
}

/* крестик */
.damu-nps__close{
  position: absolute; right: 12px; top: 12px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 10px; background: #f1f5f9; color: #475569;
  border: 1px solid #e2e8f0; transition: .15s;
}
.damu-nps__close:hover{ background:#e9eff7; transform: translateY(-1px); }
.damu-nps__close:focus{ outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,.22); }

/* шкала 0–10 */
.damu-nps__scale{
  display: grid;
  grid-template-columns: repeat(11, minmax(0,1fr));
  gap: 10px;
  align-items: center;
  overflow: visible;
}
.damu-nps__btn{
  min-width: 46px; height: 46px; border-radius: 14px;
  border: 1px solid #dbe2ea; background: #fff; color:#0f172a;
  font: 600 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  text-align: center;
  transition: border-color .15s, box-shadow .15s, transform .08s, background .15s;
  touch-action: manipulation;
}
.damu-nps__btn:hover{ border-color:#94a3b8; }
.damu-nps__btn:active{ transform: translateY(1px); }
.damu-nps__btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(14,165,233,.18); }
.damu-nps__btn.is-picked{
  background:#138551; color:#fff; border-color:#138551;
  box-shadow:0 0 0 4px rgba(19,133,81,.16);
}

/* подписи под шкалой */
.damu-nps__ends{
  display:flex; justify-content:space-between; margin-top:-2px;
  font: 12px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:#55627a;
}

/* блок follow (комментарий) — по умолчанию скрыт */
.damu-nps__follow{ display: none !important; }
.damu-nps__follow.is-visible{
  display: grid !important;
  grid-template-columns: 1fr auto auto;   /* textarea | skip | send */
  gap: 12px; align-items: center;
}

/* textarea */
.damu-nps__ta{
  min-height:58px; max-height:220px; resize:vertical;
  border-radius:12px; border:1px solid #dbe2ea;
  background:
          linear-gradient(#fff,#fff) padding-box,
          linear-gradient(180deg,#f8fafc,#eef2f7) border-box;
  padding:12px 14px;
  font:400 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  color:#0f172a;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.damu-nps__ta::placeholder{ color:#8a99ad; opacity:1; }
.damu-nps__ta:focus{
  outline:none; border-color:#0ea5e9;
  box-shadow:0 0 0 3px rgba(14,165,233,.18);
  background:
          linear-gradient(#fff,#fff) padding-box,
          linear-gradient(180deg,#e6f6ff,#f1fbff) border-box;
}

/* кнопки действий */
.damu-nps__action{
  height:50px; padding:0 18px; border-radius:12px;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  transition: background .15s, border-color .15s, transform .08s, box-shadow .15s;
  white-space:nowrap; text-align:center;
}
.damu-nps__action:hover{ background:#f8fafc; border-color:#cbd5e1; }
.damu-nps__action:focus{ outline:none; box-shadow:0 0 0 3px rgba(14,165,233,.18); }
.damu-nps__action--ok{
  background:#138551; color:#fff; border-color:#138551; padding:0 22px;
}
.damu-nps__action--ok:hover{ filter:brightness(1.05); }
.damu-nps__action--ok:disabled{ opacity:.65; cursor:not-allowed; }

/* пилюля (если используешь) */
.damu-nps-pill{
  position: fixed; right: 16px;
  bottom: calc(var(--nps-bottom-offset) + 16px + env(safe-area-inset-bottom, 0px));
  background:#002c60; color:#fff; padding:10px 14px;
  border-radius:999px; font:700 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  display:none; z-index:2147483000;
}
.damu-nps-pill.is-visible{ display:inline-flex; align-items:center; gap:8px; }

/* ===== Мобилка ===== */
@media (max-width: 480px){
  /* bottom-sheet, две строки шкалы */
  .damu-nps{
    max-width: 100vw;
    padding: 16px 14px 14px;
    border-radius: 16px 16px 0 0;
    gap: 12px;
  }
  .damu-nps__label{ font-size:18px; margin-right:36px; }

  .damu-nps__scale{
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 6px;
  }
  .damu-nps__btn{ min-width: 0; height: 40px; border-radius: 10px; font-size: 15px; }
  .damu-nps__ends{ font-size: 11.5px; }

  .damu-nps__follow.is-visible{ grid-template-columns: 1fr; }
  .damu-nps__action, .damu-nps__action--ok{ width:100%; height:48px; }

  .damu-nps__close{ top:8px; right:8px; width:30px; height:30px; }
}

/* очень узкие экраны — запасной горизонтальный скролл */
@media (max-width: 340px){
  .damu-nps__scale{
    overflow-x: auto; grid-auto-columns: 50px; grid-auto-flow: column;
  }
}