.survey-widget {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 999;
    font-size: 14px;

    /* ===== Card utama — langsung tampil, mirip box komentar ===== */
    .card {
      width: 300px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 20px 40px -10px rgba(15, 23, 42, 0.25);
      border: 1px solid #e2e8f0;
      overflow: hidden;
      transform-origin: bottom right;
      transition: transform .18s ease, opacity .18s ease;

      &.bounce {
        animation: card-bounce 0.9s ease;
      }

      &.hidden {
        display: none;
      }

      .card-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 14px 0;

        .card-question {
          font-size: 14px;
          font-weight: 600;
          color: #0f172a;
          margin: 0 0 2px;
          line-height: 1.4;
        }

        .card-subtitle {
          font-size: 12px;
          color: #64748b;
          margin: 0;
          line-height: 1.4;
        }

        .close-btn {
          flex-shrink: 0;
          width: 24px;
          height: 24px;
          border: none;
          background: none;
          cursor: pointer;
          color: #94a3b8;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: background .12s ease, color .12s ease;

          &:hover { background: #f1f5f9; color: #475569; }

          svg { width: 16px; height: 16px; }
        }
      }

      .card-body {
        padding: 10px 14px 14px;

        .emoji-row {
          display: flex;
          justify-content: space-between;
          gap: 6px;
          margin: 10px 0 12px;

          .emoji-btn {
            flex: 1;
            border: 1px solid #e2e8f0;
            background: #f8fafc;
            border-radius: 10px;
            padding: 8px 0;
            cursor: pointer;
            font-size: 20px;
            transition: transform .12s ease, border-color .12s ease, background .12s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;

            .emoji-label {
              font-size: 9px;
              color: #94a3b8;
              font-weight: 500;
            }

            &:hover { transform: translateY(-2px); border-color: #cbd5e1; }

            &.is-selected {
              background: #0f172a;
              border-color: #0f172a;

              .emoji-label { color: #cbd5e1; }
            }
          }
        }

        /* Box komentar — textarea + tombol kirim nyatu jadi satu wadah */
        .comment-box {
          display: flex;
          align-items: flex-end;
          gap: 6px;
          border: 1px solid #94a3b8;
          border-radius: 14px;
          background: #f8fafc;
          padding: 8px 8px 8px 12px;
          transition: border-color .12s ease, box-shadow .12s ease;

          &:focus-within {
            border-color: #64748b;
            box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
          }

          textarea {
            flex: 1;
            border: none;
            outline: none;
            background: transparent;
            resize: none;
            font-family: inherit;
            font-size: 13px;
            color: #2d3748;
            max-height: 90px;
            padding: 4px 0;

            &::placeholder { color: #64748b; }
          }

          .send-btn {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: none;
            background: #0f172a;
            color: #fff;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity .12s ease, transform .12s ease;

            &:disabled { opacity: 0.35; cursor: not-allowed; }
            &:not(:disabled):hover { transform: scale(1.06); }

            svg { width: 15px; height: 15px; }
          }
        }
      }

      .card-thanks {
        display: none;
        padding: 26px 16px 24px;
        text-align: center;

        &.show { display: block; }

        .thanks-icon {
          width: 40px;
          height: 40px;
          margin: 0 auto 10px;
          border-radius: 50%;
          background: #dcfce7;
          display: flex;
          align-items: center;
          justify-content: center;

          svg { width: 20px; height: 20px; color: #16a34a; }
        }

        .thanks-title {
          font-size: 14px;
          font-weight: 600;
          color: #0f172a;
          margin: 0 0 4px;
        }

        .thanks-sub {
          font-size: 12px;
          color: #64748b;
          margin: 0;
        }
      }
    }

    /* ===== Tombol mengambang — muncul kalau card ditutup ===== */
    .fab {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #0f172a;
      border: none;
      cursor: pointer;
      align-items: center;
      justify-content: center;
      box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.4);
      transition: transform .15s ease;
      display: none;
      margin-left: auto;

      &.show { display: flex; }

      &:hover { transform: scale(1.06); }

      &.bounce {
        animation: card-bounce 0.9s ease;
      }

      svg { width: 22px; height: 22px; color: #fff; }
    }
  }

  @keyframes card-bounce {
    0%   { transform: translateY(0); }
    25%  { transform: translateY(-14px); }
    45%  { transform: translateY(0); }
    62%  { transform: translateY(-7px); }
    78%  { transform: translateY(0); }
    90%  { transform: translateY(-3px); }
    100% { transform: translateY(0); }
  }