/* pythonchik.css — стилі маскота «Пайтончик».
   Усі селектори префіксовані .pychik, щоб не перетинатися з наявними.
   Кольори беруться зі змінних теми (--md-*, --nu-*), тому працюють
   і в класичній темі, і в body[data-style="new"]. */

.pychik {
  --pychik-head: #4b8bbe;
  --pychik-head-dark: #34648f;
  --pychik-accent: #ffd43b;
  --pychik-z: 1500;
  position: static;
}

/* ---------- Кнопка-запускач ---------- */
.pychik-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--pychik-z);
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: var(--md-primary, #6750a4);
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, .55), var(--md-elev2, none);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform .18s ease;
}
.pychik-fab:hover { transform: scale(1.06); }
.pychik-fab:active { transform: scale(.96); }
/* у режимі фокусу в тому ж куті висить плашка .focus-exit — ховаємо кнопку */
body.focus-mode .pychik-fab { opacity: 0; pointer-events: none; }
.pychik.pychik-open .pychik-fab { transform: scale(.92); opacity: .85; }
.pychik-svg-fab { width: 44px; height: 44px; display: block; }

@media (max-width: 768px) {
  .pychik-fab {
    bottom: calc(96px + var(--sat, 0px));
    right: 14px;
    width: 52px;
    height: 52px;
  }
  .pychik-svg-fab { width: 40px; height: 40px; }
}

