/* Переменные и базовая типографика — на корне виджета (scoped, наследуются детьми).
       Раньше это был :root + body.dp-ai-page; в плагине ничего не вешаем на body/html. */
    .dp-ai-widget {
      --dp-ai-night: #0d1511;
      --dp-ai-night-soft: #101713;
      --dp-ai-forest: #18231d;
      --dp-ai-glass: rgba(17, 26, 21, 0.72);
      --dp-ai-glass-deep: rgba(11, 17, 14, 0.84);
      --dp-ai-border: rgba(205, 194, 154, 0.16);
      --dp-ai-border-bright: rgba(224, 207, 153, 0.27);
      --dp-ai-text: #efe9d9;
      --dp-ai-muted: #a39e8e;
      --dp-ai-sage: #98a78b;
      --dp-ai-sage-soft: rgba(139, 162, 139, 0.3);
      --dp-ai-gold: #c8ae72;
      --dp-ai-amber: #e0bd74;
      --dp-ai-warm: #f4dd9e;
      --dp-ai-shadow: rgba(2, 7, 5, 0.56);
      --dp-ai-radius: 28px;
      --dp-ai-ease: cubic-bezier(.2, .8, .2, 1);
      font-family: "Helvetica Neue", "Segoe UI", Arial, sans-serif;
      color: var(--dp-ai-text);
      -webkit-font-smoothing: antialiased;
    }

    /* box-sizing только внутри виджета — глобальный * { } сломал бы сетку темы */
    .dp-ai-widget,
    .dp-ai-widget *,
    .dp-ai-widget *::before,
    .dp-ai-widget *::after {
      box-sizing: border-box;
    }

    /* Глобальные resets html/body и body.dp-ai-page намеренно НЕ переносим:
       плагин не трогает страницу темы (её overflow/фон/шрифт/высота остаются как есть). */

    .dp-ai-widget button,
    .dp-ai-widget input {
      font: inherit;
      color: inherit;
    }

    .dp-ai-widget button {
      cursor: pointer;
    }

    .dp-ai-seed {
      --dp-ai-rx: 0deg;
      --dp-ai-ry: 0deg;
      --dp-ai-shift-x: 0px;
      --dp-ai-shift-y: 0px;
      position: fixed;
      right: 28px;
      bottom: 28px;
      display: grid;
      place-items: center;
      width: 72px;
      height: 72px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      pointer-events: auto;
      transform: perspective(500px) rotateX(var(--dp-ai-rx)) rotateY(var(--dp-ai-ry))
        translate(var(--dp-ai-shift-x), var(--dp-ai-shift-y));
      transform-style: preserve-3d;
      transition: transform 360ms var(--dp-ai-ease), opacity 360ms ease, visibility 0s linear;
      z-index: 3;
    }

    .dp-ai-seed:focus-visible,
    .dp-ai-control:focus-visible {
      outline: 1px solid rgba(234, 209, 142, 0.56);
      outline-offset: 4px;
    }

    .dp-ai-panel {
      position: fixed;
      right: 28px;
      bottom: 28px;
      display: flex;
      flex-direction: column;
      width: 430px;
      height: var(--dp-ai-panel-h, 560px);
      max-height: calc(100dvh - 24px);
      overflow: hidden;
      border: 1px solid var(--dp-ai-border);
      border-radius: var(--dp-ai-radius);
      background:
        linear-gradient(147deg, rgba(33, 44, 37, 0.64), rgba(11, 17, 14, 0.88) 45%, rgba(15, 23, 18, 0.8)),
        var(--dp-ai-glass);
      box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.48),
        inset 0 1px 0 rgba(234, 219, 173, 0.11);
      backdrop-filter: blur(25px) saturate(118%);
      -webkit-backdrop-filter: blur(25px) saturate(118%);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateY(22px) scale(0.86);
      transform-origin: calc(100% - 36px) calc(100% - 36px);
      transition:
        opacity 360ms ease 100ms,
        transform 560ms var(--dp-ai-ease) 70ms,
        visibility 0s linear 660ms;
      z-index: 2;
    }

    .dp-ai-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 82% 7%, rgba(221, 185, 106, 0.1), transparent 27%),
        linear-gradient(104deg, transparent, rgba(255, 240, 194, 0.032) 30%, transparent 51%);
      pointer-events: none;
    }

    .dp-ai-is-opening .dp-ai-panel,
    .dp-ai-is-open .dp-ai-panel {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0) scale(1);
      transition:
        opacity 360ms ease 100ms,
        transform 560ms var(--dp-ai-ease) 70ms,
        visibility 0s;
    }

    /* Ручка изменения высоты чата: компактный грип по центру НИЖНЕГО края.
       Активная панель привязана к верху (к моховику) и растёт вниз → тянем низ.
       Селектор `.dp-ai-panel .dp-ai-resize` (0,2,0) перебивает `.dp-ai-panel > *`
       (там position:relative/z-index:1 сбрасывали бы абсолютное позиционирование). */
    .dp-ai-panel .dp-ai-resize {
      position: absolute;
      top: auto;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 72px;
      height: 15px;
      cursor: ns-resize;
      z-index: 7;
      touch-action: none;
    }

    .dp-ai-panel .dp-ai-resize::before {
      content: "";
      position: absolute;
      bottom: 5px;
      left: 50%;
      width: 42px;
      height: 4px;
      transform: translateX(-50%);
      border-radius: 999px;
      background: rgba(234, 240, 210, 0.22);
      transition: background 180ms ease;
    }

    .dp-ai-panel .dp-ai-resize:hover::before {
      background: rgba(234, 240, 210, 0.42);
    }

    /* Эмодзи WordPress (<img class="emoji">) — не растягивать глобальным img{width:100%} темы. */
    .dp-ai-widget img.emoji {
      width: 1em !important;
      height: 1em !important;
      display: inline-block !important;
      vertical-align: -0.1em !important;
      margin: 0 .05em !important;
      padding: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      background: none !important;
    }

    /* Поле ввода: тема навязывает uppercase глобальным стилем input — отключаем. */
    .dp-ai-widget .dp-ai-question-input,
    .dp-ai-widget .dp-ai-question-input::placeholder {
      text-transform: none !important;
      letter-spacing: normal;
    }

    /* Скролл чата соседствует с плавным скроллом темы (Lenis и т.п.) — не «уезжаем» на страницу. */
    .dp-ai-chat-scroll {
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    /* Markdown в ответе ассистента (рендерится в .dp-ai-chat-bubble). */
    .dp-ai-widget .dp-ai-chat-bubble strong {
      font-weight: 600;
      color: rgba(255, 255, 250, 0.96);
    }

    .dp-ai-widget .dp-ai-chat-bubble em {
      font-style: italic;
    }

    .dp-ai-widget .dp-ai-chat-bubble a {
      color: rgba(213, 246, 103, 0.92);
      text-decoration: underline;
      text-underline-offset: 2px;
      overflow-wrap: anywhere;   /* длинные URL переносим, чтобы не вылезали за бабл */
      word-break: break-word;
    }

    .dp-ai-widget .dp-ai-chat-bubble code {
      font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
      font-size: 0.92em;
      padding: 1px 5px;
      border-radius: 5px;
      background: rgba(255, 255, 255, 0.08);
    }

    .dp-ai-widget .dp-ai-chat-bubble p {
      margin: 0 0 8px;
    }

    .dp-ai-widget .dp-ai-chat-bubble p:last-child {
      margin-bottom: 0;
    }

    .dp-ai-widget .dp-ai-chat-bubble ul,
    .dp-ai-widget .dp-ai-chat-bubble ol {
      margin: 4px 0 8px;
      padding-left: 20px;
    }

    .dp-ai-widget .dp-ai-chat-bubble ul:last-child,
    .dp-ai-widget .dp-ai-chat-bubble ol:last-child {
      margin-bottom: 0;
    }

    .dp-ai-widget .dp-ai-chat-bubble li {
      margin: 3px 0;
    }

    /* «ИИ-переход»: мягкое растворение — страница плавно размывается и слегка темнеет
       (через fade готового blur, без рывка радиуса), от точки клика расходится тёплый свет и затухает. */
    .dp-ai-warp {
      position: fixed;
      inset: 0;
      z-index: 99999;
      pointer-events: none;
      opacity: 0;
      background: rgba(9, 13, 10, 0.44);
      will-change: opacity;
    }

    .dp-ai-warp::before {
      content: "";
      position: absolute;
      left: var(--dp-ai-warp-x, 50%);
      top: var(--dp-ai-warp-y, 50%);
      width: 46vmax;
      height: 46vmax;
      margin: -23vmax 0 0 -23vmax;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(236, 246, 176, 0.32), rgba(166, 208, 94, 0.12) 46%, transparent 70%);
      filter: blur(8px);
      transform: scale(0.25);
      opacity: 0;
    }

    .dp-ai-warp.dp-ai-warp-on {
      /* blur задаём сразу, проявляем плавно через opacity — так мягче, чем анимировать радиус */
      -webkit-backdrop-filter: blur(13px) saturate(1.1);
      backdrop-filter: blur(13px) saturate(1.1);
      animation: dp-ai-warp-fade 950ms cubic-bezier(0.33, 0, 0.2, 1) forwards;
    }

    .dp-ai-warp.dp-ai-warp-on::before {
      animation: dp-ai-warp-bloom 950ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    }

    @keyframes dp-ai-warp-fade {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes dp-ai-warp-bloom {
      0%   { transform: scale(0.25); opacity: 0; }
      30%  { opacity: 0.8; }
      100% { transform: scale(2.6); opacity: 0; }
    }

    /* Моховик скрыт до загрузки его картинок — без вспышки; потом плавно появляется. */
    .dp-ai-widget:not(.dp-ai-ready) .dp-ai-seed {
      opacity: 0 !important;
      pointer-events: none;
    }

    /* Орб невидим (чат открыт или вкладка свёрнута) → гасим все CSS-анимации шара,
       чтобы не жечь GPU зря (рядом fullscreen-видео темы). Вид не меняется — шар и так скрыт. */
    .dp-ai-idle .dp-ai-moss-shell,
    .dp-ai-idle .dp-ai-moss-shell * {
      animation-play-state: paused !important;
    }

    /* «Свернуть»: крестик-светлячок — полупрозрачный, тёплого свечения, мерцает и иногда чуть блюрится. */
    .dp-ai-min-toggle {
      position: fixed;
      top: calc(var(--dp-ai-moss-top) - 4px);
      left: calc(var(--dp-ai-moss-left) + var(--dp-ai-moss-size) - 18px);
      display: grid;
      place-items: center;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: none;
      color: rgba(255, 243, 150, 0.9); /* тёплый цвет светлячка */
      cursor: pointer;
      opacity: 0;                      /* показ — на наведении (ниже) */
      transform: translateY(-3px);
      pointer-events: none;
      transition: opacity 220ms ease, transform 220ms ease;
      z-index: 5;
    }

    /* сам крестик — свечение + лёгкое мерцание/подблюр; виден только когда родитель проявлен */
    .dp-ai-min-toggle svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-linecap: round;
      animation: dp-ai-min-flicker 4.2s ease-in-out infinite;
    }

    @keyframes dp-ai-min-flicker {
      0%   { opacity: 0.60; filter: blur(0px)   drop-shadow(0 0 3px rgba(255, 237, 104, 0.70)) drop-shadow(0 0 7px rgba(211, 244, 103, 0.40)); }
      22%  { opacity: 0.90; filter: blur(0px)   drop-shadow(0 0 3px rgba(255, 237, 104, 0.78)) drop-shadow(0 0 8px rgba(211, 244, 103, 0.46)); }
      44%  { opacity: 0.52; filter: blur(0px)   drop-shadow(0 0 2px rgba(255, 237, 104, 0.60)) drop-shadow(0 0 6px rgba(211, 244, 103, 0.34)); }
      66%  { opacity: 0.82; filter: blur(0px)   drop-shadow(0 0 3px rgba(255, 237, 104, 0.72)) drop-shadow(0 0 7px rgba(211, 244, 103, 0.42)); }
      80%  { opacity: 0.68; filter: blur(0.8px) drop-shadow(0 0 4px rgba(255, 237, 104, 0.86)) drop-shadow(0 0 10px rgba(211, 244, 103, 0.52)); }
      88%  { opacity: 0.86; filter: blur(0px)   drop-shadow(0 0 3px rgba(255, 237, 104, 0.72)) drop-shadow(0 0 7px rgba(211, 244, 103, 0.42)); }
      100% { opacity: 0.60; filter: blur(0px)   drop-shadow(0 0 3px rgba(255, 237, 104, 0.70)) drop-shadow(0 0 7px rgba(211, 244, 103, 0.40)); }
    }

    .dp-ai-min-toggle:hover {
      color: rgba(255, 250, 190, 1);
    }

    /* Десктоп: показываем при наведении на моховик (или на саму кнопку). */
    @media (hover: hover) {
      .dp-ai-widget:not(.dp-ai-min):not(.dp-ai-is-open) .dp-ai-seed:hover ~ .dp-ai-min-toggle,
      .dp-ai-widget:not(.dp-ai-min):not(.dp-ai-is-open) .dp-ai-min-toggle:hover {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }
    }

    /* Тач-устройства (нет hover): лёгкая постоянная видимость, чтобы можно было свернуть. */
    @media (hover: none) {
      .dp-ai-widget:not(.dp-ai-min):not(.dp-ai-is-open) .dp-ai-min-toggle {
        opacity: 0.5;
        transform: translateY(0);
        pointer-events: auto;
      }
    }

    /* Свёрнутое состояние: моховик ужимается до небольшого шарика, украшения убраны. */
    .dp-ai-widget.dp-ai-min {
      --dp-ai-moss-size: 38px;
    }

    .dp-ai-min .dp-ai-min-toggle {
      display: none; /* свёрнут — клик по самому шарику разворачивает */
    }

    .dp-ai-min .dp-ai-fireflies,
    .dp-ai-min .dp-ai-tap-pulse,
    .dp-ai-min .dp-ai-tap-rings,
    .dp-ai-min .dp-ai-moss-spore,
    .dp-ai-min .dp-ai-bloom-dot,
    .dp-ai-min .dp-ai-orbit-star {
      display: none;
    }

    .dp-ai-is-opening .dp-ai-seed,
    .dp-ai-is-open .dp-ai-seed {
      opacity: 0;
      visibility: hidden;
      transform: translate(-10px, -14px) scale(0.72);
      pointer-events: none;
      transition: transform 390ms var(--dp-ai-ease), opacity 270ms ease, visibility 0s linear 400ms;
    }

    .dp-ai-control {
      position: relative;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(204, 190, 142, 0.13);
      border-radius: 50%;
      background: rgba(34, 42, 36, 0.33);
      color: rgba(213, 207, 188, 0.64);
      transition: background 220ms ease, border-color 220ms ease, color 220ms ease;
    }

    .dp-ai-control:hover {
      border-color: rgba(216, 196, 137, 0.27);
      background: rgba(76, 73, 57, 0.28);
      color: #e3dcc8;
    }

    .dp-ai-control::before,
    .dp-ai-control::after {
      content: "";
      position: absolute;
      width: 13px;
      height: 1px;
      background: currentColor;
    }

    .dp-ai-control::before {
      transform: rotate(45deg);
    }

    .dp-ai-control::after {
      transform: rotate(-45deg);
    }

    @media (max-width: 620px) {
      .dp-ai-seed {
        right: 20px;
        bottom: 22px;
      }

      .dp-ai-panel {
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        height: min(720px, calc(100dvh - 20px));
        border-radius: 30px 30px 23px 23px;
      }

      .dp-ai-panel .dp-ai-resize {
        display: none; /* на мобайле чат почти на весь экран — ресайз не нужен */
      }

      .dp-ai-min-toggle {
        display: none; /* на мобиле сворачивание не показываем */
      }
    }

    .dp-ai-widget {
      --dp-ai-moss-size: clamp(88px, 7.65vw, 110px);
      --dp-ai-moss-left: clamp(48px, 5.8vw, 92px);
      --dp-ai-moss-top: clamp(138px, 18vh, 184px);
      position: fixed;
      inset: 0;
      z-index: 9990;
      pointer-events: none;
    }

    .dp-ai-moss-filter {
      position: absolute;
      width: 0;
      height: 0;
      overflow: hidden;
    }

    .dp-ai-seed {
      position: fixed;
      top: var(--dp-ai-moss-top);
      right: auto;
      bottom: auto;
      left: var(--dp-ai-moss-left);
      display: grid;
      place-items: center;
      width: var(--dp-ai-moss-size);
      height: var(--dp-ai-moss-size);
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: transparent;
      pointer-events: auto;
      transform: none;
      transform-style: preserve-3d;
      transition: opacity 1200ms ease, filter 360ms ease, width 300ms var(--dp-ai-ease), height 300ms var(--dp-ai-ease);
      z-index: 3;
    }

    .dp-ai-seed:hover {
      filter: brightness(1.06) saturate(1.07);
    }

    /* Перетаскивание моховика (drag & drop) */
    .dp-ai-seed {
      cursor: grab;
      touch-action: none;          /* отдать жест pointer-логике, не дать странице скроллиться */
      -webkit-user-select: none;
      user-select: none;
    }

    .dp-ai-is-dragging .dp-ai-seed,
    .dp-ai-seed:active {
      cursor: grabbing;
    }

    /* во время перетаскивания моховик ходит 1:1, без инерции анимаций.
       Панель НЕ глушим: её left/top (следование за моховиком) и так без transition,
       а transform (смена стороны) должен оставаться анимируемым для плавного «переезда». */
    .dp-ai-is-dragging .dp-ai-moss-shell {
      animation-play-state: paused;
      transition: none;
    }

    /* «Переезд»: плавное перемещение моховика (и панели) при открытии/закрытии,
       когда домашняя позиция не вписывается в допустимую зону */
    .dp-ai-is-settling .dp-ai-seed {
      transition: left 380ms var(--dp-ai-ease), top 380ms var(--dp-ai-ease), filter 360ms ease;
    }

    .dp-ai-is-settling .dp-ai-panel {
      transition:
        left 380ms var(--dp-ai-ease),
        top 380ms var(--dp-ai-ease),
        opacity 340ms ease,
        transform 380ms var(--dp-ai-ease),
        visibility 0s linear 380ms;
    }

    .dp-ai-is-open .dp-ai-seed {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .dp-ai-moss-shell {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      filter:
        drop-shadow(0 18px 26px rgba(0, 0, 0, 0.34))
        drop-shadow(0 0 18px rgba(183, 222, 74, 0.32))
        drop-shadow(0 0 52px rgba(136, 190, 50, 0.16));
      transform: perspective(520px) rotateX(var(--dp-ai-rx, 0deg)) rotateY(var(--dp-ai-ry, 0deg));
      transition: transform 320ms var(--dp-ai-ease), filter 360ms ease;
      animation: dp-ai-moss-float 5.9s ease-in-out infinite;
      will-change: transform, translate;
    }

    .dp-ai-seed:hover .dp-ai-moss-shell,
    .dp-ai-seed:focus-visible .dp-ai-moss-shell,
    .dp-ai-is-open .dp-ai-moss-shell {
      filter:
        drop-shadow(0 20px 28px rgba(0, 0, 0, 0.33))
        drop-shadow(0 0 24px rgba(198, 236, 86, 0.42))
        drop-shadow(0 0 72px rgba(143, 202, 53, 0.24));
    }

    /* .dp-ai-moss-shell::after {
      content: "";
      position: absolute;
      inset: -14%;
      border-radius: 50%;
      background:
        radial-gradient(circle at 48% 49%, transparent 64%, rgba(203, 240, 86, 0.2) 74%, transparent 96%),
        repeating-conic-gradient(from 7deg, rgba(228, 255, 123, 0.64) 0 0.9deg, transparent 0.9deg 3.5deg);
      mask-image: radial-gradient(circle, transparent 64%, black 76%, black 94%, transparent 100%);
      opacity: 0.82;
      pointer-events: none;
      filter: blur(0.06px) drop-shadow(0 0 8px rgba(190, 238, 80, 0.48));
      mix-blend-mode: screen;
      animation: dp-ai-fiber-shimmer 6.8s ease-in-out infinite;
      z-index: 6;
    } */

    /* .dp-ai-seed:hover .dp-ai-moss-shell::after,
    .dp-ai-seed:focus-visible .dp-ai-moss-shell::after,
    .dp-ai-is-open .dp-ai-moss-shell::after {
      opacity: 1;
      filter: blur(0.04px) drop-shadow(0 0 12px rgba(202, 246, 92, 0.62));
    } */

    .dp-ai-moss-shell::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background:
        radial-gradient(circle at 32% 20%, rgba(239, 255, 178, 0.22), transparent 24%),
        radial-gradient(circle at 57% 69%, rgba(15, 32, 12, 0.42), transparent 57%),
        url("../img/moss-stage-1-new.webp") center / contain no-repeat;
      box-shadow:
        inset 10px 15px 26px rgba(226, 255, 153, 0.14),
        inset -19px -23px 33px rgba(0, 0, 0, 0.42);
      transition: opacity 260ms ease, background 360ms ease;
    }

    .dp-ai-is-open .dp-ai-moss-shell::before {
      background:
        radial-gradient(circle at 31% 19%, rgba(243, 255, 181, 0.22), transparent 23%),
        radial-gradient(circle at 58% 71%, rgba(14, 30, 11, 0.36), transparent 58%),
        url("../img/moss-stage-2-new.webp") center / contain no-repeat;
    }

    .dp-ai-three-ready .dp-ai-moss-shell::before {
      opacity: 0.18;
    }

    .dp-ai-moss-canvas {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      opacity: 0;
      transition: opacity 300ms ease;
    }

    .dp-ai-three-ready .dp-ai-moss-canvas {
      opacity: 1;
    }

    .dp-ai-moss-photo-stack {
      position: absolute;
      inset: -6%;
      width: 112%;
      height: 112%;
      overflow: visible;
      border-radius: 50%;
      pointer-events: none;
      transform: translateZ(18px) scale(1.015);
      transition: transform 780ms var(--dp-ai-ease);
      animation:
        dp-ai-photo-breathe 4.9s ease-in-out infinite,
        dp-ai-edge-morph 7.6s ease-in-out infinite;
      /* box-shadow:
        0 0 20px rgba(185, 225, 75, 0.26),
        0 0 48px rgba(133, 196, 49, 0.14); */
      will-change: transform, border-radius;
      z-index: 3;
    }

    .dp-ai-moss-photo-stack::before,
    .dp-ai-moss-photo-stack::after {
      content: "";
      position: absolute;
      inset: 5%;
      border-radius: inherit;
      pointer-events: none;
      z-index: 3;
    }

    .dp-ai-moss-photo-stack::before {
      background:
        linear-gradient(116deg, transparent 11%, rgba(255, 255, 255, 0.24) 25%, transparent 39%),
        radial-gradient(ellipse at 32% 18%, rgba(255, 255, 255, 0.28), transparent 25%),
        radial-gradient(ellipse at 66% 72%, rgba(197, 240, 115, 0.16), transparent 34%);
      mix-blend-mode: screen;
      opacity: 0.34;
      filter: blur(0.35px);
      transform: translate3d(-8%, -5%, 0) rotate(-8deg);
      animation: dp-ai-liquid-sheen 6.8s ease-in-out infinite;
    }

    .dp-ai-moss-photo-stack::after {
      inset: 8%;
      background:
        radial-gradient(circle at 50% 50%, rgba(234, 255, 184, 0.08) 0 4%, transparent 5% 18%, rgba(234, 255, 184, 0.13) 19%, transparent 20% 32%, rgba(234, 255, 184, 0.105) 33%, transparent 34% 47%, rgba(234, 255, 184, 0.085) 48%, transparent 49%),
        radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.12), transparent 16%),
        repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 10px);
      opacity: 0.14;
      backdrop-filter: blur(1.35px) saturate(1.18) contrast(1.08);
      -webkit-backdrop-filter: blur(1.35px) saturate(1.18) contrast(1.08);
      mix-blend-mode: soft-light;
      transform: translate3d(2%, 1%, 0) scale(0.94);
      animation: dp-ai-inner-tap 3.1s ease-in-out infinite;
    }

    .dp-ai-seed:hover .dp-ai-moss-photo-stack::after,
    .dp-ai-seed:focus-visible .dp-ai-moss-photo-stack::after {
      opacity: 0.32;
    }

    .dp-ai-is-open .dp-ai-moss-photo-stack::after {
      opacity: 0.2;
    }

    .dp-ai-is-open .dp-ai-moss-photo-stack {
      transform: translateZ(18px) scale(1.015);
    }

    .dp-ai-tap-pulse {
      position: absolute;
      left: 50%;
      top: 50%;
      display: grid;
      place-items: center;
      width: 52%;
      aspect-ratio: 1;
      border-radius: 50%;
      opacity: 0.72;
      pointer-events: none;
      transform: translate(-50%, -50%) scale(0.96);
      transition: opacity 260ms ease, filter 260ms ease, transform 320ms var(--dp-ai-ease);
      filter: none;
      z-index: 9;
    }

    .dp-ai-tap-pulse::before,
    .dp-ai-tap-pulse::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .dp-ai-tap-pulse::before {
      inset: 32%;
      background:
        radial-gradient(circle, rgba(250, 255, 225, 0.96) 0 24%, rgba(218, 246, 108, 0.48) 47%, rgba(255, 255, 255, 0.08) 70%, transparent 100%);
      box-shadow:
        0 0 6px rgba(229, 255, 142, 0.48),
        0 0 13px rgba(162, 219, 68, 0.22);
      animation: dp-ai-tap-core 2.35s ease-in-out infinite;
    }

    .dp-ai-tap-pulse::after {
      inset: 10%;
      border: 1px solid rgba(237, 255, 194, 0.5);
      box-shadow: 0 0 9px rgba(186, 235, 83, 0.12);
      animation: dp-ai-tap-wave 2.35s ease-out infinite;
    }

    .dp-ai-tap-pulse-label {
      position: absolute;
      top: 58%;
      left: 50%;
      color: rgba(248, 253, 229, 0.82);
      font-size: 8px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      transform: translateX(-50%);
      text-shadow: 0 0 5px rgba(210, 245, 119, 0.22);
      animation: dp-ai-tap-label 2.35s ease-in-out infinite;
    }

    .dp-ai-seed:hover .dp-ai-tap-pulse,
    .dp-ai-seed:focus-visible .dp-ai-tap-pulse {
      opacity: 0.86;
      filter: drop-shadow(0 0 7px rgba(199, 244, 93, 0.22));
      transform: translate(-50%, -50%) scale(1.04);
    }

    .dp-ai-is-open .dp-ai-tap-pulse,
    .dp-ai-is-open .dp-ai-seed:hover .dp-ai-tap-pulse,
    .dp-ai-is-open .dp-ai-seed:focus-visible .dp-ai-tap-pulse {
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.72);
    }

    .dp-ai-moss-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: inherit;
      opacity: 0;
      pointer-events: none;
      filter:
        url("#dp-ai-moss-wobble")
        saturate(1.08)
        contrast(1.05)
        drop-shadow(0 3px 8px rgba(23, 45, 8, 0.22));
      transition:
        opacity 660ms ease,
        clip-path 1050ms var(--dp-ai-ease),
        filter 520ms ease,
        transform 940ms var(--dp-ai-ease);
      will-change: opacity, clip-path, transform;
      z-index: 1;
    }

    .dp-ai-moss-photo-idle {
      opacity: 0.9;
      clip-path: circle(72% at 50% 50%);
      transform: rotate(-1deg) scale(1);
    }

    .dp-ai-moss-photo-bloom {
      opacity: 0;
      clip-path: circle(16% at 48% 42%);
      transform: rotate(-5deg) scale(1);
      filter:
        url("#dp-ai-moss-wobble")
        saturate(1.13)
        contrast(1.05)
        drop-shadow(0 4px 10px rgba(240, 223, 75, 0.18));
    }

    .dp-ai-is-open .dp-ai-moss-photo-idle {
      opacity: 0.24;
      clip-path: circle(44% at 53% 58%);
      transform: rotate(4deg) scale(1);
      filter:
        url("#dp-ai-moss-wobble")
        saturate(0.9)
        contrast(0.98)
        blur(0.45px)
        drop-shadow(0 3px 8px rgba(23, 45, 8, 0.18));
    }

    .dp-ai-is-open .dp-ai-moss-photo-bloom {
      opacity: 0.96;
      clip-path: circle(72% at 50% 50%);
      transform: rotate(0deg) scale(1);
    }

    .dp-ai-morph-glow {
      position: absolute;
      inset: -8%;
      border-radius: inherit;
      background:
        radial-gradient(circle at 44% 36%, rgba(245, 232, 80, 0.34), transparent 15%),
        radial-gradient(circle at 58% 63%, rgba(186, 225, 73, 0.24), transparent 28%),
        radial-gradient(circle, transparent 48%, rgba(215, 242, 102, 0.18) 57%, transparent 72%);
      opacity: 0;
      mix-blend-mode: screen;
      pointer-events: none;
      transform: scale(0.72) rotate(-8deg);
      transition: opacity 520ms ease, transform 960ms var(--dp-ai-ease);
      z-index: 4;
    }

    .dp-ai-seed:hover .dp-ai-morph-glow,
    .dp-ai-seed:focus-visible .dp-ai-morph-glow {
      opacity: 0.28;
      transform: scale(0.94) rotate(2deg);
    }

    .dp-ai-is-open .dp-ai-morph-glow {
      opacity: 0.72;
      transform: scale(1.04) rotate(5deg);
    }

    .dp-ai-fireflies {
      position: absolute;
      inset: -34%;
      overflow: visible;
      border-radius: 50%;
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 7;
    }

    .dp-ai-firefly {
      position: absolute;
      left: var(--dp-ai-firefly-left);
      top: var(--dp-ai-firefly-top);
      width: var(--dp-ai-firefly-size, 3px);
      height: var(--dp-ai-firefly-size, 3px);
      border-radius: 50%;
      background: rgba(255, 245, 146, 0.95);
      box-shadow:
        0 0 4px rgba(255, 237, 104, 0.82),
        0 0 13px rgba(211, 244, 103, 0.36);
      opacity: 0.18;
      transform: translate3d(0, 0, 0) scale(0.62);
      animation: dp-ai-firefly-drift var(--dp-ai-firefly-duration, 6s) ease-in-out infinite;
      animation-delay: var(--dp-ai-firefly-delay, 0s);
    }

    .dp-ai-seed:hover .dp-ai-firefly,
    .dp-ai-seed:focus-visible .dp-ai-firefly,
    .dp-ai-is-open .dp-ai-firefly {
      opacity: 0.36;
      box-shadow:
        0 0 5px rgba(255, 243, 123, 0.96),
        0 0 17px rgba(211, 244, 103, 0.5);
    }

    .dp-ai-firefly:nth-child(1) {
      --dp-ai-firefly-left: 28%;
      --dp-ai-firefly-top: 34%;
      --dp-ai-firefly-x1: 24px;
      --dp-ai-firefly-y1: -14px;
      --dp-ai-firefly-x2: 10px;
      --dp-ai-firefly-y2: 28px;
      --dp-ai-firefly-x3: -8px;
      --dp-ai-firefly-y3: -13px;
      --dp-ai-firefly-duration: 7.2s;
      --dp-ai-firefly-delay: -1.3s;
    }

    .dp-ai-firefly:nth-child(2) {
      --dp-ai-firefly-left: 58%;
      --dp-ai-firefly-top: 29%;
      --dp-ai-firefly-x1: -20px;
      --dp-ai-firefly-y1: 11px;
      --dp-ai-firefly-x2: 18px;
      --dp-ai-firefly-y2: 23px;
      --dp-ai-firefly-x3: 8px;
      --dp-ai-firefly-y3: -10px;
      --dp-ai-firefly-size: 2px;
      --dp-ai-firefly-duration: 6.4s;
      --dp-ai-firefly-delay: -3.5s;
    }

    .dp-ai-firefly:nth-child(3) {
      --dp-ai-firefly-left: 45%;
      --dp-ai-firefly-top: 57%;
      --dp-ai-firefly-x1: 22px;
      --dp-ai-firefly-y1: 18px;
      --dp-ai-firefly-x2: -18px;
      --dp-ai-firefly-y2: -11px;
      --dp-ai-firefly-x3: -5px;
      --dp-ai-firefly-y3: 9px;
      --dp-ai-firefly-duration: 8.1s;
      --dp-ai-firefly-delay: -2.2s;
    }

    .dp-ai-firefly:nth-child(4) {
      --dp-ai-firefly-left: 68%;
      --dp-ai-firefly-top: 62%;
      --dp-ai-firefly-x1: -24px;
      --dp-ai-firefly-y1: -20px;
      --dp-ai-firefly-x2: -8px;
      --dp-ai-firefly-y2: 16px;
      --dp-ai-firefly-x3: 12px;
      --dp-ai-firefly-y3: -7px;
      --dp-ai-firefly-size: 2px;
      --dp-ai-firefly-duration: 7.7s;
      --dp-ai-firefly-delay: -4.4s;
    }

    .dp-ai-firefly:nth-child(5) {
      --dp-ai-firefly-left: 36%;
      --dp-ai-firefly-top: 71%;
      --dp-ai-firefly-x1: 18px;
      --dp-ai-firefly-y1: -24px;
      --dp-ai-firefly-x2: -13px;
      --dp-ai-firefly-y2: -18px;
      --dp-ai-firefly-x3: 7px;
      --dp-ai-firefly-y3: 11px;
      --dp-ai-firefly-size: 2.5px;
      --dp-ai-firefly-duration: 6.9s;
      --dp-ai-firefly-delay: -0.7s;
    }

    .dp-ai-firefly:nth-child(6) {
      --dp-ai-firefly-left: 12%;
      --dp-ai-firefly-top: 54%;
      --dp-ai-firefly-x1: -18px;
      --dp-ai-firefly-y1: -16px;
      --dp-ai-firefly-x2: 16px;
      --dp-ai-firefly-y2: 10px;
      --dp-ai-firefly-x3: 5px;
      --dp-ai-firefly-y3: -22px;
      --dp-ai-firefly-size: 1.8px;
      --dp-ai-firefly-duration: 8.6s;
      --dp-ai-firefly-delay: -5.2s;
    }

    .dp-ai-firefly:nth-child(7) {
      --dp-ai-firefly-left: 79%;
      --dp-ai-firefly-top: 39%;
      --dp-ai-firefly-x1: 18px;
      --dp-ai-firefly-y1: 14px;
      --dp-ai-firefly-x2: -14px;
      --dp-ai-firefly-y2: 20px;
      --dp-ai-firefly-x3: -24px;
      --dp-ai-firefly-y3: -8px;
      --dp-ai-firefly-size: 1.7px;
      --dp-ai-firefly-duration: 7.9s;
      --dp-ai-firefly-delay: -1.8s;
    }

    .dp-ai-firefly:nth-child(8) {
      --dp-ai-firefly-left: 22%;
      --dp-ai-firefly-top: 18%;
      --dp-ai-firefly-x1: 13px;
      --dp-ai-firefly-y1: -19px;
      --dp-ai-firefly-x2: 26px;
      --dp-ai-firefly-y2: 2px;
      --dp-ai-firefly-x3: -9px;
      --dp-ai-firefly-y3: 12px;
      --dp-ai-firefly-size: 1.5px;
      --dp-ai-firefly-duration: 9.2s;
      --dp-ai-firefly-delay: -6s;
    }

    .dp-ai-firefly:nth-child(9) {
      --dp-ai-firefly-left: 64%;
      --dp-ai-firefly-top: 82%;
      --dp-ai-firefly-x1: -15px;
      --dp-ai-firefly-y1: 17px;
      --dp-ai-firefly-x2: -27px;
      --dp-ai-firefly-y2: -4px;
      --dp-ai-firefly-x3: 12px;
      --dp-ai-firefly-y3: -15px;
      --dp-ai-firefly-size: 2px;
      --dp-ai-firefly-duration: 8.8s;
      --dp-ai-firefly-delay: -3.9s;
    }

    .dp-ai-firefly:nth-child(10) {
      --dp-ai-firefly-left: 51%;
      --dp-ai-firefly-top: 9%;
      --dp-ai-firefly-x1: -11px;
      --dp-ai-firefly-y1: -21px;
      --dp-ai-firefly-x2: 18px;
      --dp-ai-firefly-y2: -8px;
      --dp-ai-firefly-x3: 21px;
      --dp-ai-firefly-y3: 15px;
      --dp-ai-firefly-size: 1.6px;
      --dp-ai-firefly-duration: 7.4s;
      --dp-ai-firefly-delay: -4.8s;
    }

    .dp-ai-firefly:nth-child(11) {
      --dp-ai-firefly-left: 6%;
      --dp-ai-firefly-top: 76%;
      --dp-ai-firefly-x1: 16px;
      --dp-ai-firefly-y1: 20px;
      --dp-ai-firefly-x2: 29px;
      --dp-ai-firefly-y2: -6px;
      --dp-ai-firefly-x3: -6px;
      --dp-ai-firefly-y3: -12px;
      --dp-ai-firefly-size: 1.8px;
      --dp-ai-firefly-duration: 8.3s;
      --dp-ai-firefly-delay: -2.7s;
    }

    .dp-ai-firefly:nth-child(12) {
      --dp-ai-firefly-left: 86%;
      --dp-ai-firefly-top: 68%;
      --dp-ai-firefly-x1: -21px;
      --dp-ai-firefly-y1: -18px;
      --dp-ai-firefly-x2: -6px;
      --dp-ai-firefly-y2: 21px;
      --dp-ai-firefly-x3: 17px;
      --dp-ai-firefly-y3: 5px;
      --dp-ai-firefly-size: 2.2px;
      --dp-ai-firefly-duration: 9s;
      --dp-ai-firefly-delay: -6.4s;
    }

    .dp-ai-tap-rings {
      position: absolute;
      inset: -16px;
      width: calc(100% + 32px);
      height: calc(100% + 32px);
      overflow: visible;
      pointer-events: none;
      opacity: 0.16;
      transition: opacity 260ms ease, transform 360ms var(--dp-ai-ease);
      animation: dp-ai-tap-turn 15s linear infinite;
    }

    .dp-ai-seed:hover .dp-ai-tap-rings,
    .dp-ai-seed:focus-visible .dp-ai-tap-rings {
      opacity: 0.62;
      transform: scale(1.035);
    }

    .dp-ai-is-open .dp-ai-tap-rings {
      opacity: 0.14;
      transform: scale(0.98);
    }

    .dp-ai-tap-arc {
      fill: none;
      stroke: rgba(246, 238, 207, 0.42);
      stroke-width: 0.85;
      stroke-dasharray: 4 7;
    }

    .dp-ai-tap-copy {
      fill: rgba(247, 239, 212, 0.46);
      font-size: 7px;
      font-weight: 500;
      letter-spacing: 0.28em;
    }

    .dp-ai-orbit-star {
      position: absolute;
      width: 3px;
      height: 3px;
      opacity: 0.28;
      pointer-events: none;
      filter: drop-shadow(0 0 7px rgba(240, 255, 177, 0.42));
      transition: opacity 360ms ease, filter 360ms ease, transform 520ms var(--dp-ai-ease);
      animation: dp-ai-star-drift 8.2s ease-in-out infinite;
    }

    .dp-ai-orbit-star::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 255, 221, 0.96) 0 32%, rgba(222, 251, 127, 0.46) 52%, transparent 72%);
      box-shadow:
        10px -7px 0 -1px rgba(239, 255, 186, 0.44),
        -8px 12px 0 -1px rgba(201, 238, 104, 0.28),
        15px 9px 0 -1.5px rgba(255, 249, 164, 0.26);
    }

    .dp-ai-orbit-star:nth-child(1) {
      top: 8%;
      left: 7%;
      width: 2px;
      height: 2px;
      animation-delay: -0.8s;
    }

    .dp-ai-orbit-star:nth-child(2) {
      top: -5%;
      left: 58%;
      width: 3px;
      height: 3px;
      animation-delay: -2.1s;
    }

    .dp-ai-orbit-star:nth-child(3) {
      top: 34%;
      right: -12%;
      width: 2px;
      height: 2px;
      animation-delay: -3.4s;
    }

    .dp-ai-orbit-star:nth-child(4) {
      right: 6%;
      bottom: 4%;
      width: 2px;
      height: 2px;
      animation-delay: -1.5s;
    }

    .dp-ai-orbit-star:nth-child(5) {
      bottom: 13%;
      left: -9%;
      width: 3px;
      height: 3px;
      animation-delay: -2.8s;
    }

    .dp-ai-orbit-star:nth-child(6) {
      top: 48%;
      left: 0;
      width: 2px;
      height: 2px;
      animation-delay: -4.1s;
    }

    .dp-ai-orbit-star:nth-child(7) {
      top: 18%;
      right: -22%;
      width: 4px;
      height: 4px;
      opacity: 0.2;
      filter: blur(0.7px) drop-shadow(0 0 14px rgba(255, 250, 224, 0.34));
      animation-name: dp-ai-star-drift-soft;
      animation-duration: 6.6s;
      animation-delay: -1.9s;
    }

    .dp-ai-orbit-star:nth-child(8) {
      bottom: 1%;
      left: 17%;
      width: 4px;
      height: 4px;
      opacity: 0.16;
      filter: blur(0.9px) drop-shadow(0 0 16px rgba(237, 255, 194, 0.32));
      animation-name: dp-ai-star-drift-soft;
      animation-duration: 7.2s;
      animation-delay: -3.6s;
    }

    .dp-ai-seed:hover .dp-ai-orbit-star,
    .dp-ai-seed:focus-visible .dp-ai-orbit-star,
    .dp-ai-is-open .dp-ai-orbit-star {
      opacity: 0.5;
      filter: drop-shadow(0 0 12px rgba(255, 247, 217, 0.58));
      transform: scale(1.16);
    }

    .dp-ai-seed:hover .dp-ai-orbit-star:nth-child(7),
    .dp-ai-seed:hover .dp-ai-orbit-star:nth-child(8),
    .dp-ai-seed:focus-visible .dp-ai-orbit-star:nth-child(7),
    .dp-ai-seed:focus-visible .dp-ai-orbit-star:nth-child(8),
    .dp-ai-is-open .dp-ai-orbit-star:nth-child(7),
    .dp-ai-is-open .dp-ai-orbit-star:nth-child(8) {
      opacity: 0.25;
      filter: blur(1px) drop-shadow(0 0 18px rgba(246, 255, 215, 0.4));
      transform: scale(1.05);
    }

    .dp-ai-bloom-dot {
      position: absolute;
      --flower-core: rgba(231, 202, 42, 0.82);
      --flower-petal: rgba(255, 255, 236, 0.62);
      --flower-petal-soft: rgba(249, 238, 141, 0.24);
      --flower-stem: rgba(181, 220, 93, 0.64);
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 50%, var(--flower-core) 0 18%, transparent 21%),
        radial-gradient(ellipse at 50% 9%, var(--flower-petal) 0 24%, transparent 32%),
        radial-gradient(ellipse at 91% 50%, var(--flower-petal) 0 24%, transparent 32%),
        radial-gradient(ellipse at 50% 91%, var(--flower-petal) 0 24%, transparent 32%),
        radial-gradient(ellipse at 9% 50%, var(--flower-petal) 0 24%, transparent 32%),
        radial-gradient(circle at 50% 50%, var(--flower-petal-soft) 0 58%, transparent 72%);
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px) scale(0.2);
      transform-origin: center bottom;
      filter: blur(0.18px) drop-shadow(0 0 4px rgba(255, 241, 146, 0.22));
      mix-blend-mode: screen;
      transition: opacity 260ms ease, filter 260ms ease, transform 640ms var(--dp-ai-ease);
      z-index: 4;
    }

    .dp-ai-bloom-dot::before {
      display: none;
    }

    .dp-ai-bloom-dot::after {
      content: "";
      position: absolute;
      inset: -62%;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 249, 191, 0.22), transparent 64%);
      opacity: 0.46;
      filter: blur(1.45px);
      z-index: -1;
    }

    .dp-ai-bloom-dot-one {
      top: 14%;
      left: 31%;
      --flower-tilt: -8deg;
      --flower-phase: -1.2s;
      transition-delay: 90ms;
    }

    .dp-ai-bloom-dot-two {
      top: 31%;
      right: 20%;
      --flower-core: rgba(235, 223, 151, 0.72);
      --flower-petal: rgba(255, 255, 246, 0.52);
      --flower-petal-soft: rgba(206, 238, 255, 0.18);
      --flower-tilt: 7deg;
      --flower-phase: -2.4s;
      width: 8px;
      height: 8px;
      transition-delay: 190ms;
    }

    .dp-ai-bloom-dot-three {
      right: 33%;
      bottom: 21%;
      --flower-core: rgba(239, 213, 64, 0.76);
      --flower-petal: rgba(248, 243, 218, 0.56);
      --flower-petal-soft: rgba(245, 226, 90, 0.22);
      --flower-tilt: -3deg;
      --flower-phase: -3.1s;
      width: 8px;
      height: 8px;
      transition-delay: 310ms;
    }

    .dp-ai-is-open .dp-ai-bloom-dot {
      opacity: 0.68;
      filter: blur(0.3px) drop-shadow(0 0 5px rgba(255, 241, 146, 0.24));
      transform: translateY(0) scale(1);
      animation: dp-ai-flower-breathe 5.4s ease-in-out infinite;
      animation-delay: var(--flower-phase, 0s);
    }

    .dp-ai-moss-spore {
      position: absolute;
      width: var(--dp-ai-inner-firefly-size, 3px);
      height: var(--dp-ai-inner-firefly-size, 3px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 252, 188, 0.96) 0 24%, rgba(220, 249, 102, 0.48) 52%, transparent 76%);
      opacity: 0.3;
      pointer-events: none;
      box-shadow:
        0 0 5px rgba(255, 242, 129, 0.42),
        0 0 12px rgba(190, 235, 88, 0.22);
      mix-blend-mode: screen;
      animation: dp-ai-inner-firefly-pulse var(--dp-ai-inner-firefly-duration, 3.8s) ease-in-out infinite;
      animation-delay: var(--dp-ai-inner-firefly-delay, 0s);
      transition: opacity 260ms ease, box-shadow 260ms ease;
      z-index: 6;
    }

    .dp-ai-moss-spore-one {
      top: 43%;
      left: 31%;
      --dp-ai-inner-firefly-delay: -0.6s;
    }

    .dp-ai-moss-spore-two {
      top: 55%;
      left: 62%;
      --dp-ai-inner-firefly-size: 2.5px;
      --dp-ai-inner-firefly-duration: 4.2s;
      --dp-ai-inner-firefly-delay: -1.8s;
    }

    .dp-ai-moss-spore-three {
      top: 31%;
      left: 50%;
      --dp-ai-inner-firefly-size: 2px;
      --dp-ai-inner-firefly-duration: 3.4s;
      --dp-ai-inner-firefly-delay: -2.5s;
    }

    .dp-ai-moss-spore-four {
      top: 66%;
      left: 42%;
      --dp-ai-inner-firefly-size: 2.2px;
      --dp-ai-inner-firefly-duration: 4.6s;
      --dp-ai-inner-firefly-delay: -3.1s;
    }

    .dp-ai-moss-spore-five {
      top: 38%;
      left: 73%;
      --dp-ai-inner-firefly-size: 2px;
      --dp-ai-inner-firefly-duration: 3.7s;
      --dp-ai-inner-firefly-delay: -1.2s;
    }

    .dp-ai-moss-spore-six {
      top: 62%;
      left: 24%;
      --dp-ai-inner-firefly-size: 1.8px;
      --dp-ai-inner-firefly-duration: 4.8s;
      --dp-ai-inner-firefly-delay: -3.7s;
    }

    .dp-ai-moss-spore-seven {
      top: 24%;
      left: 38%;
      --dp-ai-inner-firefly-size: 1.9px;
      --dp-ai-inner-firefly-duration: 4s;
      --dp-ai-inner-firefly-delay: -2.1s;
    }

    .dp-ai-moss-spore-eight {
      top: 47%;
      left: 47%;
      --dp-ai-inner-firefly-size: 2.4px;
      --dp-ai-inner-firefly-duration: 4.4s;
      --dp-ai-inner-firefly-delay: -2.9s;
    }

    .dp-ai-moss-spore-nine {
      top: 29%;
      left: 63%;
      --dp-ai-inner-firefly-size: 1.7px;
      --dp-ai-inner-firefly-duration: 3.6s;
      --dp-ai-inner-firefly-delay: -0.9s;
    }

    .dp-ai-moss-spore-ten {
      top: 71%;
      left: 58%;
      --dp-ai-inner-firefly-size: 1.9px;
      --dp-ai-inner-firefly-duration: 4.9s;
      --dp-ai-inner-firefly-delay: -4.1s;
    }

    .dp-ai-moss-spore-eleven {
      top: 52%;
      left: 78%;
      --dp-ai-inner-firefly-size: 1.6px;
      --dp-ai-inner-firefly-duration: 3.9s;
      --dp-ai-inner-firefly-delay: -1.5s;
    }

    .dp-ai-moss-spore-twelve {
      top: 74%;
      left: 34%;
      --dp-ai-inner-firefly-size: 1.8px;
      --dp-ai-inner-firefly-duration: 4.5s;
      --dp-ai-inner-firefly-delay: -3.3s;
    }

    .dp-ai-seed:hover .dp-ai-moss-spore,
    .dp-ai-seed:focus-visible .dp-ai-moss-spore {
      opacity: 0.52;
      box-shadow:
        0 0 7px rgba(255, 246, 151, 0.54),
        0 0 16px rgba(198, 240, 90, 0.3);
    }

    .dp-ai-is-open .dp-ai-moss-spore {
      opacity: 0.58;
      box-shadow:
        0 0 8px rgba(255, 246, 151, 0.6),
        0 0 18px rgba(198, 240, 90, 0.34);
    }

    .dp-ai-panel {
      position: fixed;
      top: calc(var(--dp-ai-moss-top) + 7px);
      right: auto;
      bottom: auto;
      left: var(--dp-ai-moss-left);
      /* Сторона панели задаётся через transform (его можно плавно анимировать на GPU).
         Следование за моховиком идёт через left/top (мгновенно), а сторона —
         через translateX(--dp-ai-panel-shift), поэтому «переезд» плавный, а не рывком. */
      --dp-ai-panel-shift: calc(var(--dp-ai-moss-size) + 24px); /* по умолчанию справа от моховика */
      --dp-ai-panel-pop: -12px;   /* стартовое смещение «поп-ин» при открытии */
      --dp-ai-panel-scale: 0.96;
      display: flex;
      flex-direction: column;
      width: min(358px, calc(100vw - 250px));
      /* высота настраивается ручкой (грип снизу) через --dp-ai-panel-h; иначе — авто. */
      height: var(--dp-ai-panel-h, min(482px, calc(100dvh - var(--dp-ai-moss-top) - 40px)));
      max-height: calc(100dvh - var(--dp-ai-moss-top) - 16px);
      min-height: 360px;
      overflow: hidden;
      padding: 0;
      border: 1px solid rgba(234, 242, 211, 0.16);
      border-radius: 22px;
      background:
        radial-gradient(circle at 15% 8%, rgba(244, 255, 208, 0.14), transparent 36%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.028) 38%, rgba(177, 217, 107, 0.058)),
        rgba(40, 43, 39, 0.68);
      color: rgba(255, 255, 255, 0.91);
      box-shadow:
        0 22px 46px rgba(0, 0, 0, 0.28),
        0 0 30px rgba(154, 206, 74, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(21px) saturate(136%) contrast(1.04);
      -webkit-backdrop-filter: blur(21px) saturate(136%) contrast(1.04);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(var(--dp-ai-panel-shift)) translateX(var(--dp-ai-panel-pop)) scale(var(--dp-ai-panel-scale));
      transform-origin: left center;
      transition:
        opacity 320ms ease,
        transform 430ms var(--dp-ai-ease),
        visibility 0s linear 430ms;
      z-index: 2;
    }

    .dp-ai-panel > * {
      position: relative;
      z-index: 1;
    }

    .dp-ai-panel::before,
    .dp-ai-panel::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .dp-ai-panel::before {
      top: 50%;
      left: -18px;
      width: 8px;
      height: 8px;
      background: rgba(48, 52, 47, 0.74);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 12px rgba(178, 218, 84, 0.12);
      transform: translateY(-50%);
    }

    .dp-ai-panel::after {
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.09), transparent 18%),
        radial-gradient(circle at 84% 10%, rgba(226, 245, 162, 0.12), transparent 28%);
      opacity: 0.84;
      z-index: 0;
    }

    .dp-ai-is-open .dp-ai-panel {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
      --dp-ai-panel-pop: 0px;
      --dp-ai-panel-scale: 1;
      /* transform задаём явно, чтобы перебить legacy-правило .dp-ai-is-open .dp-ai-panel
         (там translateY(0) scale(1) без горизонтального сдвига — иначе панель села бы под моховик) */
      transform: translateX(var(--dp-ai-panel-shift)) translateX(var(--dp-ai-panel-pop)) scale(var(--dp-ai-panel-scale));
      transition:
        opacity 340ms ease 110ms,
        transform 500ms var(--dp-ai-ease) 80ms,
        visibility 0s;
    }

    /* Док слева: если справа нет места — панель открывается слева от моховика.
       Меняем только величину сдвига (translateX) — между правой и левой стороной
       transform плавно интерполируется, поэтому панель «переезжает», а не прыгает. */
    .dp-ai-panel-left .dp-ai-panel {
      --dp-ai-panel-shift: calc(-100% - 24px); /* сдвиг влево на свою ширину + зазор */
      --dp-ai-panel-pop: 12px;                 /* поп-ин с правой стороны (к моховику) */
      transform-origin: right center;
    }

    .dp-ai-panel-left.dp-ai-is-open .dp-ai-panel {
      --dp-ai-panel-pop: 0px;
    }

    .dp-ai-panel-left .dp-ai-panel::before {
      left: auto;
      right: -18px;
    }

    .dp-ai-chat-header {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      gap: 11px;
      min-height: 64px;
      padding: 15px 106px 13px 17px;
      border-bottom: 1px solid rgba(226, 239, 191, 0.1);
      background: rgba(13, 18, 15, 0.18);
    }

    .dp-ai-chat-avatar {
      position: relative;
      flex: 0 0 auto;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 45% 38%, rgba(239, 255, 181, 0.88) 0 10%, transparent 12%),
        radial-gradient(circle at 50% 52%, rgba(114, 161, 46, 0.92), rgba(25, 49, 16, 0.8) 64%, rgba(10, 18, 13, 0.92));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 0 16px rgba(167, 222, 82, 0.22);
    }

    .dp-ai-chat-avatar::after {
      content: "";
      position: absolute;
      inset: 7px;
      border: 1px solid rgba(234, 255, 184, 0.24);
      border-radius: 50%;
    }

    .dp-ai-chat-meta {
      min-width: 0;
    }

    .dp-ai-chat-kicker {
      margin: 0 0 3px;
      color: rgba(223, 235, 187, 0.54);
      font-size: 9px;
      font-weight: 500;
      letter-spacing: 0.17em;
      text-transform: uppercase;
    }

    .dp-ai-chat-title {
      margin: 0;
      color: rgba(255, 255, 246, 0.92);
      font-size: 14px;
      font-weight: 400;
      line-height: 1.2;
    }

    .dp-ai-chat-status {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      margin-top: 4px;
      color: rgba(205, 221, 173, 0.58);
      font-size: 10px;
      line-height: 1;
    }

    .dp-ai-chat-status::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(201, 236, 93, 0.8);
      box-shadow: 0 0 9px rgba(201, 236, 93, 0.55);
    }

    .dp-ai-chat-scroll {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      overflow-y: auto;
      padding: 15px 15px 13px;
      scrollbar-width: thin;
      scrollbar-color: rgba(218, 236, 166, 0.2) transparent;
      scroll-behavior: auto;
    }

    .dp-ai-chat-scroll::-webkit-scrollbar {
      width: 6px;
    }

    .dp-ai-chat-scroll::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: rgba(218, 236, 166, 0.18);
    }

    .dp-ai-chat-message {
      display: flex;
      width: 100%;
    }

    .dp-ai-chat-message-assistant {
      justify-content: flex-start;
    }

    .dp-ai-chat-message-user {
      justify-content: flex-end;
    }

    .dp-ai-chat-bubble {
      max-width: min(252px, 86%);
      overflow-wrap: break-word;
      padding: 11px 12px 12px;
      border: 1px solid rgba(235, 242, 210, 0.1);
      border-radius: 16px 16px 16px 7px;
      background: rgba(255, 255, 255, 0.055);
      color: rgba(255, 255, 246, 0.88);
      font-size: 12.5px;
      font-weight: 300;
      line-height: 1.48;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }

    .dp-ai-chat-message-user .dp-ai-chat-bubble {
      border-color: rgba(221, 205, 139, 0.16);
      border-radius: 16px 16px 7px 16px;
      background:
        radial-gradient(circle at 18% 12%, rgba(255, 241, 174, 0.14), transparent 34%),
        rgba(150, 134, 76, 0.16);
      color: rgba(255, 248, 225, 0.92);
    }

    .dp-ai-chat-time {
      display: block;
      margin-top: 6px;
      color: rgba(221, 229, 201, 0.36);
      font-size: 9px;
      letter-spacing: 0.04em;
    }

    .dp-ai-chat-message-activity .dp-ai-chat-bubble {
      max-width: min(230px, 84%);
    }

    .dp-ai-chat-bubble-thinking,
    .dp-ai-chat-bubble-writing {
      position: relative;
      overflow: hidden;
      border-color: rgba(224, 246, 156, 0.14);
      background:
        radial-gradient(circle at 16% 12%, rgba(215, 246, 118, 0.14), transparent 32%),
        rgba(255, 255, 255, 0.058);
    }

    .dp-ai-chat-bubble-thinking {
      min-width: 116px;
    }

    .dp-ai-chat-bubble-writing {
      min-width: min(214px, 82%);
    }

    .dp-ai-chat-bubble-thinking::before,
    .dp-ai-chat-bubble-writing::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg, transparent 10%, rgba(245, 255, 212, 0.08) 38%, transparent 64%);
      opacity: 0.62;
      transform: translateX(-72%);
      animation: dp-ai-chat-activity-sheen 2.9s ease-in-out infinite;
      pointer-events: none;
    }

    .dp-ai-chat-thinking {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-height: 34px;
      padding-right: 2px;
      isolation: isolate;
    }

    .dp-ai-thinking-orb {
      position: relative;
      flex: 0 0 auto;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 37% 30%, rgba(247, 255, 198, 0.72) 0 7%, transparent 8%),
        radial-gradient(circle at 54% 56%, rgba(122, 174, 49, 0.95), rgba(28, 57, 18, 0.92) 62%, rgba(8, 18, 13, 0.94));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        inset -8px -10px 14px rgba(0, 0, 0, 0.27),
        0 0 16px rgba(175, 229, 70, 0.26);
      animation: dp-ai-thinking-orb-breathe 1.9s ease-in-out infinite;
    }

    .dp-ai-thinking-orb::before,
    .dp-ai-thinking-orb::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }

    .dp-ai-thinking-orb::before {
      inset: -5px;
      border: 1px solid rgba(225, 251, 157, 0.25);
      border-top-color: rgba(246, 255, 203, 0.62);
      filter: drop-shadow(0 0 5px rgba(193, 239, 86, 0.22));
      animation: dp-ai-thinking-ring 2.6s linear infinite;
    }

    .dp-ai-thinking-orb::after {
      inset: 34%;
      background: rgba(239, 255, 169, 0.72);
      box-shadow: 0 0 9px rgba(213, 250, 109, 0.56);
      animation: dp-ai-thinking-core 1.35s ease-in-out infinite;
    }

    .dp-ai-thinking-firefly {
      position: absolute;
      left: 50%;
      top: 50%;
      width: var(--dp-ai-thinking-dot, 2px);
      height: var(--dp-ai-thinking-dot, 2px);
      border-radius: 50%;
      background: rgba(247, 255, 206, 0.9);
      box-shadow: 0 0 7px rgba(213, 246, 104, 0.78);
      transform-origin: calc(var(--dp-ai-thinking-radius, 18px) * -1) 50%;
      animation: dp-ai-thinking-firefly var(--dp-ai-thinking-speed, 2.8s) ease-in-out infinite;
      animation-delay: var(--dp-ai-thinking-delay, 0s);
    }

    .dp-ai-thinking-firefly:nth-child(2) {
      --dp-ai-thinking-radius: 18px;
      --dp-ai-thinking-speed: 3.2s;
      --dp-ai-thinking-delay: -0.4s;
    }

    .dp-ai-thinking-firefly:nth-child(3) {
      --dp-ai-thinking-radius: 21px;
      --dp-ai-thinking-speed: 3.9s;
      --dp-ai-thinking-delay: -1.2s;
      --dp-ai-thinking-dot: 1.6px;
    }

    .dp-ai-thinking-firefly:nth-child(4) {
      --dp-ai-thinking-radius: 15px;
      --dp-ai-thinking-speed: 2.7s;
      --dp-ai-thinking-delay: -1.9s;
      --dp-ai-thinking-dot: 1.8px;
    }

    .dp-ai-thinking-firefly:nth-child(5) {
      --dp-ai-thinking-radius: 23px;
      --dp-ai-thinking-speed: 4.2s;
      --dp-ai-thinking-delay: -2.6s;
      --dp-ai-thinking-dot: 1.4px;
    }

    .dp-ai-thinking-label,
    .dp-ai-writing-status {
      position: relative;
      z-index: 1;
      color: rgba(244, 250, 223, 0.75);
      font-size: 11px;
      line-height: 1;
      letter-spacing: 0.02em;
    }

    .dp-ai-thinking-label::after {
      content: "";
      display: inline-block;
      width: 1.4em;
      text-align: left;
      animation: dp-ai-thinking-dots 1.35s steps(4, end) infinite;
    }

    .dp-ai-writing-status {
      display: flex;
      align-items: center;
      gap: 6px;
      width: fit-content;
      margin: 0 0 7px;
      color: rgba(220, 236, 176, 0.48);
      font-size: 9.5px;
      text-transform: lowercase;
    }

    .dp-ai-writing-status::before {
      content: "";
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: rgba(213, 246, 103, 0.76);
      box-shadow: 0 0 9px rgba(213, 246, 103, 0.48);
      animation: dp-ai-writing-dot 1.05s ease-in-out infinite;
    }

    .dp-ai-stream-text {
      position: relative;
      z-index: 1;
      display: inline;
      white-space: pre-wrap;
    }

    .dp-ai-writing-caret {
      position: relative;
      z-index: 1;
      display: inline-block;
      width: 7px;
      height: 7px;
      margin-left: 4px;
      border-radius: 50%;
      vertical-align: -0.12em;
      background:
        radial-gradient(circle at 37% 30%, rgba(247, 255, 198, 0.95) 0 22%, transparent 24%),
        radial-gradient(circle at 54% 56%, rgba(175, 229, 70, 0.95), rgba(28, 57, 18, 0.92) 72%);
      box-shadow: 0 0 8px rgba(202, 245, 90, 0.5);
      animation: dp-ai-bud-breathe 1.7s ease-in-out infinite; /* мшистый бутон вместо палочки */
    }

    .dp-ai-is-busy .dp-ai-moss-shell {
      filter:
        drop-shadow(0 20px 28px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 28px rgba(210, 244, 93, 0.5))
        drop-shadow(0 0 82px rgba(156, 215, 53, 0.28));
    }

    .dp-ai-is-busy .dp-ai-firefly,
    .dp-ai-is-busy .dp-ai-moss-spore {
      opacity: 0.9;
    }

    /* ===== «Живой Моховик»: ambient + thinking/writing реакции + визуал печати ===== */

    /* Ambient: едва заметный внутренний пульс свечения у закрытого/неактивного орба
       (.dp-ai-morph-glow при покое = opacity 0; даём ему тихое «дыхание»). Светлячки и
       так дрейфуют-мерцают сами. Элемент внутри .dp-ai-moss-shell → пауза при .dp-ai-idle. */
    .dp-ai-widget:not(.dp-ai-is-open) .dp-ai-seed:not(:hover) .dp-ai-morph-glow {
      animation: dp-ai-glow-ambient 7.5s ease-in-out infinite;
    }
    @keyframes dp-ai-glow-ambient {
      0%, 100% { opacity: 0.05; }
      50%      { opacity: 0.13; }
    }
    /* звёзды-орбиты — сиблинги шелла; паузим их при свёрнутой вкладке (бесплатный выигрыш) */
    .dp-ai-idle .dp-ai-orbit-star { animation-play-state: paused !important; }

    /* THINKING (до первого токена): спокойное «сосредоточенное» свечение внутрь */
    .dp-ai-is-thinking .dp-ai-morph-glow {
      opacity: 0.5;
      transform: scale(0.98) rotate(-3deg);
    }

    /* WRITING (стриминг): орб «наклоняется» к ответу и ярчает, частицы быстрее */
    .dp-ai-is-writing .dp-ai-moss-shell {
      filter:
        drop-shadow(0 20px 28px rgba(0, 0, 0, 0.32))
        drop-shadow(0 0 34px rgba(224, 250, 120, 0.58))
        drop-shadow(0 0 96px rgba(170, 224, 60, 0.32));
      transform: perspective(520px) rotateX(var(--dp-ai-rx, 0deg)) rotateY(var(--dp-ai-ry, 0deg)) scale(1.035);
    }
    .dp-ai-is-writing .dp-ai-morph-glow {
      opacity: 0.84;
      transform: scale(1.06) rotate(6deg);
    }
    .dp-ai-is-writing .dp-ai-firefly      { --dp-ai-firefly-duration: 3.4s; }
    .dp-ai-is-writing .dp-ai-moss-spore   { --dp-ai-inner-firefly-duration: 2.4s; }

    /* Бутон-курсор: периодическое колечко-спора + хрома-связь с орбом во время письма */
    .dp-ai-writing-caret::after {
      content: "";
      position: absolute;
      inset: -3px;
      border-radius: 50%;
      border: 1px solid rgba(235, 255, 169, 0.4);
      opacity: 0;
      animation: dp-ai-bud-ring 2.6s ease-out infinite;
      pointer-events: none;
    }
    .dp-ai-is-writing .dp-ai-writing-caret { box-shadow: 0 0 11px rgba(210, 244, 93, 0.6); }
    @keyframes dp-ai-bud-breathe {
      0%, 100% { transform: scale(0.9);  opacity: 0.78; }
      50%      { transform: scale(1.12); opacity: 1; }
    }
    @keyframes dp-ai-bud-ring {
      0%        { transform: scale(0.6); opacity: 0.5; }
      70%, 100% { transform: scale(1.5); opacity: 0; }
    }

    /* Моховая лоза: тонкая светящаяся линия растёт под текстом по --dp-ai-grow
       (ставится из JS = реальный прогресс печати). Яркий правый край = «точка роста». */
    .dp-ai-chat-bubble-writing::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 8px;
      height: 1px;
      transform-origin: left center;
      transform: scaleX(var(--dp-ai-grow, 0));
      transition: transform 140ms linear;
      background: linear-gradient(90deg, rgba(122, 174, 49, 0.12), rgba(213, 246, 103, 0.85));
      box-shadow: 0 0 6px rgba(202, 245, 90, 0.4);
      pointer-events: none;
      z-index: 1;
    }

    .dp-ai-file-tray {
      flex: 0 0 auto;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      max-height: 78px;
      overflow-y: auto;
      padding: 0 15px 10px;
    }

    .dp-ai-file-tray[hidden] {
      display: none;
    }

    .dp-ai-file-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
      max-width: 100%;
      height: 30px;
      padding: 0 8px;
      border: 1px solid rgba(229, 236, 198, 0.13);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      color: rgba(244, 246, 227, 0.78);
      font-size: 10.5px;
      line-height: 1;
    }

    .dp-ai-file-chip svg {
      flex: 0 0 auto;
      width: 13px;
      height: 13px;
    }

    .dp-ai-file-chip path {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.35;
    }

    .dp-ai-file-icon {
      flex: 0 0 auto;
      display: inline-flex;
    }

    .dp-ai-file-thumb {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
      margin-left: -3px;
      border-radius: 6px;
      object-fit: cover;
      display: block;
    }

    .dp-ai-chat-bubble .dp-ai-file-thumb {
      width: 30px;
      height: 30px;
    }

    .dp-ai-file-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .dp-ai-file-size {
      color: rgba(216, 226, 190, 0.44);
      white-space: nowrap;
    }

    .dp-ai-file-remove {
      position: relative;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 16px;
      height: 16px;
      margin-right: -3px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.07);
      color: rgba(239, 243, 220, 0.58);
      cursor: pointer;
      transition: color 180ms ease, background 180ms ease;
    }

    .dp-ai-file-remove:hover {
      background: rgba(255, 255, 255, 0.12);
      color: rgba(255, 255, 246, 0.9);
    }

    .dp-ai-file-remove::before,
    .dp-ai-file-remove::after {
      content: "";
      position: absolute;
      width: 7px;
      height: 1px;
      background: currentColor;
    }

    .dp-ai-file-remove::before {
      transform: rotate(45deg);
    }

    .dp-ai-file-remove::after {
      transform: rotate(-45deg);
    }

    .dp-ai-chat-bubble .dp-ai-file-chip {
      display: flex;
      width: fit-content;
      max-width: 100%;
      margin-top: 8px;
      background: rgba(255, 255, 255, 0.075);
    }

    .dp-ai-question-form {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      gap: 8px;
      margin: 0;
      padding: 12px 13px 13px;
      border-top: 1px solid rgba(226, 239, 191, 0.1);
      background: rgba(10, 14, 12, 0.24);
    }

    .dp-ai-attach,
    .dp-ai-question-send {
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 50%;
    }

    .dp-ai-attach {
      border: 1px solid rgba(229, 236, 198, 0.12);
      background: rgba(255, 255, 255, 0.055);
      color: rgba(230, 235, 208, 0.62);
      transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease;
    }

    .dp-ai-attach:hover,
    .dp-ai-attach:focus-visible {
      color: rgba(249, 248, 226, 0.9);
      border-color: rgba(229, 236, 198, 0.23);
      background: rgba(255, 255, 255, 0.09);
      transform: translateY(-1px);
    }

    .dp-ai-attach svg {
      width: 16px;
      height: 16px;
    }

    .dp-ai-attach path {
      fill: none;
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 1.35;
    }

    .dp-ai-file-input {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    .dp-ai-input-shell {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      align-items: center;
      height: 38px;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045)),
        rgba(255, 255, 255, 0.04);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -10px 18px rgba(0, 0, 0, 0.07);
      transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
    }

    .dp-ai-input-shell:focus-within {
      border-color: rgba(230, 220, 161, 0.34);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.065)),
        rgba(255, 255, 255, 0.05);
      box-shadow:
        0 0 0 3px rgba(188, 221, 92, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }

    .dp-ai-question-input {
      flex: 1 1 auto;
      min-width: 0;
      height: 100%;
      padding: 0 13px;
      border: 0;
      border-radius: inherit;
      outline: 0;
      background: transparent;
      color: rgba(255, 255, 255, 0.92);
      font-size: 12px;
      line-height: 38px;
    }

    .dp-ai-question-input::placeholder {
      color: rgba(255, 255, 255, 0.46);
    }

    .dp-ai-question-send {
      border: 1px solid rgba(222, 214, 156, 0.26);
      background:
        radial-gradient(circle at 33% 24%, rgba(255, 255, 221, 0.32), transparent 42%),
        linear-gradient(145deg, rgba(224, 213, 126, 0.22), rgba(112, 134, 57, 0.16));
      color: rgba(245, 240, 209, 0.9);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 5px 14px rgba(0, 0, 0, 0.18),
        0 0 16px rgba(198, 220, 99, 0.08);
      transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }

    .dp-ai-question-send:hover {
      transform: scale(1.04);
      border-color: rgba(238, 228, 163, 0.42);
      background:
        radial-gradient(circle at 33% 24%, rgba(255, 255, 224, 0.42), transparent 42%),
        linear-gradient(145deg, rgba(231, 219, 132, 0.3), rgba(126, 151, 64, 0.22));
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.26),
        0 7px 18px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(205, 226, 103, 0.14);
    }

    .dp-ai-question-send svg {
      width: 16px;
      height: 16px;
    }

    .dp-ai-question-send path {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.35;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .dp-ai-panel-answer {
      max-height: 0;
      margin: 0;
      overflow: hidden;
      opacity: 0;
      color: rgba(255, 255, 255, 0.72);
      font-size: 11.5px;
      font-weight: 300;
      line-height: 1.45;
      transition: max-height 360ms var(--dp-ai-ease), margin 260ms ease, opacity 260ms ease;
    }

    .dp-ai-panel-answer-visible {
      max-height: 80px;
      margin-top: 10px;
      opacity: 1;
    }

    .dp-ai-control {
      position: absolute;
      top: 10px;
      right: 10px;
      display: grid;
      place-items: center;
      width: 24px;
      height: 24px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 50%;
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.16), transparent 44%),
        rgba(255, 255, 255, 0.07);
      color: rgba(255, 255, 255, 0.62);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      transition: background 220ms ease, border-color 220ms ease, color 220ms ease, transform 220ms ease;
    }

    .dp-ai-control:hover {
      transform: scale(1.04);
      border-color: rgba(255, 255, 255, 0.18);
      background:
        radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.22), transparent 44%),
        rgba(255, 255, 255, 0.11);
      color: rgba(255, 255, 255, 0.86);
    }

    /* «Начать заново» — слева от «×»; гасим унаследованный крестик, ставим иконку перезапуска. */
    .dp-ai-reset {
      right: 40px;
    }

    .dp-ai-reset::before,
    .dp-ai-reset::after {
      display: none;
    }

    .dp-ai-reset svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* «Открыть в полном окне» — слева от «начать заново»; стеклянная кнопка с иконкой разворота. */
    .dp-ai-expand {
      right: 70px;
      border-color: rgba(213, 246, 103, 0.14);
      background:
        radial-gradient(circle at 32% 24%, rgba(213, 246, 103, 0.14), transparent 44%),
        rgba(255, 255, 255, 0.06);
      color: rgba(213, 246, 103, 0.72);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 12px rgba(167, 222, 82, 0.06);
    }

    .dp-ai-expand::before,
    .dp-ai-expand::after {
      display: none;
    }

    .dp-ai-expand svg {
      width: 13px;
      height: 13px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.45;
      stroke-linecap: round;
      stroke-linejoin: round;
      filter: drop-shadow(0 0 4px rgba(198, 236, 86, 0.22));
      transition: filter 220ms ease, transform 220ms ease;
    }

    .dp-ai-expand:hover,
    .dp-ai-expand:focus-visible {
      border-color: rgba(213, 246, 103, 0.32);
      background:
        radial-gradient(circle at 32% 24%, rgba(213, 246, 103, 0.24), transparent 44%),
        rgba(76, 92, 58, 0.22);
      color: rgba(236, 255, 176, 0.96);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 0 18px rgba(186, 230, 90, 0.16);
    }

    .dp-ai-expand:hover svg,
    .dp-ai-expand:focus-visible svg {
      filter: drop-shadow(0 0 7px rgba(210, 244, 93, 0.42));
      transform: scale(1.06);
    }

    /* Без fullpage-кнопки — прежний отступ шапки (только reset + close). */
    .dp-ai-panel:not(:has(.dp-ai-expand)) .dp-ai-chat-header {
      padding-right: 76px;
    }

    .dp-ai-panel:not(:has(.dp-ai-expand)) .dp-ai-reset {
      right: 40px;
    }

    @keyframes dp-ai-moss-float {
      0% {
        translate: 0 2px;
      }
      42% {
        translate: 0 -14px;
      }
      72% {
        translate: 0 -6px;
      }
      100% {
        translate: 0 2px;
      }
    }

    @keyframes dp-ai-star-drift {
      0% {
        opacity: 0.12;
        transform: translate3d(0, 0, 0) scale(0.72);
      }
      32% {
        opacity: 0.48;
        transform: translate3d(8px, -13px, 0) scale(1.04);
      }
      66% {
        opacity: 0.26;
        transform: translate3d(-7px, 8px, 0) scale(0.84);
      }
      100% {
        opacity: 0.12;
        transform: translate3d(0, 0, 0) scale(0.72);
      }
    }

    @keyframes dp-ai-star-drift-soft {
      0% {
        opacity: 0.06;
        transform: translate3d(0, 0, 0) scale(0.72);
      }
      45% {
        opacity: 0.24;
        transform: translate3d(12px, -16px, 0) scale(1.08);
      }
      72% {
        opacity: 0.16;
        transform: translate3d(-9px, 7px, 0) scale(0.88);
      }
      100% {
        opacity: 0.06;
        transform: translate3d(0, 0, 0) scale(0.72);
      }
    }

    @keyframes dp-ai-flower-breathe {
      0%,
      100% {
        filter: blur(0.2px) drop-shadow(0 0 4px rgba(255, 241, 146, 0.2));
        transform: translateY(0) scale(0.96) rotate(-1deg);
      }
      50% {
        filter: blur(0.34px) drop-shadow(0 0 6px rgba(255, 241, 146, 0.28));
        transform: translateY(-1px) scale(1.05) rotate(1.6deg);
      }
    }

    @keyframes dp-ai-chat-activity-sheen {
      0%,
      32% {
        opacity: 0;
        transform: translateX(-72%);
      }
      54% {
        opacity: 0.7;
      }
      100% {
        opacity: 0;
        transform: translateX(86%);
      }
    }

    @keyframes dp-ai-thinking-orb-breathe {
      0%,
      100% {
        transform: translateY(1px) scale(0.95);
        filter: saturate(1);
      }
      50% {
        transform: translateY(-1px) scale(1.06);
        filter: saturate(1.14);
      }
    }

    @keyframes dp-ai-thinking-ring {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes dp-ai-thinking-core {
      0%,
      100% {
        opacity: 0.36;
        transform: scale(0.7);
      }
      48% {
        opacity: 0.86;
        transform: scale(1.1);
      }
    }

    @keyframes dp-ai-thinking-firefly {
      0%,
      100% {
        opacity: 0.15;
        transform: rotate(0deg) translateX(var(--dp-ai-thinking-radius, 18px)) scale(0.7);
      }
      45% {
        opacity: 0.94;
        transform: rotate(168deg) translateX(calc(var(--dp-ai-thinking-radius, 18px) + 3px)) scale(1.08);
      }
      72% {
        opacity: 0.38;
        transform: rotate(255deg) translateX(calc(var(--dp-ai-thinking-radius, 18px) - 2px)) scale(0.86);
      }
      100% {
        transform: rotate(360deg) translateX(var(--dp-ai-thinking-radius, 18px)) scale(0.7);
      }
    }

    @keyframes dp-ai-thinking-dots {
      0% {
        content: "";
      }
      25% {
        content: ".";
      }
      50% {
        content: "..";
      }
      75%,
      100% {
        content: "...";
      }
    }

    @keyframes dp-ai-writing-dot {
      0%,
      100% {
        opacity: 0.35;
        transform: scale(0.78);
      }
      50% {
        opacity: 1;
        transform: scale(1.12);
      }
    }

    @keyframes dp-ai-writing-caret {
      0%,
      49% {
        opacity: 1;
      }
      50%,
      100% {
        opacity: 0.18;
      }
    }

    @keyframes dp-ai-tap-turn {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes dp-ai-tap-core {
      0%,
      100% {
        opacity: 0.38;
        transform: scale(0.82);
      }
      38% {
        opacity: 0.92;
        transform: scale(1.08);
      }
      68% {
        opacity: 0.5;
        transform: scale(0.94);
      }
    }

    @keyframes dp-ai-tap-wave {
      0% {
        opacity: 0;
        transform: scale(0.54);
      }
      22% {
        opacity: 0.52;
      }
      100% {
        opacity: 0;
        transform: scale(1.34);
      }
    }

    @keyframes dp-ai-tap-label {
      0%,
      100% {
        opacity: 0.22;
        transform: translateX(-50%) translateY(1px);
      }
      42% {
        opacity: 0.68;
        transform: translateX(-50%) translateY(0);
      }
    }

    @keyframes dp-ai-inner-tap {
      0%,
      100% {
        opacity: 0.12;
        transform: translate3d(2%, 1%, 0) scale(0.88);
      }
      48% {
        opacity: 0.34;
        transform: translate3d(0, 0, 0) scale(1.08);
      }
      72% {
        opacity: 0.18;
        transform: translate3d(-1%, 1%, 0) scale(0.98);
      }
    }

    @keyframes dp-ai-inner-firefly-pulse {
      0%,
      100% {
        transform: translate3d(0, 0, 0) scale(0.62);
        filter: blur(0.1px);
      }
      42% {
        transform: translate3d(1px, -1px, 0) scale(1.18);
        filter: blur(0);
      }
      70% {
        transform: translate3d(-1px, 1px, 0) scale(0.82);
        filter: blur(0.18px);
      }
    }

    @keyframes dp-ai-fiber-shimmer {
      0%,
      100% {
        opacity: 0.78;
        transform: rotate(0deg) scale(0.98);
      }
      50% {
        opacity: 1;
        transform: rotate(8deg) scale(1.02);
      }
    }

    @keyframes dp-ai-photo-breathe {
      0%,
      100% {
        scale: 1;
        rotate: -0.6deg;
      }
      44% {
        scale: 1.035;
        rotate: 0.8deg;
      }
      72% {
        scale: 0.992;
        rotate: -1.1deg;
      }
    }

    @keyframes dp-ai-edge-morph {
      0%,
      100% {
        border-radius: 52% 48% 50% 50% / 49% 54% 46% 51%;
      }
      34% {
        border-radius: 48% 52% 54% 46% / 52% 47% 53% 48%;
      }
      68% {
        border-radius: 54% 46% 47% 53% / 46% 52% 48% 54%;
      }
    }

    @keyframes dp-ai-liquid-sheen {
      0%,
      100% {
        opacity: 0.24;
        transform: translate3d(-9%, -6%, 0) rotate(-9deg) scale(0.98);
      }
      48% {
        opacity: 0.48;
        transform: translate3d(8%, 5%, 0) rotate(8deg) scale(1.05);
      }
    }

    @keyframes dp-ai-liquid-ripple {
      0%,
      100% {
        opacity: 0.16;
        transform: translate3d(7%, 4%, 0) rotate(12deg) scale(0.96);
      }
      50% {
        opacity: 0.31;
        transform: translate3d(-6%, -3%, 0) rotate(-8deg) scale(1.08);
      }
    }

    @keyframes dp-ai-firefly-drift {
      0% {
        opacity: 0.08;
        transform: translate3d(0, 0, 0) scale(0.48);
      }
      28% {
        opacity: 0.72;
        transform: translate3d(var(--dp-ai-firefly-x1), var(--dp-ai-firefly-y1), 0) scale(1.05);
      }
      61% {
        opacity: 0.3;
        transform: translate3d(var(--dp-ai-firefly-x2), var(--dp-ai-firefly-y2), 0) scale(0.72);
      }
      82% {
        opacity: 0.56;
        transform: translate3d(var(--dp-ai-firefly-x3), var(--dp-ai-firefly-y3), 0) scale(0.9);
      }
      100% {
        opacity: 0.08;
        transform: translate3d(0, 0, 0) scale(0.48);
      }
    }

    @media (max-width: 620px) {
      .dp-ai-widget {
        --dp-ai-moss-size: 74px;
        /* правый нижний угол: left = ширина экрана − размер шара − отступ */
        --dp-ai-moss-left: calc(100vw - var(--dp-ai-moss-size) - 20px);
        --dp-ai-moss-top: auto;
      }

      .dp-ai-seed {
        top: auto;
        bottom: 34px;
      }

      .dp-ai-panel {
        top: auto;
        right: 14px;
        bottom: 132px;
        left: 18px;
        height: min(470px, calc(100dvh - 172px));
        min-height: 390px;
        width: auto;
        max-width: none;
        --dp-ai-panel-shift: 0px; /* нижний лист не смещаем по горизонтали (сторона не нужна) */
      }

      .dp-ai-panel::before {
        top: auto;
        bottom: -15px;
        left: 54px;
      }

      .dp-ai-panel::after {
        inset: 0;
      }

      /* После первого перетаскивания моховик отвязывается от нижней привязки
         и подчиняется сохранённой позиции (top/left из CSS-переменных). */
      .dp-ai-is-free .dp-ai-seed {
        top: var(--dp-ai-moss-top);
        bottom: auto;
      }

      /* На узких экранах после перетаскивания чат открывается прямо ПОД моховиком,
         во всю ширину — шар её не перекрывает. (Сдвиг по горизонтали 0, см. базовое правило.) */
      .dp-ai-is-free .dp-ai-panel {
        top: calc(var(--dp-ai-moss-top) + var(--dp-ai-moss-size) + 12px);
        bottom: auto;
        left: 14px;
        right: 14px;
        width: auto;
        max-width: none;
        height: min(470px, calc(100dvh - var(--dp-ai-moss-top) - var(--dp-ai-moss-size) - 26px));
        min-height: 240px;
      }

      .dp-ai-is-free .dp-ai-panel::before {
        display: none; /* коннектор не нужен — панель и так под моховиком */
      }
    }

    /* Намеренно отключено: на многих рабочих ПК Windows стоит в режиме
       "наилучшее быстродействие" / VDI, из-за чего браузер сообщает
       prefers-reduced-motion: reduce и виджет замирал. Анимация включена
       принудительно для всех. Чтобы вернуть уважение к настройке ОС —
       раскомментировать блок ниже и заменить заглушку reducedMotion в скрипте. */
    /* @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 160ms !important;
        transition-delay: 0ms !important;
      }

      .dp-ai-unfurl {
        display: none;
      }

      .dp-ai-panel,
      .dp-ai-is-opening .dp-ai-panel,
      .dp-ai-is-open .dp-ai-panel {
        transform: none;
      }
    } */

    /* ===================================================================== */
    /* СКИН «КОНСЕРВАТИВНЫЙ» (.dp-ai-skin-plain): без 3D-орба, плоско,        */
    /* острые углы, шрифт TT Fors, незаметная плашка-кнопка справа снизу.    */
    /* Цвета панели (тёмное стекло) НЕ трогаем — меняем только форму/шрифт.  */
    /* ===================================================================== */

    /* Орб и его декор в plain не рендерятся, но прячем на всякий случай + коннектор-точку панели. */
    .dp-ai-skin-plain .dp-ai-seed,
    .dp-ai-skin-plain .dp-ai-min-toggle,
    .dp-ai-skin-plain .dp-ai-moss-filter,
    .dp-ai-skin-plain .dp-ai-resize,
    .dp-ai-skin-plain .dp-ai-panel::before {
      display: none !important;
    }

    /* Плашка-кнопка «ИИ ассистент» — фиксирована справа снизу, острые углы, фирменная бронза на hover. */
    .dp-ai-skin-plain .dp-ai-seed-plain {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 2147483000;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 11px 15px;
      background: rgba(36, 48, 40, 0.5); /* фирменный тёмно-зелёный, полупрозрачный */
      backdrop-filter: blur(16px) saturate(120%);
      -webkit-backdrop-filter: blur(16px) saturate(120%);
      color: #F5F5F5;
      font-family: "TT Fors", "Helvetica Neue", Arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.01em;
      line-height: 1;
      border: none;
      border-radius: 0;
      cursor: pointer;
      pointer-events: auto; /* корень .dp-ai-widget = pointer-events:none; кнопку надо включить явно */
      box-shadow: 0 8px 26px rgba(0, 0, 0, 0.3);
      transition: background 0.25s ease, transform 0.25s ease, opacity 0.25s ease, right 0.35s ease;
    }
    /* «Отъезжает» левее, когда появляется темовая кнопка «наверх» (класс button_top_active при скролле вверх).
       :has() — современные браузеры; на старых кнопка просто останется в углу (мягкая деградация). */
    body:has(.button_top_active) .dp-ai-skin-plain .dp-ai-seed-plain {
      right: 84px;
    }
    .dp-ai-skin-plain .dp-ai-seed-plain svg { display: none; } /* без иконки — только текст */
    .dp-ai-skin-plain .dp-ai-seed-plain:hover { background: rgba(40, 53, 44, 0.74); }
    .dp-ai-skin-plain .dp-ai-seed-plain:active { background: rgba(28, 38, 31, 0.82); }
    /* при открытом чате кнопку прячем (у панели свой крестик) */
    .dp-ai-skin-plain.dp-ai-is-open .dp-ai-seed-plain {
      opacity: 0;
      pointer-events: none;
      transform: translateY(8px);
    }

    /* Панель: переякориваем фиксированно вправо-вниз (в plain нет орба и его CSS-переменных позиции). */
    .dp-ai-skin-plain .dp-ai-panel {
      position: fixed !important;
      top: auto !important;
      left: auto !important;
      right: 20px !important;
      bottom: 20px !important;
      width: min(290px, calc(100vw - 40px)) !important;  /* ~-23% к прежним 376px */
      height: min(415px, calc(100dvh - 104px)) !important; /* ~-23% к прежним 540px */
      max-width: none !important;
      min-height: 0 !important;
      --dp-ai-panel-shift: 0px;
      --dp-ai-panel-pop: 0px;
      transform: none !important;
      transform-origin: bottom right !important;
    }

    /* Убираем декоративную «круговую линию» (::after-арка с бликом) и бордер/верхний highlight панели — чистый плоский вид. */
    .dp-ai-skin-plain .dp-ai-panel::after { display: none !important; }
    .dp-ai-skin-plain .dp-ai-panel {
      border-color: transparent !important;
      box-shadow: 0 22px 46px rgba(0, 0, 0, 0.34) !important;
    }

    /* Острые углы везде. */
    .dp-ai-skin-plain .dp-ai-panel,
    .dp-ai-skin-plain .dp-ai-chat-bubble,
    .dp-ai-skin-plain .dp-ai-input-shell,
    .dp-ai-skin-plain .dp-ai-question-send,
    .dp-ai-skin-plain .dp-ai-file-chip,
    .dp-ai-skin-plain .dp-ai-file-thumb,
    .dp-ai-skin-plain .dp-ai-file-remove,
    .dp-ai-skin-plain .dp-ai-control,
    .dp-ai-skin-plain .dp-ai-expand,
    .dp-ai-skin-plain .dp-ai-writing-caret,
    .dp-ai-skin-plain .dp-ai-chat-scroll::-webkit-scrollbar-thumb {
      border-radius: 0 !important;
    }
    /* индикатор «Думаю…» — оставляем КРУГЛЫМ (это шарик-лоадер, не должен быть квадратным) */
    .dp-ai-skin-plain .dp-ai-thinking-orb,
    .dp-ai-skin-plain .dp-ai-thinking-orb::before,
    .dp-ai-skin-plain .dp-ai-thinking-orb::after {
      border-radius: 50% !important;
    }

    /* Аватар в шапке: круглый, с картинкой мха + лёгкая анимация (перекрёстный «расцвет» двух стадий).
       --dp-ai-moss-zoom зумит фон, чтобы обрезать вшитый в фото ободок «чашки» (зелёную прослойку):
       больше % → сильнее кроп. Если ободок ещё проглядывает — поднять до 165–180%. */
    .dp-ai-skin-plain .dp-ai-chat-avatar {
      --dp-ai-moss-zoom: 150%;
      overflow: hidden;
      background: center / var(--dp-ai-moss-zoom) no-repeat url("../img/moss-stage-1-new.webp"),
                 radial-gradient(circle at 50% 52%, #35551f, #16221a);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
    }
    .dp-ai-skin-plain .dp-ai-chat-avatar::after {
      inset: 0;
      border: 0;
      background: center / var(--dp-ai-moss-zoom) no-repeat url("../img/moss-stage-2-new.webp");
      opacity: 0;
      animation: dp-ai-avatar-moss 5.5s ease-in-out infinite;
    }
    @keyframes dp-ai-avatar-moss {
      0%, 100% { opacity: 0;    transform: scale(1)    rotate(0deg); }
      50%      { opacity: 0.92; transform: scale(1.05) rotate(2.5deg); }
    }

    /* Полностью безрамочно: убираем бордеры баблов/инпута/кнопки/чипов и разделители шапки/формы.
       Фон у элементов остаётся — они различимы заливкой, а не рамкой. */
    .dp-ai-skin-plain .dp-ai-chat-bubble,
    .dp-ai-skin-plain .dp-ai-input-shell,
    .dp-ai-skin-plain .dp-ai-question-send,
    .dp-ai-skin-plain .dp-ai-file-chip,
    .dp-ai-skin-plain .dp-ai-chat-header,
    .dp-ai-skin-plain .dp-ai-question-form {
      border: none !important;
    }

    /* Шрифт сайта (TT Fors объявлен в теме). */
    .dp-ai-skin-plain,
    .dp-ai-skin-plain .dp-ai-chat-title,
    .dp-ai-skin-plain input,
    .dp-ai-skin-plain textarea,
    .dp-ai-skin-plain button {
      font-family: "TT Fors", "Helvetica Neue", Arial, sans-serif !important;
    }

    @media (max-width: 620px) {
      .dp-ai-skin-plain .dp-ai-panel {
        right: 12px !important;
        left: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        height: min(58dvh, 430px) !important; /* меньше, чем было (72dvh/560) */
      }
      .dp-ai-skin-plain .dp-ai-seed-plain {
        right: 14px;
        bottom: 14px;
      }
      body:has(.button_top_active) .dp-ai-skin-plain .dp-ai-seed-plain {
        right: 78px;
      }
    }