/* ---------- Панель ---------- */
.pychik-panel {
  position: fixed;
  right: 24px;
  bottom: 92px;
  z-index: var(--pychik-z);
  width: 340px;  width: min(340px, calc(100vw - 28px));
  max-height: 70vh;  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  background: var(--nu-surface-solid, var(--md-surface, #14101f));
  border: 1px solid var(--nu-line, var(--md-outline-var, rgba(255, 255, 255, .12)));
  border-radius: 18px;
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .6), var(--md-elev3, none);
  color: var(--md-on-surface, #e6e1ec);
  opacity: 0;
  transform: translateY(10px) scale(.92);
  transform-origin: bottom right;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  overflow: hidden;
}
.pychik-panel.pychik-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (max-width: 768px) {
  .pychik-panel {
    right: 10px;
    left: 10px;
    width: auto;
    bottom: calc(160px + var(--sat, 0px));
    max-height: 62vh;    max-height: min(62vh, 480px);
  }
}

.pychik-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--nu-line, var(--md-outline-var, rgba(255, 255, 255, .1)));
  background: var(--nu-surface, rgba(255, 255, 255, .04));
  flex: 0 0 auto;
}
.pychik-svg-head { width: 40px; height: 40px; flex: 0 0 auto; }
.pychik-title {
  flex: 1;
  font-family: var(--md-font, inherit);
  font-size: 15px;
  font-weight: 700;
  color: var(--md-on-surface, #e6e1ec);
}
.pychik-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-var, #b8b2c4);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.pychik-close:hover { background: var(--nu-line, rgba(255, 255, 255, .1)); }
.pychik-head-btn {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--md-on-surface-var, #b8b2c4);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.pychik-head-btn:hover {
  background: var(--nu-line, rgba(255, 255, 255, .1));
  color: var(--md-primary, #6750a4);
}
.pychik-head-btn .material-icons { font-size: 19px; }

/* ---------- Повідомлення ---------- */
.pychik-msgs {
  flex: 1 1 auto;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
}
.pychik-msg { display: flex; }
.pychik-msg-bot { justify-content: flex-start; }
.pychik-msg-user { justify-content: flex-end; }
.pychik-bubble {
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.45;
  font-family: var(--md-font, inherit);
  word-wrap: break-word;
}
.pychik-bubble-bot {
  background: var(--nu-surface-2, var(--md-surface-dim, rgba(255, 255, 255, .07)));
  border: 1px solid var(--nu-line-soft, var(--md-outline-var, rgba(255, 255, 255, .08)));
  color: var(--md-on-surface, #e6e1ec);
  border-bottom-left-radius: 4px;
}
.pychik-bubble-user {
  background: var(--md-primary, #6750a4);
  color: var(--md-on-primary, #fff);
  border-bottom-right-radius: 4px;
}

/* ---------- Код і копіювання ---------- */
.pychik-code { margin-top: 8px; position: relative; }
.pychik-pre {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(0, 0, 0, .32);
  border: 1px solid var(--nu-line, var(--md-outline-var, rgba(255, 255, 255, .12)));
  color: #d7f5d7;
  font-family: var(--md-mono, "Space Mono", ui-monospace, Consolas, monospace);
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  white-space: pre;
}
body:not(.dark) .pychik-pre { background: rgba(0, 0, 0, .05); color: #1d3a1d; }
.pychik-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 8px;
  border-radius: 8px;
  border: 1px solid var(--nu-line, rgba(255, 255, 255, .18));
  background: var(--nu-surface-solid, rgba(20, 16, 31, .8));
  color: var(--md-on-surface-var, #cfc9db);
  font-family: var(--md-font, inherit);
  font-size: 10.5px;
  cursor: pointer;
  opacity: .85;
}
.pychik-copy:hover { opacity: 1; }

/* ---------- Чіпи й підказки ---------- */
.pychik-chips {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 12px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pychik-chips::-webkit-scrollbar { display: none; }
.pychik-chip {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--nu-line-strong, var(--md-outline-var, rgba(255, 255, 255, .18)));
  background: transparent;
  color: var(--md-on-surface-var, #c9c3d5);
  font-family: var(--md-font, inherit);
  font-size: 12px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.pychik-chip:hover {
  border-color: var(--md-primary, #6750a4);
  color: var(--md-on-surface, #e6e1ec);
}
.pychik-chip-tour {
  border-color: var(--md-primary, #6750a4);
  color: var(--md-primary, #6750a4);
  font-weight: 600;
}
.pychik-note {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed var(--nu-line, rgba(255, 255, 255, .12));
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--md-on-surface-var, #a8a2b4);
}
.pychik-note-label { font-weight: 700; color: var(--md-primary, #6750a4); }
.pychik-suggest { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pychik-suggest-label {
  font-size: 11.5px;
  color: var(--md-on-surface-var, #a8a2b4);
  margin-right: 2px;
}

/* ---------- Введення ---------- */
.pychik-row {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 8px 12px 12px;
  border-top: 1px solid var(--nu-line, var(--md-outline-var, rgba(255, 255, 255, .08)));
}
.pychik-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--nu-line-strong, var(--md-outline-var, rgba(255, 255, 255, .18)));
  background: var(--nu-surface, rgba(255, 255, 255, .05));
  color: var(--md-on-surface, #e6e1ec);
  font-family: var(--md-font, inherit);
  font-size: 13.5px;
  outline: none;
}
.pychik-input:focus { border-color: var(--md-primary, #6750a4); }
.pychik-input::placeholder { color: var(--md-on-surface-var, #8f89a0); }
.pychik-send {
  flex: 0 0 auto;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--md-primary, #6750a4);
  color: var(--md-on-primary, #fff);
  font-family: var(--md-font, inherit);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .15s ease;
}
.pychik-send:hover { filter: brightness(1.12); }

/* ---------- Маскот: кольори SVG ---------- */
.pychik-head,
.pychik-tuft { fill: var(--pychik-head); }
.pychik-tuft { fill: var(--pychik-accent); }
.pychik-tail { stroke: var(--pychik-head-dark); }
.pychik-sclera { fill: #ffffff; }
.pychik-pupil { fill: #1c2430; }
.pychik-lid {
  fill: var(--pychik-head);
  transform-box: fill-box;
  transform-origin: top center;
  transform: scaleY(0);
}
.pychik-cheek { stroke: var(--pychik-head-dark); }
.pychik-mouth-smile { stroke: #1c2430; }
.pychik-mouth-open { fill: #1c2430; stroke: #1c2430; }
.pychik-mouth-sad { stroke: #1c2430; }
.pychik-mouth-open,
.pychik-mouth-sad { display: none; }
.pychik-dots circle { fill: var(--pychik-accent); }

/* ---------- Маскот: анімації ---------- */
@keyframes pychik-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}
@keyframes pychik-blink {
  0%, 90%, 100% { transform: scaleY(0); }
  94%, 96% { transform: scaleY(1); }
}
@keyframes pychik-tail-wag {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-5deg); }
}
@keyframes pychik-dot {
  0%, 100% { opacity: .25; }
  50% { opacity: 1; }
}
.pychik-body { animation: pychik-bob 3.2s ease-in-out infinite; }
.pychik-tail {
  transform-box: fill-box;
  transform-origin: right center;
  animation: pychik-tail-wag 3.2s ease-in-out infinite;
}
.pychik-lid { animation: pychik-blink 5.5s ease-in-out infinite; }
.pychik-eye-r .pychik-lid { animation-delay: .04s; }
.pychik-pupil { transform-box: fill-box; transition: transform .25s ease; }

/* настрій: думає — погляд угору + крапки */
.pychik.mood-think .pychik-pupil { transform: translate(1.5px, -2.5px); }
.pychik.mood-think .pychik-dots { opacity: 1; }
.pychik.mood-think .pychik-dots circle:nth-child(1) { animation: pychik-dot 1.1s ease-in-out infinite; }
.pychik.mood-think .pychik-dots circle:nth-child(2) { animation: pychik-dot 1.1s ease-in-out .18s infinite; }
.pychik.mood-think .pychik-dots circle:nth-child(3) { animation: pychik-dot 1.1s ease-in-out .36s infinite; }
.pychik.mood-think .pychik-body { animation-duration: 2.2s; }

/* настрій: радіє — відкритий рот */
.pychik.mood-happy .pychik-mouth-smile { display: none; }
.pychik.mood-happy .pychik-mouth-open { display: block; }
.pychik.mood-happy .pychik-body { animation-duration: 1.6s; }

/* настрій: засмутився — сумний рот, приспущені повіки */
.pychik.mood-sad .pychik-mouth-smile { display: none; }
.pychik.mood-sad .pychik-mouth-sad { display: block; }
.pychik.mood-sad .pychik-lid { animation: none; transform: scaleY(.32); }
.pychik.mood-sad .pychik-body { animation-duration: 4.6s; }

@media (prefers-reduced-motion: reduce) {
  .pychik-body,
  .pychik-tail,
  .pychik-lid,
  .pychik-dots circle,
  .pychik-fab,
  .pychik-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Туторіал-автопілот ---------- */
/* Поки тур іде, сайт має бути недоступним для рук користувача. Шар лежить
   під підсвіткою (+30), лапкою (+40) і реплікою (+50), щоб керування туру
   лишалось клікабельним. На час завантаження модулів блокування знімають:
   вікно установщика нижче за цей шар, інакше його кнопок не дістати. */
.pychik-lock {
  display: none;
  position: fixed;
  top:0;right:0;bottom:0;left:0;
  z-index: calc(var(--pychik-z) + 20);
  background: transparent;
  pointer-events: auto;
}
.pychik.tour-locking .pychik-lock { display: block; }

/* Спотлайт: рамка навколо елемента, а велетенська зовнішня тінь затемнює решту екрана. */
.pychik-spot {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--pychik-z) + 30);
  box-sizing: border-box;
  border: 2px solid var(--md-primary, #6750a4);
  border-radius: 16px;
  box-shadow: 0 0 0 9999px rgba(6, 4, 12, .62), 0 0 0 6px rgba(103, 80, 164, .22);
  pointer-events: none;
  opacity: 0;
  transition: left .5s cubic-bezier(.45, .05, .25, 1), top .5s cubic-bezier(.45, .05, .25, 1),
              width .5s cubic-bezier(.45, .05, .25, 1), height .5s cubic-bezier(.45, .05, .25, 1),
              opacity .25s ease;
}
.pychik-spot.pychik-spot-on { opacity: 1; }

/* Маскот повзе від елемента до елемента; лівий верхній кут задається через transform. */
.pychik-pet {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--pychik-z) + 40);
  width: 104px;
  height: 104px;
  pointer-events: none;
  opacity: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .5));
  transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .3s ease;
}
.pychik-pet.pychik-pet-on { opacity: 1; }
.pychik-svg-pet { width: 104px; height: 104px; display: block; animation: pychik-crawl 2.6s ease-in-out infinite; }
/* Інша назва, ніж у «дихання» морди: власний ключ .pychik-body залишається незайманим. */
@keyframes pychik-crawl {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}

/* Лапка витягується з боку маскота й повертається в бік цілі. */
.pychik-paw {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--pychik-z) + 40);
  width: 44px;
  height: 44px;
  pointer-events: none;
  opacity: 0;
  transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .3s ease;
}
.pychik-paw.pychik-paw-on { opacity: 1; }
.pychik-svg-paw { width: 44px; height: 44px; display: block; animation: pychik-poke 1.5s ease-in-out infinite; }
.pychik-paw-arm { stroke: var(--md-primary, #6750a4); }
.pychik-paw-hand { fill: var(--md-primary, #6750a4); }
@keyframes pychik-poke {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(7px); }
}

/* Імітація кліку: кільце, що розростається в центрі елемента. */
.pychik-tap {
  position: fixed;
  left: 0;
  top: 0;
  z-index: calc(var(--pychik-z) + 45);
  width: 48px;
  height: 48px;
  box-sizing: border-box;
  border: 3px solid var(--md-primary, #6750a4);
  border-radius: 50%;
  pointer-events: none;
  animation: pychik-tap .65s ease-out forwards;
}
@keyframes pychik-tap {
  from { transform: scale(.3); opacity: .95; }
  to { transform: scale(1.7); opacity: 0; }
}

/* Коміксова репліка. */
.pychik-say {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: calc(var(--pychik-z) + 50);
  width: 340px;  width: min(340px, calc(100vw - 20px));
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--nu-surface-solid, var(--md-surface, #14101f));
  border: 1px solid var(--nu-line-strong, var(--md-outline-var, rgba(255, 255, 255, .16)));
  border-top: 3px solid var(--md-primary, #6750a4);
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, .65);
  color: var(--md-on-surface, #e6e1ec);
  font-family: var(--md-font, inherit);
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, left .5s cubic-bezier(.45, .05, .25, 1), top .5s cubic-bezier(.45, .05, .25, 1);
}
.pychik-say.pychik-say-open {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.pychik-say-text { font-size: 13.5px; line-height: 1.55; margin-bottom: 12px; }
.pychik-say-foot { display: flex; align-items: center; gap: 6px; }
.pychik-say-count {
  flex: 1;
  text-align: center;
  font-size: 11.5px;
  color: var(--md-on-surface-var, #9a94a8);
}
.pychik-say-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  background: transparent;
  border: 1px solid var(--nu-line-strong, var(--md-outline-var, rgba(255, 255, 255, .2)));
  color: var(--md-on-surface-var, #c9c3d5);
  transition: background .15s ease, opacity .15s ease;
}
.pychik-say-ico:hover { background: var(--nu-line, rgba(255, 255, 255, .08)); }
.pychik-say-ico:disabled { opacity: .35; cursor: default; }
.pychik-say-ico .material-icons { font-size: 18px; line-height: 1; }
.pychik-say-close { font-size: 20px; font-weight: 600; line-height: 1; }
.pychik-say-skip {
  padding: 7px 10px;
  border-radius: 999px;
  font-family: var(--md-font, inherit);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
  border: 1px solid var(--nu-line-strong, var(--md-outline-var, rgba(255, 255, 255, .2)));
  color: var(--md-on-surface-var, #c9c3d5);
  transition: background .15s ease;
}
.pychik-say-skip:hover { background: var(--nu-line, rgba(255, 255, 255, .08)); }
.pychik-say-next {
  padding: 7px 14px;
  border-radius: 999px;
  font-family: var(--md-font, inherit);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  background: var(--md-primary, #6750a4);
  color: var(--md-on-primary, #fff);
  transition: filter .15s ease;
}
.pychik-say-next:hover { filter: brightness(1.12); }

@media (max-width: 768px) {
  .pychik-pet, .pychik-svg-pet { width: 78px; height: 78px; }
  /* на вузькому екрані рядок керування ледь вміщується — трохи щільніше */
  .pychik-say { padding: 12px 12px; }
  .pychik-say-foot { gap: 4px; }
  .pychik-say-count { font-size: 11px; }
  .pychik-say-ico { width: 30px; height: 30px; }
  .pychik-say-skip { padding: 6px 8px; font-size: 11.5px; }
  .pychik-say-next { padding: 6px 11px; font-size: 12px; }
}

/* Зменшений рух: массток не повзе, а стрибками зʼявляється там, де треба. */
body.reduce-motion .pychik-spot,
body.reduce-motion .pychik-pet,
body.reduce-motion .pychik-paw,
body.reduce-motion .pychik-say,
body.reduce-motion .pychik-svg-pet,
body.reduce-motion .pychik-svg-paw,
body.reduce-motion .pychik-tap {
  transition: none !important;
  animation: none !important;
}

/* ---------- Пайтончик на дорозробці: велика печатка на панелі ---------- */
.pychik-dev {
  position: absolute;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.pychik-dev-text {
  max-width: 88%;
  padding: 10px 16px;
  border: 4px dashed rgba(255, 92, 92, .32);
  border-radius: 14px;
  color: rgba(255, 92, 92, .26);
  font-size: 30px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 3px;
  text-align: center;
  text-transform: uppercase;
  transform: rotate(-14deg);
  user-select: none;
}
.pychik-dev-tag {
  max-width: 44%;
  margin-inline-start: 6px;
  padding: 2px 7px;
  border: 1px solid rgba(255, 107, 107, .6);
  border-radius: 999px;
  color: #ff6b6b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 420px) {
  .pychik-dev-tag { display: none; }
  .pychik-dev-text { font-size: 22px; letter-spacing: 2px; }
}